Green Ideas

What Is Sustainable Web Design?

When we think of sustainability, most often, pictures of solid, tangible objects come to mind, such as automobiles, houses, food, etc. If we are more acquainted with sustainable business, perhaps more nebulous concepts come to mind such as supply chains, manufacturing processes and so on. Rarely however, does our corporate website come to mind when thinking of reducing our carbon footprint.

A website is essentially digital information which is presented to you at varying levels of interactivity through projections of light from your screen, so why would we need to be concerned with its carbon footprint? The answer lies in the transfer of that information from the web server to your device. A rough starting point for understanding this in practical terms is nicely broken down in James Christie’s article, Sustainable Web Design:

Unfortunately, working out a website’s carbon footprint is, on the best of days, tricky and imprecise. Here’s my shot at it:

  • A 2008 paper from the Lawrence Berkeley National Laboratory suggests it takes 13kWh to transmit 1GB.
  • According to EPA figures, the average U.S. power plant emits 1.2 pounds of carbon dioxide equivalent (called CO2e) per kWh produced (other countries have higher or lower averages depending on their energy policy).
  • If we multiply 13kWh by 1.2 pounds, we get 15.6 pounds of CO2e—and that’s just to transfer 1GB of data.
  • If one million users each download a typical page, which now averages 1.4MB, that’s a total of 1,367GB of data.
  • At 15.6 pounds per gigabyte, that’s more than 10 tons of CO2e.
  • Mobile data, with its reliance on 3G/4G, is up to five times more polluting—77 pounds CO2 per gigabyte.
  • If a million mobile users on 3G download a 1.4MB page, that’s 1,367GB times 77 pounds, which totals 52 tons of CO2.

Based on these figures, we can estimate that a site the size of Tumblr, with 183 million pageviews per day and approximately 10 percent of those from mobile, has the potential to be responsible for a staggering 2,600 tons of CO2 daily.

Although most of us would only dream of owning a website which received 183 million pageviews per day, this example serves to illustrate the cumulative effect that the status quo of web design may present.

There is some good news. There are quite a few ways to reduce your website’s footprint, and many of these techniques come along with other benefits as well.

Responsive Web Design

Let’s start with one of the biggest buzz-words of 2013. A responsive website is one that is configured to change its layout and design based on the size of the browser through which it is being accessed. The extent to which the design changes is up to the designer’s discretion. Conceivably, this give the website the ability to optimize itself for viewing and use on different devices, though in practice it is still a young art.

Based on those clear advantages, responsive web design has taken the internet by storm – but responsive web design, done well, also has the potential to decrease your website’s carbon footprint. Using responsive techniques, developers can serve smaller images to smaller screens and hide certain media that may not be appropriate to a mobile user, such as decorative images, video and animation. This can cut down significantly on web page size!

Use of Images

I’m as big a fan as any of big beautiful graphics and videos on a website. At my company, Pollen Brands, we pride ourselves on creating immersive websites that often leverage these kinds of assets. However, there are many data-saving decisions to be made, some straight-forward and others not so clear.

Images probably make up the highest proportion of data transfer on a typical website. Rarely is every image necessary to communicate your message – the choice is not always between including a particular image or not, though. Oftentimes images are scattered willy-nilly throughout a web page, trying to highlight different concepts, when in reality what is needed is one good image.

Once you’ve selected that image, it needs to be properly optimized to reduce its file size. There are many tricks for doing this, some of which can reduce image size by over 50% without a significant reduction in quality.

Fonts and other Assets

One of the most exciting recent advances in the web design world has been the ability to use custom fonts on a website. However, these fonts, if not already present on the user’s device, need to be downloaded just like an image. A great way to offset this is to use custom fonts sparingly, and when possible, use one from a shared library – if the user has been to another site that uses the same font from that library, then it will likely be already cached in their browser and not re-downloaded.

Scripts and Stylesheets

The same as above is true for javascript libraries such as jQuery – if the user has been to another site that uses the same script from that library, then it will likely be already cached in their browser and not re-downloaded. Assets such as stylesheets and scripts should also be minified and compressed whenever possible. Ask your developer what all this geekery is about if you’re unfamiliar. If they’re unfamiliar too, get a new developer.

Bells and Whistles

Does your homepage really need that slideshow gallery? Does it really need 12 photos? Slideshows are often a way to resolve internal disagreements about what content should be on a page by just cramming it all in there. They’re usually pretty useless and sometimes detrimental to user experience. They also rack up data usage.

There are lots of other embellishments out there that use precious resources, for example, UI elements such as drop-down menus that rely on another javascript download, background images that could be done without or done with CSS, maps, ads, flash animations and please don’t tell me you have audio playing on your website.

Give the Users a Choice

You as a business owner may think you know what content is most important for your users to consume. As such you may want to have a video, slideshow, or audio piece auto-play. You may want to embed a Google Map instead of linking to it to “keep them on your site.” You may want to load 100 products on your catalog. Instead, give the users clear indications of what is available and allow them to take action to experience it, if they want to. Let them press play if they want to. Let them click to the next image if they want to. Let them go to Google Maps if they want to. This not only makes for data-savings, but it also promotes a better user experience in many cases.

Don’t Let Jim from Sales Edit the Website

Don’t get me wrong, having an editable website is fantastic, but you and your developers will need to be careful about who can edit and what they can edit. Don’t let just anybody edit the website unless they are very conscious of being frugal about data. Also, ensure that only relevant content is editable – not every text field needs the ability to upload an image as well. Finally, if your website is editable, there are some great ways to ensure that the data used is minimal. For example, at Pollen, we’ve custom-coded out clients’ sites so that when certain images are uploaded through WordPress, they are automatically saved out to various sizes and a stylesheet is generated that will serve the appropriately sized image to the user’s device – meaning that a user on an iPhone will see an image sized for an iPhone, not the original 4000-pixel wide image that Jim uploaded.

Green Hosting

In addition to all of the factors above that play into your website’s data-footprint, you may also opt to use a green web-host. Green hosting includes Carbon offsetting, powering a data center directly with renewable energy, planting trees, plants and grass around and over Data Centers and more day to day activities such as energy conservation and the use of energy saving appliances. (http://en.wikipedia.org/wiki/Green_hosting)

The Present and Future

Recent studies show that internet and related industries emit approximately 830 tonnes (a tonne is 2,240 lbs) of CO2 emissions. That’s 2% of global CO2 emissions, a figure that is around the same as the aviation industry. This output is expected to double by 2020. Investing in not only a green website, but a culture of green web activities now will play an increasingly important role in corporate sustainability, for if the very page on your website that touts your sustainability policy is itself bloated and energy-inefficient, how can I judge the authenticity of the message therein?