Screen Resolution and Responsive Design


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.

Estimated Display in Pixels
DeviceWidth Portrait
Width Landscape
Sony Ericsson Xperia Ray320480
iPhone
320480
iPhone 4S320568
Blackberry Bold 9900480640
T-Mobile MyTouch 4G Slide 480800
Samsung Galaxy S II480800
HTC Titan II480800
Sprint HTC EVO 4G480800
Nokia Lumia 900480800
Sony Ericcson Xperia Arc S480854
HTC Amaze 4G540960
Motorola Droid 4540960
Motorola Droid Razr Maxx540960
HTC One S540960
Kindle Fire HD 8.9″600960
Samsung Focus 2640800
iPad Mini7681024
iPad7031024

Here’s a graphic representation of the screen sizes listed above (click on the graphic to view in full size):

Also in landscape…

Web Client Minimum Widths

We shouldn’t forget that most desktop users can have 1920px or more to view emails (though emails viewed in a browser could have significantly less space if the window isn’t full size). Outside of flip-phone users, you shouldn’t encounter screen widths lower than 480px. This number also holds pretty well for minimum width of a web email client. Though the browser window might get smaller, the content pane of each email client has a minimum width. Content will take up more vertical space as the horizontal space contracts. Check out the minimum widths we found in the table below.

Minumum Client Width
ClientWide
Yahoo!618
Gmail482
Outlook.com371
AOL715

The interesting thing about the chart above is that most web clients do not use iFrames.  So that means the max-width conditional for your media query won’t trigger because the overall browser window is likely greater than 1000px.  The only web client that uses iFrames is Gmail but since Gmail doesn’t support the Style block, it doesn’t support media queries to begin with. 

We are simply sharing this chart so that you can determine your game plan for your default dimensions.  It also makes a good argument for percentage based (fluid) layout techniques since there are so many possible combinations of web and desktop viewports.

How can we use this information?

When considering “responsive” layouts, with breakpoints that render based on the width of the screen, we recommend making sure that your layout looks good in the following dimensions: 0-480px (for iPhone and smartphones), 481-640px (for the larger Android devices), and a default of 580px for tablets, web and desktop clients.  In our next series of blog articles, we are going to be posting templates and best practices for developing percentage based (fluid) and breakpoint based email layouts so stay tuned!

8 thoughts on “Screen Resolution and Responsive Design”

  1. Good stuff. The image of screen dimensions for various devices is pretty useful. In your recommendations you suggest multiple breakpoints based on device viewports. My first question: Why do you recommend choosing breakpoints based on viewport widths instead of content (as so many other developers have pointed out)? And second, I haven’t been able to achieve more than one breakpoint, and I’ve heard maybe two is possible. Can you illustrate with an example how you would succeed at three breakpoints?

  2. Trever,

    Great questions!

    As we mentioned from the beginning, there are pro’s and cons for each approach. If you choose the break point approach, we recommend 480px and 640px. We are in the process of writing more on this topic and we’ve constructed a few free templates to use as code samples. Stay tuned, as those articles will be released within the next few weeks.

    I am curious, when you say “Why do you recommend choosing breakpoints based on view port widths instead of content?” Do you mean breakpoints vs. percentage based elements – which expand and contract based on content?

    In this article, the goal was to 1.) list your options and 2.) identify popular dimensions. We haven’t necessarily sided with one approach vs. another (yet).

  3. Hey Michelle,

    Among the web design community I’ve seen evolutionary opinions on how breakpoints should be determined. A lot of people originally thought breakpoints should be determined based on width or device. For the device, I think it was because everyone was aiming for the iPhone, due to its popularity. The relatively newer idea that content should dictate when a breakpoint happens came to me via Jeffery Zeldman’s blog a while back. (http://www.zeldman.com/2011/12/29/state-of-the-web-of-apps-devices-and-breakpoints/). There’s a great back-and-forth in the comments section. But the general idea behind this argument is that content, for instance, the width of a paragraph, should switch to a new breakpoint when it becomes to long and cumbersome to read.

    But given that Email campaigns are fleeting – we don’t seem to re-open them but more than once –, I do think that breakpoints should be determined by device popularity as you guys have stated here.

    Their are other ideas cropping up about how responsive design should be approached. A typography-first discourse is the latest on Wired.com.

    In regards to using multiple breakpoints, that is possible for websites, but I haven’t found it possible for email (yet), and Elliot Ross says he’s managed two. I’m super interested to see how you’ll pull three off.

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies