{Carrer web log} ←

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 // 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 // 12/14/2008

   Same here, 960.gs for the world.  

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

   CSS Blueprint does it for me.  

4. //  Unknown // 12/17/2008

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

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

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

Post a Comment

<< Home