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.

1. DESIGNING FOR SUSTAINABILITY
@timfrick
WebVisions
Sept 23, 2016

4. 90% OF ALL DATA
WAS CREATED WITHIN THE LAST 12 MONTHS.
— Salesforce

5. STREAMING MEDIA SERVICES
NOW ACCOUNT FOR OVER 70% OF PEAK NORTH
AMERICAN INTERNET TRAFFIC.
— Sandvine

6. VIRTUAL REALITY
USES 20X MORE BANDWIDTH THAN HD VIDEO.

7. 3.2 BILLION PEOPLE ARE ONLINE
20-50 BILLION DEVICES BY 2020

9. RENEWABLE ENERGY IN U.S.
LESS THAN 15%.

10. JEVONS PARADOX
AVAILABILITY DRIVES CONSUMPTION
A SINGLE TWEET
.02g of CO2
— Tweetfarts (not to scale)
500M TWEETS/DAY
10 Metric Tons of CO2

11. ENTIRE INTERNET:
NEARLY 1 BILLION TONS OF
ANNUAL CO2 AND RISING

12. SYSTEMS THINKING
CONSIDERING THE ENTIRE LIFE CYCLE
OF A DIGITAL PRODUCT OR SERVICE

14. U.S. E-WASTE FOR ONE YEAR:
1.15M TRUCKS FULL

16. — Dr. Pete Markiewicz

17. WHAT CAN WE DO?
DESIGN FOR SUSTAINABILITY

18. EFFICIENCY RENEWABLE ENERGY

19. FINDABILITY USABILITY
PERFORMANCE GREEN HOSTING

20. FINDABILITY

21. 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.

22. USABILITY

23. 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.

24. PERFORMANCE OPTIMIZATION

25. 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.

26. THE CAVEAT:
HTTP2

27. COULD BE SLOWER WITH HTTP2
1. Concatenating CSS and JavaScript files.
2. Embedded image data.
3. Domain Sharding.
4. CSS Sprites.

28. GREEN HOSTING

29. GREEN HOSTING
SO MANY “GREEN” HOSTS
But are they any good?

30. GREEN HOSTING
A SIX YEAR JOURNEY

31. GREEN HOSTING
LACK OF TRANSPARENCY
Plus 50+ others…

32. THE LARGEST INVESTOR IN
RENEWABLE ENERGY ON THE PLANET.

33. EFFICIENCY RENEWABLE ENERGY

34. 3 Years, nearly 70,000 sites crawled

35. ECOGRADER REPORTS

36. ECOGRADER REPORTS

38. EFFICIENCY RENEWABLE ENERGY
Insert Ecograder infographic findability stat

39. EFFICIENCY RENEWABLE ENERGY
Insert Ecograder infographic usability stat

40. EFFICIENCY RENEWABLE ENERGY
Insert Ecograder infographic wpo stat

41. EFFICIENCY RENEWABLE ENERGY
Insert Ecograder infographic hosting stat

42. ACTION ITEMS
SOME THINGS WE CAN DO

43. GET A GREEN WEB HOST

44. THE GREEN WEB FOUNDATION
Find a green web host: thegreenwebfoundation.org

45. RAISE AWARENESS

46. EFFICIENCY
— Agency Spotter

47. ASK COMPANIES TO SWITCH
LET THEM KNOW CLEAN ENERGY
IS A CUSTOMER PRIORITY

48. CLICK CLEAN SCORECARD

51. ACTUAL WEBSITE EMISSIONS:
HOW TO CALCULATE THEM?

52. CLEAN UP DEVICE SUPPLY CHAINS

55. MORE RESOURCES
LINKS, BOOKS, SOFTWARE, ETC.

56. CLICK CLEAN REPORT & SCORECARD
clickclean.org

57. SUSTAINABLE WEB DESIGN BLOG
sustainablewebdesign.org

58. SERVING.GREEN

59. SUSTAINABLE UX
sustainableux.com

60. bcorporation.net

61. DESIGNING FOR SUSTAINABILITY

62. THANK YOU
mightybytes.com
@timfrick