I don’t need to convince you that we are in the midst of a massive shift in the way we access information. The days of desktop dominance have given way to mobile devices. This is especially true for email. With each passing month, more and more people are accessing their email on their phones and tablets. If your emails are not designed to accommodate smaller screen sizes, your readers will become frustrated with your emails and discontinue reading.
In a previous post, I talked about how to create a mobile friendly website using Responsive Design. But, what about email? What can be done about my newsletters, alerts and notices?
Responsive Design for email is not going to be the solution for everyone. First, to use Responsive Design for email, you have know how to code. You have to write CSS code that will scale and re-arrange your emails to fit on mobile devices. This is a specialized skill set that not everyone has. What if you don’t know how to write CSS? How can you make your emails look better without getting a masters degree in computer science?
Second, Responsive Design for email will only display properly on iPhones, with the built-in Apple mail client. Responsive Design currently won’t work with email apps like Gmail or Yahoo Mail. For people viewing their email on a mobile device, which pulls the content from a hosted mail server like Exchange or Lotus Notes, Responsive Design elements will not work.
So what can you do? Although more people are reading their emails on mobile devices, Responsive Design is not currently a great solution.
To get around this issue, and make things easier for you, I suggest optimizing your emails for mobile using solid scalable design principles. Scalable design uses a single column layout and grid system for alignment and proportion. If you don’t know how to set this up, or your system doesn’t allow for this, it’s easy to design your emails, in any email provider, by using some simple tricks.
So, here are my top 10 (easy) tips for making your emails work on mobile devices:
Try to keep in mind how you use your own phone or tablet to look at email. If you think through the steps you take, the fingers you use and the way your device works, it will go a long way in making your emails look good.
1) Single Column
When you put together your emails, a single column is going to work the best. Classic web design prescribes keeping as much as possible “above the fold” to catch a person’s eye. The result was web pages that got wider and wider so that more information could be at the top of the page. With mobile, wide is bad, because most mobile devices are not as large as your 24” monitor. For mobile devices, skinny and vertical is better. It’s much easier to read and scroll up and down than it is to go right and left (or worse, to zoom in and out).
2) Width
Speaking of skinny and vertical, you should reduce the width of your emails to allow for the smaller screens of mobile phones. I would suggest you keep your email width to 450px and definitely less than 600px. This will allow your email to fit nicely on most devices.
3) Text Size
Now that you have a skinny, single column email, you will need to compensate for the smaller dimensions by increasing the size of the font. I suggest you go with 14-16px for body copy and 20-26px for headers. The larger font will allow people to read your content without having to squint (or as I mentioned, the dreaded zoom in and out).
4) Shorten Content
Remember way back in point 1 when I said it’s easier to scroll up and down on a mobile device? Well there are limits. If people have to scroll for 17 minutes to get to the bottom of your email, your email is way too long. Try writing shorter, teaser summaries to your stories and then link to the full story on a landing page or your Responsively Designed website. This helps people get right to the content they want and will drive up your engagement rate. It will also help improve search engine optimization (or SEO) of your site and keep your readers happy by getting them exactly what they are interested in.
5) Buttons
While you are linking to those landing pages, get rid of simple text links and go with touch-friendly buttons instead. For most people it takes pin-point accuracy to actually click on linked text and many times we hit the wrong things if we are a little clumsy or have large fingers. Replacing those links with clickable buttons will help solve that problem; 50x50px to 75x75px should be enough to get the job done.
6) Alt Tags
When using buttons as links, make sure you are putting alt tags in place for people who have images turned off. Also, make sure the alt tags make sense to people viewing your message. Instead of the outline of your button with “mobile_button_2.png” in place of the image, why not try an alt tag that displays something like, “Click here to go to the full article. Please allow images from Central City to improve your reading experience.”
7) White Space
Even though you are using buttons for your links, remember to place ample white space between text, paragraphs, images, buttons, etc. This will help make your emails easier to read and provide more forgiveness so people don’t click the wrong thing.
8) Thumbs
The majority of people use their right hand, more specifically their right thumb to scroll and click on things. Even lefties like me scroll through emails on their phone using their right hand. So, placing your buttons on the right hand side, or in the center, of your emails will make it easier for people to click while using one hand.
9) Subject Lines
Keep your email subject lines short and sweet. Subject lines that are too long will get truncated with smaller screen sizes. I suggest 60 characters or less.
10) Test, Test, Test
Just like a pool, it pays to test the waters before diving right in. Send a test email to several different email clients and look at them on several different devices of varying sizes. You will be amazed at how different one email can look. Try to find a design that looks good for all devices and email clients. If you can get that right, you can be confident that people will have a positive experience interacting with your emails.
There you have it. 10 simple tips for making your emails look great on mobile devices without using Responsive Design. If I’ve missed any you can think of, put them in the comments section below. For more great tips, check out our new white paper, “Integrating Email in Government Communications.”
