Over 45% of email opens occur Why are mobile-friendly emails important in eCommerce on mobile—which means with mobile-friendly email design, you can further improve the open rate.
Now compound that with the fact that most online shoppers prefer to do their exploring and comparing on their mobile devices, and then purchases through desktops.
Which brings us to:
Why are mobile-friendly emails important in eCommerce?
46% of the total email opens actually happen on mobile.
Similarly, 1 in 5 email campaigns must be optimized for mobile to gain some traction.
On top of that, B2C emails see 48% more opens on mobile than B2B emails.
Plus, there’s the 😱 proposition of offending 75% of Americans, who’ve been found to delete emails that can’t be read on mobile.
More than fancy statistics, what this means is: if you don’t have mobile-optimized email design, you run the risk of losing the attention of those who open and read on-the-go.
So here are 35 guidelines to design mobile-friendly emails.
1. Subject lines with less than 30 characters
2. Use pre header to build context fast
3. Maintain a single column
4. Keep emails 600 pixels wide
5. Don’t go beyond 3000 px (email height)
6. Adjust font for scannability
7. Adjust your content margins for readability
8. Use content summary at the top (especially for newsletters)
9. Limit microcopy (& icons)
10. Feature no more than 200 words
11. Use bullets & pointers
12. Break long emails into sections
13. Improve content structure with HTML markups
14. Set up dynamic email content
15. Make everything fat-finger friendly
16. Make sure images load fast (even on slower connections)
17. Don’t forget those image alt tags
18. Avoid images with *granular* details
19. Optimize for ‘dark mode’
20. Increase image size for retina displays
21. Use more location-based keywords
22. Code your CTAs (instead of using images)
23. Feature a max of 2 CTAs (& isolate them)
24. Go back to good ol’ text-only emails
25. Use white space smartly
26. Remove nav bar (or keep it clean)
27. Left-align copy (for familiarity)
28. Avoid hover, use tap
29. Leverage ARIA to offer more info to screen readers
30. Design for portrait & landscape views
31. Avoid using inline frames
32. Use a prominent layout / colors for social buttons
33. Use only custom coded email templates
34. Make it easy to unsubscribe
35. Fix mailbox provider clipping issues
How to Create Mobile-Friendly Emails
1. Subject lines with less than 30 characters
Here are a few examples to inspire you to write subject lines that contribute to excellent eCommerce mobile email design—notice they all hinge on ONE CLEAR MESSAGE:
✍ Have we met? (Aurate New York)
✍ Top 5 Reasons We Rule (Every Man Jack)
✍ Meet our MVPs 🏆 (Casper)
2. Pre header to build context fast
To optimize your email campaigns for mobile better, write subject lines & preheaders that make the subscriber think.
(Read: Subject line / Preheader) →
🤝 the Thursday newsletter / How to get a smooth bikini line (Goop)
🤝 Slide into these sandals / Shop everyday styles from Dolce Vita & more (Nordstrom)
🤝 Your discount code expires tomorrow / You’d better bank those savings (Snug)
Here’s such a combo from a mobile optimized email from Supertails:
Quick Tip: Use an email template software that allows you to edit the preheader without code while you’re keying in your subject line—this can make a key difference to how you personalize your mobile-optimized email.
3. Maintain a single column
Leverage the natural scrolling action to put a single column in place and pile all your visual & textual elements within this container.
Pro Tip: Incorporate gradients within the content hierarchy and flow to guide eye movement—this can make scrolling even more pleasant in a responsive email design eCommerce environment.
4. Keep emails 600 pixels wide
Whether it’s Apple Mail, Thunderbird or even Outlook, 600 px is what flies for mobile-first email design.
In fact, Gmail sometimes displays background colors only partially if your email design goes over a width of 640 px.
5. Don’t go beyond 3000 px (email height)
While eCommerce emails can be anywhere between 1500 px and 25, 000 px in height, 3000 px is what’s ideal for mobile optimized email design.
Pro Tip: Put the most crucial pieces of information in your mobile emails within 300 to 500 pixels—this would include the hero header, CTA and any microcopy that highlights the primary call-to-action:
6. Adjust font for scannability
For legibility as well as accessibility in your mobile-first email design, make sure no textual element is lesser than 14 px.
Also, use easy-to-read fonts if turning text bold is not an option.
Use larger font size for the most important text—in fact, your headline should be no less than 22 px in a mobile-friendly email design format.
7. Adjust your content margins for readability
Mobile-first emails naturally depend on fluid finger motions—so, point-and-click optimizations that work for desktop don't work here.
Create padding between various elements within the email body as well as between the email and the outer margins of the template.
10 px between clickable elements within the email body works and 20 to 30 px around the outer margins.
8. Use content summary at the top (especially for newsletters)
Since your eCommerce email newsletters can potentially pack multiple scrolls of non-transactional information, you’d want to offer a summary.
The section right below the header is a good placement for this—check out how eCommerce brand Maudern summarizes what a subscriber can expect from their newsletter right on top:
9. Limit microcopy (& icons)
Both microcopy and icons work as USP or UVP explainers in a mobile-friendly email—but too much can be a distraction.
Check out what Aurate does with their discounted cart abandonment email—instead of cramming it with microcopy & icons, they drive authenticity through press mention logos only:
10. Feature no more than 200 words
That’s how long a detailed newsletter can be in its maximum length.
However, the ideal length is about 125 words when you’re optimizing your emails for mobile.
Quick Tip: Feature a maximum of three short sentences per content block.
11. Use bullets & pointers
Bullets & pointers work well for thank you emails, membership opt-in emails and even bestseller recommendation emails highlighting key features.
However, the best conversions seem to come when you limit the number of bullets or pointers to about three—here’s a brilliant example from Allen Edmonds in their mobile-first email design:
12. Break long emails into sections
The digestibility of mobile-friendly email design depends on:
✔ How you stack visual & textual information
✔ How you create visual relief through variations
Look at a typical longer email by Beam Supplements, and you’ll know what we mean—they use CTAs, links and even image blocks to demarcate sections:
13. Improve content structure with HTML markups
It’s worth the effort to incorporate semantic HTML markups for your email mobile optimization.
This can help screen readers scan the email content you send and create distinctions between important and less critical elements.
14. Set up dynamic email content
Here are a few aspects you can play around with when it comes to dynamic content for mobile email marketing:
✔ Subject lines (including aspects like name, % discount etc.)
✔ Product recommendations (base these on purchase history, browsing behavior etc.)
✔ Social proof (the kind of reviews or press mentions you show)
✔ Offers & coupon codes (again dependent on the customer journey, personal milestones etc.)
15. Make everything fat-finger friendly
Unsuccessful taps contribute to high bounce & low click rates in under-optimized mobile emails.
Design CTAs taking into consideration the average size of the adult finger pad, which is approximately 10mm. Hence, make your tap targets at least 44 px x 44 px to enable click-throughs.
Interesting Fact: Some businesses use higher tap target dimensions to be able to accommodate shoppers who handle their mobile devices with one hand.
16. Make sure images load fast (even on slower connections)
To ensure this, you’ll have to look into two main factors for responsive email design for eCommerce:
✔ The content area width of the email (anything above 600 px can load images incorrectly)
✔ Optimal resolution for crisp quality (72 DPI works best in mobile-optimized emails)
✔ The image format you choose (remember, this is contextual: for example, if your ultimate goal is compression, use PNG, but if it is to load with richer color, JPEG works better)
17. Don’t forget those image alt tags
Alt text describes images when they won’t load properly because certain ISPs disable loading of mobile email images.
Alt tags also help optimize mobile emails for slow connections.
Pro Tip: If you do intend to skip alt text, ensure you incorporate the code <alt=””> to indicate to screen readers they shouldn’t attempt reading it—leaving it blank will cause them to call out “unlabeled image,” which is bad UX.
18. Avoid images with *granular* details
In fact, any image that’s less than 400 px will not scale up on mobile.
Along with granular images, another problem is multiple images—avoid having more than three images if you really want click-throughs as this reduces choice paralysis instantly.
Every Man Jack uses visuals where an additional background doesn’t meddle with the product visuals:
19. Optimize for ‘dark mode’
Dark Mode is easier on the eyes and can even support better content legibility in your mobile email optimization efforts:
✅ Insert dark mode classes into all your HTML tags
✅ Insert dark mode based media queries into your email’s CSS to enable color adjustments
✅ Optimize your logo through dark mode targeting (add a white stroke or a gradient or a glow effect—and ensure you use a transparent PNG)
20. Increase image size for retina displays
To optimize your mobile email images for retina displays, double the dimensions.
So if your usual mobile email banner is 600 px x 200 px, make that 1200 px x 400 px to suit retina displays.
Pro Tip: Use an image compressor to get this right as increasing pixels invariably make image loading difficult.
21. Use more location-based keywords
This is primarily because amongst those using mobile to initiate comparison shopping, the highest buying intent is often among those a brand can easily ship / make returns to.
If you can add this to your segmentation efforts, you’re likely to see higher conversions through your mobile-first email campaigns.
22. Code your CTAs (instead of using images)
If your CTAs are not optimized entirely to show for ISPs that block images, then it’s an issue because they may not load properly and may miss intended clicks.
Create “bulletproof” CTAs instead—these are buttons that contain live text but are made to look like regular CTAs.
Source23. Feature a max of 2 CTAs (& isolate them)
For non-recommendation emails: repeat the primary CTA link in a secondary CTA with a slightly different hint text for a better click-through rate.
And always ensure the first CTA appears in the first fold when you’re optimizing emails for mobile.
24. Go back to good ol’ text-only emails
Since mobile email readers want to quickly get to the point, you’ve got to serve them that.
One way to do this is to stick to text-only emails whenever you can—this can especially work if it’s just a simple offer in question.
Check out how Blume does it in their mobile-first email design:
25. Use white space smartly
Here’s something to do for mobile email optimization :
✔ Maintain a padding of 10px for each element within the email body
✔ Maintain 15 to 25 px for the edges around the email
26. Remove nav bar (or keep it clean)
The same reason you should’nt use too many CTAs in a mobile-friendly email, is why you should also not use too many links.
So getting rid of a navigation bar completely or featuring just the two most important links in the header or footer makes sense.
The other way to do it is to keep the links grayed out while contrasting it with a bold logo—this is exactly what eCommerce mattress brand Casper does:
27. Left-align copy (for familiarity)
Many UX designers love symmetry and end up using center-aligned text in their mobile optimized email template, but it can be disorienting.
Left-align your email text instead.
Use it when you have a long sentence or more than a single sentence to feature in a section—the rule Nordstrom follows in their mobile-friendly email design:
28. Avoid hover, use tap
Unlike desktops where hover works well because of the use of a mouse, on mobile it’s a dead-end with touch needing to mimic it and failing.
Labeling your dropdowns with arrows that can be tapped and opened makes for responsive email design in eCommerce.
29. Leverage ARIA to offer more info to screen readers
The two most significant ARIA attributes to use and never skip are:
✔ role=”presentation”—this helps screen readers differentiate between tabular content and content that’s used only for aesthetics
✔ aria-hidden=”true”—this helps your emails hide certain visual content from screen readers
30. Design for portrait & landscape views
This can ensure your eCommerce emails have maximum readability across several mobile devices: portrait working better for smaller touch screens while landscape lending itself to a tablet screen.
31. Avoid using inline frames
The main reason behind this is iframes don’t render well on mobile (most email providers are to blame for this)—and as a result, the desktop layout is replicated on mobile without the display changing to fit the different screen size.
32. Use a prominent layout / colors for social buttons
Since your social handles are about micro-converting your mobile email audiences, they need to feature prominently.
While some brands see this as less important in the email content hierarchy, others see the necessity in keeping these buttons prominent like Farfetch.
They make this mobile-first email design finish within a single scroll ending with bold social buttons:
33. Use only custom coded email templates
It’s tempting to go the drag-and-drop way when you’re trying to optimize your eCommerce mobile emails.
But custom coding your templates will help you in the long run to attain a better design language (based on brand & values,) achieve consistent rendering and load better thanks to optimized sizing.
34. Make it easy to unsubscribe
Along with featuring microcopy at the end of the footer section saying, “If you don’t wish to receive emails, click unsubscribe,” bring up an easily identifiable blue “Unsubscribe” link at the top right of the email.
35. Fix mailbox provider clipping issues
You’ll have to ensure markup embedded code does not exceed 102 KB—beyond this point, Gmail clips the email.
To avoid this in your mobile optimized email marketing:
✔ Reduce the number of featured links
✔ Reduce the amount of text content
✔ Avoid sending multiple emails with the same subject line
People also ask on mobile-first email design:
1. How to optimize your emails for mobile?
For a mobile-friendly email design, you’ll have to pay attention especially to:
✅ Whitespace—this makes for responsive email design in eCommerce by allowing readers to visually process info better
✅ Font readability—this is to remember that mobile technology reduces text size by default
✅ Text alignment—unlike in a desktop experience, mobile emails render on a much smaller screen and without proper text alignment, can be a nightmare to read
✅ Quicker load time—which in turn means you’ll have to limit the number of images, compress where necessary and even limit the HTML weight of the email to about 75KB
✅ Decluttering the header & footer—reduce the number of links, minify code, lessen microcopy because reducing these sections can reduce the scroll length of your email
You might like: Email A/B Testing: Elements to Test + Mistakes to Avoid
2. Does mobile optimization affect SEO?
Considering the average time spent on online devices is over 4 hours every day and shoppers choose to do their research on mobile before buying on desktop, mobile optimization and SEO are closely linked.
Mobile optimization directly affects UX for mobile shoppers, which impacts SEO areas considered crucial for brand development & conversions:
✔ Navigation
✔ Usability
✔ Layout design
✔ Readability
✔ Functionality
Best practices for mobile friendly email design:
1. Subject lines with less than 30 characters
Make you mobile-first email subject lines carry one clear message!
2. Use pre header to build context fast
Create a narrative with the two to inspire subscribers to open the email.
3. Maintain a single column
Use gradients in your content hierarchy to guide eye movement across the email.
4. Keep emails 600 pixels wide
Otherwise, preview windows of email clients may not work properly.
5. Don’t go beyond 3000 px (email height)
And put the most crucial info within the first 300 to 500 px of the email body
6. Adjust font for scannability
Make sure no textual element shows up in less than 14 px
7. Adjust your content margins for readability
Maintain 10 px between elements and 20 to 30 px around the outer margins
8. Use a content summary at the top (especially for newsletters)
The space right beneath the header is ideal for this feature
9. Limit the amount of microcopy (& icons)
Limit it to a single section
10. Feature no more than 200 words
For shorter emails, the ideal length is 125 words
11. Use bullets & pointers
Feature a max of 3 to 5 to not make it add to the email length
12. Break long emails into sections
Use elements like images, CTAs and line breaks to bring visual relief
13. Improve content structure with HTML markups
Use semantic markups to differentiate between critical and less crucial content
14. Set up dynamic email content
Serve up subject lines, recommendations and offers based on past purchase & browsing behavior
15. Make everything fat-finger friendly
Feature tap targets that are at least 44px x 44 px
16. Make sure images load fast (even on slower connections)
Check on the content area width, the optimal resolution and image format for better results
17. Don’t forget those image alt tags
If you want to skip, use the code <alt=””> to prevent screen readers from mislabeling
18. Avoid images with granular details
Neat shots without background confusion are the way to go
19. Optimize for ‘dark mode’
Use the necessary classes and media queries
20. Increase image size for retina displays
Double the dimensions when you're optimizing for retina displays
21. Use more location-based keywords
For relevance, check what competitors are doing
22. Code your CTAs (instead of using images)
Don't use regular CTAs, use bulletproof buttons instead
23. Feature a max of 2 CTAs (& isolate them)
Make sure the first appears in the first fold
24. Go back to good ol’ text-only emails
Use this format for mobile-first emails that showcase offers
25. Use white space smartly
Use it as paddin between elements in the email body and around the edges
26. Remove nav bar (or keep it clean)
Or grey out the links you feature in the nav bar to make them inconspicuous
27. Left-align copy (for familiarity)
Especially longer sentences with more than 2 lines
28. Avoid hover, use tap
Make the tappable elements easily recognizable
29. Leverage ARIA to offer more info to screen readers
Don't skip the most important attributes to ensure better accessibility
30. Design for portrait & landscape views
Make switch as seamless as possible
31. Avoid using inline frames
They don't render well on mobile
32. Use a prominent layout / colors for social buttons
Design thm distinctly from other elements in your mobile-first emails
33. Use only custom coded email templates
This lends a better design language in the long run
34. Make it easy to unsubscribe
Feature a blue button on the top right
35. Fix mailbox provider clipping issues
Avoid sending multiple emails wih the same subject line as the provider usually clubs them together
Make your mobile email marketing pay off:
Most eCommerce store owners don’t see email as a serious revenue stream.
Ask them about the importance of email marketing, and you'll hear: “we don’t really have a major strategy,” “we mostly use generic templates,” or “we just send emails to people on our list.”
BUT AT THE SAME TIME:
There are stores out there that drive 30%+ of their revenue from email marketing.
Engage can help you do the same - Book a free demo.
We’ll show you:
- workflows we can create for your store,
- proven ways to drive 30% or more $$ from email alone, and
- successful templates and strategies from your industry (and others).
.svg)
.svg)
.svg)
.svg)
.svg)
