Location: FRAW Main index » FRAW design statement

FRAW Site Design Statement

Today web sites are simply "compiled"
rather than "designed".

This might sound a semantic difference, but it holds within it one of the issues that's driving the bloat, and hence the ecoloigcal impact of digital networks. If you want an efficient site it must be designed – this has been the approach taken in the design of the FRAW site.

Note: The full methodology for assessing the "bloat" and "visibility" of web sites used in this analysis is described in ecolonomics 12. 160 web pages from 16 popular web sites, and the 10 most requested pages from the FRAW site, were downloaded and analysed to contrast the size/construction of pages on the FRAW site. What follows is a short digest of that analysis.

When the Free Range Network began the redesign of our web site last year we perused this issue, and found that it was possible to major make a difference to the impact of running a web site. It's not so much a technological issue, or the type of content you create, it's all about design; you have to deliberately set out to create a site that uses the least possible resources. Not only does that reduce the amount of energy it takes to load our pages, but we also freed-up 20% of the web storage for further information as a result of the re-design (although that's a purely theoretical saving – we have since filled it with new information we didn't previously have the space for!).

The main tool we use to create our site is Bluefish – it's a static page editor, rather like a very elaborate text editor that's been optimised for creating web content. However, much of our information is pre-processed using small scripts that format the data ready for the final design using Bluefish. This means that we have complete control over the way the HTML formatting is applied to the information – it's a conscious act of design, not a form, a check-box-driven menu, or the completely opaque methods of exporting HTML pages from word processors and other programs. The formatting around the common design of the FRAW site, and all the style sheets and scripts that provide the mechanics of that design template, are optimised to provide the least amount of "opaque" data and the greatest amount of visible information as possible. All the images have been processed, using GIMP, to create the most compact file size whilst maintaining a usable level of image quality. Finally, our PDF files are created using compression and display options that minimise the size of the file created.

The greatest difference between this approach and many of the commonly-used web content management system is that our method requires understanding; by understanding the mechanics of how HTML, CSS and scripting systems function, and how these are processed by both the server and the client browser, we can ensure that what we produce is as efficient as we can make it whilst retaining the "design" advantages of using HTML. Arguably we'd save even more if all our pages were plain text files, but we'd loose the 'visual' information, which augments the assimilation/understanding of the text, if we followed such an approach. In most commercial environment's such understanding isn't considered of use because it requires training to achieve, and it takes slightly longer to produce web content using this approach. However, the pay-back is that the amount of data on our allocated web space, and the ecological efficiency with which that information is transmitted across the web, is much greater than the conventional approach to web design.

Measuring how much "better" that approach is to more conventional site designs is not a straightforward issue. How do you measure the difference?; what indicators do you seek to quantify? No matter how you decide to measure the difference, to contrast this new design with other web sites we need to measure a lot of other web pages; and to interpret what data this produces it's necessary to understand how the web systems works (see the box on the next page for an explanation of web design).

Let's begin with a simple premise –

data transaction is proportional to ecological impact

First of all we can look at the distribution of files within the FRAW site. This graph shows the cumulative distribution of files and file sizes – the file size of every file on the site is logged and then sorted by size. The fact that the total files line shoots up quickly shows that most of the files on the site are very small. The cumulative size line, in contrast, climbs more slowly because a minority of the files on the site are large. If we're relating data transaction to impact then the FRAW site has an immediate advantage – most of the files in the site are small.

You can see the distribution of files on the FRAW site more clearly if we break it down by file type. The greatest number of files are PNG images (44%), but they take up only a small amount (5%) of the total size of the site. That's because all the PNG files have been optimised to take as little space as possible. A fifth (22%) of the files are HTML/SHTML web pages, but these only take a small amount (3.4%) of the total size of the site. Again, this is because the pages are optimally designed to give the highest quantity of visual information for the smallest amount of formatting code. The main purpose of the site is the make available the publications of the Free Range Network – as shown by the large amount of space taken up by PDF files. They make up 15% of the files on the site, and take up nearly two-thirds of the file space.

What's more interesting is to compare the construction of pages across the 17 web sites. The average page size for each site is shown in the graph. Rather than a uniform distribution, certain sites have much larger files sizes than others. This is primarily because of how web pages are created – the templates, formatting and code they use, are issue of design. For example, for the average page you might download from The Independent's site, you can download two pages comprising roughly the same amount if data from The Guardian/Observer site.

In the graph the total file size is split into its functional components; the "visible" and "opaque" data that make up each page, the media files, and the formatting data. Note that whilst the page/media data increases as file sizes get larger, what's really ballooning in size is the amount of formatting data – the style sheets and scripts that are a function of the site's design template.

What this analysis shows is that it's the "opaque" components of the page – the style sheet, scripting and page formatting data – that are the dominant components of most program generated/commercial web pages; what you actually see on the screen – the "visible" data such as text, graphics and animated images – are only a minor component of the data downloaded. This is very significant if we're thinking about the ecological footprint of the web – what's the point of downloading large quantities of data if you can't "see" it?

If we combine these data for the pages from all the sites into a figure to express a value for the "bloat" they embody (as outlined in ecolonomics 12). For each site a "bloat" value is calculated, and then the results are sorted from the highest to the lowest value (a low result is bad, a high result is good). What the results illustrate is a continuum of web design policy, and the effect this has on the transaction of data and thus on impact. This isn't an absolute value, but an average across pages, across a number of sites. Most sites are somewhere around the middle of the graph. That's because they're using the standard design approach that doesn't put great emphasis on the ecological efficiency of design. In contrast the sites falling off the left of the graph, most notably the Labour site, represent sites that, even compared to the mainstream, are very poorly designed or managed. Finally, the sites off at the top right represent the less bloated pages that put a greater proportion of their content into visible information rather than formatting or control... and there we find FRAW!

Of course, bloat is only one way of looking at the design issue. Instead of just focussing on the bloat we should also consider the purpose for which web pages are made... to be seen! To counteract the negative pull of the bloat indicator, the last stage of the analysis was to quantify the visibility issue; the amount of text in the web page/page includes that's visible as a proportion of the whole page/content size and the media files (as outlined in ecolonomics 12).

Plotting the bloat against the visibility indicator produces an interesting correlation (although that's not surprising as there's a close relationship to the weighting in each value). From the zero value at the bottom left, moving towards the right is good – it increases visibility; at the same time move upwards is good – it decreases bloat. For that reason the best place to be is the top right, as it represents both high visibility of data and low bloat... and there we find FRAW!

What's also notable here is the Green Party site. It gets a high visibility score, higher than FRAW, but also a high bloat score – and for that reason it sits off the the bottom right. That's because it uses a lot of graphics for it's design and navigation. Consequently, whilst the higher level of graphics and formatting data gives it a high bloat score, the large proportion of graphics also gives it a high visibility. Getting a better result isn't simply a matter of reducing the size of the graphics – that would also reduce their visibility. What they need to do is radically reduce the overhead of page formatting, style sheet and script code; even if they kept the same graphics, that would reduce their bloat score.

Why is FRAW in the "best" location on the graphs? (it's not a fiddle, honest!) It's primarily because of the very low script code and HTML mark-up overhead that our pages embody. That's not surprising... they're deliberately designed that way!

What's interesting is to look at the design of the CorporateWatch web pages. They've got a good bloat score because they're very well designed, minimalist pages. However, they still contain a lot of formatting and control scripts for the navigation system. If they switched to a less intensive navigation scheme they'd probably be on a par with the FRAW site; actually, perhaps better, since we tend to have a slightly higher media and page size than CorporateWatch – as shown in the graph earlier.

Set against the techno-utopianism of the web and all it's dynamic services, the observations made here may seem a little awry – perhaps irrelevant to the way networked services are designed and constructed today. In fact, such arguments against the current "way of things" in the on-line world could be dismissed as a form of digital Luddism. The use of the word "Luddite" is an easy method to dismiss all this, but this analysis goes to the heart of the efficiency and productivity of the Internet, and the on-line systems that modern society increasingly relies upon.

FRAW has been designed to be as efficient as we can make it, whilst serving the purposes for which it exists. That, hopefully, is demonstrated by the analysis provided above. We hope that others are also able to take these ideas and develop their own analysis of the web efficiency issue, and begin to address the ecological impacts of web services.