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.

WebVisions 2013: Sustainable Web Design

1,637 views

Published on

This presentation, given at WebVisions Chicago 2013, covers how being a B Corp led Mightybytes to define an evolving set of practices for creating sustainable websites and build a free software tool called Ecograder that assesses website sustainability.

More info and a free ebook here: http://www.mightybytes.com/sustyweb

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

WebVisions 2013: Sustainable Web Design

  1. 1. a presentation by September 26, 2013 WebVisions Chicago Tim Frick @timfrick Sustainable Web Design
  2. 2. Mightybytes is a Certified B Corporation B Corps use the power of business to solve social & environmental problems
  3. 3. The B Corp community
  4. 4. B Corps improve quality of life in their communities more likely to donate at least 10% of profits to charity68%
  5. 5. B Corps improve quality of life in their communities more likely to use on-site renewable energy47%
  6. 6. B Corps improve quality of life in their communities more likely to use suppliers from low-income communities18%
  7. 7. B Corps improve quality of life in their communities more likely to give paid professional development opportunities 4x
  8. 8. more likely to cover at least some health insurance costs for employees 55% B Corps create higher quality jobs for their workers
  9. 9. more likely to give bonuses to non-executive members45% B Corps create higher quality jobs for their workers
  10. 10. more likely to have women & minorities in management28% B Corps create higher quality jobs for their workers
  11. 11. more likely to give employees at least 20 hrs per year time off to volunteer in their community 2.5x B Corps create higher quality jobs for their workers
  12. 12. More likely to offer products or services that directly affect an environmental issue 2.5x B Corps are better for the planet
  13. 13. The internet is not a green medium • Pixels are powered by electricity • Most electricity sources are non-renewable • LOTS of people use the internet Three primary reasons:
  14. 14. “A recent 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.” Pixels are powered by electricity The internet is not a green medium Source: US Energy Information Administration
  15. 15. Pixels are powered by electricity "When you think of the meteoric growth of the the internet, you can quickly see that there is an alarming problem ahead of us: the internet is on track to consume 20% of the world's power...At [its] current rate of growth it will get there within ten years." - Breakpoint, Jeff Stibel The internet is not a green medium
  16. 16. The internet is not a green medium Pixels are powered by electricity • This could potentially lead to energy grid problems across the planet • Significant contributor to the already critical global warming situation
  17. 17. 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. Most energy sources are not renewable The internet is not a green medium Source: US Energy Information Administration
  18. 18. The world’s data centers will 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. LOTS of people use the internet The internet is not a green medium Source: New York Times
  19. 19. LOTS of people use the internet The internet is not a green medium Source: A List Apart, James Christie “Right now, at least 332 million tons of CO2—40 percent of the internet’s total footprint—falls at least partially under the responsibility of people who make the web.”
  20. 20. How can we make the web greener? A set of practices defining how to build websites that meet present and future performance and energy efficiency standards Sustainable Web Design
  21. 21. Sustainable Web Design Core Components
  22. 22. Sustainable Web Design Challenge Reduce the impact of hosting websites
  23. 23. Sustainable Web Design Solution Green Hosting • Data centers powered by 100% renewable energy • Carbon offsets (RECs) if not near renewable sources • Planting trees? Nice idea, but no! • Examples: • Canvas Dreams • ASIO.net • A Small Orange • Green House Data • Host Papa • 1 & 1 Internet
  24. 24. Sustainable Web Design Challenge Source: Computer Hope Make content easier to find, reducing resources required to power search
  25. 25. Sustainable Web Design Solution Findability • Quality content & inbound links to your site • Site is easy to use, navigate, & understand • Use clear hierarchy of information & text links • Avoid duplicate content • Use 301 redirects when needed
  26. 26. Sustainable Web Design Challenge Streamline user experience, reducing resources needed to power applications Source: Mashable
  27. 27. Sustainable Web Design Solution User Experience & Design • Mobile first (add styles as the viewport grows) • Avoid Flash or other bandwidth-intensive technologies • Use CSS sprites • Avoid image carousels when possible • Compress/optimize images • Minify scripts & CSS
  28. 28. Sustainable Web Design Challenge Optimize website performance, reducing impact Source: WebSiteOptimization
  29. 29. Sustainable Web Design Solution Performance Optimization • Follow best practices for website performance • Google PageSpeed Insights • Yahoo! Performance Rules • Limit share buttons & social plugins • Enable caching
  30. 30. So What? Don’t I do this stuff already? If we did . . . • At 1.4MB/page average, web pages wouldn’t be 15x the size they were in 2003. • The average page wouldn’t have more than 100 HTTP requests. • Alexa’s top 2,000 retailer sites wouldn’t take an average of seven seconds to load (five more seconds than acceptable to users). Source: A List Apart, James Christie
  31. 31. The Challenge How can we increase awareness of web sustainability? • Help site owners and designers better understand site impact • Share ideas: • W3C Forum on SWD • LinkedIn Groups, etc. • Build sustainability tools for web designers/developers
  32. 32. 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. Ecograder
  33. 33. How it works: 1. Input your URL 2. Crawls your website 3. Assesses its sustainability level based on several key factors 4. Produces a score and report for site improvements Ecograder
  34. 34. What it grades: Ecograder
  35. 35. Handy dandy reports Ecograder
  36. 36. Ecograder Who it’s for: • Web designers & developers • Marketing managers & website owners • Environmental nonprofits • Any environmentally conscious person who works on websites
  37. 37. Resources eBooks, blog posts, tutorials, checklists, stuff! Get it all here: mightybytes.com/sustyweb
  38. 38. Thank You a presentation by Tim Frick @timfrick

×