The Four States of Responsive Web Design

View the demo page

Get the CSS

Grid based responsive layout

Last year I delved into the world of responsive web design, keen to get onboard with what I believe to be an important technique for embracing the mobile web. I created a demo page based on the theory of using percentage widths instead of the traditional pixel based grid layout.

This technique proved a major headache to implement into a real world design given the use of images as an integral part of layout. I came across the Skeleton Responsive Grid which introduced me to the combination of the traditional 960 grid and responsive design. This is great for going smaller, but what about bigger? The 960 grid harks back to the days of 1024x768 monitors, which unless you're holding an iPad in your hand, are practically obsolete as desktop monitors.

There are a number of CSS grid systems for bigger screens, such as the 1140 Grid but these are fluid and that means headache for design. So why not extend the responsive grid out as well as in?

The Four States

The key to efficient design is to have reusable code and tested frameworks on which you can rely, so it is best to keep things simple and boil down all these options into four distinct states:

  • Widescreen: design for screens of 1280 pixels and higher
  • Standard: the traditional 960 grid
  • Tablet: 768 pixels, such as the iPad in portrait mode
  • Mobile: 320 pixels

This can be seen in effect on the mediaqueri.es gallery site which showcases many great responsive websites in each of these four states.

Widescreen Desktop State

Sure, you could go wider, but then you start to pancake the content on a website. I have found that 1176 pixels makes for a suitable 12 columns grid with 30 pixel gutters between columns. The Grid System Generator will very cleverly do the maths for your preferred CSS grid code, allowing for the design of a grid such as the one shown in the screenshot below:

Standard Desktop/iPad Landscape State

I'm a big fan of the 960 grid and in this context it serves both the traditional desktop layout state, as well as doubling as the tablet landscape state. This will adapt the above layout into the following grid pattern:

Tablet Portrait State

Flip your iPad from landscape to portrait and you'll be able to get a layout such as the example shown below. I have used a combination of columns which wrap and columns which resize.

Mobile State

Last but not least, its the design state which is really the driving force behind the responsive trend: mobile. Why no mobile landscape state? Realistically, who scrolls through websites in landscape orientation? For the sake of simplicity, I stick to designing for a 320 pixel width.

 

View the demo page

Get the CSS

 

19 Responses to “The Four States of Responsive Web Design”

  1. BJorn says:

    Found this by searching “bigger than 960 grid” and it’s AWESOME. Thank you 🙂

  2. Lluís Alegre says:

    Thank you for this useful tips.

  3. Harry Jones says:

    Can you clarify the dimensions for the Widescreen Desktop State?

    In your text you say it has a total width of 1176px, however the screenshot seems to show a total width of 1146px.

    Thanks.

    • Tim says:

      Hi Harry, the extra 30px is for the gutters on either side. This is much the same concept as the 960 grid which has an actual with of 940px plus the width of the gutters on each side.

  4. mario says:

    hi this is great
    i am not sure why why the html5 nag tag does not show.. ive opened up the html and its there..

    le me know thanks

    mario

  5. mario says:

    Hello
    im sorry its the Nav Tag – thanks for the reply
    this snippet does not show up

    Hosadasdfme
    Left Sidebar
    Right Sidebar
    Gallery

  6. mario says:

    oh im sorry i found that the nav was display:none within the css

  7. Paul says:

    ‘Realistically, who scrolls through websites in landscape orientation?’

    …er, I do for one

    • Tim says:

      Hey Paul,
      Fair enough; I’ll cop the criticism for making such a broad assumption. At the time of writing, I based this on an iPhone viewing a website in mobile Safari; which, when in landscape orientation, has only 200px of viewport height due to the browser chrome and status bar taking up the remaining vertical space. I suppose it really depends on the content, as to whether it is worth the spending the time to develop a breakpoint for the landscape orientation.
      Tim.

  8. virgilio says:

    Hola. Can you help me? I am working on a Responsive web design on photoshop and using 960grid.

    Whats are the witdh for iphone and ipad on 960grid?

    300px or 320px for iphone.

    700px or 768 px for ipad

    This is the proyect http://cl.ly/image/160j310S0F02 and using 12 columns

    • Tim says:

      Hi Virgilio,
      The screen width for iPhone is 320px; the content width of 300px accounts for 10px gutters on each side, much the same as the 960 grid has a content width of 940px + 10px gutters either side. For the tablet portrait layout, I have simply allowed for slightly larger gutters, so that the content width of 700px is more compatible with existing grids. Hope that helps.
      Tim.

  9. virgilio says:

    Thx Tim.

    My english is not that perfect, would u mine to explain me more about “For the tablet portrait layout, I have simply allowed for slightly larger gutters”

    Any example?

    Thx

    • Tim says:

      The “gutters” to which I refer are the space between the edge of the content and the edge of the screen or viewport; in other words, the padding on each side. With the 960 grid, the full width of the content is 940px width 10px “gutters” (padding) on each side to make the total width 960px.

      For an iPad in portrait orientation, the viewport width is 768px. I have suggested a content width of 700px, with padding (gutters) of 34px on each side, which is slightly larger than the typical 10px gutters or the 960 grid.

  10. Nathan says:

    Hi Tim,

    Fantastic article. We are looking to update our website and want to support the range of devices screens.

    Is there an article on how to use your CSS please? Is the usage the same as, or an extension to the 960 grid?

    Kind regards

    Nathan

  11. Leonardo says:

    I found this page and it’s very helpful, though now we have the iPad retina in landscape position and the screen it’s 2048px wide. I wonder if I can design a full screen content for iPad retina in landscape using a grid large as that… what would you do?

    • Tim says:

      Hi Leonardo,
      The iPad screen is 2048 physical pixels wide, but remember it is a high density display, so in CSS it is still 1024px wide. It is images that you want to be 2x size but layout remains 1x, so the ‘Tablet Landscape’ state in my demo will work normally. The additional complexity of retina is one of the reasons why icon fonts and flat design has become so popular. See my article Get Ready for Retina for more details about that.