I’m in the process of teaching myself responsive web design as I redesign my portfolio site. If you don’t know, responsive web design is the concept that a website layout should respond to the size of the screen it is being viewed upon. That is, a website will look different on (and be optimized for) a cell phone or iPad than it would on a traditional laptop or desktop monitor. If you’ve ever tried to view a regular, non-mobile website on your smartphone, you know what the significant difference in screen sizes can do to a website.
The problem I’ve encountered, however, is that this is a relatively new area and I’m not finding a clear-cut “how to” guide anywhere for newbies like me. I suspect there are guides in books that I would have to pay for, but I’ve already bought a half-dozen of web design books that I don’t use all that much. So in constructing my own DIY method, I was wondering what sizes of screens I should be designing for. Sure, responsive design doesn’t require a different design for each device, but I think having a general idea of screen sizes would be helpful.
For smartphones, I’m using the iPhone’s screen size of 320 x 480 pixels as a rule of thumb. Mind you, this isn’t the resolution of the screen, just the size. But what about all those tablets that are being released each day? So after a little bit of Googling, I’ve compiled a relatively current list of devices and their screen dimensions in pixels:
|Amazon Fire||600 x 1024|
|Apple iPad||768 x 992|
|Barnes & Noble Nook||600 x 1024|
|Galaxy Tab||600 x 1024|
|HP TouchPad||768 x 1024|
|Iconia Tab||600 x 1024, 600 x 1280, 800 x 1280|
|RIM Playbook||600 x 1024|
|Sony Tablet||800 x 1280|
|Toshiba Thrive||800 x 1280|
So in general, tablets range from 600-800 pixels when in vertical orientation an 992-1280 pixels when in horizontal orientation. And thus, I will be designing my site for the following widths:
|320 – 480||cellphones|
|600 – 992||smaller tablets, larger tablets in vertical orientation|
|993 +||larger tablets in horizontal orientation, laptops, desktop monitors|
I should note that my preliminary mockups for cellphones use 320 x 480 as the standard dimensions and only increase the number above to 599 to fill in the gap between cellphones and tablets. I’m also using the same design for both vertical and horizontal orientation, since both are just a single vertical column with fluid dimensions. Right now, my only anticipated drawback would be the use of fixed-width elements like slideshows, which would lead to some extra negative space in the horizontal position.
I also lean towards a simpler aesthetic, so my designs for laptop/desktop browsers so far are only 1280 pixels wide. If your screen is 1400 pixels or more, you’re going to end up with more tasteful, elegant, negative space. If I end up designing an info-dense website, I’ll reconsider this approach, but for now, it works for me.
(By the way, if it hasn’t been addressed elsewhere, I’ll blog later about my lack of concern for filling an enormous monitor with information. Despite our society’s collective affliction of ADHD, I think we’ve reached a critical mass for how much visual data a human can effectively handle. You just don’t need 3000 pixels of information on your 3000 pixel screen.)