The document provides 7 tips for sustainable UX design that reduce the environmental impact of websites. The tips are to streamline user journeys, use efficient images through techniques like smaller file sizes and vector/CSS images, use less and optimized video, utilize system fonts, optimize custom fonts, limit animations and transforms, and use low energy colors on OLED screens. Benefits include shorter user journeys, better performance, SEO, accessibility, and reduced energy usage and emissions. Downsides are it requires attention to detail. The document promotes sustainable web design principles.

1. Sustainable UX
for everyone
Tom Greenwood
@eatwholegrain

2. Internet emissions are huge

3. WebsiteCarbon.com

4. Websites use electricity in
Data centres Transmission
networks
End user devices

5. 7 sustainable UX
tips

6. #1 - Streamline user journeys
Home
ServicesAbout Us
Services History UX Development
UX Development

7. #2 - Efficient Images
● Use less images
● Use vectors and CSS instead of photos
● Design the smallest version of your photos

8. 1.2MB JPEG
1280 x 800

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. 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. 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. CSS overlay effects
67kb WebP at 96% quality67kb WebP at 96% quality

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. #4 - System Fonts
Use system fonts
They are free!

15. #5 - Optimise
custom fonts
Example: Inter UI
● TTF files
● 2192 characters
● 39 languages
● 9 weights
● ~300kb per weight

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. #6 - Go easy on the icing
1. Animations
2. Transforms
3. Masks
4. Tracking!
Experiment and learn

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. 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. Sustainable Web
Manifesto
Read and sign at:
www.sustainablewebmanifesto.com
tom@wholegraindigital.com @eatwholegrain
www.wholegraindigital.com