The Well-Appointed Web Page

By Deane Barker • Posted on August 19, 2002

Web developers want one thing: control. HTML is such an imprecise language that building Web pages has continually been a struggle between what we want to do and what the language is capable of. As a result, the short history of the Web has been an exercise in perverting HTML as far beyond its original intention as possible.

Along this path of...extending HTML, developers have gone from simple but rock-solid pages, to elaborate layouts built on shaky foundations. Increase a font size here or resize a browser window there, and the entire page comes crumbling down. Nested tables, transparent spacer images, and absolute positioning have given developers some of the control they’ve wanted all along, but at what cost?

Here then are some tips to developing solid pages. If you’ve been developing for more than a few months, these tips will not make you happy. They certainly didn’t make me happy the first time I came across them. But after a while I got sick of desperately trying to circumvent the limits of HTML and I instead embraced them (with a little help from Jakob Nielsen). The result has been pages that are quicker to load, easier to read, and almost immune to browser peculiarities (except the reprehensible Netscape 4.x). Using this checklist, I can confidently publish most any page without fear it will spontaneously implode.

(Rather than reading this article, you can just buy a copy of Jakob Nielsen’s book “Designing Web Usability : The Practice of Simplicity.” Ninety percent of the ideas and theories detailed here are in this book. Some I’ve known for years, but some were brand new to me.)

Contents

Use Percentages for Font Sizes and Table Widths

Nothing is more frustrating than trying to increase a tiny font size on some Web page, only to be thwarted by a developer who hard-coded the font size to 8pt or 9px or something. If you set your fonts to absolute values like this, users will be unable to increase or decrease the sizes. Instead, use percentages for font-sizes. You can easily duplicate absolute values at a browser’s default settings while still allowing users to increase or decrease the font sizes as they wish.

Almost as frustrating is a site that puts all its content in a 300-pixel table running down the center of the page. I paid good money for a 19” monitor, and I’d like to be able to use the screen width, thank you. Use percentages for table widths as well, so that when I resize my browser window, your site plays along.

“But,” you say, “if the user changes the font size or the size of the browser window, my site won’t look right.” Sadly, that’s your own problem. If you’ve designed a page that requires the crippling of certain browser functions to work properly, then you need to re-consider your design philosophy. Don’t fight the browser.

Always Specify a Descriptive TITLE Tag

Don’t give every page on your site the same TITLE tag. This is often a symptom of a lazy developer using a common file include for everything from the HTML tag through somewhere in the BODY tag. Having all browser title bars say “Welcome to MyCompany.com” is frustrating for a few reasons:

If the page is a news article, put the title of the article in the TITLE tag. If the page is a list of products by your company, say so. If the page is a the home page of your company, put “home page” somewhere in the title tag. Every page should have a TITLE tag that adequately represents what’s in the page.

Put a Contact Email Address in the Footer of Every Page

No matter what, always put a general contact email address in the footer of every single page. Why in the footer? Because that’s where people are going to look for it. Yes, you can still have a “Contact Us” page, and put a link to that next to the email address, but always give the users an address to contact someone.

Also, add a page-specific email address when appropriate. If the page is an article written by a particular author, put the author’s email address there. If the page is a contact form for tech support, add a note at the bottom that says something like, “You can always contact tech support directly at support@mycompany.com”.

Don’t Mess With Hyperlinks

The entire World Wide Web is based around the concept of the hyperlink. Hyperlinks the are entire reason the Web is what it is. Even first time users that have been on the Web for 30 seconds understand what a hyperlink is and what it does. So don’t mess with them. Some points here:

Again, don’t fight the browser. These things were set up this way for a reason.

Don’t Pop New Browser Windows

Again, I find myself referring directly from Jakob’s book. The user’s desktop is not yours, so don’t clutter it up with windows. They may have a slow machine and popping a new browser window takes up valuable system resources. They may be on a machine that’s locked down to one browser window through some administration setting. They may be running a pop-up stopping program that intercepts the new window before they see it, leaving them confused. If they want to open a new window, they can right-click on the link and select “Open in a new window...” Never make this choice for them.

Don’t Paginate Unnecessarily

This is where I break ranks with many a style guide. Most all will tell you to paginate like crazy to avoid making your users scroll. However, be careful that you don’t paginate unnecessarily. What’s worse, having to scroll to see more content, or having to click a link to see more content?

If some content has interested me enough to get past the text above the fold, then I’m likely to continue scrolling to read the rest of it. More likely than I would be to click on a link and wait for a new page to load to read the rest of it. And if I’m not willing to scroll, do you think I’ll be any more willing to click a new link and wait for a new page to load?

(Sadly, there’s another reason why many sites paginate way too much: page views. Every time you click on a link to read the next page of a piece of content, that’s one more page view the site can report to its advertisers and one more opportunity to deliver a new banner ad. Consequently, for many advertising-supported sites, pagination will remain the standard way of doing things.)

Don’t Overwhelm the User with Ancillary Content

This is perhaps a design decision, not a usability decision. However, it bears mentioning that the current trend in Web design is to cram as much stuff on one page as possible. Resist this trend. You do not have to have links to every single page from every other page. This is just evidence of a poorly planned Web site.

Early in the development of a site, plan a logical, coherent information architecture so your users are presented with an intuitive set of links from each page. Trying to read text amidst hundreds of hyperlinks and fragments of text in the sidebars is akin to trying to read a book in a room full of six-year-olds stoned on Pepsi and Pixie Sticks. Strive to maximize content of every page. While some space must be given to ancillary information, branding, and navigation, don’t let them overshadow the actual reason people came to the Web page in the first place.

Have a Link to the Home Page on Every Interior Page

This is almost the most obvious directive in Web design – the user should always be able to get home from any page. And if you have a logo in the top left corner of your site (or the top right, or where ever, really), it needs to link back to your home page or you’re likely to have a lot of confused users on your hands. This has become a de facto standard of Web sites, and you need to support it.

Support “URL Butchering”

Here’s a method that I’ve used frequently when browsing the Web, but never understood its implication for Web development until Jakob’s book pointed it out. In fact, the phrase “URL butchering” comes directly from the book.

Consider the following URL

/Articles/Politics/Europe/ThisArticle.html

You need to ensure that every “directory stop” in this URL is supported by a directory page that lists the resources “below” that URL. If the user isn’t finding the desired content wants at this URL, he or she may start “butchering” it in an attempt to find the right resource – chopping off the file name and then walking up the directory tree. This means that the following URLs...

/Articles/Politics/Europe/

/Articles/Politics/

/Articles/

...must give the user a page that may help him or her, even if these URLs are not explicitly linked to from anywhere in your site. For instance, the first URL above should have a list of all the articles about European politics. The second URL should have a list of the different geographic regions covered. The third URL should have a list of the different article categories.

The last thing you want is for a user to get a raw listing of the files in a directory (which is a security hole in addition to just being annoying) or the message “Directory Listing Denied.” Just because you don’t have an explicit link to one of these URLs, don’t assume that a frustrated user won’t find their own way of getting there. Before publishing a page, check its URL and be sure you have index pages at every directory stop all the way back to the home page.

Use Adequate META Tags

There are dozens of books on the market dealing with “Search Engine Positioning.” Most of these books could be summed up in one sentence – learn how to use META tags. META tags are one of the most under-utilized, powerful tools a Web developer has at his or her disposal. It pays to learn how to use them. There are three core META tags you need to know and use:

Make Sure All Images Have an ALT Tags

The traditional arguments for ALT tags are (1) they describe the content of a picture for users who don’t have a graphics capable browser or have graphics turned off, and (2) they allow visually-impaired people to know what a picture displays with a speech-capable browser. These reasons are all well and good, but there are two much more important reasons:

Two hints:

Add a PICS Label META Tag

PICS stands for the Platform for Internet Content Selection and is a method of rating Web pages for their content, be in general or adult or something else. You may say that you don’t need to worry about this because your pages have no adult content, so why worry about rating them? Because some Web filtering software won’t allow access to pages that are not rated – they simply assume that unrated pages are not suitable content for all audiences. (Also, the PICS initiative and the concept of rating Web page content is good for the Web in general, so adding this tag is just the right thing to do in any case.)

If there’s one drawback to PICS tags it’s that they’re complicated and beyond the scope of this article. For more information on how PICS labels work, consult the official W3C site for PICS.

A Final Word

In the end, a lot can be accomplished by simply concentrating on a single page at a time. Problems arise when developers start looking too much at the big picture and lose site of the trees for the forest. Yes, over-arching site architecture is an important concept, but Web sites are made up of Web pages, and users look at Web pages one at a time. All the site architecture in the world isn’t going to help if your individual pages are a mess. Give each page the attention it deserves.

This is item #352 in a sequence of 353 items.

You can use your left/right arrow keys or swipe left/right to navigate