“Green Design” versus Sustainable Web Design


Case in point:

http://lornali.com/green/does-the-tech-industry-care-about-global-warming

I picked on this blog in particular because it combines some of the worst features of naive “green design”.

There is a confusion between spreading a ‘green’ message and making green websites.

In particular, the  content of the blog post is awesomely ironic. It contains the pious hope that all of us green tech-geeks (who care so much about the environment) will be “saved” by the godlike engineers at Google.

In other words, we designers and “cultural creatives” have to convert the rest of the world to green, but our own industry – well, well, we’ll just let Google fix that. After all, didn’t they say they aren’t evil?

The site itself is non-optimized. It loads lots of big default libraries. I ran it through a couple of site performance testers, and let’s just say that the results were not good. This site is closer to 1/2 gram per second CO2 than the 30 mg per second we see on many sites. It’s like showing up for an environmental rally in a squadron of Hummer H2s.

  • Total HTTP Requests: 58
  • Total Size: 385539 bytes
  • Total Images: 28
  • Total JavaScripts: 10
  • Total CSS imports: 4

The image tags are also missing width and height attributes, resulting in multiple re-rendering of the page as new images are downloaded.

To be fair, the page is using GZIP compression, but the designer was probably unaware it even existed, probably enabled by default. There’s been no attention to multiple HTTP requests, not compressing headers, and so on.

Well geez, isn’t this just a problem with WordPress templates? Sorta. I ran my own page here at https://sustainablevirtualdesign.wordpress.com, and got the following, on a default WordPress (Free) template. Not great, but better. And I don’t have green leaves on my site.

  • Total HTTP Requests: 12
  • Total Size: 198422 bytes
  • Total Images: 4
  • JavaScript: 6
  • Total CSS imports: 4

Well, am I being too hard? After all, “she’s just a designer”. Actually the blog was written by a SEO optimizer. Some technical skill is required for that. I agree she may not have had control over the coding, but she did have control over the outcome. And SEO and “sustainability” go hand in hand – there’s lots of talk about the need to optimize websites in the SEO community.

My point. If you create a site on the web, even with a designer and a CMS system, you’re a designer/programmer hybrid or you hired one. Even if you don’t do all the code, you have to understand how your site impacts sustainability of the web.

As a final zap, consider the footprint of these Eco-Organizations – they put the blogger above to shame – if shame means “super-size my website!” These groups are using wasteful techniques to carry their message.

It’s the same issue that emerged in Graphic Design (for paper) several years ago – fancy brochures with expensive blank sheets of paper, plus toxic inks telling the unwashed masses to “cut back”…

It’s my version of Web Pages That Suckhttp://www.webpagesthatsuck.com

Note: The average page size of the top 100 websites is about 900k – see the HTTP Archive at http://www.httparchive.com. Letter grades are from YSlow.

Here is the gallery of shame:

TreeHugger (http://www.treehugger.com)

  • YSlow Grade: D (65/100)
  • Total HTTP Requests: 106
  • Total Size: 1,350,000k (WOW! a 1-megabyte download)
  • Total Images: 54
  • Total JavaScripts: 35 (WOW!)
  • Total CSS imports: 6

Geez. No script minify, multiple JavaScript files in the head region, 6 iFrames, No Expires Headers, no Gzip compression. And this is just the home page. Imagine what the gigantic discussion pages are like – there’s no attempt to serve additional content on demand, as we see in something like Google Images search.

Greenpeace website (http://www.greenpeace.org):

  • YSlow Grade: D(68/100)
  • Total HTTP Requests: 70 (WOW!)
  • Total Size: 1,095,500k (WOW! a 1-megabyte download)
  • Total Images: 27:
  • Total JavaScripts: 23 (WOW!)
  • Total CSS imports: 6

Geez. No script compression, JavaScripts in wrong location, no combined, no Expires headers, even a couple of images resized in the html source. Forget a Hummer – these guys are driving to the eco-rally in a “gallons per mile” tank. There are some features indicating highly professional design (the loading ‘waterfall’ goes down at a steep angle), but default libraries like JQuery are set to quickly expire – possibly a default .htaccess again. And it’s big.

The Living Principles, sustainable design, (http://www.livingprinciples.org)

  • YSlow Grade: D(64/100)
  • Total HTTP Requests: 155 (WOW WOW WOW!)
  • Total Size: 1,513,000k (50% over the 2012 web average)
  • Total Images: 90
  • Total JavaScripts: 34
  • Total CSS Imports: 23

Sheez. No Expires headers, CSS NOT AT TOP, JavaScript NOT AT BOTTOM, inline images scaled in HTML. 5 Iframes. This site is a development-only. It sends one message and parties till dawn with user’s download times, bandwidth, and energy consumption needed to deliver the green message. The collective good of the Internet is not served here.

A few more sites to prove my Point – you can see a chart of about 170 eco-websites at a more recent post.

Sierra Clubhttp://www.sierraclub.org – “D”, 1500kb, 40 images, 2 iFrames, 11 separate CSS images. The JavaScript alone is over 1000kb.

Ecorazzihttp://www.ecorazzi.com – “D”, 1859kb, 51 external JavaScripts, 11 extenal CSS. No CSS sprites, bleh.

Mother Nature Networkhttp://mnn.com/lifestyle – “F”, 1800kb, no compression, 43 JavaScripts. 40 CSS (WOW), 15 iFrames (YEOW!). Images and CSS images are legion (77), but their total size is only 400k of the 1800. The JavaScript is approaching 1mb, with no compression, headers, you get the picture.

Earth Rangerhttp://www.earthrangers.com – “C” 2582kb, 12 javascripts, 36 images adding up to 1800k, 10 CSS backgrounds adding up to 700k.

World Greenhttp://www.worldgreen.org – “D” – small footprint (507kb), but way to many separated CSS images, no compression, no Expires headers

Environmental News Networkhttp://www.enn.com – “D” – footprint under the Internet average (600kb) 30 JavaScripts, 29 images

Earth Dayhttp://earthday.org – “C”, but almost 3000kb in download! 269 images (YEOW) – someone need to check how they created their slidehow!

National Audubon Society – http://www.audubon.org/ – 2000kb, 0ver 100 images total, 400k JavaScript, and iFrame (boo!), and 9 “undefined” thing-eys that are probably tripping the web browsers up.

To be fair, most eco-blogs are much better, but this is due to the blog software. And some sites really have been optimized for sustainable use of the web. Here are some that do better than the unsustainable average.

Nature Conservancy  – http://www.nature.org – “C”, 1000kb,  82 HTTP requests, 14 JavaScript, 3Iframe (oops!), 60 total images.

World Wildlife Fundhttp://wwf.panda.org – “C” – 100kb, not too many HTTP requests.

renourish, sustainable graphic design http://www.re-nourish.com

  • YSlow Grade: C (72/100)
  • Total HTTP Requests: 50
  • Total Size: 333,400k (pretty good, 1/3 the others)
  • Total Images: 24
  • Total JavaScripts: 18
  • Total CSS imports: 5

Another reasonable site: GoodGuide – http://www.goodguide.com

A nice Web 2.0 look at about 1/3 the cost of the other sites above. Needs Expires headers, checking to ensure that all CSS is loaded in the head region.

What’s the difference? Compare the DESIGN of the decent sites to the not-so-decent ones. The bad sites were designed by designers who don’t really understand the web as a medium. In general, they don’t apply principles of responsive design, progressive enhancement, “mobile first”, and other sustainability design goals. They don’t do elementary things like make CSS sprites. This is not engineering. If “the medium is the message”, what is the medium saying?

As Nate Shredoff says…

Design is the problem.

1 Comment

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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