Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Planet Friendly Digital Design

Chris Adams
November 22, 2016

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

Chris Adams

November 22, 2016

More Decks by Chris Adams

Other Decks in Education


  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

  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?
  19. None
  20. Webs & apps use servers. Servers need electricity. How much

  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


  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


  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


  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

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