Using Grid-based Web Design to Optimize Content Authoring and Presentation

Matt Gipson and Charles MoadIndianapolis Museum of Art, USA

MW2011 Mini-WorkshopPhiladelphia, PA

April 9th, 2011

Why This Talk?

A Common Language

What We Will Cover

• History• Benefits for– Designers– Developers– Content Authors

• Case Study• Looking Ahead

History of Grid-Based Design

Emil Ruder• Swiss typographer and

graphic designer, who with Armin Hofmann helped to found a graphic style known as the Swiss Style.

• The Swiss Style was defined by the use of sans-serif typefaces, and employed a page grid for structure, producing asymmetrical layouts.

Josef Müller-Brockmann

• Grid Systems – The first detailed publication to show how the grid is constructed, applied and learned.

History of Grid-Based Design

History: Josef Müller-Brockmann

Early Josef Müller-Brockmann Poster Designshttp://www.flickr.com/photos/blankaposters/sets/72157605199393277/

History: Josef Müller-Brockmann

Early Josef Müller-Brockmann Poster Designshttp://www.flickr.com/photos/blankaposters/sets/72157605199393277/

Benefits for Designers

• A grid framework automatically defines the number of, padding, and margin of columns.

• Clear and logical pattern which helps organize a wide range of dynamic content scenarios.

• This alleviates micro-managing content level design with a defined structure for organizing content.

Benefits for Designers

• Dramatically cut the time devoted to creating CSS - style sheets to define.

Benefits for Designers

• The grid allows designers to spend more time on style, less on math &coding.

Benefits for Designers

• The grid also provides a template that can easily be replicated, customized, and rapidly implemented.

Grid Fallacies• Some designers avoid the

use of a grid-system because they believe using it will limit their design options.

• Designers worry that a grid will force creativity into a rigid structure leaving little room for unique style.

Benefits for Designers - Tricks• Use negative margins to

pull elements out of the grid boundaries.

• Abandon the grid inside or outside content areas.

Benefits for Designers - Tricks• Use background Images

that bleed outside of the boundaries of the grid.

• Wrap grid divs with container divs which can span the entire page for example.

Benefits for Designers - Examples Unique examples of grid design

• Notice the generous use of white space.

Benefits for Designers - Examples

Note the grid can be abandoned within the interface such as seen in the slideshow feature.

In the example above the grid is abandoned in the main content area as well where they have embedded a blog.

Benefits for Designers - Examples Note the scale of the site logo and the intentional offset from the grid.

Benefits for Designers - Examples Note the use of a large scale image and it’s placement fitting it to the grid.

Also note the products centered in blocks.

Benefits for Designers - Examples Note the use of a liquid header background image that spans the whole page behind the grid. This can be achieved using a wrapping div.

Benefits for Designers - Examples Note the use of a large header background image and how it is pulled out of the grid on the left hand side.

Benefits for Software Developers

• A clear set of CSS rules to follow

Under the Hood

<div class=“grid_12”><div class=“grid_6 alpha” /><div class=“grid_3” /><div class=“grid_3 omega” />

</div>

grid_12

grid_6alpha

grid_3 grid_3omega

Benefits for Software Developers

• Tools are easier to build.• Predetermine image/content sizes; layouts

Benefits for Software Developers

• 5 developers vs. 1 designer– (How’s that

work?)

Benefits for Content Authors

• Easy to understand concept

Benefits for Content Authors

• Indirectly enforces consistency

Benefits for Content Authors

• Enables rich layouts

Benefits for Content Authors

• Simple tools

General Benefits• Works well with new-age devices

IMAmuseum.org: A Case Study

IMA: All CSS Enabled

IMA: All Except 960.css

IMA: Just 960.css

IMA: All CSS Enabled

Image Specs Before the Grid

Old imamuseum.org style-guide – A list of image names and sizes.

Image Specs Before the Grid

Old imamuseum.org style-guide – A list of image names and sizes.

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

=== Hours[img:open.png|width=1]The museum is open from 9am to 5pm.

Before

After

Stein, R. and E. Bachta. "Breaking the Bottleneck: Using Pseudo-Wikis to Enable Rich Web Authoring for Non-Technical Staff Members". MW2010 http://www.archimuse.com/mw2010/papers/stein-bachta/stein-bachta.html

Authoring Helpers

• Fill in the blanks• Reference guide

Authoring Helpers: Images

Authoring Helpers: Flickr Set

Grid Tools for All

• The web is full of grid system frameworks.• Several online web apps exist– Grid calculators, bookmarklets, etc.

• Several open themes are popping up using a grid system.– Push for 960 WordPress base theme– Drupal– Joomla

Why 960?

• Most modern monitors support at least 1024 × 768 pixel resolution.

• 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.

Tools – 960 frameworks

960 Gridder

960 Grid System Fluid 960 Grid System

Tools – 960 themes

Drupal WordPress

• 960 Robots• Omega• + many more

• 960 Blank Canvas• 960wp• + many more

Tools – 960 Grid Alternatives

1140px, 12 column grid. Fluid all the way down to a mobile version.

978.gs – Another popular framework

The Square Grid – 28px baseline-grid. 1 square = 28px.

jQuery Masonry

Tools – 960 alternatives – jQuery Masonry

“Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally along a grid. The result minimizes vertical gaps between elements of varying height, like a mason fitting stones in a wall.”

Tools – 960 alternatives – cssgrid.net

“Scrap 1024! Design once at 1140 for 1280, and with very little extra work, it will adapt itself to work on just about any monitor, even mobile.”

Mobile view Desktop monitor view

Tools – 960 alts – Fluid 960 Grid System

The Fluid 960 Grid System templates have been built upon the work of Nathan Smith and his 960 Grid System using effects from the MooTools andjQuery JavaScript libraries.

775px wide 1840 px wide

Tools – 960 alternatives – Roll Your Own

A fresh take on the CSS grid. (loosely based on Nathan Smith’s 960 Grid System). Its mission is to be lightweight.

Tiny Fluid Grid The 1Kb CSS Grid

A lightweight customizable tool for building base

Tools – 960 alternatives – Roll Your Own

The 1Kb CSS GridLightweight base css stylesheet for the grid structure. Leaves it up to the designer to define a ‘reset’ stylesheet and style.

.grid_1 { width:60px; } .grid_2 { width:140px; } .grid_3 { width:220px; } .grid_4 { width:300px; } .grid_5 { width:380px; } .grid_6 { width:460px; } .grid_7 { width:540px; } .grid_8 { width:620px; } .grid_9 { width:700px; } .grid_10 { width:780px; } .grid_11 { width:860px; } .grid_12 { width:940px; } .column { float: left; margin: 0 10px; overflow: hidden; display: inline; } .row { width: 960px; margin: 0 auto; overflow: hidden; }

Sustainability of Grids

• In the same way that grid principles transfer from print to web, they stand a much better chance of remaining relevant on new device.

• Open-source content management system adoption of grids will further broaden their reach.

• Grids are an established design tool based on a long history of documented knowledge.

• Grids are everywhere in our society, and have been for centuries. The Grid is a classic tool that won’t be going away anytime soon.

Sustainability of Grids

The Future of Grids Watch for this book:A Practical Guide to Designing Grid Systems for the Web

• By Mark Boulton markboulton.co.uk

Thanks

• Matt Gipson and Charles Moad• Indianapolis Museum of Art, USA

MW2011 Mini-WorkshopPhiladelphia, PA

April 9th, 2011