Responsive Web design resolutions

Responsive Design

When it comes to developing responsive emails, there are three common techniques:

1. The use of Media Query Breakpoints
   Wherein, the developer displays the email differently depending on the width of the screen
2. Percentage Based Layouts
   Wherein every element on the page stretches to fit a given percentage no matter what the size of the screen
3. A hybrid of 1 and 2
   Wherein the elements on the screen stretch naturally until a given breakpoint, then it switches to a different layout or percentage for easy reading in small devices.

Media queries allow a design to "respond" to the device or screen that the email is being viewed on. For example, if the max-width of the device is 480px, your email is being viewed on a smaller device and if the max-width is 480 - 640px it's likely being viewed on a medium sized mobile device. If it's larger, your email is being viewed in a tablet, web, or desktop email client. In this example, the numbers I have defined above would be considered "breakpoints."

Each of the methods defined above have its pros and cons, but it would be hard to evaluate which one to use without identifying your targeted screen resolutions.

So what are the most common device dimensions?

Device resolutions can actually range from 320px - 1, 920px! Unfortunately this large of a range brings complexity so let's break down the good, the bad, and the ugly.

Good:
Each device has a min and max-device width or 'trigger' point in portrait and landscape view. In other words, if you use a media query with a given conditional statement in your email, it will respond to that breakpoint.

Bad:

1. Email client toolbars can take up space on the screen so manufacturer device dimensions might not be what actually triggers the media query.
2. Some devices trigger the same min and max-dimensions in portrait AND landscape view
3. Android users can define a 'zoom' setting which changes the resolution of the display
4. The introduction of Apple's Retina Display and the HD quality resolutions supported on several new Android devices use a pre-set 'zoom' multiplier to display your email. In most cases, it's based on a 2X zoom.

   This had us stumped for a while because we couldn't decipher between each device resolution provided by its manufacturer vs. the max-dimension that triggers a given media query.

Media Query Triggers

Since we don't have physical access to every popular device on the market today, we have engineered the following chart based on our research. Below, we've defined "estimated" media query triggers for each device in portrait and landscape view. We are also working on a follow-up article with test results for the devices that we do have access to. The goal of this research is to give you a starting point for establishing your breakpoints. Items in bold are devices we have access to.