Responsive Web Design?

Written by

If you’re writing a new responsive website which seems to be the way to go for a single maintained site that is accessable via mobiles, tablets and phones then here’s some key screen resolutions to be targeting:

Description/Name Resolution Extra Info & Estimated Date
QVGA 320×240 Typically non-smart phones (and Smartphones c.2005)
HVGA 480×320 Typically older smartphones (c.2008)
VGA 640×480 Typically older smartphones (c.2008)
WVGA 800×480 Low-End Smartphones (c.2010 onwards)
SVGA 800×600 Low-End Computers (c.2000) and mid-range tablets
XGA 1024×768 Mid Range Computers (c.2005)
SXGA 1280×1024 Current Computer Screen (c.2010 onwards)
720p HD 1280×720 HD TVs, High-End Smart-Phones/Tablets
WXGA 1280×800 Laptops, Computers and High-End Smartphones/Tablets
WXGA+ 1440×900 Typically Laptops and Computers
Key/Odd Resolutions:
ipad & 2 768×1024 Portrait XGA
iPad 3 1536×2048 XGA
Kindle Fire 600×1024
iPhone 1, 2, 3 & 3G 320×480 Portrait HVGA
iPhone 4, 4S 640×960 Portrait DVGA
iPhone 5 640×1136
HTC Sensation 540×690

This is just a small list of resolutions that’s in use out int he wild so to speak. The varying resolutions does make it slightly harder to get a consistant experience throughout but as long as your site looks good in the first list then you will have hit the majority of devices (as long as you remember to test portrait and landscape!).

As you can also see, Apple has recently decided to use strange resolutions in their devices where as most newer smart phones are 800×1280.

If you’re creating a responsive layout then there’s lots of resources out there to create a fluid grid to reflow the content when the screen size changes. I personally recommend Zurb’s Foundation but the latest version doesn’t support IE7; although IE7 usage is shrinking.