From composite to CSS; A tableless, standards-compliant approach to web layouts

Layouts rooted in grid

Core to good design is the concept of the grid. Even informal grids provide a sense of hierarchy, organization, thoughtful utilization of space and modularity that allows for content changes in the future and still retain visual clarity.

In the table days of web design, the grid was easy to implement through manipulation of spreadsheet-like tables that would expand, collapse or remain static where needed. While this remains a clever exploit of the table element, it fails to be a flexible, easy-to-manipulate and efficient solution for page layout on the web.

Thoughtful use of DIV container blocks and cascading style sheets allows for the positioning of elements visually without affecting the logical hierarchy of information.

Background

This layout serves as a prototype for the Southwest Florida Water Management District. Working for the Communications department (Visual Communications section), I am currently tasked with developing the visual as well as the code (XHTML and CSS) for the future redesign of the entire site. This process begins with a list of modular elements, a well-prepared brain filled with ideas of content variations, future requirements, audience goals and requirements and hand sketches of layouts. Later the process is synthesized into composites in Photoshop, which are tweaked and reworked and finally converted to efficient and thoughtful XHTML and CSS. This document attempts to hastily iterate through this process, from composite to code.

Breaking down a layout semantically

Starting with a design rooted in a more formal grid, we can begin to break the layout into sections where elements will be placed in separate <div> containers.

Note: Naming your container blocks semantically (by what the content is, not what it looks like) is an important step. This helps avoid instances of when the navigation box color changes it isn’t referenced as bluebox, but instead primary_navigation.

The code

While refined, the code does lack some extra purity as the solution for implementation has yet to be finalized. How’s that for an excuse!

The HTML (basic structure)

Consider this breakdown for our layout:

<body>

<div id="layoutwrapper">
<div id="head">
</div>

<div id="nav">
</div>

<div id="contentwrapper">
<div id="feature">
</div>

<div id="teasers">
</div>

<div id="content">
</div>
</div>
</div>

</body>

The addition of layoutwrapper and contentwrapper divs are handy for grouping like boxes together for flexibility. If we need to push the overall layout around, or simply shift content around, we have that flexibility.

The CSS (basic style)

And now some CSS that sets basic rules for position and size:

#layoutwrapper {
width: 770px;
}

#contentwrapper {
background: #fff;
width: 615px;
}

#nav {
float: right;
width: 155px;
}

The HTML (final structure with content)

As we add images, text content and navigation out page begins to take shape. Even without the CSS being presented, to old browsers or text-to-speech devices for example, the content should still make sense as its hierarchy remains.

Some purists (including myself) may take issue with using images to fill the containers when a mix of images and text would be best served. Both are viable options, this is obviously the best for keeping good typography together (something other than verdana and georgia).

<body>

<div id="layoutwrapper">

<div id="top">
<img src="img/top.jpg" alt="" width="770" height="81" />
</div>

<div id="nav">
<h2>Education</h2>
<ul>
<li><a href="">Teachers</a></li>
<li><a href="">Students</a></li>
<li><a href="">Kids</a></li>
<li><a href="">In-School Publications</a></li>
</ul>
<p><img src="img/sitemap.gif" alt="" width="129" height="57" /></p>
</div>

<div id="contentwrapper">
<div id="feature">
<img src="img/feature.gif" alt="Community Education Grants, read more..." width="615" height="205" />
</div>
<div id="teasers">
<div id="teasersone">
<img src="img/teaserone.gif" alt="" width="305" height="106" />
</div>
<div id="teaserstwo">
<img src="img/teasertwo.gif" alt="" width="310" height="106" />
</div>
</div>
<div id="content">
<div id="contentnews">
<h2>News</h2>
<div class="boxcontent">
<p>Community Education Grant Questions Answered</p>
<p>Apply Now for 2004 Community Education Grants</p>
</div>
</div>
<div id="contentteachers">
<h2>Teachers</h2>
<div class="boxcontent">
<h3>Project WET</h3>
<p>The Project WET (Water Education for Teachers) Curriculum and Activity Guide is a collection of over 90 innovative, interdisciplinary activities that are hands-on, easy to use, and fun.</p>
</div>
</div>
<div id="contentstudents">
<h2>Students</h2>
<div class="boxcontent">
<h3>Currents</h3>
<p>Currents is designed and written especially for high school students. We have tried to provide you with an interesting way to increase your awareness and respect for Florida’s precious water resources.</p>
</div>
</div>
</div>
</div>

</div>

</body>

The CSS (final style)

Much of the CSS should be straightforward, aside from understanding the concepts of float. Consider stripping out all instances of color, padding and margin declarations and you will see how simple the style is.

body {
margin: 0;
padding: 0;
background: #fff;
}
#layoutwrapper {
width: 770px;
}
#contentwrapper {
background: #fff;
width: 615px;
}
#nav {
float: right;
width: 155px;
min-height: 273px;
background: #58B2D3 url(img/bgfade.jpg) repeat-x bottom;
}
#nav p {
text-align: center;
}
#nav h2 {
font: bold 13px verdana, sans-serif;
color: #fff;
background: #234754 ;
margin: 0 0 2px 0;
padding: 15px 25px;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0 0 180px 0;
border-top: 1px solid #54A9C8;
}
#nav ul li {
margin: 0;
padding: 0;
font: bold 11px verdana, sans-serif;
border-bottom: 1px solid #54A9C8;
width: 155px;
}
#nav ul li a {
display: block;
color: #234754;
background: #58B2D3;
text-decoration: none;
padding: 8px 25px;
width: 105px;
}
#nav ul li a:hover {
background: #7FC7E2;
}
#teasers {
height: 106px;
padding: 2px 0;
}
#teasersone {
float: left;
width: 305px;
}
#teaserstwo {
float: left;
width: 310px;
}
#contentnews, #contentteachers, #contentstudents {
width: 204px;
float: left;
border-right: 1px solid #e5e5e5;
}
.boxcontent {
padding: 10px 14px 3px;
}
.boxcontent p {
padding-bottom: .5em;
}
#content h2 {
background: #666;
font: bold 11px verdana, sans-serif;
color: #fff;
padding: 4px 14px;
margin: 0;
}
#content h3 {
font: bold 11px verdana, sans-serif;
padding: 0;
margin: 0 0 3px;
}
#contentnews h2 {
background: #507097;
}
#top {
border-bottom: 1px solid #e5e5e5;
margin-bottom: 2px;
}
#top img, #feature img, #teasers img, #content img {
display: block;
}
img {
border: 0;
}
a {
color: #0054A6;
}
a:hover {
color: #000;
}
p, li {
font: 11px verdana, sans-serif;
margin: 0;
}

What it looks like

View the final page

Other resources

There was much self-education to get to a point where this code can be generated in an afternoon for any such composite layout. I urge you to eat these resources for breakfast. Everyday. They’re low in fat.