It is made up of square pixels

When you look at your computer screen what you are seeing is a bunch of square pixels sitting side by side. It’s a bit like a checker board without the color. Even graphics are designed using squares. Because of this it is easy to design a web page using a graph. Initially, web designers used tables to layout a web page. More recently they have used a grid system to place elements using CSS.

960 12 column grid

Layout on 960 12 column grid

Many years ago designers used an 800px by 600px canvas to layout a web page. Now we know that most people have at least a 1024 by 768 pixel screen display. As a result we can safely design for a 960 by 640 available design area. The advantage of a 960 design area is the ability to divide 960 by many different factors. The most common divisions seem to be 12, 16, 24 column designs.

Using a grid makes it easier to use all of your design tools, You can see how your page elements will fit together. It also makes using HTML and CSS easier to code. Whether a designer officially used the 960 grid or not we all need to use some way to evaluate where elements go, which need to be floated, and which need to be absolutely positioned. Dividing up square pixels requires some sort of grid no matter how informal.

Resources

There will be no post next week. I will be enjoying Seattle!

  1. Mark Sunderman

    Very intersting – i knew about the issue of pixels, but had NOT thought about the issue of how this impacted designing a web page – THANKS

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>