12 Steps to Sustainable Web Design

Categories Articles, Web Design

Hey, you’re a caring person. You use a recycling bin, and you bicycle to work. In the past, you were also a bit smug about your job as a web designer as well. What you did (as opposed to those nasty tree-killer print designers), seemed soooooo good for the planet.

However, these days we know that the web is not as green as once imagined. The Internet consumes several percent of the world’s electricity. The Web’s planetary footprint is rising, and in a few short years, data centers alone will have a bigger environmental impact than the entire airline industry.

Green-ify your website

Given this problem, what can you do about web sustainability? The following 12 steps will help you lose your addiction to online bloatware, and get back in good favor with Mother Earth.

Step 1: Read the WPO standards

50% of sustainability is web efficiency. According to Web Performance Optimization (WPO) guru Steve Souders, 80% of future improvments will happen at the font-end. Google and Yahoo! have both compiled short lists which will help you understand what makes a web page faster:

It’s time to check your own sites.. Install Yahoo! YSlow and Google Page Speed into Firefox or Google Chrome. Run both of them on your site’s home page. Chances are, you’ve got some sustainability to do!

a very bad result for Yahoo YSlow for a unsustainable website

(URL hidden to protect the guilty)

Step 2: (Really) optimize your images

JPEGS, while great at compressing photographic images, are hard to render. On desktops it doesn’t matter, but on low-powered smartphones and tables a JPEG will use more CPU cycles to draw the screen and drain the battery. That’s why PNG is the preferred format on mobiles. Make sure you use JPEGs only when necessary, and switch your interface icons and controls to PNG format.

It’s also important to note that Photoshop doesn’t optimally compress images. You can shrink the size of your bitmaps even further with Yahoo! Smush.It. You just upload your image file, and download the optimized image.

Success screen for smush-it conversion

Savings are typically in the range of 6-10%, which adds up to significant performance gains on complex sites.

Step 3: Use CSS Sprites

Using sprites in CSS background images has been standard since 2003, replacing the dreadful “sliced images” generated by graphic tools. To join the club, combine your background images into one file, like the following one used by Google Maps:

Google Maps CSS Sprite

Now, style the CSS background-image position so you only show the part of the image you need in a particular area, like this:

#item1{background:url('mysprite.png') 0 0;}
#item2{background:url('mysprite.png') -42px 0;} /* slide image to left */
#item3{background:url('mysprite.png') -84px 0;} /* slide it again */

Make your own CSS sprites using this list of free CSS sprite generators, then add them to your site using the great tutorials at CSS-Tricks.com or W3Schools.com.

Step 4: Replace bitmaps with vectors

But there is an even better solution for non-photographic images – SVG, or Scalable Vector Graphics. SVG files are text (XML) rather than binary data, and modern browsers allow you to inline the SVG right into your document, where it just becomes more markup. This reduces the number of separate HTTP requests made to the server. SVG graphics scale up without loss of resolution, so you’re doing responsive design.

Newer versions of Adobe Illustrator, as well as open-source Inkscape, allows you to “burn” directly to SVG files, so you won’t be be duplicating effort by using this GUI drawing tool. Photoshop files can also be converted to SVG, but image elements remain bitmaps – the resulting SVG file will be a collection of inline bitmaps. In this case, a commercial tool like VectorMagic may be used to vectorize non-photographic files.

Step 5: Replace lots of little bitmaps with font glyphs

Most browsers can use online webfonts, and font files can be re-imagined as a kind of sprit file for vector graphics. Instead of icons, you might consider creating a custom “dingbat” font using FontForge, as described by Josh Emmerson in Using Fonts for Resolution Independent Assets. Here’s an example of an “icon font” from Heydon Pickering that you can use to replace bitmaps with resolution-independent vector graphics:

Iconglyph font

A “typographic” interface constructed this way will give major speed increases and a smaller footprint.

Step 6: Inline the bitmaps you can’t glyph

Since fonts only create outlines, they are impractical for images with internal detail. SVG files could be used, but for little icons (e.g. a “print” icon) this is overkill. So, keep those bitmaps, but insert them directly into the <img>tag or CSS background-image declaration as a base64-encoded data URI. Upload your image to an online tool like GreyWyvern or WebCoderTools. You’ll get back a string of pseudo-text that you can put directly into an image, like so:

Inline Image: <img alt="Embedded Image" width="325" height="195"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUUAAADDCAMAAAAiNP....." />

div.image {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA…..); }

Most browsers support inlining bitmaps directly into markup, and you’ll be reducing your energy-grabbing HTTP requests even more.

Step 7: Validate your markup

There are lots of reasons for writing valid code, and here is another! If your page follows standards, the browser’s internal code runs quickly and efficiently. Invalid pages, in constrast, drop into “quirksmode.” The browser churns a lot of extra CPU cycles guessing what to draw. Workstations draw more power, and mobile batteries drain while you watch. So check your code using the W3C validator. To take it to the next level, super-validate using the DOM-Monster bookmarklet.

DOM Monster html super-validator

Step 8: Cache your downloads

One of the most inefficient – and unnecessary – features of unsustainable web design is the need to re-download images, CSS stylesheets, and code libraries that don’t change – they are static. This can be fixed by adjusting the .httaccess file on your site. You don’t need a hardcore developer for this!

Here’s an example from Askapache.com that prevents browsers from re-downloading your images for almost a year.

<filesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=290304000, public"

Step 9: Compress your downloads

You should also make sure that your web server is compressing the downloads. Most servers can GZip your downloaded files, reducing their file size and the footprint of your website. Here’s one that expires on the last day of the Mayan Calendar (you won’t need it after that).

Header unset ETag
FileETag None
<filesMatch "(?i)^.*\.(ico|flv|jpg|jpeg|png|gif|js|css)$">
Header unset Last-Modified
Header set Expires "Fri, 21 Dec 2012 00:00:00 GMT"
Header set Cache-Control "public, no-transform"

Most “boilerplates” like the popular HTML5 Boilerplate already contain a .htaccess file with caching and all the other goodies. Check it over, and replace your current .htaccess if necessary. Adjust the time-outs to the values you want. To make sure you’ve done the right thing, check out the ultimate .htaccess tutorial at askapache.com.

Step 10: Use Content Delivery networks

Even better than static caching, Content-Delivery Networks, or CDNs let many websites share a script file. When someone visits your site, they only needs to download the CDN file once. If they visited another site with the same CDN, they don’t have to download at all. That’s huge savings for the entire Internet, and simplifies your website setup as well. GoogleMicrosoft and other companies all offer CDN services for free. Here’s an example of how to access the Google CDN:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

If you currently use JQuery or Modernizr, this is a no-brainer. But check the version number on the CDN – sometimes they lag behind the latest version.

Step 11: Get a Green Webhost

A big server at your webhost sucks as much power as a gas-guzzing SUV, and a large webhost can easily draw the power equivalent of thousands of homes. Green hosts minimize their environmental impact by using renewable energy, or trading “energy credits” to make up for power consumed. There’s a LOT of marketing hype about green hosts – but there are a few that are genuinely green. The following pass the test for being truly sustainable:

AISO.NET 100% green webhostCanvas Dreams 100% sustainable webhostGreen Webhost, united kingdom based 100% green webhost

Being green doesn’t stop these hosts from being full-featured, so don’t hesitate to switch! For more webhosts that don’t “greenwash”, check my list.

Step 12: Re-think your design

One final step gives us the other 50% of Sustainable Web Design. How is web sustainability different from Web Performance Optimization? Standard WPO just streamlines a site as given, no questions. But as you go through the first 11 steps, you’ll likely discover aspects of your design that could be changed. Perhaps you could use type rather than icons in some places. You might standardize your JQuery so you can use a CDN. You might even spend more time designing on paper before jumping to your workstation.

So look at your final website. Can your design change? Most likely it can, and that’s the final step that makes you truly green.

Pete Markiewicz has been creating websites since late 1993, and co-founded Indiespace, the first website to sell music and art through the web in 1994. He teaches Interactive Design and Programming at the Art Institute of Californa Los Angeles. He is currently developing a web template optimized for sustainability at Green Boilerplate (http://www.greenboilerplate.com). Further discussion of the theory of web sustainability, as well as other virtual media, may be found at his Sustainable Virtual Design site (http://sustainablevirtualdesign.wordpresscom

  • Thanks for the kind words and I appreciate the compliments. I will upload the presentation to Slideshare.

  • Thanks for the reference.

  • Thanks for the reference. but most resources we used in PSD to HTML5 Conversion like smushit, CSS sprites & Background Images, but there’s a Little problem with me, I want to create font from an image Like “Logo”, any body have an Idea.
    Regards Sahib Singh

  • Hi Pete. Interesting points on image-compression. I’ll give Smush.It. a whirl. Thanks for the tip!

    Best wishes, Alex.

  • Pete Markiewicz

    Here’s a way to use Google Fonts from a content-delivery network (CDN) – you can load only a subset of the glyphs if necessary – http://www.igvita.com/2012/09/12/web-fonts-performance-making-pretty-fast/

  • Awesome resources, clearly laid out — thanks!