particulars

The following is a code checklist to which I plan to adhere. If you look at my current sites, it will be easy to see that I have some work to do.

Have any suggestions? Please post them in the comments.

Code Validation

Why validate your code? w3.org said it best:

One of the important maxims of computer programming is: “Be conservative in what you produce; be liberal in what you accept.”

Browsers follow the second half of this maxim by accepting Web pages and trying to display them even if they’re not legal HTML. Usually this means that the browser will try to make educated guesses about what you probably meant. The problem is that different browsers (or even different versions of the same browser) will make different guesses about the same illegal construct; worse, if your HTML is really pathological, the browser could get hopelessly confused and produce a mangled mess, or even crash.

That’s why you want to follow the first half of the maxim by making sure your pages are legal HTML. The best way to do that is by running your documents through one or more HTML validators.

• Markup Validation Service
• CSS Validation Service
• Link Checker
• W3CW3C mobileOK Checker

Jump Links

Those long lists of menu links aren’t so handy when viewed without styles on a mobile phone or experienced through a screen reader. Please give the option to “Jump to Main Content” and “Jump to Footer” and wherever else users will most likely want to “Jump” to.

<div id="goto">
	<a href="#main">Main Content</a> | <a href="#footer">Footer</a>
</div>

I put my jump links into a <div> that is styled into a 1 x 1 pixel spot.

#goto {
	height:1px;
	text-indent:-9999px;
	width:1px;
}

• Skip to Main Content Links are Important
• Navigation Accessibility 2: Accessing Page Content
• Skipping over navigation links

Print Styles

Another instance where those long navigation menus get in the way is when a website is printed. Pages of links are useless and a waste. Hide them and optimize your featured text for print.

<link media="print" href="css/print.css" type="text/css" rel="stylesheet" />

• CSS Design: Going to Print
• Improving Link Display for Print
• ALA’s New Print Styles

Use microformats when possible

Microformats.org puts it this way:

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.

Overall, microformats are an effort to standardize the code for certain kind of information, such as calendar events or contact information, and make them exportable from the browser to a calendar or address book.

• microformats.org
• Operator Firefox Plugin leverages microformats and other semantic data that are already available on many web pages to provide new ways to interact with web services.
• Web Developer Firefox Plugin has features that can assist in the inclusion of microformats in your site.

sitemap

What is a sitemap? Sitemaps.org sums it up this way:

Sitemaps are an easy way for webmasters to inform search engines about pages on their sites that are available for crawling. In its simplest form, a Sitemap is an XML file that lists URLs for a site along with additional metadata about each URL (when it was last updated, how often it usually changes, and how important it is, relative to other URLs in the site) so that search engines can more intelligently crawl the site.

Web crawlers usually discover pages from links within the site and from other sites. Sitemaps supplement this data to allow crawlers that support Sitemaps to pick up all URLs in the Sitemap and learn about those URLs using the associated metadata. Using the Sitemap protocol does not guarantee that web pages are included in search engines, but provides hints for web crawlers to do a better job of crawling your site.

• What are Sitemaps?
• Build your Site Map online

Consolidate and compress CSS and Javascript files possible

To reduce calls to the server.

• CSS Drive – CSS Compressor
• Minify Javascript Online / Online Javascript Packer
• Online Javascript compressor
• php script!

Use sprites when possible

I have found sprites to be the most helpful to me when I am creating image roll-overs. I had previously used two different images, but, upon hover, the original image would disappear completely for a second until the second image loaded. With sprites,

• CSS Sprites: Image Slicing’s Kiss of Death
• Use CSS Sprites to Beautify your WordPress Post Dates (used on this site)

favicon

That little icon next to the URL of the website you currently viewing is called a “favicon” or “fav.ico”. It is 16 x 16 pixels, usually a .png, and supports transparency.

<link rel="Shortcut Icon" href="fav.ico" type="image/x-icon" />

iPhone Icon

If someone wants to bookmark your page to the homescreen of their iPhone, are you prepared with a custom icon?

Create a 45px square icon and name it “apple-touch-icon.png” and pop it into the root directory, or link to it with:

<link rel="apple-touch-icon" href="/directoryLocation/iphone-icon.png" />

Google Analytics and Webmaster Tools

Really, why wouldn’t you. Its free, filled with features, and provides an insight into your users that will help you better serve them.

• Analytics
• Webmaster Tools

Please, feel free to post your additions in the comments.