Designing Mobile Versions of Email Messages

When designing a web page, it is important to remember to design a simplified “mobile-friendly” version as well, so that your website can take on a different layout when viewed using cellular phones and other mobile devices, making it easier to read and navigate. With the rising popularity of smart phones and tablets, why not design mobile-friendly versions of your email marketing campaigns as well?

Traditionally, mobile-friendly website layouts are designed by using Javascript to change the website’s CSS properties, based on the browser’s User Agent. Javascript is typically not recommended for emails, though, so this approach could become problematic when it comes to email design. Fortunately, however, CSS3 media queries are now supported by all major mobile browsers, including iOS’s default email client, and Android’s “Email” app. Media queries can be used to modify and hide sections of your email message, based on the width of the email client/browser.

Below are two images of an email we sent out to announce our new website design. On the left is the email in a regular web based email client. On the right, you can see the same email as viewed in a mobile client. As you can see, CSS3 media queries have been utilized to change the width of the email, and further modify the design.

With this example, the main differences between the two versions are within the heading — in the mobile version, the header image is resized, and the Home, Features, Blog, and My Account links are removed. To accomplish this, we’ve added some code to the header of our email source which looks similar to this:

<style>
@media screen and (max-width:600px) {
 html[class="corehtml"] img {max-width:100%; height:auto; width:auto\9; /* ie8 */}
 table td[class="blankcell"] {visibility:hidden; display:none;}
}
</style>

(Note: in this email, there were many other classes defined here as well, but the code has been simplified for the purposes of this article.)

The classes defined in this section of the code will only take effect when the size of the user’s browser is less than 600 pixels in width.  In this case, in our HTML code, the navigation links along the top of the the email (Home, Features, Blog, and My Account) were placed in table cells using the “blankcell” class. The code looks similar to this:

<table border="0" cellpadding="0" cellspacing="0" width="600" class="headerbar">
 <tr>
 <td align="left" width="167">
   <a href="http://www.activecampaign.com/">
   <img src="ac_logo.gif" width="167" height="18" alt="ActiveCampaign"/></a></td>
 <td class="blankcell" width="180"></td>
 <td class="blankcell" align="right">
   <a href="http://www.activecampaign.com/">Home</a></td>
 <td class="blankcell" width="15"></td>
 <td class="blankcell" align="right">
   <a href="http://www.activecampaign.com/features/">Features</a></td>
 <td class="blankcell" width="15"></td>
 <td class="blankcell" align="right">
   <a href="http://www.activecampaign.com/blog/">Blog</a></td>
 <td class="blankcell" width="15"></td>
 <td class="blankcell" align="right" width="93">
   <a href="http://www.activecampaign.com/login/">
   <img src="button_myaccount.gif" width="93" height="28" alt="ActiveCampaign" /></a></td>
 </tr>
 </table>

The result is that, when the browser or email client is larger than 600px, the table cells are displayed normally. However, when the browser shrinks so that the width is smaller than 600px, these table cells start using the visibility: hidden and display:none attributes. Essentially, when the browser width is lower than 600px, these table cells become invisible.

Similarly, when the email is viewed in a small browser, the map image starts displaying the max-width:100%, height: auto, and width: auto properties, causing it to be automatically resized to the width of the browser.

CSS media screen queries can be used  to hide aspects of your message, change the width and height of images, divs, or table cells, or even change background images or colors, all based on the width of your users’s browsers. This is a very effective means of designing web pages to fit different monitor resolutions, as well as to create mobile friendly versions of webpages and emails.

To find out more information about CSS3 media queries, and see examples of them online, check out these other great tutorials:

A trial is worth a thousand words.
Get started today, no credit card required.