Responsive Design for Motion | Responsive Web Design

Responsive Design for Motion

A great overview on how you can introduce one of the new media query recommendations — reduce motion (currently available in Webkit). This is where a user might choose to switch off animation effects, or ‘prefers reduced motion’… very common for a number of reasons (including medical reasons).

WebKit Open Source Web Browser Logo

WebKit now supports the prefers-reduced-motion media feature, part of CSS Media Queries Level 5, User Preferences. The feature can be used in a CSS @media block or through the window.matchMedia() interface in JavaScript. Web designers and developers can use this feature to serve alternate animations that avoid motion sickness triggers experienced by some site visitors.

An excerpt from Responsive Design for Motion

View original article

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.