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.

Designing for Sustainability - WebVisions 2016

406 views

Published on

Presentation regarding sustainable web design given during WebVisions Chicago 2016 conference on September 23rd at the Gene Siskel Film Center. It covers a range of topics involving making the web more sustainable and points out issues that we need to solve in order to improve our digital ecosystem to keep our natural ecosystem green and thriving.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Designing for Sustainability - WebVisions 2016

  1. 1. DESIGNING FOR SUSTAINABILITY @timfrick WebVisions Sept 23, 2016
  2. 2. 90% OF ALL DATA WAS CREATED WITHIN THE LAST 12 MONTHS. — Salesforce
  3. 3. STREAMING MEDIA SERVICES NOW ACCOUNT FOR OVER 70% OF PEAK NORTH AMERICAN INTERNET TRAFFIC. — Sandvine
  4. 4. VIRTUAL REALITY USES 20X MORE BANDWIDTH THAN HD VIDEO.
  5. 5. 3.2 BILLION PEOPLE ARE ONLINE 20-50 BILLION DEVICES BY 2020
  6. 6. RENEWABLE ENERGY IN U.S. LESS THAN 15%.
  7. 7. JEVONS PARADOX AVAILABILITY DRIVES CONSUMPTION A SINGLE TWEET .02g of CO2 — Tweetfarts (not to scale) 500M TWEETS/DAY 10 Metric Tons of CO2
  8. 8. ENTIRE INTERNET: NEARLY 1 BILLION TONS OF 
 ANNUAL CO2 AND RISING
  9. 9. SYSTEMS THINKING CONSIDERING THE ENTIRE LIFE CYCLE OF A DIGITAL PRODUCT OR SERVICE
  10. 10. U.S. E-WASTE FOR ONE YEAR: 1.15M TRUCKS FULL
  11. 11. — Dr. Pete Markiewicz
  12. 12. WHAT CAN WE DO? DESIGN FOR SUSTAINABILITY
  13. 13. EFFICIENCY RENEWABLE ENERGY
  14. 14. FINDABILITY USABILITY PERFORMANCE GREEN HOSTING
  15. 15. FINDABILITY
  16. 16. 6 CONTENT STRATEGY/SEO TIPS 1. Answer questions with great content & clear CTAs. 2. Optimize content, tags, etc. for search phrases. 3. SEO practices to increase page/domain authority. 4. Make navigation & labels clear and obvious. 5. Add search on site. 6. Streamline your process: lean/agile, collaboration.
  17. 17. USABILITY
  18. 18. 6 UX DESIGN TIPS 1. Mobile first, responsive, etc. 2. Optimize design assets for performance. 3. Avoid dark patterns. (darkpatterns.org) 4. Help users make more sustainable choices. 5.Test design decisions via user & A/B testing, etc. 6. Lean/agile workflows: design/dev teams collaborate.
  19. 19. PERFORMANCE OPTIMIZATION
  20. 20. 6 PERFORMANCE OPTIMIZATION TIPS 1. Create a page weight budget. 2. Follow Google/Yahoo! performance guidelines. 3. Use W3C web standards. 4. Accessibility: 508-compliance at the very least. 5. Optimize files: scripts, HTTP requests, etc. 6. Lean/agile workflows: design/dev teams collaborate.
  21. 21. THE CAVEAT: HTTP2
  22. 22. COULD BE SLOWER WITH HTTP2 1. Concatenating CSS and JavaScript files. 2. Embedded image data. 3. Domain Sharding. 4. CSS Sprites.
  23. 23. GREEN HOSTING
  24. 24. GREEN HOSTING SO MANY “GREEN” HOSTS But are they any good?
  25. 25. GREEN HOSTING A SIX YEAR JOURNEY
  26. 26. GREEN HOSTING LACK OF TRANSPARENCY Plus 50+ others…
  27. 27. THE LARGEST INVESTOR IN 
 RENEWABLE ENERGY ON THE PLANET.
  28. 28. EFFICIENCY RENEWABLE ENERGY
  29. 29. 3 Years, nearly 70,000 sites crawled
  30. 30. ECOGRADER REPORTS
  31. 31. ECOGRADER REPORTS
  32. 32. EFFICIENCY RENEWABLE ENERGY Insert Ecograder infographic findability stat
  33. 33. EFFICIENCY RENEWABLE ENERGY Insert Ecograder infographic usability stat
  34. 34. EFFICIENCY RENEWABLE ENERGY Insert Ecograder infographic wpo stat
  35. 35. EFFICIENCY RENEWABLE ENERGY Insert Ecograder infographic hosting stat
  36. 36. ACTION ITEMS SOME THINGS WE CAN DO
  37. 37. GET A GREEN WEB HOST
  38. 38. THE GREEN WEB FOUNDATION Find a green web host: thegreenwebfoundation.org
  39. 39. RAISE AWARENESS
  40. 40. EFFICIENCY — Agency Spotter
  41. 41. ASK COMPANIES TO SWITCH LET THEM KNOW CLEAN ENERGY 
 IS A CUSTOMER PRIORITY
  42. 42. CLICK CLEAN SCORECARD
  43. 43. ACTUAL WEBSITE EMISSIONS: HOW TO CALCULATE THEM?
  44. 44. CLEAN UP DEVICE SUPPLY CHAINS
  45. 45. MORE RESOURCES LINKS, BOOKS, SOFTWARE, ETC.
  46. 46. CLICK CLEAN REPORT & SCORECARD clickclean.org
  47. 47. SUSTAINABLE WEB DESIGN BLOG sustainablewebdesign.org
  48. 48. SERVING.GREEN
  49. 49. SUSTAINABLE UX sustainableux.com
  50. 50. bcorporation.net
  51. 51. DESIGNING FOR SUSTAINABILITY
  52. 52. THANK YOU mightybytes.com @timfrick

×