Responsive website design cheat sheet part 1: What widths should I design for?

Tags: , , , &

zing_design_responsive_website_widths_guide_full_image

Designing websites for mobile and tablet devices is not easy and it can be difficult to decide to which devices and viewport widths to support. We have compiled a list of the viewport widths to target based on our experience building responsive sites.

With new mobile and tablet products constantly hitting the market, all with varying resolutions and pixel densities, getting to a common list of widths to design and develop for can sometimes be overwhelming.

Having said that, if you take the mobile-first approach and know what you are in for when people request a “responsive website design” or “RWD”, mobile and tablet design will be a piece of cake.

This is a list of the 5 common width groups that we aim for, when we are designing responsive websites at Zing Design. You can certainly break these up into even more specific widths (Boston Globe has over 30 different device width groups) – however it does come with baggage, in the form of significant additional time to test, debug and maintain. You can download a PDF version of this cheatsheet.

Zing Design’s cheatsheet for responsive website widths

Viewport
width
Devices Considerations
<= 320 iPhone – 320 x 480Samsung, HTC, LG – 320 x 480 This is the default styling before any media queries are made. It covers all general styles and the portrait size of many phones, at this width it’s important to consider the screen real estate lost to navigation on older iPhones (about 124px) – this makes the height about 356px, which is really not very much room. Make sure to squeeze that content down at the top of every page displayed on mobile.At this viewport width, you should have no more than 3 navigation items in the primary navigation. You will want to remove any presentational and unnecessary images at this size as they are a costly overhead on slow connections and aren’t going to look that great on such a small screen.
> 320px iPhone – 320 x 480HTC, LG, Samsung, Motorola – 320 x 480HTC, LG, Samsung, Motorola, Nokia Lumia
– 480 x 800
The iPhone landscape width and a popular resolution for Android and Windows phones. On the old iPhone, the landscape mode leaves you with a measly 208px height to work with. Make sure you take this into consideration and keep key relevant content and primary navigation at the top of the page.
> 480px HTC – 540 x 960HTC, Motorola, Samsung – 720 x 1280 Some adjustments may be needed at widths over 480px. We can start displaying more content and can add more items to the primary navigation. Button sizes will probably need to be increased.
> 768px Tablet browsersHTC, LG, Samsung, Motorola, Nokia – 480 x 800iPad, iPad mini – 768 x 1024Samsung Galaxy Note – 800 x 1280 800px is a popular screen width and height for Android and Windows phones and they will display the tablet version. This should be all right in most cases, but it is important to test and make sure the page isn’t too top-heavy and that buttons are still big and clickable.Another challenge at this width is the emergence of devices like the iPad mini and Samsung Galaxy Note, you’ll have styles for the larger tablet version displaying on a smaller screen. You may want to check for these devices manually if you don’t want the tablet version to be squeezed down on the smaller screen.
>= 960 Desktop computersHigh resolution devicesiPad, iPad mini – 768 x 1024Samsung Galaxy Note – 800 x 1280 At this level we will want to include any desktop-specific styles and styles specific to high-resolution devices (which we will cover in our next blog post). For tablets, it’s a reasonable assumption that displaying the desktop version of the site on tablet is an acceptable solution. Just make sure that when the user turns their tablet around to landscape mode they don’t get a nasty shock when a different group of styles are rendered!Many modern devices now have a portrait or landscape width of 960px or more which presents a new challenge. We can include checks for pixel-ratio and resolution if we still want to make presentational changes different to the desktop version.IMPORTANT: If you’re supporting older versions of IE, you’ll need to duplicate the desktop-specific styles as IE < 9 will ignore the media query.

Download a PDF version of this cheatsheet

Other things to consider when building responsive websites

Getting everything looking right on all these devices is in this case the easy part. We also have a lot of optimization to consider…

Why? Because potentially your users could be on a device which does not have access to high-speed internet (in a lot of countries such as New Zealand, 3G is still relatively slow and expensive compared to the States) and these users are paying a substantial amount for their data usage, so it is important to also consider:

  • Using Adaptive Images developed by Matt Wilcox to serve images appropriate to the size of the user’s screen so users are not downloading large-file-size images designed for desktop computers. It’s a bit more work, but your mobile visitors will be very thankful for it.
  • Serve lighter mobile content to users, i.e. cut down images which are strictly presentational and remove unnecessary/unused JavaScript and CSS. Doing mobile optimization server-side is recommended by the W3C, they suggest using AskPythia, an open-source mobile detection software. There are plenty of lightweight mobile detection libraries out there for every platform.
  • Always use an HTML & CSS solution where possible. CSS3 can now be used as a replacement for things like images and animation as nearly all modern mobile devices support the latest standards. Check out caniuse.com if you’re not sure about one of the newer features! Remember you don’t need to support old IE versions when developing for mobile :D
  • Be sure to test your websites on a variety of devices, mobile browsers and most importantly bandwidths (just in case you’re not doing this already!)

 

Want to know more about responsive website design?

Part 2 of our responsive website design series is all about designing for retina displays and screen pixel densities.

Want to jump in and start building straight away? Why not take a look at our Twitter Bootstrap series, which looks at the pros and cons of using an existing framework to speed up the development of your responsive websites.

People who have viewed this post also viewed

Comments

  1. russelluresti

    It was right in the initial talk about how to do RWD – you start with a design and then scale your browser and fix it at the widths it "breaks" at (stops looking aesthetically pleasing).Unfortunately, that tends to require more effort than just creating a list of media queries based on common device sizes and only worrying about those.

    Reply
  2. Already__Taken

    Boom exactly, If you're thinking you need device specificity don't you really mean you need to be say; feature detecting for touch and increasing UI control size for that feature.Detect zoom levels instead of getting the device and checking its resolution scaling.We need to address the image scaling problems with a proper specification so unfortunately we're stuck with work arounds and guessing image size for that.

    Reply
  3. Alessi

    Good job! This is the type of information that are supposed to be shared across the web. Google should rank this article higher. I found it very useful.

    Reply

Leave a comment

* Required fields

captcha

Please enter the CAPTCHA text