I updated the design of my web site recently. The update was long overdue. In mid-January 2006 I created this blog on Blogger.com, and I chose a Theme they provide named Sand Dollar. I really liked the look of that Theme, and so I decided to use that as the basis for my whole site.
Now that the update is done—for now—I decided some of you might be interested in what I did, and why.
I changed the look of the pages, and I changed the structure. More importantly, though, I separated the presentation details from the content. Many people call that process "separating style and content," and while that sounds fairly accurate to me, some experts disagree. I'll leave that discussion for another day, or maybe never! Anyway, my stylesheet(s) now control almost everything about the way the pages look. The HTML elements in the content describe what the content is, and not how it looks.
This approach, and the explicit structure of the pages, allows me to use styles to better advantage, and the HTML content is simpler than it was before.
Page Layout
I chose a relatively simple page layout because I wanted my pages to work on Internet Explorer 5 and 6. Those browsers have a lot of CSS-related bugs and a complex layout would mean dancing around those bugs one way or another. Many page authors use CSS hacks to get around the IE bugs, but I wanted to avoid that if possible. I don't have the time or the equipment to test my pages on a wide variety of browsers and platforms, and keeping the page layout simple reduces the amount of testing necessary.
All the pages use the same basic HTML shell. The shell includes containers for the page header, the main content, and a sidebar, roughly as shown below:
Using those containers, and CSS selectors, I can control the style of HTML elements within a particular section. For example, lists in the sidebar are styled differently than lists that appear in the main content.
The site structure, and the associated CSS stylesheet, should make my site more convenient for visitors. For example, if you print a page, the sidebar is omitted, and the main content will expand to fill the printable area of the paper.
Simpler HTML
If you look at the page source, you won't see a lot of HTML clutter, such as <BR>, <FONT> and <SPAN> elements everywhere. (I'm talking about pages over on my site, not here in this blog. The blog HTML is mostly controlled by Blogger.com.) On most pages, the main content has a section heading or two using <Hn> elements, and paragraphs using <P> elements, and that's about it. Other pages use ordered and unordered lists (<OL>, <UL>).
One enabler for writing simpler HTML was my decision to just give up trying to make pages look good in old browsers. In old browsers, like Netscape 4, you'll see the content but it will be as plain as vanilla ice cream. Most new browsers have a "disable styles" command, and you can use it to see what I mean. (In Firefox, you can use the View > Page Style > No Style command to disable styles.) The pages are still legible, but all formatting is omitted. I don't want to prevent users of old browsers from using my site, but I am not going to bother to try and make the site look the same for them as it does for people using a newer browser. I'd rather encourage visitors to upgrade their browsers!
HTML 4.01 Strict
As I updated the pages, I did a fair amount of HTML cleanup. I chose to use the HTML 4.01 Strict doctype, so that means my pages don't use <B> elements, <I> elements, or any other elements or parameters that are valid in HTML 4.01 Transitional but not valid in HTML 4.01 Strict. I chose HTML 4.01 Strict because I think it's better to separate presentation from content. In addition, using the HTML 4.01 Strict doctype helps ensure consistent results across browsers. The pages won't be formatted exactly the same on all browsers or platforms, but they will look very, very similar.
All the pages that use the new style have been validated with the W3C Markup Validation Service. I use the excellent Web Developer extension for Firefox to make that process quick and easy. While viewing a page in Firefox, I can key Ctrl-Shift-A to validate the current page.
I used to think that eliminating the <B> and <I> elements in HTML 4.01 Strict forced an unnecessarily severe separation of presentation and content, but I gradually changed my mind about that. During the past year or so I have been converting or eliminating those elements (and other deprecated elements) in my HTML pages and I discovered that the process encouraged me to make better decisions about what level of emphasis was appropriate for a particular section of text. In some cases, I cleaned up HTML that was just lazy on my part. For example, I had some section headings that were implemented like this:
<P><B>Heading Text Here</B></P>
If the text truly is a section heading, then it should use one of the <Hn> elements:
<H2>Heading Text Here</H2>
Let the Brower Do Its Job
I removed "go to top" links and links that open new pages as I edited the HTML. I think people should use the controls their browsers provide rather than have web pages include links or other widgets that duplicate the browser functions. For example, if you want to go to the top of the page, from anywhere on the page, most browsers have a key combination you can use. In Firefox, you can press the Home key or Ctrl-Home keys on your keyboard. (One moves the focus as it scrolls to the top of the page, and the other doesn't. I forget which because where the focus is doesn't usually matter to me and I don't go to top that often.) Similarly, if you want to open a link in a new tab, or in a new window, you can right-click and select a command to do that from the context menu.
My mouse has a scroll wheel that is also a button, and in Firefox, clicking a link with that middle button opens a link in a new tab. Very convenient.
Anyway, I am now leaving browser functions to the browser.
Controlling Line Widths
The only tricky thing about my new site layout is the width of the main content. If you have a high-resolution monitor and your browser window is maximized, you should see that lines of text in the main content section wrap to a new line even though there is more space available on the righ-hand side of the window. That is deliberate. Long lines of text are hard to read, and so I set a maximum width that keeps the line width reasonable. It's relatively easy to force the text to wrap at a particular width, but it's a little harder to make it wrap at a particular spot or before if the window is smaller than the maximum width.
Actually, it is easy in good browsers, because CSS2 includes min-width and max-width properties to constrain the width of boxes to a range:
min-width: 20em;
max-width: 35em;
In the example above, the widths are specifed in em units. An em is a typographical measure that is defined relative to the current typeface. It is usually equivalent to the width of the letter M in that typeface, and that is the origin of the name. 35em is recommended as the maximum line length by various experts.
Internet Explorer does not support the min-width and max-width properties, and that's where things get difficult. I could have left it at that; site visitors using good browsers would see text wrapped at a reasonable width, and Internet Explorer users would see text that wrapped at the right edge of the window. I chose not to do that because my old site design used nested tables to constrain the width of paragraphs and I didn't want to take a step backwards.
After a lot of searching and some experimentation, I found a compromise. I implemented a simple version of a technique first described by Svend Tofte in his article max-width in Internet Explorer. Basically, Internet Explorer supports (non-standard) expressions in CSS properties, and it is possible to implement a reasonable substitute for the max-width property like this:
min-width: 20em;
max-width: 35em;
/* IE5/6 version of max-width */
width:expression(document.body.clientWidth>700?"500px":"auto");
The expression tests the width of the body element. If the width of the body element is greater than 700, the width is constrained to "500px" (500 pixels). If the width is less than or equal to 700, the width is set to "auto", which means that text will wrap at the right edge of the window. It's not exactly what I want, because I'd prefer to wrap the text based on the size of the current font, not on the size of the window, but it's the best I could do in IE.
Sven described a more elaborate version of the technique that converts pixels to EMs but I decided to use a simpler version.
Compliant browsers ignore the width property because it is not valid CSS syntax, and so they use the min-width and max-width properties to determine the width.
Global White Space Reset
I used one other technique which is worth mentioning. It's called Global White Space Reset and it was originally described by Andrew Krespanis. Essentially, a simple CSS rule is used to set the margin and padding properties to 0 for all elements:
* {
margin: 0;
padding: 0;
}
The rule above cancels padding and margins for all HTML elements, which means that you subsequently have to define margin and padding properties for every HTML element you use that needs non-zero values. While that sounds like a lot of work, it's actually easier than accepting the default values that vary by browser because writing CSS that selectively resets margins and padding requires knowing how every browser, and every browser version, on every platform, sets margins and padding values. If that sounds impossible, that's only because it is. The technique has some pitfalls, so read Andrew's description for more details and some examples before you use it on your site.
Content Management
I should also mention that I build my home page, and the sub-sites for Second Site and TMG Utility, using a homegrown content management system that mixes content files with page templates to produce finished pages. If I change a page template, or one or more of the content files, I can regenerate the site very quickly. I have about 400 pages on my site, and it would be very painful to change the site design without a content management tool. If you have a small site, you probably don't need one. Some people use commercial content management tools, or HTML editors that have some content management features. I haven't found one I like. They all have some fatal flaw, like bad HTML output, or quirky WYSIWYG editors, or worse, and so I use my own program.
Over and Out
I hope you found this article useful. If you are considering an update of your site, some of what I did will apply to your project. In particular, separating presentation details from content, keeping the HTML simple, and making better use of styles are goals every web publisher should consider during a site overhaul.
Most sites use a distinctive icon to indicate that a news feed is available. When you see one of those icons, you can click the magnifying glass icon in the Sage sidebar to list the available news feeds.