Computing the efficiency of a design layout

Sustainability is a meta-measure of many other factors on a website, including efficiency. To create a measure of sustainability measure, we often have to measure efficiency. While this is relatively easy for things like download time (time versus CPU cycles or electricity), how do we measure the upper levels of design where we get the biggest buck for applying sustainability? Someone who designs layouts or page comps all day might want to be sustainable, but they need a way of measuring it in their design. Furthermore, their measure has have some common features with the methods used in programming, or at meetings the design and development group will continue to “siloed” and speak a foreign language to each other.

One way I have been thinking about is to consider complexity. Intuitively, a complex design will take more resources to download and render. But a useful measure of complexity hasn’t been defined to my knowledge. So, sort of some sort of information theory equation, I propose using a “quadrant” schematic, similar to that used in SPOT analysis diagrams.

A quadrant approach, while inexact, has the advantage that it is visual (appealing to visual designers) and directional (we can plot progress in our design on one schematic). It is a way to plot, either via quantitatively or qualitatively, the progress made in a site redesign by using ‘green ingredients’. It’s an ideal communication schematic for site teams, especially if some are from the business side, or otherwise not inexperienced in web development.

Here’s an example of what it might look like:

quandrats in sustainable design analysis

quadrant analysis of design versus efficiency

 In the chart:

Efficient refers to sites with high page speed scores (80 or above) in Yahoo! YSlow, or comparable values for other tools like Google Page Speed. These tools allow you to adjust the relative elements contributing to a low or high score (e.g. weighting how many HTTP requests your page requires to render)

Inefficient refers to  sites with low page speed scores (below 80) in Yahoo! Yslow,  or comparable values for other tools like Google Page Speed.

In addition to “page speed” tools, additional features could contribute to a site’s placement in a quadrant:

  • CSS with lots of overlapping style declarations, or using lots of sneaky tricks like overflow:hidden to hide stuff sticking out from the layout would be judged less efficient.
  •  Page reflows could also be counted. Web pages that trigger multiple reflows (e.g. re-drawing themselves every time a new image on the page completes downloading) should get low scores. Each reflow adds to the carbon footprint of an individual web page. However, I don’t know of any way to automatically compute the number of reflows required to draw a page.

Simple refers to sites with basic layouts, judged by their wireframes. These would be the perceived layouts, rather than what you see when you draw a box around every block element on the page.

Using a program like Wirify, sites would be analyzed for “surface’ block and inline elements. A complex site would have lots of elements, or most elements nested in a complex fashion in each other. This could be computed manually, but an automatic system, operating along the lines of an HTML parser could probably be used to compute  the complexity of the DOM, though CSS would have to be checked to differentiate simple sites with lots of hidden elements from truly simple ones.

Complex refers to sites with elaborate layouts, judged by their wireframes.  This isn’t necessarily bad, since some ideas require complexity to express. “Simple” is an overused way of describing “good” in design. A road map is complex, but it gets the job done. It would be difficult to compare across websites – one couldn’t be sure that the message was changing with the layout – but in incremental redesign of a site, this comparison is probably valid.

Site progression via substitution of “green” web design and coding techniques

During a sustainable redesign, the designers and developers would both try to create “greener” ingredients. The developers would use small libraries, compact code, and more efficient methods to accomplish an equivalent visual display. The designers would back up and re-think their layout – could it be changed in a way that required less complexity? Such a designer would have to know some development – which goes back to the need for designers to know some development, and developers to know some design, to make a site truly sustainable.

It’s a simple idea, but basic schematics like this are more likely to get used than complex algorithms that determine fine details of site efficiency.

  1. What have we learned about Sustainable Web Design? – A summary of what to do… | Sustainable Virtual Design

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Get every new post delivered to your Inbox.

Join 720 other followers

%d bloggers like this: