Grid system introduction

Grid Systemin web designMultimedia Design

• Understand about grid system in web design

• Understand about CSS framework in web design

• Apply grid system in web design

Instructional Goals

Designing Grid Systems for Web

Ratios are at the core of any well designed grid system. Some­times those ratios are rational, such as 1:2 or 2:3, more complex ratios, such as those based on the Golden Section (1: 1.618), are called irrational ratios.

The MeasurementsThe web designer is using "xed measurements, pixels mostly, to construct the grid and to position elements within the grid structure and a canvas which is based on a "xed size.

The CanvasThe canvas size for "xed grid design on the web is determined by the browser window size, which is in turn determined by the user’s screen resolution. So, a designer should design to minimum requirements to meet the mostly user’s need.

Fixed width designs are, well, just easier to produce. The designer has control over the measure, and therefore the legibility (until the user increases or decreases the font size that is). 

Fixed vs. Flexible or Fluid Design

Flexible width designs scale to the user’s resolution, and therefore the browser window. There is less empty space, typically at the side of "xed width designs.

However, they both also have the down sides such as "xed layouts generally scale badly and $exible layouts tend to look very wide and short.

We begin by applying ratios to this canvas, in the same way we’ve done with designing grid system for print. This example uses a "x grid and sits happily below 760px wide.

Once the grid sets up, then used photoshop to comp together the designs positioning any elements exactly on the grid lines. The grid was designed intially for a content and navigation area based on the Rule of Thirds, the dimensions of which are 250px and 500px respectively. The content area is then sub­divided into two 250px columns. 

Fixed Design

Gutters are the gaps in between columns. They are there so text, or image, from different columns don’t run into each other.

Gutters

Generally the columns we create, using Web Standards, are ‘divs’ which are given widths and positioned and styled using CSS.

The thing about designing to grids is that in order for the grid to work you must consistently align items on the grid lines.

Creating The Design

The bulk of the design work, if you exclude sketching with a pencil, is done in Photoshop. First of all, take great care in drawing the grid accurately, to the pixel, and then overlay content elements ensuring the alignment is precise.

One of the most useful ‘tools’ for creating pixel-perfect grid systems for the web is using a grid as a background image element on the body tag.

From Photoshop to Browser

Using the grid designed in photoshop, save it out as a gif and then apply that to the background of the body tag. This provides you, throughout the build of the site, the grid so you can align all the content elements accordingly.

I’ll construct this adaptive grid using the Golden Section, which is an irrational ratio-1:1.618. So, "rst off we construct a simple two column grid system with the content areas being de"ned by the Golden Section ratio.

Flexible Design

In order for a grid to be adaptive, we have to use scalable units of measurement such as 100% or Ems. Then, convert the column width ratio’s to percentages, which gives us 61.8% for the main column and 38.2% for the right column.

Constructing The Grid in CSS

For those who can’t be bothered going through this code, here’s the example.

Here’s the CSS code including all the global stuff such as links, typographic stuff and general body stuff which is applied to a pretty basic XHTML structure.

960 Grid System

Grid 960 is a CSS Framework that enables developers to rapidly prototype designs. They are excellent tools for creating mock ups.

Making The Grid

Grid 960 works by using classes through inheritance. Grid 960 provides two grids: 12 and 16 columns. The main container is always 960px wide.

Every grid cell has a margin: 0 10px. This creates a gutter of 20px. When creating a row, the total width of all elements add up to 960. Take a look at Grid 960′s demo page.

Sample of 12 column grid

Sample of 12 column grid

Sample of 12 column grid

Sample of 12 column grid

Sample of 16 column grid

Sample of 16 column grid

Sample of 16 column grid

Sample of 16 column grid

Reference:http://www.markboulton.co.uk/journal/comments/"ve-simple-steps-to-designing-grid-systems-part-4http://www.markboulton.co.uk/journal/comments/"ve-simple-steps-to-designing-grid-systems-part-5

960 Grid System CSS Framework:http://960.gs/http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/