Breaking Out of the Box With CSS Layouts

By Jina Bolton | June 24, 2008 | CSS Tutorials

One of the most commonly used arguments regarding CSS that I hear from designers who don’t like web standards is, "CSS designs are so boring. They’re too boxy." I can’t help but find this statement to be a bit silly. To me, that’s like saying buildings built with wood are boxy. An architect can create a boring-looking building. But, using the same tools, an architect can create a stunning work of art. It all depends on creativity and experimentation.

It’s true that CSS is heavily reliant upon a grid — everything flows on x and y axes (and can be positioned as such, much like designs built in Photoshop). However, this doesn’t mean that your design has to be boring. If you understand how the grid works, you can fracture or abstract that grid to make your layout more dynamic and interesting. In achieving this goal (while supporting flexibility and maintainability), CSS designs have so much more to offer than table-based layouts.

Grids and Wireframes

If you’ve taken any classes in typography or layout, you know that the grid is one of the most important essentials in design. However, if you aren’t familiar with this concept, here’s a very brief overview:

• A grid provides organization. A grid can act as your page layout’s "blue plan." Well-planned grids can be aesthetically pleasing, as well as providing organization to your content.
• A grid can define more information. A well-organized layout can help provide consistency from page to page, and define what type of information is being provided at various points (for example: a sidebar can be used to provide secondary information; copyright and legal information, etc. might be placed in the page footer, and so on).
• A grid can unify a series. Having a planned guide for the placement of logos, headlines, images, and/or text in any medium (business cards, advertisements, web site layouts, etc.) can help "tie" everything together. Therefore, a grid can be a very important element of a brand.

Starting our Design

Here’s an example of a grid that you may typically see on a web site:

Sample Web Layout

Click here to read more.