Over the years, I think I’ve had at least 200 web designs built for me. And while the actual visual element of the design has never been too hard to nail down, the internal HTML can be so messy at times that it absolutely drives me nuts. It seems like every time I use someone new to do the CSS for a site I am doing, I have to go through little (obvious) things that I need from them.

These little things all help with SEO, usability, and how fast your site loads (which can never be under-emphasized).

Over the years the list has gone and grown, and so here I share it with you (in no particular order):

1. Content First

I see this one abused non-stop - I’m waiting for a site to load on a slow connection (eg while travelling), and everything loads but the content itself. Bad bad bad designer. Always have the content be the first segment to load. The menu, the ads, etc - they can all load later. There is an SEO element too as text that appears earlier in your HTML is arguably weighed heavier than text that appears later on.

2. Load your JavaScript Last

Consider this the opposite of #1. Javascript calls are often to another domain (eg for advertising), which soaks up time and can stop the page from loading. Even worse - when JS calls are to another domain, and that domain goes down - people get stuck waiting for that JS call to time out (which means a 30+ second wait of seeing nothing load). Make your JS load last to keep your site moving fast.

3. When Using Multiple Ad Spots, Put the Important One First

Ad companies (Google included) have a limited inventory. So when you use their ad-code multiple times on a page, the ad-code that appears earlier in the HTML gets the best ads. Subsequent ad spots get lower paying ads. So make sure the ad spot that gets the best click rate is the one that loads first in your HTML.

4. HTML Conventions Exist for a Reason

There is a large cottage industry of services on the web that let people extract information from websites. A great example is our Commentful tool. People use Commentful to know when a blog (or forum) post has new comments. By breaking with the standard convention, people who would have otherwise participated in your website no longer can. Don’t re-invent the wheel.

The flip side is - don’t break normal behaviour expected of an HTML element! When I use <li> I expect a little bullet point next to it. A great example is a design I had done recently - the designer opted to make <span> to default to and include display: block Why in the world would you do that? Do not modify the standard behavior of HTML elements.

5. H1 vs H2 vs H3 (and title too)

There is a reason there are six header types. For the love of God, do not use the H1 tag for the site name. Search engines give a lot of weight to H1 tags. To use the H1 tag for your sitename is to waste it. And use H2 - it signifies a hierarchy level to your content and help makes sense. For this post - the H1 tag is the name of this post, and the H2 tags are used for each point (Content First, Load your JavaScript Last, etc).

The ‘dont waste it’ principle extends to the TITLE tag - use it to properly convey what your page is about. And please don’t use the format of ‘SiteName - PageName’ - use ‘PageName - SiteName’ format. I always have dozens of tabs open, and seeing your sitename on 3 of them doesn’t help me find what I’m looking for.

6. Use UTF-8

A small one, but important - as the web becomes more and more universal, it is good etiquette to make sure you support non-english characters. Declare that your HTML uses the UTF-8 charset. Also make it the first tag in the HEAD section - when the browser encounters the tag, it re-parses all the HTML it has already loaded.

7. Use Outline:0

Another small one but useful for FireFox. The CSS element ‘outline’ is what drives the dotted border around links in FireFox. While nice for text links, it can make things look bad when you use image links. Use outline:0 to remove the dotted border around images used as links.

8. Use Tabindex

Nothing drives me madder than typing in a comment, hitting tab to Submit, only to have the window fly somewhere that is not the submit button. It isn’t hard - just use tabindex=”x” inside each form element and have x increase by one.

9. Optimize your CSS

I purchased CSS Optimiser for a simiple reason - crunching CSS can save you 10+ kilobytes. It doesn’t sound like much, but it adds up. Back when we owned Blogging Pro, we published a CSS optimization guide on the different CSS optimizers and their performance. The caveat is that they can sometimes mess up complex CSS, but in general - great way to save on the download speed

10. CSS Sprites

I’m not sure why this technique isn’t hammered in non-stop to everyone who converts a design into HTML.

For those that don’t know - what you do is instead of having 10 images, you put all 10 images into one large image. You then use CSS to position that one large image to only show the parts you want to show.

What happens? Instead of 10 separate images being downloaded (which have an overhead cost and also larger on their own), you get one image that downloads everything all at once.

A List Apart has a great article on how they work, and the CSS Sprites Generator makes it easy as pie to convert multiple images into one image (and here is an alternative).

---

All of those 10 are easy. So please follow them.