prefers-reduced-data – CSS-Tricks

Instant Articles, Proprietary Syndication, and a Web Built on User Fidelity Preferences

Geoff Graham — Thu, 20 Oct 2022 19:59:46 +0000

I love it when there’s a sense of synergy in the blogosphere. First, I caught Nick Heer’s coverage of Meta ending support for Instant Articles, its proprietary format for stripped-down performant news articles. He also compares it to the similar demise of AMP, Google’s answer to Instant Articles.

Then I came across a new one from Chris Coyier where he goes on to discuss the big issue with proprietary models of content syndication, whether it’s Meta Instant Articles, Google AMP, or even Apple News:

[T]hat’s the job as a publisher: get your content out to as many people as possible. If syndicating into another format is where people are, it’s likely worth doing.
[…]
If you were a publisher and followed that welp, that’s just our job mentality to provide content wherever people are (which is awfully tempting), now you’re in 4-5 formats already, none of which are terribly “automatic”. And that’s not counting, ya know, video, audio, social media, and all the other stuff that has become content producers’ jobs.

If only we had some standard to solve content syndication in a sparse, performant way that doesn’t require the overhead of corporate-driven proprietary formats. Oh wait, we’ve had one forever:

Literally none of the big players I mentioned above were like just give us your RSS feed, which, looking back, is a little bananas. RSS solves many of the same problems they were trying to solve […].

Then there’s what Jim Nielsen shared about his work to create a reading experience on his personal blog that emphasizes a user’s preference the “fidelity” of content:

In other words, rather than going to text.npr.org when you want a lean experience, you always go to npr.org but you set your “fidelity preference” to “low”. In theory, this sends a header to NPR indicating you want a “low fidelity” version of the website, e.g. text-only.

So, now this is part of his blog’s user settings.

Oh my gosh, this a million times! How cool is it for a content-drive site (waves at CSS-Tricks) to not only give users the ability to decide how “rich” of an experience they want, but to do so in a way that leverages the power of HTML to make it happen. Jim’s implementation chugs out different versions of the same article on build:

.
├── index.html # default
├── _fidelity/
    ├── low/
    │    └── index.html # text-only
    └── med/
        └── index.html # minimal

Redirects can take care of things once the user makes a choice. Jim has ideas for how to improve the build process so that he doesn’t need to generate JSDOM documents for each article while performing extra work to strip stuff out. But this is a great idea and start!

Three articles within three days that all converge around the same idea, but with different angles, ideas, and solutions. Blogging is cool. (And so is RSS!)

Instant Articles, Proprietary Syndication, and a Web Built on User Fidelity Preferences originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Responsible, Conditional Loading

Chris Coyier — Fri, 25 Dec 2020 21:28:55 +0000

Over on the Polypane blog (there’s no byline but presumably it’s Kilian Valkhof (it is)), there is a great article, Creating websites with prefers-reduced-data, about the prefers-reduced-data media query. No browser support yet, but eventually you can use it in CSS to make choices that reduce data usage. From the article, here’s one example where you only load web fonts if the user hasn’t indicated a preference for low data usage:

@media (prefers-reduced-data: no-preference) {
  @font-face {
    font-family: 'Inter';
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    font-named-instance: 'Regular';
    src: url('Inter-roman.var.woff2') format('woff2');
  }
}

body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
               Segoe UI, Ubuntu, Roboto, Cantarell, Noto Sans, sans-serif,
               'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

That’s a nice pattern. It’s the same spirit with accessibility and the prefers-reduced-motion media query. You could use both from JavaScript as well.

Also the same energy: Umar Hansa’s recent blog post JavaScript: Conditional JavaScript, only download when it is appropriate to do so. There are lots of examples in here, but the gist is that the navigator object has information in it about the device, internet connection, and user preferences, so you can combine that with ES Modules to conditionally load resources without too much code:

if (navigator.connection.saveData === false) {
    await import('./costly-module.js');
}

If you’re into the idea of all this, you might dig into Jeremy Wagner’s series starting here about Responsible JavaScript.

Responsible, Conditional Loading originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Creating websites with prefers-reduced-data

Geoff Graham — Tue, 08 Dec 2020 15:45:37 +0000

Spoiler alert: There is no support for it yet. But it is defined in the Media Queries Level 5 spec that includes other recent, but more familiar user preference features, like prefers-color-scheme and prefers-reduced-motion.

The Polypane blog goes into incredible depth on prefers-reduced-data, especially for something that we have yet to see in the wild. That’s actually what makes the Polypane team an ideal voice on the subject. It’s product is a browser that is able to emulate the feature behind a Chromium flag.

At the same time, it’s worth noting that the spec calls out two significant potential issues with this feature in its current state:

It may be an undesired source of fingerprinting, with a bias towards low income with limited data.
This feature is an early draft, and the CSS-WG does not consider it ready for shipping in production.

But that’s not to say we can’t start getting acquainted with it. Here’s how it works:

@media (prefers-reduced-data: reduce) {
  /* Stuff for reduced data preferences */
}

@media (prefers-reduced-data: no-preference) {
  /* Stuff for no data preferences */
}

What I appreciate from this post is the wealth of possible use cases it lists. Allow me to summarize:

Conditionally load fonts. As in, make a @font-face declaration then call the font on the body, once for users with no-preference to get the custom font, and again for users with reduced to get a lighter stack.
Background images. Have you ever used a giant splash image as the background for some full-width hero component? Maybe that can be served just to folks who have no-preference while those with reduced get either a smaller variation or no image at all.
Smaller images in HTML. This is clever because remember that we have the media attribute on the element. So, we can instruct browsers to use certain images when working with , a la: .
Conditionally preload and autoplay videos. Just as we can work with this feature in HTML, we can use it in JavaScript, too, by using window.matchMedia('(prefers-reduced-data: no-preference)').matches to set autoplay and preload attributes on a video based on data preferences.
Ditch infinite scrolling. I’d generally ditch this pattern in the first place, but we can certainly disable it so users who prefer reduced data aren’t force-fed more content (and thus, more data) just by reaching the end of a page.

That’s not a definitive list of ideas, of course! We talk all the time about serving the right assets to the right people at the right time and this media feature is a great tool to help us do that in certain contexts. Think also of:

Providing low-res versions of downloaded assets (e.g. PDFs)
Linking to certain sites or pages that have heavy experiences
Conditionally loading entire scripts, stylesheets, or libraries based on preference
Probably a gazillion other and more clever things…

And this advice is golden:

Like prefers-reduced-motion, it’s good to think of the prefers-reduced-data: reduce option as the default option: people get the lean, fast experience, and only when they indicate no-preference, we send them more data. That way, ~~older~~ browser that don’t support the media query get the lean experience by default.

Yep. The same sort of idea as “mobile-first” responsive design: start by designing for reduced data and then enhance as we scale up.

To Shared Link — Permalink on CSS-Tricks

Creating websites with prefers-reduced-data originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.