#87: Musings on CMS Diversity, Intrinsic Typography, and CSS Accessibility

Good morning everybody, and you’re listening episode number 87 of the Drunken UX Podcast. I am your host, Michael Fienen. And we’re gonna be talking about three different subjects today. We’re gonna be going over why it’s important to diversify your content management, system, knowledge, looking into intrinsic typography and also talking about better CSS accessibility. You might have already surmised. I am talking by myself today.

Both Aaron and I have been through the trials and and throws of Covid vaccine round two and so between recovery times I’m gonna run solo while he’s on his recovery and I had mine just a few days ago so hopefully I can keep you entertained throughout this entire process. I think maybe I have a good shot at it.

If this is your first time listening to the drunk new X podcast, A welcome to the show and b make sure you hit the subscribe button in your podcast app or wherever you listen to podcasts. We have new episodes every other monday throughout the year. We talk about all kinds of web stuff from accessibility to usability, to content code doesn’t matter. Nothing is off limits to us.

And in the next few weeks we’ve got some really awesome guests coming on to talk about some new topics. So be sure that you’re ready for those episodes. As for me, I’m sitting here right now with a nice comforting glass of monkey shoulder. It’s kind of my go to, I didn’t want to think too hard about what I wanted to drink tonight, so just something casual and, and uh run of the mill for me, shall we say, monkey shoulder.

for those of you who haven’t been on past episodes is sort of, it’s a space I blended scotch. It’s got a very nice kind of fruity undertone to it. It’s very mellow, very un offensive, pretty much across the board. Um, and it’s blended from a cannon chie and I believe balcony and a third that always forget off the top of my head, but it’s a very good blend of space. I’d scotches.

So I highly recommend it if you’re looking for a scotch to get started with or something, even if you wanted to mix this, um, you don’t have to feel bad about mixing it because it’s a very affordable scotch. So go check that out. No, that’s not an ad for them or anything like that. It’s just my favorite blended scotch. Okay, what am I forgetting?

Oh, if you want to check us out, you can find us on twitter or facebook at slash drunken UX, we are on instagram at slash drunken UX podcast and finally, if you ever want to chat with us, feel free to join us on discord. The easiest way to get there is just going to drunken uX dot com slash discord. That will auto drop you into our channel. Okay, so I want to start with an article from one of my favorite UX writers right now.

This is from eric Carr kovac over at spec E Boy dot com. We’ve quoted him many times in the past and I’m sure we will do it many times in the future. He wrote an article about Why Web developers should learn multiple content management systems. Now, if this sounds familiar, it’s because in our very last episode on episode at 86, we kicked it off by talking about how wordpress has taken over about 40 of web content management market share.

one of the comments that I made during that was how it that that sort of monotone look at content management systems and that level of dominance isn’t necessarily good for innovation. It really doesn’t foster the kind of climate and environment that we want in a world where, you know, with web film, anything is possible. You know, when you sit down with your designers, when you sit down with your stakeholders, how often they ask, can we do this?

And you say maybe it’s all about what we have the capabilities to do and what we know. So With the case of content management systems, he goes back and he he wrote several points here that I want to quote. He says back in the late 1990s and early 2000s, the industry was a bit scattered. I certainly fit that mold. I tried a little bit of everything building with static html, black file systems and a few assorted content management systems.

I absolutely echo that sentiment. I started building sites around 1996 at that point. WordPress wasn’t a thing all you really had yet Geo cities, you had Angel Fire, you had these online web hosts that would give you two megabytes of storage for free. Um, They give you a U. R. L. Not a domain A U R L. I believe my first website was Geocities dot com slash television city slash set slash 2052.

I don’t know why I remember that so well, but that’s the way those sites were distributed back then. When I started building my first real website, Shall we say? I used a content management system called Toronto. Toronto was a fork of another product called News Pro These were python based if python or PERL, I don’t remember that. Maybe it was pearl base C G I based content management system. You installed it in a directory called C G I bin.

And it worked by using flat file definitions of posts and post types. No database, no database at all. But in your flat file definitions, it used that to actually render out html pages very much like what we do with static site generators now.

Um In fact, I would argue that that approach to content management system usage is the reason we have static site generators today, because that process and the way that worked is almost identical from, you know, an input output standpoint, even though the mechanisms, you know, using javascript now instead of C G I bin um to trigger that and using, you know, of course build processes and things but that was my first experience with a real content management system from there.

Um I ended up of course getting into wordpress around, I we’ve talked about this before and my memory’s fuzzy whether it was 131.5, it was it was one of those where I finally jumped into wordpress, but In that intervening time I also played with Typo three, I played with Mambo, I played with jundallah. Um I currently use an enterprise grade CMS called Dot CMS.

Um I used adobe contribute, which if you’re not familiar with it, I’m not exactly a content management system but it sort of provides that kind of functionality but in a native app approach and not anymore, mind you, I don’t think contributes available anymore, but this was like in the 2000 dots um era I say all this to emphasize there are a lot of content management systems out there and that process of learning different platforms can be very useful to learning.

You know, I’m gonna use this word again. I’ve used it a lot lately. I love this word idioms right. This idea of how you go about doing something, he goes on the say in that same section, working with the same system over and over can lead to a more rigid way of thinking, utilizing different systems, teaches us that there is more than one way to accomplish a particular task.

That in itself encourages us to think about building sites in a more flexible manner. There’s a metaphor I use quite frequently for building websites and that’s building buildings basically. There’s a lot of corollary between the process that goes into creating an actual structure and what goes into creating our virtual structures from the teams that get involved to design to architecture, to code enforcement and all of these kinds of things.

If you are a contractor and you build, let’s say office spaces of some kind, you may be the best in the world at building one particular kind of office space and that’s what you get hired to do and that’s okay.

But there’s also a lot of room for the contractors who can come in and interpret any kind of blueprint they are handed and they understand the vernacular of construction in a way that when they see different types of rooms, different types of design concepts that they know the materials that need to be used for it. They know the cruise they need to bring in for when they need to schedule them.

They learn the broad strokes of that by building all these different kinds of things so that when they see something new, it’s not foreign to them. They understand how to abstract what they need and to creating this new doorway, this new archway, this new skylight, something they’ve never done before, but they’re very capable of doing it.

That doesn’t mean that if you’re really good at building one kind of thing that you’re not, you know that you don’t have value, we absolutely do. It’s just that you do limit yourself to only that one niche, niche, niche. That’s a hard word for me to say. Um he goes on to talk about, there are lessons in user experience that you can pull from this. He says for example, an un intuitive dashboard can make it difficult to create content or tweak settings.

You may find it takes more effort to train clients and in some systems, important items can be buried and require several clicks to get where you want to go. This is one that I think is important to, from the aspect of client management, client expectations. It’s really easy when you are the expert for a client to come to you and trust what you’re giving them. They don’t know what to ask for.

If you, you know, if this is, you know, a main street shop that wants just a simple storefront and they come to you and your WordPress guy and you’re like, this is the perfect use case for WordPress. That may be right.

But is it the perfect workflow for them and having experienced with other content management systems is a good way to kind of understand how to figure out, not just what the right tool tool to build something is, what the right tool to manage something is unlearning how to talk to your clients and learning what their technical expertise levels are.

It can be really easy to forget that something like WordPress may be very easy for you and I we may know where everything is or know how to find where something is very quickly and easily. But for somebody who’s never touched WordPress in their life, Gutenberg, maybe the most foreign thing on the planet, They don’t have the slightest idea how to go in and manipulate that block editor.

They just need a wheezy wig because they’ve used Microsoft word and they understand a design toolbar. And so that’s the approach that they need. Now, obviously, okay, you figure that out, you take Gutenberg out, you put in the Classic editor plug in or you use Classic Press or something like that.

But that’s the point understanding what those because you’re you’ve got users who are the visitors, but you’ve got users who are the managers and understanding those managers needs and the people who will be left to edit this after you are gone can be a big step towards making sure that their life and their experience with their platform is the best it can be. Trying to shove everybody into one box isn’t always the right way to go about that.

He goes on to talk about developing a better understanding of your niche. There’s that word, again, it’s harder to perform a self evaluation when there’s not a lot of variety and what you do quite often, it’s easier to just keep forging ahead on the same path. Unfortunately, that can lead to stagnation. That’s those are his words.

This goes back to kind of what I had just said about building buildings and whether or not you’re good at any kind of construction or you specialize in a very, you know, specific type of structure. Um, you can build one type of thing, build it really well, but also still be very good and very cutting edge at what you do.

Stagnation is when you continue to build a building with stairs leading up to a door, but no ramp and no elevator because you haven’t evolved to the point where you are addressing accessibility, accommodations and those codes, standards that need to be met. That’s what stagnation looks like. Stagnation doesn’t necessarily doing one thing and one thing well, doesn’t mean you’re stagnant necessarily, but it does create a certain set of blinders.

It’s this idea right of when all you have is a hammer. Everything looks like a nail. If that one CMS is your entire world and your entire industry, then you are going to try to do everything in it. For better or worse. WordPress can do e commerce. The woo commerce system of plug ins is a relatively good robust and mature set of tools to turn wordpress into a storefront. But is it really the best option over, you know, something like Shopify?

You know, not always, it isn’t the best tool for every situation, even though it can be the tool for every situation and whether or not it’s right or wrong is going to come down to the design, it’s gonna come down to your client expectations and not forcing them into that box can be a very important step in whether or not you’re successful in building that site for those people and launching that site down the road.

Be careful of not letting that stagnation and not letting that set of blinders keep you on a road that you should try to stare off of. This doesn’t necessarily mean that you have to be an expert in every CMS. ErIC finishes by talking about stepping into the unknown. By the way I say this is you never know what your next client or project may bring to the table, what they may ask for that may force you to think otherwise.

His suggestion is my suggestion which is don’t try to be an expert in everything but expose yourself to everything. It’s so easy now to spin up Docker and create a VM or use if you really want. I actually really enjoy virtual box and I spin up like Lennox environments for development. My work environment, I have a work VM that is Lennox set up exactly the way I want it.

I store that so I can spin it up if ever since something goes wrong or I move to a new machine, I have this image, I can spin up, I can create development environments on a whim basically and I can tailor them to is at work or is it play is it my personal sites or is it a client site? But that lets me install anything I want to without like any risk to anything else. And so I can set up a local instance of Jumla. I haven’t touched Dumela in ages.

I’m almost afraid to see how much it’s changed since I used it last quite frankly. But that’s one of those things that I should see that I should know because I need to be able to evaluate if work comes to me and says, hey, we’re thinking about changing content management systems, we want to save money or we want to be more efficient or we want to be more portable. I don’t know, I need to be competent in what other systems are good at or bad at.

Um, and how they meet the needs. If performance is one of the big requirements, I need to know how one system, how, you know what is type of three doing these days that that wordpress isn’t, what is Drew Peled doing that. WordPress isn’t, that may make it better or worse. I can set up a site, I can run it locally, bro. Local domain at it, toss a theme in it real fast, throw a couple plug ins in and just see how it works.

I can challenge myself to say, I want to make a page that has a Youtube video on it and an image and is linked in the menu. How hard is it for me to do that? As somebody who is supposed to be, you know, the senior guy on my team, It’s important that if it’s hard for me to figure that out, it’s gonna be hard for my users. And so I need to just understand some of that vernacular.

And what happens is you start to pick up like the shared paradigms of all of these platforms. Yes, they will do things in different ways ultimately, but the broad strokes will tend to be very familiar. All of the platforms have some kind of plug in architecture, some kind of theme architecture template management on pages, menu organization.

And so those paradigms while they may be technically different, we’ll still feel familiar to you and you’ll be able to pick up those things and that will make you better. It will make you better at assessing technology, it will make you better at taking on projects and it takes you from that level of repeating actions through repetition. Believe it or not, repeating.

Is repetition being successful through repetition versus being successful through actual knowledge and understanding of an industry and how web works. That’s my lesson on that. Go check out this article. Um, this is again by ERic Carr kovac. He’s over at Spec E Boy dot com, learn multiple content management systems.

Um, we’ll have a link to this in the show notes and let us know which CMS is you have fun with which CMS is you’ve enjoyed playing with and where you’ve been surprised that one CMS is particularly good at one thing versus another has, you know, is ghost your go to now, You know, that’s been one of the big sort of challengers in that space. Um, do you prefer the hosted CMS? Is, you know, squarespace.

Wix You know, these count though, you know, just because they aren’t open source, doesn’t mean they’re not content management systems. And a lot of users are now going towards those because again, they meet those needs of the simple main street client while giving them a user friendly editing interface. So be thinking about these things and let us know where you land and what you enjoy.

Okay, so next up on the docket, we have an article that comes to us from scott calum. He’s the creator of type tura. Um he’s written an article over at CSS tricks called intrinsic typography is the future of styling text on the web. Okay. A lot to unpack there. First off, can’t we? Style text now? And the answer is yes, of course we can. Style text.

We can we’ve had web fonts for years now, you know, we can do what we call fluid typography or responsive typography, but these approaches have some fundamental challenges when it comes to scaling font on the web that will get into here in a moment. The second is what is what is this phrase intrinsic typography. I want to take a throwback here first, before we get too much into this story of intrinsic typography.

Um about three years ago, Gene Simmons gave a talk where she coined, I think it was, I think this is where she coined it, um where she brought up the phrase intrinsic web design. She said in this talk, we’re programming a flexibility model, not telling elements exactly where to sit and how to look. Um, I’ll have a link in our show notes if you want to read the transcript from that presentation as well. Um, Jen has long been a huge layout advocate.

She talks a lot about CSS grid and flex box and gets into that um and is otherwise, I mean one of the deepest wells of knowledge when it comes to designing really good flexible layout models.

What intrinsic typography brings to that table is this same idea applied just to your text and your typography which is creating a font system where regardless of the device you’re looking on or the size of the browser, the fund itself will accommodate that with in a way that makes sense for that element. So to what I started with, don’t we have this already and the answer is kind of right now, we can use uh some different functions like couch, right?

When we talk about fluid or elastic typography, as some people say, responsive typography. Um we can do things like use complicated calculus functions that can rely on view port with modified by other factors to scale a font up and down. So as a view port with changes the view port with being you know, the visible space in the browser that it calculates a new size for that thought this is sort of like the dark age version of intrinsic typography.

One of the problems that this approach has is that it really lacks a lot of finesse. Um similarly, we very recently talked about the min max and talc CSS functions and how you can apply those to create um similarly fluid typography and somewhat simpler fashions than trying to write. Uh I’m sorry, a min max clamp, I think I said min max Kalac um min max clamp. Um you can use clamp functions to replace complicated calculations.

The challenge with this is that it can create accessibility issues in particular when you use mid maxim clamp, you you’re telling the browser to force a behavior that can actually come into conflict with user defined preferences if the user has zoomed the page or has set their own style sheets or fought sizes using min max clamp can conflict with that can result in undesirable fond behavior.

This is something I don’t think we talked about then in particular. Um, one reason why true intrinsic typography isn’t available to us now is because we lack something called an element query or a container query. We have feature queries in CSS where you can test for the existence of a CSS function.

We have media queries which let us test for the width of the view port itself or the uh, the mode of display, You know what, what media type you’re using, but we don’t have element queries. We don’t have a test for the thing that your thing is in which may be much narrower or changing in and with as well as the responsive layout changes.

So by fixing that, by applying basically a poly fil to that with a library, we suddenly have that option available to us. Now we can apply a level of finesse to this approach where we aren’t just defining a start and a stop and letting the calculation fill in the gap. We can apply start and a stop, but also apply some behavior to it. So what does that mean? Exactly? Right. I mentioned that scott Kellum, he’s the creator of a tool called type tura.

What type Tour is is a library that’s G zip, it’s like a kilobyte and a half. So it’s it’s not huge in size. That library creates a polypill for your CSS that allows you to not only define key frames. So using basically a CSS animation as the replacement for your clamp function, you define your your key frame and you can apply things as a result, since you’re leveraging animations. Now you can do things like to find your easing.

Do you want to apply a busy a curve to it or something like that, so that you get rid of linear scaling our current way if you use a clamp function or if you’re using a calculation to define minimum and maximum font sizes, that scaling is true linear.

What that means is you can very quickly race to a small or a big size that may be too big or too small uh depending on the size of the element, applying easing curves allows you to better define the the speed at which that haunt scales. What we’re talking about is literally defining the entire experience of that font change such that we are now able to think about this entire sort of DNA of how we’re building our website.

When Gene Simmons talks about intrinsic web design and I that quote that I read from her, she’s not telling elements exactly where to live and sit and how to look. We have, especially from a design standpoint and I think we’ve we’ve talked about this uh when we talked about min maxing clamp, um or it was shortly after that, we talked about when you use a tool like sketch or fig MMA, our design mentality is sort of geared towards this responsive aspect, right?

We design towards breakpoints. Something changes at this size, something changes at that size. But what happens in between all of those things scott mentions one thing that I’ve I’ve kind of known like in my head, I I grok this concept, but I never really thought to put it into terms, he says, as different areas of text compress and expand.

The result is tension, palpable, experiential tension just before the content breaks, I read that and I realized, yes, that is exactly the thing that I have gotten myself when I have done fun. Even with elastic font responsive font As you near those break points, 1200 pixels, 760 pixels, 320 pixels.

There’s always this very uncomfortable few moments where the font is filling a space wrong, where it doesn’t quite, you know, rap correctly, where it doesn’t quite fill the space correctly or it’s over filling the space as it, you know, reaches new heights, literally, you know, a two line headline on a full screen desktop can take up six lines on a mobile device and rather than scaling it down, keeping it readable but letting it still feel that space well, we tend to wrap it.

These moments of tension are what we fix with intrinsic web design. And instead of defining the simple breakpoints, we simply think about the way we articulate space. This is a very abstract thought process. But um, jen on her website, on her Youtube channel, um she’s got some examples of this in practice and when you see a site scaling with an intrinsic design principle applied to it, it really makes a lot of sense.

And we need, it really explains how we need to start thinking about design in less concrete terms. We need to stop saying at this exact moment in time, thought needs to be this size or similarly at this exact moment in time this container needs to be this size. Let the device figure out what the right sizes, We know what is too small, we know what is too big. Tell it that and then define sort of that experience of, okay, we’re going to ease it in this way.

We’re gonna change this about it and just let the calculation do the work from that point forward. So I’m gonna put my money where my mouth is on this because this is addressing a problem that I was very explicitly running into. We’ve discussed on the last couple episodes, how we’re doing a redesign of the drunken UX website right now.

And one of the challenges I’ve been having is as we hit different breakpoints, how I deal with my episode title layout because it was rapping in ways that you know just at those very edges of my break points where I didn’t like it and it also didn’t work well if you zoomed your page in. So I’m gonna take this approach and I’m gonna bake it into the way that I’m handling my font sizes on the drunken you excite. And we’ll see what the outcome is.

The one nice thing about having this site and this redesign taking places. I have an opportunity to literally test the things that we are talking about in real time with you all. So, check back on the site here in probably another month or so, and we’ll take a look and we’ll see exactly what that outcome is from all of this work. So, if you wanna check this out, go run by CSS tricks. Again, links in the show notes.

Um this is the article by scott Kellum where he’s talking about intrinsic typography and let us know if you’ve got a approach you like better. Um is there anything about this that you find difficult to understand? You know, the idea of thinking about design and and changing of elements intrinsically? You know, is that a difficult concept to grasp versus normal sort of responsive approaches where you just change at breakpoints? Let us know.

I’d be interested to see how other people are thinking about this and how they’re sort of a, you know, uh rocking the abstract ideas of intrinsic design. Our final subject for the day comes to us from the modern CSS solutions for old CSS problems series written by Stephanie Eccles. This is issue number 27 where she gets into modern CSS upgrades to improve accessibility.

So this looks at a bunch of the ways we can use CSS to make sure that we are respecting CS respecting accessibility requirements for websites. And this deals with a lot of things that I think that we understand to an extent but still have a habit of manipulating. For instance, one of the first subject she gets into his focus visibility.

So normally, like if you were looking at a plain old vanilla html page with no changes to it, no manipulation, that’s happened to it. Usually if you tab through the page, you’ll get an outline on elements as you go through them, you’ll get a highlight of some kind. This is normally defined by the browser.

This is uh, this is something that is like the blue, you know, the blue bar, the blue outline that you’ll see around things that’s designed to give the user a sense of where they are visually on a page. It became very fashionable about 10 years ago. Give or take to remove that. That this idea towards minimalist web design meant we had to remove any kind of the embellishment that came along with it.

We were taking away underlines on links, we were taking away focus states, we were coloring links the same as text in some cases. Um this is terrible because it visually removes all of the language that we use to communicate to a user, that this is a thing that you can click on if you have a visual impairment, if you’re color blind, if you are low vision, not having that focus state is very, you know, it’s very limiting and how you can use the page if you have motor mobility issues and you can’t use a mouse, you tabbing through a page and knowing where you have tabbed to and seeing a box around.

The thing that you have targeted is, you know, is immensely important to knowing how you’re going to use that page if you can’t tell where you’ve tapped to, you can’t use anything. So she gets into this idea of focus visibility and these pseudo classes that we have been given. So this is talking about like the colon focus pseudo selector, um there’s also focus visible, you can use these as a way of addressing focus, styling focus while retaining focus.

So if for instance your designer or just your design wants to dictate how something should look when it is focused to provide that visual distinction and you’re confident that the distinction itself is accessible and and creates that differentiation, then you can style those things such that they look different.

If you use that focus pseudo selector, you can also combine it with focus visible if you wanted to focus visible is a selector that generally works with keyboards um specifically, so for instance you wouldn’t necessarily see it using a mouse, but you would see it using a keyboard. I personally don’t like distinguishing between those two things.

My preference is actually to always any time I do a focus for a hover, I just always include those two things together when I’m styling an element. So if I’m styling my tags and I want to provide my state for when that is being selected, I just target both hover and focus together so that I always know that those elements are are visible to somebody who’s using it. And I don’t generally distinguish between other states.

That’s my own personal preference because I just like to keep it a little more simple in that regard. But you should always utilize it. If your intent is to change focus and you should never remove those focus elements, you should never get rid of those. And if a design calls for it, I would argue that you have to push back on that because that makes that not weak had compliant at that point. Without that page cannot pass accessibility checkpoints.

If you aren’t giving a user away to see where their focus has gone. As a side note to that, this gets into keyboard controls and I would encourage you also, if you’re designing a site with drop down navigation that you make sure that your drop down navigation honors that tabbing such that you can open and close your menu and tab through the elements of that menu without hiding it.

I say this only because I have seen sites and I’ve worked on sites where Drop down menus have been tabal but not visible. So you basically lose the focus completely while you’re tabbing. And if that menus is five items each with 10 elements underneath, you have to tab through 50 elements before you get back out and into the page and the user has no context for it. That’s just something to keep in mind.

When we’re talking about element focus, this flows into her next point, which deals with focus but focus order or source order rather as you tab through things, making sure things tab logically is very important. So in the example that I just gave for the menu, it makes sense to tab through your top level menu items, but if you don’t open those menus, there’s no reason to tap into them.

Um That’s not quite the same example that she gives, but it’s this idea of making sure that, you know, people’s spatial orientation makes sense when they’re working with your page where she gets into this is dealing with something like CSS grid. CSS grid affords us something very cool and very powerful um Called templates. We can do we can do grid templates where we can literally sort of define space inside of a layout using names or or just mark up.

And by doing that, our source code can literally be in any order and the CSS will match the elements with the name for which they are meant to belong. So the last item in your source code could actually end up in the top right corner of your CSS grid template layout. Very powerful for layout, but it does create tabbing issues.

You still need to be thinking about your content from a linear arised standpoint with regard to how the keyboard controls will work. So as you tap through that page, as you hit those links or form controls, I see this all the time with form controls that can’t decide if they want to go top to bottom or left to right when there’s the two or three column layout. This uh, one of my favorites for this is uh tabbing through a particular applications form.

When I’m feeling like I usually as I’m filling out a form, I don’t reach over to the mouse, I will typically just tab my fields and instead of going from first name to last name, it goes from first name to address first line because it’s going even though the name fields are left and right columns, there are, there’s basically two columns of content and it’s going down the first one then to the top of the second one.

So you actually have to go first name, address, city, last name. And it’s just a very strange and finish zip code, but it’s just a very strange layout because of them not thinking about how that linear ization affects the tab order. There’s not an actual CSS fixed to this. Mind you with flex box, there is a flex order if you use the order field um that can control how things display, but it still has the proclivity to cause the same problem.

You just need to be aware that if you’re moving things around your layout or or presenting things in a different order, you have to consider how that affects your tabbing as you try to navigate through. Because there’s no, there’s usually no visual indicator of where you’re going to jump to. This creates uh cognition issues or people who have reading difficulty when you’re moving them abstractly around the page without any sort of indication of where they’re going to go.

They can have trouble tracking that progress through the page and have trouble then understanding if they have completed what they are meant to complete because they haven’t gone through it in a structured order. Now, speaking of linear ization, I want to give Stephanie a huge shout out because she wrote this article in a way that also seamlessly helps me transition from one point to the next as I’m talking.

Um as we talk about linear ization, her next point, it gets into desktop zoom and re flow. Why does that matter? How do those things connect well, zooming and content re flow deals with how your website as you not just deal with responsive breakpoints. We tend to think a lot about, well, how does my site look at a wide screen? How does it look on a mobile device? But we don’t always take that time to stop and think what does it look like on a desktop if it’s zoomed.

And so that is a week egg checkpoint where you have to be able to zoom your content up to 400 On a 1280 pixel wide screen. This basically kind of simulates A 320 pixel wide um device. But of course in the desktop environment, the consequence of this is that it should trigger your page to re flow such that it’s visible in a single column. That’s what we call linear ization. Everything’s flows from one point to the next in a way that makes sense.

And so that’s where she goes with her next bit of CSS advice. We actually covered a little bit of this in our last episode when we’re talking about sticky headers to this idea that if you aren’t addressing the layout of your sticky header is quite right. How they can take up way too much real estate on your screen zooming is one way that that can happen if you zoom your page and your sticky knave does not accommodate that.

You can inadvertently start taking up way too much of a page. And that’s something that she also brings up in her article. One of the really significant the considerations though, that you have to give something like this is when you zoom in. If you are looking at a 1280 pixel wide screen and you zoom it in 400%,, your aspect ratio doesn’t change when you do that.

You’re still looking at a wide screen monitor in a wide screen layout Even though that zoom level at 400 zoom level is equivalent to a 320 pixel wide device if you are designing things assuming that Oh well if it’s 320 pixels wide obviously it’s a mobile device. What what’s the what’s the consequence of that? Well it’s a portrait layout now is normally we hold our phones up and down when we’re looking at web pages.

So this is one of those spaces where if you aren’t accommodating for your aspect ratio, when people zoom you might be throwing stuff off the side of the page or making it, you know, inaccessible literally. Um not just from an accommodation standpoint but like it may not be able to be got to because it has been pushed outside of the view port inadvertently.

Again, depending on you know, are you using absolute positioning, are you using overflow issue or overflow hidden things like that? So knowing how that behaves when you zoom in is incredibly important in that regard. And one of the other big issues is whether or not margin and padding scale correctly Depending on how you have set those are using REMS or ems. Um and things like that.

You end up with a situation where you’re padding may continue to scale up and it 1280 pixels zoomed in 400%. Your padding may be much much larger than is realistically necessary. This is where to go back to our our last subject. Um and thinking about intrinsic design. You know, if we just allow a men and a max value to scale um that may not always be enough.

We can control the behavior of that scaling in a way that may make it much more visually and aesthetically appealing. Bye. Either smoothing out the curve of how that padding comes into play or by simply defining you know where those maximums should fall with respect to the zoom. What she calls out and what we’ve all done at some point is usually creates something like a pixel ramp.

So if you haven’t heard that phrase before, that’s where for your breakpoints, You have some value that increases with each breakpoint. So if you’ve got let’s keep it simple and just a small medium large. Right? Well your small breakpoint might might have padding of 10 pixels. Your media might have a padding of 20 pixels. Large might have a padding of 30 pixels.

But like we were just talking about with with intrinsic design as you near those breakpoints, you risk this design tension that comes into play where those discrete defined values don’t necessarily produce the best outcome. And so if we were to go in and clamp those values instead and combine it with men and max, We can adjust it so that it makes a little bit more sense based on how big they are. Maybe they’re zoomed in 300 instead of 400%.

What impact does that have? This lets us accommodate for those types of conditions. The way we usually do this is if you use if you don’t wanna use a clamp function, even if you just use men or max values for one of those elements, you can define a minimum of say one RAM if one RAM is 10 pixels and combine that men one RAM or uh 10 VW that’s the view port with unit. And so that’s that VW or Vh vieux port height unit.

Those give you a scalability a variable amount that it will take the smallest of in those situations. Now she gets on to another subject that I’ve talked about before, I forget which episode we brought this up in and it was just sort of a passing reference. But when we talk about motion now there are a lot of reasons to use animations on a web page.

We use them to build micro interactions to convey meaning to draw users attention to something that they should be interacting with. Um, and they can, that can be very valuable for creating a good usable interface. But motion you have to use carefully because there are a lot of ways that motion and animation can be dangerous for folks. This is particularly true if some people who have neurological issues that can cause headaches.

Um, certainly epilepsy is one of the well known ones that flashing lights, flashing colors can impact. And so there is a browser setting for prefers reduced motion that we can call from a feature query that then allows us to go in there and change animations. Um, if that feature query is met, if prefers reduced motion is set to reduce, then we can do things like turn animation durations down. We can turn off how often they repeat.

We can shut down scroll behaviors. We can basically say, ok, this person doesn’t want those animations and can’t use them for whatever the reason is. So we’ll turn those off animation. And and those kinds of interactions, you have to think of them a lot like salt, you use them to make something better but you don’t want to overuse them. And some people have sodium issues, they have heart, you know, issues that they can’t take a lot of salt in.

And if that’s the case then you need to be able, if you’re running a restaurant you can’t be cooking all this pre done stuff, you need to be able to add salt or take it away. So animation is very much the same kind of thing that you can use that CSS selector to say, you know what for this users case we’re gonna not run those animations and maybe you do something else like use a tool tip or something like that to help draw their attention to what they need to see.

And I want to wrap up this subject with just a recommendation of my own in terms of a tool that I found really helpful when it comes to addressing accessibility through the use of CSS. Now this is a tool of a little slightly different color but um it’s still, if, if this is something that you’re interested in, it’s a great way to kind of draw your attention to things.

It’s the ally dot CSS library, that’s a 11 y dot CSS If you just google that, it will be the first hit that should come up. It’ll take you to a git hub dot io page. What this is is a CSS library. It’s broken up, you can download the whole thing or it’s carved up into sections for just errors or warnings and obsolete and advice. What it does is it will apply highlighting to your website that will show things like input without labels or images without alta tributes, things like that.

And there’s also even I believe there’s an extent of web extension for your browser as well if you wanted to do it that way. But I like using this. I build this into, for instance, our WordPress themes. I will add that in and in q It only when I’m working on a development or a local site so that when I am building something, I can see all of these highlights of things that it thinks maybe aren’t compliant with certain week ag specifications.

So that’s a good starting place. It’s a very cool tool in a very useful way to see what you’ve done that may be wrong on your site and get information to help make yourself a better and more inclusive designer. That’s less than one hour, three subjects, one host. And I hope that you found at least one of these things sort of useful and educational um, and maybe provided you with a new way of looking at one problem or another.

Whether that’s how you approach your CMS is what the heck, intrinsic design and intrinsic typography are. And what you can do with your CSS to help make your web sites more accessible. As always any time you have something to add to this or you want to share something, please reach out to us.

I’d love to hear what you’re using or what you’re doing or how your opinions may differ from us because the reality is these are three very deep wells to go into and everybody’s going to have their own opinions on it and it’s not right or wrong. It’s just we all work differently and that’s okay. So stay tuned. We’ll be right back and we’ll get you onto your next show. Yeah. Hey everybody, Michael from the drunken UX podcast.

Are you an expert in build tools like web pack or roll up or parcel or do you thrive on analytics in the new G. A. For environment peck? Maybe Git hub is something that is your bread and butter or you’re doing design work in pattern lab or fractal? Er Astro heck. Even if you’re somebody who knows everything there is to know about WordPress theme development or static site generation, we’d love to hear from you.

We’re scheduling interviews right now for guests throughout the second half of season four and we would love to either talk to you or somebody. You know, if you’re working on something that you think is incredibly cool or provide some kind of value to the community, just drop by our website at drunken UX dot com, hit the contact page and fill out the form there. Thanks for tuning in this week.

Everybody I know this was a little bit different, but hey, we got to shake things up once in a while just to keep ourselves honest. I hope you enjoyed the subjects and I want you to stay tuned because holy moly the next couple of months we have some guests lined up that are going to blow your mind. We are hitting on some subjects that I have wanted to talk about quite some time with some of the best minds on those subjects.

So hit the subscribe button run by twitter or facebook, you can find us at slash drunken ux. If you’re on instagram we are slash drunken UX podcast and you can always jump on discord at drunken uX dot com slash discord. We’re always looking for people to talk to. So please come by and say hello. Also let us know, like I say about any of these subjects because all of these things are I just scratched the surface of and without Aaron to bounce all of the stuff off of.

I just have to talk as well as I could uh let us know what you think about these things and what tools uh keeping your toolbox for him because I’m always on the lookout for things that I haven’t seen or haven’t played with yet. Because when when we tackle these things, when we even if we don’t think intrinsic design is the future, we don’t think some of these accessibility approaches are the best way to go about it, at least by broadening those horizons and learning about those tools, we discover that we’re so much better at keeping our personas close, but our users closer.