5 HTML Tweaks to Improve Your Web Site

Have you ever had a tiny pebble in your shoe—nothing major, you can just wiggle your foot and it feels better for a while—and you’re too busy to really do anything about it anyway? You could just take your shoe off and dump the thing out, but it’s not bothersome enough to go to that much effort, so you just put up with it.

Some Web sites are like that: They have little annoyances that aren’t irritating enough to send you elsewhere, so you put up with them. Maybe the navigation is a little counterintuitive, or certain pages take just a little too long to load, or the font size is just a bit too small. Not a big deal…until you find a competitor’s site that does it better, and you take your business there.

A lot of times, simple tweaks can make a big difference in how visitors perceive a site’s quality. That perception, in turn, can determine whether visitors dump out that tiny pebble of Web site irritation and go elsewhere.

With that in mind, here are five simple HTML/CSS tweaks that can improve the quality of your site.

1. Performance

Your visitors don’t want to wait for your content to load. (To quote Suzanne Vale in Postcards from the Edge, “Instant gratification takes too long.”) Multiple studies show that even fractions of a second in load time can make a measurable impact on conversions and revenue.

An easy way to improve page performance is by linking your pages to a separate CSS file, rather than including the CSS inline on every page. If you also enable browser caching (a Web server technique that is beyond the scope of this article), a browser has to load your site’s CSS only once.

The <link> tag is placed within the <head> section on every page and looks like this:

<link rel="stylesheet" type="text/css" media="all" href=http://your_site_url/style.css />

2. Usability

This idea is as old as HTML itself, but it has fallen out of favor with designers in recent years: Visually differentiate visited hyperlinks from unvisited ones. Craigslist, unabashedly old-school in its design, follows the “blue=unvisited, purple=visited” convention, and most browsers will impose it when no CSS to the contrary is defined. Studies show that users find it helpful if they can visually distinguish links they have followed from those they have not – for example, in a list of similar products that they are evaluating. If you don’t like the blue/purple convention, find an alternative that you like, and design the :visited CSS attribute to implement it. For example, to give visited links a medium grey color, try this in your CSS:

a:visited { color: #4e4e4e }

3. Accessibility

Your site is visually spectacular, with lots of brilliant graphics. Great! However, it’s all lost on the visually impaired. Blind people typically depend on audible screen readers to consume a Web site’s content, and if the content is mostly pictures, the screen reader is useless. In addition to reducing your site’s reliance on graphical elements, use the alt= tag. Screen readers will read the alt text so your visually-impaired users have a better idea of how to use your site. Example:

<img src="graphics/SearchButton.png" alt="Search Button" />

4. SEO

There are books, online forums, training courses, and highly-paid consultants out there to improve your site’s search engine rankings, but let’s face it: They are always at least a half-step behind the search engines, which constantly improve their algorithms. There are some constants, however, and one of them is appropriate use of thetag to specify your site description. The description appears in the search results and should be written to describe your site and why users should want to go there.

This HTML is placed within the <head> section:

<meta name="description" content="(description text here)" />

…where you replace (description text here) with a few lines of well-crafted text describing your site.

5. Forms

If you have any forms on your site (and what better way to get information from your visitors?), do them a favor and use the tabindex= attribute on your form fields. The tabindex= attribute tells the browser what field to jump to when the user presses TAB. Without tabindex=, pressing TAB takes the user to the next active element on the page, whether it’s a field, button, or hyperlink, and probably not what you want. Figure out a logical sequence for tabbing through the form fields, and set tabindex= accordingly.

Using the tabindex= attribute is simple:

<input name="address1" type="text" tabindex="10" />

There are many more ways to improve your Web site, but these can get you much of the way there without a lot of time and effort. Use them to get that metaphorical pebble out of your users’ shoes and make them want to come back again.