Setting CSS breakpoints in your responsive email

CSS breakpoints help your email display clearly at all device sizes ...
In our glamorous work here at NewZapp Towers, the Design Team have developed an ever-evolving process to keep getting the best results in all readers. This means staying aware of changes to the way email readers work so we can update our coding practices as necessary (I'm looking at you, Windows Phone and Yahoo! - and you can stop smirking, Gmail).

Our core HTML email coding practice has remained fairly consistent over time: in the first instance we build emails so they look good in the typical 'desktop' email readers - Outlook 2007-2013, Gmail, Outlook.com, Mail for Mac and the like.

These tend to ignore, disable or even strip out CSS found anywhere other than in an inline style, so we use this in HTML table cells so that they have a direct influence on their content e.g.
<tr>

  <td style="font-family:Arial, Helvetica, sans-serif; font-size:22px;   
  color:#FF9900;" >Sign up to our mailing list!</td>

</tr>

Reaching your email's 'breakpoint'

With the rise in mobile device usage (48% of us now open our emails on the move according to these latest statistics from Litmus) there is a need for an email's layout and content to re-organise itself for best effect on narrower screens. Thankfully, since the latest generation of mobile devices do support CSS stylesheets within the email itself (with 'desktop' email reader layouts remaining blissfully unaffected) we can now use things like @media queries to define specific 'breakpoints' that tell an email's layout and styling to change at specified screen widths e.g.
<style>

  table td {width:600px;} //default
 
  @media screen and (max-device-width: 479px), screen and (max-width: 479px)
  {
    table td {width:100%;} //mobile
  }

</style>

Read our article here for more on this very subject.

As a general rule, we don't tend to set email layouts to change until the screen is really narrow, typically at a standard smartphone width of around 320px or less. Most standard tablets have a screen width comparable to a small 'Desktop' monitor (around 768px x 1024px portrait) and so will normally show the standard 600px - 650px wide email layout with no problem.

Typical screen widths for different devices


There can be more than one

There are odd occasions, however, when we have designed emails that do require an additional breakpoint - generally when the default 'desktop' version of the email is quite a bit wider than 650px. This way you can show the full-width email in all its glory, have a certain amount of re-organising for the 'tablet' version, then full-on stacking and hiding of elements on the 'mobile' version.

use 2 or more breakpoints for more email layout alternatives

In a similar vein, the recent advent of mobile devices with higher pixel densities (such as those using Apple's Retina display) where the screen width has been effectively doubled (or more!) careful thought will also need to be given to accommodate not only normal desktop screen widths but HD tablet, normal tablet and mobile device screen widths too. Phew!

Confused? 

As ever, the team here at NewZapp are here to help if you have any more questions on this or any other email marketing topic - just give us a call or contact us.