sustainable web design

Sustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development Meetup

Chicago Interactive Design & Development MeetupJune 18, 2013

Wednesday, June 19, 13

Mightybytes is an Illinois B Corporation




But why?• Pixels are powered by electricity.• Most electricity sources are non-renewable.• LOTS of people use the internet.

The Internet is not a green medium


“A new report by The New York Times on the internet's energy consumption estimates that data centers worldwide use 30 billion watts of electricity, including as much as 10 billion watts in the United States alone.” Source: US Energy Information Administration



Pixels are powered by electricity.


As of 2011, only about 19% of electricity generated in the world and 12.7% of energy generated in the United States comes from renewable resources. Source: US Energy Information Administration



Most electricity sources are non-renewable.


The world’s data centers are projected to surpass the airline industry as a greenhouse gas polluter by 2020, according to a study by McKinsey & Co. Over that time, the carbon dioxide emissions attributable to the electricity consumed by fast expanding data centers will rise fourfold. Source: New York Times


LOTS of people use the internet.



Human activities have contributed to the highest CO2 levels in 650,000 years, and surfing, clicking, & streaming isn’t exempt. Source: Steria



Image source: Metro Transportation Library & Archive


How can we make the web greener?Sustainable Web Design:A set of practices that define how to build websites that meet present and future performance and energy e!ciency standards.



Sustainable Web DesignCore Components: • Green Hosting• Findability• User Experience and Design• Performance Optimization



Sustainable Web DesignGreen Hosting:• Data centers powered by 100% renewable energy• Carbon o"sets if not near renewable sources • Planting Trees? Nice idea, but no!• Examples:

• Canvas Dreams• ASIO.net• A Small Orange• Pair


• Green House Data• Host Papa• 1&1 Internet• Dreamhost


Sustainable Web DesignFindability:• Quality content and inbound links to your site• Site is easy to use, navigate, and understand• Use clear hierarchy of information and text links • Avoids duplicate content• Use 301 redirects when needed• Many other techniques


Useful resource: Moz


Sustainable Web DesignUser Experience and Design:• Provide a streamlined experience to all users• Mobile First (add styles as the viewport grows)• Avoid Flash• Use CSS Sprites • Avoid image carousels• Compress/optimize images• Minify scripts and CSS• Many other techniques



Sustainable Web DesignPerformance Optimization:• Follow best practices for website performance• Google PageSpeed Insights• Yahoo! Performance Rules• Limit share buttons and social plugins• Enable caching• Many other techniques



The ChallengeHow can we increase awareness of web sustainability? • Help website owners better understand the impact.• Share ideas:

• Sustainable Web Design W3C Forum• Linkedin Groups, etc.

• Build sustainability tools for web designers/developers.



EcoGrader (www.ecograder.com) is a free tool that measures the sustainability of your website and provides a general roadmap for making improvements and decreasing greenhouse gas (GHG) emissions.

Meet EcoGrader



http://www.ecograder.com


How it works:

EcoGrader

1. Input your URL2. Crawls your website3. Assesses its sustainability

level based on several key factors

4. Produces a score and a report for site improvements



What it grades:

EcoGrader

• Green hosting• Findability• Design & User Experience

• Flash Avoided• Mobile Optimized

• Performance• PageSpeed score• HTTP requests



Who it’s for:• Web designers & developers• Marketing managers and website owners• Environmental nonprofits• Any environmentally conscious person who works

on websites

EcoGrader



Grading the Fortune 500 websites. (fastcoexist.com)

EcoGrader


Who it could benefit:




Case StudyMattel:

How it scored:• 25/100 EcoGrader• Non-sustainable hosting• Not mobile optimized• Flash on homepage• Nearly 100 HTTP requests


Case StudyCompassX Strategy:

How it scored:• 88/100 EcoGrader• Green hosting• Mobile optimized• Avoids Flash • Zippy page speed • Low number of requests


EcoGrader (Pro?)


Where its going:• More metrics graded• Analytics dashboard: track your progress• Carbon o"set resource


• Save the Planet Through Sustainable Web Design, Pete Markiewicz http://www.netmagazine.com/features/save-planet-through-sustainable-web-design

• Hack the Planet poster, James Christie http://jcux.co.uk/cleanux/ixd.html

• Mightybytes blog: http://www.mightybytes.com/blog/tags/tag/sustainablewebdesign/

• Sustainable Web Ecosystem Design, Greg O’Toole https://www.springer.com/computer/swe/book/978-1-4614-7713-6

• Power, Pollution, and The Internet http://www.nytimes.com/2012/09/23/technology/data-centers-waste-vast-amounts-of-energy-belying-industry-image.html?_r=0

• W3C Sustainable Web Forum http://www.w3.org/community/sustyweb/

• Sustainable Virtual Design Blog http://sustainablevirtualdesign.wordpress.com/

Resources



http://www.netmagazine.com/features/save-planet-through-sustainable-web-design






http://jcux.co.uk/cleanux/ixd.html

http://jcux.co.uk/cleanux/ixd.html

http://www.mightybytes.com/blog/tags/tag/sustainablewebdesign/




https://www.springer.com/computer/swe/book/978-1-4614-7713-6






http://www.nytimes.com/2012/09/23/technology/data-centers-waste-vast-amounts-of-energy-belying-industry-image.html?_r=0






http://www.w3.org/community/sustyweb/

http://www.w3.org/community/sustyweb/

http://sustainablevirtualdesign.wordpress.com/





Thank YouThank You

@timfrick @julianrockfish


sustainable web design

Technology