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.
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.