Looking good
This is not about what is or is not a nice looking design. I would never claim to be an expert at that. This is about making sure that your site's functionality remains available, and easy to use, no matter what the vitual limitations of your visitors, or the browsers and devices they use.
Design your sites to work on any sized display
Not everyone uses the latest and greatest displays. My personal favourite resolution is 1280 x 800, but I know many people who use 800 x 600 and above, often because they are unable to see with anything larger. Mobile devices requently have very severe limitations which cannot be changed by the user, and even a good smartphone may still be stuck with 640 x 480. Telling visitors to use something larger will result in them quite rightly telling you where to put your Web site.
Devices and device browsers are becoming much more popular. Browsing on televisions is fairly common, and browsing on mobile phones is growing. The best approach is to have a design that is not restricted to specific widths, so that it remains fluid, and works at any size. If the design is restricted then use CSS media types to provide different layouts for different device types (such as 'tv' and 'handheld'). CSS 3 also offers media queries where you can provide different layouts for different resolutions. They are available in most desktop browsers, and they are available in the most popular browsers for devices, the place where this capability is really needed.
Don't rely browser specific features
Many browsers offer proprietary features (such as Microsoft page transitions - these in particular are annoying as they take time to display pages when it is totally unnecessary). You should never make pages that rely on these features. It is possible to use some features like these as long as you properly detect the capability (not the browser) and only use it if it is available, but in general, if you use these, you will asking to cause problems for your users.
Make your site easy to navigate
Don't overcrowd it with gimmicks or ugly colours, or plaster it with so many distracting adverts that the content becomes difficult to locate or follow. Provide sensible links, and only a few of them. Don't overcrowd your page with 200 links. Provide a search facility if your site is big, and make it an advanced search if your site is very big. Provide a site map just in case they get lost.
Carefully choose colours
Remember that colour blind people cannot see certain colour combinations. Always make sure that with and without images, the colours that text is written in are nothing like the background. Use a light colour for one and a dark colour for the other. Remember that the most common form of colour blindness is red-green indistinction. So colours that to you might look totally different, will to some people look identical. That is why I say to make one light and one dark, because colour blind people should always be able to see that.
For the same reason, never rely on colours to convey information. It is not a problem if you use colours to enhance it, as long as they are not the only way the information is provided.
View your page in a text browser
Try Lynx or Links (or try Opera, and disable the graphical and styling features). You should be able to find your way around without any problems. This is also the equivalent of what blind people would 'see' with text readouts.
When using CSS, ensure that your site remains functional without CSS too, because some browsers, especially browsers for people with visual disabilities, do not support it. Also, make note of the points I make in the section on browser problems in my CSS tutorial.
Include closing tags
Some older browsers will fail to display pages if tags like </table> are missing. Just because your
browser copes with it does not mean that everyone else's will. Missing out these tags will make the page unusable in
those browsers. You can use the W3C's validator service to check if you have
forgotten to close tags.
Be careful with tables
Not all browsers can display tables in a way that is useful to their users. Text based browsers generally do not display them very well, and more importantly, they can be extremely confusing for users with certain disabilities. You should restrict their use to where they are really appropriate, such as displaying tabular data.
If you need more information about using tables, I have written an article about making accessible tables, which may be of use to you.
Make sure pages can be quickly identified
Search engines often display the first few lines of a page in their search results, When users search your pages, they will need to be able to identify which will be useful. With these pages, the main heading appears first, and will give the title for the individual page, so it can be identified. Users who use text or speech readouts will also benefit by being able to quickly identify if the page is useful to them.
Last modified: 15 February 2011