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.

Sustainable UX For Everyone

254 views

Published on

Tom Greenwood, co-founder of Wholegrain Digital

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Sustainable UX For Everyone

  1. 1. Sustainable UX for everyone Tom Greenwood @eatwholegrain
  2. 2. Internet emissions are huge
  3. 3. WebsiteCarbon.com
  4. 4. Websites use electricity in Data centres Transmission networks End user devices
  5. 5. 7 sustainable UX tips
  6. 6. #1 - Streamline user journeys Home ServicesAbout Us Services History UX Development UX Development
  7. 7. #2 - Efficient Images ● Use less images ● Use vectors and CSS instead of photos ● Design the smallest version of your photos
  8. 8. 1.2MB JPEG 1280 x 800
  9. 9. 640 x 400px 360kb JPEG 70% smaller than 1280 x 800px (1.2MB) 640 x 400px with blurred edges 192kb JPEG 47% smaller than the same image without blur
  10. 10. 640 x 400px with blurred edges 192kb JPEG 47% smaller than the same image without blur 640 x 400px B&W with blurred edges 129kb JPEG 33% smaller than the same image in colour 64% smaller than original at same size
  11. 11. 640 x 400px with blurred edges 192kb JPEG 85kb WebP at 96% quality 56% smaller than JPEG 76% smaller than original at same size 640 x 400px B&W with blurred edges 129kb JPEG 67kb WebP at 96% quality 48% smaller than the same image in colour 81% smaller than original at same size 94% smaller than original full screen image Convert photos from JPEG to WebP
  12. 12. CSS overlay effects 67kb WebP at 96% quality67kb WebP at 96% quality
  13. 13. #3 - Less video 1. Avoid autoplay (opt-in is better user experience) 2. Question whether video is the best content format 3. Reduce video length 4. Avoid animated GIFs 5. Use MPEG4 format
  14. 14. #4 - System Fonts Use system fonts They are free!
  15. 15. #5 - Optimise custom fonts Example: Inter UI ● TTF files ● 2192 characters ● 39 languages ● 9 weights ● ~300kb per weight
  16. 16. 1. Reduce font weight & style variants 2. Use the most efficient file format (e.g. WOFF2 not TTF) 3. Subset fonts Format Characters Languages Size Percentage Original Inter UI TTF 2192 39 298kb 100% Subset Inter UI TTF 98 2 12kb 4% Subset Inter UI WOFF2 98 2 7kb 2.3% 97.7% smaller with no difference to the user!
  17. 17. #6 - Go easy on the icing 1. Animations 2. Transforms 3. Masks 4. Tracking! Experiment and learn
  18. 18. #7 - Low energy colours Only relevant on OLED screens WHITE Highest energy BLACK No energy DARK Low energy BLUE High energy ~25% more than green and red
  19. 19. Benefits 1. Shorter user journeys 2. Better web performance 3. Better SEO 4. Better accessibility 5. Less energy and emissions Downsides 1. It needs attention to detail Sustainable UX
  20. 20. Sustainable Web Manifesto Read and sign at: www.sustainablewebmanifesto.com tom@wholegraindigital.com @eatwholegrain www.wholegraindigital.com

×