So it is a constant surprise to me how many emails I get that don’t display well on my phone.
People who are checking their email on their phone are often also doing other things — running errands, working, watching kids, riding a bus… point is, they are busy. They don’t have time to try to scroll all around your email trying to figure out your message.
That’s why your email has to look good on mobile. It has to be visible, the message needs to be clear, and the CTA needs to be convenient. And then the landing page needs to also be mobile friendly and create a seamless experience (but we are here to talk about email right now).
So let’s go over a few really basic things that will make your email more mobile friendly.
The most basic thing you can do is use fluid widths on all of your containers and elements. (If you read my previous post, you know to pair this with a max-width to make your email easier to read.) So here’s what that might look like:
<table style="width: 99%; max-width: 600px;">
<td style="width: 48%; max-width: 300px;"><img style="max-width: 300px; display: block;" src="http://placekitten.com/300/300" width="100%" height="auto" /></td>
<td style="width: 48%; max-width: 300px;">TEXT HERE</td>
You’re going to want to add some other styles to those tags, but this gives you a basic idea of how to use percentages to create fluid widths. I find that subtracting a percentage or two (using 99% instead of 100%) can help account for weird padding that email providers sometimes put in.
One of the first things I do when I get the opportunity to redesign an email template is bump up the body font size. There is never an excuse to use a body font smaller than 16px.
Your body copy should be easy to read quickly, and even if someone has perfect eyesight, a smaller font is going to make them work harder. And you know who isn’t interested in working harder to read your email? Literally everyone.
So use at least 16px font, make sure your copy is high contrast, and leave lots of white space. Your eyes will thank you.
Touch My Button
Another must of mobile-friendly email design is having buttons, links, and CTAs that are easy to touch on a mobile device. The general standard for making that happen is using buttons that are at least 44px x 44px.
Now, the html for buttons is a whole other mess that probably requires it’s own post, but if you don’t want to wait for that, I recommend using Stig Morten Myre’s Email Button Generator over on Campaign Monitor. But read the code it generates, you can learn a lot just by reading the code.
If you want to get super fancy, you can use media queries to change your code on mobile devices. If you are using a pretty simple one-column layout, you might not need to do that, but it’s good to know you can do it if you want.
You create media queries in the <head></head> of your HTML. Now, not every email provider will read styles in the head, so be aware (aka use Litmus).
This post is part of a series based on an email training presentation I did for my co-workers. Want to read the whole series?