The ubiquity of the web makes it easy to forget how young the art of web design is. It’s just a little over ten years since a ground breaking aspect of browser markup (the language of web design) was introduced by a privately funded version of Mosaic, which enabled web page authors to align site content using the CENTER tag.
From this humble beginning, it is almost incredible how sophisticated web design and page layout has become in such a relatively short time span. In 1996 typographer David Siegel, in a bid to emulate print design, instructed designers of the time to use tables to lay out pages, filling cells with content and stretching single pixel GIFs to achieve the desired white space of the ultimate killer site.
Yet within two years Siegel had published The web is dead and I killed it. He was alluding to the fact that although his designs relied on table layouts and HTML hacks like the single pixel GIF spacer, sites should never have been built this way. This issue, Steve Pashley shows you how to bring your site bang up to date by converting your old tables-based layout to CSS...
As increasing numbers of site builders are aware, using Cascading Style Sheets (CSS) is the preferred way to lay out pages and tables should only be kept for tabular information like calendars. Yet, while the web building community has largely been happy to adopt CSS to style elements and select fonts, some are still unwilling to let go of the tables layout of old.
The most common explanation for this is that CSS layout lacks an intuitiveness that using tables seems to offer - once you’ve sketched your page framework by deciding how many tables will go where, it’s simply a case of dropping content into the gaps. By contrast, linking to an external file, learning another language’s syntax and round-tripping between an HTML editor, CSS file and browser can seem, at best, convoluted and at worst technologically intimidating.
So why bother? Well, first of all, the main benefit of turning to CSS for page layout is that you can keep your content separate from your design. Accessing the web today entails more than simply using Internet Explorer or Firefox on a PC; phones and other handheld hardware jostle with printers and other peripherals for access to your content while screen readers make a nonsense of many table-based designs. Using a stylesheet for your design means you can select an appropriate design for whichever software or hardware combination is downloading your page.
Imagine how much time you can save when you want to change the colour scheme of your site if you only need to edit one file, rather than wading through the HTML on every one of your pages. Similarly when you’re building pages you can reuse a design by calling a CSS rule instead of recoding the layout or style again. And who hasn’t had to carefully deconstruct a page to determine where that closing td tag should be after seeing a design collapse in Mozilla? This coding leanness is reflected in download times and server hits. Not only will your pages contain less code but the eradication of tables and spacer images will mean that pages render more quickly with less files to be delivered.
Let’s go to work
What should become evident is that laying out your page with CSS is a lot simpler than many site builders currently believe. To demonstrate this we’ll take a familiar table layout and convert it to CSS in three steps:
- Firstly we’ll identify the key design areas of the page
- Then we’ll strip out all the unnecessary HTML
- Finally we’ll use CSS to control the design of the page
The goal with any design using CSS is to finish with mark-up that has a strong structure delivered in a sequential order (important for those using screen readers), which looks as close as possible to the original table layout.
Deconstructing the design
You’ll probably already be familiar with the building blocks of your own page design. If you aren’t then there will be some good indicators in your existing layout. If you’re using a master table to lay out your page then turn the borders on by setting the width value to five or more. Similarly if you’re using SSI (Server Side Includes) then you’ve probably already thought about how best to carve up your design.
If we look at the example shown in the image on the right then we can see that the main areas are the masthead, the navigation strip, the right-hand content area and a footer area. We’ll add some HTML comments to these areas so that we can easily distinguish between them later. Be sure to add further comments where these sections end as well.
Next we need to strip out all formatting HTML. Strip out all the tables, font tags and spacing hacks (i.e. line breaks and spacing GIFs) until only contextual tagging remains. This means titles in header tags and text in paragraphs, lists and hyperlinks. You should now be left with just content and comments.
Building it back up
To understand how to build CSS layouts we first need to understand the box model. For display purposes, this means that every element on the page is a rectangular content area surrounded by margins, borders and padding. We can then position these elements using the 'float’ property. Floating an element will move it to the right or left of a line according to which value you give to the property, and allow surrounding content to flow around it. We’ll use it to position our column chunks, namely navigation and content.
If you don’t want an element to wrap around floating objects then we can use the 'clear’ property, with values right, left or both. We can see how this works with our footer section.
We use div (division) containers for our table-replacement containers. These are called block level elements in CSS mark-up, meant for largish blocks of mark-up and effectively force a line break before and after content. We use the span tag for smaller bits of content as it is an inline element, which means it won’t disrupt layout.
The last thing to note before we begin building our layout is that without the correct document type declaration your page is unlikely to render correctly in most modern browsers. As we’re using XHTML we’ll use the following with a correct language declaration:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
lang=“en” xml:lang=“en”>
To begin with replace opening and closing HTML comments with opening and closing div tags. Be sure to include identifying ID values as well. In our example we’ve now got the following code:
<div id=“header”></div>
<div id=“navigation”></div>
<div id=“content”></div>
<div id=“footer”></div>
A quick check of our page in a browser reveals that it’s looking a bit bare. Fear not, we’ve already made some progress in terms of accessibility. Notice that we have a good sequential order for our information, which is handy as this is the order in which a screen reader will relate information back to a user.
Let’s begin to add some style to our stylesheet. To make it more simple we’ll put the stylesheet in the head section of the HTML page, in this example. However, if you’re familiar with stylesheets then it’s much better to link to your stylesheet externally. By doing this, your site has its CSS in one location that is referenced by all your web pages. This reduces document weights and makes them quicker to download. We add the following to the head section:
<head>
<title>Layout Example</title>
<style type=“text/css”>
</style>
</head>
The area between the style tags is where we’ll add our CSS. We’ll give the page some basic style by adding font-size, font-family and colour properties to the body selector’s declaration block. Notice that the fontsize value, 'small’ is a relative one rather than something specific, such as 12pt, an important accessibility consideration. This allows users to adjust the size of the text in their browser if they wish. We’ll add the background image here - a tiny GIF image that browsers will tile vertically and horizontally to cover the screen. For the purpose of clarity, though, we’ll comment this rule out until we’ve finished the rest of the stylesheet.
body {
font-family: Verdana, Geneva, Arial,
Helvetica, sans-serif;
font-size: small;
color: #2f4f4f;
background-image: url(images/backer.gif);
margin: 0px;
padding: 0px;
}
Let’s look at the header section. The original uses an image to create a background and display the name of the web site but we’re going to make it more accessible. We’ll give the div header a background image, and in order for it to display fully we’ll need to give it the same height and width dimensions as the image. We’re going to add the white gutter around the heading graphic by creating a four-pixel-wide white border. Importantly this must be deducted from the overall width of the header div. As the width of our layout is 700 pixels we must subtract the eight pixels of the border to get a value of 692 pixels.
#header {
background-image: url(images/
header_blank.jpg);
width: 692px;
height: 60px;
border: 4px solid white;
}
Now, rather than have the site name displayed as part of the overall image, we’ll render it as text. We’ll place the site name in an h1 tag and declare a font size, font family and colour for the text. If you take a look at the stylesheet you’ll be able to see that the selector has been appended by the div id. This style will now only be applied to h1 tags used within a div that has an id of 'header’.
To position it in the same place as before we’ll move it from the top and left by adding padding-top and padding-left properties to the declaration block and specifying the appropriate values. The site name will now be visible to screen readers and anyone else that might view the page with the images turned off.
#header h1 {
color: white;
font-size: large;
font-family: Arial, Helvetica,
sans-serif;
margin-left: 34px;
margin-top: 14px;
}
Next we come to the navigation section. If we reference the HTML table design we are able to see that the navigation was included in a table cell, which was 216 pixels wide with cell padding of four pixels. We can replicate these measurements by giving the navigation div the same pixel width and a white border measuring four pixels to the left. Give the div a background colour.
#navigation {
width: 216px;
margin-left: 4px;
background-color: #c8d8e8;
float: left;
}
To style the links and position them within this blue box we’ll create a paragraph style specific for the navigation div, the same way we did with the h1 tag for the header. To position our links we’ll move the paragraph in from the left and the top by declaring those properties in our CSS rule and adding the appropriate values. The style of the text is achieved by adding font-size, font-weight and font-family properties.
#navigation p {
margin-top: 45px;
margin-left: 30px;
font-size: medium;
font-weight: bold;
font-family: Arial, Helvetica,
Sans-serif;
width: 125px;
border: 1px solid #2f4f4f;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 20px;
}
The content area can be created in much the same way. We’ll create a rule that builds a blue background for the copy, 472 pixels wide with white four-pixel borders to the left and right. Let’s look at the page so far. Here we can see the default behaviour of consecutive divs; a vertical stack to the default left alignment.
Obviously this needs to change. To position the div we need to add the float property with the value left to the navigation div. This wraps the content to the left of the navigation. It also enables the content div to wrap below the navigation as well, which we don’t want. To remedy this and to create two columns we need to float the content div to the left.
#content {
width: 472px;
margin-left: 4px;
margin-right: 4px;
padding-bottom: 70px;
float: left;
}
If we look at the original table-based design for the page you can see that a nested table is used to create margins around the content, 20 pixels to the left and 30 to the right. Using CSS we can apply this to the text selectors directly. The content title is placed in an h2 tag while the content is wrapped in paragraph tags. We’ll create id specific tags for this content:
#content p {
padding-left: 20px;
padding-right: 30px;
}
#content h2 {
padding-top: 45px;
padding-left: 20px;
font-size: xlarge;
font-family: Arial, Helvetica,
sans-serif;
font-weight: normal;
}
The contact details were placed in their own table so that they could be wrapped by the content and to creating a border around the content. We’ll create it by nesting its div within the content and then floating it right. We apply spacing using margins and font properties as before.
blockquote {
width: 160px;
margin-left: 10px;
margin-right: 20px;
font-size: small;
font-family: Verdana, Arial,
Helvetica, Sans-serif;
font-weight: bold;
padding-bottom: 20px;
float: left;
}
The coloured border, which required the use of a table and all those GIFs can be achieved using one line of the declaration, then we can move the text away from it by creating padding.
Finally the footer section is created in much the same way as the header, with a four-pixel white border, and a width running across the two columns above. However, if we check in the browser we see something unexpected happening. The content div is continuing to wrap around subsequent elements. To stop this happening we use the clear property. Adding clear:both stops content wrapping on either side of the footer and returns content to its correct position of running across the entire layout.
We can now add text styles and colour as before. We can change some of the text to white by wrapping them in span tags.
#footer {
width: 692px;
border: 4px solid white;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
font-size: x-small;
background-color: #a7c4d8;
clear: both;
}
#footer span {
font-weight: bold;
color: white;
}
Finally we add the background on to the body rule and that should be the design finished. But it’s clearly not; look how the navigation column is no longer extending as far down the page as the content div. This highlights one of the biggest drawbacks to CSS design in contrast to table-based design. Tables can move and stretch in response to each other, whereas CSS layout is largely static.
The way round this particular problem is to wrap the entire layout from header to footer in another div that will tile an image to give the appearance of our coloured columns.
#wrapper {
width: 700px;
background-image: url(images/
contentbg.gif);
background-repeat : repeat-y;
}
If we now make the navigation and content divs transparent by removing the background colours then we’ve got our columns of equal length. Of course it’s not an ideal solution, the correct way to progress is to stop designing as if for print and work to the strengths of CSS instead.
And so we’re done! Not only have we emulated our original design, give or take a few pixels, we’ve also slimmed down our file and improved accessibility. Our page mark-up is also clearer and easier to maintain. Experiment with the techniques in this article - practice will make CSS layout second nature, and be sure to check out the resources highlighted on these pages for further guidance and inspiration.
0 comments:
Post a Comment