10 add-ons to consider for your website

So you've finalised the design of your website, coded it up into cross-browser-compatible HTML/CSS, and entered all the content. It's finished right? Well, perhaps not quite. Once you've done all the important stuff, there's still a whole list of features, microformats and extra information that you could consider adding. To save you the bother of researching and remembering all these little bits, here's a Top 10 of the most important/useful/interesting ones.

1. Favicon

A 'favicon' is an awkward abbreviation of 'favourites icon', a concept originally introduced by Internet Explorer, whereby a small icon could be provided by a website to be displayed next to a bookmarked URL. Firefox, Internet Explorer 7, and many other browsers will now also use this icon on open tabs.

For optimum compatibility, create a 16x16 .ico file, place in the root directory of your website with the name favicon.ico, and the following code in the HEAD of your HTML:

<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon" .>

2. Robots.txt and Sitemaps

Both of these are to help give Search Engines a clue about how to spider your site most effectively. Robots.txt is a simple text file, placed in your root directory, with some rules about which pages and URLs search engines should spider and index. It's worth doing, even if the file contains no rules, just to stop all the requests from adding 'file not found' errors to your log files. If you want to stop any part of your site from appearing on search engines, here's where to specify it, but don't rely on it as a way of hiding pages you don't want visible to the world (such as admin pages or private photos), as you're effectively putting up a signpost towards the content you're trying to hide.

Sitemaps is a new XML standard, CC-licensed and endorsed by the three major search engines, which you can use to suggest a relative priority of your pages to search engines. This is probably most useful if your content appears on several pages, such as blog posts appearing on their own page, a homepage, a date archive and a category page. If this is the case, you might want to boost the priority of the individual pages, and downgrade the priority of the archive pages.

3. RSS Feeds

RSS probably don't need much introduction, as bloggers and people who read blogs are, I suspect, the primary users. Needless to say, if you have any kind of content that gets added to over time, it's worth adding an RSS feed, as the people who subscribe to them will likely end up reading your content more regularly and speedily than anyone else. There's many formats, but only two worth considering, RSS 2.0 and Atom. I'd recommend RSS 2, as it's a bit simpler to understand, and perhaps is the most widely used (although all feed readers should accept both). The consensus on the MIME type which should be served with the file is application/rss+xml.

4. TABINDEX

This isn't really an 'add-on', as it's a standard feature of HTML, but so many people forget to use it that I've included it in this list. When you go to a webpage and press TAB, by default the 'focus', normally indicated by a faint border, will jump to the first link that appears in the HTML (which is not necessarily the link at the top of the rendered page). Having focus means that you can press return to activate a link, or enter data if on a form field.

This may be fine for many of your webpages, but if you've got an important form that below loads of navigational links, having to tab through all the links, or use the mouse, can be a minor annoyance. To fix this, add the tabindex="n" attribute to your form fields, where n is an integer starting from 1, and then test in a browser to check that the order makes sense.

5. Microsummaries

Microsummaries are a featured added to Firefox version 2, whereby you can specify a tiny text file which contains a regularly-updated summary of the most important thing on your webpage. Users can then add these as super-charged bookmarks which allow you to see at a glance what's new on a website without having to visit it. Some example usages might be the title of your most recent article, for blogs or news sites, or perhaps an activity statement on social networking sites ('2 new messages, 3 new friend requests'). To point out to browsers where your microsummary file is, use: <link rel="microsummary" href="index.php?view=microsummary" />

6. Print stylesheet

All web pages can be printed, but if you've ever tried it more than a few times, you'll have discovered that some pages can end up unusable when printed out, with text appearing off the page or in dodgy colours. You can fix this by specifying a CSS stylesheet to be used when printing the page. This doesn't have to be too different from your normal stylesheet, except that it's usually worth hiding any navigation links, making sure that most of the text is black on white, and making sure the font is big enough. A List Apart has an article on print styles that's worth reading, and when you're ready, you'll need to use <link rel="stylesheet" type="text/css" href="print.css" media="print"/>.

7. Accesskeys

A little-known feature of HTML is the ability to add keyboard shortcuts that activate links on your site. Unfortunately, there's no standard way to communicate to your visitors which keys do what, and few users even know that the function exists. They're probably not even that useful from an accessibility standpoint, as the shortcuts can sometimes override normal browser shortcuts. Nevertheless, there are a few accesskeys that you can add to your website which will probably do more good than harm.

A few different groups have proposed 'standardised' accesskeys, which this Clagnut blog post does a good job of summarising, but for UK websites it's probably best to follow the guidelines for UK government sites. These include 'S' for 'skip navigation', 1 for your homepage, 8 for terms and conditions, 6 for help and, perhaps most crucially, 0 for a page with details of all the accesskeys you're using. This A List Apart article details some ways you might make the keys more visible to users, but I personally wouldn't bother to make that much of an effort. Instead, leave the accesskeys for now as a hidden bonus for people who find them and as a useful shortcut for you and the people you work with.

8. XFN

XFN stands for 'XHTML Friends Network', and is a way of expressing simple relationships between you and other people. Because it's about individuals, the feature can only really be used on personal sites, and blogs are top of that list. XFN works by adding semantic information to links by the way of keywords with the rel="" attribute, so that, for example, rel="met friend sweetheart co-resident spouse" describes someone you've met, befriended, fallen in love with, shared a home with, and married (quite possibly in that order).

How this data might be used is a whole other matter. There have been some 'spiders' written, which could potentially crawl the internet and display these networks in an interesting way, but so far I haven't seen any great examples. More practically, there are some Firefox plugins which enable users to 'see' the link information as they browse your webpages. Ultimately, it's currently a bit of a gimmick, but if you can implement the feature quickly, and enjoy doing so, then it's worth doing.

9. Link and image titles

You should know about 'alt text' and how important is, and so I'll leave the explanation about what it is and how to employ it for elsewhere. Next in the line of important attributes to add for images though is title, which can also be used on links. If you have a picture of you and your Uncle Bob on a website, you might be tempted to put "me and Uncle Bob" in as the alt text, however, you could also consider this the title - what you'd write under the photo if it was in an album. There are times at which the alt text and the title text might be the same, or similar, but at other times they might need to differ. Perhaps, for example, the "me and Uncle Bob" photo is actually a visual joke. If you were blind and using a screen-reader, or simply had images turned off, the joke would be lost, unless that is you had some alt text which described the content of the image that you'd miss out on if it wasn't present, for example in this case, "photo of me with a cuddly bear teddy".

Titles on links are a bit more straightforward, and are mostly useful for giving the full title of a webpage that you're linking to without having to contain it within the link text. If you ever find yourself inserting a link with the text "check out this cool website", then it's definitely worth adding the name of the website in as a link title. Although you might want to also consider rewording your text to make it more immedietly obvious, and of course you should never type "click here"...

Title attributes are displayed as 'tool tips' in most modern browsers, except for IE6 which mistakenly displays image alt text.

10. Language codes

You can specify all kinds of 'meta' information about your website, mostly using <META> tags within the head of your webpage, most of which have little use, and certainly no longer influence search engine rankings. The one crucial bit of meta information which you should include though is language. This is because search engines can and do use this information to localise their searches to a particular language. Screen-readers may also use the information in voice synthesis, although I have no idea whether this actually happens much.

XHTML 1 recommends using both lang and xml:lang attributes, within the DOCTYPE declaration, so do that. English is specified as "en", and you can additionally append a country code to specify, say, British English over American English (note that the former should be "en-gb" and not "en-uk").

Additionally, if you ever use different languages within a webpage, such as in a quote, you can specify the language of just that element.

Fini