Hello my friends, let me get this situation going. Okay, oh it is another Wednesday, just a couple minutes late today. Thank you all for being here, drop a hi in the chat. If you’re new here, if you’re new here in the chat just let me know you’re new, let me know you’re new and that you’re tuning in. What’s up Calisthenics Ireland? What’s up, Steve? We got Carl. We are on StreamYard again today. We’re going to see how it goes. Ruben is here. If we cancel today, I’m going to request a refund on my ACSS.
Why would we cancel?
We’re not canceling. We’re not canceling. We’re good to go. We never cancel. We’re always here. If it’s on the schedule, it’s happening. A hundred percent. Man, today is probably going to be a good one. Pablo, Nick, Patrick, Suzanne, Daniel, what’s up, what’s up? All right, so let’s talk about what we’ve got on our agenda today. First of all, if you are new here for WDD Live, what we do is in-depth web design critiques which help us learn a lot all together about all of the things that make a website successful. We deep dive everything from SEO and copy to the overall design and the user experience. We look at accessibility. We look at a lot of different things. Now it depends on the quality of the website, right? Sometimes we get really hung up on certain things. If something is really needing improvement, I guess that’s the nicest way to say it. If things are really needing improvement, then we got to talk about that a lot more. If things are really buttoned up and tight and clean, then we get deeper into other areas, okay? We take a look typically at the most important things first. Like if you’re failing the most important things, there’s really no reason to go deeper and look at other things. So we, cause we got to get, we got to get the main stuff right. Keep the main thing the main thing. I don’t know. I don’t know if that’s relevant. Okay, we got Rob in the house, videos, music, stream says, let’s go. You seem like a new face, maybe. I don’t recognize that. Don’t forget to like the stream, Ruben says, absolutely. Make sure you hit those likes, throw up those likes. Gonna pause a little more. Okay, Calisthenics Ireland says he posted his new site on the inner circle feedback section. He’s going to polish it a little bit more and submit it for WDD. I would love it. We get a lot of sites submitted for WDD. Listen, I was just reviewing one a second ago. I just take a quick look at them basically. I don’t make the cut for being on WD. Like if it’s just really not great, like it doesn’t really help any of us to look at it all that much. So, and I don’t, you know, contrary to popular belief, I don’t like just bringing sites on to just roast them. Okay, this is not a roast show, okay? This is a let’s actually talk about things that need improvement and why, and then people can actually learn. But if we’re just roasting websites, nobody’s really gonna learn anything. And it’s probably gonna get boring after a while. So yeah, that’s not what we do here. So a lot of websites just don’t make the cut necessarily. Now, if you’ve submitted your site and you haven’t seen it yet, it doesn’t necessarily mean that it didn’t make the cut but you know you can after a month let’s say a month after a month go ahead and resubmit it and and see what happens if you keep resubmitting the site is not making the cut I’ll just I’ll reach out and let you know but that’s kind of how it is that’s kind of how it goes. Josh says what about my FSE site? You can submit any site it doesn’t matter what it’s built with yeah you can hand code a site and submit it. Um, WDD Live is builder agnostic. It’s platform agnostic. It’s, you can make a site with Webflow, Wix, Squarespace, whatever. Now, if you make a website with a shitty builder, uh, you know, when we open the DOM and take a look at that, we look at accessibility. I mean, you’re probably going to be failing in a lot of those areas if I had to guess, but that’s, that’s how it is. I mean, we wanna see that. We wanna see that. You know, sometimes when I, one of the best, I think one of the best types of WDD critiques is when we bring a website on and visually it looks really good. It looks like an actual website should look. And there’s nothing obviously wrong with it, but then we go deeper into things like, is it accessible? Is the DOM clean? Is it like, you know, how’s the copy? And we look at all of these things and various user experience aspects. And we start to uncover and that, that really demonstrates how a lot of people will see a website and be like, oh, that looks like a good website.
Right.
But if you take it up a notch and a professional looks at it and starts to break it down, now we start to see chinks in the armor, right? And we start to see, oh, there’s actually some glaring issues here that most lay people would not have noticed or seen. And a lot of beginners can learn a lot from that. So that’s kind of one of the best kind of sites to bring on. But yeah, it does not have to be a WordPress site, doesn’t have to be on Bricks, it doesn’t have to be on Oxygen, doesn’t have to be with automatic CSS or frames or anything like that. It’s just submit your website and let’s go. Let’s go. All right, so after the one, we’re going to do one website critique today. I’ve got one website to critique and then we are going to do something that we have not done before. There is a content creator who created a video and it’s something about, what is it called? Let me look up here. The horror of margins in CSS. The horror of margins in CSS. We’re gonna watch this video together and we’re gonna break it down. We’ve never done this before on WDD Live or any live stream really, or really any video on my channel. I have not done any type of segment where I, let’s say, call out another content creator necessarily. I do talk about things they talk about, but I talk about them in general. I’ve never actually specifically called one out or brought their video onto the stream or whatever. And we’re gonna attempt to do this today. Now, I tend, I just wanna set this up. I tend to feel like if you are creating public content, you’re open to having that content critiqued, and people can do this with mine. I mean, if you feel like I’m teaching something that’s just totally ass backwards, make a video about it. I don’t care. Hey, if you’ve got 200,000 subscribers, definitely make a video about it. I’ll take the free advertising all day. Okay, so, but yeah, it’s like fair game. If you’re gonna make public content, I think you’re putting yourself in the public space. People are allowed to critique you. They’re allowed to discuss, I think, right? Drop in the comments and let me know. Let me know, is it fair game to take somebody’s video and critique it and break it down and perhaps say some negative things about it? If it’s, you know, maybe they’re teaching things improperly. You know, this whole like, let’s all hold hands and sing Kumbaya thing, I don’t think that really does anybody any good, you know. You know, we could also do videos where we break down really good content, but I don’t know, there’s a lot of good content out there, I think that might get boring. You learn a lot from content that’s not so great, especially, and by the way, you know, there’s a situation, maybe we put this in context, okay? If there’s a new creator, like, it’s a new creator, they’re getting their channel started, all this, they got 2,000 subscribers, 1,000, 400 subscribers, whatever, and they’re clearly, you know, like working on their game and they’re building it up. That’s not the kind of person I’m talking about, okay? I don’t – I let those people do what they do. This creator has 161,000 subscribers. I think that’s a little bit, now we’re in a territory where it’s like, okay, you’re reaching a lot of people and you’ve been doing this for a very long time, what are we doing here? That kind of thing. So I think context is important, right? I’m not talking about like, oh, let’s, every creator that comes out of the woodwork that’s trying to get going with their channel, let’s roast them or something. That’s not what I’m talking about. I’m talking about like people who are you know already kind of top of the pile and it’s like what kind of information are they disseminating to everybody else. Calisthenics Ireland says very fair as long as and then the comment cut off. So I don’t know what you are about to say. Let’s see you can’t grow without being being wrong. True, true. Just be professional about talking about others. All right. Well yeah, I mean I’m not going to call him names. I’m not going to make fun of him, his appearance or anything like that. I’m just, we’re going to talk about his content. We’re going to talk about the arguments that he is making. Is it only me or is the automatic CSS background a little blurry. Well yeah, you know, it’s, I uploaded a 3000 pixel background image for this thing and they still compress the shit out of it. So it is what it is. Very fair as long as the criticism is valid. Okay. Alright, well let’s go ahead and get into it. We’re gonna do it, so that’s gonna be our second segment. So segment number one is the first website critique. Segment number two is this, the horrors of margin in CSS, and then segment number three is Q&A and AMA. You can ask any question you want, could be business related, pricing related, SEO related, dev related, whatever you want, AMA. It’s ask me anything, anything being the key word there. Okay, let me get my hotel website up here. This is the site that was submitted. We’re gonna take a look at this and Let’s go All right, everybody should be able to see that I do hope when we get to that second segment where we’re doing the critique of the other Content that we can all actually hear it and see it together. I’ve never done that on a stream before I’ve got a giant mixer board over here. Then we’re using stream yard where hopefully we can get it technically figured out so that we can actually get through that segment. But you guys might have to help me when we get there. Okay, I think about it a lot when I see YouTubers and big influencers advising Elementor, Divi, and others as the best builders in the market. It’s so bad. Yes, that is quite frustrating. Okay, let’s do this. Hotel Bella Vista. So, no scroll test. We have to figure out, can we figure out what’s going on here? First of all, I’ve got to translate this. We don’t, I don’t know this language. Okay. Come and live in an unforgettable experience. Book today and save more. And then there’s a promotions button. We do see the Hotel Bella Vista branding top left. We have a very simple nav across the top, which has no drop downs, which is interesting. I mean, a hotel website with no drop downs, not something you see very often. We’ll see if that gets the job done up there. Then we have two, oh, okay, hold on. It’s got translation built in, it appears. So let me not use the Google translator. Let’s use the website translator. Okay. Home, US, rooms, restaurants, spa, heated. Okay. What is going on with my mouse? It’s like jumping. Okay. I am streaming to multiple locations. One thing it does say is, hey, you need a lot more resources to stream to multiple locations. I may stop doing that. Okay. If we have any technical problems on this stream, I may just go single location, we go straight to YouTube and that’s it. Okay, why did this not, look at this, this did not translate right here when I use their translation tool. So that’s definitely something that you might want to look at. So the no scroll test, I mean I see what appears to be a fairly nice hotel room. I mean nothing obviously wrong with it it doesn’t look spectacular if this is like the best hotel room that they have I don’t know if this is the best shot that they have I mean Hotel Bella Vista and this is in Puerto Varas I don’t even know if I’m saying that properly is there the first thing in my brain is like is there some sort of scenic view that we can give people? Is there anything interesting outside the hotel? Because this, as a hero, remember this is the hero. This is the hero, this is supposed to be captivating. This is supposed to be grab their attention. I’m just looking at what appears to be a very mid hotel room, right? So is there something else that we can offer here in terms of imagery that can really capture, captivate, get people absorbed into this website so they start scrolling around and they wanna learn more. That would be my first thought. Second thought is, this is a very small, oh gosh, it’s a slider, okay, all right.
Let’s go back.
I can’t even get back to the slide that I was on. Where were we? Okay, there we go. A very small heading, like again, hero, supposed to capture attention. Most important, most important, stop switching. That’s why I hate sliders. I absolutely, I detest these things. I detest sliders.
And here’s why.
If you’re new here, I mean, we’ve talked about sliders before, but if you’re new here, so here’s the first slide that I see. And by the way, it does not auto slide. So, and those arrows, if you notice, okay, only appear when I hover over the slider. So if I’m not hovering over the slide, I don’t even know that that’s a slider. So what you’re doing is you’re taking important content, I assume that, I mean, it’s not, this is not well done. This is not important content right here. So saying rest, enjoy, and relax with us, family. We did not need another slide here. This is an example of why, okay, so I sit down, I ask, so let’s talk about this, why does your website have a slider? And they’re like, well, either A, the client was like, I really like sliders. Let’s go ahead and put a slider there. Not a good reason to have a slider. Or two, the developer says, well, they have a slider element, and I thought it’d be cool. Also not a good reason to have a slider. Sometimes you can make the case that it’s like, well, and I don’t even know, because I don’t use them. So I don’t even know. I can’t, off the top of my head, I can’t think of an example where I would make a good argument for a slider. Because at the end of the day, what you’re doing, let’s just assume that this slide is super important content. Well, if it’s super important content, it shouldn’t be slide number two in a hidden slider with hidden controls. Because you’re just hiding content that you just claimed was super important from the visitor. In fact, I would say, actually, this is a great use case for a slider because you’re hiding irrelevant content, which is fine. I mean, it’s irrelevant, so go ahead and hide it. All right, so you understand, we don’t like the sliders here. We don’t like the sliders. But we need to make these headlines much, much, much bigger. And obviously, same thing we say on all sites, I mean, this copy, it just leaves a lot to be desired. Let’s go back to the main slide. This was the slide that they claimed was the most important. Visit us for a lifetime experience. That’s misspelled, by the way. But, first of all, I’m not having a lifetime experience in that hotel room right there. That’s a mid-hotel room. I’m not having a lifetime experience there. Talk about something else that is going to be great about this experience or give me a better visual to go with it. And then book now and save. This is what I describe as lazy copy. This is just very lazy. Let’s say the obvious thing. Hey, every website says book now as their call to action. And then, I don’t know, what are we saving? I’m not sure. We’re already talking about discounts. That’s not great. So the whole hero situation just needs to be rethought. Ditch the slider, get better copy, and let’s move on. Okay, so now we’re, oh God, oh geez. So they’ve hijacked my scrolling, my scroll bar. Scroll jacking, also not a fan, not a fan of scroll jacking. Leave my scroll bars alone. Leave my scroll behavior alone, okay? It’s got this like smooth scroll effect on it, so I end up, look, I wanted to go down a little bit, oh gosh, I’m past where I wanted to scroll, look at that. All right, let me try again. I’m gonna go down just a little bit, oh, okay, I gotta really baby it. I gotta really baby it to go to where I wanna go. If I go, if I’m too aggressive on the scroll, it’s gone. It’s gone. And then I got to try to go back up. So scroll jacking, X. No, no. Get rid of scroll jacking. Get rid of sliders. Stop all this fancy shit. Like if we can’t get the copy down, here’s what I always say. If you can’t nail the copy, if you can’t nail the design, if you can’t nail the user experience, stop with all the chintzy shit. Stop with all the cute features, okay? Scroll jacking, sliders, all this other stuff going on. Just stop it, stop being cute, stop being cute. Check the right boxes. There are very important boxes with websites that you have to check, okay? Sliders, scroll jacking, cute chintzy, none of those boxes are there, okay? We don’t need to check those boxes. All right, central location. Our hotel is located in the very heart of the city of Puerto Varas, a tourist town with colonial architecture, park, shop, step. Okay, maybe I should see this then, right? If the hotel room is a little mid, then let’s give a great view of Puerto Varas, right? Show people, here, when you stay at this hotel, this is what you’re going to experience.
Okay?
Wi-Fi, Wi-Fi network access, no cost in all common areas. I want for a hotel, okay, let’s just, here we go. I’m going to read the headlines only. Four features. These are, guys, this is attached to the hero section, attached to the hero section. You’re telling me these are the four most important features of this hotel. Number one, central location. Okay, we can make an argument for that. Number two, Wi-Fi. No. Number three, dining and coffee. No. Number four, lake and volcano views. Yes. So you’ve got now a central location I need like, I need this to be written a little bit more intriguing like? Wi-Fi, you’ve wasted a spot. Dining and coffee, you wasted a spot. Don’t tell me that you have nothing else to tell me besides Wi-Fi and dining and coffee, something that every hotel on planet Earth in 2023 offers, right? Five-star service, like, what is the list that we could talk about here, right? That’s really important for people to know that really differentiates you from other hotels in this area. Wi-Fi is not one of them, dining and coffee, not one of them. All right, so once again, this is kind of like, I would say, lazy copy, or copy maybe submitted by the client themselves. Like Bev, Bev probably, I mean, she probably really is just loving the coffee there, right? So she really wants to talk about that. But I mean, yeah, it’s like, all right, so let’s move on. Then we got a book now call to action. Let’s see before we go any further, what are we on here? What are we on? Excuse me, still dealing with a little of a vid. It lingers, it likes to linger, doesn’t it?
Is this Divi?
This is Divi. Anytime you see ETPBs, ETTTPB, like a gazillion times, that’s Divi. Welcome to Divi, okay? Now, because it’s Divi, I don’t even have to guess. I’m gonna click up here, and I’m gonna see if this navigation is accessible. And I’m going to just put $1,000 right now on that the answer is no, that it’s not accessible. So we’re gonna keyboard navigate this.
Yep, there we go.
Just won $1,000. Okay, so look at that. I’m navigating through. Is there any indication that I’m navigating through those links up top? None, no focus style whatsoever. So that would fail accessibility right off the bat. We don’t even get out of the header before we have failed accessibility. And this is a problem with builders like this, right? If you built a default header with bricks, it would be focusable. If you built it with, I don’t even know what oxygen status is right now. It’s been a while. Breakdance, it would be focusable. Generate, it would be focusable. Quickly, it would be focusable lots of builders got this down pat Divi not so much now maybe there’s an option in Divi that this person just didn’t turn I don’t know I’m not a Divi user but what I know is I audit lots of Divi websites haven’t found an accessible one yet still looking still hunting have not found one okay let’s keep going our hotel very key section right here now sell me baby sell me on this hotel. You’re not selling me with a headline, I’ll tell you that right now. Alright, we need, this is an example of we need two headlines. I’m a huge fan, huge fan, huge, how does Trump say it? Huge. I’m a huge fan of double headlines. You see these everywhere in frames. I love them, I think that they’re fantastic for UX because you have one headline and it’s not actually a double headline. One is just a paragraph, the other is an actual headline. What you are doing with the sections by the way, just so we’re all on the same page, this should be an H2, let’s check it out. It is, okay, so you have your H2. Your H2 is the landmark for this section. It lets everybody know what the section is about. And so you have our hotel is your landmark, that’s, okay, so now we know this is like an about the hotel section. But then you have a much larger headline, which is usually like, it could just be a paragraph, but it’s formatted like a headline where you have a captivating headline, right, for that section. So you have a very, so one is, I call a marketing headline, and one is what we’ll call a, like, just, it specifically tells what that section is about, okay? So it uses plain language, everybody understands exactly what’s going on here, but then you have your flowery, you know, engaging marketing headline right below it. I’m a huge fan of double headlines in sections. Okay, so it says, can you imagine touring the south? Because if you don’t have a double headline, you have to have the landmark headline. That’s what we’ll call it. We’ll call it the landmark headline. And it’s just boring. It’s just really, really, really boring. It doesn’t captivate anybody. It doesn’t convince anybody of anything. It doesn’t engage the visitor. Can you imagine touring the south and always having a place to go? Hotel Bella Vista facing, I have no idea how to pronounce that, and Volcanoes is ready to offer you the best experience on your vacations with modern and comfortable spaces that invite you to rest and relax. We are in one of the most renowned tourist destinations in the Chilean South. So you will have many options at your fingertips to live your dream vacations, whether it is a family adventure, romantic getaway, or a well-rested weekend with your friends. So I like the fact that they are calling out like specific, you know, things that lots of people come to hotels for. We’re always, because here’s the thing, if I am in one of these buckets, I feel like they’re talking to me, right? Versus very generic copy. These specific examples, you know, if I am wanting to plan a dream vacation, and you’re telling me that’s what I’m going to get, or if I am going on a family adventure, or if I am going on a romantic getaway, it’s kind of like letting me know, hey, this is the hotel for me. Like they just mentioned it right there. It’s obvious, it’s the hotel for me. That really helps connect. It really, any time you can use specific examples, it’s gonna connect with your audience a lot better than generic copy, so that’s good. We are always ready to help you have a lifetime experience. I don’t like this term. We got to get rid of this term With the warmth and professionalism that characterizes us by the way also, you know, it’s like I Don’t know It’s so hard. What is it? It’s under promise over deliver is a good strategy, right? I mean, what is lifetime experience that’s doing the opposite. I mean you are promising the world Okay You’re promising the world, okay? Colorsilla, what have you done? I didn’t ask you for anything. Get off my screen. You’re promising the world. How are you possibly gonna follow through on this promise of a lifetime experience, especially with that mid-hotel room? It’s just, it’s too much to live up to. It’s too much to live up to. I would love to see this right off the bat when I arrive on the site. What else do we got? Oh, guys, I can’t even click on these. Look these just move this slider. This slider is completely disconnected from this slider right here. These two things, look if I want to see that image, can’t do it. Nope, can’t do it. So that’s not great UX. Let’s see what else we got for photos here. Okay. All right. Okay. Yeah I mean it’s it’s it’s it’s a hotel. It’s a hotel. I really would sell this hotel with the area. I mean, you still need photos of the hotel, obviously, but I would really probably sell this with area stuff. We’ve got rooms, here’s some room cards, dining cards, spa and hotel. 68 modern rooms, I don’t think that matters. You know, the number of rooms doesn’t matter so much. You could, once again, we’re using opportunities to write selling points, and we’re spending those opportunities talking about irrelevant things, like Wi-Fi and coffee and the number of rooms. That’s not, you know, go to any high-end resort, high-end hotel chain. They’re not like, guess what? We have 72 rooms. It’s like, that’s not beating anybody. That doesn’t mean anything. They’re talking about why their rooms are the best, not how many rooms there are. Dining, Bella Vista 60 restaurant, bar. Just like, hey, dog, there’s a bar. There’s a bar. So you like, we’re wasting opportunity after opportunity just saying irrelevant things. It’s almost like, hey, we, you know, we just had to get this done. We need a copy for these spots. So that’s what we decided to put in. There isn’t really any thought put into it. Like, hey, how are we really gonna sell the rooms? Hey, how are we really gonna sell the dining? How are we gonna really, because if you’re starting, here’s the problem, you’re starting to sell me on the hotel, but then I get down here and it’s like, we just have so much fall off in the quality of the copy, where it’s like, ah, man, all this, this seems kind of mid, and if I’m doing what I normally do when I’m booking a lifetime experience vacation, like a romantic getaway or something like that, I mean, I really want to have a great experience, don’t I? Which probably means I’m looking at more than one place, which means we’re grading this copy against the copy of your competitors. And if they sit down and they put just a little bit of extra time and effort into how are we gonna sell our rooms, how are we gonna sell our dining, how are we gonna sell our spa and pool, how are we gonna sell this for events, how are we gonna sell this for co-work, they win, they win, right? Because copy is the most important thing on the website. And we have an example here, like we have often on WDD Live, where copy was the afterthought. It was obviously the afterthought. Copy needs to be the first thought. Somebody asked me yesterday on the frames live stream. They said how do you choose the frames for any given page? What determines the order the frames go in, the layouts that you choose, when you’re doing UX for a website, when you’re doing a wireframe for a website? My answer was the narrative. What is the narrative that I want to tell? What is the information that we have to get across to the visitor? And what order do we want to present that information in? And then how do we want to lay that information out so that it’s an engaging experience? Everything. The UX, then the UI. It all starts with the story that you’re trying to tell. That’s what brand really boils down to, okay? So if your story, right, the copy is the afterthought, you’ve done everything else wrong, right? What most people do, I think, instead of thinking story first, they think, let me go to other hotel websites and see how they decided to lay things out. And then they just kind of copy that, and then they’re like, okay, well, let’s make it look as good as we can and then let’s throw some copy in there. This is not how to create a winning website. This is not the process of creating a winning website. This is the process of just checking boxes and playing. We’re playing web design. This is playing web design. It’s like, hey, I’m a web designer, right? But you don’t really know what makes a website successful because we have to start with story and then our wireframes are based on how we want to tell that story. And then the design comes in, and that answers the question of how does the brand want to tell its story in the world. It all comes back to story. And that story better be highly engaging to the visitor, to the user. Okay. Let’s see what the chat is saying right now. Because remember, you guys get to put your opinions on everything that we’re looking at as well. And I go to the chat, I wanna see what everybody viewing thinks as well. It’s not just about what I think. Everybody is able to offer their own feedback and opinions. Okay, should card groups be H2 or H3? I never ever use H4+. That’s a good question for the Q&A section when we get there. So say, actually, I think I can star these and I can save them. I call it a marketing headline and an SEO headline. One is for humans with emotions and one is for bots. Yeah, I guess we could do that. I guess we could do that. We could call it that. And in Aria land, Aria land, Aria land, it’s, you know, it’s, I just, you know, I’m going to stop clarifying. I’m going to stop, it’s spelled ARIA, so I’m going to go with ARIA. In ARIA land, it’s called a landmark. So I feel like, you know, that’s probably the HTML5 kind of spec way to describe it.
We’ll see if Divi 5 will fix that.
It’s in beta at the moment. Apparently it’s full, it’s a full refactoring of their framework. I saw this, I saw the Divi doing a full, I’m very, I’m actually very excited about it. Um, you know, Divi, sometimes I criticize builders and people are like, Oh, you just shit on the builder, you just don’t like the bill, you just don’t want people to compete with bricks, dah, dah, dah, dah, dah, are you, are you insane?
Are you insane?
Cause what they will follow that up with is, cause you just want to sell ACSS or you just want to sell frames or whatever. It always follows up with some nonsense, like, uh, low IQ argument, right? And here’s why. I mean, and that’s why I asked the question, are you insane? If Divi refactors and it has clean code and it’s way more accessible and it’s way more friendly to things like classes and variables, do you know what that means for automatic CSS and frames? It means that we can integrate with Divi. And it means that we now have Divi’s ginormous marketplace at our fingertips. I would like nothing better than for Divi to refactor and be amazing. I would love, I mean, I wouldn’t, you couldn’t make me happier. There wouldn’t be a better development, okay, as of right now in the space. So of course I want them to win. I want them to be good. I want Elementor. The reason ACSS and Frames don’t integrate with Elementor is because we can’t. We can’t, it’s too awful. It’s too awful on the back end. It’s too awful in terms of what it supports and doesn’t support, and what it does in terms of output. Divi is in the same boat right now. But that doesn’t mean I don’t want them to support it. I want, I want to be, why wouldn’t I want to be able to integrate with these builders? I want them to win. I want all the builders to win. I just want them to do things the right way. I don’t want to sacrifice our product in order to make the money that that marketplace offers. That’s a, we’ve taken a hard line position of we actually don’t care. That is the evidence that we don’t care about the money, that we care about things being done right. If we just cared about the money, we’d be in Elementor right now. Whatever it takes, we’d be there. Divi, we’d be there right now, whatever it takes, because it’s all about the money, right? But we haven’t done that. We’re waiting patiently. When is it gonna be enough? When is it gonna be good enough? Then we’ll be there. So we’ll see, we’ll see what comes from the refactoring. Okay, let’s go down and we’re seeing another slider. We’ve got lots of sliders, lots of sliders. And I’m just gonna show you guys, see how I cannot keyboard navigate, oh gosh. I don’t even know what I’m opening. Oh, and I can’t close that. Escape does not close that. If you are a keyboard user on this website, you are what we call fucksville. You can’t do anything. You’re just leaving. You’re done. I’m done. I got to use the mouse. We got to go back. It’s very important. Accessibility, guys, is very, very, very important. Okay, let’s go down Bella Vista Restaurant. What else do you guys want to look at on here? You know, this is one of the cases where it’s like, you know, we haven’t nailed the copy, we haven’t nailed the imagery, we haven’t nailed the really important things, so, and then it’s not accessible. It’s like, do we need to go deeper? Do we need to look at how SEO is approached? Do we need to look at really anything else? It’s up to you guys. It’s up to you guys. Should we move on to segment number two? I feel like maybe we should move on to segment number two. Are we gonna learn anything else from this website? Side note, Kev, you gotta update your Chrome. What’s wrong with my Chrome? There is an update. I don’t know about Google Chrome. What version are we on these days? I have automatic updates turned on, what more do you want from me? What more do you want from me? Okay, I don’t know, I don’t know what version I’m on. Yeah, Video Music Streams says, next. Okay, why does brand color change to coral when you change to another language? Oh, I didn’t even notice that. Let’s swap languages. I don’t see it.
I’m watching this button anyway. Oh, down here.
These icons? No, those didn’t change. Oh, you’re right! You’re right. It’s kind of random, it feels.
It’s only with one specific language.
That’s CL. Yeah, that is odd. I suppose because it’s rendering a completely different version of the website and what I would gather, I mean I don’t know, why would icons, oh you know why? I guarantee you this is like a Divi icon card thing. It’s not like an actual properly built card. It’s like it’s one of those pre-done elements that I tell everybody not to use. And so they had to swap the whole component when they switched to the other thing to have the other copy. They weren’t able to just switch the copy. And they’re not using classes because it’s Divi. And so they styled the things one color. But then when they swapped them, there was a different color applied at some point and they’re not linked together. Man, oh man, oh man, hey that is a good eye, that’s a good catch. This is what I talk about when I talk about disaster scenarios. I mean this kind of a website is a disaster to maintain. If a client comes to me and they’re like, hey, our developer disappeared on us, because that’s what happens so often. We get that all the time. Hey, our developer disappeared on us. Or we want to do new things to the site and they say it can’t really be done, can you take it over? And then I look at it and then I never get back to them because I’ve jumped off a bridge face first. So the answer is no, no, we cannot maintain this website. We are not adopting nightmares, we’re not in the business of that. So yeah, it’s a situation where this is the unfortunate reality. You know what, we end up telling this person for real if we’re not being facetious and entertaining. We just tell them, hey, look, I don’t know how much you invested in this website, and I hate to tell you this, but it just needs to all be rebuilt. The whole thing needs to be redone. It’s gonna cost you way more money to try to maintain this and iterate on it and add to it than it is to just rebuild it and do it the right way, and then we can actually scale it properly going forward. And they just, I hate, I hate delivering that news because I know that in a lot of cases, I mean, it might be 3,500, 5,500. I don’t know. I don’t know what they paid. And it’s just, they lit it on fire. It’s like, Hey, take out your wallet and just get a lighter and just light the thing on fire. That’s, that’s what you just did. Um, by hiring somebody who, uh, you know, is, I guess, doing their best, doing their best, but it’s not what you guys needed. And it’s now kind of useless. Okay, naming the lake seems like good SEO. The English copy doesn’t name the lake that has the view, unlike the Portuguese copy. Okay. I was joking. I I reply to them. I just told you what I what I tell them Yeah, nope, no problem I I do want my security patches I do want my security patches, okay Please try the reservist form. Do I need to let’s see Well, I can maybe book, I could maybe book the website. Yeah, this is, I mean, it’s harder for me because it’s not, it’s not translated, but we can see if it translates. Okay. And hey, guess what? So we’ve got a third party booking. So this would be the last thing we look at and then we’re moving on. We’ve got a third party booking system, which clearly, I mean, look at this. Are we on a different website now? What has happened to the navigation up here? I’m now seeing pseudo elements after our links. And half the thing is still not translated. Only certain things are translated. So yeah, this is, oh, I didn’t even see the footer. My gosh, I did not even see the footer. Why is the footer green? And then why is this not linked? This doesn’t link back. Why is this a PNG that is fuzzy? There’s a lot of whys. I got a lot of whys now. Let me go back to home. But now we’re kind of in the, we’re just, we’ve relegated to now kind of just roasting the site, which again, doesn’t really teach anybody anything. So, yes. If the question for this website is do we rebuild? The answer is yes, we rebuild. Okay, let’s get rid of that. Okay, we are back and let’s move on to segment number two. Any comments before we move on?
Talk about a mystery meet nav.
I cannot stand anchor tag links mixed in on the same level as page load links. I like the mystery meet navigation description. This is very, that’s entertaining. All right, let’s do segment number two. This is segment number two. We’ve got to talk about the horror of margins in CSS. We’re going to watch this together. But again, I need your help. I need your help. I don’t know if you’re going to be able to hear the audio. Let me go ahead first and go to my settings over here. And we’re going to check this. All right, camera is good. Let’s go to audio. I think I need to be on Pro 2 chat. I think I need to be on Pro 2 chat. Echo cancellation is on. There’s a bunch of different settings that may or may not do the job here. Okay, so let’s go ahead and I’m going to have you guys, can you guys hear this? I’m going to press play. He’s obviously going to start talking. Let me know if you can hear what he’s saying. Oh, well, that’s a no. Hold on. Let me go to mix minus. Okay, can we hear that? Can we hear that? I know there’s a delay. So now I got to wait. I got to sit around and wait, you know, to see if we can actually hear that.
She said no.
No, no, no, no, no, no, no. Okay. Question is, what is the first thing we’re going to try? What is the first thing we’re going to try? We’re not going to, we’re not going to, if we can’t get this done, I’ll do a test later. Let’s get rid of echo cancellation and let’s try now. So here we go. Yes, sure. This is one of Theo’s big, bold assertions, but seriously. Okay. That’s our second option. I won’t touch anything till you guys say yes or no. I don’t think that that would have fixed it, but I just wanted to make sure.
Oh, oh, oh, it did? Okay. Oh, we’re in business.
We are in business. Is the levels good? Are the levels good? Is it too loud, too quiet? Let me see what we’re at here. Don’t keep using margin until you’ve watched this whole video
because I think you’re gonna be surprised
about some of these problems. Let’s dive right in. Could be a bit louder. Okay. I just, I just made it a little bit, a little bit louder. Make it a bit louder. Okay. Let’s go. Let’s go a little higher. Okay. Uh, I will. Yeah. I just made him a little bit louder. Hey, Oh, you just gave me a heart attack, dog. DJ. Don’t do that. Don’t do that. You gave All right, let’s see. Theo is a cool dude, front end engineer,
so he has interesting takes on stuff
when you look at it from a WordPress page building point of view. Somebody else said that this is click bait. It’s actually not click bait, it’s not click bait. You would think that it is click bait. Now it might be attention bait. It could absolutely be attention bait, but he’s not, he actually does make the argument that it’s a horror to use margins in CSS. So the content exactly matches the headline. It’s not clickbait. But attention bait it could be. Let’s start at, does anybody know this guy?
Does anybody know this guy?
Have you watched his content before?
Is there anything I should know about him before we get,
because I’ll be honest, I don’t, this is the first experience that I’ve had with Theo. Pedro says, drop them likes. The only videos I’ve seen from him is using Tailwind. Okay, all right, well, no, oh, I just elevated the wrong comment. Oh, it’s hard because it moves while I’m trying to click one. Okay, well, let’s watch together. Let’s go ahead and I’m gonna start this back and here we go guys.
For most web devs, CSS margin’s one of the first things you learn. Sadly, it’s also one of the worst. I can almost never recommend using margin.
Okay, so he’s starting with a premise. The premise is, margin is one of the worst techniques. That’s the premise that we’re starting with. Okay. That’s the claim he made. I didn’t make that claim. I didn’t make up that claim. That’s the claim that just came out of his mouth. Margin is one of the worst techniques. Okay. So let’s continue. Margins in CSS. Sure. This is one of Theo’s big, bold assertions, but seriously, don’t keep you. Jeff says that, um, Theo is a, he leverages tailwind mostly. He’s a seriously talented developer. So I guess what I will say is what I’m going to pick apart right here is this particular video. Again I don’t know anything about Theo or his skills or what he does or anything else. He could be an extremely talented developer. There’s a lot of extremely talented developers by the way you don’t know a fucking lick of CSS. They hate, they will say they hate CSS and yada yada yada. I don’t know if that’s the case, right? But his CSS abilities or understanding or philosophy of CSS has no bearing on his other skills. We’ll just preface the video with that.
Using margin until you watch this whole video because I think you’re gonna be surprised about some of these problems. Let’s dive right in. The first thing I wanna talk about is more around the mindset. This isn’t necessarily a bug in margin, like a thing that it’s doing wrong, so much as the reason why I don’t think it makes sense with…
Christoph says sound not going with Theo’s video. Does that mean there’s a there’s like a delay? Does it look like a translated foreign film? I mean, there’s nothing I can do about that, but as long as you can hear the audio and mostly see what’s going on, then that’s the that’s fine.
I’ll keep going.
Modern web dev mindsets.
Usually nowadays when we make a web app, we’re not making all the HTML top to bottom. We’re actually making individual elements called components.
Okay. So just read what’s on the screen. Yes, delay. It speeds up sometimes. Video is out of sync and catches up. Okay. Well, we’re doing our best here. As long as you can hear it and mostly gather what’s going on, we can discuss. Spacer, I just want to read this. Spacer components bring us closer to how designers think. I just want to break down that statement, okay? Designers, we’ve talked about this before. Designers and developers are two completely different animals. Development and design use very different parts of the brain. And so when we’re talking about how people should do development, to me it’s not even relevant. I don’t care what designers think. Don’t care. Don’t care what designers think. Because design and development are two different things. And they’re two different, they happen in two different environments. Our goal in development workflow and the boxes that we’re trying to check, here’s the boxes that we’re trying to check. We’re trying to check a box of scalability, we’re trying to check a box of maintainability, we’re trying to check a box of conversion, we’re trying to check a box of traffic, we’re trying to check a lot of boxes, okay? What designers think about how development should happen is not a fucking box. That’s not one of the boxes. So the premise that like, we should do this because that’s closer to how designers think. I don’t care how, this is not a box I’m trying to check. I’m trying to check important boxes over here. If designers want to be developers, guess what they should do? They should learn development. They shouldn’t manipulate development to be closer to how they think, right? The techniques that they use should be based on best practices, not their preferences. That would be my argument, okay? So right off the bat, I just… Sentence number one, but aside from the fact that it talks about spacer elements, my gosh, okay? We’ll get there. Don’t worry. We will get there. But just sentence number one right here just rubs me a little bit the wrong way.
That are structured, reused and composed throughout our applications. And that’s-
By the way, by the way, that’s a claim. They make our designs more consistent and they force us to build more reusable and encapsulated components. This is a very specific claim that I hope to have, that I hope to get very specific evidence for. I’ve said time and time again, people love to make claims and then when you ask them for the evidence, they’re nowhere to be found. So I’m hoping that somewhere along this video, we get actual evidence for these claims.
Used and composed throughout our applications. In that mental model, margins break down fast. As Jane put it in this tweet that has not left my brain since I first saw it. Margins are kind of a side effect because margins don’t affect the element you’re actually rendering. They affect the things around that element, which results in
much less intuitive behavior. Everything affects the elements around it in the block model. If you add padding to an element, it’s going to affect the elements around it. Every margin and padding both affect the elements that are around the element that you’re adding the thing to. This is not something specific to margin. So I’m not, and I don’t, you know, that tweet that he quoted, margin is a side effect.
Let’s group think this.
Let’s put all of our brains together. So it’s not just my brain being overtaxed trying to figure out what that means. What does it mean when somebody says margin is a side effect. Does anybody know what that’s intended to mean?
Yours, when you have a component with a margin
and then you mount that in another component. This is a really good way of putting it. This is actually a margin and then you mount that. By the way, this is a blatant,
padding is taking distance from someone, margin is pushing someone, pushing someone is bad. This is a blatant, this is like a textbook definition of a logical fallacy. Like you could just go into any logic classroom in probably any country and they will explain to you this is not how you make an argument. You can’t take something and then apply morality to it and then be like, oh by the way, pushing someone is bad. And since margin pushes things in web design, it’s equally bad. This is just, what are we actually doing here?
In another component. This is a really good way of putting it. This is actually a reply to Max Stoiber’s article, Margins Considered Harmful, which goes in-depth on this, specifically around components and the encapsulation of responsibility. You shouldn’t be able to accidentally break the layout of a component you made by mounting another component inside of it. Maybe it causes the flexbox to get too big or something, but for the actual behaviors of the other elements in that component to be broken by a subcomponent is a flaw in your mental model.
So if we’re thinking about specific examples,
there’s a lot of ways you can break, there’s a lot of ways a child component can break its parent. You can break a grid by setting a minimum width on the children and your grid is broken on mobile devices. And so are we, this is minimum width, a bad technique now? This is, oh, we can’t use that because that has the potential to break the parent element. So that’s harmful. That’s just, we should not do that. I mean, I could think of countless examples where children could break the parent and we’re not even mentioning margin anywhere. I mean, there’s so many ways a child can break a parent. So yeah, I mean, you want to obviously avoid that, but to suggest that this is somehow an issue that is just, you know, in the special thing called margin, like margin is the only way a child can break a parent. I mean, this is just, it leaves out the endless number of examples of other things in CSS where this might happen.
I really don’t think this is okay, almost ever. And that’s a huge, huge part of why I don’t use margin. There are a lot of bugs and we’re going to go all into those. But before we get there, I really want to push this mental model part. It’s so much easier to reason about your applications when you’re not thinking about the side effects that margins introduce. It’s not common that Max and I agree this hard. We debate a lot about things like tier PC versus GraphQL, but man, he’s 1000% on point here. And as the creator of styled components, I think he knows what he’s talking about. Let’s get into some of those weird behaviors.
Appeal to authority, just to let you know, appeal to authority. Like saying, hey, this other guy’s super smart and he thinks this, so therefore the argument is true. Once again, this is like classic, just logical fallacy after logical fallacy. No, he can still be wrong, right? He can still be really good at whatever he does and still be wrong. That’s a thing. It’s actually a thing that happens quite often, right? So if you wanna back up his argument, you have to give examples that back up his argument. You can’t just point to his authority and say, well, this dude’s super smart. So it’s true. What he’s saying is true, because he’s super smart. Uh, yeah, that doesn’t work. That doesn’t work.
Behavior I found myself running into a lot was when you use with 100, the behaviors of margin become much, much less intuitive. So in this example, we have a component that has margin 30 pixels set the parent component. Oh, this is padding block still. I’m stupid and I don’t know what padding block is. So I’m going to quickly change this to padding top and padding bottom. So this simple example, class container, that’s the parent. Then we have two children, child one and child two. So max with set, with 100%.
Okay, so you will see this often. When people are reaching with their argument, like they’re really, they’re really reaching, they will present you an example where things are done just like with no rhyme or reason. And then they’ll be like, see, that’s fucking broken. You don’t want to do that, right? If you go, I mean, I’ve recorded hundreds of hours, right? And the way that he is sitting around pondering the philosophy of CSS, okay? I do this constantly. I do this like on a daily basis, right? When we’re thinking about one technique versus another technique, pros and cons for various things. I mean, I am the author of a CSS framework, right? Like, and it’s used by thousands and thousands of people. So I have to sit around thinking and pondering what’s the best way to do this? What are the pros of this way and the cons of this way? And how are people gonna break it? And how are people gonna use it? And what’s gonna happen when this happens? And it’s constant. I have to constantly be doing this, right? And then what I will often do is I will make videos where I come to a conclusion and I have arguments that back up that conclusion. And I do my absolute best to show people a super practical example. And you will see me all the time, I’ll say, here’s the wrong way to do it, and then I will show you a way that lots of people do. Like lots and lots of people use that method. And then I’ll say, here’s the better way. And then I bridge the gap by showing why. Why has this way, you’ll go off the rails, and this way, you’ll be good to go. That’s the whole premise of lots of my videos, when I argue for a specific technique over another technique. In this example, we have a box that’s clearly broken. Two things are happening here. Okay, number one, he hasn’t even applied the CSS reset in it, at what point would you apply 30 pixel margin to every side of the child? If you want a space between the children, you would just apply either margin top or margin bottom. He’s going to get into, or you would apply gap. I mean, there’s a lot of ways to do it, but applying margin to all sides of the child. No, I don’t know anybody that does that. Like I can’t, I haven’t, the last time I saw that happen was like never. I don’t ever see this happening. So he’s taking an example that like nobody does and he’s like, see margin sucks. Clearly, it’s like, dog, nobody does that. What are you doing right now? What are we even trying to achieve right here? What is the goal? State the goal and then state an approach and then tell us why the approach is wrong. This is not even, this is just like a, let’s force the thing to break. Okay, you force the thing to break, but what are you proving? There, you’re not proving anything because nobody does this. Nobody applies 30 pixel margin to every side of a child element. And we don’t even know why. We don’t even know what the goal is here. So we’re starting off with a faulty example to prove that margin is broken.
So it will expand as much room as it has. And we have the children. The first child, background red, margin 30 pixels with 100% height 100 pixels. This is overflowing by exactly 30 pixels because of how margin is computed by default. It is not taken from the width that you’ve defined, it’s added on top of it. So this element is still the correct 100% size, but it’s had 30 pixels of margin added outside of that. You can kind of fix this with a global selector that is very common in most CSS resets, box sizing border box. But you’ll notice it’s not actually affecting things here. There’s a couple other things we have to change before this will behave as it’s expected to. The first one that I tend to change is just swap margin to padding. It’s going to make the behavior here a little unintuitive because the padding is the layer before the border. So the background color is being included now. The solution here is to make a new child within. So div class equals inner child one.
And with this, what I, so now we’re adding HTML elements, we’re adding actual DOM elements to try to solve a problem. Now, is this good or is this bad? I honestly don’t know, because I don’t know what the hell he’s trying to achieve. He hasn’t told us what the goal is with this giant blue box. And, but my first thought is, I mean, if all you’re trying to do is create this effect, where this blue box has padding on the sides, has like a gutter, basically, and then there’s space between the boxes, you don’t need to do this. You don’t need an extra DOM element for that, and you don’t need padding on this box. You just need padding on the blue box. Put padding on the blue box and call it a day. You don’t need anything else. So I don’t know what we’re trying to achieve. So I don’t know where he’s, he’s going with this.
I will do, I set the color on that child instead. Background. I’ll make it pink. So you can clearly see the difference with 100% and height 100%. It takes as much advantage of the parent as it can. And you’ll see here that the outside margin, the red handled through padding. It’s actually letting everything size correctly. And if I just remove the red here and change this from padding to padding left and padding, right. Suddenly things are behaving how we would expect the way time
this is like I
Don’t even have a good I don’t even have a good metaphor
I mean, I was gonna say it’s like taking the scenic route. It’s like Again, I don’t know what we were trying to achieve, but if that’s what we were trying to achieve right there Everything he just did is nonsense everything. He just did is like it’s like you’ll just do it to do it. We just like doing extra work here. We love extra DOM elements that we don’t actually need. We like, this all needs to be scrapped. If this result, this visual result is the end goal, how this was achieved is the most convoluted, inefficient. I mean, this is just not, it’s nonsense.
File 2 handles this is by not setting a width, but that can cause things to break in all sorts of weird ways, as I’m sure you’re already familiar. With 100%, pretty necessary evil. You don’t need it if things are blocked, but once you get into weird flexbox behaviors, having expanding widths is often very, very useful. And when you combine that with margin, things can get pretty unintuitive. So I highly recommend for cases like this, you wrap one additional element and use padding because that will allow things to behave in almost all.
So this is going to be the argument that he uses, sorry. I just hit puberty there for a second. This is gonna be the argument he makes a lot of times, where it’s like padding, use padding, use padding, use padding, use padding. So we can go back to page building 101. I believe everything is a box is the name of the lesson. I think that’s where I talk about margin and padding. And I explicitly say, almost always use margin and not padding. And the reason is very simple. Padding, so everything is a box, yes? We need to do our absolute best to preserve our boxes because you don’t know, you can’t predict the future, none of us have a crystal ball, that box comes in very handy. The minute you need a border, the minute you need a background color, the minute you need anything that visually shows you the box. If you’ve used padding, like let’s just say padding bottom to move something down below it. If the box is invisible, nobody knows that that’s padding versus margin if they don’t inspect it. Visually, it’s just a space. It’s just a gap. But the minute you need a background color on that box or a border, now we can visually see it and we can visually see that it’s off balance. You’ve broken your box. And as I clearly said many times, you never break your box in any aspects of life. You never want to do that, okay? So padding is very dangerous to use padding because you’re, especially if it’s non-symmetrical padding. Any non-symmetrical padding puts you in danger of having a broken box that you might need later. And when you decide you need that box later, you have to undo so much of what you already did, right? Because now it’s like, okay, well, I got to make the padding symmetrical now, which means I just lost that fake margin that I had at the bottom because I use padding to achieve that margin. And now you’re on to doing other things, other fixes. And my God, if you didn’t do that at the class level, you’ve got a shit show on your hands. So padding is not the solution in a lot of these cases. And I think the reason I’m doing this video, the reason I’m doing this breakdown, is because if you are a beginner or intermediate, you do need to be thinking about these things. You do need to understand the fundamentals of how all of this stuff works and why certain things are chosen over other things. Because you don’t want to, see I’m writing this whole article. It’s very close to being done, but we talk a lot about scalability, maintainability, best practices, professionalism, yada, yada, yada, yada, yada, yada, yada, and it all boils down, I’m trying to boil down the reason, because there are a lot of reasons. Accessibility is a good reason, maintainability is a good reason, but at the end of the day, I think what everybody can connect with is, let’s not create big fucking problems. BFPs, we wanna avoid BFPs at all costs. Why? If you just care about yourself, because it makes your life miserable, miserable. Every time you create a big fucking problem in the websites that you’re building, it’s on you, dog, to fix it. That’s more time, that’s more nonsense, more headaches, more frustration, so we don’t wanna create BFPs. So a lot of the best practices that we talk about are to avoid BFPs, okay? And here is an example of where what he’s teaching actually can create BFPs. And like I said, as an intermediate or beginner, you want to know these things. You want to be able to avoid these things. And so we have to talk about the underlying philosophy of a lot of this stuff.
Cases. But we have many more problems to dive into, don’t you worry. Let’s take a look at margin collapse. This is an article by Josh Comio, fantastic CSS wizard. He has a bunch of courses and materials to help you level up your style solutions, your React component creation game, and so much more. We’re here to talk about his article on CSS margin collapse. In CSS, adjacent margins can sometimes overlap. This is known as margin collapse and has a reputation for being quite dastardly. Here’s a…
Okay, here’s a comment, context. He’s talking about components and his audience is app developers. Recommend watching the whole video first. He’s not talking to your audience. I’m trying to understand the relevance of this comment. Is there something special about app development where margin behaves differently, where padding behaves differently, where you don’t need to preserve boxes, where adding 30 pixels of margin to every side of a child element is a common thing. What is different? I don’t care, what I’m getting at is I really don’t care who he’s talking to. CSS is CSS. And he’s making a claim that the horrors of margin in CSS is the name of the video, it’s not the horrors of margin in CSS in app development. He’s talking about HTML and CSS. Is the app development some special magical area where everything he’s saying now makes sense? Because he has to prove that to me, right? And so far, we haven’t, so far he hasn’t even shown me an app. He’s shown me a box on a screen. So it appears that he’s talking about margins in CSS, which is why we’re breaking down this video.
Typical example involving two sibling paragraphs. So these have margin top and margin bottom both set at 24 pixels. And you can see here when you hover over that the margin for these two elements is actually overlapping, which is… do you have any idea how miserable this is to debug? It’s so annoying. And as he said here, it’s not reliable. You’ll often be confused why things are or aren’t collapsing. If you have a border or a padding, it blocks it. That’s very unintuitive. I mean, I guess that’s with a wrapper. So that kind of makes sense. Fun stupid behavior of margin collapse number one. It only works on vertical margins, so this horizontal margin does not have the same behavior.
What the fuck? Yeah, are you kidding?
Problem two, only directly adjacent elements collapse. So let’s see if something like a line break between them. Now the collapse is no longer happening. Weird thing number three, bigger margin wins. This, I guess, kind of makes sense. It’s just, God, this one’s actually bugged me once in the past, because I didn’t know where the margin bottom was coming from on a different component, and things were sizing in such strange ways. This one’s silly, but it definitely will annoy you at some point. God, here’s where things get fun. Nesting doesn’t necessarily prevent collapse. So we nest this paragraph in a div. Both of these have margin, and you would think that parent element would keep it from collapsing. Nope, it still collapses. It just shortens the div on the inside. So even though there’s an element with a margin and then another element wrapping it, the wrapper element is not sized internally to match that margin by default. Unless you set a padding or a border on that parent element and now it doesn’t collapse. What? What? I almost want to make this a quiz where I like list all of these problems and you guess what it’s going to do. Here’s a curious one. Giving an element of fixed height can prevent certain margins from collapsing too. Oh god, I didn’t know this one. That’s really dumb. Margins can collapse in the same direction? How does this keep getting worse? I didn’t know most of this before. Oh god. Display flow root more than two margins can collapse great of course more than two margins can collapse obviously I
know now we got to watch it we got to watch a commercial okay all right we’ll mute that while that goes all right skip okay so let’s just talk about this section real quick margins yes collapsing margins is annoying. A lot of the things that he’s demonstrating here, which is just reading somebody else’s blog article. First of all, I would recommend go find that blog article and read that blog article. You need to know the behavior of margins. None of this is a horror of margins in CSS. If you use, if you build a website in a logical fashion, using best practices, using all the techniques that I teach, for example, the number of times that I run into those issues is basically that many, okay? Zero. It’s just a non-issue. If you just know what you’re doing and you build in a logical fashion, in a logical workflow, and you’re using the proper techniques in the proper places, you never really run into any of those issues. So, it’s like, yeah, this is horrific, okay? Like horrific, we can use the word horrific. Some of it doesn’t even seem to make sense. Why would the margins collapse in this instance and not in this instance? And sure, we can all get around the bonfire and we can all pour some whiskey and tell great stories about the horrors of margins, but then somebody just raises their hand and be like, but does anybody ever experience those things in modern web development if they know what they’re doing? And the answer is really like no, no. That’s, it’s not a problem you will practically run into. So in practical terms, we’re just talking about nonsense. Because it’s just not, it’s a non-issue. It’s not something that we’re gonna encounter if we just build the website the right way. Especially if you’re using like Gap for so many things and it’s just, it’s not really gonna happen. So, you know, it’s fun, it’s fun I guess. It is educational, like you should know that these things exist and how they behave. But I will also tell you, CSS is a beast. It is a, like a flow route thing, right? There’s so many aspects of CSS that just lots and lots of people don’t know. There’s a lot of things about CSS that I don’t know. CSS is an absolute beast. And I will tell you right now, margins is not the only area where there are some head scratching things. It all boils down to, and by the way, I’m sure you can go into JavaScript, you can go into PHP, you can go into all these different programming languages, okay, and I’m not lumping that in. Cause I know now people are going to say, this has not a programming language.
I didn’t know. Okay. Yeah, whatever.
We’re just talking here. Okay. People will complain about head scratching things in PHP is my point. People will complain about head scratching things in JavaScript, right? It’s not like CSS margins is the only area where, where there’s some head scratching stuff going on. All right. So it doesn’t further his main argument is, is my point.
All right, let me fast forward a little bit.
And I hope this helps you all as much as it hurts me,
because we need help. That have been technically smallest, add those together. We need a lot of the time, padding elements.
What I’m referring to would be the relationship
between these two, child one and child two. Let’s say that the reason we’re doing padding here is we wanna have space between these two.
Okay, okay, okay, okay, stop, stop, stop, freeze. You would never do that. You would never, ever do. Let’s say, see this sentence right here is just, just put an X through it, right? The reason you might use padding top and padding bottom here is to put space between these elements. No, no, stop, full stop, no. No, we’re never doing that. Never ever, ever are we doing that, okay? Once again, go watch everything is a box. Go watch my explanation of margins and paddings and gaps. That’s what you would never do. So let’s not say the reason you would do this, no, no, you would never do that, okay? You would never do that. So let’s not do that. Let’s talk about something else.
Flex gap, is it flex gap to REM or whatever gap we want between them flex direction column and there we go but i’m going to kill the margins on these because by the way it gets better it’s probably better space between them this is how i would traditionally solve this problem with flex and gap display flex flex direction column gap to rem but if i had four of these divs and i wanted to have a different amount of space between some of them like let’s say i wanted more space between these two instances of child2. Instead of having a gap, I’d have div class equals spacer. I would define this spacer padding. I’ll do a one rem, so it’s just one rem each direction. Why is that what it does?
Anyone want to explain this one for me?
They’re self-closing tags. I was pretty sure you could self-close a div. You’re telling me that…
I’m not going to talk about the self-closing div thing. That’s low hanging fruit. Okay. That’s like, uh, we don’t, it’s, we don’t need to take cheap shots.
Okay.
There’s plenty here to talk about of, of substance. The idea that you would ever want to use physical spacer elements is mind boggling to me. We are adding elements to the DOM, which we all know, right? Physical DOM elements create a, I mean, that’s a problem, because they’re not scalable, and they’re not maintainable. They’re all just sitting there kind of like a static content, more or less. And static content versus, you know how I feel about static content versus dynamic content, and on and on and on. Now, this is one area, okay, there was a comment earlier about, hey, he’s talking about components and app development and all that. Putting spacers into a component element is not as egregious as just littering a static website with spacer elements. By the way, this is something that Elementor encourages users to do, and it is an absolute nightmare. It’s atrocious, atrocious workflow. Totally breaks scalability and maintainability. And I can give endless examples of this. In fact, I have in past videos. I think I did in Page Building 101, I specifically did a segment on spacer elements and why they’re absolutely awful. I have never seen anybody, I’ve seen it happen in page builders because they have an element for it, you just drag it in and people don’t know what they’re doing and they use spacers everywhere. I’ve never literally seen somebody write it in HTML. This is the first for me. I’ve never seen this happen. But the idea that this would be the solution, I mean, you can add margin top, like this is actually where margin like comes in handy.
Right.
You can, you can use margin in conjunction with gap.
Right.
I do it all the time. So, but if, I guess if you feel like using margin as a horror show, then you wouldn’t do that. You would do something convoluted, like adding a, uh, extra Dom elements everywhere that space things out. Why not just use margin top? I don’t know
Infected my brain to the point where I don’t know that about HTML anymore. You can’t self-close a div Why do we like HTML as I was saying what spacer components? Let’s say we wanted to have twice as much space between these two when you put spacer elements between things Which these could be a BR instead of a div I just use div because I’m lazy and stupid I can put a second one now So I see much space I can put a different spacer here or honestly what I do, cause I use tailwind. You don’t even need to make a custom spacer class. You can just do PX dash two. And then on some of them do PX dash four.
Which by the way, it can, you should only ever do that in, in a code editor, right? If you’re working in page builders, which so many of us are like, I’ve already talked about tailwind being an absolute disaster, an unmitigated, unmitigated disaster in, in page builders, you can use PX2, PX4, PX blah blah blah blah blah or PY in this case I guess. Because you can you can search and replace. That’s the only reason right. You can bulk search and replace. But still I would say I mean it’s still kind of a nightmare honestly. I mean what if you want to change some of your PY2s to PY4s. How are you going to search and replace PY4 or PY2 only in the specific instances that you want. You still have to go manually find the areas where you wanna change it. And then if we’re talking about doing this across different pages of the website, once again, once again, it’s like, this is a nightmare. This is what nightmares are made of. Why not, why don’t we ditch the spacer element? Why don’t we put classes on things? And why don’t we assign styles to those classes that actually mean something and have some contextual value to them. And then we know exactly where our styles are defined. And we also know where they’re used. And we also have global control over them. Wouldn’t that be a better approach? Yeah, I don’t know. So much easier to just quickly define things.
It’s convenient. I’ve been liking this a lot. A lot of people aren’t fond of this pattern. You can always just wrap the element with the padding instead if you really want to, but I find that having literal elements in your DOM that are just for padding is actually really convenient. So try out this pattern if you haven’t. Obviously the second solution is just pad things. You can use padding the vast majority of the time that you’re reaching for margin, and it will behave more often than not significantly better. I have found that padding instead of margin solves the problems that I run into the vast majority of the time. There’s no collapse. A lot of these sizing and max width behaviors go away. Generally, padding behaves and I haven’t had anywhere near as many problems, especially once you set the box sizing properties for your app. Third solution is one that I feel like people are scared of and shouldn’t be. And it’s one I’m reaching for a lot more.
He, he’s, he glossed over, he said, you should use padding and that, but he didn’t give us any examples. Notice he did not give us any examples. Um, and if he did give us an example, most certainly we would see the box being destroyed and not be usable at any point going forwards again. I don’t know if that’s, I mean, I don’t know why he didn’t give an example, but it would have been nice. We’re almost done with this, by the way. See, some people are like, I find website critiques more interesting. Yeah, because, you know, it’s probably closer to what you think about on a daily basis. But the reason we see so many errors and issues on WDD Live is because not enough people actually think about the philosophy of how things are styled on the internet. And they make a lot of common mistakes. It’s very important to look at this kind of stuff. If you’re gonna be a professional, like you need to have a professional level of thinking about these kinds of things. These things should absolutely matter to you and your workflow.
Makes sense. Flex Gap. Gap is an awesome property in CSS. I almost said new property there, because people treat flex gap like it’s this brand new thing that hasn’t existed before and that browsers don’t support. Before we go any further, I really want to emphasize, browsers support flex gap.
Well, fast forward.
But mobile users at 96% flex boxes for something like a nav bar or a menu. I don’t even know if he says anything relevant beyond this. This was a helpful video and I hope that my CTO will stop.
Yeah, it’s pretty much done anyway. Okay, so that is that. I didn’t really glean anything from the video. The biggest thing he said was use padding, it works better than margin and then he never demonstrated how that is, which is odd. So yeah, what do you guys like, what do you think the purpose of this video was? Is it to just get everybody to talk about it? I mean, if that’s the case, it succeeded. Or was he actually trying to prove some sort of point? I don’t really know what’s going on there. Let’s go back here. So that was segment number two. Jason says it seems like he’s learning. He’s most certainly not learning. I mean, he’s got like gazillions of videos, 166,000 subscribers, he’s built apps, you know, like he’s not learning, he’s not learning. So no, that’s not it. Which is again, why I said I was willing to actually bring that video on and you know, do a critique like that, do a breakdown like that, because it’s not a little YouTuber. It’s somebody with a lot, a lot, a lot of followers. And I do think that it’s very important, the bigger your channel gets, the more responsibility you have to really know what you’re teaching. And if you’re gonna make a video like this that’s encouraging people to not just not use margin, but to switch from margin to using padding, I mean, you’re steering lots and lots of people in a very dangerous direction with their workflow and with their thinking. And so I do think that that’s a big problem.
Okay.
Let’s see. A top comment about springs in a toolbox sums it up nicely. I will go check that out. I won’t do it right now, but we’ll see. Okay. Um, let’s go into segment number three. It’s Q and a, a, M a, uh, all, all questions now are fair game. It can be on any topic, business pricing, marketing, SEO, PPC, uh, web design, web development, bricks, oxygen, quickly, ACSS, whatever you want to talk about. I’m not a big fan of the word, but I’m going to put it in the chat. I’m going to put it in the chat. I’m going to put it in the chat. I’m going to put it in the chat. I’m going to put it in the chat. I’m going to put it in the chat. I’m going to put it in the chat. I’m going to put it in the chat. I’m going to put it in the chat. I’m going to put it in the chat. I’m going to put it in the chat. I’m going to put it in the chat. I’m going to put it in the chat. I’m going to put it in the chat. I’m going to put it in the chat.
I’m going to put it in the chat.
I’m going to put it in the chat. I’m going to put it in the chat. I’m going to put it in the chat. I’m going to put it in the chat. I’m going to put it in the chat. I’m going to put it in the chat. I’m going to put it in the chat. I’m going to put it in the chat. I’m going to put it in the chat. I’m going to put it in the chat. I’m going to put it in the chat. I’m going to put it in the chat. I never ever use h4 plus okay really good question Let’s talk about this and guys see this is the value of Streamyard okay, because I can see right now on my in the corner of my eye I can see the stream, and I know that I am not sharing my screen right now, so this is uh this is good Okay, so let’s go back to Let’s talk about this. A lot of people are, this is not the only time I’ve been asked this question regarding heading levels and cards and all this other stuff, okay? So let’s go to heading levels, publish, publish, edit with Bricks, okay. So what we want from heading levels, and by the way, SEO people will tell you something different. I’ll just tell you that right now. Not every one of them, a lot of them, because they’re trying to game the system. There’s a very prominent SEO person who says, use H2s for everything beyond an H1. Don’t ever use H3s, H4s, don’t ever use any of that stuff. H1 and then H2 is for everything. That’s their strategy. And what they’re doing is they’re trying to game the system. And A, if it works for you and you want to do that, there’s a lot of problems with that and the fact that it’s probably going to stop working at some point. Because do you think, you know, I sit around with SEO and I say, do I believe in my heart, in my soul, that Google’s like, yeah, we really want every heading to be an H2. Yeah, we don’t want people to use H3s. We don’t want there to be a hierarchy of headings. No, I don’t think for one second that that’s what Google believes. So if Google starts seeing people building sites with no heading hierarchy in an attempt to rank better, I mean, what do you think Google is gonna do to those sites eventually? Like, of course, they’re gonna devalue those websites because they value heading hierarchy. And so I come from a place of just do it right. How about we just do it right and we don’t worry about gaming Google and we’ll win in the end, we’ll win eventually. That’s kind of my approach. So let’s say that this is our hero section. We’re obviously going to put a h1 heading in here. Now here’s one thing I will change and again this goes back to philosophy right. If I’m a page builder developer I believe Oxygen does this too. In fact let’s just take a let’s take a gander. Let’s take a gander. I say I like these little side quests here. Let’s see what’s going on in Oxygen land. All right I just need a page. I don’t really care what’s on it.
All right, let’s go,
I don’t even know what the structure panel is anymore. Man, it’s like every time I come back to oxygen, it’s like, don’t remember anything. Oh, see that?
I turned this feature off in Bricks
and I don’t think there’s any way to turn it off in oxygen. This happened to me so often in oxygen, it’s fucking maddening. All I wanted to do was click on my section, all I wanted to do and because I did that, my section has zero top padding now. Because of this stupid draggable handle nonsense. Every time I try to click something in the canvas, I end up accidentally changing padding or something. It’s so freaking annoying. Okay, let’s put a heading in and let’s see what the default is. Okay, so completely different approaches here. Oxygen has decided, hey, the default tag for headings is gonna be H1. Bricks has decided the default tag for headings is going to be H3. Two dramatically different approaches. And I would say both of them are dramatically wrong, right? Dramatically wrong. And here’s why. It’s like, and again, we’re thinking about beginners, intermediate people, just workflow in general. We don’t want people to make common mistakes. Like, if we can avoid common mistakes, we should try to avoid common mistakes, right? So the common mistake is I add headings and I just start, I just start, I’m doing my thing. I’m doing my page building thing, right? I’m putting the content in, here’s my heading, and then I’m, there’s a lot of stuff to think about. There’s classes, there’s variables, there’s how am I gonna get this structure down? You know what people aren’t always thinking about? What’s the heading tag that’s only used once ever on a page? Why would that be the default because now I’m gonna end up and I’ve seen this guys. I’m not just making shit up I’ve audited plenty of oxygen websites where everything is an h1 Everything is it because that’s what it defaults to okay? Which is which is atrocious like we obviously don’t want that happening and then I’ve audited a lot of bricks websites where every headings in h3 because people forget to change the tag. And H3 is not the most used heading either. What is the most used heading level on a page? It’s H2. That’s primarily what you’re using, okay? Only when you get into like cards and things like that are you using H3. And these are the landmark, right? This is what defines the topic of the section is the H2. So to me, this is the most important heading level to default to. If you’re gonna default to a heading level, default to heading two, okay? And so, okay, that’s a side quest, side tangent. Now, I add this as an H1 because that’s my hero. So we only want one of those, contrary to popular belief. We only want one of those headings. Now, and that’s gonna be in my hero section. Now, I’m gonna add another section to a page. Semantically, I have told the HTML, we are starting a new subtopic of this page. And I’m gonna put a heading in this section. And see, that’s the problem right there. There’s an H3, but I need it to be an H2. Now, this subtopic is defined by the H2 element, okay? So, subtopic one. And then, and by the way, this is very important for accessibility as well. And I’m gonna put a heading in this section. Once again, this needs to be an H2. So here’s subtopic number two. Now let’s say I am going to put another container into this section right here, and I am going to gridify this, and I’m gonna throw a card in there. If I could type properly, that’d be even better. So we’re gonna throw a block in there and then I’m gonna put a heading, cause this is a card, right? In my card. Now I actually want this card headline or card heading to be an H3. I don’t jump to H4 here. I see a lot of people jump to H4 here. Well, there’s no, no, we should not be jumping to H4 here because I have an H2 in here. The next logical heading level is H3 for this content. This is how I understand heading logic and hierarchy to be. If I needed another heading for something, and I’m struggling to even think what else we would put in here. Yeah, I’m struggling to even think what else we would put in here that would get us to an H4 level at this current time. But this is the logical hierarchy. The big mistake I see people make is they’re like, I want that heading to be smaller and they know H4s are smaller. And so they change it to an H4 to visually change its size. And that’s where the common error really, really occurs. You never, ever, ever want to do that. If you want your H3 to be sized like your H4, that’s why you tokenize your styles. Double dash, H4, now it’s the size of my H4. See, because I follow a logical workflow, and I follow specific principles like tokenize your styling, it’s very easy for me to mimic what an H4 looks like, because I have a variable for it, right? So I don’t need to change its actual HTML output in order to visually change it, nor should I. I just need to reference what that visual output is supposed to look like. So yeah, this is, hopefully that answers your question with regard to heading hierarchy. It’s literally just make it logical. One H1 on the page, H2s are your section headings, H3s for anything else that go in there. You may, you’ll probably most commonly run into an H4 situation in blog posts. So you have your H1 is your blog post headline, H2 is your subtopics of your blog post. Then you might have H3 points in there. And sometimes in your H3 points, you might have additional, an additional level of points. And that’s where you would find H4s, only nested under H3s. You should never have an H4 nested under an H2, for example. You should never have H3s nested under H1s. It’s just make it logical, make it logical. Okay, so that’s that question. I’m going to un-star that. We got that one out of the way. Question when you were selling care plans and hosting, is it classified as a service or a product? A care plan is a service. Hosting is a service. I would classify those as services, not products. I don’t know if you want me to go into any other detail on that answer. If there’s something else, another angle you were potentially looking for, but that’s my short answer. Is it worth joining the Inner Circle community with the goal of becoming a good web designer or isn’t it focused on so much there? DJ, do you mean visual web designer? Like do you mean actual design, UI design principles or are you using the terms? See I never know how people are using the term web designer. Like clients will be like I need a web designer and really what they mean is they need a developer, a designer, a copywriter, a marketing guy. They need everything. They need all the above, right? They don’t actually mean a designer designer. So yeah, let me know what you mean. But if you do mean UI design, I am not a UI designer. I don’t play one on TV and I don’t play one on the internet. And so I don’t have any UI design from me in the inner circle. Now, I know many very talented designers. Not every designer can teach. So I’ve got some long-time designers that I’ve used for various things in the past. I do have a new designer. Actually, you guys probably know him. He’s working on frames for Figma and ACSS tokens. His name is Tommy. I don’t wanna put any pressure on Tommy, but I’ve tried to recruit him. I’ve tried to recruit him to be in the inner circle and be our lead kind of like UI design instructor. I don’t know if you wanna ping him, you wanna ping him and suggest that he should do that. It might help the situation out. I don’t know Yeah, I’ve tried to I’ve tried to get cuz he can actually teach he’s a good teacher too happens to be a good teacher So yeah, I mean I would I would love I would love nothing more than to have a great UI designer in the inner circle Pumping out UI design trainings. I would think that would be absolutely fantastic In fact, I would be watching them. I would be in essence a student of the inner circle as well with a lot of people, with a lot of you, side by side with you, learning UI design principles. That would be fantastic. And I do have that as a goal. So maybe you guys can help me with that goal. Sorry, Tommy. Okay, on your web proposal, you keep in high level or do you include specific features to be added on each page? Really, really, really good question, Robert. I don’t even need to answer. I mean, it’s kind of like, I hate defaulting to this, but literally, if you join the inner circle, you can go see my actual proposal. Like, I have the exact proposal that I use, I have a training on how the proposal is constructed, I show a statement of work and how the entire project is priced. I have all of my prices. My entire price list is in the inner circle. Every question where you’re like, what exactly do you do with the proposal, with the statement of work, with your pricing? It’s all, they’re literally there. The things that I send the clients are there and you could just go look at them.
All right, let’s see here.
Hide comments, hide comment, how do we hide? Okay, good. Let’s see, let’s see, looking for questions. Make sure your word question is in all caps. Okay, I just saw the new pop-up element. Can it be used for a query list? For example, like an AJAX pop-up for products in a list activated uniquely to show more details for that specific item. I’m trying to think. New pop-up element. So right off the bat, I’m a little confused. The bricks has a pop-up element. Frames has a modal element. So first thing I need is clarification on, are you talking about the bricks pop-up element or are you talking about the frames modal element? Answer that question, and then I can finish answering your question. I’m gonna star your question so I can keep it separated. Is there a solution in Bricks to split one text box into several P with pictures in between, in parentheses, template for a blog post? Is there a solution in Bricks to split one text box into several P with pictures in between? Oh, okay, I think I know what you mean. You’re not saying split into columns. You’re saying we have a column of text and you want like paragraphs and then something inserted and then paragraphs and something inserted. I believe that’s what you’re asking. Almost like people would insert ads. And in fact, is that what you’re trying to do with the images? Are you trying to insert ads in between the copy of the blog post? Or maybe CTAs, I mean, it could be a lot of different things. In Bricks, no. I don’t think that there, well, there probably is. But you’re gonna have to read their developer documentation and maybe they allow you to hook into the post content element in some form or fashion. And you could basically say, every three paragraphs I wanna show X, Y, Z, or after the first three I wanna show, that very well could be. Off the top of my head, I can’t show you or demonstrate it, because I don’t, I’ve never needed to do it and I haven’t done it. So I don’t, I just, it’s one of those questions where I just gotta say, I’m sorry, my friend, I don’t know.
Okay.
But there are a bunch of people, here’s the great thing. There’s, you know, almost 100 people watching live right now and somebody may jump into the chat and tell you exactly how to do it. If you ask the question in the inner circle, people may jump in and tell you how to do it there as well. Okay, let’s see, question.
Have you used advanced themer with Bricks?
I was super impressed with it. Just QOL tweaks, that really were lovely. I own a copy, mainly I bought a copy because I like to support other developers. I don’t actively use it. I think that some of the features are very intriguing and very nice. I think a lot of the really intriguing features should really be in Bricks core. And so I don’t know, there’s always a risk having a plugin like that where it’s like, you know, this happened with Oxygen where a lot of the, a lot of third party developers gave us all these great things, but then they were just kind of absorbed into Oxygen core and the tool that we bought into and we’re using kind of ended up going away or had less support or whatever the case may be. I’m not saying that that’s what’s gonna happen to Advanced Themer, but I don’t personally use it. I don’t have anything bad to say about it. And I think if you like the quality of life features, then go for it, right? I do suggest that people avoid getting into a situation where Advanced Themer releases a lot of features, like a lot. Like I keep my eye on it. Like they’re doing a lot. I’m doing a lot of things. And you almost get to a point where it’s like you’re spending half your time, half your day, like let me learn these new shiny features of how could this improve my workflow? And really your workflow is gone in the toilet because you’re just busy learning workflow enhancements. And then you have to integrate those, like your brain doesn’t just automatically remember to use those exact processes. It’s like you have to create a new process constantly because it’s like, here’s a new workflow enhancement, here’s a new, and if it’s something like out of left field almost, you gotta put a lot of brain power into integrating it into your workflow. And then if Bricks does it natively and then suddenly Advanced Gamer doesn’t need it anymore but Bricks did it a little bit differently, now you’re shifting to still do it that way but learn how Bricks does it. You get caught up in a cycle of instead of building websites, to me it’s like if we can just add boxes to a page and style them and the builder doesn’t get in my way, that’s kind of all I need out of it. That’s all I’m asking for, right? All of these other shiny object things can actually cause a lot of workflow hindrances, at least in the short term, while you digest them, figure out how to integrate them into your workflow, play with them, right? And then, you know, so gotta be careful. Just be careful. That’s all I’m saying. Okay, let’s go down.
If I miss your question,
if you feel like you asked your question a while back and I missed it, just absolutely go ahead and ask it again. I hate having to scroll up like eight miles to try to find other questions. The new comment elevation format is quite disturbing.
The comment white background
is usually merging with the screen.
I might be able to fix that. It doesn’t give me a ton of options, but I might be able to take a look at that. Bricks had no section element in the early days. Yeah, it didn’t have a lot of things that it needed in the early days. But that’s why you want to use a product where the developer is very responsive and in tune and willing to give you the things that you want. Very important. John says, ha ha, I totally spent a day learning them.
Yeah, exactly.
And then if there’s another one tomorrow
and another one tomorrow and another one tomorrow, it’s like, when do we get to stop learning about all these workflow enhancements and actually enhance our workflow? Like just actually get work done. I’ve never used a 3D element in a webpage. I mean, I don’t, yeah, I get that the white blends with the white canvas, but that is really that big of a problem. Like I can blatantly read the question. Should I knuckle down and learn how to do it manually or just use an add-on for Bricks 3D element? Page building 101 prohibits pre-made elements. Yeah, I would buckle down and I would learn. If you like the 3D element kind of thing, buckle down and learn how to do it. Do not rely on the pre-made elements. Okay, not ads, it’s about the customer just has to write one text box and template cares about the pictures, et cetera, automatically. See, that’s a situation where I don’t know. I think you’re over-engineering, maybe. I mean, if I’m creating a blog post and I’m using images in the blog, aren’t I using images in the blog post? Like I’m just choosing the images and where they go? What’s the problem with that? What’s the limitation of that method? There has to be some sort of limitation that has you looking at like auto-injecting images in certain areas of the blog post. So I guess I need more detail on the use case.
Div column count three, that’s not what he was talking about
because that’s what I initially was thinking he was talking about was a multi-column layout with paragraphs where they flow from one column to another, but he’s talking about something different. I’m referring to UI and UX, I think, yes. Like web design on Figma, yeah, yeah, yeah. We need Tommy for that. Operation get Tommy on board.
Tommy’s probably not even watching the stream.
He’s probably just gonna wake up and his DMS in the community are gonna be absolutely blown to pieces I’m sorry, Tavi. I’m sorry Okay Question would it would it make sense to have a separate frames for figma YouTube channel? Just curious I’m thinking of the future with many tutorials. I Don’t think so not not at this point in time. Would you recommend the events calendar for time-sensitive events in WP? It’s been a long time since I’ve used the events calendar. I don’t know. Right now I’m doing a
whole series tutorial in the inner circle on building a calendar, an event management system,
native, WordPress, advanced custom fields, and then bricks, dynamic data conditions, all that stuff. And for the most part, like I’m building an event system right now for SBG. And I can do everything I need to do without the event calendar thing. But if you need like, because a lot of people are asking, they’re like, how do we do recurring events? How do we do this? How do we, and that is quite technical. And so, in that case, I might recommend a third party system. Now, the events calendar, I don’t know, that might feel like overkill to me. Shout out to Jonathan Jernigan and,
fuck.
What is, Elijah.
Dude, my brain was not working.
My brain was not working there. Jonathan Jernigan and Elijah from Oxygen have PyCalendar. I haven’t personally used it, but I would recommend you maybe check that out and see if that does what you need. It’s probably a much more lightweight version, and I think it has some unique features. Maybe check that out. Event management is a very technical thing, though, but I am showing people how to build one on your own, piece by piece and adding feature by feature and it does teach you a lot. Okay let’s go up here. You can change the default heading level under a theme style element heading. Love this. Alright let’s go theme element heading. There you go. Thank you. Learn something new every day. This is good, this is fantastic. So I like this. I don’t think you can do this in Oxygen though. But this is a really good thing to know in Bricks. Man, that saves a bunch of headaches, doesn’t it? Okay. Shout out to Amanda Lucas for the quick tip. See, this is why we are all here on the streams, guys. This is why we’re all here. So now if I insert a heading, basically what that does is if I insert a heading, it is, oh, maybe I have to reload the builder, let’s see. Or actually, it actually looked like an H2, even though it still said H3 over there. No, it’s an H2, yep. It’s got a refresh, a quick little refresh on the builder. So, that’s fantastic.
Yeah, H1 is way worse.
You should only have one H1 per page.
Absolutely, yes. Okay, let’s scroll down, find some more questions. Question, does the new, okay, we gotta, hold on, let’s see. Does the new pop-up element work in a query list of products display individual? So, yeah, I answered this earlier and I’m waiting on you to clarify. Are you talking about the BRICS pop-up element or the frames modal element? That is a critical, I really cannot answer any questions about the BRICS pop-up element because I don’t use it. I use my own modal, I use the frames modal element and that’s it. For SEO, do you have a back linking strategy? Let’s talk about that. Simply because it’s rare that people ask questions about SEO. So we’ll spend a little time on that, because it is important. So, let’s get this out of the way. Just so we’re all on the same page. How about this? We’ll do a pop quiz. I like pop quizzes. Pop quiz. What is the number one SEO ranking factor. And I’m gonna say this with the utmost confidence, and I believe that it is hands down objective reality. What is the number one? This is not like we can all debate about it kind of situation. It’s kind of just objective fact. It’s just objective reality. What is the number one SEO ranking factor? That is pop quiz, pop quiz. Now, if you’ve watched my trainings in the inner circle, or you’ve seen my other streams where I answered this question, well, we’ll see.
We’ll see what people say.
All right, so we’ve got quality content, content, document relevancy, domain authority, content, being an actual authority on the topic. Okay, so none of these are correct. Let’s keep pop quizzing. Any other ideas? It’s not content, it’s not domain authority. It’s not keyword relevance, it’s not semantic tags. I’m just rattling off what I’m seeing. It’s not setting your robots to crawl. It’s not that. That is quite important, but it’s not that. It’s not backlinks. It’s not backlinks.
It’s not copy. It’s not user engagement.
Not any of those things.
It’s not originality.
These are all very good guesses, by the way. Very good guesses. Search intent, it is not search intent. These are all very good guesses, though. Answering the user’s query. I’m talking about SEO in general, not necessarily like the URL of one specific page. Page structure, it is not page structure, it’s not site architecture. Actually having a website, very important for ranking. That is a shout out to Dawson. I guess you could argue that is the number one. Okay, so what is the number two? Assuming you have a website, assuming you have a website, what is the number two? Solving the problem for the user is not, link quality is not, focus keyword is not. Okay, we’ve had enough guesses. The number one ranking factor, besides having a website is brand. Brand, brand, brand, brand. Separate from domain authority by the way, brand, okay? Brand, now right off the bat, right? If you have a brand new brand, okay, obviously that has no value. If you have a well-known brand, now this doesn’t exist, but think about a well-known brand that does not have a website, if there was a thing. Like imagine that McDonald’s did not have a website, okay? But McDonald’s absolutely dominates brands when it comes to like fast food, okay? It’s all over the globe, it’s worldwide, it’s just brand is tremendous. And then, but let’s say they didn’t have a website. Now let’s say they create a website and Google crawls the website. You think Google’s like, hey, you know, McDonald’s, those semantic tags are not so good, okay? Hey, McDonald’s, I see, you know, your domain is a little new. You don’t have too many backlinks, right? Do you think Google cares about any of that shit? When there’s a brand like McDonald’s and somebody searches for fast food near me, McDonald’s is gonna be number one. Like if there’s a McDonald’s in the area, okay, they’re winning. They’re winning by default. It doesn’t matter. Their backlinks don’t matter. Their content doesn’t matter. Their user experience doesn’t matter, their this or that, they just rattle off all the other shit. None of that matter, they are already dominating the market. And Google’s number one, a lot of this stuff takes care of itself, we’ll talk about that, okay? But what is Google’s number one goal? It’s to serve the most relevant result to the user. The most relevant result, by the way guys, by default, is the most relevant brand on the topic. That’s it. The most relevant brand within that search is the most relevant result by default. So all the other stuff doesn’t matter. Now, you could say, well, McDonald’s dominates because they have a domain authority of 92 or whatever it is. And they dominate because they have a gazillion backlinks. Why do they have a domain authority of 92? Why do they have a gazillion backlinks? Because they’re a dominant brand and dominant brands get those things by default. So how does this translate to a local business? I’m just letting you know, I’m just letting you know, if you put 75 trucks, let’s say you’re a roofing company, you’re a plumber, whatever, and you have a big business. You don’t have a website yet. You have a large business. You got 75 trucks. You got all your business from the fucking yellow pages. It’s 2023 and that’s where you still get all your, I don’t care, right? But you don’t, for some reason you don’t have a website, but you got a great brand. You got a great business. You got 75 trucks on the road. Okay. The minute you take all 75 of those trucks, right, or let’s just think about it as a tactic. Is having 75 trucks on the road with the name of your business, now assume you have a website, with the name of your business on the side of a truck, is that SEO? Is that doing SEO? Absolutely, that’s doing SEO. If you have 50 billboards in this city. Everybody driving everywhere sees that business. Is that doing SEO? Yes, absolutely. That’s doing SEO. Because you know what happens, even if the website isn’t even on the thing, the website URL doesn’t even, you don’t need a QR code. You know why? Because all those people go, I want that company. Google, type the name of the company. And this is just happening thousands of times a day, or hundreds of times, whatever size the city is. And what does that inform Google of? It informs Google that that is the dominant brand in that area, and the minute that brand has a website, Google’s like, you’re in, okay? Because they already have other signals, other signals that this is the dominant, most relevant brand. And the things like content, backlinks, semantic HTML, all of those things matter, my friends. They all matter, but they’re not the number one ranking factor. If a client has a shitload of money, it’s like get your name in front of everybody in your area. That’s doing really good SEO. That’s a very strong SEO technique. Be the dominant brand in your area. If you were to pour all of that money, because by the way, that helps you in many other ways. I mean, many other ways that helps grow your business. If you’re like, well, our SEO strategy, we’re gonna take all our money. We’re not gonna do all the offline stuff, getting in front of all the people that we actually wanna serve. We’re just gonna take all that money and we’re gonna put it into your technical SEO. Like, make the semantic HTML stuff happen, go farm backlinks from wherever you want, you’re going to get way slower results. Way slower results. Why? Because there’s no signal to Google, there’s no outside signal to Google that this is a relevant, trustworthy, dominant brand. And so Google by default just doesn’t care about you as much. So I maintain, I maintain that brand is the number one ranking factor. Now argue with me. Anybody, anybody, anybody, and yeah, you can hate McDonald’s all you want, that’s fine. I don’t eat at McDonald’s. I was just using them as an example. So yes, a lot of people will say, they’ll tell a brand, no, no, no, no, no, give me more money, I’m doing your SEO, give me more money for SEO, when that brand should be out in the community doing a lot of other brand building things, which will help their SEO, by the way, right? The idea that we can only do, that only technical SEO, right, from a web designer’s fingers, that’s the only way to do SEO, that is what I reject, right? Brand is the number one ranking factor. Tesla, go search like electric car, okay? Right, I assume Tesla’s like number one for electric car. Unless there’s a more dominant brand, I don’t know. Or unless Google decides that they hate Tesla. You know, Google does do some shenanigans, okay? Not saying Google is like the super most honest thing. I think when they did away with their don’t be evil slogan a while back, that was a little telling. Because they’ve gone in some very dark directions, I may add. Okay, no argument, I’ve been saying the same. I think you meant the same for years. Get local business, it costs less to service the customer. So what is your strategy for branding? Oh my gosh, I mean, there’s lots, there’s lots. That’s probably a question for a different time. We’ve got about five more minutes, because we are over time. Argument over, you already conceded it’s number two. Yes, because by default, you can’t rank without a website. Actually no, I’m sorry, Tyree, Tyree, let me back up. Nope, it’s not number one. You know why? Because you don’t need a website to be on Google My Business, for example. Like if you’re a local business, you don’t even need a website to be the dominant, dominant number one and get a crap load of traffic on the internet. You can just use a GMB profile and call it a day.
So brands need to create topical authority by keywords
to be listed during keyword searches
that are not brand name and as a keyword. Absolutely, yeah, absolutely. Major brands should still do content marketing. But here’s the thing, when you are a dominant brand and you do content marketing, you rank for everything like fucking magic, like HubSpot. HubSpot just ranks for almost anything they want to in marketing land because they’re a dominant brand. Now how did they become a dominant brand? They actually became a dominant brand through content marketing, right? But I digress, right? They’re an online business, okay? A lot of people that we work with are offline businesses and when you’re an online business, the only way you can really get brand dominance is with online things, right? So we’re talking about how offline businesses can think about SEO in a different way.
But yeah, absolutely.
I mean, once you’re a dominant brand in the local area, you get to rank for whatever you want to rank for. That’s like the best thing about it. Before, oh, the question moved. Before finding Bricks, I asked my employer to pay for the Pro Cornerstone Builder, but I kind of regret it now. What do you think of the builder? Have you used it before? People have mentioned it to me and they said I should check it out. I have yet to check it out, but I probably will check it out very soon. In fact, sometimes on WDD Live, we take a whole episode, we just go through a brand new builder and I do a first look at it. I mean, if you guys want to see that related to Cornerstone, then I’ll absolutely do that.
Okay.
Will you bring experts on your lives in the future, for example, to discuss GMB, SEO, marketing, et cetera? Yeah, it’s very possible. If you know anybody you wanna see on the stream, ping them. Let them know that they need to come on, and then ping me, and let me know I need to have them on. Yeah, I’m willing to have guests for this kind of stuff. I mean, the good thing about WDD Live, it’s like web design for dummies, and we talk about everything that makes a website successful, which means that we can go in almost any direction we wanna go in.
Okay, one more question.
Let’s see, let’s see, let’s see. I’m looking for a good one. Helping equip non-digital colleagues with more knowledge about our world, small agency digital, okay. I think that’s a good, I’ll star that. Let me, let me see if there’s anything that beats that one out.
Okay.
I still didn’t get clarification on that pop-up element question.
All right.
This will be our, uh, digital company. Let’s see what we hear in the chat. Should we close our businesses and start selling billboards?
Um, if you’re a digital company, you’ve got to do digital things. You’ve got to do content marketing, you’ve got to do video production, you’ve got to do all digital things. You’ve got to do social media, you’ve got to do it all. Brand is not SEO, brand is marketing. What do you think SEO is?
Marketing.
We’re talking about a subset. You’re like, the cash register is not a sales or something. Like, no, it’s a piece of sales. SEO is a piece of marketing. It’s a subset of marketing. Brand is sales, by the way.
Like, you know, there’s probably a lot of people like,
branding is not sales. The hell it isn’t. If you have a dominant brand, do you know how easy it is to sell things? Do you know how easy your salespeople have it if you have a dominant, trustworthy brand? Salespeople do like a tenth of the work to convince people to buy. So absolutely, branding is sales. Branding is pretty much everything in business. If you have a shoddy brand, your sales people have to work a gazillion times harder. So you could say, hey, we’re gonna get a lot more sales if we have a dominant, trustworthy brand. Let’s focus on dominant, trustworthy brand. Everything else gets easier. And then people can be like, well, chicken or the egg. No, it’s just, isn’t there a book, it’s called The One Thing. There’s also the domino effect where it’s the concept is if you have a domino there’s a string of dominoes all these dominoes sales marketing technical SEO semantic HTML UX UI it’s like this whole string of dominoes and it’s like but if we can identify the first domino if there was one domino that would knock all of the other dominoes down, shouldn’t we just put a tremendous amount of focus on that initial domino? Well, that initial domino happens to be Brandt, and it does knock down a tremendous amount of other dominoes. And unfortunately, the reason I say that is not to say don’t focus on the other dominoes. Obviously, all the other dominoes are still very, very important. But for some reason, we all are behind our keyboards, not really thinking about brand, not really consulting with our clients on brand. Okay? So if a client, practical example, hires me for SEO, if it’s a roofing company, if it’s a plumber, if it’s a whatever, and I talk to them about, what are your goals? You know, what do you guys want to do with this business? And they say something like, well, we want to dominate our area. Or we want to be, right now, we’re in, we’re dominant in this city, but we want to be dominant regionally. We have very lofty goals for how we want to expand this business. And it would be mismanagement. It would be neglect if I was like, so here’s what we’re gonna do with SEO. Give me all your money, technical SEO, PPC, we’re gonna do this for. If I don’t first say, what are your goals for expanding the brand into these areas and dominating as a brand in these areas? What does your customer service rating look like? Are we gonna pretend that all these other things don’t matter. I cannot do my SEO job if they have a one star rating on Google and Yelp. I, how, what the fuck do you want me to do? I’m not a magician. You have a shitty business. What do you want me to do with SEO? No, we gotta fix your brand first. Now, if you have 5,000 reviews and a 4.9 star average, well fuck, now we got something to work with don’t we? Okay, but people be like well, that’s customers I know but it all it all starts top-down It’s like what is this brand? Doing in these areas and I want to know that you’re out there with trucks that have the right branding on them to have your Names on the side you’re driving around white trucks. The first thing I’m gonna tell you to do is put your branding on all the trucks Well, but you’re our web design guy, but you want this to work, don’t you? Right, you see, like, you have to be a consultant that actually cares about the entire business and not just a piece of the business that you were asked to manage, especially when the entirety of the business affects the piece that you’re working on. Okay, so if you know the answer to other things and you or you see problems in other areas, it’s a really good idea to to point those out. Okay, I think that’s how we’re gonna close it today. Should we not focus on the services instead of the brand itself? If the brand is unknown, then what options do we have? Yes, yes, yeah. But the thing is, how do we define brand? We probably need to do a whole, you know what? Inner circle, we will do a, what does it look like to build a dominant brand? Masterclass, right? What pieces do we need to be paying attention to? What order do we need to pay attention in? The point of my rant on this particular stream was you’ve got to get out of technical SEO head mode and understand that Google is looking for far more things than backlinks and content. And the stuff that a typical SEO focuses on, Google looks way broader than that. It’s not that that stuff doesn’t matter, it’s that Google is looking for relevance. And when you start thinking about what makes something relevant, you get quickly out of technical SEO mode and into other areas, right, of thinking about a business. And it’s really helpful if we can all do that, I think. Okay.
I’m out.
That’s it for today.
Peace guys.
Love you.
Thank you for being here.
Hope you got a lot out of this.
I will be back very, very soon. I will be back very, very soon. Cheers.
