Window Layout Grids

Problem

The user needs to be able to scan, read and understand a page quickly.

Solution

Use a grid system for the placement and alignment of all visual objects on the web page.

Twitter Bootstrap 3.1.1 is used below to illustrate a responsive, mobile-first, 12-column, fluid grid system.

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
  <div class="col-md-3">.col-md-3</div>
  <div class="col-md-9">.col-md-9</div>
</div>
<div class="row">
  <div class="col-md-10">.col-md-10</div>
  <div class="col-md-2">.col-md-2</div>
</div>
	

The CSS for these frameworks should be downloaded from their sources. A few of the most popular can be downloaded from:
Twitter Bootstrap: http://getbootstrasp.com
Foundation Framework: http://foundation.zurb.com
Gumby: http://gumbyframework.com
	

Use When

You are designing an experience that needs to follow the normal visual design standards. The human eye 'sees' a web page a certain way, roughly from the top left to the bottom right, and the eye can be guided to see elements in a pleasing and distinctive way.

How

A layout grid is a technique that comes from print design but easily be applied to web design as well. In its strictest form a layout grid is literally a grid of X by Y pixels. The elements on the page are then placed on the cell border lines and overall aligned on horizontal and vertical lines.

A layout grid is an aid for the designer, not a goal by itself. It is therefore ok when some elements are deliberately NOT placed on a grid to create a certain effect. The layout grid simply creates some rhythm and guidance for the eye.

Some examples of powerful layout grids are:

• Twitter Bootstrap
• Foundation Framework
• Gumby

Why

The layout grid creates a systematic and consistent rule for placing objects. It creates a visual rhythm. It makes it easier and more pleasant for the eye to scan the objects on the page. Page designs that do not use a grid often tend to look 'messy' or 'unprofessional'.