Planet Friendly Digital Design

The slide deck I used to deliver a talk to introduce the subject of the internet having an environmental impact, and what UX specialists and designers can do, along with a run a workshop on the subject

Transcript

1. Planet friendly Digital Design Chris Adams @mrchrisadams productscience.co.uk
2. 2. 30m: Principles of Design for Sustainability 3. 50m: Trying it out yourself, then discussion 1. ~5m: Introduction, and a chance to avoid FOMO
3. Who am I? Chris Adams - @mrchrisadams environmentally focussed web generalist
4. Who am I? Designer, then Developer, then Sysadmin, then Developer again, then Product Manager, then UX Consultant, then User Researcher. Now (nearly) ALL OF THE ABOVE.
5. (Previously relevant) Work A.M.E.E. - Avoid Mass Extinction Engine Loco2 - Low carbon travel
6. discover.amee.com
7. amee.com
8. loco2.com
9. Cleanweb London - James Johnston practice pitching Open Utility
10. Cleanweb London - what James was seeing
11. Cleanweb Berlin - putting ideas to practice
12. Cleanweb Berlin - putting ideas to practice
13. oreil.ly/sustainability Design for Sustainability
14. Why would I care?
15. Our activity is changing the planet
16. xkcd.com/1732/ Sorry online viewers, you can’t see this video. I just shows me scrolling down the screen narrating as I go. Not much missed TBH.
17. worrydream.com/ClimateChange/ Sorry online viewers, you can’t see this video. It just shows me moving the widget around. Give it a go yourself. It’s loads of (terrifying, depressing) fun.
18. What can I do? I work on the web. And anyway, the web’s green right?
20. Webs & apps use servers. Servers need electricity. How much electricity?
21. Power quote
22. Power quote https://www.flickr.com/photos/27148401@N06/14783421247/
23. Nearly one billion tonnes CO2 and rising (More than Poland, and growing faster) Source: Greenpeace Click Clean Report
24. What can we do?
25. oreil.ly/sustainability Design for Sustainability
26. How we do this for physical products
27. How we might do this for digital products — Dr. Pete Markiewicz
28. FINDABILITY USABILITY PERFORMANCE GREEN HOSTING
29. USABILITY
30. Usability Responsive design and mobile first Content and display patterns Testing content before publishing Build feedback into user journeys Dark patterns and sustainable choices
31. http://patternlab.io/ Sorry online viewers, you can’t see this video, but it is available at patternlab.io
32. http://danielmall.com/articles/content-display-patterns/ Sorry online viewers, same again here. It IS available at the link below though.
33. https://2016.agilecontentconf.com/
34. https://2016.agilecontentconf.com/
35. Sustainable choices
36. darkpatterns.org
37. PERFORMANCE OPTIMIZATION
38. Performance Performance budgets Compression Appropriate media for devices Caching CDNs
39. https://www.soasta.com/blog/page-bloat-2015-web-performance-monitoring/
40. https://whatdoesmysitecost.com/
41. http://www.performancebudget.io/
42. http://www.performancebudget.io/
43. https://speedcurve.com/
44. The best, greenest request is one you don’t make
45. FINDABILITY
46. Findability Content experiments - have a feedback loop Content Audits - keep, kill, or merge Content first design - designing with real data User language vs your language - i.e search On-site Search - reveals gaps in content, ux issues
47. GREEN HOSTING
48. Green hosting Efficiency isn’t the same as sustainable Green Web Foundation Finding a host
49. http://www.thegreenwebfoundation.org/
50. http://www.thegreenwebfoundation.org/
51. https://www.instagram.com/strangeanimals_/ http://www.greenpeace.org/usa/global-warming/click-clean/
52. aws.amazon.com/about-aws/sustainability/
53. Stuff you can do tomorrow, for real
54. ecograder.com
55. sustainableux.com
56. oreil.ly/sustainability Design for Sustainability
57. You can make beautiful, lightweight green sites
58. 500k http://2015.dconstruct.org/
59. 1.2mb https://serving.green/
60. @mrchrisadams Thanks! Any questions? Book: oreil.ly/sustainability (50% discount with link above) Websites: sustainablewebdesign.org ecograder.org
 sustainableux.com
61. Worksheet exercise Now it’s your turn
62. Now it’s your turn Take a worksheet Assign roles Start task Regroup in 15mins
63. Present back, and time for questions
64. Fishbowl 5 seats 4 people sitting, 1 empty chair, always Sit in a chair to ask a question, or say something. You can only leave when someone else sits in an empty chair.