The Case for Respect
Very frequently, I see young designers (sometimes even seasoned designers) showcasing their design in mobile/tablet/desktop mockups and claim it fully responsive, however, all designers should understand that “responsive” means more than just an opinionated set of breakpoints. The year is 2022, web technologies have advanced so much that designers and developers should be able to create great HCI (Human-Centered Interaction) that will play nicely with user preferences. This post will serve as a basic checklist for designers to respect The User.
✅ Respect reduced motion
Turn off animations and transitions when user has this setting enabled. Motion can cause motion sickness for some people (in some cases, the effect is severe) and huge distraction for people with ADHD. Make sure your design works with elegant animations and as a static layout.
Dev Tip: developers can use a simple CSS media query—@media (prefers-reduced-motion: reduce)
—to detect this.
✅ Respect browser font-size
Don’t use absolute values such as pixel values for font-size. Absolute values are a roadblock for text zooming and browser font-size setting. Let developers know that you are limited by the design tools (Figma, Adobe XD, InVision, etc.) which only work with absolute values. Developers must convert pixel to relative values like %
, rem
, em
.
Dev Tip: developers should always use a %
value on the root level. They can even use CSS clamp()
to create fluid typography.
✅ Respect dark mode
Many people don’t use dark mode because it looks hip. They actually do it for legibility. Consider having your design in both light and dark mode. This does not mean simply inverting the colors (although that can work sometimes) in dark mode, you can get very creative with this and utilize a wide range of brand colors.
Dev Tip: developers can use a simple CSS media query—@media (prefers-color-scheme: dark)
—to detect if the user has enabled dark mode.
✅ Respect hover and focus
Not everybody uses a mouse or trackpad. Hover and focus state design will help with indicating all interactive elements, regardless of what device the user is equipped with.
Dev Tip: developers can use CSS pseudo elements—:focus
, :focus-within
, and :focus-visible
—to style focus state, and media query—@media (hover: hover)
—to detect if the user is equipped with a device that has hover.
✅ Respect semantics
Write semantic HTML rather than thousands of <div>
s. Accessibility is free when websites are built with semantic HTML (screen readers have a wide range of navigational modes, and semantics enhances the user experience greatly). Nobody wants just eye candy that is not usable, so ensure developers are executing your beautiful design properly in the code.
Dev Tip: developers, please just learn HTML.
👉 Further Considerations
Wait, we are not done yet. There are a lot more user preferences to cover. Perhaps I will write about them when I am more experienced with the techniques.
- High contrast mode
- Reduced transparency
- Browser reader mode
- Right to left language