Twelve Things Most Sites Need - Part II

by Mike Cherim — Mar 3, 2008

In the first installment, Twelve Things Most Sites Need - Part I, I offered a six-pack of must-haves. Specifically I suggested sites should have a proper navigation menu, a meaningful, well-formed title, a method of contact, a site map, passive accessibility, and standardized markup. Now, as I offered the last six, in the order in which I thunk ‘em up, here is the balance.

7. A Usable Page Weight

Ironically I used to hate the Web. I started with dial-up and it was a miserable experience. Moreover, back in the day it seemed that every site I visited required some sort of plugin or add-on to make it work. Frankly, the Internet was a pain in the butt. This has changed on some levels. The need for plugins or add-ons is greatly reduced what with operating systems pre-loaded with all the necessary support. But some people still have dial-up. For the last six years I’ve had cable broadband and it’s a dream. I’m spoiled. And it’s very easy to forget the less fortunate and go hog wild, loading my pages with heavy graphics. It’s easy to forget how doing this will make for a less-than-happy experience to traditional dial-up and distant DSL users. Gotta keep the weight down.

I’m not saying the Web isn’t a place for heavyweights, it is, but with due consideration. If you want to offer heavyweight graphics and whatnot, let visitors navigate to them, instead of offering them on the initial page load. And warn users if something big is coming up. It’s only fair to allow those who want to opt out the opportunity to do so.

I suggest aiming for an upper limit of 100kb per page of combined background and embedded images (this is testable). You can buy a lot for a 100kb. To get the most bang for the buck, reduce the over all number of images, optimize them exporting only flattened, compressed files, and please pre-size embedded images for their location (being sure to add the height and width attributes to the img element). I’ve seen thumbnail-sizes that were really 900kb monsters with styles off! That’s just wrong.

8. A Helpful Error Page

If you’ve ever been lost, it’s always nice to see some helpful soul willing to give directions (assuming you are willing to admit you’re lost). On the Web you can be that helpful soul. Not only, as mentioned in the last installment, can you offer a site map to proactively guide your visitors, you can offer a friendly, styled “404” error page (or pages if you want to cover more errors). Your error page should offer at the very minimum offer a link home, a navigation menu, and at least a link to the site map. If you want to be a really helpful soul, though, try combing most if not all your nav tools and putting them on one page. Make a perfect 404 page offering a site map on the page (easy with dynamic site maps), search, even contact info, and more.

This is not hard to do. Ask your Web host for starters. Specifically ask them about custom error pages since you’ll want to provide something useful and most default server error pages, even styled ones, aren’t really very helpful at all.

9. Good Headings

In the last installment I spoke of the importance of using the right mark-up for the purpose at hand. I mentioned headings but didn’t go into detail. That’s because headings are so important they, well… they deserve a heading of their own. The use of headings is logical, and styling them is wide open, just use your imagination.

What good are they? They offer section demarcation, semantics and ordering, beauty in the right hands, a search indexing benefit, greater accessibility, and even a navigation source for some users of assistive technologies like screen readers. What more incentive could you possibly need to act on this recommendation?

10. Jump Links Provided

You may have detected by my suggestions so far that I’m big on helping Website users. I feel that the easier my sites are to use, the better their experience will be. I want them to not only find the goods, being supported along the way as needed, passively and on demand if at all possible, but I want them to want to come back. So, one of my twelve is going to have to be offering skip or jump links. I find these are very helpful to everyone with exception to most of those who use a mouse or pointer — and that is a greater number of people than you may realize. A jump link affords users the opportunity to jump down the page to the content or navigation, by-pass redundant or lengthy sections, access help content, and jump back up the page if you consider a top link or back to menu link a jump link. I do. Some may argue that it’s a replication of browser behavior offering links like this, but I’ve not heard recently of record numbers of browser-savvy surfers if you know what I mean. Plus, they’re simply innocuously helpful.

One rule: If you’re going to offer jump links, it’s best to make them visible, but not always necessary. There are ways to hide jump links from view while still maintaining a high level of accessibility and usability to a very large percentage of users. Do note, however, that displaying them will increase that percentage to 100.

11. Focus Styles

I’m not a dedicated keyboard user, but I do use my keyboard a lot. It’s helpful at times, convenient at other times. It’s an option. Sometimes I use my keyboard on the Web, tabbing onto pages, bouncing around from link to link following the natural source order of the page. Sometimes, however, depending on the site, this can be difficult. I’ll be tabbing along, minding my own business, when all of a sudden, wham, I’m lost. I don’t know where I am on the page. The reason is invariably the developer of the site failed to offer one to the most simplistic of accommodations: link :focus. Probably due to simple ignorance. But I’m here to change that.

To offer link focus it involves nothing more than a simple style sheet entry, like this:

a:focus, a:active { color : black; background-color : yellow; }

The a:active is for Internet Explorer, and to provide the when-activated styling on other graphical browsers. Obviously you can get more creative, but that above will help make your Web pages a lot more navigable to keyboard users and nobody will suffer a diminished experience.

12. Robots.txt File

You may be wondering why I included something so mundane as a robots.txt file in this line-up, but I feel it’s very helpful to have one. It provides instructions to honest indexing robots and spiders like the GoogleBot, telling them to stay out of certain directories you don’t really want them in anyway. Why have your bandwidth wasted needlessly?

Some people, I’ve heard, want to disable right-click on their sites thinking that they may somehow actually succeed in stopping people from copying their images (can’t be done), yet they don’t have a robots.txt file excluding their images directory. The latter would be far more worthwhile. It’s very easy to make one, there are even tools you can use to help you get the job done.

Is There More?

The short answer is, yes, of course. But if you satisfy all twelve items in this two-part article, you have done well. You’ll be offering a quality site that is a cut above many sites of the Web. And the benefits, you may find, will actually be noticeable, and perhaps even tangible. Happy coding.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float