Design Grids – Where Next?

Since the 1930s, graphic designers have been using grid systems to structure the layout of their work.

Early pioneers of the grid system include Swiss designer and teacher, Josef Muller-Brockmann (1914-1996), who believed that the skilled application of a grid system speaks volumes about the character and ability of the designer. Influenced by Modernist ideals of structure and clarity, grids were developed to promote a sense of order and consistency within designs.

In the 1930s, designers only had to design static content which would be viewed in printed format. In 2011, evolving new technologies mean that digital designers are faced with implementing such grids across an ever-widening range of devices.

In this blog post, I’ll look at a few of the options available to web designers today.

The 960 Grid System

Over at 960.gs, a grid system has been around for a while, specifically for use online. It aims to provide a solid foundation for web development, through a uniform approach to page layout, and to aid rapid prototyping. Despite its constraints, the 960 grid system offers plenty of versatility, being available in 12, 16 and 24 column versions.

The defined width of 960 pixels – taken from the minimum accepted width of a standard browser window – does have one drawback. With more and more website visitors using mobile devices to access the web, such as iPads and smart phones, layouts such as this do not specifically cater for smaller screen resolutions.

A possible solution? The 1140 grid system.

The 1140 Grid System

The 1140 grid system is, as I’m sure you’ve already guessed, 1140 pixels wide. It is essentially very similar to the 960 grid, although it is much more flexible when it comes to designing for a variety of devices.

Since a lot of LCD monitors now have a native resolution of at least 1280 pixels wide, the 1140 grid fits perfectly on standard monitors. If the visitor views the site on a larger monitor, the site layout remains fixed (using the CSS ‘max-width’ property).

However, and this is when things start getting really clever, if you visit the 1140 grid website and start making your browser window smaller, you’ll see the layout adapt to fit the size of the window. When your browser reaches iPad size, the layout adapts once, then again once you reach standard smart phone size.

One layout design which adapts gracefully to fit many devices – no need for separate mobile websites or ugly layout compromises.

If you’d like your next website to make use of this adaptive grid, give us a call today (or tomorrow).

  • Billy Clarke

    I was reading through a few articles last night on which grid to use next. I am still unsure; 1080px sounds good and so does a full width 1200px, but I do like the sound of the 1140px which I have come across a while back.

    I think the real thing to think about is how you want the site to work over multiple browsers. I do like the idea of how the 1140px works. As I’m not too sure with mobile versions of websites (personally, I like desktop versions and want to stick with them) I think a fluid grid system like the 1140px sounds like a direct hit on the ‘oh YES!’o'metre…

    What are your views on stretching the grid even further to beyond 1200px, keeping to a fixed with semi fluid capabilities?

    Should we design to screen width or use smart methods like the 1140px to accommodate all?

  • Tim Keay

    I’ll definitely be looking into the 1140px grid further – keen to see what can be achieved with it. It’s said to work well in all browsers too. IE6 doesn’t support “max-width”, but then chances are that many IE6 users won’t be viewing the site at much higher than 1024px anyway. I guess stretching the grid any higher than 1140px depends on the target audience – if the primary user group are likely to make use of a higher resolution, then go for it. If not, then it might be safer to stick to a smaller resolution, or at least limit the highest resolution that your site caters for.

    Besides… surely people with huge resolution displays aren’t browsing the web at full screen anyway, given how few sites seem to accommodate for this sufficiently at the moment? Unless they *like* reading 100-word line lengths, of course! :)

    The grid seems flexible enough to adapt, but it’d be good practice to test it at every resolution, particularly the ones that will be most common amongst the expected user group. I agree though – the 1140px grid definitely rates highly on the “oh yes!”-o-meter! :)

  • Billy Clarke

    Luckily, with the 1140px grid there is an IE stylesheet which you can amend and set, the same too with the smaller screen stylesheet which works for anything under and up to 1024px. I’ve had a play around with this since my initial post and it seems to work really well. I see your points with the ‘higher’ resolution screens. Just waiting for the IE6 countdown, aye ;D Oh, and just remember, do not touch the line-height as it messes up the grid… I think I can say, ‘we’ look forward to using it!

Back to top

Contact us, we'd love to hear from you.

  • Business enquiry
  • General enquiry
  • Press
  • Careers
  • Support

Email this page to a friend.

× Engine Creative Squideo Player

Engine Creative Showreels

    TV Commercials

      Corporate

        Animation

          Documentaries

            Digital Projects