The Well-Appointed Web Page

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.)

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 big 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:

• When you bookmark a page, the TITLE tag becomes the name of the bookmark. Having something more descriptive that “Home of MegaCorp” would be handy, especially if I’m deep-linking to an interior page of the site

• On most machines, the TITLE tag also becomes the name of the browser’s button on the task bar when the window is minimized. If I have more than one browser window open, it’s very handy to be able to see the title of the page loaded in it (this is a good reason not to use frames, as well).

• I email page links to people at least a dozen times a day. In Internet Explorer when I select File >Send >Link by Email, the TITLE tag of the page becomes the subject of the email. If the subject of the email doesn’t represent what’s on the page, I have to copy the title of the article out of the page, and paste it into the subject. Frustrating.

• Search engines will usually grab the title tag and make it the link to the page. A generic TITLE tag may dissuade users from clicking-through to your site since the generic title you’ve given all your pages may not have anything to do with what they’re looking for.

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:

• Hyperlinks are supposed to be underlined. Don’t override this behavior by setting text-decoration to “none.” And don’t think it helps to have links underlined just when the mouse passes over them. When a user is scanning a page for hyperlinks, he or she is looking for underlines. If you must have them do something, give them underlines and have the underline go away on mouseover, not vice-versa.

• Don’t underline text that isn’t a hyperlink, for the same reason I mentioned above: users scan the page for hyperlinked text that they think will take them somewhere. Don’t confuse them.

• Hyperlinks are supposed to change color after they’ve been visited. Don’t make visited links the same color as unvisited links by setting A:link and A:visited to the same value. If you want to maximize usability, make sure an unvisited hyperlink is still some shade of blue and a visited hyperlink is some shade of purple. Better yet, just leave the colors at the defaults.

• Don’t use JavaScript to have the status bar display something other than the URL to which the link will take me. A lot of sites put little messages in the status bar when you mouseover a link. This is confusing when I expect to be able to see the link points. If you want to offer a tooltip, use the TITLE attribute (which works in about every browser except for the nightmare that is Netscape 4.x).

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 saturated with 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:

• Keywords. This is a list of any words under you want search engines to index your site. Different engines use keywords differently, but generally, a hit on a keyword META tag will rank higher in relevancy scores that a hit in the body of the document. If a user is searching for “oil drilling” and that term appears once in the body of your document, and one in the keywords META tag of the other guy’s document, his document will usually rank higher in the search results than yours. Additionally, the keywords META tag gives you a chance to supply relevant subject words that may not appear in the body of that particular page.

• Description. This is a description of the content of the page, and most search engines will capture this and print it under the link to your page. This gives the user more information than can be captured in a TITLE tag (you did put a unique TITLE tag on every page, right?). Additionally, search engines will give more weight to hits on the description META tag than the same text in the document body.

• Robots. By giving a value of “index, follow” to this tag, search engines will index the content of the page and follow the outbound hyperlinks to other pages in your site. Note that some search engines will do this anyway, but there are some that will just capture the home page and only index the remainder of the site if explicitly directed by this hyperlink. (Conversely, if you do not want a page indexed for some reason, give this META tag a value of noindex.)

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:

• Many search engines will index the content of the ALT tags and use it when calculating search results. Consequently, make sure that your ALT tags explain what’s in the image and use any keywords advantageous to page indexing. (Although I haven’t heard of anything like this now, I doubt it will be long until you can specify “Search Only ALT Tags” in some search engine to search only image descriptions. Be ready for this by ensuring all your ALT tags adequately represent what’s in their corresponding image.)

• Wireless devices like WML and WAP-enabled cell phones and PDAs will likely use ALT text instead of the actual image in most every case. It will be a long time before we get perfect image rendering on these devices.

Two hints:

• Add a period and a space at the end of every ALT tag so that it stands alone. If just text is displaying on a page, then the ALT tags will run together, like “HomeProductsContactUs”. Additionally, if an image is embedded in a text paragraph and it has no punctuation on the ALT tag, then it will be suddenly inserted in the middle of another paragraph with no punctuation or delimiter from the text surrounding it.

• If an image is structural and therefore doesn’t need a description ALT tag, add an empty one (ALT=” “). On text-only browsers, this will suppress the file name or any other indication of the image. Conversely, if you don’t specify an ALT tag, a text browser like Lynx will display the image file name which will confuse users.

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.