Web Design Guidelines for Low Bandwidth

Tools for Web Designers

Introduction

Many web developers have recognised the value of designing websites for low bandwidth, and have created a variety of useful tools to help themselves and each other. We recommend the following tools as being particularly useful.

WebsiteOptimisation.com Analyser

Speed Up Your Site [1] is a helpful book of techniques to speed up websites, though it is now sadly out of print and only available second hand.

The companion website [2] to the book also has an online web page analyser [3] which looks at pages to see how they could be reduced in size, and how well they conform to guidelines on page loading time and number of objects.

The analyser is a good place to start when looking to make your site load faster, over high or low bandwidth.

Firefox Add-ons

Firefox is an excellent tool for web developers because of the number of plugins and add-ons designed for and by web developers:

Web Developer Toolbar

The Firefox Web Developer Toolbar [4] by Chris Pederick contains a number of very useful options:

Disable images, cookies, CSS, JavaScript or Java with two clicks;
Edit CSS files and watch the results in real time;
Display image file sizes in the browser;
Display access keys and tab indexes in the browser;
Show document size, with and without compression on each file;
Display the document using "small screen rendering" for compatibility with mobile devices;
Set your browser size to a standard screen size such as 800x600 or 1024x768;
Validate HTML, CSS and accessibility using online tools;
Check your site with the Web Page Speed Report (see below).

Aptivate staff find this tool particularly useful for web development work.

Firebug

Firebug [5] is another Firefox extension designed for developers. Like the Web Developer Toolbar, it allows you to edit HTML and CSS live, displaying changes in real time. However, it also has some unique features, such as:

Display the current CSS attributes of any element in the page;
Display network activity and show files loading in real time and afterwards;
Enter JavaScript commands into the console for debugging and testing.

The display of network activity is particularly interesting, as it allows you to see the order that web pages and their dependent files load in, the dependencies between them and how long each one takes.

Live HTTP Headers

Live HTTP Headers is a plug-in for the Firefox browser that allows you to view HTTP Headers. This is useful to see if compression or caching are enabled on your web server.

Pingdom Tools

Like Firebug, this website [6] also displays the time taken to load each page on a site, but from an external server. This is useful if you have a very fast connection to your server or to the Internet, so that you can't see pages loading slowly. Further servers are planned in Europe, Africa and Asia.

Aptivate's Low Bandwidth Simulator

We developed this simulator [7] to show web users accustomed to fast Internet access what it's like to use a slow connection. If you remember accessing the Web by modem or have tried it on a mobile phone, you know how painful it is, but this can be difficult to communicate to others without demonstration.

The tool works for the majority of websites, and gives a very good indication of the experience that is to be expected when viewing a site over a slow connection.

Loband

Loband [8] is Aptivate's web simplification engine that strips down web pages to a simplified text format so that they load faster on slow connections. You can use Loband in combination with the simulator to see its effect over a slow connection.

Browsers for Compatibility Testing

Guidelines on testing browser compatibility

Browser	Windows	Unix-like (e.g. Ubuntu Linux)	MacOS X
Firefox	getfirefox.com	getfirefox.com	getfirefox.com
Opera 9	opera.com	opera.com	opera.com
Safari/Konqueror	Safari 3 Beta	konqueror.org	Safari 3 Beta
Netscape	Navigator 4.08	Communicator 4.8	Navigator 4.08
Lynx	Lynx on Windows	lynx.browser.org	Apple.com
Internet Explorer	Multiple versions of IE (3, 4.01, 5, 5.5 and 6) on one machine Alpha version of a test tool for IE 8 beta 1, 7, 6, and 5.5 on Windows Vista and XP Official Microsoft site	IEs4Linux	IEs4Linux - Mac Running Internet Explorer on a virtual machine

Validation Tools

Ensuring that your HTML and CSS complies with standards means that it will have the most chance of being interpreted on the widest number of browsers. To assist with this, the W3C provide an HTML and XHTML validation service [9] and a CSS validation service [10] which are useful if you don't have the Firefox Web Developer Toolbar.

CSS File Size Optimisers

Text filtering tools can be used to strip comments and white space from style sheets as well as combine and abbreviate rules. At the time of writing, the following two online tools are recommended in order of preference, although there are others out there. The tools are not infallible and will sometimes introduce bugs into the CSS, so it is worth testing the resulting CSS with your site, and changing to a different tool if necessary.

Script File Size Optimisers

Similarly, JavaScript and VBScript files can be shortened considerably by passing them through text filters that create a shorter file through techniques such as reducing white space, removing line breaks, and using shorter variable and function names. This process often results in script files that are difficult to read, and the process is usually one-way, so it is worth remembering to keep an original copy of script files for future changes or debugging.

JSMin [13] by Douglas Crockford, a JavaScript filter;
ESC [14] by Saltstorm, configurable, works with various scripting hosts;
JSLint [15] by Douglas Crockford, JavaScript validator, useful to check code is correct before processing it, as bugs are usually very hard to spot in processed code.