internet4000/radio4000

Use static images for users that prefer "reduced motion"

oskarrough opened this issue · 3 comments

oskarrough commented

The reduced-motion media query is something users can control on the OS-level. This article explains how to use it, like any other media query, inside the <picture> element to show a static image instead of a gif: http://bradfrost.com/blog/post/reducing-motion-with-the-picture-element/

This is pretty neat for performance and we already have the picture element in place in https://github.com/internet4000/radio4000/blob/master/app/components/channel-cover/template.hbs

nellarro commented

@oskarrough. I'd definitely love to take this on! Can you assign it to me?

  • ❤️1
oskarrough commented

@nellarro with pleasure, thank you! Let us know if we can assist in any way.

The radio cards we have everywhere on the site is called channel-card. Inside it there is a channel-cover component, which contains all the responsive image logic. We'd have to implement the media query here. We already skip gifs for screens below 500px. Maybe modify this media query to include reduced motion as well?

nellarro commented

Thanks so much! I'll get to working on it ASAP :)