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
|<= 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.|
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.
- 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 😀
- 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?
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.