How to apply mobile-specific CSS to your campaigns

The last few years have seen enormous growth in the use of mobile internet devices with capable email clients, and it is now possible to include some mobile-specific styles to create email campaigns that read well on a smaller screen.

How does this work?

By creating a separate set of styles to be used by devices that recognize the @media query, you can optimize your emails in a similar fashion to how websites are optimized for iPhones and other mobiles today. Devices that don't recognize @media will just apply your default styles.

What kind of styles make sense for mobile email clients?

Using @media, you can create emails that adapt to the resolution they are viewed on, for example, by narrowing the line-length of paragraphs to make them more readable and prevent sideways-scrolling, or reducing the dimensions of images. For more information on how @media works, take a look at the W3C specification.

Adding a mobile stylesheet to your email

To declare your mobile stylesheet, use the following CSS within your style tags:

@media only screen and (max-device-width: 480px) { ... }

 

Where 480px is the width of a "flipped" iPhone's display. Within this declaration, you can define how elements within your HTML email will display on a mobile device, for example:

@media only screen and (max-device-width: 480px) {
     body {
          padding: 10px !important;
     }
    .container {
          padding: 0px 10px 5px 10px !important;
     }
     .header {
          font-size: 16px !important;
     }
     .headline {
          font-size: 20px !important;
     }
     #screenshot_image {
          width: 275px;
          height: 190px;
     }
}

 

Note the use of !important declaration to override any inline styles.

Examples

Using the stylesheet above, here's how an email would display in a desktop client:

Desktop client

Now, here's how the same email newsletter looks on a mobile device:

iPhone

Notice how the headings and images have changed size to accommodate this smaller resolution. You can also use -webkit-text-size-adjust: none; to prevent handsets from automatically resizing your text.

Finally, as we're using the @media query to override any inline styles, it's better to start with inline styles for your standard formatting,  and add your @media styles to the <head> section of your email.

When you import  your campaign, be sure to uncheck "Move a copy of my CSS inline". That way your @media query will be left in the <head> of your code.