Stocking stuffer topics are the order of the week as we approach Christmas! We’ve got three different subjects to dive into ahead of the season finale as we look at issues of color accessibility in the game Among Us, check out some useful CSS functions for sizing, and look at the opportunities created with the upcoming prefers-reduced-data feature in browsers.
Accessibility in Among Us (6:18)
min(), max(), and clamp() functions (17:08)
- Everything I Learned About min(), max(), clamp() In CSS
- min(), max(), and clamp() are CSS magic!
- min(), max(), and clamp() are CSS magic! (video)
- min(), max(), and clamp(): three logical CSS functions to use today
- Responsive And Fluid Typography With vh And vw Units
- Simplified Fluid Typography
- Creating websites with prefers-reduced-data
- Let’s Look at prefers-reduced-data
- prefers-reduced-data MDN web docs
- Using feature queries MDN web docs
The following is a machine-generated transcript of this episode. It will contain errors until it has been reviewed and edited, and we apologize for the difficulty that may cause for screen readers. Do you want to help us speed up our transcribing process? Consider sponsoring an episode.
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
a niche market, and
it worked. Is
right now absolutely work. I’m your other other host, Aaron Hill, and you should come check us out on instagram and facebook.com/drunkenux. Sorry Twitter and Facebook.com/drunkenux and instagram.com/drunkenuxpodcast. So I struck next podcast and come talk with us on drugging new x dot com slash discord
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
a stocking stuffer. This is the stock. These There’s the stockings. Next episode is the Christmas present
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.
Thanks. I’ve got ah, Tanqueray and tonic here. It’s Ah. I mean, the bottle looks like, you know, holly Berries because it’s green and the red accent, but this is just like a family drink. We always used to have this around the holidays, and everybody in my grant passed away her a Tawake. It was like a table and it says who l is dying. Wish was for you to have a gin and tonic.
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.
Yeah, yeah, I like it’s, you know, it has ah, Tang Rates has, like a real pine kind of flavor to it from all the Juniper Berry.
That’s that’s what I don’t like about it.
Yeah, well, so I mean having a bite. Like I have drank it straight before and like, that’s That’s an experience, but but the tonic really balances it out, and we had, like, a little bit of lying to it. It really smooth it out. And it’s refreshing. It’s kind of what you’re saying about the open 14 like it’s refreshing, but not like like it doesn’t linger.
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?
This covert walked down among us. What game?
No, the game is among us.
Okay, I get that. It’s around. But what game is it?
Yeah, it’s called among us. They named it among us.
Uh, I’ve paid for it twice. I have not played it, though, like my kids play it. In all
fairness, it’s a cheap game. So
it’s like $5. Yeah,
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?
No, not yet. I’m familiar with the premise. Like I played defector games before and
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.
No, that’s Zach. Yeah, they’re
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.
14. 14 0, is
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.
E think it’s like it’s like 12% of men get it or something like that.
Yeah, it’s right. It’s right in that one in 10 kind of area.
Yeah, it’s pretty common.
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
uh huh. Due to anomaly
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.
The visualization is great. Um, they show the like, you know, the initial one of what it looks like to a color sighted person. Honestly, one of the
better representation. I think I’ve seen
23456 Yeah, there’s six different versions that they show, including one that is completely colorblind. Monochrome ended monochrome asi
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
what level? So level
A is the lowest level of accessibility? Compliance. It’s like the easiest stuff that you need to deal with
the low hanging fruit
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
there was. That’s because there was one they should’ve screenshot from the game where each of the different people named, they’re So if they were the blue person, then their name was They would make a name orange and the red person would be purple. And then the green person would be gray or whatever. Everyone would have the wrong color name. Everybody’s trying
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.
It sounds like who’s on first? Yeah.
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
we we use on the diaper based project. Um, I had written a like a module in it that was for it’s called you I helper, and it was basically just methods that would kind of preform different You. I form controls like links or buttons, and there was some stuff written in the style guide about how, like, what are standards were as far as, like, what colors to use for different buttons. And one of the things that I wrote in there was that we had you never.
You could never have a button that was on Lee a color or on lee a word. Or like it had to be at least a color and an icon or a word and an icon or a word in a color like some combination. Two out of three. I think that that made that be like a better product overall because of that
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.
It’s kind of like two factor authentication except authentication. It’s communication. So, like with stoplights, you have color. But you also have position. So as long as the position of position or color, our prison and they’re consistent than it works.
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
I always forget that Calico exists, but it’s such a cool feature. It’s
what makes it really cool is you can mix unit.
Yeah, that’s that’s the cool part you can
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’m looking at the animations right now and I’m watching the C. S s men won. And so what? What she’s done is, uh, she has on the screen, it says with men 50% comma, 400 pixels. And then it shows the square that that’s being applied to and as theme the view port of this window is being shrunk. It shows the actual with of the box that’s being like modified. And, um, e I totally get it.
Like I look at it like, Oh, it’s the men like like you would use in programming. But the like the inferential. What I’m expecting from it is like backwards. Like it gets it gets. It gets bigger when it expands, and then it gets smaller when you contract it. And,
like I said, really need the visual reference to fully. I think you kind
of look at it. But
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.
Yeah, it takes an arguments. Yeah,
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,
wait. How is that different than than an M or,
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
e like one m is like the width of the letter.
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.
Oh, okay, so But in that case, though, because M is the widest letter 75 if you wrote them and it was 75 m’s wide, that’s going to end up being wider in pixels. Then if it was 75 eyes like
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.
Okay, All right, so, like the average width of a
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
Well, that sounds like what the next function is, though,
right? Right, Right. So that gets us into this. This other super cool thing Clamp. This is the
I watched the animation for right now, it’s really it’s really entertaining. Clamp
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,
so the example she that she has here is clamp 3 50 p x comma, 50% comma, 500 pixels. And so the animation is going, it starts out wide. And the element is the boxes 500 pixels wide. And then, as she narrows it down, it scales down, using the 50% number until it gets down to 350 pixels, and then it locks in at that like a clamps to three fifth.
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.
Oh, yeah, that’s right. It says, uh, or was it anywhere you’re used length, frequency, angle, time, percentage number or integer. You confuse theme functions.
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.
I’m having trouble like envisioning all the ways this could be done. But yeah, that’s pretty amazing.
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?
Um, no, I think I’ll be honest. The accessibly stuff that I do is typically, like, very like you. I front and kind of stuff. Sure I haven’t got I haven’t been keeping abreast on, like, all of the new things hotness.
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
in, like the RFC stage, like we’re still shopping it around.
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.
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
like. It’s it’s prefers to reduce data, and I had to skim the article. Thio really understand what they’re talking about, but basically it’s like give me the version of this website that would be suitable for 19 nineties Internet. I
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.
I could see that, too. I like the idea that it gives you, you know, some Sometimes, you know, like I wanna I really want to just embrace the full website, like, you know, the whole thing. But other times I’m like, I just really all I want is this recipe for whatever kind of stew you have here. That’s it. That’s all the all I want. I want anything else. I want your background story or whatever. Just give me the recipe, please.
So in those times, like, I don’t need high res photos, I don’t need I don’t want, like, all the ad space and everything, and I don’t need all this extra stuff, so I like the idea of having a way to indicate the disposition of like what you’re looking for. Yeah, but the data cap thing though that that’s that’s an easy one toe.
Overlook the importance of for those of us that live here in the US because, you know, if you live in like another country, especially in like a remote area where maybe they don’t have the infrastructure that we have, data caps are gonna be pretty brutal soul, that bandwidth. That would be awesome to have that as a possibility.
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?
I have, um, not extensively, but I have used them a few times.
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?
Or put it another way. It’s a way of asking the browser. Can you do this? You got to do this.
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.
Oh, yeah, that’s a great example. 22 features that I saw the article that looked really cool. One of them is the creation of hooks to identify the connection type. So it’s like slow to G or two D or three D.
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.
Sometimes, like in we’re doomed, scrolling like in an app or something, it makes sense. But on a website, especially if you put anything in the footer of your website, you do not want to infinitely scroll so that they make it where it doesn’t automatically infinitely scroll. If you have, like, you know, reduced data. That’s awesome. That’s really great.
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,
Take a regressive enhancement program.
Aggressive enhancement, I don’t know.
Mhm. I I just like I like the idea. And this is kind of what we had a little bit with source sets that you can have, like higher quality images if the user wants it. If user wants that kind of experience and lower quality images, if they don’t and the ultimate goal is to serve content effectively and having the flexibility
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 like the I the thing that you were just talking about with just trust the user to tell you what they want and stop trying to force them to do what they don’t want to do. And this this goes back to that. A little bit of that Hostile Patterns episode We did with Bron bronze in a while back. Don’t make the user give Give you data that they don’t want to just because you want it.
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,
man. I tell you, like after 67 months of 2020 like, I e would only be a little bit surprised if after December 31st, it was like December 32nd. Or like there’s some new month that comes after December, like E what would be after deck?
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
know what? All I want all I want next year and I feel like this isn’t that ridiculous of a request. But all I want is to be able to decide on any given day how much excitement and terror I want in my day like that would be so cool on. I realized that like a za white man, especially a white collar white man like, I am incredibly privileged to even be able to ask that, but still like, Can we have a break like maybe just like one day a week?
It’s a day off and like, everybody just chills and we’re just like, Okay, I want to do a roller coaster today. That’s how much excitement I want.
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.
This episode of The Drunken UX Podcast brought to you by nuCloud.