How to Become an Eco Web Designer

by in Design on 17th Sep 2010 · Comments

Whether you believe in global warming or otherwise, the earth does still have limited resources. With an ever increasing population this means that we should try and reduce our consumption of fuel and wastage whenever possible. While I’m not going to start a hippy campaign and say that we should all go live in a world without computers (that would drive me to the point of insanity) I think that as web professionals, there are small things we can do to pass on the savings to our customers.

How to Become an Eco Web Designer
Image credit: dhammza


This article aims to highlight some of those potential energy and resource saving tweaks that we can make to ensure that if our visitors wish to reduce the amount of resources they expend, the process will be as painless and unobtrusive as possible. While this list is certainly not extensive, hopefully it may give you the opportunity to think about the process you use to build a website and how to best meet the ecological needs of your visitors as they are of an ever increasing level of importance.

Save Energy
Image credit: emitea

Figure 1: Recognising ways to save energy will make you an eco designer.

Note: Everything listed has some scientific credibility behind the theory, but the amount of savings that can be made depend on various factors. My advice is that if doing small things can help visitors reduce their electricity bills or resource costs without incurring extra ourselves, it’s worth the effort!

Blackle is The New White

While this item has a lot of controversy surrounding it, there is some clear merit associated with the practice therefore it’s worth breaking apart the facts from the fiction. A few years ago a site called Blackle appeared and made a name for itself due to its simple idea that by using a black background, you could reduce the amount of energy expended by your display. The theory behind this was that it requires more energy to illuminate a white pixel than a black (non active) one, sounds easy right?

Blackle

Figure 2: Blackle conceptualises a method to help CRT displays reduce their energy consumption.

Well the truth is that the claims by promoters of the theory itself based on a scientific study were rather exaggerated. You see, with the advancement of technologies and the progression from CRT displays (which a real difference can be measured) to LCD’s (which require near enough the same amount of energy to produce black as white), much of the idea behind such a noble campaign has been debunked. So why is this item included in the list? For one reason, backwards compatibility!

As web professionals we are used to the fact that people may be browsing our sites using clunky old pieces of technology, from elderly browsers to a machine that would have been in existence longer than your children. It’s still a fact today that many people still regularly make use of CRT displays as they visit websites. Therefore it may be worth the consideration of giving your users an alternative stylesheet which they can pick based on black to pass on potential energy savings to those devices.

Contrast is King

While the above method is really up for debate as to how effective the energy savings will be, this next idea has practical applications in both accessibility and energy. Many web designers who are aware of accessibility best practices will already be aware of the benefits that ensuring your site’s colors contrast effectively. It’s a common problem for people with visual impairments that the ability to differentiate between shades can be troublesome if your vision isn’t what it used to be.

Contract is King

Figure 3: Color contrast not only aids accessibility, but it also benefits low brightness screens.

The energy saving advice comes as a side effect of a practice many of us (or our operating systems) undertake to reduce the power usage of our PC’s. At this point you are probably wondering what the practice is? It’s the cool ability to turn down the brightness of our displays! Every portable device from a laptop computer to the latest iPhone has an energy saving plan available where the screen brightness is turned down to save battery power, this therefore is worth addressing in web design.

The method in which a web designer can consider the effects of contrast on low brightness displays is simple. Ensuring that the color contrasts used on your website are vibrant and distinguishable enough on such devices while either in a low brightness state or when an end user such as someone with color blindness visits will ensure that not only is your information more accessible, but it’ll give your visitors the justification to keep that brightness level down and save energy as they browse!

Avoid Thrashing Hardware

Another theory which is closely related to energy usage is the case of hardware thrashing, which is in simple terms, where the CPU, hard disk or graphics card have to use more energy in order to cope with the increased needs of the device. While controlling the hardware is largely out of the question for web designers, there are a couple of things we can actually do to ensure that we put the least amount of stress on computers as possible in order to use the least amount of electricity possible.

Avoid Thrashing Hardware
Image credit: Nota

Figure 4: The more we punish our hardware, the more energy it requires.

The first method we shall examine is something we actually do have some control over, which is the server resources to which we constantly use. The second method applies in the same way as the first except directly applies to the end users machines which also require energy. Everything from a server request for a file to processing a complex script takes resources, and while it’s out of the question to ask that we all stop producing complex scripts or sites, there’s a few things you can do.

Removing bottlenecks from scripts which cause loops that waste energy is a great place to start as it’s surprising how quickly those can result in 100% CPU usage on a computer. In addition, tidying up your source code and compressing images and media can be a great way to save bandwidth, speed up a page and save energy in the download process. Finally there’s the case for only using intensive components like Flash when required – as it’s well established that Flash media can drain a battery!

Encourage Mobile Devices

The mobile revolution has brought us many benefits, and one of the most influential is the reduction in power usage. While it’s arguable as to what extent the savings are, the nature of having a battery and lower powered devices in combination can certainly in many cases reduce the need to boot up that hefty desktop tower! With people using these devices to browse the web on a regular basis, it therefore only seems like a natural thing to both cater to their needs and encourage such usage.

Encourage Mobile Devices

Figure 5: Mobile devices are (by themselves) an energy saving device (of sorts).

We all know that probably 80-90% of the average internet users do relatively “low powered” tasks of which many mobile devices are capable of carrying out. The benefits for addressing this audience not only help ensure that your site is usable to this ever increasing crowd, but the savings in terms of energy are more prominent for these devices due to the reduced screen size, lower powered components and the way in which many websites are optimized to be as efficient as possible.

The recommendations for this concept would be to ensure that your site is as mobile friendly as possible to encourage visiting your site whilst on the move. While having this on its own could cost your visitors less in electricity, an optimized experience which includes less content to avoid heavy scrolling, smaller images less bandwidth and less rendering heavy scripting like Flash will reduce the time required to browse and this will mean less power is wasted while waiting for pages to load.

Quicker Results = Less Energy

Next we shall examine a tip which is based around the concept of usability and the user experience but its main function has the side effect of also saving energy. We as an industry invest a great deal of time and money into trying to optimize our experiences in order that people can find what they are looking for as quickly as possible. With the age of social networking and search engines the idea of grabbing new information has become a central figure in the popularity of most websites.

Quicker Results = Less Energy

Figure 6: Waste less of your visitor’s time, and you’ll waste less of their energy consumption.

While having a website that’s easy to search and well structured may seem like an obvious principle, many people fail to realise the implications this has upon our time and resources. The simple facts are that the longer we have computers undertaking activity, the more electricity is required – and while many of us leave our equipment turned on 24/7, it can be said that the less amount of time required to get what we seek will therefore reduce the average web user’s consumption of power.

As designers, we need to encourage fast and effective experiences to help users to get what they need with zero barriers (people want speed!). Once your visitor gets the information they require, they can simply put the machine into standby or hibernate or even shut down. While the idea of spending less time at your site may be worrying, visitors will likely be less frustrated from the ordeal and therefore more likely to return in the future – plus their electricity bill may also be reduced.

Move to a Green Host

Here is something that could be of interest in trying to reduce the carbon emissions of your online venture. A whole industry has arisen from the concept of green hosting which effectively means that the person providing you with the place to hang your website’s hat is also making an effort to ensure that as much of the energy they use is renewed (or optimized) as possible. This won’t really impact your users or help them save energy, but it certainly has benefits for the environment.

Move to a Green Host

Figure 7: Green hosting is something quite innovative and worth considering.

If you do consider moving to a green host or perhaps lobbying your existing host to be more green you will want to ensure you do your research carefully as the claims as to what extent their hosting is “green” can be vastly different. Generally speaking the price for green hosting is usually around the same amount as regular hosting so there shouldn’t be much of an issue in that regard, however as it’s still a relatively fresh concept the choice you’ll have will be more restricted than before.

As we’ve established previously, the small tweaks we provide to an experience can seriously help your visitors do whatever they feel is necessary to make savings and be more eco friendly. If you already have basic provisions in place and have your website as accessible and usable as possible then the chances are that your site will already be fairly friendly on the eco scale, however it’s great to see schemes like this to tackle one of the biggest issues relating to energy the web suffers.

Saving Rainforests and Ink

Finally we shall examine one of the most well known but surprisingly least resolved issues relating to saving resources and energy, the printed document. It staggers me to this day how often we still print websites and how much we waste not only paper but ink in taking such content offline! Every website allows their content to be printed, but so many have unnecessary features still lingering on the pages and the more of these that exist, the more waste occurs in reproducing the material.

Saving Rainforests and Ink

Figure 8: Paper and ink are wasted at an epic rate in the technology industry.

If you go to a popular website such as the Guardian (a UK based newspaper) one of the first things you will notice upon print previewing an article is that while they have eliminated the advertising and on-screen fluff commonly associated with a printed document, they still retain all the comments which in most cases have no real justification for being included within the printed document. As most people print without checking how many pages are required, this adds up to a lot of waste!

Having a print stylesheet to optimize the reading experience is fine, but you need to ensure that your site removes anything which either is of no use to a printed document functionality and forms requiring interaction, doesn’t add to the content (advertisements and banners) and would simply waste reels of paper (such as pages of comments). While most of the tips in this article have been based around saving electricity (a good thing), paper and ink wastage is among the worst offenders.

Use Less Resources

Throughout this article I have tried to highlight a few of the common issues that impact both energy and resource usage and attempt to showcase some possible solutions, some of which may see greater results than others. The key point to take from such an analysis is that the world’s resources are precious and as professionals, we have a privileged position in that we can guide our users to make sensible choices. While energy saving may be far from our minds, we can make a difference.

Choosing how to best implement functionality, how to impose less issues upon our users and not wasting their time are among the most idealistic and straight forward concepts that can both benefit our users and our need to keep burning time on the web. While I am a technology addict myself I realise that many of our audience are concerned about how they can better the eco situation and so hopefully by thinking about the above, you can show your visitors that good efforts are being made!

More Resources

Questions: Have you considered how you can save your visitors ink and electricity? What methods not mentioned do you think are useful to future readers? Are there any potential downsides to giving your site a bit of an eco friendly tweak or are you going to start implementing right away

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.