Re-Thinking Your Website Layout

Do You Use Lots of Tables and Fonts?

If you're anything like me, in the past few years, you've been using lots of tables in your webpages. We use tables to position text and graphics on the page. Plus, we use lots of <font> tags to display text in various sizes and faces, like Arial or Verdana.

In the beginning, in the first days of the Internet, webpages were all text. And nothing else but text. Then someone got the bright idea that you could mix code (called HTML) right in there with the text in order to prettify the text.

Thus, we got <b> for bolding and <i> for italicizing – and especially <table> for putting text in columns. What to speak of <font> for viewing text in various font faces.

It seemed like a good idea at the time. A natural progression, right? But over time, it turns out that mixing text (content) with html codes (the layout) has created a monster. Today, webpages are far more sophisticated than they were, in the early days. And creating elaborate designs results in huge webpages – as there's so much html code mixed in.

Well, now we find there's a much better way of doing things. What if we can separate the content from the layout? If our webpages consisted of mostly content, then it would be simple for search engines to come along and index (analyze) our webpages. When layout is mixed in with content, i.e., when html code takes up 60% of the contents of a webpage and the other 40% is the actual content, then a number of things start to happen:

Pages take a long time to load in a browser
Search engines have a difficult (if not impossible) time of finding your real content.
Your webmaster must spend long hours on the webpages, whenever a small change is necessary. If the size (or face) of your fonts needs to change, every webpage needs to be edited to make the change. That's time-consuming.

Is there a solution to these problems? Yes, and it's called CSS (Cascading Style Sheets.)

Basically, you create a stylesheet for your webpages. In a stylesheet, you define elements (called "classes") that have properties like a font size or font weight or a text alignment. Then in your webpages, you simply identify which stylesheet you're using for that page. And label your content to match the classes in the stylesheet.

Thus, if you choose a font face of Verdana for a class called "bodytext" and assign that bodytext class to the text content in your webpages, then all you need do to change the font in ALL your webpages at once – is to change the properties of the bodytext class in the one stylesheet.

This is obviously a much faster way of doing things.

Another (of many) benefits to using CSS stylesheets is that it reduces the size of your webpages greatly. This can be seen when you consider that for every paragraph in every page, you need to specify something like:

whereas using CSS, you can modify the <body> tag to look like:

meaning that all the paragraphs in the page will have the font properties associated with "bodytext." No need to use any more <font> tags.

More Benefits of Using CSS

Would you believe that it is totally unnecessary to use <tables> in your webpages? (Unless, of course, you have a lot of tabular data…)

In the days of yore, tables were used to position your text and graphics on your webpages. Usually, this requires nested tables, where you end up with tables within tables within tables. Or code that looks something like this:

And that's BEFORE any of your valuable textual content appears on the page. Wouldn't it be great if we could get rid of all of that?

And of course, we can -- using CSS. In fact, it's become something of a fun thing for me lately, to take a page that is loaded with nested tables and turn it into a table-free webpage.

I can't give you an entire tutorial on CSS in this brief article, but the way it works is you simply put this:

<div id="leftborder">
CONTENTS OF BORDER
</div>

Then in the CSS stylesheet, you define the properties of the element labeled "leftborder." The properties will include positioning data, like this:

#leftborder {
position:absolute;
left:0;
top: 160px;
width:20%;
background-color: #C5C1C1;
}

As you can see, this defines the position of the leftborder as 0 pixels from the left of the page and 160 pixels from the top of the page. The width of the border is 20% of the page width. Plus there's a background color for the border.

Website Development Becomes Much Faster

As you can see, it's a lot faster to write properties for a CSS element than it is to write all the html code for tables. Plus the html code is no longer embedded within the webpage – thus, search engines have much easier access to your real content. Webpages are far more search engine friendly, when using CSS.

Other problems that were never solved in html code have been addressed by the developers of CSS. Many of the things that are possible with CSS are impossible with HTML. For example, have you seen any Yahoo new articles lately? All the links in a Yahoo new article are now underlines with a dotted line plus they have a little graphic next to them. Here's an example. This is practically impossible with HTML, but simple as pie with CSS.

Another difficulty with html (which so irritated me) was that your webpages get scrunched when viewed on smaller computer monitors. Text gets shifted over, seemingly at random and appears on top of other parts of the webpage.

With CSS, that is a thing of the past. All webpages can be easily designed to look good on any monitor at any resolution.

What About People with Disabilities?

This will become more and more of an issue as time goes on. Just like it's becoming easier for walking-challenged people to have access to public buildings, it's becoming easier for sight-challenged people to access websites.

For example, some web browsers have been designed that speak the content to the viewer. When a page is filled with html tables and fonts and other tags, it becomes very difficult, almost impossible for the listener to distingush your content. With CSS, this problem vanishes. (Actually, some thought does need to be given to the design and there are tools specifically for this issue.) But in general, because the layout is separate from the content, people with disabilities can surf your website with far greater ease and confidence than ever before.

Summary

In this article, I hope I have been able to show you some of the benefits of using CSS. Even if it seems like a daunting task to re-layout a website, it's actually worth the time. If one spends 8 hours converting a website to use CSS, those 8 hours will be paid back (in spades) by the time (and frustration) saved in making future changes and additions to the website. Plus, your website visitors will have a better experience – and how valuable is that?

As newer and more innovative technologies come along, the Internet evolves and improves. It's important for your website to evolve, too, because Web Standards are becoming more and more important. And some day, websites that haven't kept up with the evolution of the Internet will become unusable. That's something to think about!

In the next few years, more emphasis is going to be given to the content you provide. Rather than the emphasis being on webpages (as it is now) the focus will be on the sharing of content among websites. And the tools and techniques for doing this are already being developed and used. One of those is RSS (Really Simple Syndication) – and that'll be the focus of one of the next newsletters I'll be sending into your Inbox.

Resources

My favorite books about CSS are available from SitePoint:

HTML Utopia: Designing Without Tables Using CSS

and especially:

The CSS Anthology: 101 Essential Tips, Tricks & Hacks

Here are some good CSS Tutorials:

Boogie Jack's CSS

CSS Vault (lots of CSS layouts)