If you send email newsletters, it's likely that a growing percentage of your subscribers are reading your messages on an iPhone, tablet or similar.

What this means for designers is that getting your email newsletter to display optimally on mobile devices is just as important as ensuring it can be read in long-standing email clients like Outlook and Gmail.

In fact, mobile email client usage is soon set to eclipse both that of webmail and desktop clients, meaning that providing a less-than-optimal reading experience on the small screen may not only inconvenience a few recipients, but eventually the majority. This could lead to diminished response rates.

Mobile Responsive is a design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).

A site and/or email designed with responsive designadapts the layout to the viewing environment by using fluid, proportion-based grids,flexible images and CSS3 and media queries, an extension of the media rule.

Here’s what a basic media rule looks like :

<style type="text/css">
    @media only screen and (max-device-width: 480px) {
        /* mobile-specific CSS styles go here */
    }

    /* regular CSS styles go here */
</style>

Lets break down what the @media declaration is all about.

First of all, in order to make it mobile-specific, we have some criteria that have to be met before the email client uses the styles therein. The @media only screen bit specifies that the email has to be displaying on a screen (unlike being displayed on an accessibility device, or printed via a printer).

After that, the device’s viewport can have a maximum width of 480px. This is important, as many, but not all mobile devices have a viewable area of 480px wide or less. While max-device-width: 480px is commonly used (as it’s the width of an iPhone display in landscape mode), you can tweak this to accommodate larger mobile displays, such as those on tablet devices. You can even be ultra-pedantic, like so:

@media screen and (device-width: 480px) and (device-height: 360px), screen and (device-width: 360px) and (device-height: 480px), screen and (device-width: 320px) and (device-height: 240px) { ... }

 In this example, we've applied the contenttable class to HTML tables containing the text and images. Here’s a snippet of the code:

<style type="text/css">
    @media only screen and (max-device-width: 480px) { 
    /* mobile-specific CSS styles go here */
        table[class=contenttable] { 
            width: 320px !important;
        }
    }

    /* regular CSS styles go here */
    table.contenttable {
        width: 640px;
    }
</style>

The contenttable class does something really interesting here - when the email is viewed on a device with a screen width of 480px or wider, it has no effect. However, when the screen width is 480px or less, it narrows down the table widths to 320px. Attribute selectors are being used to avoid an unusual glitch in Yahoo! Mail.

We’ve also added !important; to the mobile-specific styles to ensure they take precedence. But otherwise, it’s run-of-the-mill CSS. Similarly, you could feature other declarations, like:

@media only screen and (max-device-width: 480px) {
    /* mobile-specific CSS styles go here */
    table[class=contenttable] { width: 325px !important; }
    img[class="headerimage"] { width: 325px !important;  }
    p[class="date"] { display: none !important; }
}

Should you have questions concerning these media queries and your own templates don't hesitate to contact us at support@addemar.com  !