Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sustainable Web Design

3,990 views

Published on

A presentation on sustainable web design and its core components:
Green Hosting
Findability
User Experience and Design
Performance Optimization

Published in: Technology, Business
  • Be the first to comment

Sustainable Web Design

  1. 1. Sustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development MeetupChicago Interactive Design & Development MeetupJune 18, 2013Wednesday, June 19, 13
  2. 2. Mightybytes is an Illinois B CorporationSustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development MeetupWednesday, June 19, 13
  3. 3. Sustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development MeetupBut why?• Pixels are powered by electricity.• Most electricity sources are non-renewable.• LOTS of people use the internet.The Internet is not a green mediumWednesday, June 19, 13
  4. 4. “A new report by The New York Times on the internets energy consumptionestimates that data centers worldwide use 30 billion watts of electricity, includingas much as 10 billion watts in the United States alone.” Source: US EnergyInformation AdministrationThe Internet is not a green mediumSustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development MeetupPixels are powered by electricity.Wednesday, June 19, 13
  5. 5. As of 2011, only about 19% of electricity generated in the world and 12.7% of energygenerated in the United States comes from renewable resources. Source: USEnergy Information AdministrationThe Internet is not a green mediumSustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development MeetupMost electricity sources are non-renewable.Wednesday, June 19, 13
  6. 6. The world’s data centers are projected to surpass the airline industry as agreenhouse gas polluter by 2020, according to a study by McKinsey & Co. Overthat time, the carbon dioxide emissions attributable to the electricity consumed byfast expanding data centers will rise fourfold. Source: New York TimesSustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development MeetupLOTS of people use the internet.The Internet is not a green mediumWednesday, June 19, 13
  7. 7. Human activities have contributed to the highest CO2 levels in 650,000 years, andsurfing, clicking, & streaming isn’t exempt. Source: SteriaThe Internet is not a green mediumSustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development MeetupImage source: Metro Transportation Library & ArchiveWednesday, June 19, 13
  8. 8. How can we make the web greener?Sustainable Web Design:A set of practices that define how to build websites thatmeet present and future performance and energyefficiency standards.Sustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development MeetupWednesday, June 19, 13
  9. 9. Sustainable Web DesignCore Components:• Green Hosting• Findability• User Experience and Design• Performance OptimizationSustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development MeetupWednesday, June 19, 13
  10. 10. Sustainable Web DesignGreen Hosting:• Data centers powered by 100% renewable energy• Carbon offsets if not near renewable sources• Planting Trees? Nice idea, but no!• Examples:• Canvas Dreams• ASIO.net• A Small Orange• PairSustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development Meetup• Green House Data• Host Papa• 1&1 Internet• DreamhostWednesday, June 19, 13
  11. 11. 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 techniquesSustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development MeetupUseful resource: MozWednesday, June 19, 13
  12. 12. 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 techniquesSustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development MeetupWednesday, June 19, 13
  13. 13. 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 techniquesSustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development MeetupWednesday, June 19, 13
  14. 14. 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.Sustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development MeetupWednesday, June 19, 13
  15. 15. EcoGrader (www.ecograder.com) is a free tool that measures the sustainability ofyour website and provides a general roadmap for making improvements anddecreasing greenhouse gas (GHG) emissions.Meet EcoGraderSustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development MeetupWednesday, June 19, 13
  16. 16. How it works:EcoGrader1. Input your URL2. Crawls your website3. Assesses its sustainabilitylevel based on several keyfactors4. Produces a score anda report for siteimprovementsSustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development MeetupWednesday, June 19, 13
  17. 17. What it grades:EcoGrader• Green hosting• Findability• Design & User Experience• Flash Avoided• Mobile Optimized• Performance• PageSpeed score• HTTP requestsSustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development MeetupWednesday, June 19, 13
  18. 18. Who it’s for:• Web designers & developers• Marketing managers and website owners• Environmental nonprofits• Any environmentally conscious person who workson websitesEcoGraderSustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development MeetupWednesday, June 19, 13
  19. 19. Grading the Fortune 500 websites. (fastcoexist.com)EcoGraderSustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development MeetupWho it could benefit:Wednesday, June 19, 13
  20. 20. Case StudyMattel:How it scored:• 25/100 EcoGrader• Non-sustainable hosting• Not mobile optimized• Flash on homepage• Nearly 100 HTTP requestsWednesday, June 19, 13
  21. 21. Case StudyCompassX Strategy:How it scored:• 88/100 EcoGrader• Green hosting• Mobile optimized• Avoids Flash• Zippy page speed• Low number of requestsWednesday, June 19, 13
  22. 22. EcoGrader (Pro?)Sustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development MeetupWhere its going:• More metrics graded• Analytics dashboard: track your progress• Carbon offset resourceWednesday, June 19, 13
  23. 23. • 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/ResourcesSustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development MeetupWednesday, June 19, 13
  24. 24. Sustainable Web Design Presented by Julian Rockwood and Tim FrickChicago Interactive Design and Development MeetupThank YouThank You@timfrick @julianrockfishWednesday, June 19, 13

×