When learning web development, it’s easy to fall into habits that “work,” but aren’t optimal. We frequently learn by example, but the context those examples come in can impact if the nuance of the solutions are appropriate. Today, we look at an assortment of issues and mistakes that can occur when we simply “stick to what we know” and don’t constantly seek out new information.
- 5 common web design mistakes beginners should avoid
- 6 Mistakes You Might Be Making As A New Web Developer & How To Avoid Them
- 10 Common Mistakes Made by Novice Web Developers
- 10 Most Common Web Design Mistakes Small Businesses Make
- A comparison of common web accessibility problems
- HTTP Statuses: The Good Ones
- Input Checkbox Arrays
- Modern Asynchronous CSS Loading
- The Quick Guide to CSS Specificity
- Top 10 Mistakes in Web Design
The following is a machine-generated transcript of this episode. It will contain errors until it has been reviewed and edited, and we apologize for the difficulty that may cause for screen readers. Do you want to help us speed up our transcribing process? Consider sponsoring an episode.
This is episode number 75. I messed up last week on our last episode. I said it was 73 when it was actually 74 because we now have enough shows that I can’t even keep them straight in my shownotes. I would actually probably blame it more on me moving topics around from week to week. But no, I was just dumb. That’s all it amounts to.
This is Episode number 75. We’re gonna be talking about going back to basics with flaws and fundamentals. I had some fun with the alliteration in the title of this because I literally have no other gimmicks in my back pocket. We’re gonna be talking about stuff that people do wrong And no, only my back pocket, only my back pocket. Did
you check your front pocket?
Who carries change anymore?
You should look in your front pocket. That might be changed. Their
I use my watch. I got the little the NFC, you know. Don’t touch nothing. No, no cove in No covert for Michael. I don’t touch nothing. I just boop Zack. If you are enjoying the drunken UX podcast, be sure to check out our sponsors over at nuCloud. You can find them at nucloud.com/drunkenux.
If you need any interactive mapping software or campus illustrations, map illustrations run by dropped on and see what they have to offer.
You guys should come check us out at Twitter and instagram is dot com slash junkanoo x Actually Twitter and facebook dot com slash drunken ux, but also instigate dot com says drinking you x podcasts and joining us dot com slash discord. Come talk with us. Tell us what you think. Tell Michael where the changes.
Okay, Aaron, I’m changing my pace up significantly this week. I’ve said many times I’m not a beer guy, but I’m drinking a boulevard jam band.
Show me the label on that.
I picked up a six pack of this. It’s a berry ale. Uh huh. Comes in a 5.9%. It’s not bad I’ve found a couple of beers recently that I don’t hate. My friendly local neighborhood bar has what I lovingly refer to as the nineties beer because I I don’t know what its name is. All I know is the tap handle. Looks like you know something from 1992. It’s like neon and has, like, the crisscross, the graphic lines and stuff like to call it this year.
I like it. It’s It’s pretty good. And then this. I think I had this once before, and I saw that the store and I’m like, I remember that. And so I got a six pack of it. And so I’m having that tonight.
I’ve got a bourbon and coke. It’s a four roses bourbon. This basic I’ve tried. Go out of bourbon this week.
Good for you. It’s nice to see you growing up. I mean, we need to put a little more hair on your chest and on your face. So this is the most
is the most facial hair I’ve ever had. Um, I know that it’s not nearly as much of a beard A z your beard, but yeah, the quarantine has made me very furry.
you can match the the regalia of facial for
that’s like a If ZZ Top was trying to be modest,
I tell my sixth graders that I’m just Santa Claus and training e Don’t do sixth graders still believe in Santa Claus? I genuinely don’t know some might. Uh huh. Okay, what we’re gonna be talking about is this idea of how do people, you know, approach or what? Let’s just say not how do people but what mistakes to developers make early on that they may not realize they’re making. Um, you know what flaws are there in the code that need to be avoided?
Can I Can I tell the story of how this topic came about?
I mean, you’re willing. This is as far as I’m concerned. You’re driving this show.
Like if you have a button on a form and you click the button, the browser will implicitly serialize the form data and send it to the target of the form. If you have a link, you can put a u. R L on the link as an HF property, and if someone clicks on it, it will do with a link thing that’ll take you to the place because all these like behaviors that we get automatically and then I don’t know why.
I didn’t talk to you about this before, but the I I don’t think I knew that this was an HR portal that you were using. You just talked about the link activity and stuff there in. I just did the same thing because it is November now, Um, our HR portal for benefits doesn’t work in Firefox. Why? I don’t know it. Like it literally does not worry. It will not let you in with Firefox. My God.
And that’s that’s kind of one of those same sort of things. Like it just makes me think What are you doing inside of this? That is so weird and proprietary that it doesn’t work in Firefox. That’s bizarre.
That that is so strange.
So we want to help you not fall into those traps in this episode. This is this is all about that stuff. So if you are a super experience step, listen up and you may learn something that you didn’t think about or maybe even doing for a while. We have say we may I’m sure. Erin, you’ve got your things. There are things I do that I know are not the best approached to stuff.
But, um, you know, sometimes you need to sit down and hear other people talk about it, and so we’re gonna try to help a little bit on that. I want to start with Mark up. Yeah, Mark ups. An easy one, I think, actually didn’t right here on the show. But I think one of the simplest things to dio Visa Vee markup is just learn it, learn mark up. It doesn’t take long. It’s not hard like you’re talking a day in a day.
You can know html markup inside that for the most part. But you you need to take the time to learn it. And I learned, and I think, Erin, you have plenty to say on this topic. I think, you know, we learned by doing a lot. Yeah, in the nineties and early two thousands. You know, we learned a lot by looking at other people’s code and copying and figuring out, and so we learned by doing on a lot of that stuff.
But you don’t have to do that now like you could just learn by learning.
Yeah, yeah, like, there’s plenty, Of course, is out there for this stuff and that lots of tutorial resource is, I think another thing behind this episode is is something that I’ve noticed. I’ve been doing this professionally for like 16 years now, and like I was running html in the mid nineties. Just I was doing it as an amateur, and I know that you were a similar right stick around first website.
Yeah, I think mine was around. Then I forget exactly when it was built
it on the library computer because I didn’t have Internet at home.
Awesome. When we you and I were starting, we were doing this stuff and, like, we kind of learned things as the technology group. And so, like, our knowledge grew with the technology with a fair amount of parody. Like, I don’t think at any point we knew everything, but in the body of knowledge, that was possible. I at least I felt like this. And I’m from talking to you. I think you did to that.
We had a decent grasp of what was possible and how to do most things. I don’t think that’s the case anymore with with the like, the Junior Debs entering the workforce, and I don’t mean this as a slight on them at all. It’s a circumstantial issue like there with boot camps, which are great. Resource is in a great way to get to fast track your way into a job that could be very lucrative.
You’re learning enough to be like functional in a workplace in a very short amount of time, and you can get a job and you can do the job. But you’re missing out on, like, some of the things that we’ve had the luxury of learning because we had a lot longer of, like time. So learning. We’ve had more time and more experience.
You don’t pick up a lot of the theory. Sometimes, you know, it gets to be kind of a monkey. See Monkey do, which is one thing that I really struggle with myself is I hate tutorials that show me code to do something, but then doesn’t say why they’re doing it certain ways, because for me, I like learning. Well, why did you use a for loop instead of a spread operator or something like that?
Like there’s there’s choices that are made on. We’re gonna talk about some of those choices in here in a few that so,
yeah, you and I both started doing HTML and we’ve done intestinal forever, and we did it. We learned it initially, which is like what people overturning now with boot camps and other. You know, getting started things. Um, but then after learning initially, we learned how to do it semantically and we learned like, you know, the correct ways to use tags.
And I don’t think I think there’s a lot of people entering the workforce right now that haven’t had that experience yet. And I think it’s important for us as, like, kind of the the old guard. I don’t know if that’s the right phrase or not, but
no, we’re old guard. That’s hard. Okay, I have wiped my beard. A lot of white in my beard. It’s I’m old. I’m old guard.
Eso us is the old guard. Like I feel like we have a responsibility to share this with the new people coming in and to show them, you know, that all the things that like this ancient technology that exists already, I love you juniors your great and I just There’s a lot of stuff for you to learn, and we older, like seasoned developers, want to share it with you. And here’s some of it here. So that’s kind of yeah,
So the first one on my list is, um, using header tags to control presentation.
Okay. What do you mean by that?
So you know how on h one is bigger than in h six? Yes, I One thing that I see a lot of our people using h tags because they want big thoughts. God. So Oh, well, that’s h ones too big. So let’s just make it in h 30 yeah, that’s about right. We’ll leave that with no regard for the fact that h tags toe. Use your phrase. I have semantic meaning. Exactly.
They affect the outline of the page, which, for most people, is in the big deal but is a big deal to search engines and is a big deal to anybody using a screen reader.
Yeah, the accessibility aspect is really, really important.
Yeah, a lot of this will come back. I mean, accessibility is usability. Is is doing things, right? I mean, that’s there’s This is a life cycle circle of life. Whatever you wanna call it type of thing. You know, eso a lot of this will factor into that, but yeah, that’s you know, it’s a simple thing, and I see it a lot. Not even with developers, but with content managers. You know you’ll get people who don’t understand. HTML.
All they know is if I select h two, it’s bigger than H three. So that’s what I want, right? And they don’t think about it from an outline kind of standpoint. But H tags are meant to develop an outline. If you need an H two to be small style, it’s small.
I’ve seen places where there are classes H one through H six and you, like you use the headings as you’re meant to be used. And then you just pick the class that you want to use for for size, which, like I mean, it’s technically not wrong. But like it just, it feels like, Uh huh.
And here’s what I’ll say we do that we’ve got in our pattern library cases for that because there are places where, for instance, let’s say, let’s say a normal H two is, uh is three Rambold and orange okay. And other places, you know, in H three is 2.5 ram black and italics.
Oh, and you want the h to look,
but yeah, On one page, the outline is not nested to that level or the artifact like if it’s, ah, you know ah, card in bed of some kind, like an article card or something that the designer may want the look of the H two on this element, even though from a Dom standpoint, it should be in h three. Got it. So it’s It’s Yeah, it’s about pattern application at that point, um, so that that’s why, at least for us, that’s why we have that available to us. That’s cool.
I like I. It works and it solves the problem. So it’s fine. E Just the first time I saw, though I was like What? Like I mean, I think the I think the reason I’m questioning is like Why would you call it H one to H six when you could use ah, more meaningful name like very large and very small and like, gradations in between? Um, like something that actually makes sense to human reading it versus using something that is replicating html uh,
for us. We we don’t expect a lay user to need to know that, like, that’s that’s us doing it in design, so to speak. So that’s why again for us if it works out fine, because It’s just a application of a pattern in template files.
Yeah, so I see the next one is P versus double break PR. I’ve seen that one before.
Yeah, this is another one, and I think it’s I think it comes a little bit on
that one before. Actually,
it comes from Copy and Paste. I think a lot e don’t know. I may be wrong on that, but I feel like that’s where I see it. A lot is in content that feels like it was copied out of note pad, for instance, and put people put into a with the wig editor without thought and, you know, oversight.
Do you think that’s because the with the wig editor is interpreting a carriage return wine feed as a line break?
I mean, sure, it has thio. Normally, I don’t think a lot of people intentionally right html that way, all but I do know what has happened like it’s i e. It’s something that exists out in the wild. And if even if it’s happening because you’re copying and pasting, it means you’re not paying attention to what you’re pasting.
Where that gets scary is if you are copying and pasting a lot of stuff out of, for instance, Google docks. We used to say this a lot can remember how notorious it used to be. Copying content out of word.
Oh, God. Oh, jeez, Michael. I hadn’t thought about that. Yes,
the nightmares, the anxiety that that would cause a web developer. Because
all right, we have. We have to explain this because I don’t think All right, so there was that the o tag, right? It was like, Oh, colon M s XML or something.
And and and And there was, like, a class that was like, Mso dash something. Yes.
Yeah. And then every every font styling would be done using a font tag. Right?
And every every piece of text, regardless of if it was formatted or not, was wrapped in multiple elements in most cases.
Oh, my God. It was It was so bad. That was the week Editors. Tiny M. C. I know. Had this, I forget fck editor had it or not, they would have a paste from word option. Yeah, which would clean up all the shit that comes in with words formatting.
It basically just stripped everything out. Yeah, yeah, but that that’s what it makes me think of the and Google docks is now sort of that I have that problem a lot because we have, of course, content editors now that send this content to put on the site and any time I go to copy it out of their Google doc, because that’s what our people use. Inevitably,
I get a P tag with a font, weight equals something and then a span tag and I have to go through and take all that crap out every single time because I don’t want It’s like it’s making the text bold and then manually restyling it to be normal. I don’t know why that’s a thing.
Uh huh. I Okay, so I remember. I know that I’ve done this and it was the late nineties and I was just doing my personal website. I didn’t think CSS existed yet, but I know that the margins on a P tag were too big. And I just wanted to have, like, a small line break in between a paragraph and I remember using a double line break for that.
Yeah, Yeah, because the line break is is line height as opposed to a P tag, which its margin could be Whatever is defined. Yeah.
Varies. Yeah. Um, yeah. I think that if you’re concerned about vertical spacing, the solution to that is to fix your p margins. Better define it, right?
For for the space you’re using in the context you’re using it in. Yeah. So the next one that I’ve got is Ah, simple one. Hold on. Oh, there’s that sound, uh, buttons versus classing buttons.
Yeah. So this is I see this a lot in, like, template ing CSS frameworks like bootstrap. They’ll have, like, button class, and then you’ll simulate buttons that are actually links. And like
this, this again is more of an accessibility thing than than anything else but buttons Air
tricky because you have input type equals button, and then you have button itself. And then you have lengths that could be made to resemble buttons by styling them with CSS
in input tight. So let’s go through these. Right? So if you are using input type equals button, this one’s easy, because it should Onley be used in a form.
Is this hype eagles? Buttner type eagles submit
well, both you Can you can submit means it’s a submit button like that’s going to trigger the form behavior, but you can have an input type equals button,
be Yeah, you’d have to attach something to it, obviously, but it’s It is meant to be inside a form element and nowhere else. You should never use that anywhere else on your page, on a normal button element like literally button tag. The button tag has sort of the intrinsic quality of being something that is an interaction. It should do something on the page. If you If you click it, it should increments something.
If you click it, it should pop something up. If you click it, it should do something interactive function. It should have a function on the page, usually where you have an A tag that is just classed button is when you just have a link that has to go somewhere and you’re trying to create a repetitive you. I element that looks nice.
And so the classic example of this is the read Mawr button, you know, or get more information or apply now like we make buttons that are what we call c t a s calls to action. Those air. Fine. But what happens is people start to use one or the other. Mhm always as opposed to use them contextually. Correct. Yeah, it’s all semantics, and a tag should always go somewhere.
It’s funny when you see a button that has class button.
Yeah, I’ve seen that.
I understand why Sometimes you have to do that. But whenever I see that, I’m like, why don’t you just style the button element and then do a SAS mixing of the styles
death? I I do always make sure that that is in my CSS.
Yeah. No, I think that’s that. That makes sense if you wanna have, like, a link that functions as a link and looks like a button. Okay, um, but like, it should be clear that it’s like what the function is.
Yeah, and it should go somewhere you should never have, because where this gets a little gnarly is when you start seeing a tags that have an h ref of hash
They hijacked the behavior and then make it do something.
Yes, they did jobs to avoid for the A draft. And then, uh and then it was like it was on click with. Then that would handle the link thing. And I’m like, Bye. Why would you do this? And
what a lot of people I think don’t realize is what does a stand for what A has a semantic meaning anchor, right? Yes. Okay. It goes somewhere. It it anchors your behavior to a location. And so the whole point is, if you don’t have an h ref on it, that goes to a u R l of some kind or to another point on the page. Then you should be using the button tag. Yeah, that’s I
will say in the html one point of spec. I think most of the tags were very, very short. So it was like a tag for link for bold I for italic over. No, no. You for undermine.
Oh, God. Yeah. You
member. That one. Okay. Haven’t used that. Have a
have a picture of me and a little little baby. You just sitting on the on the shore of the beach looking out before it grew up.
Uh, huh? Yeah, but like, there was a lot of single letter tags because you had to type them by hand and because, you know, space was a Yeah, space is a commodity. Then
a versus anchor saves you four bites.
Yeah. I mean, the funny thing, though, is that when I think it was when html three came out and you had the link tag which would be used for linking like a CSS document to the page you So you have a link tag, but then you have a tags, and so I feel bad for anyone. Had to learn html that at that period would be like, So I need to use the link tag to make a hyperlink, right? Well, no. Using a tag,
that is a fair point. That is a fair as a usability issue with HTML, I will acknowledge. Yeah. So buttons versus anchors and classing them is buttons is just all about knowing when to use the right one button should be used for functional stuff on the page. Anchors should be used any time. You’re going somewhere. And it’s pretty simple and straightforward.
Use the right one for the right place. Um one mistake. I see a lot, and this is kind of a simple one, and there’s not a lot to say about it, But it’s just duplicating knave,
I think I know what you mean by that.
Yeah, Talking about like mobile devices. So you see this a lot with responsive design when people are first getting into responsive and they wanna have, ah, menu for their desktop and a menu for their phone. And instead of designing a responsive navigation, they show or hide a navigation based on a media query. This is problematic because you have to knaves in the dom on and what we discussed.
Remember when we were talking about political websites and one of the criticisms I brought up was when you were If you were using keyboard navigation, if you were accessibility, stuff it, it will can not. It will always, but it can tap into hidden navigation like that. So it’s There’s no reason to to duplicate that. Yeah, there’s just no reason to do it.
Um, it’s just a matter of learning better CSS and media queries to re architect, realign, redo whatever it is you’re trying to do with that, May not have whether that’s make swipe a bill panels or sub knaves or, you know, sub drop downs, things like that. Like it’s all all that’s possible. You just have to do the little bit extra work for your media queries,
right? Eso the next one you have in the West is time, and I know of the time tag. I’m not sure. Yeah, so the time tag is for when you’re multiplying content, right?
Donde esta la biblioteca e don’t know why this is funny to me time. You know, the reason I threw the time element in here is because we I’m sure we covered this. We we didn’t episode. We don’t know Season two about html elements that aren’t used enough. Oh, yeah, yeah, yeah,
I remember that one.
And the time tag was included in that. I’m including it again here because time is so relative to borrow from a good friend of mine, man. Mr. Hawking, you don’t worry about it. Um, Steve, time is something we deal with. Whether you are writing a blogger or news site or even, you know, posting products or things. You know, we have time displayed on our website in so many places. Mm.
And yet time and time and time again, no pun intended. Those things get wrapped in a div with a span class equals month. All of this there is a time element you can wrap again. This is about applying semantic meaning to stuff. And because we use time so much in development in presentation, not using that element is just wasting semantic value for your page.
I think that this and then the next side and that we’re gonna talk about also is underscoring this general concept that when you’re writing HTML the semantic meaning of the mark up matters. And I think that’s probably maybe, like, kind of the take home. If you are new to the game and buy new, I really mean like, five years or less, like I’m including people three and four years in this.
If you’re new to the game like this is something that’s really important is that the tags themselves have meaning. I don’t care if you’re writing react or rails or PHP or whatever use the right HTML tags and the more correct your HTML is, the more machine readable it is, the more accessible it is, and the more that you could do with it, it’s It’s an important thing.
I’ll take it a step further because it’s one thing to talk about. Like I It’s easy toe. Learn how to write an anchor tag or learn how to write an input tag and sort of the sterile. Here is the way this tag is written. Semantics is all about how tags relate to other tags and your HTM and the meaning that that creates as a sort of a vocabulary for the code. That’s what semantics means to me anyway.
And like when I talk to people about it, so that that’s why this becomes important. Because time is sort of thio. Borrow another phrase that we’ve latched onto an indium. It’s an idiom of HTML, and so we are using a MAWR robust and meaningful system of talking when we use these elements. Yeah, I think that’s a fair way of putting that. Sure, my next one is similar in the sense of
I was going to say, I think this is very similar. You have omitting the A B B R tag and A B B. R is a very ironically short for abbreviation abbreviation E Appreciate that
any time you know and we we go through this all the time, right? We try to say, you know, well, I say html, let’s stop for a second. Make sure people know that’s hypertext markup language. You know,
it brought eso the This is another place that semantics play in here. So when you take an acronym or abbreviation and you wrap it in a PVR tag and you give it the property, which I want to say is title, yes. Um, and then you spell out the thing, then that on its own doesn’t demand any specific behavior. But the browsers have kind of a contract or compact, I would say with with the semantics of HTML.
And they will say, Well, if someone’s going to use an A p B are tagged with the title property, we’re gonna infer that what they mean is they want to convey, You know, this is the expanded version of abbreviation, and we’re gonna present that in this way, and the browsers can. The browser designers or software engineers can decide what that means for their browser.
When you choose to participate in the semantic meanings and behaviors of these tags. You’re participating in this kind of not relationship, but the agreement with the browser designers that by using your HDL correctly, they’re going to present it correctly for you
and again, S E o meaning screen reader remaining, Um, and it’s just helpful. Its’s It’s just flat out helpful. Um, the final one on here is again related to semantics and the big semantics, like I mentioned relationships between elements not using labels on your fields, or at least not marking them up properly. Um, I see that a lot. You know, when people make forms, they’ll put inputs in there and text, and they’ll just use P tags.
Line breaks br br, um, toe make the space in their form, but they aren’t wrapping the text in a label tag for the element that it’s related to again helps for semantics. Helps for screen readers. Helps for interactivity. Makes your hit box bigger, especially for check boxes. There are a lot of reasons why that’s super vile, but it’s a really common mistake that people make.
I would say that whenever I have been at places that have gotten accessibility audits either there may or may not have been lawsuits involved, including label tags on the form Fields has invariably been like every time that comes up. So it’s It’s a really easy thing to add, and you get a lot of behaviors for free with how that works, like the browser will pair things together better. The
browsers will usually even if you don’t have a four attribute on a label. Generally, browsers will attach a label to the nearest sibling input by default. But obviously, I say having the for attribute helps significantly make sure that nothing gets screwed up, especially if it’s after. Like some people put stuff after a field instead, especially with check boxes and radio buttons.
I love my life. Michael. I’m sorry. So don’t tell me how to live my life. Michael
e. I say this as kind of a proxy for you know, the people who used toe sort of learn PHP by virtue of doing WordPress, but they didn’t know they were learning PHP. There’s a lot to be said for sort of the training wheels that wordpress gives you, or that Jake Weary gives you for these languages.
But I think where we are as an industry with browser support and all of this I agree with Chris for Nandi Vanilla Js learned that first learn, learn that base stuff long before Jaques. Because the thing is, now, Jake Weary is gonna start beat you bad habits. You’re gonna lean on it. And as a result, you’re gonna blow your code. You’re going to slow down your site because you could do it much quicker with native code.
the thing about it is that you know Jake weary. Yes, it’s easy. Yes, it’s fast, but at this point you are short changing yourself in skills that will make you more valuable as you progress if you just learn to do stuff in in vanilla Js. And in fact, what I’ll do is I don’t have it here in the in the notes. But as I edit this, I’ll make a note to myself. Uh, well, I’ll throw a article, a document rather in the show notes from use user named Nafie.
He’s gotta get Hub Repo That shows you basically how to do all the common stuff in J query using vanilla Js Oh yeah, I think I’m sure I brought it up or linked it in something else, but it’s it’s very useful. Um, it’s a great way, like if you’re gonna do a dot Fine, what’s the quicker way to do it? Or what’s the better way to do? Adopt, find And, um, yeah, check that out.
that. There’s really, really, really hate that.
You need to make sure you check. What if it’s undefined? Then should we still run, or should we console, log it and move on? You have to handle errors and not handling errors. In Java. Script is a major, major issue that will slow you down and prevent your users from using your site.
Eso you have inefficient Dom manipulation. What do you mean by that?
What? What do you think I mean by that? Um, think about all the ways that we have to grab stuff from the dom. Right.
Okay. Okay. So, like, so, like, if you have an inefficient Selectric, right
So this gets into the differences between things like very selector, very selector, all get element by class. Name get element by I’d, um these our great utilities, you know, they basically take the place of the sort of dollar sign parentheses, grab, You know, whatever class name you put into it. For Jake weary. These were the analog for those in different context. That query selector all is incredibly greedy and e mean at scale.
Very, very inefficient because it is literally having to traverse your dom every time it fires. Whereas get element by I’d is much more efficient. Yeah. And again, it’s one of those things where, when all you have is a hammer, everything looks like a nail. Once you decided. Well, query, selector, all that works for everything I need. I’ll just use it on all of them. It makes a lot of sense if you can.
I d something in your code and use. Get element by i d. It’s gonna make your Java script faster and your page more efficient. Even if it’s small already. It’s still, you know, again, this is one of those things where I learned to do it right because five years from now, you may be working on a site where that will matter. And those differences could be what gets you a job or doesn’t get you a job.
Look at the library site, back quite a few episodes back, and one of those had, like, panels had the widgets on the page, and and everything was clickable, but it was all span tags. Yeah, so don’t don’t do that either. Okay? So, CSS some of these come from an article over a painless CSS dot com, the top 10 CSS mistakes.
I think I threw one or two of these in from my own. First of all, same thing using overly specific selectors. And so this gets into classes, nineties. So I like this sort of piggy backing this, uh, this discussion. Have you ever looked like the sort of equation that gets used for CSS specificity.
Um, we talked about this with in a previous episode. Yeah, I remember if it was the one of Dustin shower or not, but it was a previous episode. I remember talking about CSS specificity. Yeah,
I don’t remember where we talked about it, but basically there is. There is an equate. It’s not an equation is maybe not the best term, a convention inequality. That kind of There’s like a four digit number that gets computed based on the specificity IEDs, classes, elements and in line and trying to determine what overrules what’s when you’ve got the streams of selectors. How do you know which one should apply over another?
Or if you’ve got selectors that use different class names but ultimately target the same stuff? Which rules apply over another? One of the ways this breaks for people is that a and there’s, I’m gonna say, straight out there are different schools of thought on this. I am one that says don’t use IEDs in CSS. There are reasons to there are certainly, you know, everybody’s code is different.
Everybody’s you know needs are different, so you may be in a situation where it makes sense.
Are we talking about performance reasons?
Mostly performance reasons. Yes, it’s mostly about the fact that an I d is top tier specific, aside from a style tag, Uh, and that quality makes it very hard to override as a consequence of it. Um, And so if you’re using IEDs, you’re setting yourself up in a position where you know, if you need to change the way something looks on one page versus another, you can’t do that. You can’t apply an ID multiple times on the page.
So if you’ve got a reusable style, you can’t reuse it. If you’ve used an I D tag, um, so IEDs generally should be avoided. The one area where I like it is using IEDs to kind of name space, a set of styles that makes sense to me. If you need toe, isolate something kind of away from it. Using an idea, sort of. The parents selector can help lock that down.
I say every use case will be a little different, but by using classes, you can create these nice, reusable chunks that don’t have to be super specific.
The way that we used to do it. Um and I know it doesn’t get done this much anymore because of CSS frameworks, but you would have the i d tag would basically define the different sections of the page. So you have and I d For like the knave area. You have an i d for the body, like the content area or the main. Sometimes you have an i d. For the header I’d for the footer, and that would kind of that would kind of be it usually in west.
It was a really, like, an important reason, like ad space number two or something. But that would be it for IEDs, and then everything else would be classes underneath it. So you you’re now of items would be, you know, class knave item, and your articles would be class article. This is before the article tag existed. But you would be The IEDs would only be a few of them on a page.
Most of the styles you would use after that would be classes. Or you would do like Michael was saying you would use the start with the I D. And then you do a CSS hierarchy. Yes, so content and then p and then a and then you would say like, Well, what does it link? Tag? Look when it’s in the content paragraphs
from a performance standpoint, the longer you make the selectors, the more dense they are and the longer they take the process is a consequence. If you know, chances
are your page is probably not complicated enough for that performance.
Probably not a t least it. First, I say you end up in a big company and getting the similarly satis files using, for instance, direct descendant attributes and stuff in your selectors starts to make a big difference because that helps narrow down the specificity so that it can, you know it’s not traversing. Ah, whole ancestor tree. There’s an article. There’s an article.
Oh, there’s a rto.
There’s an article over at slice jack dot com that gets into specificity and how it’s calculated. I’ll throw that in the show notes in case anybody wants to dig in, because I think it is really important. If you’re writing CSS to understand how the selectors you write affect specificity. I think that matters a ton. Actually.
What do you have? What it says pfp X. What do you mean for the pixels, like patting OK
over over reliance on using pixels as your measurement scheme Because pixels don’t scale. Pixels are fine to define, like your base font size. But beyond the at the pages based font size, you should be using rams and EMS for everything. For the most part,
right? And so EMS are EMS are oven M character, and then realms are the width of a nem character at the root, right, like a route
so it basically comes down to Is the size relative to my parent or relative to my roots? I use rims for almost everything. Um, there. There are rare occasions where you will want something relevant to apparent, especially if you’re dealing with image sizing or something like that. Most of the time, I like Rim’s just because I know my based font size of 16.
So I know you know all my math can factor off that Why that matters is when you start zooming pages, being able to scale pages and have them scale seamlessly and beautifully in in terms of getting bigger and smaller rams or what make that possible
right okay, s we have building media queries from large to small
mobile first still a mobile First World.
Let’s But let’s let’s go into that. And more like for media queries we’re talking about in your SAS, I guess you could do it. Yeah,
it’s normal, CSS. But yeah, SAS lets you do certainly crazier stuff. The idea being you.
You define like men with Maxwell, right
build for your smallest with first, not your biggest with we tend to build for desktop because we’re on a desktop. When you’re writing all this, the reality is taking a desktop layout and writing code to conditionally change it as it gets smaller is significantly harder, then writing something linear for a small screen and then writing CSS to change it as it gets wider.
That’s a good point. I don’t do this.
Yeah, it’s a hard lesson to learn, and it’s Yeah, I’m I don’t know if it’s un intuitive, but I know that it’s definitely something that until you’ve done it and really thought about the way responsive stuff works, it doesn’t make a lot of sense until you see that in action. But the whole thing comes down to you know, mobile device tends to be very linear.
It’s very 1234 in a column at most, you may have something side by side, but on a phone you’re so limited on horizontal wit that you’re not gonna have a lot of stuff. Taking something that isn’t linear to begin with, and forcing it to be linear is much harder than taking something linear and then moving it around as you want to. This is where, and we haven’t done an episode on it, but one is coming on like CSS grids.
CSS grids are a revelation in terms of responsive design and figuring out, like how to take something linear and make it, you know, all gritted out and moved around and look nice on a wide screen, but that it’s just this idea that it’s you’re going to save time, and it’s gonna make your site better by building small tow large than large, too small.
I like that on the last one. I have his Web fonts, and I don’t I know what Web fonts are, but I’m not sure what the point is
here. I should have put more notes right Web funds is all about size. It’s just about the amount of data we’re packing into request. People like Web fonts because it’s an easy way to make a site look pretty. But it’s also an easy way to make a site huge, you know, like Web fonts, especially if you start getting into variable fonds. Those files are enormous, and you are really gonna you’re gonna very quickly make your site wildly out of control in terms of the payload size.
So that’s that’s actually a really good point, I think. What’s that you’re using a Web font like you find a really cool font and you’re you want to use it for, like the header of your image or something. Um, like the header of your site. It would be better to rast arise that as an image and then do an all tag or a title tag on it rather than loaded as a Web font.
If that’s the only place you’re using it, because the image will probably be smaller. And if you’re going to use a Web font, resist the urge to use like a really fancy or wild looking fun, especially if it’s for your body copy or
resist the urge to use every variation of it.
Yeah, the point of a website is to communicate words and communicate ideas. So don’t create hurdles for your users. I mean, font is important, and I’m not trying to say that, like, we should all use times new Roman or Ariel or whatever, but And once you have a really good reason, like go with a basic fund I mean, if you could just use a plane San Sarah font, or use one that is on most systems or just provide like a you know, the fail sequence with, like, uh, aerial, then Sand Saref.
So, like the font family property is really good for that. And if the fonts available, that’s great. And if it’s not, then it should display. Okay. Otherwise,
the last area I have his media before, I’ve got this sort of generic one coming up after this. But the only thing I have to say about media is optimized your imagery. Don’t take a photo on your DSLR and upload it straight to your website or even on your phone. These days, um, optimize your your imagery for either the with that it’s gonna be or the displayed up that needs to be. You don’t need 8 May images on your site. That’s a big one. Check
Check. Episode 45. Yes, it was images, formats and optimization.
I beat you to it. This time I had actually looked up. Which episode number It was because I’m tired of always getting one up on that. Uh, yeah, just make sure and there’s Yeah, we have a whole episode that gets into how to optimize your imagery and why? Um, and it’s just a thing where it’s so easy for somebody. Take a picture and just throw it on a website and not think about the fact that, oh, that image is huge, especially if you’re on a fast connection.
So be considerate of those users who maybe have limited bandwidth. The last area is just accessibility. Generic accessibility. A lot of what we have said applies to accessibility, but there are some a few very basic ones. The first is the obvious, which is not taking time to put in all the tributes because you’re lazy. Stop being lazy and write your damn all the tributes.
There is no reason not to. It takes you a few seconds. I admit I’m bad about it on Twitter. Now that they support doing it, I’ll upload images and not write a description I should, and I’m lazy, and that is not good on me. And that is not good on you if you’re not doing it so alter tributes. It is okay. Toe Leven, alter tribute blank. If the image is purely press are purely decorative. It helps if you put role equals presentation on that image.
And in that way, a screen reader knows specifically that that image is not meant toe convey information. So all the tributes That’s cool, man. Do it. Tiny hit boxes. So this is one that’s gonna come up in. We had 2.2. You have a minimum hit box size and and we had to point to its 44 pixels. At least it was in the last, uh, release candidate that had come out. Um, it may have changed since then, but 44 pixels was the minimum.
Stop making stuff small. Where I see this is a problem is when people use icons for things like, you know, your profile, you’re going to your profile and even edit icon and stuff like that. And they put that little cog up there. But the cog is like a 16 pixel cog. Uh huh. 44 pixels. That’s that’s gonna be the minimum standard for accessibility. Compliance.
Um, and it just makes it easier for your users. Why are you making me precise with my mouse on it? Two K or four K monitor. Give me some room. Don’t
need that level of density. Give
me some room. Um, and then the other one is just making choices that fail. So this one is a little more abstract, and it’s one that you you have to take the time to learn some accessibility stuff. And I know it’s so easy to just jump in and start writing code and start building a website, but you need to take the time to learn things. Color contrast is a big one. Learning not to put certain colors on top of each other.
You know, white on yellow or yellow on light is a common one or white on orange. Um, you know, for alert stuff doesn’t work. You have to use a dark orange like a burnt umber type color because you don’t past color. Contrast standard, and you have to care about that to do it, because the browser will let you do it. The browser will let you write that code. It’s you who have to stop yourself from doing it
if you have. I’ve actually been dealing with this in the past couple weeks. If you have text displaying over an image that may or may not be light or dark like, you have kind of like a template, and the image is going to be varied, depending on how the template renders. You can use the what is a text shadow.
So use text shadow like two PX two PX black, and it will give your text a nice black outline that will always give you contrast on the text. Regardless of what the background color is.
The other one is stuff like People will frequently do things like, Well, I don’t I don’t like underlines under my text, and so CSS will let you remove that so that you’re
yeah, so links won’t be underlying links need to be underlined. You can’t convey meaning through just color. And if the only way people know something is a link is because it’s blue. That’s not good enough that that is not accessible at that point.
The contrast between black and link blue color is not very no
no, not at all, especially if you are full color blind are, uh, have to run it through. I think one of the other ones you have to be full color blind, one of the other ones blue turns black. Basically, you need. And let’s say it’s a design decision, and it’s one you can make in a vacuum. If you don’t know things about accessibility you don’t like. Underline.
So you just take him out and you don’t consider the fact that people need underlines toe. Identify what? What’s clickable on your page? In some cases,
the I think the gold, the gold standard, is using the standard blue link text that your browser gives you and the underlying that your browser gives you. And that’s what used for links. Um, and then if you have to do different than that because reasons have a good reason for it.
I hope this helps you out. I hope it gives you some insight into the things you can try to avoid from a pitfall standpoint and things you couldn’t sort of adapt to and change and tweak. Make sure your stuff is better. The big thing is always be looking towards what makes your code better, what makes it faster and more efficient and more just right. Um, don’t assume that just because you learn something one way that that’s the only way question.
I hope everybody enjoyed tonight Show Stick with us. We’ve got about three more shows left for the season then then we’re out of your hair. But actually we won’t because we’ll be right back in January. But we’re gonna take a break. Probably somewhere in there will be imaginary to you guys. If you want to contact us, though, don’t be afraid to reach out. We’re on Twitter or Facebook at slash Drunken UX on instagram.
You can hit us up at slash drunken UX podcast. You can always chat with us at Drunken UX dot com slash discord and that will get you into our friendly neighborhood discord server. Erin, I appreciate you joining me this evening and spending time out of your night. No, it’s been busy for you and that you’re a a guy. Citation needed mean with beards. Kind of a giveaway. Um, e mean, least in my experience, uh, folks stick with us.
We got a lot coming up for the rest of this season. We’ve got some exciting stuff queued up for next season. We’ve also got a couple more surprises left for 2020. I think that maybe of I mean, it’s gonna It’s of interest to us. I’m always kind of trying to stack up a few things here. All I care about is that I think they just keep your percent is close and your users closer. No jokes this week. Yeah. Bye. Bye. Bye.
This episode of The Drunken UX Podcast brought to you by nuCloud.