Email design for mobile devices
Quick formatting tips for stylish emails in any inbox
Every morning, I get the French press ready and hop on my iPhone to check the barrage of emails I received through the night. More and more of us are doing this (maybe not the French press, but I highly recommend it); we check email on our phones even before we eat breakfast or open our computers. In fact, Litmus says that almost 10% of total email opens come from mobile devices.
When you're building your emails, you may be considering the mail programs in which your audience is reading them (Outlook, Gmail, Mac Mail, etc), but it's an equally good idea to plan for your emails to be read on a mobile device. Inboxes can be tricky, and making your email look good in all locations will take a little time and dedication.
Building an email for mobile readers isn't difficult, though, and it may even mean making your job easier — the best emails utilize fundamental design ideas. Let's talk about what you can do to ensure your mobile readers have the same reading experience as your desktop readers.
Simplify your content. Mobile screen real estate is valuable; keep your design clean and simple. Evaluate your content and remove some of the less-useful information. Think about if that sidebar of upcoming events or staff photos could be removed and used in another email. If you've got a lengthy description around your product, let images and/or links to your website do the talking.
If you have navigation toolbars, these can get squished, thus breaking your layout and making it hard for people to tap those links. Consider paring the links down to important places your reader can easily tap.
Include an easy-to-spot call to action. This is arguably the most important part of your email. It doesn't matter how people are viewing it (mobile or desktop), you want folks to see your offer and click through. Keep your call to action easy-to-spot and above the fold. And consider using your subject line to give the reader a sneak peek inside.
Note: When designing for mobile, make sure the call to action is tappable (at least 44 x 44 pixels, per Apple's Human Interface Guidelines).
Enlarge your fonts. Fonts for emails read on mobile devices should be considerably larger than those in traditional emails. iOS devices resize all fonts smaller than 12 pixels up to 12 pixels, which can break your layout. A good rule of thumb is to keep your headlines around 22 pixels and body text around 12-14 pixels.
Mind your images. Aside from the iPhone/iPad, mobile devices will automatically block your images and prompt the user to "turn images on." Be sure to add alt text to your images. That way, the reader will see a text description of the image before it's displayed.
Be purposeful with your layout. Let's face it: Mobile devices are going to sizably scale down your layout. This makes it more difficult to tap on links and read the content. Try using a layout that has only one or two columns of content. Here are a few layout examples, two that are mobile-friendly and one that would be better-suited for desktop viewing:
+++++
Since email for mobile is still a fairly new concept, there aren't any hard and fast rules, but I hope these guidelines will help you design emails that look good in any inbox. For even more tips, read Anna Yeaman's six mobile design tips, and share tips of your own in the comments section.
+++++
Comments
Kristina Cruz | Online Printing | January 10, 2012
Good points. I know I ready most of my emails on my phone these days. I’d recommend that if you want to send a document that you expect to be printed to send it as a PDF or Word file. If I have a great deal of information to send someone, I intentionally put the bulk of the content in an attached file so I can keep the email very short.
.(JavaScript must be enabled to view this email address) | January 10, 2012
Thanks for stopping by the blog and commenting, Kristina. You’re exactly right—it’s always better to link to that additional (sometimes longer) content as a separate file or webpage. It’s actually not bad advice in general, even if your recipients aren’t reading your emails on mobile devices.
.(JavaScript must be enabled to view this email address) | January 11, 2012
For most of us, we use our pc AND mobile to view emails in Gmail, Yahoo, etc. Since we cannot use javascript in our emails to detect which reader the email will be opened with (thus calling on a separate CSS file for the mobile view), the challenge I’m facing is, should I build my emails for the desktop client or mobile client? In other words, when I design and code my HTML emails, should I continue to make the width 600px (for the desktop client) or 480px or less for mobile?
Michael Ho | January 12, 2012
Something i’m noticing in Litmus Stats are people who read emails on their mobile devices tend to actually read the content (tracked for longer than 4 seconds) where as people who read the emails on their desktop in Outlook tend to skim the emails and/or delete…
.(JavaScript must be enabled to view this email address) | January 13, 2012
Hi,
It would be great if you could have 1 layout for desktop and 1 for mobile devices?
thanks
Breda
Kevin | January 13, 2012
I agree, paring down the graphics and having a clearly defined hierarchy of information is key. I am also quiet sure that the 10% of users who view emails on smart phones will grow exponentially in the coming year. Keep the tips coming!
.(JavaScript must be enabled to view this email address) | January 13, 2012
Thanks for reading! Your Emma account comes with 39 content layouts—feel free to mix and match to use them for mobile-friendly campaigns.
.(JavaScript must be enabled to view this email address) | January 16, 2012
Thanks for reading, Kevin! If you haven’t seen them already, check out Anna Yeaman’s tips on designing for mobile: http://myemma.com/blog/2011/07/27/anna-yeamans-6-mobile-design-tips/ - great article!
.(JavaScript must be enabled to view this email address) | January 16, 2012
Thanks for stopping by, Michael. That’s an interesting observation. Perhaps folks who are reading on their phones are not affected by other distractions (web surfing, office chatter, phones ringing, piling inbox, etc). They may also be more attentive when they’re on the subway heading to work.
.(JavaScript must be enabled to view this email address) | January 16, 2012
Hi AJ! That’s a great question. If your email is built in a simple one-to-two column layout, 600 px wide will render just fine on a mobile device. Keep in mind, though, the more content that’s in your layout, the more a mobile environment can “squish.” Long story short, 600 px is a happy medium for both desktop and mobile readers.
.(JavaScript must be enabled to view this email address) | January 20, 2012
Will responsive approaches work for old skool mailings? - not tested, but <table width="90%" ..... and then working on percentages, and the like for the layout.
Then using media queries to set the break points.
.(JavaScript must be enabled to view this email address) | February 07, 2012
Hi DB,
Percentage-based approaches will technically work, but I’d recommend against it. Most email clients love being told explicit instructions (e.g. pixel widths rather than percentages) and without a specifically defined viewing area, some can take those percentages quite liberally.
My advice is to keep using a specific pixel width like you have been, and then use @media queries to define specific viewports. Here’s a great article on that from Anna Yeaman of Style Campaign fame. Give a shout if you have any other questions!
Biotech Branding: Designing Email Campaigns With G | February 24, 2012
[...] Miles Price at EMMA also wrote a post on this subject recently. Thanks for your collaboration, Miles! [...]
.(JavaScript must be enabled to view this email address) | December 01, 2012
The one flaw with all of this when it comes to mobile is that, at least according to Emma support, is that their is no way to set the viewport. Without being able to set the viewport then the media queries aren’t a great deal of use.
Is there any way to set the viewport?
Emma | January 04, 2013
Thanks for the question, James. Our support team’s response is accurate; users can not currently set the viewport in Emma. The good news is that most mobile devices don’t require the viewport tag to take full advantage of media queries. Chances are, if the client you’re targeting supports media queries, you won’t have to wrestle with viewport settings.
Having the ability to set the viewport is something we’re working on in our new editor, at least for users who are comfortable editing the HTML code of their email, but it won’t work everywhere. Some major email clients like Gmail ignore the viewport tag (and media queries) altogether.