Introduction

Web site optimisation starts at the design stage. Before discussing details of how to optimise HTML, CSS or images, we should consider how high-level design decisions will affect the bandwidth use of your site.

Site Structure

Like a good road network, your website needs to be well connected and signposted. By providing a logical hierarchy to the pages on your website you will save your users from wasting bandwidth by loading unnecessary pages before finding the one they want.

Before deciding upon the visual aspect of your site navigation, it's important first to have organised the pages of your website into a logical hierarchy.

If possible, ask a few potential users of your website to help in this process. Give them a list of your pages and ask them to categorise the pages into groups. Then ask each of the users to name the groups. These groups and names will help you design the menus and links that will make up your website's navigation.

For example, the website for an online publisher of journals might have the following structure:

• Most Popular Journals
• Journals A-Z
  • Journals A
  • Journals B
  • ...
• Journals by Subject
  • Arts
    • Applied Arts
      • Design
      • Photography
      • ...
    • Architecture
    • ...
  • Business
    • ...
  • ...
• Search Catalogue
• About us
• Contact us

Navigation to any area of the site should be both intuitive and achievable and take only a few steps so that downloading time is minimised. In the example above, the most popular journals could even be linked directly from the front page, making the download only one step away. The A-Z index would allow users to look up journals where they know the title. The subject index would provide an alternative method where the title isn't known. The search facility would by default allow users to search for journals by keyword, with maybe an advanced search option to restrict the search by article author or date.

If your website links to documents on another site, it should still be possible to access them in a minimum number of steps. Ideally, the documents should download directly from a link on your website, without the need for the user to navigate through the linked website.

Stress-free Navigation

The navigation of your site should still work with JavaScript disabled and without third-party plugins such as Adobe Flash Player installed in your web browser.

Users want to find the information they are looking for quickly and without having to go through intermediate steps, such as filling in contact details for registration or logging in. If certain areas of your site are restricted to registered users, warn them of this but don't force them to register or log in until the final stage when they have found the information they are looking for. Users are less likely to log in or register their details if there is no incentive for them to do so.

Language

Depending on your target audience, it may be necessary to make your website available in several languages. Users should be able to visit a particular language version of your home page without the need first to load the page in the default language. Make it clear if certain areas of your website are only available in one particular language.

Further Improvements

Good website structure and intuitive navigation are key to a successful design. For larger websites, these can be complemented with a site map or site index and search facility, which we discuss in the Search chapter.

Static and Dynamic Content

Static pages are pages that do not change. Dynamic pages are created on the fly with scripting languages such as PHP.

Taking a static approach allows the user to cache the content, reducing their bandwidth use and speeding up loading. We explain more about caching in the Caching chapter.

Sometimes scripting is used to serve up what are essentially static pages. For example, news sites may have archives of news articles which are stored in a database. Server-side scripts will generate web pages from the contents of the database. But the individual news article pages are effectively static. Content Management Systems (CMS) or server-side scripts will generate these pages in a way that will stop the user from being able to cache them. For instance they will not set an Expires or Last-Modified header or disable caching.

Static content also allows the web server to work out the length of the file and send a Content-Length header. The browser can then display progress while downloading the page. This is important for large pages. If the user doesn't see some sign of progress within 10 seconds, they are likely to give up or reload the page.

Minimise HTTP Requests

Each resource of your website requires an HTTP request and response to fetch it. That is every image, CSS file, JavaScript file and HTML page requires a separate HTTP request. Each request has an amount of overhead and latency associated with it. Too many requests will add delays to page loading. It is important to consider how HTTP requests can be kept to a minimum. Try to design pages that do not require too many resources. CSS files can be combined to reduce latency. This is also true of JavaScript files and images.

Screen Size

According to W3Schools[1], 14% of their visitors still have 800x600 screens, and this is from a community of web developers one would expect to be using higher-resolution displays than the average web user. We estimate that 30% of users within the developing world have a screen resolution of 800x600.

In general it is best practice to design your site so that it resizes smoothly to any browser window size. Where you need to specify a size, it is usually best to give it as a percentage (of the container element); second best is a measurement in ems (calculated from the font size of the element), and the least preferred option is to give a measurement in pixels. It is a good idea to test your website with different font sizes and browser window sizes to ensure that it remains usable over the widest possible range.

However if you are designing your site to a fixed screen resolution then we would advise designing for 800x600 resolution.

Footnotes

[#1] http://www.w3schools.com/browsers/browsers_display.asp

---