#77: Accessibility Among Us, CSS Math, and prefers-reduced-data

This is episode number 77. Hello, ladies and gentlemen, you’re listening to the Drunken UX Podcast. And I am your host, Michael Fienen. We’re getting there. This is… Is this the merry Christmas episode? Has Christmas happened before this came out yet? Oh, no. The next episode will be Merry Christmas. This is the seventh, So the 21st will be the next episode. So we do have one more. So this is… Welcome to the miserable cold episode.

I don’t know, folks. If you’re enjoying the Drunken UX Podcast, be sure to run by our kind sponsors. Over at nuCloud, you can check them out at nucloud.com/drunkenux. See about getting some interactive maps, software or illustrations for your college or hospital or city or whatever it is, you may be Minecraft Minecraft world. I actually have played with the software and put a role playing game map into it. As a dude, That’s

it worked. Is

folks This week on the Drunken UX podcast We’re talking about accessibility among us CSS math functions and preferring reduced data. This is a three for episode because Christmas is coming up. We thought we would give you some presents presents to put under the tree. I really don’t know. I don’t think that far ahead, guys. It’s like

Big Christmas present, because next episode is Season three finale. So be sure Thio, keep your subscription buttons checked. Uh, let’s see, This week I am drinking open 14 Highland Scotch. I think I’m literally sure at this point, I think I am definitely rehashing every Scotch that I’ve pretty much drank. Show that’s like like the bottle of. So, yeah, open 14. Nice Scotch Island. Grassy light. Very good. It’s a you know what?

It’s a good winter Scotch, Uh, because because it’s very warm, it’s not. And I say it because it’s not like it’s ah, all right. Minty is not the word, but minty is what it makes me think of. Like when you have something refreshing, minty and winter. It’s because it’s so kind of light. And, um, it doesn’t oppress anything. So you can, you know, have a little bite to eat to go with it or whatever e don’t know.

I could be also just totally trying to make that up, to make it sound like I’ve got a theme going here. The fact of the matter is, just bringing some scotch and we’re gonna we’re gonna talk about a few things.

I don’t know if if if cocktails could be a family heirloom, but I guess you’re gonna give him a shot. So good luck.

That’s that’s what I don’t like about it.

It’s just it’s smooth. And the reality is one of the things that one of the reasons I really like open a Sfar a Scotch goes is it’s honestly Ah, great. Anytime. Scotch like it’s not a winner. Scotch. It’s just in anytime. Scotch. It’s also when I tend to recommend to folks like If anybody is listening and has finally decided. You know what, Michael? You sold me. I wanna find now. After three years of listening to your sultry voice, I wanna go try some Scotch.

Oban is one of the scotches. I tend to recommend the folks because it is a very accessible Scotch, like it’s not. It doesn’t have that crazy burn. It doesn’t have a strong flavor, which is to say it’s very un offensive. So it’s not gonna, like, push you one way or the other, really. And it will sort of open that door in terms of being like, if you like this or at least don’t hate it, then I can work with that, and then we can find something then better or bigger, that goes off of that.

If you taste that and you’re like Nope, don’t like it, I’m gonna have a hard time probably finding something you do like, though I generally say I can always find this a Scotch for somebody because it’s like beer. You know, beer has such a diversity of flavor that you’re gonna find one out there that you know, even if you’re not a what you would call a beer drinker, you’ll find one that you’re like, Yeah, I can drink that. That’s not a big deal.

Yeah, so I think of scotch very much in those terms. Anyway, you know about that for I should start that podcast. That’s the podcast I should be using. Um, let’s see. Getting started. I thought we could dive into this topic of accessibility with a look at a game rather than a website, which I know is may be weird. But that’s the thing about accessibility. Is the principals across disciplines Now, this is probably all thanks, Thio.

All the covert isolation stuff or what have you? But you know, this particular game has been absolutely sweeping the nation the past few months in particular because I think the social component is the thing that people find most engaging right now. The game is among us. Have you had a chance to play this thing yet?

No, the game is among us.

Yeah, it’s called among us. They named it among us.

fairness, it’s a cheap game. So

so have you have? But you haven’t played it, though. You haven’t, like, sat down and gotten into it or watch them videos on it?

very similar, like a werewolf, for, you know, things like that Secret Hitler is one that some people are familiar with. So there’s an article over at the UX design dot cc. That’ll be in the show, notes the EU x of among us the importance of colorblind friendly design. One of the gimmicks of the game. Everybody is a little people basically, you know, a human representative in a colored spacesuit.

little meatballs. Each person has a different color, though, so everybody selects a unique card. You can do other stuff. Like have you know, a courtroom on you can have a hat suit. You know, little things. Knife in your head.

there that many, uh, looks like I hadn’t counted, but you go through and you pick. And so what happens is you run around, you do your tasks and then somebody or multiple somebody’s trying to kill people on this ship, and they’re faking their tasks. When somebody finds a dead body, they hit a button. They say I found somebody in someplace. I didn’t do it, and then everybody tries to figure out who killed him.

A lot of the conversation around this tends to center on color because the screen that comes up, we’ll show it does show names. But then, yeah, this is where this idea of yeah oranges suss. You know this phrase that you may have seen floating around in memes or things like that, because color tends to be a very quick and easy identify, especially when things are moving quickly.

And if you see somebody like running away in the corner of the screen, you might not see their name placard as they’re running away. But you might remember it was purple, and so that makes it. And like if the lights are out, for instance, you know you may only see a foot or something like that. Running by color blindness as a thing affects about one in 10 men. Give or take, you’re looking at 300 million people worldwide. Have some form of color blindness.

Yeah, it’s right. It’s right in that one in 10 kind of area.

So this article dives in, though to this, and one of the things I really liked about it was that they went through and they took a snapshot of, like, all of the maples and different colors and then ran them through different color blind filters. So you could see how different people would view these little thes avatars and how you could mistake them for each other because of the color overlap that you start to see.

And that’s one of those things, especially if you are. I’m not color blind, so I take it for granted, being able to distinguish those colors, and some of them are pretty fricking gnarly. There’s all that due to Ronnie Mia. I should have had this up before I even said the word, but

during me, I’m scrolling, scrolling, I’m scrolling, I’m gonna find it pro Proton Proton o Pia boy, these er hard or no, no. Yeah, I was right. Do do Tourino, Pia. That’s the one. That’s that’s the worst one. So brown, red and green all look the same. Orange, yellow and lime All look the same Purple and blue look the same White and scion look the same Blacks like the only one that stands apart from from all the other ones.

So this it’s it’s a great go look at this and kind of get a feel for and then it Like I say, go through and look. They show all of the other ones and how real common blue and Purple Tinto blend together.

better representation. I think I’ve seen

All these words are yeah. So where this falls on the scale of Web work is you wanna look a week hag to to, um, it’s under 141 Section 141 This is where they talk about use of color, so the rule. It’s a level a compliance checkpoint color is not used as the Onley visual means of conveying information indicating an action prompting response or distinguishing a visual element. So could you clarify

A is the lowest level of accessibility? Compliance. It’s like the easiest stuff that you need to deal with

right? And so the compliance ranges from A to Triple A. Why it’s not 123 I don’t know why it’s not a B C. I don’t know, a double a triple A right. So the issue the challenge being here Because color is so important to the game, you are basically conveying a very important piece of information Onley visually right?

The article gets into some ways because and now, just to be clear, the developers of the game are releasing a color blind setting for the game that you can go into that will separate those apart. I don’t know what it looks like or what they plan to do exactly, But they have said they’re developing, you know, with the explosion of popularity of the game that has come up. We’ve talked about this sometimes you don’t realize and no pun intended.

You don’t realize you have a blind spot until somebody says, Hey, you know what about us? That’s just one of those things if you don’t learn about it or don’t put time into it until cults raised. But the article suggested some other again because you don’t want to use just color. You could do things like adding iconography to go along with it. They’re like a star next to somebody you know, a shield next to somebody andare, you know, a cat and a dog.

You know something? Something that can be displayed with the character that is visually distinct without being colorized or the other one was. Note the color in the name badges. So if I say my name is Michael and I picked Green next to my name, it says in parentheses. Green

to find ways to, you know, make the game fun. And so they’re they’re coming up. Another one is pronounced. So everybody there they set their name to be a pronoun so that in the discussion room it gets it sounds like cavemen talking at each other. It’s hilarious. There’s some videos on YouTube. It is hilarious.

Oh, it’s It’s wild. Yeah, The thing is, the iconography, I think, is probably the best approach. The adding to the name badge doesn’t help you when you only see a tiny piece of somebody. Whereas I think you could always have an icon floating in a you know, indivisible space, so to speak. So this is just a good I think use case for but how color theory factors into the work we dio

one rial world example that makes me think of that comes up a lot and accessibility. But the reason that it kind of works the way it does isn’t stoplights. Oh, yeah, So this idea of like red, yellow grain stoplights is actually kind of problematic because of color blindness. But strictly speaking, color is not the only thing conveying, meaning their position is also conveying meaning.

So it’s there is like there are ways to think about this in terms of you don’t have no label everything. It’s not necessarily that you know that basic. You can come up with other ways to convey meaning that can supplement that to make sure you are covering those bases.

I’ve been playing it at work, so we we’ve been having once a week. We’re having among us night with co workers, and that’s that has been quite fun. I have to admit toe, you can go to my go find my Facebook and stock me there, and I’ve got a couple of videos up on that. I strained. Check

Okay, The next number two second part middle segment of today’s episode I wanted to talk about I labeled it when we came in a CSS math. Um, there’s a lot of the things you can do in CSS now that our math related. When CSS first came out, we didn’t have that. You just declared stuff. I want my font size to be 16 pixels, and that’s but you get and in, like, I want to say it was 2012.

We finally got this little miracle function as part of the CSS spect called Cal and that let us do things like start to do math dynamically inside of CSS. So, like a good example would be Okay, I’ve got a container and I need to have with on this container, but I don’t want to be fixed with, But I also need it to be more particular than just saying something like 50% Let’s say so.

I could say Cal and then put in 50% and say, I need this to be 50% but minus 200 pixels. And so the browser would then do that math to say, Okay, we’re gonna figure out. So your view port is, uh, 1920 pixels wide, so that means you’re 50% of that is gonna be 960 pixels, and then we’re gonna subtract 200 pixels from that. So this container is 760 pixels wide. Now

what makes it really cool is you can mix unit.

combine like it s so in the example, I just did percentages with fixed pixels. You could do it with rams and EMS eso This ability to blend is really useful and is where you start to get into some really powerful stuff. Now we’ve gone a step further building on that, and that’s where this math thing comes in. So the CSS math, we’re talking about our three functions that are freshly supported.

So Firefox just adopted, I think was clamp was the last one that had to adopt, which, as of April of this year, 2020 is now fully supported. So you have to have no fear of using any of these in any mainline browser There. There’s some fringe browsers or like mobile browsers that don’t support these, but probably talking less than half a percent of your traffic. Um, the functions Airmen, Max and clamp.

Okay, so the there’s a great article from, you know, Kravitz over at the Google Web Dev Log eso. We’ll have that linked in the show notes, as well as a couple others and a YouTube video. That explains this one of the things like Now I need to say this.

This is a hard concept, I think, to tackle uh huh over audio in podcast format because the visual then if you go toe Yunus Post, he’s got animations, uh, on the page that show, like what going on when you make a container bigger, smaller based on these. But that really helps. Sort of explain the value of these, I think. But we’re gonna do our best here to kind of begin to this and explain it. Um so Min and Max do basically what you might think, men says.

Here’s the minimum value, Max says. Here’s the maximum value. Um, these can be explicit or they could be proportional. It could be a list of values. It could be a couple values, so example if you have an element that you need to set the width on and you are afraid of it getting too narrow for some reason, like you’ve got some kind of text in it or something like that and say you want to say You know what we need to sort of.

We need toe set, this, you know, we don’t want to get too big, OK, 50% cool. 50. We’ll do 50% but on a big monitor. Now, you’ve got, like, one line of text stretching across the thing because of that. So what men lets you do is say we want it to be the minimum value of yeah, 200 pixels or 50 percent.

like I said, really need the visual reference to fully. I think you kind

I think where it gets easier to and I don’t think any of the examples that are in that particular article No, no, no, no, That’s clamp. Yeah, hers don’t have it, but there are some other I think in the other articles I’ll link to that. Do like her example, is men 50% 400 pixels. So what it’s doing is it’s saying, give me the smaller of those two values. So if 50% of your 900 pixel vieux port is 450 pixels than 50% is not smaller than 400 so use 400.

If you collapse down to 500 pixels, 50% is to 50. So 2 50 is then smaller than 400. Where this starts to get really gnarly is you can have more than two values in there. You could put three or four.

it takes a list of arguments so you can begin to say You know what? Depending on how I wanted Thio, Give me. Give me the smaller of and it doesn’t e think generally people will use to arguments in it. But you could use different, um, different proportional units because again, you can mix units in all of these, so you could say 50% or 400 pixels or 60 VW view Poor quit.

Um, so that’s that’s another one view port with this Sort of like a ram, so to speak, like it’s the baseline. So whereas 50% is 50% of your parent container view, port wits are based on the view port with, regardless of what your container is or something like that. So it will then start to cycle through all of your list and you’ll calculate out at this moment in time how how physically wide is tin view part or 60 view port?

With whatever I said, you know how physically wide is that? Is that smaller than 50%? Is it smaller than 400 pixels? Um, yeah. So that’s where those things get kind of gnarly. Now, getting into that, it would take some testing and stuff, depending on whatever it is you’re building, but it gives you ah lot of power and control. And Max is the same. Max is just the inverse of that. It’s just taking the biggest of whatever you’re saying.

So it’s trying to maximize. This is almost pedantic with me to explain, but it’s trying to maximize, you know, the amount of space it’s using. So I said the power and this is Tau mix units. Um, one of the cool examples I saw. There’s a unit. Erin, have you ever used CH units?

What is that? Their character with units. Okay,

um well, that’s not fair question. Well, m so ems are based off of with Yeah, well, and remember, they’re not the width the height. When you set like, a font size, you’re setting the height, not the wits. When I say, like a base font size of 16 pixels, I’m saying

Oh, you’re Yeah. You’re talking literal, literal. M not like it. M unit. Um, yeah, so very similar. So if you’re if you follow the standard that like, ah, line of text should never b’more than 75 characters. You can actually use 75 ch as a unit of measure in one of these functions.

I don’t know what the baseline is like. If a CH unit is using, like the m length, I don’t I don’t know that that’s a fact. I don’t know what the actual bases e accounting it. Here you go. It’s relative to the width of the zero. That’s what the CH is.

quick a quick google on that boy. So that gives you an idea of that. You’ve also got and I I don’t even know if someone like E X. I don’t know if X is technically supported anymore. You can do VH units again. Height is not something we deal with nearly as much as with VW units. Um, but using ch, you can do things like try to make sure a box is never gets narrower than the optimal with for a string of characters.

Right? So for readability purpose. So you could say it’s like 45 is like the absolute minimum. 75 is the ideal. So you can use that to say Okay, you know what on a mobile device start to scale down, but never let it get narrower than 45 characters. Right? Okay. Anyway, I want

right? Right, Right. So that gets us into this. This other super cool thing Clamp. This is the

is fun. So clamp is sort of a marrying of men. And max, it takes a minimum, a maximum, and then an ideal is the way. It’s sort of phrase. Uh,

Now, if you’ve ever used men with and Max with, that probably sounds familiar. You could set a with, um, in within. A max with what clamp lets you do is just say in one line of CSS with and then clamp it. And you’re like putting a clamp on something. You’re saying. You know what? You can’t be wider than this or narrower than this, and you could be anything in between them. Um, and the clamp function then lets you declare in one line of CSS instead of three.

Where this gets interesting, she’s her example, is on a container, which I think is incredibly useful with one that a lot of people started talking about was what we call fluid typography. Is this so a phrase you’ve heard elastic font? I I learned it as elastic font Um, a few years back, there’s this sort of holy grail of responsiveness in Web design. At least I think there is.

I don’t know if anybody agrees with me on that I say that like like there’s some understood Holy Grail in this there. That’s not true, But this idea of changing the font size of something dynamically in scale. So as you shrink your browser down, the text size shrinks down with it as opposed to like a media query. So with the media queer, you would say, Well, you know, on a big screen, make it 64 pixels, you know, four.

Make it four rims or something like that. And then at, you know, 960 pixels cut it down to 50 pixels and then on, you know, small devices make it 30 pixels. The problem with that is you get jumping. Yes, responsive. But in between those break points, you are stuck. You are completely stuck with whatever font size has been picked.

Um, and most any anyone who has played with responsive design enough knows every content creator on the planet is going to come up with a string that is either too long or too short for any given font size. At some with you’re gonna have a long vlog post title that is too big and as a result, wraps to four lines because I didn’t know.

So the trick was originally and the way we learn to do this we had, like, a SAS mix in in in our stack that we used for it for a long time that used the Cal function, and it used this process of blending. We said earlier you can combine you port wits with EMS with percentages with pixels, and so you use this trick of the math and you plugged in what you wanted your min and max to be. And it had this whole equation that would calculate your font size Dynamically.

I explain it that way because I genuinely don’t understand the math that went into it. It was somebody else’s equation. We just borrowed it, Um, and and that’s how we did it. But it gave us that effect. So you’ve got this really nice sort of sexy scale as your screen got smaller. It’s the font. Just It’s really cool. Um, she does have a section on fluid typography in this, Uh, okay. In this article, eso you see where it says I am? Fluid typography s.

So that’s that’s a really good example of how she’s using that toe make that text bigger and smaller. So as the container changes, here’s the thing. And here’s why this matters. And why, I think, why use that phrase of like it’s kind of the Holy Grail of responsive design?

Because when we when we talk about responsive design as a designer, when you work with a UI designer, when you work with a graphic designer and you’re dealing with design systems and pattern libraries, what frequently happens is you design break points. You don’t design in between the break points. Um, you know that interaction does.

That’s where interaction design starts to factor into this conversation really heavily, because it could be, you know, the tools themselves don’t just they just don’t necessarily lend to showing you what happens in between two states of something. You have to articulate all of this. You know, an extra steps, so we tend to not do it. And using functionality like clamping on a font size lets us start to get there on containers or anything else.

We can start to say it’s almost like a cheap animation in a way like a cheap CSS animation that that you can say you know what in between the big size and the small size can actually make this kind of rubber band a little bit, Um, as opposed to just snapping. Now there is a caveat. And I know you news article says it, and I think the other two also have it in there. Which is you can, as sort of an accident, make fought too small for accessibility purposes.

Eso you do need to make sure, like whatever clamping you’re doing, that it is respecting like minimum font sizes and things like that that you’re not letting it be purely proportional because it can get very, you know, very you could make fought very tiny doing that Sony. And I mean, let’s just face it.

It’s a whole lot sexier to see a site like if you need to scale it down for something and you do, and like everything is moving and adjusting with you in real time, as opposed to just like trying to figure out okay, I’m making the smaller. Is it gonna pop down at some point? It’s It is a micro interaction in its own way because it’s giving you immediate feedback, your re sizing, something and it’s immediately telling you I can do this.

So this is cool to me, Andi, I already have some plans to implement all three of these functions. Um, also fun Fact, if you wanna get super crazy, these aren’t properties. These air functions as a result, you can combine them.

Yeah, You can mix and match this for any of those units. And you can also combine them in their own crazy ways because we’re what we’re talking about. Here are functions that just returned numbers. So anywhere you need that number whether you know, it was any of the things you listed Or, you know, just something like any normal with er or sizing or something like that.

Or if you want to get super out there and think about this in really weird ways, you can literally combine them together so you could clamp something, but then use the min and Max functions also inside the clamped function. You know, you’re just combining your math functions at that point. So this we were talking about this before the show started on something that we I think we’re gonna bring in the season four s.

I’m not gonna, like, give that away yet, but there is a certain wizardry that comes with people who are phenomenal at CSS and can grok. You know, the complexity of the math that goes into things, especially when you start talking about key framing and things like that. Like if you the the kind of sort of sweet elegance you could bring to a responsive design and the nuance you could get out of it and squeeze out of it by having variable minimums and maximums and clamps and things that could be wild e.

It’s yeah, it’s gnarly. And I know I would take one look at it and be like, I can’t tell you at any given point what number it’s generating. But there are people who can see who can read that matrix. Anyway. Check those out. We’ll have, Like I say, there’s like three or four articles on these things. Um, there’s a YouTube video. Will have in the show notes as well. That demonstrates it.

Let us know if you’re using them or any creative ways that you can come up with to to share this with the world. Okay, so finally, we have one more CSS trick for you, Not CSS tricks, because that is Chris Coyer, who is much better at us at everything, so we’ll leave him to that. But this is a trick that is for CSS. This deals with the prefer prefers reduced data. Um, flag. Now, this is similar in form.

If you’ve heard of prefers, reduced motion prefers color scheme. I don’t know. Erin, have you worked with either of those, Like, for any accessibility type stuff or anything?

And these come because they’re set. Like if you use prefer reduce motion, Um, that’s a setting in your browser or not your browser. You’re operating systems, accessibility functions. So, like in windows, you set that flag or in Mac OS. You set that flag. Um, And so these are things that users would say, like, Hey, I’m my system is set up because I can’t handle all this motion. Um, you know, it causes me seizures or problems. Things like that.

Um, our cognition issues so you can set that flag. And then the browser itself reads that off the system so it knows how to apply things. There’s an article over at the Poly pay. That’s a hard word to say at this point. Thank you. Open polly pain dot app blogged on gears again. We’ll have a couple more on top of this, um, that that demonstrate this in some other ways. This flag I wanna start off.

Whereas when we talk about Min Max and Clamp, I said, Hey, you can go out and use them all now you can’t use prefers reduced data at all. Okay, there’s literally no support for it yet. It’s still

Well, the spec, I think, is baked. It’s just that none of the browsers have added support for it yet, like it’s just hasn’t been put in. Now there is a similar feature that is out in the wild, which is the Save Data header. It works a little differently, except it’s like literally an http header that you can send in the browser to a server to say, you know, I want to save data on this.

The different the big difference is the Save Data Header is more useful for, like, JavaScript or server side stuff. So you tell the server Hey, I want something for low bandwidth. Send me back something lightweight, whereas prefers reduced data is a CSS feature. So it’s, you know, something that you deploy within your your media queries or things like that. Similar effects. The whole idea is, let’s address performance.

Now here I am saying, we have this feature you can’t use it, not supported. So why are we even gonna bother talking about it? A. I think it’s always good to be looking ahead. It’s good to know the features that are coming down the pipe because this will be supported. It will end up in browsers. I think Firefox does have an experimental flag that you can check to enable it now, but it’s just not, It’s not me. It’s in the Knightley’s or whatever this this feels

mean, I don’t know that it’s necessarily that brutalist, but it definitely we we talked about this in Episode 68. We talked all about performance website performance and the importance of it. The reality is, and and I love to rubbing people’s noses, I have this. I’m sitting here in Kansas nowhere, and yet I’ve got their fiber gigabit fiber. I. I am living the sweet life with with giant pipes that air wide open. Um, and not everybody is that fortunate.

My father, who lives an hour away from me, just moved out into the literal middle of nowhere, and it was a nightmare trying to get him not just Internet but cell service of any kind. And he’s got wireless Internet out there. And let me tell you, while it’s more than good enough for anything he needs, boy, is it bad and its data cap.

That’s the bigger thing I think that starts to come out of. This is data caps are where you, I think See this more than strictly bandwidth. So I I actually envision a world where mobile browsers by default, once this is built into mobile browsers, I could see this being in troubled by the fall.

Yeah, it’s it is something to that. I one reason I talk about like, Hey, I have fiber, It’s awesome. I love it. I actually do have a reason for kind of bringing that up in conversations because it’s a reminder to myself that everybody else doesn’t have that, Um, you know, it’s I’m not trying toe rubbing people’s noses or anything like that.

It’s It’s more about me making Trump, keeping myself honest about not, you know, are always being think about how fortunate I am that I have these great speeds and and uncapped bandwidth and all of that, and I have to design to something much less than that. I have to build to something much less than that. One of the things that I think makes this really worth talking about as a feature that isn’t deployed.

But it is something that is in the CSS back and will be eventually. This is the perfect opportunity to start learning about feature queries. Yeah, your have you used to feature query?

You’ve definitely used media queries, right? Yeah. So in CSS, if you’re not most people, if you’re doing CSS, you probably have some familiarity with media queries. You’re at least aware that they exist. Most likely, media query lets you say, depending on a couple conditions of either either the media type or the width of something Men, men with Max, with things like that, you can say at small screen.

So this gets to that Min Max clamps stuff to write that at a small screen snap to this size at a big screen. Snap it. You know that my columns, You know, we have these grid layouts, right? Well, I want to be six columns wide when it’s large, and we’re gonna make it two columns wide when it’s small. So we make media queries to do that. Beecher Queries are semantically structured the exact same. What they let you do, though, is they let you ask the browser. Hey, is this CSS thing, riel?

Can you do this? So you just say at support on do you give it a property and then a value have to put a value with it, Which I do think it is a little weird, but whatever eso you would say, something like at support prefers reduced data reduced. And it doesn’t You’re not actually saying that it has to be reduced. You’re just saying, like if I were to set something first, reduce data reduced. Is that a thing? Does that, you know.

Is that something? You understand? Yeah. What that can let you do now is all start thinking about all of the things that you want. Thio, you know, sort of up sample, so to speak. So you might say if you support prefers reduced data, then here’s my media query for it that loads and the example you’ll see in the Pali Pain article is all of my web thoughts. So we’ll declare all the font faces inside a media query that checks for prefers reduced data if it’s supported.

And if if you set up your font family right, you know how you give font families. Ah, list. You know, comma separated list of fall throughs. So if your particular font family doesn’t load because it’s in that media query, then it can fail over toe. You know, Ariel.

And just to be just to be clear on that, um, what Aaron’s talking about is in Java script, you can also test for these things, not just CSS.

My favorite was in the HTML, Um, if you’ve used the picture element, if you’re familiar with using that in HTML five, a picture element lets you load in a source set. And so you can say, Here’s a picture. Here’s several versions of it and like the default version, that’s just a normal image tag. But what you do is you apply a media. There’s a media attribute on each one that takes a media literal media query just like you would write in C. S s and so same thing there.

If you wanted to say you know what for? You know, for low bandwidth like this, let’s say this is just a decorative image. Hetero graphic right, a header banner like a big photo for like a big, tall high res photo image. A photo image with him. What am I saying? My open takes my words and bins them around. But you can say you know what? This is the imagery we use in the header. For people who don’t care about their bandwidth, it’s high res.

It’s, you know, pixel dense. It’s double, you know, it’s double raise for Mac books and all of this. But then you can have maybe just a small graphic when it’s prefers. Reduced data reduced. That’s Onley three kilobytes instead of eight. Makes you know or none at all. You could say, You know what? Here. Let’s just throw a little transparent gift in there. And that will be what loads if it’s prefers reduced data.

It’s like two bites, so they’re they’re safe and we have protected their connection. That’s one use of it that I think is cool to literally control, You know, like you were saying, Let’s show them the 1997 website. Let’s forgo all of this, you know, Hi rez imagery and all of this stuff, and cut some of that out. When people you know all this decorative imagery, right, it’s beautiful. Designers love it. It sells things.

But if the user is literally telling you, Hey, I care about my connection, I need to throttle stuff. Don’t send me things that aren’t valuable you can do. You can take steps to ensure that you’re honoring that. I think it’s super cool. I think it’s a neat way to go about it. And honestly, I’m excited to implement it and some of my stuff, because I think it’s fun to figure out ways t scale stuff back like that.

It’s kind of a progressive enhancement, but not Uh huh. You’re trying to make it good, low, good high,

Aggressive enhancement, I don’t know.

serving content effectively, I like that is kind of doing and doing it right for the user. Anytime a user is telling you This is how I want it. You should be honoring that. You know, if a user in their browser is scaling things up the 300% so they can see stuff, you shouldn’t be doing things in your CSS or JavaScript to break that experience. These air little it’s it’s a little stuff, but you have to care about those users.

Yeah, and here’s the classic model of that, right. If I’m blocking ads and you’re doing shit toe force ads around that look, you know the interstitial that Heywood, our site is ad supported. And would you would you please add us to your your white list on that? Let me tell you something. If you are the drunken you excite, you will never, ever see one of those. We do have some sidebar ads on some of our on show notes areas.

If you use an ad blocker, more power to yet you shouldn’t see them. If you do, let me know you will never see us begging you. Thio go around that because that’s not what you want. By installing the ad blocker, you’ve already told us what you want and it’s it’s that kind of thinking, and I just love. I think it the end of this.

The big take away that I want you to think about is it’s a great opportunity to try feature queries because feature queries are the best way possible to begin future proofing your code now. So you know, right now we’re talking about prefers reduced data. In another year, there will be new features that are coming out that will be supported in some browsers not supported in others.

But you could go ahead and write the code for those rapid in the feature query. And then, as browsers add support for those things, they just start working out of the blue. And then when you’re comfortable, you could take the feature query off. Andi, just let it be there. But it’s It’s a really powerful feature that lets you get ahead of the game.

I I would absolutely say if if once prefers reduced data becomes fully supported in browsers If you are designing sites that do not utilize that feature and you’re putting And I think probably one of the best use cases of this is gonna be like people who use big fancy photo images in headers and stuff because they tend to be big if you aren’t taking the time to do that.

If you are forcing users to download everything on your page, I’m going to consider the hostile design because you’re not taking the time to consider that implication. And usually if you’re doing that, you probably are making download a lot of other stuff. What I love and we talked about this also in Episode 68 is lazy loading. One reason why I love lazy loading, and you could pair a feature like lazy loading with prefers reduced data.

Maybe if prefers reduced data is set to no preference, then you say you know what? We won’t turn on lazy loading We’ll just let everything load as it is. Well, trust that you’ve got enough bandwidth that you don’t think it’s a big deal. But if you’ve said it to reduce, then we enable lazy loading on everything like you can start. Thio combined these deals in such a way that you can really leverage and you make your own functionality that much better at that point.

So let us know. Will you be thinking about prefers reduce data? Will you do something? Thio tryto deploy it soon Will you use feature queries for whether it’s this or anything else? Um, looking And And if you’re not familiar, feature queries. I will, of course, have a link in the show notes, um, to the mdn and stuff for future queries And how toe Writeth Um, very cool, very useful type of functionality that a lot of people don’t even know exists in CSS.

So go check that out on Bond. Hey, we have 33 episode or three things, so I’m calling that a success. Sit back. We’re gonna take a break and be right back with you.

As always. I hope that this was useful. I hope you learned something. I hope this gets you ready for Christmas and and get you in the Christmas spirit. I don’t know why any of it would, but I thought it would be fun to do the pope re type of approach again. Stocking stuffers. If you have enjoyed this episode, be sure to find us on Twitter or Facebook. We’re slash drunken you x or on instagram and slash drunken UX podcast.

You can check us out if you wanna chat. Was on on this cord were drinking you x dot com slash discord that gets your right in. Doesn’t let us know. I’m gonna try to check it every once a while and just make sure links still works. Um, slack used to time out those links. That was super annoying. I don’t I think the score does, uh, now, breathe. Relax. We’re at the end of 2020. We’re getting ready to start 2021. Everything is looking up right now. Get a lot,

Uh, no. Duck. November 11 11. Burr. All I know is I’ve already sat down and I worked up like not gold, not resolutions there. Just Yeah, they’re things that I’m like. You know what? This? This stuff I want to focus on going in the next year. I may not get all of it done in the year. It’s some of it’s not meant to be done in the course of a year. It’s just stuff that I wanna prioritize for myself. And you

I mean, the the one thing that I’ll say and I referred to it earlier when we were talking about accessibility with among us. Think of me a Santa Claus. I’ve got a big beard. It’s got a plenty of wide in it. I get to bestow gifts upon people. Think of it like that. I bring joy and happiness through Hopefully this podcast for you.

And I can I can tell you the one thing that will hopefully help you out and I’ll leave under your tree. E Just hope that you keep your persona is close on your users closer. Bye.