Let's cut straight to the point. The only way to create truly mobile-friendly emails is to design the email specifically for display on a mobile device. With mobile email use on the rise, and as more and more people own a smart phone or mobile device like a tablet, you might want to consider making mobile your primary design target, or at least investing the time into learning how to make your email campaigns more mobile-friendly.

Consider some statistics on usage:

Mobile email will account for 10 to 45% of email opens, depending on your target audience, product and email type. eMailmonday - "Party safe mobile email stats" (2012)

Media Queries

The easiest way to encode an email for a mobile device is to use media query CSS styles. This is a CSS style specifically created for mobile devices. Media Queries allow you to create CSS definitions specifically tailored for viewing on a smartphone or mobile device (mainly iPhone or Android device) without changing the content. So, by using media queries, you can create a HTML version and a smartphone phone version of an email in one template.

Here is an example:

@media (max-width: 480px) { #mycontent .text{font-size:12px !important; color:#ff0000 !important;}

This example says to only use these styles if the screen dimensions are 480px wide or less. You use 480px as a maximum width because this is the width of an iPhone in landscape mode.

You use the !important declaration to over-ride any inline styles. The desktop email clients will use the inline styles and the mobile email clients will use the embedded styles.

Types of things that you can customize in your HTML email for a mobile device

Font properties like font-type, font-size and font-color

Darker text can be easier to read on a mobile device and make your mobile version more readable. Larger-sized text used in the desktop version can be reduced to fit better in a mobile device email client.

Width and height of tables and images

The ability to control the width and height of tables or images helps to alter the formatting for a better fit on a mobile device. For example, a 600 X 300 image can be resized to be 200 X 100. Also, a table, cell or images can be hidden in your mobile version if they will not fit nicely in the mobile version but you still want to display them in the desktop version. Images which are sized for desktop but cannot really be resized for the mobile version can be hidden – but be careful here, you don't want the mobile user to be downloading huge images on their phone – it can really slow down the email open time and they may just get frustrated and delete your email!

Spacing around text and images

Text links are generally difficult to select with a finger tap in a mobile email unless they have padding around them. You can use media queries to increase padding or line-spacing so that the user can more easily tap on text links in the mobile version.

In Summary

Even with these tricks, you will still have to invest time into creating your email campaigns to ensure optimal performance. Remember to test everything in multiple email clients and on multiple devices to see the results to be sure of what you will get before you send your email campaign out.