10 Easy Ways to Improve Your Mobile Email Design
Mobile email design has seen some changes over the last six years. At least 61% of users now open email on mobile devices, and 31% report that a smartphone is their primary device to click through and purchase.
If your brand isn’t optimizing every email for mobile, or if it’s been a while since you’ve evaluated your email strategy to ensure mobile is a big part of it, now’s the time.
For your email optimization pleasure, here are 10 simple ways to improve your email design for mobile.
Table of content
-
01
Keep it Simple with a Single Column Layout -
02
Hide/Show Different Email Components -
03
Resize Fonts & Images -
04
Get to the Point! -
05
Use Touchable Buttons -
06
Use High Contrast Designs -
07
Keep it Light -
08
Stick the Landing -
09
Mobile-Specific Code Fixes -
10
Test Your Email! -
11
Make Every Message Accessible
1. Keep it Simple with a Single Column Layout
Creating an email design with a single column layout that has a responsive width and font could be the easiest way to create an email that looks and behaves great on mobile.
However, if multi-column is your preferred cup of tea, creating a responsive email template that has multiple columns on a desktop device will stack content on mobile. That said, pay close attention to the content orientation so it stacks in the order you want it to. You can achieve this with a responsive template (like these free Email on Acid templates).
2. Hide/Show Different Email Components
Using the code below, you can hide desktop elements and show mobile elements of an email. For example, you can add a mobile-optimized image that is a better size ratio or call-to-action (CTA) button that will only display when a user opens the email on mobile.
<style>
@media screen and (max-device-width:600px), screen and (max-width:600px) {
.hide {
display: none!important;
width: 0px!important;
height: 0px!important;
} .show {
display: block!important;
width: 100%!important;
max-height: inherit!important;
overflow: visible!important;
}
}
</style>
</head>
<body>
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/desktop-image.png" alt="" width="548" height="217" style="display: block;" class="hide">
<!--[if !mso]><!-->
<div class="show" style="display: none; max-height: 0px; overflow: hidden;">
<img src="images/mobile-image.png" alt="" width="100%" style="display: block;"> </div>
<!--<![endif]--></td>
</tr></table>
</body>3. Resize Fonts & Images
Increasing or decreasing font sizes and images using media queries can quickly and easily create a better user experience on all devices. Using the technique from Everything You Need to Know About Email Fonts, we can change the font according to the viewport width (screen width) of a user’s device:
<style type="text/css">
@media screen and (max-device-width:640px), screen and (max-width:640px) {
.mobfont {
font-size: 2vw!important;
line-height: 3vw!important;
}
}
</style>Then, we add the class mobfont to any text we want to resize:
<td style=”font-family: ‘Timmana’, Helvetica, Arial, san-serif;” class=”mobfont”>Responsive Text</td>
Similarly, adding a width and height CSS property to a mobile image class can automatically resize an image. The below code will ensure your images are at 100% width of the parent container (aka the mobile device) and the height is set to auto, keeping the image proportions correct.
@media screen and (max-device-width:640px), screen and (max-width:640px) {
.mobimage {width: 100%!important;min-width: 100%!important;max-width: 1000px!important;height: auto!important;} }4. Get to the Point!
You only have a small screen size to get your message across, and mobile devices are full of distractions. Stick to short, sharp messaging and avoid long, wordy emails.
5. Use Touchable Buttons
Make your CTA a button, and ensure it has plenty of real estate on mobile, just like in the Adidas example above. Create space around any links so users can comfortably scroll without accidentally clicking a link and possibly getting annoyed at your email.
Tip: Make text links accessible with special characters (>) or emphasize with bold or underline.
Apple recommends at least 44px width for touchable buttons on the iPhone. Remember that you can also make some of the area around the button touchable as part of the same link, as long as it’s not too close to other buttons.
6. Use High Contrast Designs
With mobile users conscious of battery life and screen brightness, keeping your designs high contrast will mean better readability. Unlike desktop users, mobile users could be opening your email outside in bright sunlight and the added contrast will really help.
Related: Accessible Contrast Ratios: Why Email Colors Matter
7. Keep it Light
Mobile users aren’t always connected to WiFi and are never wired into the internet. Connectivity issues, signal strength, WiFi speed and even phone memory can impact an email’s load time.
Keep the code for your emails as light as possible (definitely under the 100kb Gmail-clipping limit) and ensure images are optimized to be as small a file size as possible. This will increase the chance of your email loading and rendering as it should.
Tip: Remember to add alt text to images – just in case signal strength is low and images can't load, you’ll want alt text as backup content. Similarly, if you are using background images, remember to set a background color that contrasts well with any text and CTAs so they can be seen whilst images are loading.
8. Stick the Landing
After going to all this trouble to make your email mobile friendly, it would be a shame if the subsequent messaging was less impactful. Make sure you optimize the entire mobile experience for subscribers by also optimizing your landing page for mobile.
9. Mobile-Specific Code Fixes
iOS devices can sometimes reformat your email and cause image sizes to be a little odd or change alignment. Adding this handy line of code into the head of your email will keep it from messing with your HTML:
<meta name="x-apple-disable-message-reformatting" />
Adding this to your CSS will stop Apple from highlighting links and changing your formatting:
a[x-apple-data-detectors] {
color: inherit!important;
text-decoration: none!important;
font-size: inherit!important;
font-family: inherit!important;
font-weight: inherit!important;
line-height: inherit!important;
}Samsung devices will highlight your links and change the color to blue and underline them. Inserting this piece of CSS will stop it from changing the links:
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}Note: This is not to say that you shouldn’t be emphasizing text links in some way. It’s fine to keep it on-brand, but always make every single link accessible.
10. Test Your Email!
It seems obvious, but since you always have your phone in arms reach, send a test email and make sure it looks as good on your small screen as well as your computer.
I set up the Gmail and Outlook apps and bookmark webmail clients to have a quick look through.
Run a test on the clients and devices Email on Acid offers, including tablets (to make sure your media query is set correctly), and make sure your email looks great everywhere.
Make Every Message Accessible
It only counts as "optimization" when your email is accessible to everyone. Campaign Precheck's Accessibility feature is the only tool on the market that scans your email for accessibility and makes ADA-compliant adjustments to the code in just a few clicks.
What are your go-to tricks for mobile optimization? Let us know in the comments below!
