Warning: Uninitialized string offset 0 in /var/www/drunkenux.com/public_html/wp-includes/class-wp-locale.php on line 1

Warning: Uninitialized string offset 0 in /var/www/drunkenux.com/public_html/wp-includes/class-wp-locale.php on line 1

Warning: Uninitialized string offset 0 in /var/www/drunkenux.com/public_html/wp-includes/class-wp-embed.php on line 1

Warning: Uninitialized string offset 0 in /var/www/drunkenux.com/public_html/wp-includes/class-wp-embed.php on line 1

Warning: Uninitialized string offset 0 in /var/www/drunkenux.com/public_html/wp-includes/html-api/class-wp-html-open-elements.php on line 1

Warning: Uninitialized string offset 0 in /var/www/drunkenux.com/public_html/wp-includes/html-api/class-wp-html-open-elements.php on line 1

Warning: Uninitialized string offset 0 in /var/www/drunkenux.com/public_html/wp-includes/class-wp-block.php on line 1

Warning: Uninitialized string offset 0 in /var/www/drunkenux.com/public_html/wp-includes/class-wp-block.php on line 1

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the updraftplus domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /var/www/drunkenux.com/public_html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the better-wp-security domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /var/www/drunkenux.com/public_html/wp-includes/functions.php on line 6114
#66: The Fastest Fonts, UX and PageRank, and Twitter Audio Accessibility – The Drunken UX Podcast
The Drunken UX Podcast

#66: The Fastest Fonts, UX and PageRank, and Twitter Audio Accessibility

A last minute curve ball from Michael this week takes us down the road of a three-topic episode again. We get started by reviewing an article from Harry Roberts that gets into how to get the most performance out of your web fonts. From there, we look into an upcoming PageRank change that will use Web Vitals to factor UX into scores. Then we wrap up looking into the problem with accessibility in Twitter’s new audio-tweet functionality.

Followup Resources

Fast Loading Fonts (3:21)

Comparison of paint process showing flash of unstyled content

UX Added to PageRank (17:05)

Audio Tweet Accessibility (35:45)

Transcript

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.

Hello, everybody. My name is Markiplier. Wait, that’s not right. That’s not the way this starts…

Wait, this isn’t Markiplier’s show? I gotta talk. I talk to my agent.

This is the Drunken UX Podcast. I’m your host, Michael Fienen

I’m talking to my agent on my phone. And I’m your other-other host market negotiating your

salary while you’re at it.

I wouldn’t pay. Pay me double Michael. Double.

You know what? You’ve you been worth it to me. Thank you. I value you and I value you double.

I should have asked for more than you know what?

No, I think it’s only fair that you get payed the exact same amount that I do. I think that that is,

that’s that’s equality.

OK, folks, this is episode number 66 this week. I threw a curveball at air in about two hours ago. We had a whole other topic planned and ready to go. And I ran into some news and a couple articles and I went I want to talk about those instead. And so I threw together a whole new thing for so this week we’re gonna be talking about how to speed up your Google fonts, We’re gonna be looking at you. Exp a drink and Twitter accessibility issues that are out in the wild. So this is a little three for Po PRI episode. We haven’t done one in a while, and I kind of enjoy them.

But this episode of the drug in your ex podcast is brought to you by our friends over at New Cloud. You can check them out at new cloud dot com you cloud dot com slash drunken ux and check them out if you need any kind of map illustrations or interactive mapping services for campuses, air hotels or hospitals or retirement home zoos. I think as long as it needs a map, you’re gonna be pretty well off going that route to check them out with the No, the drunken you explode guest sent you with that Aaron working, they find us.

You can find us over twitter and facebook dot com slash drunken ux and also instagram com slash drinking UX podcast and ah, drunken ux dot com slash discord.

Uh, first foremost my friend. What do you drinking? I’ve

got a nice glass here of some Balboni Caribbean cask the same bottle from before several episodes ago having drinking in a while That sex love it since the pandemic started.

I am drinking. I went a little different. I I pulled a you this week, actually. Okay, I said I have things. I’m gonna make some of these who, Um And so I’m doing Sprite, Bacardi Superior and propel Black Cherry. Oh, interesting. And it’s it kind of takes a little bit like it. Like a cherry snow cone. Almost. Yeah. Yeah,

I could see that, but I have really Good.

It’s good. It’s quite refreshing. My sprite is a little bit flat, unfortunately, but of course, propels just wanted cherry water. So Right, that would kind of mix it out anyway. But it does. It works very well. The flavors. Quite nice. So, folks starting things off this evening, we’re gonna talk about making Google fonts faster. This comes by way of an article at CSS wizardry dot com. This is Harry Roberts site. Um he meant this article was incredible. So, first and foremost, Harry, kudos on the work you did for this. Obviously, as always, links are in the show notes. So if you want to go find this article and check it out for yourself.

It will be waiting for you there. The article basically got into he was talking about how Google fonts now allows some different loading options to be passed in the girls when you are calling fonts from their cdn. And he was trying to figure out how to make his sights as fast as humanly possible. And so he took all of these different methods of making, you know, fought, loading faster and tested them all across his sight in different combinations to figure out what the fastest way waas A just if you are interested in page speed and figure out how to toe makes the faster, absolutely go read the article because it really it dives into a lot of detail. But without it being like, it’s not technical like, it’s not something that you have to be wildly Ah, adept at any particular technology.

Yeah, I remember. Still remember when? But when the Google funds come out, was that been out a while now? Five years?

Yeah, it’s been it’s got longer than that.

I think I was at Cornell when it came out. It’s really cool

these fun CD. And like Google funds, one type kit is another that I think a lot of people be familiar with. You know, Web fonts have always kind of been a balancing act, right. We got this superpower, basically, what kind of well, 15 years ago, it’s actually been around a lot longer than people think it goes back like I e. 10 or something. What weirdly like old IE supported Web fonts and all of this by using Web fonts, you inherently add weight to the page. And so, you know, we started looking at converting different. You know, designers back. Oh, I love this font. Let’s use it So you convert it and uploaded.

But that’s now 80 kilobytes extra. It’s like another image on your on your site or what have you. And so there’s always been this sort of marriage between getting nice type of topography, design and good readability with the content but also maintaining your page speed. Yeah, and that’s so that’s where Harry’s article comes in because he was interested in all of those things.

I like the first time I saw variable funds. I was at a previous job recently, and I just thought it was in HD Mo. Five. Property that I hadn’t known about previously was like Oh, that’s neat And I didn’t realize it was a specific kind of fund. I thought it was just a thing like a cool, magical thing you could do and

just something the crowds are native rare, stood with Google fonts in particular. I don’t know about type Kit, because while I have photo shopping, all that I just never used type kit. But with Google fonts, you can now filter by variable thoughts. So if you only want to use a variable thought, you can filter down to just those toe to use them. And we probably will explain that Maybe yeah, as far as like what a variable font is.

Yeah, is from my understanding of it. It’s a fun with additional coding in it that you can then manipulate with variable parameters. Right, loaded, right?

Yeah, So it’s it’s all about Like So, for instance, now when you want to use like a custom Web fawn the way you go about, if you need italic and bold and different weights, you end up loading a font for each one of those weights. And so you may for any given typeset, you may have toe actually load, like, five fought files, for instance. Yeah, that gets waiting. As if every one of those files is 32 80 kilobytes.

You’re loading 45 of, um, well, now you’re getting upwards of, you know, 304 100 megs, half a meg. In some cases, yeah. What variable fonts have aimed to do is provide you a base font that you can pass properties in CSS to control all that. So common ones are weight. Whether you know, the amount of I tell is that at a tel ization Telus ization television, I don’t know which one of those words is right.

Tower Talese’s ization politicization.

That’s that’s a fun. You can get into things like, What’s What’s there is Ah, a ligature. Is that the right? Ah, the right word. I’m trying to use their the little like hanging downers and stuff on G S and P’s, um, or whatever those air called. How long the Saref SAR. If you’re using a Sarah font so you can make all of these things change based on parameters. Yeah, now

called this de senders. The singles? Yeah, Yeah. Hanging thing

is a ligature and nothing even. Yes, Um oh, a ligature is a special character that combines two or sometimes three characters and yeah, so I was doing I was like, I was right in that It is, in fact, a fond word, right? But it was That was not what I was thinking of. The sender’s You are right. The cinders is, was when I was meaning to say, you can tell I am not. Ah, typography designer.

It’s been a very long time. But if I recall correctly on Windows 3.1, if you held Altman type 0198 on the numeric keypad, the 10 key thing it would show the character that was coded as a ive leg. Well, we did the H divided city for eight. You egg, right? Um and so that yet a ligature character.

So the with the thing about the variable thoughts becomes is the variable fund has to be bigger just by virtue of meetings, support this kind of, you know, variable ization of different properties. So a variable thought may come in 300 kilobytes in upwards of 500 kilobytes in some cases, so it’s a tradeoff. You wouldn’t want to load five of those for different things. But if you’re having the load four or five different variations of the same font, you may in fact save space by using the variable font and just adjusting its settings for different use cases.

So you just can I have to, you know, fudge it and, you know, not estimate, but, you know, test it and see is one lighter than the other. You know, depending on your use case, but you just have toe. You know, there’s no way to know without doing that. CD INS help. Obviously, if you’re using Google fonts or type kit that can speed things up, there is at least a chance that people have stuff cashed from Google or from type kit. At that point, they use the Internet a lot. You know there may be a good chance in some cases, so that can speed up that page loading, and it’s it’s tough because with designers in particular, designers want to make a page pretty.

They want to make it look nice, but they aren’t necessarily concerned or have to be concerned with the debt that they incur by using a different front for the header for the body text or, you know, accent, text and all of this stuff. So that’s where, like as a friend and developer, you start looking at those designs, and it’s like, Oh, crap and I’ve run into that with designs where it’s like we’ve started looking at our payload and it’s like men over half of our site. Weight is just Web fonts, that air hitting downloaded and that’s a tough cookie at that point. So speed becomes very important to us. One of the properties that Harry hits on is one that I don’t think a lot of people are even aware of, which is a CSS property called fought display.

Is that the Ah, let me guess without looking at the show notes. I’m gonna guess what I think that is. Is that like the disposition of what type of like If you have a funt and you can say found display italics and it will show the talent version is that right way out

of the homework? Oh, no.

I like better than two hours, Teoh. So defender this way You’re playing, I’ll

text you thinking of. So okay, font display is a property that lets you tell the browse, or what to do with text that is using a Web bond. Oh, literally as it is loading. So it’s a means by which you can control what happens as that file is being downloaded. And so there. There are a few different options for it that the average window for this feature is about three seconds, and anything longer than three seconds starts to time out.

The different features, the values you can have for it, our block or swamp there are also there’s also fall back and optional. But those air just sort of a mash up of blocking swap and how they behave. But what it amounts to is if you’re using a lot of Web funds, you can control how the page behaves. So if you’re blocking your basically saying, don’t show the text until my font is downloaded, it prevents the flash oven styled text by hiding it until it’s ready.

I am really disappointed that no one has released a talk or article called Get the Folk out of here.

I’m sure it’s happened.

Oh, No, I just go for it. It didn’t show up anywhere.

So with Swap, it’s the opposite of that. So it enables the flash of on style text. So when it swaps is basically saying, I’m going to show you the text and I’m gonna style it with the Web font. Once the Web funds ready, fall back and optional basically create timeouts. And that’s where at three seconds I mentioned comes in. So if there if fallback is enabled, if it doesn’t load within that time span, it’ll do one thing. If optional is there. If times out, it just shows you the system fond. So those just give you some different being, but he behaviors, but it doesn’t mean you lose a little control in the event that your Web bought loads slowly.

So I think, like maybe an easy if you’re not sure what to do. Pickwick A. A plane or commonly used Google Fund because we’re always one that shows up on a very popular site because that it’s more likely that your visitors have haven’t cashed already.

Yeah, and at the end of the whole thing, he’s got some screenshots that are very cool. Where not only I mean, he hasn’t just broken on the Matthew actually recorded the paint times for these patients. Cool and captured, like the different render states at different time points, using each of these different methods. And so this there there is a certain amount of what do you want? So, like, for instance, if you wanted to do font display block, you’re making a conscious decision to say it is more important to me that they see the right thing rendered immediately rather than seeing it wrong and then having it become right.

So there, you know, there are things like that to consider and those are just decisions to make from a design standpoint from aux standpoint. But he gives a really thorough kind of look at all of these and then gets into what you can do on the CSS side. So doing things like, you know, reload, for instance, toe sort of prime the cash, so to speak, right, you can do you could do pre load, of course. A sink, you know, loading things a synchronously pre connect, Get the DNs ready. So he factors in all of these things as well, so that you are trying to get stuff to the user as quickly as possible, and that comes up in all of the numbers.

So there’s just there is just a lot of information that’s very cool and gets in the late in seeing gets into some of the theory as to how CSS loads, for that matter. You know how CSS gets prioritised first as a blocking download, and then when you a think it drops way down the priority tree, and so that changes the way your page renders as a consequence for him to check it out, it’s over at his sight. CSS wizardry dot com Giving a shout Out If You read it and found it helpful I thought it was cool cell. So I think you will really

appreciate when people dio quantitative analyses of things like that. It’s like, you can’t you can’t argue with good data. Oh, yeah, yeah, good stuff.

So next on the docket, we have another article that involves Google, not intentionally. I just thought this was an interesting discussion to have. So Google is Well, let’s rewind first. This comes from my Lily Smith over Fast company, and the article will be Guess where in the show. Notes. Um, she was reporting on the fact that Google is going to begin to favour websites in results that have good user experience.

Not for like another six months. Right.

Well, uh, so according to the article, Google is saying next year, okay? And they will offer six months of warning before it actually kicks in.

Okay, So when When I saw the heading for this topic, my my first thought was like, this could either go, like, really well or horribly wrong, depending on what sorts of metrics they look at. And I was like, How can you possibly measure like you x, which is, like every subjective human, qualitative and assessment of something wet like, but assess it with a computer program. But I I think that the metrics they came up with are actually not bad,

right? Yeah.

I don’t think that it doesn’t fully encompass you, X, but there are some important low hanging fruit.

Yeah, they tried to find a way to qualify some of the meaningful stuff. And the approach isn’t awful, cause I like you. My first. My first reaction was Oh, good. Google is going to try to force us to do, you know, try E. They’re going to try to force the Web to do something again. Um, and that’s a scary prospect sometimes. But as I write into this, it’s like, you know, performance is still performance, and the way they’re going about this isn’t terrible because it really is kind of focused on things that do genuinely impact user experience on bond, the way people will interact with content and things like that. Yeah, there’s an article and they’ll be linked somewhere. I don’t know where. Oh, it’s in the show notes. That’s right. It will be in the show notes. If you read the Koran when you blawg,

when you say show notes, Do you mean in the show? No, it’s

in the show notes the notes of this show, not last show and not the next one. That’s not up yet, but this one if you read the chromium blogged, they’ve got an article called Introducing Web Vitals. Essential metrics. They’re building on this thing they created called Web Vitals. This is the name they have given it, and it includes three primary categories of metrics, the largest content full paint, first input delay and cumulative layout shift.

Okay, so, like, none of these things are at all stuff that I would think of when I think about you. X Really? I mean, there, there definitely important. So either they named it poorly, which is not an uncommon thing for Google to do. Or they’re gonna add additional, like you X like maybe more traditional UX analyses over time.

Yes. Oh, Teoh, go through him. They outlined them. I’m there. They’re pretty straightforward. So largest content. Full paint paint, they say measures the perceived load time speed and marks the point in the page load time line where the pages main content has likely loaded and to build on the last topic. It would be, for instance, after your fought loads. You know, if you’re right, if you’re doing, you know the display block, you’re waiting until that web font becomes unblocked. Before you have meaningful content paint. Basically. So there’s a really good tie in there between those two concepts, meaning meaningful

content. Paint would be a better name than largest just made describe how they’re approaching it, but

but they’re basically just saying how quick is it? Take care. How long is it taking? Before the user can see your stuff, right. Which is it? That’s aux thing, right? If we know that page load speeds matter and we and we know that page speed in general has been a factor in ghouls search rankings for years at this point. Yeah. This is just sort of an abstraction of that idea. Well, the whole page may still be doing a lot of stuff, but the user can start to do things with it now.

Yeah, I think it could. Ah, Good metric. There is. If your ads live before your content, maybe reassess your priorities. They suggest to 2.5 seconds and less is considered good. And 2.5 to 4 seconds is considered. Needs improvement. Anything about four seconds is four.

Yeah, and I’m ashamed of how many pages I’ve built that take 104 seconds. Yeah, Yeah, it really does take a concerted effort, I think to get a page to load that quickly these days.

Well, so like what? Or something. I could think of a couple things. What is the things you can think of to that? You could do that air like are gonna completely solve it, but our like kind of simple hacks to speed up their page would get

yourself there quicker. So for content especially, you want to get rid of anything that is render blocking. So your CSS and your Java script this argument about why you JavaScript should get put in the footer is a good one, because it means it’s rendered through the dom last or towards the last. After all, the actual rest of the markup is hit.

I remember when when table based layouts were still a thing, if you had to teach any content a table doesn’t display until all the content of the table’s ready to be painted. Yeah, so if you if you’re that was one of the big reasons to push towards basically outs,

um, a sink and differ on CSS and JavaScript as well. That helps load things in tandem, as opposed to having it wait on everything combining requests. This is one thing that you know we’ve gotten really big about at work, which is we don’t want four different style sheets to load on a page way, have a build process that now takes care of all that we’ve got external resource is we include that into our build process.

So you request one style sheet for our site, and so you’re you’re eliminating the number of think of it like driving through town, right? And every time you come to an intersection, you gotta hit that stop sign or stoplight and wait for that to go. If you’ve got 12 and you want to know what’s bad about this WordPress when you look at what plug ins do if you’re using a lot of front in plug ins and they’re all in queueing CSS up and you look in your header and you’ve got 89 10 a dozen CSS files, sometimes every one of those if they aren’t loading a synchronously, is stopping your website in its tracks to download that file,

making sure that you’re doing your magnifying your assets like your job script in style. She and and also that you’re compiling your style sheets. Actually, using Web back is a great um, it’s a great way to load up your Do you not like one pack or do you dio

I I appreciate what Web PAC wants to do

I’ve been learning a lot more about it recently because my new job but

Web pack is. And for just folks who don’t know, it’s a It’s a build tool that assembles your CSS and JavaScript and things like that and helps combine them men. If I them it also do trance piling. It’ll do pre fixing of CSS. If you’re using CSS that isn’t well supported. It’ll use vendor prefixes on all of it without you having to write them all. The reason I’m kind like it. Web pat configuration could be a real oh monster, and I

know that’s that’s for real.

I’ve been using roll up and parcel a lot more, okay, and they are so much easier, especially if you just need a basic build tool to do those kinds of things like you don’t have a lot of nuanced things you want to have happen or do, and this is just a sidebar. But if you were wanting a build tool, that is a little lower barrier to entry. Rollup in parcel, I think, are better starting points than Web back. Sure personal opinion.

We use Web pack just because we have a lot of Ah, front end. And what? We have a lot of rails in a lot of react and Web pack is one. That’s sort of like it’s that, um you know that name of the two like muscly arms, like shaking hands.

Yeah, yeah,

yeah, yeah. That’s, uh, that’s the thing that they have agreed on. Even if you’re not doing something like Mike Webb, Pak or even Parcel. Like just using sass to compile your CSS and then minute running it through a magnifier, would you could do manual? You don’t have to do anything fancy. There’s like plenty of tools for men if I ng CSS and JavaScript Also

one of the other way Web vitals is first input DeLay, which is basically they’re measuring how quickly the user can interact with the page.

Okay, like if you think about, like, good instagram dot com slash drinking ux podcast, and you look at one of our fabulous means we have up there when the page loads from the moment you type in instagram dot com slash trucking UX podcast. How long before you can click on one of the images to view it or like it right? Like how long before I could have a meaningful interaction.

It reminds me very vaguely and to kind of understand. How does the timing the first interaction relate to you X to go to the laws of you? X fits law? The time to acquire a target is a function of the distance and size of the target. Now I’m obviously not the exact same thing, But time is a function of user experience in those cases. Sure, how quickly I can do the things I am set to do. Absolutely. And you know, we’ve known this for decades at this point that the amount of time it takes to do things on Web pages affects people’s, you know, conversion rates or interaction rates with pages. So

Don Norman calls out the with the Gulf of execution. It’s but the time between when you want to do something and when you’re able to do it versus the Gulf of Evaluation, which is between when you do something, when you can see that it has had the effect. Oh, first input delay good is 0 to 100 milliseconds needs improvement is 100 to 300 milliseconds and poor is 300 above. So comparing that the largest content full pate paint

it’s weird that that is much shorter, right? Like that seems, Yeah, So I don’t fully know that because here’s the thing Right, OK, that may be a function of like, how quickly after, you know, page load, for instance, or something like that. Yeah, the sign post matters, and they don’t say Like what that is relative to That’s, I think,

Oh, no, f I d is It’s the gulf of execution. It’s our got right golf evaluation. If I d measures the time. This is from web dot dev slash f i d. Right. If I d measures the time from which a user first interacts with the page i e. When the quick a link top on a button and custom jobs get power control to the time when the browser is actually able to respond to the inner home.

Okay, that makes perfect sense then.

So that means like, um, the time between when the page is extensively voted. So the largest content feel pain is finished, and you can start making your intent on the page by clicking on stuff or whatever. Um, how long will it take before the page could actually respond to that?

You can see I also didn’t do all my home.

I literally just looked it out. So this wasn’t like I did it in advance or anything.

Cumulative layout shift is my favorite because it is mostly what it sounds like. It basically involves. How much does stuff move around the page? And the classic example of this is banner ads. So you land on a page, you’re looking at something. You go to click on it and then add loads and everything moves out of the way and probably tricks you into clicking the add. So they’re factoring that into the U X of the page.

So if your page content is moving around constantly it it also is encouraging you to consider like elements, sizing and things cause, even if it’s not an ad, there are frequent times, right stuff is dynamically loading. For instance, it’s got a panel where something dynamically loads in. Ideally, you should probably know how big that thing is or how much space it’s going to take up, so that it doesn’t shift everything around for the same thing because it still has the same disassociative effect to the user. When things are moving around unexpectedly,

that’s annoying. Yeah, hit Facebook always does that to me. It’ll like, I’ll load the page up and I’m just trying to get the messenger and click on the messenger thing. And then instead, notifications jumped under it. And I’m like, I don’t want to quicken notifications.

It’s a It’s a good metric like this to go back to you originally said. Like How would how would you measure UX in a way that can be valuable for indexing pages? I think these three things actually kind of

good. I like I’m disappointed that they don’t have things like I ah, using like the axe tool, for example, Do you like to a general assessment of of, like, five way complaints or, like anything, any of those tools that you programmatically has an age?

I mean, that’s an interesting point, And I think the thing I would say is wait. I mean, yeah, Google’s have been evolving their method of indexing pages constantly. We used to just be content is King, and that was the way Weeden said it. And for what it’s worth, they still say that they still say content is the most important thing where stuff like this factors in is when you have 1000 pages with the same basic content. The things that are going to move the needle for different pages are gonna be these little things at that point, right?

But he started with content is king. Then they started saying, You know, we’re going to start, you know, bumping up pages that are responsive. They started measuring for responsive layout. Then they started measuring for mobile first speed. It started factoring in page speed. They’ve they’ve constantly refined and added in like meta index type values. Yeah, toe improve stuff. Now we’re getting into this. I don’t think it’s unreasonable to think that accessibility could easily factor into that rank. Measuring how many images on a page have all text and knowing whether or not those images air decorative, for instance, they’ve got the ai algorithms, I think identify that kind of stuff now you know, checking contrast on elements we know that’s programmatically possible at this point.

Like I think that’s absolutely possible. And for what it’s worth, you know, Google is also very, you know, they keep that hand close to the chest. So while these three items we’ve listed are called out specifically and Web vitals, there are very likely others that we don’t know about because they’re specifically trying to keep people from gaming gaming. That measurement. Yeah, a couple things worth reading here from the article. The new ranking factor will combine quantifiable metrics related to speed, responsiveness and visual stability with other criteria like mobile friendliness, safe browsing, https and no intrusive pop up Windows.

In order to provide a more well rounded picture of the Web pages you X, they go on to say that pages should load within 2.5 seconds, which Aaron you alluded to already, and users should be able to interact with the page within 100 milliseconds. That’s F I D. Another measurement looks at how often visible page content unexpectedly shifts around. That’s the cumulative layout shift right. The closed out by saying This update will also no longer require that publishers use accelerated mobile pages to be eligible for top stories. And that is a good, interesting hidden little nugget. In that article,

I wonder if this is one of those things where they’re like, OK, look, you don’t have to use a MP, but just saying If you want to hit good metrics on all these other things, a MP is one way you could do it.

I I’ve read it as them taking the foot off of the gas for ample of it. I think they realized that making

a little more competitive.

I think they realize that while the big publishers have all adopted AMP consistently, nobody else is. I don’t think anybody else cares. And I think at that point they don’t need AMP implementations. Teoh create those top story care cells at that point. If you’re interested in this, there is a chrome extension. It’ll be leaked in the show notes. It’s lengthen their articles well, and you’ll also be seeing Web vitals starting to get implemented in other tools, like lighthouse and some of those other site tools that are in the browser.

So you will actually see like Web vitals isn’t going to some weird abstract thing that is just out there. It is going to just like pay drank and page speed and stuff like that. It’s gonna be a component of their tool suite so that you should be able doing. And Aaron, you mentioned the site web dot dev. That’s sort of there clearing house for all of this information about, you know, best practices that they’re trying to encourage and push for people. Have you heard the controversy? Erin,

you should let me do the transition song. So all the little songs for you,

Uh, you don’t think that’s a good idea?

Uh, the controversy do Do you mean the?

Actually, I shouldn’t say it’s a new feature. It’s an Alfa test or a beta test.

Oh, no. And I got I got your tweets can now be of or 120 characters long

eso over. There’s an article over the verge about this. You can just search for it on Twitter itself and and look up Twitter audio, whatever. They are testing audio tweets which are available to a limited number of users on IOS and can capture up to 140 seconds of audio per tweet. Now, I don’t want to get into whether or not I think this is a good idea or a bad idea. You know, whether that feature is useful But let’s face it, this is a dumb feature nobody people don’t go to Twitter to use. Listen, the audio that’s

people don’t go to Twitter to isn’t 140 seconds of anything out

and and 140 seconds of audio is obviously kind of, you know Oh, yeah. Number two pick on their part as well.

Well, it’s It’s not even the whole site is built on, like very, very rapid micro interactions with a whole lot of different things. So is spending even 14 seconds on something? This seems like that seems like a stretch for Twickenham.

Well, the controversy side of this comes out because they pushed it out. The person that I saw the, um, was party B cardi B apparently was one of the folks who got early access to it because, of course, they’re having, you know, influencers. The, you know,

maybe also musicians. Yeah,

big technical, basically access to this to try it out. But the controversy comes in with the fact that there were no captions. There was no transcript. There was no text audio. Also, uh, that immediately set off a firestorm about releasing this inaccessible feature. So I have a lot of feelings about this, and I think given what we’ve talked about in the past, that should not surprise anybody.

Especially just, you know, was it two episodes ago when we had folks from

E. J and Nicole Iran from Web flow talking about culture of accessibility at a company? Part of this came from the discovery that Twitter uses a voluntary force volunteer force for accessible accessibility work at the company.

So, like disclaimer, we we both wanted to make it clear that these air not unpaid interns or right Internet Brando’s these are. I like how you phrase that other duties and

their employees who are who care, which is good. I mean, you want them to care. And that is an important part of building a culture of accessibility,

with the exception of when I worked at U. S. C. I s every job work that has been, this has been how were they approached? Accessibility. There was not a dedicated by the weight or accessibility, or they’ll 11 y or anything. Person. There was, like just people who cared enough to divert some of their time during the day towards the

gas And the clarification came from Andrew Heyward, who is a software engineer, their Twitter and one of the co founders of Twitter. Able, he said, just to clarify, given that this seems to have gained some traction, were volunteers, and so much as the work we do is notionally on top of our regular roles rather than being full time, we all are otherwise paid employees. Twitter’s not outsourcing unpaid labor so that because that very quickly kind of blew up, I think in a lot of Twitter circles that how could Twitter not be? You know, how are they relying on volunteers? What’s not that basic?

I mean, that’s really bad optics, if that word. Sure, but But even on the other hand, Twitter’s air very large site. Yeah, and it’s also very popular,

and they make on long making a lot

of money. Yes, there is zero reason they couldn’t pay and E. J and Ruben Nick toe work for them, like how Web faux does. But I’m betting Twitter’s annual revenue is more than Web. Let me just a little bit, I guess. Just a guess. And if Webb, if Webb foe, can make accessibility such a priority for their company. Why the buck can twitter.

So there are some different sort of angles on this. So yes, I think I think while obviously we made that clarification about what What it meant when they said volunteer, Um, the idea that there isn’t sort of that dedicated core group that helps oversee this and functionally push it in the products is disappointing. It it reminds me a lot of WordPress and everything that happened with work. Yeah, this idea that because there was even a comment on this one of Andrew’s comments was for what it’s worth, we didn’t where is frustrated and disappointed as the rest of the community.

And when I read that comment was like, that sounds exactly like what we heard from the WordPress Accessibility committee when Gutenberg was going through this idea that they were saying we were raising issues, but things were pushing ahead just the same. And this feels very much the same as that. But this but Twitter has the resource is to deal with it in the way that wordpress didn’t not making excuses for WordPress.

I’m gonna disagree only on the point that WordPress does have the resources to deal with this. They would probably be volunteer work, but they are heavily contributed to from the open source community. And I’m sure they have a few people that they could divert, like even just one or two people to divert from doing regular paid work. We’re doing excessive,

and I think I just I just simply mean that Twitter has revenue. Twitter has money. Twitter okay, Yeah, they have none of the excuses with

WordPress basic and absolutely throw money at the problem. Yes,

so that was surprising to me. And for what it’s worth, there was. If you go through and read, I’m going to include some of the tweets in the show notes. But there was a lot. The head of design and research twittered Dantley Davis came on to this discussion, and he said, I appreciate the feedback in direct conversation about accessibility from our passionate community. It’s clear we have a lot of work ahead to make Twitter more inclusive for people with disabilities. I will advocate for accessibility to be a part of our design from the beginning of all projects. I mean, that’s the right response. I think I think that is an appropriate and reasonable, you know. Wait a kind of stand up to that discussion. I think the proof will be in the pudding, obviously. But now it’s

actually the proof of the pudding is in the eating

in, you know? Yeah. So, yeah, when the when it releases. Right. So here is where I wanna go. A little devil’s advocate advocate E, though, Okay? Obviously, we don’t know if this feature would have released if it if it hadn’t been beta tested, like in public. If it had just been released and was available one day, we don’t know what support may have come with it. And we also know, you know, images.

How long did it take us to get the ability to put all text on images and twitter like that that took in, like, years too long to get that kind of support? Yeah, So we know that we they have a history of being slow on some of that stuff. At the same time, we don’t know what this would have looked like in a final state, but sometimes those features simply take longer to develop.

For me, the problem isn’t that they are are dragging on this. I mean, they’ve been around, what, 11 years now? 12 years? Oh, God

knows 13. I think their team that

over a decade and an accessibility has been kind of part of a big conversation for, let’s say, the last half of that. So let’s say that like, it’s been the last 68 years where they could have realistically been like, we should prioritize this. I know how long it takes them to do stuff like they have. They’ve had 60 years to, like pay someone to like full time advocate. But even a single person used to pay one person and let them like kind of champion that officially and and advocate for it. If it takes a while, it takes a while, and that sucks. And that’s also on Twitter, I suppose. But they’re not even doing the most basic thing of just being aware of it. And that’s really disciplined.

There’s two, I think, very specific components, right? If you know, support audio tweets, you need to support automated transcription of those tweets because not everybody will enter them and you need to support manual because some people will take the time to do them correctly, and so they need to be able to upload those. But I also know that those tools and features, especially the automated piece, you know, we know the trouble we have with automated transcripts of the podcast and the issues that show you are there. Automated transcription is still not a solved problem in this world.

And so, you know, baking in those features for a beta test May. It’s simply a feature that could take a lot longer. And I guess the point I’m trying to make is I think there are constructive and productive ways to draw attention to some of those things. And there are not those ways. And I saw a lot of people in some of those Twitter threads getting very angry and very up in arms about something that’s not a finished feature yet. Yeah, instead of just saying, Hey, we saw this and you know, we were looking at the feature we noticed it doesn’t have transcripts yet. Is that going to be in before release?

You know their their ways to draw attention to that that aren’t like, yeah, why are you building such terrible tools that are excluded community like that’s a very antagonistic and unproductive, I think, way of getting the kind of change you want to get.

I I think that like I’m OK with them testing something out with a small percentage of users, just to see if it even works. And in it not being like a fully baked feature with accessibility and everything. I realized that that because I guess I guess the reason that it seems fine to me is because if most of us can’t use that at all, then it’s like we’re not being excluded from it because of our ability. And it’s, you know, at some point you do have to have the ability to test things at scale. So I I’m not upset about that part. I’m more upset about the bigger issue of just that other duties as a sign for something that’s really, really important, especially on the Web

and and I I like that I’m I was playing Devil’s Advocate a little bit in my phrasing of that. So what is the phrase you know, it’s it’s easier toe find bears with honey than it is toe eat a mouthful of these what the thing about, you know, it’s when you’re not. When you’re nice about things, it’s easier to get your way than when you’re, you know, mean and nasty about it. And then,

oh, it’s easier to catch flies with vinegar than it is with me.

Don’t know one of those things, but that’s that’s kind of where I’m thinking about stuff like that, because wouldn’t when you come at somebody that you immediately make them defensive. And I think in development in particular, people can get very defensive about things they’ve built.

The impression that I get a Twitter is that they are this like, insulated building where they don’t actually talk or review or survey any of the actual users and what the users actually requesting. And instead they’re just like, where’s of cool things that we could offer and no ask people in their immediate circles and maybe survey the people in their tech communities. But they don’t actually ask anyone else in the world because they they have here is a really good case in point, just calling back to something I mentioned earlier.

If you set your geo location to Germany, Twitter will not show you any content that anti Semitic or has Nazi emblems or Nazi references anything because in Germany is illegal to do that and so to comply with German Wa Twitter will do that. But people have been complaining for years now about all of the Nazi imagery and other things, and Twitter doesn’t do that. But I mean, like, they have the capability to do that and they don’t. But instead they’re like, Oh, guess what your avatars circles now? Oh, guess what you can do 280 character tweets Now They keep releasing these features that like I don’t think anyone is actually asking for. And they’re ignoring the ones that are, like, actually making the platform shitty. So, yes, I do have a bit of actually trying to Twitter.

I think, Ah, you know, One other way to look at this is I certainly don’t want to be the person standing up and saying Hey, let me make some excuses for Twitter at this point on this, because I don’t and I don’t agree with him, and I I absolutely think there’s a lot of change that needs to happen on that front. The one reason why I think I’m a little passionate about this idea of how we voice that displeasure is if we make it okay to crap all over Twitter than we make it okay to crap all over diaper base. No pun intended.

That’s that’s fair. Although I would I would counter that by saying the diaper base is 100% volunteer based sure shirt and we don’t we don’t have make any profits or revenue. It’ll

that’s, you know, from a relevancy standpoint, though, it’s just a matter of imagine. Somebody used diaper base and then tweeted at you and said, I don’t understand how how you could even get through Q A. Releasing this particular feature of the way you did. It’s completely wrong. It’s You’ve forgot about this this in this like and just really like, didn’t try to constructively help you fix the problem. They just said you screwed this up. You did this wrong. Whether you’re paid whether you’re volunteer or not.

Yeah, I know we’ve had, uh, we actually did have be back kind of like that at the conference last year regarding like, a couple of the features that just like more working right, and I guess It was a little problematic where some of the users but, um I hear what you’re saying, like not being an asshole about it. You

have to, because that’s the thing. If we’re okay with doing on Twitter, we’re gonna be OK with doing it. It anybody and a lot of places. Those Web Dev’s our one man armies were already overworked and underpaid or whatever, and they’re doing the best they can, and they would love to help you with your problem. But if you’re the jerk in the room, your priority now drops way below everybody else, and you’re not helping solve the problem. And that’s that’s the own. That’s the real lesson. I think that I’m I hope I’m sending.

I do agree with you that maybe we shouldn’t be assholes. Other developers, which is trying to do their best, maybe direct that ire towards the executives are making the decisions. Um, I think that’s always fine at the same time. A. I think it’s OK to be a little indignant, especially in situations like Twitter has. The resource is they have had plenty of time. They’re not snow

and and they do have a history of being less than you know, adaptive Teoh. Some of those needs, like I say, I do totally get that. What it really means is you have to look at the way you not just building software websites. Whatever. You have to start with accessibility, not finish with it. Yeah, we don’t know May. I don’t think that it probably came up early on in that discussion, but maybe it did.

And maybe the fact of the matter is, it’s just taking them a long time to get the technology sorted out to get auto captioning and transcription done. That could be a thing I don’t think it is, but it could be the issue. But the reality is wherever you work, whatever you’re building, the only way to make accessibility a priority is to make accessibility a priority.

And that means like you were saying, you need people whose role and job it is to advocate constantly and to build that you don’t need them indefinitely and forever. But you do need them there to start to get developers thinking about it, to get designers thinking about it, so that when you’re having those brainstorming sessions in those future development sessions and all of that, and somebody says I have an idea. How about audio tweets? The very next question should be that’s a neat idea. How could we go about making that? So that it would also offer auto transcription like that? Should be the next question. And that only comes with education and culture in an organization.

I completely agree with that. And it reminds me of something that Rubin and E. J. We’re talking about where they were saying that it’s even even with both of them, who are people who directly benefit from accessibility measures. They’re even saying, like, Look, we’re not like capital E experts. We have one particular angle of experience, but there needs to be a general practice of approaching the problem in a way that produces more excessive. It’s important that that people from your group are represented in rooms where decisions are made just because you’re gonna be factors that other people don’t know about.

And this is why, at the end of the day, we bring this up so constantly again, I said at the start, I know it seems like we harp on accessibility quite a bit, especially lately but we have to. We have to make accessibility part of this conversation as frequently and constantly as we can, because that is how we start. A culture of accessibility is we have to talk about it, and we have to make sure it’s not a bolt on its part of just the way we work. Maybe you work somewhere where this message needs heard. So share the episode with people and say, Listen to these guys.

They’re trying to tell you that what I’ve been saying forever sometimes hearing it from other people can be a lot more powerful. I hate that, but it’s true. So we need to stop a little sound clip. Their accessibility from the start matters if it agreed. Drunken UX podcast is brought to you by our friends at New Cloud New Cloud is an industry leading interactive map provider who has been building location based solutions for organizations for a decade.

Are you trying to find a simple solution to provide your users with an interactive map of your school, city or business? Well, new clouds interactive map platform gives you the power to make and edit a custom interactive map in just minutes. They have a team of professional cartographers who specialize in map illustrations of many different styles and already a design and artistic rendering to fit your exact needs. One map serves all of your users devices with responsive maps that are designed to scale and blend in seamlessly with your existing website. To request a demonstration or to view their portfolio. Visit them online at new cloud dot com slash drunken us. That’s in you cloud dot com slash drunken ux.

Well, thanks for listening to our Paree. Looks like you had a potpourri drink tonight in the hope for a drink. That was the pope, a region you had. A potpourri brain brain is very so we’ve been my new job. There’s a lot of pairings like every day is parents with the entire game and it’s amazing and awesome and I love it. A man like about 34 o’clock I can feel my brain stammered, really waning. It’ll get easier over time, I’m sure, but it’s a After being unemployed for a couple months, I know how the computer, I swear,

folks, we’d love to follow us. We would love to follow you catches on Twitter or facebook slash drunken ux. You can catch us on instagram it slash drunken ux podcast. You want to catch us? Chat with us anytime. Go to drunken ux dot com slash discord. We love chatting with you if you need ideas if you need a sounding board. If you need help with something, we are here. Think of us just as your water cooler buddies.

We are always cool with just having a little chat or talking about whatever it is that you may be frustrated with in your websites and, you know, reason find. Or at least I mean, I’m on Twitter. Don’t know so much about about this guy over here, but I want I think I have drug you along the grudgingly

I have on my phone I have all the social media APS The very few that I use are all in a group in the group is labeled hell scapes.

I’m also encounter social if anybody actually is over there too I’m just saying I think I’m leaning on counter social eso you

I don’t use I don’t use coz I arco so but I, um I do like it and I like what the gesture is doing with that. I think it’s a good site. Just I have. I only want to be part of these communities. Just so

you know, I guess you humans are pretty awful. Thanks for tuning in. We hope you learn a little bit this week. Obviously, you little different topics. If you like hearing these kind of episodes, let us know about it. Will do them more often will work him into the rotation a little more frequently, state tuned. We do have some other guests that will be coming up to talk about, and actually, now I’m totally off my mark in terms of the order of things. But I think the next guest will be talking about simplifying tool chains and how to approach Miller processes in a way that doesn’t make your head bleed using, you know, there may be getting away from things like Westpac, for instance.

I like not having may I like not having my head bleed a little bit, too, because you know the best way to do that there is there is Ah, there is a lot of things from whether that’s implying tool chains or approaching stuff like accessibility from the start so that it’s not coming at you at the end because it’s at the end of the day. The best way to keep yourself saying is just to keep your personas close and your users closer. Bye bye.

Exit mobile version