Introduction to grid system in web designing.

1. Grid System
in web design
Multimedia Design

2. Instructional Goals
• Understand about grid system in
web design
• Understand about CSS framework
in web design
• Apply grid system in web design

3. 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 Measurements
The web designer is using fixed measurements, pixels mostly, to
construct the grid and to position elements within the grid structure
and a canvas which is based on a fixed size.
The Canvas
The canvas size for fixed 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.

4. Fixed vs. Flexible or Fluid Design
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).
Flexible width designs scale to the user’s resolution, and therefore the browser
window. There is less empty space, typically at the side of fixed width designs.
However, they both also have the down sides such as fixed layouts generally
scale badly and flexible layouts tend to look very wide and short.

5. Fixed Design
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 fix 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.

6. Gutters
Gutters are the gaps in between columns. They are there so text, or image, from
different columns don’t run into each other.
Generally the columns we create, using Web Standards, are ‘divs’ which are given
widths and positioned and styled using CSS.

7. Creating The Design
The thing about designing to grids is that in order for the grid to work you must
consistently align items on the grid lines.
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.

8. From Photoshop to Browser
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.
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.

9. Flexible Design
I’ll construct this adaptive grid using the Golden Section, which is an irrational
ratio-1:1.618. So, first off we construct a simple two column grid system with the
content areas being defined by the Golden Section ratio.

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

11. Constructing The Grid in CSS
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.
For those who can’t be bothered going through this code, here’s the example.

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

13. Sample of 12 column grid

14. Sample of 12 column grid

15. Sample of 12 column grid

16. Sample of 12 column grid

17. Sample of 16 column grid

18. Sample of 16 column grid

19. Sample of 16 column grid

20. Sample of 16 column grid

21. Reference:
http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-4
http://www.markboulton.co.uk/journal/comments/five-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/