Many marketers are guilty of only previewing their email on desktop inboxes before sending, assuming the mobile version will be functional enough to pass. If your emails have significant mobile open rates, here are 5 ways you can quickly optimize them with CSS for a better mobile experience:
1. Stack multi-column layouts into a single column
Phone screens don’t have much horizontal real-estate, and most multi-column layouts will struggle to fit. You can stack these columns, and allow the user to scroll through the content naturally.
CSS
/**This will turn all multi-column tables into a single column **/
td {
display:block;
margin:0 auto;
width:auto !important;
}
2. Swap in more appropriately sized content
In normal web development, serving up different mobile content is simple. Email makes it difficult due to a few troublemaking inboxes that will try to ignore your efforts to show and hide different content. To get around this, set up your HTML & CSS like this example, and be sure to preview and be sure it’s working!
HTML
<div class="mobile-image" style="display:none; font-size:0; line-height:0; mso-hide: all;max-height: 0; max-width: 0; width:0;">
<img src="https://emailer.emfluence.com/clients/emfluence/uploadedfiles/2020/tip-of-the-month/header-mobile.png" />
</div>
<img class="desktop-image" src="https://emailer.emfluence.com/clients/emfluence/uploadedfiles/2020/tip-of-the-month/header-desktop.png" width="600"/>
CSS
.desktop-image {
display: none !important;
} /**Hide the desktop version on mobile**/
.mobile-image {
display: block !important;
font-size: 12px !important;
max-height: none !important;
line-height: 1.5 !important;
width: 100% !important;
max-width: 100% !important;
mso-hide: auto !important;
}
3. Modify text sizing
The text used on desktop may be too large or too small when viewed on mobile.
CSS
.subheader { font-size: 17px !important; }
4. Give buttons a large enough touch target
Buttons should be a minimum of 42 pixels in order to allow them to be tapped. This CSS sizes up our CTA a bit:
CSS
.cta-button td {
padding: 21px !important;
}
.cta-button a {
font-size: 22px !important;
}
5. Get rid of the ugly blue links
Mobile email clients will detect phone numbers and addresses and turn them into linked text. This is a helpful feature, but it may not look the best. Luckily, you can control the color of those links by wrapping a class around your addresses and phone numbers, then adding a link color with the CSS below:
HTML
<span class="address">
1720 Wyandotte St. <br/>
Kansas City, Missouri 64108.
</span>
CSS
<style>
.address a { color: #999999; text-decoration: none; }
</style>
