Web design tips

by Dave Riches

Ten short web design tips for better web pages.

Keep the page size small

Small web pages load faster. Fast loading pages means your visitors aren't waiting for downloads all the time. A slow loading web site will discourage visitors from staying at your site. Many internet users still use dial-up modem connections so design with them in mind.

A very long block of text is probably best broken up into several pages if there is too much scrolling on a single page.

Top

Set ALT image tags

ALT tags are often ignored but they can be very useful. You should see them appear when you hover your pointer over a picture, as shown. Some people prefer to browse the web with graphics turned off. Others with a visual impairment may use a text-to-speech web browser that uses these tags to interpret graphics. In both cases the ALT tag provides a description of an image so if they aren't set your visitors may be missing out on some useful information.

There is also evidence that some search engine spiders index ALT tags and use this as a minor part of their ranking algorithms.

Top

Learn about style sheets

Style sheets are a great way to ensure a consistent look across your site. All the formatting details are stored in a style sheet which helps to keep the HTML code nice and light (no more <font> tags). If you want to change all your body text to green, you change one entry in the style sheet, upload it and you're done. Easy.

Using style sheets for positioning is a bit more complex but eventually this should become the standard way to lay out web pages. Style sheets are the way of the future so it makes sense to start learning about them.

Top

What's in the background?

Textured background GIF files used to be everywhere on the web. They made reading text difficult and now they are not the ideal choice. Some transparent GIF backgrounds can still be seen but most are understated and subtle. Keep it that way!

Background colours vary but research shows that white or light yellow backgrounds are the easiest to read. Read more about this and using 'whitespace' in this article on writing for the web.

Top

Use a descriptive title

Do a search for 'untitled document' on Google - the results will surprise you. Forgetting to name a web page is inexcusable. The title of the page counts for a lot with the search engines, so don't waste this advantage by naming a page 'Products' or 'Welcome to our site'. Use your main keywords and write with the search engines and customers in mind.

Top

Include a site map

A site map is just a simple list of web pages on your site. It gives your visitors a quick guide to what can be found there plus it's very useful to the search engine spiders. You can also use it to keep track of your site and see its structure and content all in one place.

Top

Use shortcuts

Shortcuts are everywhere in web design. An example is Server Side Includes, which can make updating a web site very easy. The header, footer and side menu on this site are all SSI files that are 'called' to each page by some HTML code, such as:

<!--#include virtual="/footer.ssi" -->

Because it is an external file we only need to make changes to one file and it gets propagated through the entire site. Much easier than changing and uploading every single page!

Top

Optimise your graphics

Small images are easy to produce but many sites have bloated images. Bitmaps aren't suitable for the web - JPEGs and GIFs are preferred instead. JPEGs are best for photographs as GIFs don't handle large blocks of solid colour as well. Load up your favourite graphics editor, crop your image hard and resize it to make it smaller. You should aim for images between 5 and 20 k for use in general text. Larger images are fine if your site is a graphically orientated site, like a photo library or product showcase. Just remember your visitors may leave if they have to constantly wait for images to download.

Top

Validate your pages

HTML code can be confusing especially with the different versions that are used and the use of editors like FrontPage that add extra code of their own. Validated pages are more likely to display in a wider range of browsers. The World Wide Web Consortium or W3C encourages web designers to follow a set of standard guidelines. The W3C markup validation service allows you to check any web page for errors. Validate this page and see what a sample report looks like. Try it on any other pages you want to check - you will soon see that a lot of web sites don't validate.

Top

Recycle where possible

Try and keep navigation bars, headers, logos etc. consistent through your site. Once this info loads into the user's browser cache it helps to speed up the page loading time. This applies to graphics also - the small 'top' arrow you see at the bottom of each section is used throughout our site for this reason.

Top