The document discusses the 960 grid system, a popular framework for building responsive web designs. It has been used by web designers for over a century to bring order, balance, and flexibility to page layouts. The 960 grid establishes a grid of columns and gutters that allow elements to be placed consistently across pages. It helps designers organize content, save time, and provide a better user experience through a structured visual hierarchy.

1. 960 Grid System

2.  The grid is the most vibrant expression of the ‘will to order’ in graphic design
 Grid-based designs brings about strong visual and structural balance
 Offer more flexibility and enhance the visual experience of users
 Consistency of the page enhances the experience
 Adds an order to things and control the user’s behavior towards the site
 Grid can also be described as a consistent system to place objects on a surface

3.  The practice of using a grid to guide design and page layout is nearly a century old
 In the 1910s and 1920s, ornamental design gave way to rationalism and new
objectivity
 This shift in design was part of a much larger movement towards function over form
 After World War 2, a number of graphic designers, influenced by the modernist ideas
of ‘The New Typography’, started questioning the relevance of the conventional
page layout of the time.
 They devised a flexible system to help designers achieve coherency in organizing the
page
 Modernists looked at building a new aesthetic by deriving beauty from the innate
qualities of machines which brought in standardization

4.  Web designers have turned to grid-based design in order to derive beauty from the
innate qualities of the browser again bringing in standardization
 16 years after the invention of the web, we are finally embracing a century-old
design philosophy the Grid Based Design and that too on Web

5.  Grids are all uniform
 Units are the basic building blocks for a grid
 Columns are the grouping of these units that form the grid. Column may not
necessarily be uniform
 Grids work at 2 levels. At the units level of cells (eg.: 20 px X 20 px) and at column
level (eg.: 3 columns, 4 columns right upto 24 columns for more flexibility)

6.  Grids save time, saves money & reduces frustration
 It brings about solid visual & structural balance in a website
 Grid based layout structures offer more flexibility and enhances the visual
experience of a user (UX)
 A user can follow the consistent structure easily.
 A developer can update the layout in a well thought out consistent way
 A balanced and consistently implemented design will increase readers confidence in
your site

7.  All modern displays support at least 1024x768 resolutions.
 Despite the many advances in web technology, it’s all just rectangles
 Understanding someone else’s design is much easier when a standard grid system is
used

8.  First step is to establish the basic layout grid with this as a reference one can
determine how the major blocks/elements will regularly occur in your page
 You often can’t do much about the vertical content as it is dynamic these days. The
focus is usually on the horizontal rhythm
 Most grid systems contain 12 & 16 columns however one can also have a 24 column
grid system for extensive content

9.  Columns {A single page consist of a header, content, sidebars, footer etc. these
sections can be defined by column width. (eg.: the header is eight column wide)}
 Margin {A margin or padding are used to create space alongside the canvas (canvas;
area used to design)}
 Gutter {A gutter provides margin between the canvas}

11.  960px wide with a 940px usable are
 Two versions: 12 column & 16 column primarily used, also have a 24 column version
 These can be implemented separately or simultaneously
 Each column has a 10px margin on the left and the right, which created a 20px
gutter between columns

14.  24 column grid system can be used for extensive content
 Tec Specs for a 24 column version;
 10px margin + 30px column + 10 px gutter

16. Proudly Presented by
Leading Website Design Company