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