An inclusive web: using preference media queries to make your sites for everyone

UX Y'all 2021 Session with Kilian Valkhof

Transcript

1. An inclusive web - UX Ya’ll 2021 Kilian Valkhof An inclusive web: Using preference media queries to make your sites for everyone Kilian Valkhof
2. An inclusive web - UX Ya’ll 2021 Kilian Valkhof Responsive design The way a website adapts to screen sizes by reflowing and repositioning content as the available space allows
3. An inclusive web - UX Ya’ll 2021 Kilian Valkhof Responsive websites The way a website adapts to screen sizes by reflowing and repositioning content as the available space allows The way a websites adapts to user preferences, providing a better experience for each individual user
4. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User preferences forced-colors prefers-color-scheme prefers-reduced-motion prefers-reduced-transparancy prefers-contrast inverted-colors
5. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User preferences: prefers-color-scheme
6. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User preferences: prefers-color-scheme
7. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User preferences: prefers-color-scheme
8. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User preferences: prefers-color-scheme
9. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User preferences: prefers-reduced-motion
10. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User preferences: prefers-reduced-motion
11. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User preferences: prefers-reduced-motion
12. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User preferences: prefers-reduced-motion
13. An inclusive web - UX Ya’ll 2021 Kilian Valkhof Here be dragons 🐉
14. An inclusive web - UX Ya’ll 2021 Kilian Valkhof Network conditions: prefers-reduced-data
15. An inclusive web - UX Ya’ll 2021 Kilian Valkhof Network conditions: prefers-reduced-data
16. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User preferences: prefers-contrast
17. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User preferences: prefers-reduced-transparency
18. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User preferences: prefers-reduced-transparency
19. An inclusive web - UX Ya’ll 2021 Kilian Valkhof Inverted colors and forced colors
20. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User preferences: inverted-colors https://a11yproject.com/posts/operating-system-and-browser-accessibility-display-modes/
21. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User preferences: inverted-colors
22. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User preferences: forced-colors https://adrianroselli.com/2017/11/os-high-contrast-versus-inverted-colors.html
23. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User preferences: forced-colors
24. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User preferences: forced-colors CanvasText Canvas HighlightText Highlight ButtonText ButtonFace LinkText GrayText text content background selected text selected text background button’s text button background link text color disabled text
25. An inclusive web - UX Ya’ll 2021 Kilian Valkhof User preferences forced-colors prefers-contrast inverted-colors
26. An inclusive web - UX Ya’ll 2021 Kilian Valkhof polypane.com
27. An inclusive web - UX Ya’ll 2021 Kilian Valkhof Kilian Valkhof kilianvalkhof.com - @kilianvalkhof - polypane.com 👋 more: bit.ly/all-media-queries