A Simple Device Diagram for Responsive Design Planning

At Metal Toad we're big fans of responsive design, but a common snag in the responsive planning process comes when choosing what device widths to design to. Just yesterday we had a big internal debate over what the best widths to design to are for 3 layout sites, 4 layout sites, etc. I'll get to our conclusions below, but another important distinction to call out is that for each layout there are two things to consider: what the pixel width range for a specific layout should be, and what pixel width the designer should create the PSDs at.

There are an ever-increasing number of devices with different screen resolutions to take into account with a responsive design, so we put together a simple but handy diagram that lists the most common device widths as of the present, along with overlays for potential device width ranges. A big shout out to creative partner Sisu for the inspiration to put this together.

The Diagram

Here's the result! You can also download it in PSD format and update it in the future with new devices or experiment with your own responsive width ranges in a visual format.

Responsive Widths Chart

A couple of things to note:

  • As the labeling indicates, the top of the diagram is portrait orientations and the bottom is landscape orientations for devices. We considered creating a more visual height/width diagram, but width is all we're concerned with in a responsive design, so putting everything on one axis made the most sense.
  • iPhone and iPad (the two devices most often targeted with responsive design) are listed as 320px by 480px and 768px by 1024px respectively. For development purposes, this is still how the devices render a layout responsively, even though the newer retina displays for iPhone 4/4S and "the new iPad" have twice as many pixels horizontally and vertically. However, when it comes to PSDs, try to get them designed with a width of 640px and 1536px if possible, because you'll end up with crisper images on the retina displays when scaling down versus scaling up. The 640px and 1536px designs should be laid out as though they'll be used on a 320px/768px device though.

Our Suggested Layouts

The debate got started yesterday because we encountered a situation where only 3 layouts were called for, versus the four that Metaltoad.com is designed with. Here's what we decided on:

3 Layouts

3 layouts makes things a bit tricky, because traditionally our thought was to design for phone portrait, phone landscape, tablet portrait, and desktop/tablet landscape. The simplest solution was to combine phone landscape for larger resolution phones and tablet portrait:

3 Responsive Layouts

  • 0-519 pixels: Most all phones in portrait mode will see the narrowest layout, and this can be a fluid-width layout to accomodate exact screen widths. Iphone landscape will still see this narrowest design.
  • 520-959 pixels: Some newer Android phones with big screens and large resolutions will see the middle layout in portrait orientation, as will Kindle Fire, iPad, and most Android tablets in portrait. Most Android phones in landscape orientation will also see this layout.
  • 960+ pixels: Newer big screen Android phones, Kindle Fire, iPad, and most Android tablets in landscape orientation will see the full width layout. This is also the layout that desktops will see.

Design Targets:

  • Layout 1: iPhone (320/640px) in Portrait is a good candidate for the PSDs. Since this is often a fluid width layout, it can grow or shrink in width to fit other devices in this layout.
  • Layout 2: iPad (768/1536px) is a good choice for the PSDs here. This layout can scale to fit other devices with the same layout.
  • Layout 3: Desktop full width (960px) fixed-width with a background generally makes the most sense for PSDs.

4 Layouts

4 layouts is what we're using on Metaltoad.com. See "How we made the Metal Toad site more mobile-friendly with media queries" for details on our responsive implementation. Nearly a year of new devices later, we still like the widths we chose to use on our site for a 4 Layout approach:

4 Responsive Layouts

  • 0-519 pixels: Most all phones in portrait mode will see the narrowest layout, and this can be a fluid-width layout to accomodate exact screen widths. Iphone landscape will still see this narrowest design.
  • 520-759 pixels: Phones with large resolutions, and tablets with small resolutions (including Kindle Fire) will see this layout in portrait orientation.
  • 760-959 pixels: iPad and most Android tablets will see this layout in portrait, and most Android phones will see this layout in landscape orientation.
  • 960+ pixels: Newer big screen Android phones, Kindle Fire, iPad, and most Android tablets in landscape orientation will see the full width layout. This is also the layout that desktops will see.

Design Targets:

  • Layout 1: Again, iPhone (320/640px) in Portrait is a good candidate for the PSDs. Since this is often a fluid width layout, it can grow or shrink in width to fit other devices in this layout.
  • Layout 2: Kindle Fire at 600px is a good target device for PSDs.
  • Layout 3: Again, iPad (768/1536px) is a good choice for the PSDs here. This layout can scale to fit other devices with the same layout.
  • Layout 4: Desktop full width (960px) fixed-width with a background generally makes the most sense for PSDs.

6 Layouts!

Go big or go home, right? If your project budget is bottomless and you want to go for customization to the max, 6 layouts could fit the bill:

4 Responsive Layouts

  • 0-240 pixels: Older web-enabled phones and some small form factor devices will see the narrowest layout, which should probably be primarily text-based since there is little room to work with.
  • 241-399 pixels: iPhones in portrait orientation get their own layout, which will also be seen on those older web-enabled phones in landscape (if such a thing exists).
  • 400-540 pixels: iPhones in landscape and most Android phones in portrait would see this layout.
  • 541-767 pixels: A layout just for Kindle Fire in portrait orientation!
  • 768-959 pixels: iPads and most tablets in portrait orientation will see this layout, as will many Android phones in landscape orientation.
  • 960+ pixels: Finally, the widest layout will be viewable on most tablets in landscape, plus desktops.

Design Targets:

  • Layout 1: 240px devices are naturally the width to design PSDs to for this range, likely with a fluid layout
  • Layout 2: Again, iPhone (320/640px) in Portrait is a good candidate for the PSDs for the 240-400px width range.
  • Layout 3: This design can probably be very similar to layout 2, but targeted at 480px Android phones in portrait.
  • Layout 4: A design just for Kindle Fire (600px) in portrait.
  • Layout 5: Again, iPad (768/1536px) is a good choice for the PSDs here.
  • Layout 6: Desktop full width (960px) fixed-width with a background FTW!

What are Your Responsive Widths?

Hopefully that info was useful info if you're new to designing and developing for responsive width ranges with target widths for designs. If so, definitely grab the diagram PSD and put it to good use. If you are experienced with designing for responsive and either agree with us or disagree entirely, I hope you take the time to leave a comment with your thoughts!

Want more awesome content like this? Subscribe to our newsletter!

Comments

Thanks!

This is a great resource. It will be very useful. I know there are some folks out there that feel Responsive/Adaptive Design should be device independent, but realistically, it's good to think about the major devices that your page/site could be viewed on for some basic layout shift points.

adam's picture

You're Welcome!

Agreed that a big part of the appeal of responsive is that it's device independent. Part of what prompted this post was that there's no such thing as a responsive width PSD, so designers generally have to target some sort of device, but also keep in mind how the design will scale over a given pixel range.

Nice

Thanks for putting this together, it's a nice outline that I'll definitely use to plan out upcoming responsive designs. Three distinct layouts is the way I'll go.

Nice post. Cant believe web

Nice post. Cant believe web design is getting even more complex... Do you have to use ems for responsive designs or are media queries enough?

adam's picture

You don't have to use ems in

You don't have to use ems in responsive, but they can be helpful. Check out our source for the responsive design css on metaltoad.com to get an idea of how we're using them. As a project manager, I've got general knowledge of coding for responsive, but if you want more details on specific implementation, one of our developers could probably give you a lot more insight.

Useful

Thank you for posting this. The amount of research you've done makes this a very good resource.

I'm curious: do you plan to keep this updated (time permitting) as companies continue pushing the limits of screen size and resolution?

adam's picture

I anticipate we'll keep it

I anticipate we'll keep it updated since it's a tool we plan to use internally for design planning with our clients. It wouldn't take much more effort to keep the blog post updated, so I see no reason why we won't do that as well.

Thanks!

This is indeed a fantastic

This is indeed a fantastic article; one that I'll be referencing frequently not only for my personal planning but also to better explain the method & benefits to my clients.
I could've used this late last night actually to explain to another designer friend who's learning web design and beginning the responsive/adaptive path. He was debating whether to use percentages vs ems in determining what font size to use and this guide would really help in thinking along those terms.
Thanks!

Helpful

This looks a very helpful resource, but how do you deal with individual breakpoints? I agree that having something to visualise is a good idea and setting up the width is a good idea, but depending on the design, breakpoints will be at different widths and won't necessarily fit into these structures.

How do you present these designs to clients? Is it the mockups at different widths or a responsive wireframe?

Thanks for sharing this though, will be handy.

adam's picture

Graeme,

Graeme,

See my reply to Sebastien below, but in regards to individual breakpoints for layouts, we usually put them in between devices, and often unless a layout is intended to be fluid-width, we'll create the PSD to be the narrowest width possible for a layout. We could present responsive HTML mockups to clients, but generally the budget doesn't call for the extra time and effort to do so. In that case, we use the target PSD widths I refer to in the post to create mockups, and then we desscribe how a specific design will scale or stay fixed-width within a given pixel range. It's also very helpful to have an example site. We use metaltoad.com's responsive on a regular basis to show clients how responsive widths work.

What about all the files?

Hi Adam,

Thank you for this very useful article.

I was thinking that it can get easily messy with all the files : if you assume 4 layouts with just 3 revisions for 5 pages, you have already generated 60 files. If you assume the same for creating the wireframes before the visual design, you generate 120 files. How do you currently deal with that?

I guess another problem is presentation of all this: you or your client might not have all the devices available. How do you present all the design of the different layouts to get feedback? Since display size is a factor, you can't just send that by email.

I know that there are tools to share mockups online, but none seems to deal with that. I am looking for an idea for a StartupWeekend in two weeks (http://startupweekend.org/) and maybe there is something worth working on here. What do you think? Don't hesitate to contact me directly.

Regards

Sébastien

adam's picture

Sebastien,

Sebastien,

Yes, the number of files adds up quickly, especially when wireframing and multiple revisions are involved. We deal with that by making sure we build the additional budget necessary for responsive design into our project budgets with clients. We make the case to them that a responsively designed site is still more efficient that separate native apps for each device, and cost-wise it's still the most effective option to design for mobile.

The design process is usually streamlined by not doing responsive layouts in wireframing. Instead, comps are completed for the full-width desktop version and approved by the client. Once we have approved full-width designs, then we take those designs and rearrange elements for the responsive layouts. In this way, we're definitely not starting from scratch on the responsive work, so each responsive layout can be created more quickly.

We use Basecamp to share files with clients, and we'll generally export pngs from Photoshop for the client to review. Once we move into development of the responsive site, we test on devices, but generally we have clients review in their browser by changing the browser width to see different layouts if they don't have devices to review on. You can try it on metaltoad.com - as you drag the browser window narrower or wider, our site will adjust to our different layouts.

How common is responsive web

Hi Adam,

I am trying to find how widespread responsive design is: do you know any stats or survey?

Since I haven’t found anything I am trying to do my own (super short) poll. You can access it here: http://responsive.wufoo.com/forms/z7x3x5/ and the results are here: https://responsive.wufoo.com/reports/z5p8q2/

If you could help spread the word with a twit or something, that would be great. I think the results will interest everybody in the web design community.

Thanks in advance for any help

Responsive Webdesign instead of Apps

make the case to them that a responsively designed site is still more efficient that separate native apps for each device

I think that this is a really good point, which should be pointed out to all of those companies that think that they just need to have an app even though they have no real use for it. I'm not interested in surfing for clothes through every brand's individual app, but i wopuld like a website that was remotely usable when surfing on my tablet (there are so many awfull "mobile" clothing websites!).

Great Resource

Very nice post. Helped me wrap my head around certain ideas I want to incorporate into my framework.

Fantastic Resource!

I dig the resource, this will definately help a lot of people moving forward with responsive designing!

Keep up the great work!

One of the bests ever!

Wondering how could be nice to work in a team like yours! I'm trying to develop a whole ecommerce website alone fully responsive and there is a lot of issues I have to deal with. Time is against me and this detailed article will help me to head up the better way to complete the job. Thank you for sharing such a detailed article about this subject. Best regards!

thanks

This is really helpful to look at visually. Thanks!

Thanks!

Adam thanks for the photo of the different sizes. I was having a pain in the ass time trying to get a responsive site to look good on the Kindle Fire. With your image I was able to add a 3rd stylesheet that let the design look good in Portrait mode on a Kindle. Now I can finally get my new portfolio site up lol!

Thanks again!

I use 5 layouts:

I use 5 layouts:

240px for 0-320
480px for 321-600
768px for 601-959
960px for 960-1280
1200px for 1280-inf.

The last one is just an extra for large desktop monitors.
The rest adapts to fit the smallest screen in that range (so no horizontal scrolling is required).

adam's picture

Good layouts!

That's a good breakdown. I wonder how long it is until we all have mega-resolution monitors and are designing sites to HD resolution...

Retina Displays

And along with super wide resolutions you are right, we need to start looking at the pixel density issues (or opportunities depending on where you are coming from).

While it won't really affect the breakpoints that you choose it is something you will need to take into considerations when it comes to loading background images (so yes for mediaqueries but maybe not an actual physical width breakpoint) and for content based images.

Very exciting times indeed.

thanks very much .

thanks very much .
i still learn responsive design .
:D

Nice breakdown, explanation,

Nice breakdown, explanation, and diagrams. Note, however, that the 1280px mark in your diagrams is off by about 26px.

Suggested Layout Brilliance

Your suggested layouts we've used soooo many times ever since we found your diagram. Just dropped by to say THANK YOU, your PSD saved us from tearing each other's heads off whilst arguing about 3 vs 4 width responsive!

The diagram is wrong about Android sizes

Browsers of typical Android devices with screens 480x800 physical pixels report window width of 320x533 pixels.

PS Is there an updated version of the diagram?

A golden go to for rwd!

I just wanted to give a huge Thanks from not only me (a Quality Assurance engineer) but from my whole development team for such an awesome resource to developing and testing responsive websites.
Question -- Are you planning to do a refresh/update to this chart to account for new devices are released? Do you find now with even more fragmentation of Android devices (with even more availability of even more screen sizes, like fablets) that this chart even needs an update?
Thanks!

adam's picture

Updates

Thanks Erik! I do have it on my to-do list to give it a 2013 update at some point. What's interesting is that even with increased fragmentation in devices in the last year, suggested breakpoint widths haven't changed that much. The main new problem we're running into is that some mobile devices, phones particularly, report such a high device width that they end up displaying a desktop layout!

Many thanks for this terrific tool!

Thank you for the great tool for planning custom tailored solutions. I will without a doubt use this technique to illustrate the topic and plan solutions for responsive UI design projects for the rest of my dev career.

Great Resource

I came across this, as rather naively when I started converting my theme to be responsive, I was working off the most prominent web resources which indicate the main switch points are 240, 320, 480, 768 and 1024. I could see that 3 designs would work if you have a bit of resizing going on from 768 upwards, and ignore 240px (looking at my analytics I'm seeing close to zero)

But when I came to test it on devices available to me, the switch points were just plain wrong / out of date (expect 320). One Android phone I have in portrait has a view port of 533 and a slightly larger phone 532 for instance.

So with a bit of fludity your three design scheme works.

I think a key question is when to switch from navigation deigned for touch screen to navigation designed for mouse.

Of course there are programmatic methods that can try and do that, but I see CSS4 draft will have that ability in media queries too.
http://dev.w3.org/csswg/mediaqueries4/#pointer
something to look forward to.

Another concern is switching the way of presenting images, if using a light box on desktop sizes, is it worth switching to a 'touch to swipe' image process on touch screen. I think so. Again needs either some clever javascript or server side code to detect if it maybe touch screen and switch libraries.

awesome

Thanks for this, great info for getting things straight. Would love an updated version! Thanks

Very useful!

Found this highly useful. It would be great if you can keep it updated!

Great!

Just stubled across this blog post and I love it. Any plans for making an 2014 edition of the same chart?

Thanks alot!

Most helpful

Thank you! Lists of device sizes and resolutions is very hard for a designer to apply. This is most useful and understandable.

Add new comment