Titles

Each individual web page should have a meaningful title. The page title will display in the title bar of the browser window and when someone saves a bookmark of the page, the title will be what appears in their bookmark (favourites) list. Clearly there are benefits in choosing a title that gives a clear indication of the contents or purpose of the page. back to top

Index

The first page in a website should be named index.htm or index.html and be located in the root directory of the site. This file will be automatically sent to the browser if no other file is specified. If the first page is named incorrectly, the site may not load at all.back to top

Resolution

Consider the screen resolution that the target audience is most likely to use—this could vary from site to site. Generally content of all pages should be accessible on a screen displaying 800x600 pixels without the need for horizontal scrolling. However, this recommendation may change in the future if more people move to using larger screens. The need to scroll vertically is less of an issue although viewers should not be forced to scroll down the page to find important information or navigation buttons. They may not realise they have to scroll and leave the site without finding what they were looking for.back to top

Tags

For a search engine to display a meaningful description of the site, use of the description meta tag is required. Use of the keywords meta tag is also important. When someone types something into a search engine, it returns a list of the sites whose keywords match the words entered by the person searching.back to top

Fonts

There are thousands to fonts to choose from when designing with type, but unfortunately only a very few will usually display on someone else's browser. For someone to view your typographic masterpiece on their browser, they will have to have the same fonts installed or their computer as you have on yours. Fortunately, there are a few fonts that almost all computers have installed by default. These have become known as web safe fonts. They are: Helvetica, Courier New, Times New Roman, Verdana, Arial. Arial Black, Comic Sans. Despite this it is still recommended that alternative fonts are always provided in case the preferred font is not available, e.g. "Verdana, Arial, Helvetia, sans serif". Part of cross platform and browser testing really — text can display at different sizes in different browsers. Check that the text is readable.back to top

Colours

Historically web pages were viewed on monitors that could only display a maximum of 256 colours. With this in mind, in 1994 Netscape defined a standard set of 216 web safe colours that could be relied upon to display appropriately on all platforms. The remaining 40 colours varied on Macs and PCs so were not included in the web safe palette. Today the vast majority of computers are able to display millions of different colours so the need to stick with the web safe colours is greatly reduced. There are many websites, that can provide the hexadecimal or RGB (red, green, blue) colour codes for including in HTML code, two examples are:

www.w3schools.com/html/html_colors.asp www.dtp-aus.com/htmlchrt.htm. back to top

Labels

Alt tags are text labels for graphics. While a page is loading, the alt labels will display where graphics are going to appear. Alt tags are essential where the navigation of a site relies on graphics. If for some reason a graphic fails to load or display, or a user has the display of graphics turned off, the alt label should give the user enough information to be able to find their way around the site.back to top

File Size

Add together all the file sizes for the html file and images which make up a web page. The total should be no more than 60k (approximately 60,000 bytes) for the first page in a site. If the total is more than this, the page will take too long to load and visitors to the website may move on to another site. The total 'page' size for subsequent pages in a site can be larger, but it's a good idea to warn visitors if there’s anything over 150k. It depends a little on the target audience of your site, e.g. if it is aimed at children, it's probably best to keep page totals down to as small as possible, to minimise the risk of confusion caused by a long loading time.back to top

Plug-ins

If the site has content which requires a plugin (e.g. Flash), there should be some alternative way to access information, just in case the visitor doesn't have the required plugin installed. There should also be a link to a site where the plugin can be downloaded.back to top

Format

Images with areas of flat colour should be .gif files, with as few colours as possible in the colour palette, whilst retaining an acceptable image quality. Images which are photographic or contain gradients, should be saved as jpg files, with compression set to reduce the file as much as possible, whilst retaining an acceptable image quality.back to top

Images

Do the images on the site look OK? If they look fuzzy, blurry, pixelated, dark, light, or just plain bad, there are a number of things to check. Most of the problems which occur with images are caused by poor image capture or manipulation. The original may have been poor quality (garbage in–garbage out), or scanned at a low resolution and then mercilessly scaled up in Photoshop. Images should be scanned at around the same size as they will be published. Enlarging an image in Photoshop is bad. Other nasties that occur at the manipulation stage can include incorrect proportions—an image is stretched or squashed so that is looks unnatural (especially people), or brightness, contrast or colour levels have been set incorrectly. Are the images displaying at original size? The IMG tag in HTML has a couple of values attached to it, which force the browser to display an image at an exact size. If an image on a web page has been adjusted in size after the page has been uploaded, the browser may try to display the image at the size defined by the original values in the IMG tag. This can result in very distorted or pixelated images displaying in the browser. Deleting and re-importing the image in an HTML editor can fix this.back to top

Style

Is the style appropriate for the target audience? A site with a creepy, gothic style may not be appropriate for a company selling washing machines. The site on the right has a mysterious, blobby interface design. This is probably fine if the intended audience is web savvy and doesn't mind exploring. AltaVista's target audience however, is very broad, and could include a number of first time web users. The design is clean, simple and obvious. The style of every page within a website should have some common elements. These could be colour, imagery, type style, layout, look and feel, or interface elements. Without a consistency of style viewers may assume they have left the site when a new page loads.back to top

Navagation

Sites should not be confusing to get around (unless that's the intention). It can be good to test a site with a few people from the target audience. If they have trouble finding their way around, or miss important parts of the site, the navigation needs to be made more obvious. The navigation should also be consistent throughout the site. Check that any background colours (or images) used don't conflict with text and text link colours, making the text hard to read. For example, visited link colour should be different from the background colour, or non-linking elements such as body text should not be blue, users might assume they are links. The example on the right has a disastrous background image, which makes the text almost impossible to read. The site should offer an efficient user experience. For example, a visitor shouldn't have to click through many links, and wait for several pages to load just to get an email address or phone number. Count the number of clicks required to get to information the target audience may want –could it be done more efficiently?

back to top

Columns

People find it hard to read text which goes all the way across the screen. A short line length is much easier to follow with the eye, and is one of the reasons that magazines and newspapers are set in columns. Ideally, lines of text on web pages should be a rnaximurn of 10 to 12 words or 500 pixels in length. The Peachpit Press site is a good example of a site with short line length, and it works well at a screen resolution of 640x480 pixels too. The example sitting behind it, however, is much more difficult to read.
http://www.peachpit.com/ back to top

Grammer

Spelling should always be perfect, grammar should be correct and appropriate for the target audience and use of capitalisation should be consistent throughout the site.back to top

Eyeflow

When a page loads, what’s the first thing you notice? Is that thing the most important elements on the page? If not, there may be priority issues. Your eye should be drawn to the most important thing on a page first, then be lead through the rest of the page. This is known as eyeflow. Colour, contrast, size and style are all factors which can contribute to how much impact an element may have. The ihug site is so busy–many of the elements are animated too, that it's hard to know where to look. The example from the Apple site demonstrates much better priority and eyeflow. The viewer's eye initially focuses on the iBook, then rests on the text sitting below.back to top

White Space

Awkward gaps and pockets of nothing on a page can make a page hard to read and unappealing. It's important to have areas of space in a layout to give the reader's eye a rest, but they should be in places that fit.back to top