1. Background
Mark Bolton, a pioneering grid-based Web design advocate, stated simply, "Well designed grid systems can make your designs not only more beautiful and legible, but more usable."
Grid-based Web design is a modern trend within the Web design community, built on a tried and true print technique sometimes called a 'typographic grid', which serves as a base tool for graphic designers to organize text and graphics in a rational and easy-to-read manner. After World War II, a number of Swiss graphic designers began to question the conventional page layout system of the time and devised a new flexible layout system able to aid them achieve consistency, coherency and rational organization. Emil Ruder, a pioneer in the grid-based design movement, helped found the graphic design style known as Swiss Style. The Swiss Style was defined by the use of sans-serif typefaces, and employed a page grid for structure, producing asymmetrical layouts. Swiss style further demonstrates the benefits of a grid-based design system by emphasizing cleanliness, readability and objectivity (Wikipedia 2010) (http://en.wikipedia.org/wiki/International_Typographic_Style). Hailed by many as the father of grid-based design principles and another early influencer of Swiss Style, Josef Müller-Brockmann presented his epic interpretation of the grid in 1981 with the Grid Systems in Graphic Design publication. Several early examples of Müller-Brockmann's grid-based design solutions were published in his book The Graphic Artist and His Design Problems , Müller-Brockmann (1961).
Fig 1: Figure 554 from 'The Graphic Artist and his Design Problems' by J. Muller-Brockman illustrates the use of a grid-based design system in its simplest form with a typographic grid
Fig 2: Figure 553 from 'The Graphic Artist and his Design Problems' by J. Muller-Brockman illustrates the use of a grid-based design system with more of a graphical treatment and also with type
Grid-based layouts have recently seen a resurgence in popularity as Web designers have begun to embrace these systems. Many Web designers and developers have been creating grid-based layout frameworks which serve as a starting point for Web page layout and subsequently have accelerated the adoption of grid-based Web design. One of these most popular frameworks is the '960 Grid System' which is widely distributed and used in tandem with several open-source themes and design template solutions.
2. Front-to-Back Benefits
The introduction of grid-based Web design to the Web development and production process provides universal benefits for designers, software developers, and content authors alike.
Benefits for Designers
Grid-based Web designs provide a common graphic language for designers to communicate and construct layouts. A common grid-based design framework automatically defines the number of, padding, and margin of columns. These measurements follow a clear and logical pattern which helps organize a wide range of dynamic content scenarios. This alleviates micro-managing content creation by giving the author a set of tools which serve as a standard and defined structure for organizing content.
Fig 3: A screenshot of http://thingsthatarebrown.com Web design which illustrates the use of '960 Grid System' in its design
Fig 4: A screenshot of http://thingsthatarebrown.com Web design which reveals the 16-column '960 Grid System' grid behind the design
As the Web matures, more designers are learning a solid foundation of graphic design principles. This was not the case in the earliest forms of Web design, which typically consisted of creating unorganized and inconsistently designed Web layouts. The lack of any standard dimensional and logical mathematic flow contributed to the confusion and noise of communication between print and digital mediums. Due to the long history of print design, print designers are often more versed in techniques than Web designers, who have not had the benefit of leadership that pushes the adoption of these best-practices. Web designers have tended to focus on the technical aspects of Web design instead. Invoking a maturation of Web design practice, grid-based Web designs have the ability to introduce organization and consistency by simply defining a baseline structure.
From Josef Muller-Brockmann's Grid Systems in Graphic Design,
"Designing Grid Systems in Graphic Design, 1. figure out the page size, 2. divide it into a grid, 3. start designing."
Using a grid-based Web design framework can dramatically cut the time devoted to creating CSS - style sheets to define layout. This allows the designers to spend more time on the specific site's style aspect. The grid also provides a template that can easily be replicated, customized, and rapidly implemented.
Often times, designers worry that a grid will force creativity into a rigid structure leaving little room for unique style. This is an unfortunate myth. Using a grid-based Web design system as a base does not have to impede style. Designs can still be just as organic and free-flowing with dramatic unexpected visual punches with the use of a grid base. Page elements can easily be pulled or pushed outside of the grid boundaries as needed.
There has been a clear separation in the design industry between print and digital mediums. Technical barriers and language incompatibilities have created a divide between traditional media and new media designers. Translating grid-based design into a stable working version on the Web is a major step towards the cohesion of these analogous professions.
Benefits for Software Developers
The grid introduces a common language which designers and developers can share. Web sites built on a grid system have a logical language structure which most developers can easily understand. Grid-based design techniques introduce systematic thinking into the all-too-often murky creative process of design. The grid is an ideal tool for designers and developers to use as a means to communicate the visual flow of a website.
Grid-based Web design frameworks give the developers a pre-defined set of CSS tags to incorporate within the markup of a webpage. Since both the designer and developer are privy to these taxonomy definitions, writing markup with the visual design in mind becomes more obvious and clearly apparent. Given design mockups, developers can accomplish a majority of the page layout during template development. This typically relieves designers from having to modify templates at all, while at the same time causes the templates to have a clearer and more readable structure.
Grids have yet another benefit for developers in that they drastically simplify the tools required. It is common for developers to have to create complex tools for image resizing and handling. New design elements often require creating new software workflows for generating derivative images with very specific sizes, measured in pixels. Authoring tools which allow for the unconstrained resizing of image are difficult to create and maintain. By defining all image sizes by the number of columns, developers can create tools with these limited number of presets built in. Derivative images are then tied to a column metric as opposed to where they might appear in the website. This vastly reduces the number of derivative images created and promotes heavy reuse through a site.
Benefits for Authors
In the same way that grid-based Web design offers a common language between designers and developers, content authors also benefit from this standard concept. One of the largest challenges often faced by content authors is the process around the upload, sizing and placement of images in and around their text. Authors are often intimidated by the granularity of pixel-based sizing and are inconsistent in their use of it. The historical approach to this problem has been to define a set of image sizes for use on a specific site. This requires that content authors must frequently reference printed style guides. The simplicity of the grid and column numbering concept is easily retained. Authors are often able to visually refer to the site itself to remember the number of columns that content spans. Image sizing is greatly simplified by restricting the selection to a number of columns. Content authors can then produce consistent- looking layouts within the core content of pages, and this consistency applies to multiple authors on the same site as well.
The grid serves as a reference point for the designer to control the overall design of a website, creating consistency and harmony while eliminating room for visual design problems. Non-technical authors are able to learn the concepts of a grid-based design and apply it with little training. That training will be easier to consume and retain as it does not change from site to site. Authors can more easily maintain consistency and respect the original design intention. This helps eliminate the design corrosion often seen when a designer hands over content authoring to the client.
3. Case Study
In early 2010, the Indianapolis Museum of Art launched a new website which is based on a grid. Additionally, a WIKI authoring language was created for the website authors with little to no HTML experience in order to use grid-based layout for content creation and placement (Stein, 2010). This allowed the IMA to put the power of design in the author's hands, while maintaining a cohesive and logical flow.
Fig 5: A screenshot of the http://imamuseum.org homepage
Fig 6: A screenshot of the http://imamuseum.org homepage, which reveals the 12-column '960 Grid System' grid behind the design
Fig 7: A screenshot of an interior http://imamuseum.org Web page
Fig 8: A screenshot of an http://imamuseum.org interior page which reveals the 12-column '960 Grid System' grid behind the design
Using pseudo-WIKI to enable rich Web authoring for non-technical staff members, we created grid syntax extensions. Markup for a grid in HTML can be intimidating. For comparison, the previous IMA website required that content authors adhere to a strict HTML structure in order to maintain a consistent look and feel. A printed style guide was available to authors as reference. As seen in this example, even the simplest content required a disproportionate amount of markup.
<div class="bodycopy first">
<div class="copyleft">
<h3>Hours</h3>
</div>
<div class="copyright">
<p><img src="/images/size-g/open.png"/>The museum is open from 9am to 5pm.</p>
</div>
</div>
Here is an example of the same content written using the WIKI markup.
=== Hours
[img:open.png|width=1]The museum is open from 9am to 5pm.
In addition to demonstrating the authoring simplification by using a WIKI syntax, the example shows how to embed an image in content at a fixed size. One would not know the size of template "g" from the first example without referencing documentation, while it is apparent that the image is 1-column wide in the second example.
The WIKI syntax can still prove to be somewhat intimidating to some authors. In that regard, the IMA software developers have provided a set of tools in the authoring environment which allow content authors to complete forms which then auto-generate corresponding WIKI code based on their selections. Figures 9 and 10 demonstrate the embedding of an image and Flickr set respectively into content. This additional layer abstraction negates any need whatsoever for content authors to learn a markup language.
Fig 9: Authoring tool for selecting an image to embed, along with the size, caption, alignment and ability to zoom
Fig 10: Authoring tool for embedding a Flickr photo set into content, along with the size of the rendered interactive
4. Conclusion
Grid-based Web design frameworks have demonstrated themselves to be beneficial to authors, designers, and software developers. The universally shared benefits are pushing grid-based design frameworks to be more dynamic and widely adaptable. As more devices with different display specifications enter the market, the grid-based design solution will continue to evolve and adapt. The future for grid-based Web design is rapidly taking shape. Designers have already begun to heavily adopt the concept. Developers will be quick to embrace the benefits of a grid-based layout given its usage by designers. The fact that non-technical authors on staff can easily understand how to use a grid and the concept of using a grid to enforce good design principles will spur adoption.
Across all digital devices, the grid concept remains applicable. Nearly any creative design layout can benefit from it. For example, with devices like the iPad and iPhone, the usefulness of a grid system is inherently apparent when double tapping a column on a webpage. Open-source content management systems are beginning to provide core themes based on grids which serve as a starting point for designers and correspondingly make grids more accessible. As more and more grid frameworks are developed and improved upon, we'll see more dynamic variations of grid systems with a more fluid/liquid approach that still maintains the sense and stability of a static grid system. Already, huge strides are being made to modernize a standard approach to digital grid-based design. The idea of one grid to rule across all devices is especially intriguing, and a stable working version of this type of grid can be found at "The 1140px CSS Grid System/Framework; Fluid down to mobile" website, http://cssgrid.net/.
5. References
Boulton, Mark (2005). Five Simple Steps to Designing Grid Systems . Last updated 16-July-2005. Consulted January 21, 2011. Available http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-2
Muller-Brockman, J. (1961). The Graphic Artist and his Design Problems. Teufen: Arthur Niggli Ltd.
Muller-Brockman, Josef (1981). Grid Systems in Graphic Design. Niederteufen: Arthur Niggli Ltd.
Stein, R. and E. Bachta. "Breaking the Bottleneck: Using Pseudo-Wikis to Enable Rich Web Authoring for Non-Technical Staff Members". In J. Trant and D. Bearman (eds). Museums and the Web 2010: Proceedings. Toronto: Archives & Museum Informatics. Published March 31, 2010. Consulted January 31, 2011. http://www.archimuse.com/mw2010/papers/stein-bachta/stein-bachta.html
Wikipedia (2011). International Typographic Style. last updated 31-December-2010. Consulted January 21, 2011. Available http://en.wikipedia.org/wiki/International_Typographic_Style
