Writing Email for Mobile Devices

In order to get the most juice for the squeeze when it comes to email marketing for mobile devices, you need to create content specifically for the mobile platform. This is easier than it sounds! Let’s look at how this might work.

The easiest way to encode an email for a mobile device is to use the media query CSS style. This is a CSS style specifically for mobile devices. Here’s an example:

@media (max-width: 480px) {
#example .text{font-size:10px !important; color:#ff0000 !important;}
Media Queries are specific media-dependent CSS style definitions that can be used for different media types. Media queries extends the functionality/presentation of an HTML email because we can create CSS definitions specifically tailored for viewing on a smartphone (mainly iPhone or Android device) without changing the content. So, essentially, you can create an HTML version and a smartphone phone version of an email in one template.

This says to only use these styles if the screen dimensions are 480px wide or less. We use 480px as a maximum width because this is the width of an iPhone in landscape mode. Then we use the !important declaration to over-ride any inline styles. The desktop version will use the inline styles and the mobile version will use the embedded styles.

What should you do with your media query specifically for a mobile device?


Font size, type and color

Changing the font size and color is important to help make your mobile version more readable. For example, darker text can be easier to read on a mobile device and larger sized text for a desktop can be reduced to fit better in the mobile version.

Width and height of tables and images

Controlling width and height of tables and images helps to alter the formatting for a better fit on a mobile device. For example, a 400 X 200 image can be resized to be 200 X 100. Also, a table/cell or images can be hidden in your mobile version as well. This comes in handy when you have content that fits well in the desktop version but clutters your mobile version. Furthermore, images which are sized for desktop but cannot really be resized for the mobile version can be hidden. Increase CTA images.

Spacing around text and images

Controlling spacing can be helpful in a mobile version. A good example of this is when you have text links for a navigation and they wrap closely together and make the linked text difficult to select with a finger. The padding or line-height can be increased in the media queries CSS to space apart the text links, therefore, making them easier to tap on.

Insert images specifically for mobile devices

Images for a mobile version that are hidden in the desktop version can be called out in the mobile version.

Key Takeaways

Invest the time and effort into coding your email campaigns to ensure optimal performance. Test, test, test everything.

Lindsey McFadden
Manager, Campaign Production Services, WhatCounts


More to explore...

Ready to See WhatCounts in Action?