Best practises when building a website

Best practises when building a website

When building or maintaining a website best practises should be used to ensure the highest level of usability and a level of accessibility appropriate for the audience of the site.

Sites should adhere to the World Wide Web Consortium (W3C) standards which make web documents more accessible to all types of users and machine agents, and more visible to search engines.

• Doctypes – by using a certain type of doctype it is possible to validate the code to the specific syntax. Best practise dictates that strict mode should be used to ensure that all code is to the newest and highest standards.
• XHTML – using XHTML ensure that the highest standard of coding that works in all browsers plus XHTML pages can be read by all XML enabled devices. The code should be validated to the W3C standards and ASCII text be used were needed.
• Tags - should be used where possible. Alt tags should always be used to add associate keywords to images. Heading tags should be used appropriately. H1 – H6 tags to be used for top level key words as more weight is placed on them from the search engines.
• Images – images should always specify their width and height to allow browsers to continue rendering while waiting for the image data. Logo and imagery play an important role in the overall look and feel of a website therefore the images used on a page should relate to the content and be appropriate for the attended audience. For accessibility purposes alt tags should contain relevant information about the image and not just describe it.
• JavaScript – the js code should be included using external files for caching and better maintenance.
• CSS – this should always validate and be used to layout the page using css2. Text should be formatted with css1 and other decorative elements rendered with css2. The external css files should be sent with the correct MIME type. Aural CSS enable web authors to how their pages should be read aloud by screenreaders that support them.
• Typography – the typography should be legible and readable. Some fonts are not always legible and are designed just to stand out. The text size should be made to be changeable but the default setting should always be set at a level that is readable and clear. The colours used should also be taken into consideration and chosen so that there's enough contrast between your text and page background colour - particularly if using a background image on the page.

Usability

“The usability of a website is the extent to which the website can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.”

The key to the usability of a website is to understand the users and what they will be trying to achieve by visiting the site. For most websites the navigation should be consistent and user paths should be clear and easy to follow, information should be laid out in an expected manner and there should be clear links back to the homepage.

Things that need to be considered when thinking about the usability of a website are:

How easy is it to navigate around the site?

Overall look and feel of site

Relevance of site images to content

Relevance of site content (text)

Overall ease of use

Overall page layout and organization

Was the site inviting to use?

Were the naming and labelling of links clear?

Site download time

What hardware and software will the majority of your users use to access your site?

Would you recommend this site to a friend?

Navigation

The navigation of the site is probably the most important issue with regards to how your users will find out more about you and the information they require. The navigation should be in a consistent location on each page of your website and tell the user where they are and where they can go. Clear language should be used and breadcrumbs (location indicator devices) can be included to aid the user and should be added near the top of the page showing the user where the page belongs within the structure of the site. Links back to the homepage should be added to every page of the site.

Navigation must also be considered for people who cannot use a mouse but must tab through content to get to the options or information they need on a page.

Links

Textual hyper links should be indicated in an appropriate manner. They should be in a different colour or style to the other text on the page and are often shown as underlined. Text links should also make sense to a screen reader or other similar device.

Sitemap

A sitemap will allow a user to visit one page and find out the hierarchical structure of the site. It is a good reference for a user trying to find a specific piece of information or webpage.

Title Tags

The title tag is shown in the top title bar of the browser and should be relevant to the current page. It is useful for those who may bookmark your site and in tabbed navigation.

Accessibility

It is now mandatory that government websites comply with the minimum level of the World Wide Web Consortiums Web Accessibility Initiative, however the more accessible a website the greater number of people can use it.

Access technology is used to adapt or make computer systems and services accessible to a disabled person or people using different web technologies such as mobile and pda’s. Examples include the provision of screen readers and text-to-speech systems; screen-magnification software; tactile braille display, trackballs, touch pads/screens etc; alternatives to standard computer mice, keyboards, switches and voice-recognition software.

The level of accessibility should also reflect the purpose of the site and who it is aimed at. Other considerations for an accessible website should include how the website will be maintained e.g. manually, using a CMS, or by using an automated web application

Accessible websites include:

• Text only versions
• Different style sheets for different mediums - If the browser or browsing device does not support stylesheets or stylesheets are switched off, the content of each page is still readable and the site fully navigable.
• Text resizing
• Access Keys – using the U.K. government standards
• Hypertext links - Use text that makes sense when read out of context e.g., avoid ‘click here’’. Where necessary have a title attribute which describes the target in greater detail.
• Using Skip Links – allows a user to navigate around a web document, without having to cycle through a huge list of links. Is a useful feature for screen reader users, and keyboard users in general, but they're also useful to other groups; primarily, people with mobility difficulties.
• Use of headings, lists and consistent structure

Accessibility of a website can be checked using the BOBBY Accessibility Checker

http://webxact.watchfire.com/

Testing for usability and accessibility

The test of usability and accessibility involves measuring the ease with which users can complete common tasks on the website. The testing should be completed by a wide range of users who would normally be expected to visit the website, the aim is to observe people using the product in as realistic a situation as possible, to discover errors and areas of improvement. User groups can be set up and given a number of tasks to perform. Their user journeys are then evaluated and the result implemented into the design and build.

In the production stages the final product is developed and then the functionality evaluated through testing, quality assurance, usability testing, and field testing. The evaluation results are used to improve the product and this process is repeated until the business goals are met.

Once the website has been launched it this then maintained and refined with user feedback which can be used to create new requirements