This is advice for designers of websites that have a practical purpose, e.g., forums, shops, documentation. For purely artistic sites, or simply pointless (vanity) ones (not that I'm equating the two!), you might find the advice irrelevant.

If your site has a practical purpose (chiefly to distribute information and knowledge), then supporting that purpose must have overriding importance. The aesthetics of the site are much less important, and are intrinsically difficult to get right or be certain of due to the nature of the Web.

Here are some general principles of web design which I regard as essential:

You can see that the advice I give is mainly about not doing something that is unnecessary, particularly if it would render the page unusable for those who don't have the feature. This is because most of the problems I see in websites are solved by taking something out that accomplished very little.

You might think that following this advice limits your options (e.g., it leads to a less diverse Web), but I would say that many of those options (e.g., grand, multi-column, screen-filling layouts) were never really there in the first place, and are just fragile illusions (at least, without CSS3) – the Web was never diverse in that way, and those options were merely perverse, changing the Web into something which it shouldn't be. The fact that many people believe such options exist as normal capabilities of the Web is largely irrelevant, given that they go against its principles, and well thought-out international standards exist to support those principles. (I like to be bloody-minded on this point.)

Looking at it another way, if you follow my advice, be prepared to be disappointed with the results. This is a consequence of setting your expectations of Web design too high, probably due to being misled about the capabilities of the Web.


With the general advice above in mind, now consider the specific complaints about web design.

A summary of specific advice

  • Don't set font-size on <body>.

  • Don't set font-size using px or pt units, only %, em or (occasionally) ex.

  • Don't set font-size on the main body of text to anything except medium.

  • Use <table> only for marking up tabular data, not for layout.

  • Don't set CSS properties width or height to accomplish layout.

  • Don't attempt a multi-column layout unless you can detect when there is sufficient space for it.

  • Don't use absolute positioning – at least, not without a fail-safe media query.

  • Don't rely on JavaScript being supported in your visitor's browser for your site to remain usable. Do not make essential functionality depend on it, unless there really is no other way.

  • Unless your site's purpose is chiefly to display images, don't rely on image rendering being supported in your visitor's browser for your site to remain usable. Choose alt attribute values carefully. Code image captions so that they don't have to be displayed if images are not supported.

  • Don't rely on CSS being supported in your visitor's browser for your site to remain usable and aesthetic. Large chunks of low-entropy content (such as site-wide navigation) should appear after the main content, or simply not appear on every page.

  • Don't rely on SVG, Flash, or the-next-big-thing being supported in your visitor's browser.

  • Don't use browser detection for authorisation.

  • Don't use browser detection to disable functionality.

  • On the <body> element, specify all colours, or none at all.

  • Don't specify colours using HTML attributes on any element other than <body>.

  • Using CSS on any element, specify all colours, or none at all. (But you can inherit colours on elements that are unlikely to be set by a user stylesheet.)

  • Make the page's title identify the page, while using the <meta> description to describe it.

  • Don't make your site exist at multiple, minutely different URIs. Define one as canonical, and make the others redirect to it.

  • Never stick anything in your ear smaller than your elbow.