{Carrer web log}


Blog about web design & development

In the search of Holy Web Grid

Wednesday, December 03, 2008 { 5 Comments }

How can we build perfect web Grid?

Probably we can’t. There is no such thing as perfect web grid. But we can try.
What do we need? First we need some info and parameters.

The web grid is limited in horizontal and unlimited in vertical. Vertical limitation depends on monitor size. We have various kinds of monitors with 800, 1024, 1280 px vertical spacing.

We should choose one standard that will work for most of the monitors.
I think that 955px is the optimum width for a web site viewed on 1024 px and bigger monitors.

What about 760 (800 x 600 px) monitors?

Why not put all important info in the first 760px, for users with 800 x 600 px monitors to see all important info instantly.
Another more important motif for this is that we usually read from left to right starting from the left upper corner. Ok, if you read Arabic you will start from right to left or Japanese, Chinese up -> down.
Some researches say that we read in F-pattern.

Ok, we have the grid 0 -> 760 -> 955 px. The first 760 px are very important.
We need to divide the first 760 px, but how? What about using golden proportions?
The golden proportions are 1 : 1.61803 or 38.2% : 61:8. In our case will be something about 470 px : 290 px = 760 px.

Ok, now we have 0 -> 470 -> 760 -> 955(470 + 290 + 195 = 955) and this is our basic grid.



What if we want to break our columns into smaller units? We can use "The Rule of Thirds" dividing the first column(470px) into 3 units. The second column (270px) in two units. And the last live it like it is .





What do you think?

5 Responses to “In the search of Holy Web Grid”

  1. // Anonymous Raymond Selda // 12/04/2008

    I use a 980px container and use the grid provided by 960.gs inside that container when designing in Photoshop. Nice post. Thank you.  

  2. // Anonymous Stefan Vervoort // 12/14/2008

    Same here, 960.gs for the world.  

  3. // Anonymous Gelay // 12/17/2008

    CSS Blueprint does it for me.  

  4. // Blogger Jacek // 12/17/2008

    Try this one, guys:
    http://webnicer.com
    Nice post, thanks.  

  5. // Blogger Vladimir // 12/18/2008

    @Jacek:Interesting project. I'm working on something similar this moment. 960 is definitely magic number :)  

Post a Comment

<< Home

RSS IconTwitter icon Twitter icon Twitter icon

About Me <<<

Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...

My projects <<<

§§Previous Posts <<<

Hand Drawn Icons
Photoshop Wireframing Kit Ad
 

Other Profiles <<<

View Vladimir Carrer's profile on LinkedIn

Content is licensed under a Creative Commons Public Domain License