Responsive Email

Responsive web design, a term first coined by Ethan Marcotte, is the practice of crafting websites in a way that they are usable regardless of which device is used to access them. The responsive web is largely reliant on media queries to drive that adaptation. More recently, this approach has been brought to the world of HTML email.

A media query follows a pretty simple structure. For the purposes of email, the media query’s styles are nested within the emails <style> tag:

<style type="text/css">
    .standardCSS{
        color:#505050;
        font-size:15px;
    }

    @media only screen and (max-width:480px){
        .mediaQueryCSS{
            color:#CCCCCC;
            font-size:20px;
        }
    }
</style>

Basically a stylesheet within a stylesheet, media queries are built from a few parts:

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

First, they’re always opened with the @media at-rule. Next comes a keyword. In this case, ‘only’, which restricts the display of the media query styles to the specified media type. After that, the ‘media type’ is set. The most commonly used media types are screen and print, providing different style rules for displays and printers, respectively. Another keyword, ‘and’, follows, and, finally, the ‘media feature’, which is the meat of the media query.

There are many different media features available, but we’re really only concerned with using two of them:

  • max-width
  • max-device-width

The difference between them is how they calculate the maximum width that will trigger the media query. The feature max-width is measured against the available space of a browser, while max-device-width looks at the size of the device’s screen. Essentially, max-width covers everything and max-device-width covers small displays.

We want to cover everything. In this case, the media feature is used to target an area that measures 480 pixels in width or smaller. 480px is the standard width of a mobile phone’s screen in landscape orientation, and a good standard breakpoint to use in your code.

Media Queries and Inline Styles

As noted in the CSS overview, it’s necessary to inline CSS styles, either by hand or automatically before an email is sent. Since media query styles work on a trigger and are not default styles, it doesn’t make sense to inline any of it. So, the email’s normal CSS needs to be inlined and the media query CSS needs to override those styles once its triggered.

Because inline styles have the highest specificity in the cascade, it’s necessary for every media query style rule you write needs to be marked with a !important declaration:

<style type="text/css">
    .standardCSS{
        color:#505050;
        font-size:15px;
    }

    @media only screen and (max-width:480px){
        .mediaQueryCSS{
            color:#CCCCCC !important;
            font-size:20px !important;
        }
    }
</style>

You can leave the media query styles in the <head> of your email, as clients that support media queries don’t strip out the <head> or <style> areas.

Back to top