Home / Articles / Programming languages / Markup languages / HTML & CSS / How does the grid web design work from coder's point of view?

How does the grid web design work from coder's point of view?

How does the grid web design work from coder's point of view?
 
  • Currently 5 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 5/5 (2 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


Creating high quality product is a result of coordinated team work. It is important to make teams work together efficiently.

Today I would like to talk about coders. To be more precise how do coders see design?

Usually information on the websites is shown as rectangular blocks (columns) inside one big block (main block). Smaller blocks are contained inside the main block.

Let's take a look at the simplest webpage layouts.

Simple website layout - example 1

Simple website layout - example 1.

Main block has a different background than the main site's background.

Examples with main block highlighted
Examples with main block highlighted 2

Examples with main block highlighted.

The main block has no background, but in HTML the main block is always present.

Simple website layout - example 2

Simple website layout - example 2.

The main block has no background. Its width is indicated with borderlines.

In this case areas of the layout look like in the picture below.

Main block width is indicated with borderlines

Let's have a look at this matter in more detail. How does layout designer see the layout? To create website structure designer has to divide the main parts of the layout into categories. They are the main block and smaller blocks (header, content, footer). Then the designer creates the layout template. Next step is to describe the parameters contained in every block, for example - width, background color etc.

Here's the code of site markup. For both examples (with visible and invisible main block) it will be the same.

Code of site markup

In the next picture you can see parameters of the used blocks.

Parameters of used blocks

The content of the site is a rectangular block (main block). There are smaller blocks inside the main block (header, content and footer).

But in reality, the layout of a web-page is more complex.

Layout of a web-page is more complex

If you look at the picture above you can see how difficult creating web-design can be if you don't use the grid.

Let's have a look at the markup and description of block parameters for the layout:

Markup and description of block parameters
Existing blocks were added with 25 new blocks

After we have divided the header, footer and content part into blocks, existing blocks were added with 25 new blocks: 15 columns - each having its width, and 10 spacings, each having its width.

Before creating the layout markup and setting the parameters of block that are being used, layout designer has to measure the width of each column and each spacing. It is possible that the designers will find this information to be something new, but column with width 100px and one with 101px for layout designer - are two different columns. It does not matter that the width of 1px is virtually invisible. This rule is also relevant for spacings - spacing with width 10px and spacing with 9px - are different spacings.

30-50 new blocks might be added to existing blocks

Look at the layout again. You may have noticed that the division of header, content part and footer - has all internal blocks of different sizes and distances between them. The content of the header and footer on subpages is usually the same as the content of header and footer on the main page. But content of main block on each page depends from designer's creativity. You have to know that 30-50 new blocks might be added to the existing blocks. The probability of this to happen is very high. It will significantly increase the time which layout designer spends on creating the layout and setting block parameters. Also it will increase the size of the file which describes parameters.

If you add pages with same incorrect markup to the layout's main page, the same thing will happen to the document describing block parameters.

The size of the file describing the parameters increases significantly if there is no system when dividing the blocks of header, content part and footer.

There is a way to reduce the time and document size when describing parameters - called grid layout. Grid system allows: to reduce time for developing; to place the content on the page proportionally and to reduce the size of the file which describes parameters.

100000 lines of code into a laconic document

The main goal of the grid is to convert 100000 lines of code into a laconic document.

Grid and its structure

The grid consists of units and spacings between them. Three main parameters are: width of the whole grid, width of the unit and width of spacings between units.

We use 960 Grid System. The width of the grid is always 960px, this size is optimal for most screen resolutions.

You have to know some terms:

Unit - the base of any grid, the narrowest vertical object in the picture, (we measure width in units) by which the columns are created. Units have small width, because they are used for textual materials.

12 units

12 units.

Columns - group of units which are combined to add work zone. Most of columns containing text consists of two or more units. For example grid which consists of 12 units can be represented as 6 columns of two units or 3 columns of four units etc.

6 columns of two units

6 columns of two units.

3 columns of 4 units

3 columns of 4 units.

Each unit by default has right spacing and left spacing of similar width. Spacing between units is the sum of right and left spacing of adjacent units. There is also spacing between last units and grid boundaries.

Units and spacings between them

Units and spacings between them.

The width of each column consists of an amount of units - grid_3 = 3 units, grid_10 = 10 units etc.

960 Grid System

How does layout designer create the columns?

At this site you can find a tool which can generate CSS-framework (file with the description of block parameters). All you need is to download generated file, connect it and use ready blocks with the desired width.

CSS-framework is a nice and small document describing the parameters of blocks, which already have width and spacing. The layout designer simply has to count how many units should be used in the column and choose the appropriate block. This significantly reduces time to create it.

We create templates. This means that we have to use similar blocks in each template. The grid provides us with this feature.

Another advantage of the grid is that it provides means to effortlessly redesign the layout. If a template was created with a grid, client always can change the layout for his site.

Code for grid with 12 columns

If design is drawn using a grid, then complicated layout in which content part, header and footer are divided into smaller blocks must look like the one in the picture:

Complicated layout

Theoretically it is very easy to work with the grid if we want to create the layout. Practice is not far behind the theory but design by grid must follow certain rules.

Tips on how to organize a grid

1. Width of main block.

The width of main block can be bigger than width of the grid. Spacing distances from main block to grid must be equal.

Spacing distances from main block to grid

Width of main block can be equal to the width of the grid.

Main block width is equal to grid width

The width of main block can be smaller than the width of the grid.

Main block width is smaller than grid width

2. All layout elements must begin where the unit begins and end where the unit ends.

It means that the content must be inside the grid and its elements must be drawn using the grid.

Content must be inside grid

A couple of exceptions to this rule:

  • The slider can be outside of the grid.
Slider is outside of grid
  • When the header and simple footer are not incorporated into grid.

The following example shows you the layout which does not contain the menu at the beginning of the unit and it goes beyond the grid. Pay attention to the menu, it is in the main block.

Menu is outside of grid borders

Simple footer (footer contains copyright + icons) can be drawn without using the grid.

Text and icons are outside of grid

If the design includes extended footer, then the footer must be drawn using the grid.

Column content must take up whole number of units
  • The textual content of the column must take up the whole number of units.
Wrong, correct

Very often in templates text content is placed in boxes with a background picture.

Content is placed in boxes
  • If text content of the column is placed into the box, boundaries of the box must begin where the unit begins and end where the unit ends (the box must cover the whole number units).

In the next picture you can see an example of incorrectly placed box boundaries, they are outside of unit borders.

Boxes are outside of unit borders

The following picture demonstrates the correct way to do this: each box begins where the unit begins and ends where the unit ends.

Each box must take up whole number of units
  • Borders of the lists above must be aligned with the beginning and the end of the units.
Wrong, correct 2

If you want to remember the basic rules try to go through the following points:

  • content part and each column of content part must begin where the unit begins and end where the unit ends. It means that in any case both the content part and each column must take up the whole number of units;
  • if content part is smaller than the grid, spacing from the grid to the content part must be equal to the whole number of units;
  • spacing between columns must be equal to the whole number of units.

What is wrong with the layout?

What is wrong with layout?

Find more mistakes?

Find more mistakes?

Basic rule when designing using the grid - any element of the design must cover the whole number of units, all elements of the design must begin where unit begins and end where the unit ends.

Based on the article by: Maria Tarasenko, Andrej Andrejev, Roman Perevala.


 

Read also

Conditional comments for IE

Conditional comments for IE

How to write in HTML

How to write in HTML

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation