Welcome, welcome, welcome back. It is another Wednesday. It is 11 a.m. Eastern Time, which means that it is time for another WDD Live web design for Domies. When you arrive, say hi in the chat. Let me know you’re here. We’ve got Stripe Goat in the house already. Melvin Vitt.
I think it’s Asara. Is that the right pronunciation?
TIR, Tommy’s here. We’ve already got questions flowing in. This is fantastic. All right, there’s somebody in the chat named me. That’s a little, it’s a little confusing. Throwing me off.
Oh, oh dear. We are, should have refilled the water before WDD Live actually went live. Calisthenics Ireland is here. Gary is about to smash it once again. I can’t wait for Kevin to turn up and start speaking hardcore truth 15 minutes into the live. 15 minutes, that’s a long time. Might happen sooner than that, we’ll see. Charlie is here. Kareem is here. And yes, we are looking good today. Michelle, what’s up? Leonardo, Andreas here, Pedro’s here. All right, Suzanne’s here. We are flowing in. Let’s just update everybody on what we’re doing here. We had a WDD Live last Friday, but the normal day is Wednesday. The normal time is 11 a.m. And we should get some other viewers coming in here as YouTube sends out the notifications. What we do is deep dive web design critiques. We talk about everything that makes a website successful. We talk about the copywriting. We talk about the design, obviously, the user experience. We talk about SEO. We talk about content. We talk about everything that goes into making the website successful. We also do things like look at the DOM. That’s why it’s called Web Design for DOMmies. We see what the underlying code is like, how much quality is there. We talk about scalability and maintainability, best practices, accessibility, lots of stuff. And so that’s what makes this kind of thing so valuable. Plus, everybody in the chat, you guys get to participate in WDD Live. You get to put your own thoughts of the website that we’re looking at into the chat and the person that we’re you know who built the site is getting a lot of value by reading the comments and listening to the content on the actual stream and you get to ask questions as well and what we’ll do is after we typically do one to two websites we’re just going to do one website today because there’s been a lot of Q&A lately and I have not been I have not had time to get to all of the questions on every stream. People’s questions get left out, and so I’ve been giving extra time to Q&A lately. If there’s not a lot of questions, then the next stream we’ll do, we’ll do two website reviews, whatever it takes. We also can do mini tutorials. So sometimes people ask a question like, hey, how would you go about doing this or that. And if it’s not, you know, too complicated and in depth, we can pull up a dev install and we can actually do a mini tutorial live on the spot. So don’t be afraid to ask those kinds of questions as well. All right, Derek’s here, Edward’s here, Netrunner is here, Dean is here. What is up everybody? Tyree, absolutely. You are welcome for the Okay, so let’s go ahead and dive into the first website. I don’t really have much in the way of announcements. The only big announcement that I have is I did just get the design, the redesign for the automatic CSS website back. It’s a banger of a redesign and development is getting started like ASAP. We’re getting started on development ASAP. The automatic CSS website is the same website, it’s like the very first version of it that I ever created and it’s just kind of been sitting there because I didn’t really need it all that much, you know. It just has to convey the basics and allow people to sign up. They get sold elsewhere. They get sold on videos and referrals and all this other stuff. But it’s time. It now needs to go to the next level now and so We got the new design back fantastic And I can’t wait to get started on development And I can’t wait for you guys to see it as soon as it is done and and ready to go It won’t be too long. It won’t be too long Okay, so get excited about that get excited and then maybe we’ll just do it on WDD live. We’ll pull it up We’ll go through it together on WDD live. It’s gonna have some really cool features. It’s gonna have so we’re gonna have some fun with this We’re gonna have some fun with it. Okay, let’s go ahead and share the screen now. No sneak peeks. No sneak peeks of that one No, no okay, you just got a you just got to wait you just got it because it’s got it we got to have a It’s got to have a good unveiling, you know, nope. No sneak peeks of that one All right. Let’s go ahead and share the screen. This is our first and only website that we’re gonna be doing today on the deep dive. This has been just full disclosure. This has been translated from Polish to English by Google Chrome, which never does a fantastic job. So we can’t do a lot on the copywriting whenever we do a translation. It’s not fair to the site really, because it’s like I don’t even know if it translated it properly. So, I mean, we could talk about the copy narrative in general, but we can’t really get too specific on this. Julia says, where is Bev tonight? I don’t know, I don’t know. Bev is always lurking in the shadows. I mean, she could pop out at any moment. You never know when Bev is gonna show up, or call, or text, or anything else. But I just, I think Bev is a little busy right now. I just saw in the admin bar Kyle made a post about you know his client blowing up a website and I think Bev is over there. Bev is hitting up Kyle right now. So I don’t think she’s gonna bother us. That’s the good news. All right, so we have I guess we’re doing our no scroll test. That’s how we start every deep dive critique is we don’t scroll around the site. We just see what we see when it first loads. And so we have a logo which is in Polish and it obviously doesn’t translate because that is text in an image. So I don’t really know what this is. I’m getting the vibe that obviously I see runners, I see and they’re racing. They’ve got the little, you know, the little racing tag on. And it says, our runs. So maybe this is like, here, join our community of runners, meet new people and break new records. So yeah, it has kind of like a club vibe, like a running club or something like that. I guess it’s just a, yeah, just a community of runners. I don’t, is this not a business? I don’t know. Are we trying to monetize this? I guess we’re gonna have to find out. Or is this, you know, just the online, right? Like, I don’t know. I don’t know. We’re gonna have to see. Can anybody join this club? Is it a worldwide community? Is it a Polish community? Is it a, I think we need a little bit more specificity here might help, right? Because this is, um, it was a lot of online running communities and you, you know, they try to attract people from all over the world. This one feels just very, very localized to me. And so I think maybe a little specificity in the copy right here of like where this club exists, you know, and who can join it, so on and so forth. Because it has a registration. I mean, it looks to me like, alright, oh, okay, this is a third party website. So immediately we’re gone. We’re off of the we’re off the website. We’re over here. Let me translate some of this and see what’s going on. Okay. All right. So got to be got to be in this location to participate, got it. All right, let’s go back. All right, let’s start scrolling around. I mean, just general design, it’s very basic, right? It’s very just like, okay, there’s a little background gradient action. We’ve got a couple sections of content. No problem whatsoever. What do you guys think off the bat, like just general vibe? It just feels very basic right feels very basic I’m I’m I think right here you know I’m just gonna have to say it I think that logo should be smaller it’s too big it’s too big for the space that it’s in it’s it’s crowding there’s there’s no top and bottom padding much anymore and and look how it it puts a lot of white space around the actual navigation so I you know I’m a fan right here of the logo should be smaller Okay Let’s go down a little bit our runs hmm These look like past events. Yeah, or no these are upcoming events Okay, I would say like up upcoming up and coming runs And and we’re really like events just call them call them events. I don’t know. Fifth night run of st. Kinga okay let’s let’s click on one of these do these take me to a third-party website as well no I’m still on the website now okay and this one I can’t register for there’s no there’s no CTA to whoa these are clickable oh oh dear oh dear okay we’re into a PDF now let’s go down gallery what does this do oh now I’m off into another page. All right, wait a minute. This is a… So these must be past photos, photos of past events from this. Yes, let’s go back and translate it. It’s a little, you know, let’s just kind of think about the user experience that I’m having right now. Lots of tabs, lots of take me other places kind of thing happening. Where does movies take me? This is fun. It’s like which you know, what’s behind door number three? Okay, so we’ve got some videos there. Doesn’t this feel like… Another one. Now I’m off to a different site. Okay, and now what am I looking at here? Results, hmm. Okay, well this is interesting. I didn’t think this run happened yet. Oh, I’m confused, I’m just lost. Okay, let’s close that tab. All right, results, this must be past results, past events, I don’t know. All right, here’s the route. At least that one opened in a light box. So, you know, it didn’t take me somewhere else. Okay, here’s the poster. Great, fantastic. Oh, that one already happened.
That was the past.
Okay, see, this is confusing. I’m seeing, here’s the future. This is the future. I didn’t look at the date here. I saw these dates and I assume they were all coming up in the future, but this is the past event. So that’s a little confusing. And you can solve this really by just a little bit of logic where it’s like, hey, check the date. If the date is in the past, remove it from this grid. And that’s why I also say, you know, with this heading right here, say, hey, this is an up and coming, these are up and coming runs and then have a section for our past events. And you could kind of really separate those out. But you definitely, you know, I see I got confused immediately right off the bat because my eyes saw these because these are in the middle of the screen, right? And I just made a quick glance at like, are these in the past or the future? Okay, and my brain was like, these are in the future. Then I actually clicked on this one, but I didn’t look at the date when I clicked on it. And so now it’s in the past. So what happens, how is the page different if the run is in the future? Okay, well, there’s still some things. There’s still galleries, there’s still results it looks like. Okay, can you stick to translating this please? Yeah, so Yeah, I this is just a hey, let’s just man how can we lose the visitor? This is a recipe on how to lose the visitor Every time I go back it. Okay. No, it’s good. All right Fifth it I don’t know what fifth edition is or sixth edition. This must be the past run I know they call these additions. I don’t know how you Polish people are describing your things here. So fifth and sixth. So sixth is the upcoming, fifth is the previous. Wouldn’t it be very helpful here to have some reference points with our copy? Like sixth edition, would it kill you to put the date of this run coming up, right? And so fifth edition, the date of the run that the fifth edition happened, like that would give me immediate like context as to what is going on here. So, you know, you’ve put these links on the side, which again, we gotta talk about this layout maybe as well. I mean, look at, how do I get my, no, I don’t wanna take a screenshot of that. Let’s bring up this, nope, that’s the wrong thing. Okay, annotate, here we go. All right, check all this emptiness out, right? We’ve chosen a card layout where it’s a media on the left and then options on the right, but the problem with this layout is when there’s only two options, this is what you’re left with. You’re left with a giant gap in the design. It just doesn’t look very good. I would also think about maybe centering these down so they’re vertically centered with the media and But yeah, but I mean if you’re only have two things next to a media It’s just you’re always gonna have a ton of white space. I Think you know 6th edition 5th edition. They could have gone inside of the card itself Maybe have a little description of the event I don’t know there could be more done here to just kind of the layout Feels a little bit all over the place and then obviously when you have missing details you just have giant gaps in the design. It’s also a little odd to me that the breadcrumb is floating off to the right over here aside from the main heading. Usually you see that breadcrumb above and then you have the main heading. If that breadcrumb gets really long I’m curious as to like what’s going to happen with it. Is it going to break to multiple lines? That’s just going to be really weird. I would move that bread crumb up here what is this built on by the way let’s see oh okay I get it it’s a popular builder okay but yes elements or all right I have trouble saying it sometimes. Okay, so yeah, I feel like this all, whoo, could be rethought. I mean, let’s think about this. I am asking to see details on a run. So I click on it, right? All of this stuff right here, why have the page, this is a dedicated page for this run, okay? Why have all this stuff on other pages? Find a way to, I mean I get the results it’s like this is by a third-party system but the gallery, just show me the gallery, just put it on the page. You already gave me a template for this page but you’ve chosen not to put things on this page. Like now you’re making me go elsewhere and I don’t even know honestly where the heck I am. Where am I in this site? Where am I? Is this just a one-off page that has a gallery of photos on it? Let me translate this again. Why does it not remember that I want it translated?
All right. So we’re going down, down, down, down, down, down, down to… Oh my gosh.
Look at this. Look at this scroll bar. There’s like a gazillion photos. Thankfully they’re lazy loaded. Okay, can I open an immodal? Can I? Yes. All right. Okay, got some general scroll here. I wonder if any of this is accessible. Let’s do a quick accessibility check. Oh, no. No, hold on. I’m hitting tap. Yeah, you can see down here, see down in the bottom left-hand corner watch see it is it is Navigating through things, but I have no idea visually where my Yeah, where my cursor is zero zero clue. What about on this page? I’ve got a skip to content link and then nothing So it’s going it’s right now. I believe I’m in the navigation, but there’s no way to visually tell I Definitely can’t, oh gosh, all right, yeah. It’s opening PDFs now. So keyboard navigation is a zero. That’s a, yeah, that’s a zero out of 100 on accessibility there. But anyway, back to my point. You go to the run page, the gallery can be on this page. I don’t even, this is just, I guess, the flyer for this thing. Okay The videos could be on this page as well. You could have put these videos I don’t need to go to another page to watch the videos for this event I think having the template and then give me more, you know Like where’s the hero section put a hero section with the main photo to represent this run Give me a description of the run of that. There’s no content on this page. There’s two photos. It says 6th edition, 5th edition, no information about them. All information is hidden within these other areas and it forces me to open 700 tabs. And I think all of this can be rethought out. Okay, let’s go back. Now we get to our records. And once again, I’m lost right off the bat. I don’t know what, I assume these are like awards. Like is that what that means? Like these are awards we’ve won or something? But then I’m looking at these and I’m like I have no idea what’s going on. About 1,000 runners. I mean maybe this is mistranslated. Maybe this is just a horrible translation of what’s going on here. But I’m just not understanding what this section is about. Here’s your sponsors. But it says they support us. Maybe this is another mistranslation again, but I just feel like it should say like our sponsors. Just make this, this can be very blatant. Doesn’t have to be super creative. And then the sponsors, oh no, hold on. Are these singular images that are, didn’t I say not to do this? And no, okay, they’re individual images. They just slide in groups.
All right. But of course, you know, no, look, there’s all I can do is if I don’t have a mouse, I’m screwed
I can’t, you can’t really interact. There’s no controls to interact with the slider. Definitely can’t use the keyboard to interact with it. Can’t you got to have a mouse? I don’t know. I’m just not a fan. I’m not a fan of the triple row. So I just very blocky feels like a lot going on just I don’t know But this is the kind of thing where you should have a sponsors page maybe have a single row strip of Carousel that’s actually can be you know has controls gonna be navigated and then underneath that say view all of our sponsors and then take them To a sponsors page like you have a sponsors page up here doesn’t look like it. No. Contest contact news. Nope. Negative. Nada. You need a sponsors page because all these sponsors probably want to link to their site as well. Is that what this does? If I click on it? Some of these are clickable. Where do they go? Yeah. Oh gosh! In the same tab. Oh no. That’s a good way to just get people gone and never get them back. Those need to be opening in a new tab. But yeah, I would make a dedicated sponsors page for this kind of thing. Okay, let’s go to here and see what we got. This is our news page. Yes. All right. Right off the bat, I mean, I just, I mean, no offense, no offense, but I hate this. I hate, I see this all the time. I don’t know why this is so popular. Wait, like a card. A card, if you’re gonna put information in a card, please don’t make the card like half the height of the screen. It’s the card should not be this long. I don’t, I’m not a fan of the, here’s one size photo. Here’s a completely different size photo. Here’s a completely different size photo right here. And then look what it does to the visual like nature of this. Like we’re just, we’re just all over the place. And then finally down here I get some sort of like, you know, consistency and it honestly feels to me like this is some default Elementor stuff going on down here. That’s like the default read more Elementor link. I’ve never even used Elementor but I had to guess that you put in like a card element and then these parts were the default and then you change this stuff up here for the font sizes you made them bigger which they’re too big they’re too big for the space that they’re in and then you threw in some photos and because it’s just a pre-built element and not much thought was really put into it it doesn’t control aspect ratio of the images properly. I also will say this you know I should have mentioned this in the PB 101 images lesson that came out yesterday or the day before I can’t remember all the days blend together at this point you do too many live streams and everything starts all reality starts to blend together. I’m not a fan of mixing illustrations with photos like if you’re going to use photo and then you know look at this one has text in it, which I also say, never put real text inside of an image. You’ve got image with text, images, images, no text, then an illustration, illustration, illustration, with a box shadow. I mean, there’s just like, hey, let’s put anything and everything in here. No rules, no consistency, no standards, just, this is, and this is straight out of like, this is exactly what Bev would do, right? If Bev was like, we need a news section, Bev would hit you with all sorts of different photos, drop shadows going on, straight out of 1997, drop shadow, by the way. It’s just all over the place. No design consistency whatsoever. Look at this one. I don’t even know what this means but it’s shouting at me. Um yeah it’s just there’s a whole banner in here a whole flyer in this one. Um just not any sort of design or layout consistency whatsoever. Can I navigate with the keyboard anything on this site? Nothing nothing I can’t see any anything that I’m doing. Yeah okay so the news let’s see what what do you what is your news template look like?
Oh gosh, oh, oh dear.
What has happened? What is going on? Okay, let’s, this is already translated. See what I mean? Oh, hey, you don’t have to do these things for too long to realize that breadcrumb’s not in a great spot. That’s the breadcrumb, my friends, and that’s what happens when it’s a little longer. It gets very awkward. There’s just, hey, here’s a multi-paragraph breadcrumb. You ever seen one of those? It’s the new style of breadcrumb. We don’t want this kind of thing to happen. You got to give breadcrumbs a dedicated spot, okay, so that they can stretch out. They got to be able to stretch their legs, my friends. You can’t just cramp them up That because that’s a long headline that is a long headline This to me looks like a default template as well that just didn’t get it was never given any love this this template was never given any love But I mean look from a visual standpoint of like What is happening here? I I start around here, right? But then because of this nonsense going on over here it’s like whoa whoa whoa and then you know it’s all it’s all feels very cramped together really what’s the most important aspect of this page the most important aspect of this page is this okay what look at how this is like this is overlapping this visually and then these things are way too close to like our main content that’s going on over here. Gotta give this some breathing room, some breathing room. This paragraph and this photo are about to get in a fight right here. Like that is, you got a social distance. Did we not learn anything from 2020? You know, I was social, cause I’m an introvert, I was social distancing before it was cool. This needs some social distancing right here. This is way too close for comfort. All right, let’s scroll down. Typical, yeah, it’s just a typical news post. Nothing very exciting there. Oh, oh gosh, you can’t be doing this.
No, no, no, no, no, no, no.
You cannot be doing this, unsubscribe.
This is felonious behavior.
This is a multi-year prison sentence right here. Annotate the screen. Look at this. Does anybody in this stream wanna read this or try to read this?
I mean, this is like, you just hit them with the straight up wall of text. Just like, we don’t even, you know what? We don’t even have to, who has time for paragraphs? Who has time to break things into paragraphs? No, time is money. Just copy paste just throw that text all over that screen Yeah, we don’t need no paragraphs. We don’t need to make this readable All right, we got some photos in here Mmm. Mmm. Okay. I Mean, thank God you have photos because if you if you didn’t have photos I don’t know what this text would look like here completely unformatted. No subheadings, no, just, oh, just throw a couple lists in there, you know, just no headings whatsoever. Who needs headings? Who needs headings? Who needs paragraphs? We don’t need any of that. Just, you know, throw some photos in to separate things out, we’re good to go. Alright, this is a, this is what you call a, this is just a very low effort blogging no links no not no no nothing no nothing this is a copy paste job straight up okay association basic information oh and here we go I see this all the time right and this is how you know people are like how do you how do you get a site from $2,500 to $7,500 or something like that. Well, the easiest way is just to keep doing work and bill for it. Like, look at this. So we have an actual layout, which, you know, it’s not fantastic, but it’s, and it’s not a long page, but when you lay content out with some sort of like thought, attention to detail, effort, it costs money, right? We can all agree that that costs money. And so the way that you make a website very cheap is you take the internal pages and you just go, you know what, fuck the layout. Oh, let’s not put any more thought into it whatsoever. Let’s just put basic content on a page. That’s all we have to do. So all of the internal pages, it’s like, who needs design? Who needs layout? Let’s just create a basic template, copy paste some text. Hey, that’s a cheap website. That’s a affordable website. I don’t know how you guys do this at $7,500. Well, it’s because we put effort into every page. When you put effort into every page, suddenly it’s not so cheap. It’s gotta, it takes a little bit more time, takes a little bit more effort, a little bit more, oh God, you just made me download a file.
What is this?
What did you just have me download an RTF file? I don’t even know what that is a rich text document okay, all right, man, this is this is a Box of goodies
That doesn’t do anything. Oh was that the download link? Okay. Oh you got me going to PDFs dog from the from the navigation straight to a PDF. This is a UX this is a UX disastrous situation. Alright let’s go to English again there’s our runs contests. I think we’ve done enough and this is you know this is a typical, this is what I,
it sounds insulting, I mean look,
there are, you could be a professional and go use Elementor and have a, you know, an outcome far better than this, right? But when I think Elementor, this is exactly what I like imagine right that most element or sites are like and this is the problem with The wix’s of the world the square spaces of the world the element tours of the world the divvies of the world They attract Developers designers That kind of output this as the outcome. I mean, this is what should be expected from a user of that tool. I’m not saying that every Elementor user is not great and needs to practice, okay? There could be professionals that use Elementor. But what we know for a fact is, they target people that don’t really know what they’re doing. And so most sites are probably like, okay, it’s obvious they didn’t really know what they were doing. And that’s just the outcome. That’s the community that they’ve built, so to speak. So when people ask me about like, what do you think of Elementor? And I just got in a conversation with somebody the other day, we’ll call it a conversation. It was a conversation the other day. And they’re trying to tell me, well, actually it was like, it was a poll somewhere. I saw a poll, can’t remember what group it was in, and it was Bricks versus Elementor. And they put what’s the best builder, but really they meant what’s the better builder, Bricks versus Elementor. And a lot of people were like, there’s a reason Elementor is installed on 70 gazillion websites. Like no, the reason it’s installed on that many websites is one, they got a headstart.
And let’s talk about Elementor.
Before there were visual builders, you remember back, a lot of you may not have been around back then, a lot of you surely have or were, where your options for building in WordPress were literally pasting shortcodes into the default editor. And so the shortcodes did stuff on the back end, you pasted shortcodes in and that created different layouts, right? There were no visual builders. And then you got the divvies of the world starting to come in, you got the elementors starting to come in, you got the, and back then it was like, this is kind of the best we can do. And it was really, probably really good at the time, right? You know, so a lot of people back then used Divvy. There were no Oxygens, there were no Bricsys, there were no, it was either you custom code your own theme or you use these visual builders that are available to you. And at the time, this is a constant thing that technology goes through progressions. At the time, Divi was a good option, Elementor was a good option because they were the only options. There was nothing better. There was nothing doing it really the right way, right? But they gave you a much better option than what was currently available at the time. The problem is we’ve evolved so much since then and you know the tools now, Bricks, Oxygen or Lightyears beyond, elements were never caught up and the reason they never caught up, they could have caught up but they decided on targeting a specific market. And by the way, they do this for money guys, they do this for money I’ve explained this time and time again if all I cared about was money I would make automatic CSS for Elementor and then I would try to convince all of you that Elementor is the way to go I’m trying to convince everybody that the bricks is in the oxygens of the world are the way to go because they do things the right way and then I made the product work with those builders because they do things the right way and then I said you know what we can’t make as much money doing this but we could do the education and we can try to convince more people to use these tools and do things the right way and then we will make more money and we’ll earn it rather than saying well there’s a big pool of users that don’t know what they’re doing, let’s try to convince all of them to buy our product. That’s what Elementor has done, that’s what Wix does, that’s what Squarespace does, that’s what Divi more or less does, that’s what Breakdance is doing, that’s what Breakdance is doing. They are putting a lot of effort into convincing you that presets and copy and paste are the way to go. Right, I wrote a whole article, okay if you haven’t read this, go to geary.co. This is really good education. If you don’t really know what the arguments are, presets versus classes. Copy-paste styles versus classes. If you go in the breakdance community, they are gonna try to convince you hardcore that copying and pasting is a great thing and that presets are a great thing. That’s a new concept. That’s a new argument. They are trying to make a… Let’s be very clear about this. I have to say this over and over and over again until it gets into people’s heads. Some people seem to have very thick heads in this space. I don’t know why. It’s not really that difficult of a concept. Classes have been around since like the dawn of web design. Okay? BIM, I teach the BIM methodology for organizing classes. BIM didn’t come out last year, my friends. Okay? BIM has been around since like 2005. These are proven methodologies for scalable, maintainable, efficient web design following best practices
Have just just showed up presets are new. This is a new concept that came with page builders Copying and pasting styles in a visual builder. That’s a new thing Okay, so we have classes which have two decades of Like proven. This is how things work, okay versus the new concepts The burden of proof for what is better is on the new things You have to prove if you’re gonna say presets are better copy pastes better prove it prove it Now I wrote this article Because I want to tackle this and then we have to make a distinction here. Global presets versus actual presets. Now, the builders call these global presets. I believe they’re literally in breakdance, it’s called global presets, okay? So, that’s not the same as global styling. Global styling in CSS is not a preset. A preset is a very specific thing. A preset is a collection of styles. Okay? So if I and you know these are organized into what’s called a preset. And by the way, presets to complicate this even further, presets on the back end assign styles to classes. Okay? So the breakdance builder where they’re like presets are the way to go. Copy-paste is the way to go. Everything happening behind the scenes is happening with classes. You just don’t see the classes, and you just can’t use the classes. If it’s not making any sense to you, that’s correct. It doesn’t make a lot of sense. Okay, so that’s the distinction. If you want to style like, I want all of my H1 headings to look a certain way, well a builder might call that a preset. That’s just global CSS styling. That’s all that is. You’re targeting the HTML element and you’re styling it so they all look the same. It’s not a preset, okay? A preset is in Breakdance, you go to this special area, it’s a special magic area, and you make special presets, which is a collection of styles for a specific element. You do this in Generate as well. So you go to Generate Blocks, there’s a magic area. You go to the magic area and you can create presets for elements. Like you can make a card style. But you can’t do that in your normal page builder workflow. You gotta go to the special magic area to do that, right? So let’s talk about that. You have to exit the page building workflow to go to the magic area where you can create presets. Then you come back to the page building workflow and you can continue doing the work. Why not just do the work in the workflow you were already in, you just, classes. Okay, so page builder global presets are weak, limited, and unnecessary. Let’s edit this. I want, because what I love, I love that people think they can come into a Facebook post conversation and write five sentences that are trying to convince me that presets are the way to go. When I’ve written, I mean, they even know, some of them know that this article exists. 2,600 words. You know, there’s quite a bit to say about this conversation of presets versus classes. Because if you get me going on a topic, if you really want to debate, you better be ready to debate. You better be ready to have some arguments with some evidence and back it up. Right. And so that’s exactly what this article does right don’t drag me into the debate unless you really want to go because I can go I can go and this is this is it you want the whole breakdown point by point by point by point with examples of how presets and classes are not the same thing and presets are like you take classes and you dumb them down you remove functionality you end up with a preset and you can you cannot do with presets what you can do with classes. That is a fact. Okay? So I would encourage you to read this because it’s really good education. If you don’t understand the underlying philosophies of this kind of stuff, and really the line of thinking that you should take when developing a website, this is really good education on that topic. But here’s the here’s a main one right here and and here is that this is the nail in the coffin. This are this single argument I make many arguments many arguments with examples this single argument is the nail in the coffin. Classes are extremely valuable because you can chain them together. A preset, you can only assign one preset to an element. That’s one collection of styles. You cannot chain presets together in any builder that I’ve seen. That’s a big, big, big, big, big, big problem. That’s like a major issue. That’s a major issue. So how do we get around that issue? Well, let’s say that the builder was like, well, we’ll just let you chain precepts together. Oh, will you? Because then it’ll be fucking classes. What will be the difference at that point? There won’t be a difference at that point. That’s the nail in the coffin. If they want to overcome the inherent limitation, they have to admit that the thing that they avoided in the first place is actually the best way to do it. That’s done. We’re done here.
So there is no winning this argument. It’s just you either admit that presets suck compared to classes, or you make presets behave like classes, which is admitting that classes were the best way to go in the first place.
Why are we even having this conversation? It goes back to the philosophy of they think the users are dumb they think the users cannot understand or comprehend how classes work and it’s really not that hard it’s really not that hard I’ve explained it ad nauseum I’ve taken people who come from Elementor come from Divi have never used a class in their life and I teach them here’s how classes work here’s how they’re used here’s how you organize them and they do that they actually you know in this day and age it’s it’s you know it seems rare but it’s actually not where they actually listen and then they apply and then they come back in a month and they’re like do classes is a game-changer and I’m like exactly right welcome welcome to the world of classes and then they realize oh doing copy paste Nonsense and presets and all this other stuff is is not not the way to go And I mean really you could just does it pass the smell test right does it really copy paste the styles? That’s the future of web design really that’s the future of web design. Can you let me just break that? Immediately let’s just let’s just immediately put a nail in the coffin of that argument too. Can you copy from one page and apply to every other page on the website? No. If it was a class you could but not with just the standard copy paste. You can only copy styles to elements that are on the same page you’re working on right now and if that element exists on a different page you got to go to that page then paste the styles go to the next page and paste the styles. Nobody wants to live that life. Nobody should want to live that life. Now, if you’re working in VS Code, copy paste is actually probably a legitimate thing in VS Code, right? There are developers who code by hand who might make the case that, in fact, Tailwind, Tailwind users make this case all the time. Tailwind users say copy paste the styles. And you know why it’s a legitimate argument for them? Because VS Code has multi-cursor editing. VS Code allows you to select information that exists in multiple pages of the directory and change them all at once. You can’t do that in a page builder. That is impossible in a page builder. Thus, copy-paste is a terrible argument for page builders. So we take our entire philosophy and put it into presets and copy-paste. Why? One, because we think users are dumb and they can’t do it the class-based way. And two, because if we can convince people that they are dumb and that they can just pick up a tool, like Wix tries to do, like Squarespace tries to do, like Breakdance is trying to do, like Elementor tries to do, then we can make a lot more money. Hey, we’re happy. We get a gazillion users and they all make shitty websites. They all make unscalable, unmaintainable websites. But what do we care? Checks cash just fine on our end. That’s the situation that we find ourselves in. This whole, it’s this whole thing, AI coming out, all this AI integration, it’s all convincing people. Hey, you don’t need to know how to design. This is the Wix commercial guys. Anybody can do it. Look at this dad in his polo shirt just got back from golf making his website on Wix. It’s every commercial. So you don’t have to know what you’re doing. Come make a Wix website. And they all make shitty websites of course. Because you have like It’s like if Canon, you know, Canon is like, Canon comes out with a camera and made commercial, like, you don’t have to know photography, just pick up this magical camera, put it on auto, and do that. And that’s what people do, right? And then it’s like, yeah, okay, I could take photos, but does that make one a photographer? No, you actually have to know photography principles to be a good photographer. You have to do the work, you have to study at some point, you have to practice, like it actually takes time. We’re in highly technical industries. You can’t just make a magic pill that everybody can swallow and suddenly they’re getting the work done and doing a great job at it. It’s just not gonna happen. So every tool that tries to make this happen is going to fail. Either the tool is going to fail, or if the tool succeeds, all the users of the tool will fail. And that’s what’s happening with Elementor, that’s what’s happening with Wix, all of their, not all okay, not all, not literally a hundred percent, the vast majority are failing, are failing, the output is not acceptable. Okay, so that’s what we’re that’s what we’re experiencing right now. Okay, let’s go back and check on let’s see haha. No more live streams for two months, okay? I don’t know what you guys are talking about let me let me scroll back up Let me go back to camera here And then I hope I have to or I hope I remember to go back to screen sharing if I need to Okay, let’s let’s go up here. Hmm. Glad I was able to get that off my chest. Design-wise, I would like to see the brand colors more used in the website. So far, the logo is the only color on the screen. Color would help distinguish what’s interactive versus what’s static media or static meta. That’s good, good comment there. I don’t think this website is driven by CPTs as opposed to just straight pages. Probably not. Also, where the rest of the runs. Yeah, that was the other thing that confused me too. It’s like, you know, if we have runs that are in the past, why is it only like one of them? I couldn’t see any others. How do you know support sponsor images are scrollable? How do you know support slash sponsor images are, oh, you’re asking that like how would a user know that they’re scrollable? Got it. Anyone know what tool Kevin is using to draw squares and lines on the screen like this? It’s just some, it’s something in the Mac app store. Just go to like, just type in annotate, screen annotate or something like that and you’ll get it, it’ll come up. Kareem says, this is the normal widget from Elementor. All right.
Let’s see, site is mixing square and rounded image borders. Yeah, I mean, why not?
Damn, better late than never and already a great Kevin rant. Is Kevin being trolled? No, I’m not. I mean, this is Elementor. This is the life that Elementor users live for the most part. I remember having clients that didn’t want to have any gaps between paragraphs or elements and pages. I told them about good practices, they didn’t want to hear it. Oh, I don’t know why some clients think the way that they do. I just don’t. Where do they get these ideas from? It’s like, hey, Mr. Client, you know, 99.9% of the websites on the internet have spaces between paragraphs. Can you explain to me why you don’t want them or you don’t think it’s a good idea? Personally I love when I browse a website and it randomly downloads files without prompting me. Yes. Feel safe. Surely that’s not a security risk at all. Honestly I’m just waiting for the stream to switch over to crypto scams any second now. Visual composer was a thing. Yep, visual composer. Was that the first one? Was that the one that really broke into the visual design market? I’m trying to think back and I’m terrible with dates. I’m terrible with like order of things in dates. But I feel like that was probably the first one, right? Yeah, downloads without permission is an absolute no-no and possibly dangerous. Okay, let’s go down. Question. We are moving into the Q&A phase of this. We did the deep dive, and unfortunately we couldn’t dive that deep because we got stuck on some very, very basic things. But then we moved into the rant phase of WDT Live and now we’re into the Q&A phase. So you can start putting your questions in. You can now ask questions on anything. Anything that you want. You want to see a mini tutorial, we can do that. You want to talk business, pricing, sales, we can do that. We can talk about anything. When moving from Elementor to a modern builder such as Bricks Oxygen, do you do a fresh install of WordPress in staging or do you migrate the current one first and then install Bricks? Really, really, really good question. It depends on the website, it depends on where content is stored in the website. If the website already has CPTs and custom fields and all of that. Best believe I’m trying to bring, especially if it was logically done, I’m trying to bring all of that stuff over because I don’t want to do all that work again. If it’s just every page is built in Elementor and there’s no custom fields, there’s no CPT, there’s no point. There’s no point in bringing all that junk over. Just start from scratch, build it right, and move on with your life. Hiking through theme forest to find a theme to use on a website. Damn I feel so old now. Yeah, well that’s because we didn’t have visual builders. That was like you had to do that. It was either code your own theme or go find one that was already built that kind of looks the way you want it to look and make some CSS adjustments along the way. And that’s how you can get it done. I love the idea of working as a community to help others upgrade their capabilities improperly. Yeah, we need to, we need to. You know, there’s people who criticize this kind of content. There’s people who criticize, you know, first of all, I think if we’re professionals, you know, you shouldn’t need things sprinkled with all of this sugar, you know, to get your feedback, right? It’s like in jiu jitsu, you know, tell me what I’m doing wrong. Like, you know, give me the facts because I’m I’m tired of getting fucking strangled Okay, and so if you can get a teacher that doesn’t try to just be nice to you and tell you you’re the you’re the Best every single day You know they’ll actually tell you What you suck at and what you need to get better at so that you can stop being strangled all the time That’s really really really beneficial, and so we should kind of treat this the same way It’s like you don’t have to sugarcoat it. Just tell me what I need to improve on so I can improve on it. It’s just that’s the best route to go I think. And then there’s people that criticize this concept of talking about professional standards. There’s no definition of professional and you use any builder that you want to build. Look at our industry. Do you want our industry to be like the used car industry? Do you want it to be like the mom photographer industry? No, you know, no insult to moms. It’s just a thing. It’s like, there’s a bunch of stay at home moms. They’re like, I need to make some money on the side. So they go order a DSLR. And then suddenly they’re a photographer. Suddenly they’re selling family portrait sessions. Suddenly they’re selling, you know, let’s do your Christmas thing in a field and you know what most of them suck you know what the ones that put in the practice and the time and the effort and they study and they actually care about you know getting better and better and better and they actually submit their photos for critique and then they listen to the critique without getting all up in their fucking feelings all the time they actually get better they actually become legitimate photographers they actually can create a legitimate business. And so, but what did they have to do? They had to get the education from somewhere. They had to get the feedback and the criticism from somewhere. They had to not get all up in their feelings. And then they had to practice and put in the time. There is no shortcut. It doesn’t exist. So this idea that we shouldn’t have professional standards, standards we should use any builder we want to build with if you follow that philosophy you will end up with a mom photographer you know ecosystem and then when clients come to this ecosystem to try to hire like you know thankfully with you know photography it’s like okay well well here’s the thing even even in the photography realm their portfolio I just put yourself in the shoes, I’m trying to find a photographer. I’m not a photographer, but I’m trying to find one. And all I have to gauge whether they’re good or not is testimonials, which are easily faked, and a portfolio. So then I scroll through the portfolio and you know what happens with a lot of amateur photographers? They’ll go to workshops or they’ll go, and this is good. Thankfully, you know, they’re getting coaching, they’re getting education and so on, but they go to workshops, and people at the workshops help them take photos. And those photos are actually decent because they were at a workshop. And by the way, they had a professional model, and somebody else set up the lights for them. And you know, they were, but you know what, those photos end up in their portfolio as if they created these things out of thin air. And then people hire them going, oh, these look pretty decent. And then they show up at the shoot and they actually don’t know how to do all those things themselves. And so the photos don’t turn out that great, client kind of ends up screwed. This happens in the web design industry all the time. The portfolio looks great and we don’t even realize, oh, I worked on part of that website, I didn’t actually do the whole thing. That’s a lot of developers. They were hired by an agency to do this one thing and suddenly the whole website shows up in the portfolio and then clients hire based on this because the client doesn’t know any other way to judge. So you really can’t. So what happens is we have an industry where we start to get a bad reputation because so many hires have not worked out. It’s like you hire the person and oh they didn’t do a good job. It sucked. I didn’t end up getting what I wanted and what I needed. It’s not scalable. It’s not maintainable. It’s built in Elementor and we see this all the time client comes to us and say hey you know we had a website built it’s been six months now it’s not done yet I can’t get it I can’t get in touch with the developer anymore can you take a look at it just let me know what it would take to finish it do you have any of these inquiries that I’ve gotten of let me know what it would take to finish it because the other dude I hired flaked out and then I have to be the bearer of bad news because I open the website I already know if they flaked out I already know what it’s going to look like and so I open it up and there it is Elementor and there it is dog shit and there it is no CPT’s and there it is no framework And there it is no no nothing nothing that should be there. No site architecture. No, no nothing It’s just hey element or got started saw the commercial here we go and you know this is what $1,500 lost now $2,000 lost now and I have to come back and say there is no finishing this it’s not going to happen we’ve got to start over I’m sorry I’m sorry to break this news to you this has to be all redone from scratch and you know sad story it happens all the time that is the industry we currently work in because there’s no licensing and I’m not advocating for licensing I do not advocate for licensing. I don’t want a government to come in and try to Assign people to things I don’t want any oversight. I don’t care I don’t care about anything that what I want is everybody to acknowledge that Professionalism is important and that if our industry is seen as more a more of a professional industry with more professional players than amateurs right masquerading as professionals we will all do better we will all make more money our clients will be happier everything will elevate if we continue to argue for no standards and we continue to argue for use whatever builder you want to use because the code what that’s the grading scale that the client never sees the code like how is that the great example how is that a measuring stick for anything relevant like the person you make that argument I’ve it’s instant dismissal your mouth is moving you’re not saying anything important you’re not part of this conversation Okay, you’ve just made a completely irrelevant statement So that I think that’s the that’s the crossroads. We’re at right now Do we want this industry to be seen as a more professional? Industry with more valuable players or do we want it to be an industry where everybody does whatever the hell they want and they use? Whatever builder that and again, I’m not asking for any oversight committees or licensing or anything else. I’m asking for leadership. Just if there are leaders, please step up and stop telling people to use any builder that they want and do things the way that they want. Whatever makes you feel good is the, is the vibe right now. And I don’t think that serves us and it doesn’t serve clients and it’s not working. It’s not working. How many sites that get submitted for WDD live blow you out of the water? How many of them? I’m not hand-picking the like I’m not being like where’s the worst ones that I can criticize. I’m giving you what are submitted. That’s what I’m not even giving you the worst of what are submitted. Like I’m giving you the best of what are submitted. Okay so let that sink in for a second and this is what clients are getting. This is what clients are getting. So you tell me, is it working? Is the model of do whatever you want, use whatever builder you want, there’s no standards, nobody should define professionalism. Is that model working? I think it’s pretty objectively clear that it’s not working. And these same people are the ones saying, you don’t have to use classes, you can copy paste, you can use presets. Pre-built elements are the way to go this is the sales pitch from that same group the group that’s saying hey professionalism is important scalability maintainability important they’re not the ones arguing against the two decades of best practices that are proven effective they’re the one saying no try this new method. Well, why is this the new method? Is this the new method because it’s better? No, it’s the new method because most users are dumb and this is the best method for them. They can’t understand classes. So we made this new method, but it’s actually, if you just give it a moment, you’ll actually like it too, I think. And then, so I give it a moment and I think about it for more than like eight seconds. And I’m like, well, that’s kind of a big limitation. Oh, that’s kind of a roadblock right there. Well, why would we do it that way when we already have a way that works even better and doesn’t have these limitations? Why are you trying to sell me a new process when the old process is clearly better, objectively better? That’s what this spells out. Ok, it’s not just me saying, well, you know, my feeling is that it’s better. No, there’s objective reasons with evidence as to why it’s better. And that’s the thing, you’ll see this, people lose the argument immediately with me when they’re like, you’re just thinking because it’s your way. No, it’s not my way. I didn’t come up with BIM. I didn’t come up with CSS. I didn’t come up with classes. I didn’t come up with any of this stuff. I learned it, I’ve tried it this way, I’ve tried it this way, I understand what the underlying philosophies are, I understand the finish line that we’re trying to get to, which by the way is not how fast did I build the website, that’s not the finish line, okay? The finish line has some very important things that we have to think about. But what will these builders, these copy paste preset builders say? You could build a website super fast that’s not the finish line that’s not the measuring stick right how about a logo designer do I hire a logo designer and I go clock’s ticking buddy see how fast you can get that logo done no I want him to go through his process I want him to sit on the fucking beach and just look at the sky and dream up logos or whatever his creative process happens to be. If it takes a month, if I get what I want, like I look at his portfolio, I’m like, that’s amazing. I want that kind of stuff. Do whatever you need to do to make that kind of stuff happen. That doesn’t involve a timer. Put him on a timer, and you’re probably not gonna get what you want. So what is his focus on front-end speed, of how fast can I get it built? Now once you have a process, BIM, scalable, maintainable, you’re using a framework, maybe you’re even using frames, you’ve vetted a tool that gives you a legitimate shortcut. I said this in one video, it’s a very important distinction. There is a difference between taking a shortcut and cutting corners. That is a very big difference. Those are two opposite things. Taking a shortcut gets you to the correct finish line faster. Cutting corners means you didn’t do things the right way. You got there faster, but you didn’t do things the right way. I use the baseball analogy, right? We can run faster around the bases. There’s ways that we can run faster, but we gotta touch the bases. You can’t just skip across the pitcher’s mound, like I’m on my way to first. Oh, no, I’m just gonna take the, I’m just gonna cut corners here. I’m just gonna go across the pitcher’s mound. I’ll touch third. I won’t do first and second. I’ll touch third, then I’ll come straight home. It’s like, but Doug, you’re still out. You didn’t touch the bases, right? That’s the game. Like, we have to play the game still. So scalability is a base. Maintainability is a base. Consistency is a base. There’s all these things that are important. These are bases you have to touch. And so if you just speed past them, you just pretend like they don’t exist, and you’re like, well, I got there quick. It’s like, but you created dog shit. And nobody can maintain this and nobody can iterate on it. And we can’t do anything with it down the road. So that’s the situation that we’re in. I would really encourage you, once you read the details of this article, it should be a light bulb moment for you. And I just want to reiterate, the reason they’re pushing presets and the reason they’re pushing copy paste is because that allows them to sell to a gigantic market. It is not because, I don’t care what they say, it’s not because it’s a better workflow. It’s not because it does you any benefit. It seems like it because copy-paste feels easy. What is the law? Hold on, let me put it in on, I’m gonna pull this up. Tony, my guy Tony, reference this. I don’t even want to look it up. I don’t want to spend the time looking it up. But what the law says is you’re going to get 90% of the way into a project with a tool. You choose a tool, right? Like let’s say Breakdance Elementor or whatever. There’s no way to know how impactful the limitations of this tool will be until you’re 90% of the way into the project. You’re 90% of the way, then you realize, oh, oh, those are quite big limitations. And now you’re too far in, you’re pot committed, okay? And that’s a big problem. Now, if you have a lot of experience, right? Like I’ve been doing this over 20 years. I can not start with the tool. I can just look at the underlying philosophy of the tool. And I can go 90% of the way into this, we’re gonna realize that this ain’t gonna do the job. Right? There’s gonna be significant limitations to this. And I don’t even fall, I don’t have to fall into the trap. Okay, but remember, they’re gonna try to convince you and they are doing it and this is not just breakdance, the Elementor people will do the same thing, the Wix people will do this, they will tell you not every website needs that, not every website needs that. And it’s like, okay, but what is this, what is this concept? This brings me to the next tangent of what is this concept of choose the best builder for the job. That makes no sense to me whatsoever. So they’ll be like, well, you could use Bricks for that professional website, but just use Elementor for this one over here. So now I have to learn two builders and two processes. Remember Elementor, I’ve made this argument before, breakdance, make the same argument. You have to learn the language of the builder.
Let me open it.
This, this just grinds my absolute gears. And I don’t think Generate is the only one that’s done this, but I got to tell you, man, this absolutely grinds my gears. So let’s get, I’ve got a Generate install right here that I can pull up.
If I remember that, I believe it was Generate.
I don’t want to throw them under the bus if it’s not them. But where’s my local install? It should not be taking this long. Let’s go. Let’s go. I
Need some music to play
Let’s close this close this close this we’re done with that Come on There we go, my gosh, all right, so let me go to pages Let’s just go in here. Oh, no, no, there we go, grid. Let’s just do this, edit, okay.
Add, generate blocks, grid.
This grinds my absolute gears. Let’s just choose a simple one. Okay, is this a two column grid, guys? Is this a two column grid?
Text. Paragraph. I hate Gutenberg. I can’t do anything right in Gutenberg.
Oh, where did my element go?
Okay. Is this a grid item? Hmm. Publish. Publish. There is no excuse for this, in my opinion. Inspect. Div, div, div. Okay. Here’s the grid wrapper. Diff, diff, diff. Okay, here’s the grid wrapper. What does that say?
Let me highlight that in case anybody’s confused.
What is this? What is this? This is a life sentence. I mean, maybe they could be rehabilitated. We’ll have to see. We’ll have to do some meetings, you know, see if we can let them out at some point. This is a lifetime sentence. The idea that you are telling a user that they are adding a grid to the page and the grid doesn’t use CSS grid. So if I’m a developer and I’m like, I actually know what I’m doing and I’m like, oh, grid, yeah, I wanna add a grid. Let’s go, let’s add a grid. And it’s Flexbox, which by the way, has tremendous limitations over actual CSS grid. They’re not even in the same, guys, this is why grid was created, because Flexbox can’t do what grid can do. So the idea that you’re telling me I’m using a grid when I’m not actually using a grid, that is like the ultimate felonious behavior. Okay, so does that bother anybody else? Does that grind anybody else’s gears the way that it grinds mine? Should this be happening? Do we all agree that this should not be a thing? And again, it’s like, you know, people will criticize. It’s like, do they think I’m just like being mean or something? I’m not being mean. I’m just I’m just trying to describe reality without a bunch of sugar on it. I could sit here all day long just be the amicable guy, like let’s all get along and you know use whatever you want and you know some meek little grandma like that’s not what the industry needs. That’s not going to get us better tools, that’s not going to get us better clients and it’s not none of this is mean. I don’t I don’t dislike anybody personally, I don’t hate anybody personally and in fact I would say like you know I do this to automatic CSS I do this in my own tools I will open frames and you know I maybe one of the first frames that I put together I’ll go use it on a page and something won’t be right and I’ll be like what the fuck was I doing what the what was I doing here you know like I call myself a chump half the time, right? But at the same time, I recognize that like, standards are important and like we have to continue to try to get better and we want our tools to be better. And I for one don’t want my tool, I just don’t wanna buy into a tool that thinks I’m an idiot. I think the reason I’ve done certain things with automatic CSS is because I don’t think the users are idiots. Constantly, I’m like, no, we’re going to do it this way, because there’s always the argument of how can we make this more user-friendly? And if we can keep things the way that they’re supposed to be, but make them more user-friendly, I will get on board with that all day long. If we have to cut corners to make it user-friendly, or we have to say, no, users won’t know how to do that, so we have to just take a completely different route. We’re not going to do that. I will, you know what I will do instead? I will make more education. That’s the solution, is make more education. Not dumb it all the way down to where we’re working with nonsense. And that’s unfortunately what’s happened. And I’ll go back to this. It’s not because they can’t do the education. These are talented developers, right? The idea that Lewis is not a talented developer is that it’s not even in the realm of my thinking. Lewis is a talented developer. Lewis cares more about money than your education and your end product that you’re providing to clients. I’m not even convinced. I mean, this is a very hard argument to make. I have a very hard time. Now, I don’t know, let me back up, because I don’t know what Lewis’s history is. I don’t know if he’s a page builder developer, and that’s all he’s ever been, and he developed other software before that, and yada, yada, yada, yada, yada, or if he was a web designer who actually did work for clients, right, and then got into the page builder development world. I don’t know what his history is. I don’t know what his story is. But I have a really hard time believing that anybody that’s actually done real client work with websites, with web design in the real world, and who understands the fundamentals of HTML and CSS would argue that a dumbed down version called presets and copy paste is better than classes. I have a hard time believing that. So it’s very possible maybe he didn’t do any client work, maybe he’s a software developer, doesn’t have a lot of experience in the web design world, that’s very possible, I don’t know. But if he does have experience, like a lot, with HTML and CSS, I just have a really hard time believing that’s an authentic argument. And so the guy that built Oxygen, are you kidding me the guy that that was the the builder that really opened the door to class first workflow you can do whatever you want you can you like this is this a powerful tool has suddenly gone the route of presets are better copy pastes better you know you know what I think here’s my conspiracy theory that’s suddenly the better method because the whole element or market is now in front of me when I say that look at that look at that and get all these people always like to bring them in and they’re they’re morons they’re idiots we know that’s how Lewis thinks right he said that before with actual language okay he thinks they’re idiots and so he’s like hey it’s come on come on come on come on give me your money give me your money give me right here some presets here’s some copy paste looks just like you know the whole element or workflow that you know and love, it’s right here. We just made it better. That’s the whole pitch for Breakdance. It’s the better version of Elementor. Why? And he said it too, we can’t make money. Go watch the live stream. He was on a live stream where he said, we can’t make that kind of money with oxygen. He also said, all the people who bought oxygen LTDs, I don’t care what they think because I already have their money go watch the live stream so my conspiracy theory is Presets and copy paste is the new kid on the block because that’s the market we have to sell to Why because they’re all idiots and they can’t understand classes Pretty sure that’s the argument So I just happen to think that that’s wrong and I happen to think that you know It’s objective reality that classes are the right way to go, considering that’s like the core of all things CSS. This is the idea that you could just shit on 90% of what CSS is and be like, no, our way is better, copy paste is better. And limited classes called presets that don’t do what classes do, that’s better. I mean, wow, what an argument? What an absolute argument. Which I also by the way, let’s go here. Let’s go to the blog. Let’s go to Hmm. Where did I? Was it an article that I posted somewhere else? Maybe I posted it somewhere else. And maybe I talked about some of that in here. I do a lot of writing. So it’s hard to remember what’s in what article. I think it’s in that article though. But I talked about some of that in there. All right. I’m sorry. I’m sorry. This has been lots of ranting and not a lot of questions and answers. So I don’t even know how we got stuck on this. Let’s go answer some questions. Okay. Let’s settle it down. I would take a sip of water, but I don’t have any. So, yes, VC was the first one. Can you change Bev and Fred’s clothes
and hair styles in AI? Why, why would we do that? They’re perfectly dressed.
After seeing PB101-013, can you show the settings for media and WordPress and also if anything should be set in Bricks as well. I can’t show you ShortPixel because it doesn’t obscure my API key, so I can’t do it on a live stream. Every time I go to the settings, it’s gonna show my API key. But I can do it, I’ve done it in a video before. If you go watch my Blueprint for Bricks video, I show every setting in ShortPixel. The only thing I don’t show is how to serve WebP on Nginx servers. And I will do a dedicated tutorial for that because a lot of people are on Nginx and there are a few extra steps. So I’ll do a tutorial on that. Question, I use Oxygen, been loving your videos. What is Bricks and do you prefer it over Oxygen now? My only issue with Oxygen currently is that when you add a text block, it’s a div, not a p tag. Okay, so what is Bricks and do you prefer it over Oxygen? Bricks is a class first page builder with clean code output that more or less allows you to do anything that you wanna do and follow best practices. Oxygen is a class first page builder that allows you to do anything. You can follow best practices. It’s great as well. Bricks currently is the number one page builder for WordPress. Not in sales numbers, not in a lot of irrelevant vanity metrics, installs. The whole installs thing is a fraud. But sales numbers, size of community, interactivity in the community, number of educators, content creators, Bricks fails all of these things compared to Elementor, compared to Divi.
Because they got, that was kind of my original point, was they all got a big head start. Unfortunately, they never kept up and they targeted the wrong people in the wrong way and now they’re dog shit tools. But Bricks is the number one page builder in all of the metrics that matter.
See the difference?
Okay, so oxygen is number two. Then we look at the quicklies of the world and things like that. Trailing behind, if they can, oh, I’m sorry, I gotta go back to, there’s no reason to have generate up, but if, you know, generate can make a few important moves, as far as doing something in Gutenberg goes, they could be on my list. Generate is not something I’ve written off. I think that that mistake that they’ve made with Grid is absolutely atrocious, but I have not written them off. I want them to succeed, I want them to be a great Gutenberg alternative, okay? Even though I’m about to be in the Gutenberg market. I want generate to be successful. I don’t care who’s successful We can all be successful, right? So you’ll never see me talk bad about a thing just because it might be a competitor What you’re always going to hear is here is 2,500 words of why I think that’s not the way to go People they will by default assume that I’m just saying that because I have a tool over here. But that’s why I put the effort into the arguments. Maybe we could just read the arguments and all act like adults and use logic in our brain and then we can have an actual conversation about things. That would be nice. I would love that. Okay. So bricks number one, oxygen number two. As far as which one you should choose, well, in a lot of ways it’s personal preference. I will say that somebody asked this question in the BRICS community, you know, can we get a comparison table between the features of Oxygen and the features of BRICS? And that’s impossible because they share almost all the same features. What the difference is is in the depth of the features and the user experience of the features. So I give a prime example. They both have query loops. Oxygen has a repeater. Bricks has the actual query loop. Bricks’ query loop is exponentially superior to Oxygen’s. It can query more things. It can query users. It can query taxonomies. It’s easier to use. It is placed on an individual element instead of being its own container. It is, you know, movable around the page. You can move things in and out of it without breaking it. You can, you know, Oxygen may have improved those things since then, but point stands. They both have the same feature of a query loop. Bricks is exponentially better. Dynamic data, Bricks is exponentially better. Templating, Bricks is exponentially better. There’s just, they have the same feature set, but, and some of this may be my opinion, but guess what, guys? Do you know how many hours I’ve spent in oxygen? This is not a, oh, let’s just give it a cursory glance and then have an opinion about it. I have spent countless hours in oxygen, and now I’ve spent countless hours in bricks. That’s got to stand for something, right? So if you’re like, well, it’s just your opinion, but there’s a lot of objective reasons why my opinion is the way that it is, right? So you can’t just dismiss it as like, oh, I was gonna think something different, like go use it. And by the way, I said, when I first started using Bricks, I was like, I don’t see how this workflow is gonna be faster because it was a, some of the aspects of it, now it’s gotten better since then, granted that was back in like early, early stages, right? Some of it was just a lot different, right? How you add classes to elements with slightly different workflow and it felt a little slower at first. Then I realized, oh, keyboard shortcut. Okay, now it’s much faster. And I realized a lot of other things became much faster. You want me to tell you something I was dead wrong about? Here’s something I was dead wrong about. I criticized Thomas when he came out with the, oh, there’s Bev again. All right, no, it’s my mom, just kidding. Here’s what happened with Bricks. When I came into Bricks, there was no div element. There just wasn’t one, okay? I think they had a section and they had a container. No, maybe, I can’t remember exactly what it was. Maybe it was the block that they had. Section and a block. Maybe that’s what they had. And I was like, we need a div. We need a div. And, man, my brain is terrible with the order of how things have happened. But I know they didn’t have a div. And I was like, look, every page builder’s gotta have a clean div. It’s just, that’s a fundamental, it has to happen. It’s a box that has to be checked. And I put it in as a feature request. Then I just cheated. I cheated as I often do. I cheated. I went into automatic CSS community, I went into inner circle community, we were talking thousands of people, and I was like, please go vote on this, we need it. And then they all rushed in and like, yes, yes, yes, we need a div. And then a div appears. But a div just didn’t appear, it appeared with some other things. It appeared with, here’s a div, that is a literal div, then here’s a block, and the block is gonna be set to display flex by default. And it’s gonna be 100% wide by default. And then here’s a container, and then here’s a section. So we went from having like, I think, if I remember correctly, there were like two elements. We went to four elements. Like I only asked for one, but we went from two to four. And then I was thinking to myself, it was the block that I criticized, where I was like, I don’t think we need a default flex 100% wide container. Because I was like, we can just do this with the div, right? A div can be a block if it wants to be, so why do we have this extra thing? It just feels redundant. That was kind of my argument. But then I started building sites with it, and I didn’t say, you know what, I don’t like the block, I’m not gonna use it. I just started mixing in the block with the div. And then suddenly I realized, this speeds up workflow a lot to have a pre, like a pre-done block that already, because I don’t have to set display flex on it myself. I don’t have to set it to 100% wide myself. I don’t have to put a class on it. I can just add it to the page and there it is and it just does a specific thing. That’s actually really useful. And that’s like a good, that’s what page builders should do. It doesn’t have any negatives. It only has positives in the situations that you need it in. And then I went back into Oxygen to edit a site and I added a div because there is no block in Oxygen. I added a div and that’s the moment it really clicked where I was like, damn, I wish I could have added a block there because it’d already be 100% and it would already be set to display flex because let’s be honest, let’s say you’re creating a card, creating a card in a grid. You add a div, you add a heading and text and a button. You can’t use gap in the div, gap won’t work. Why? Because the div is not display flex. Okay? So you’ve got to go set it to display flex. It’s an extra step. Now you can use gap. Okay. So you see, and then if it needs to be a hundred percent wide, it’s not going to be by default because even though the div is a block level element, well, it’s getting very technical now, isn’t it? Even though a block is a div is a block level element, which should be a hundred percent wide by default. It is not a hundred percent wide because it’s in a flex container called a section See the sections and containers and oxygen are display flex by default which makes block level elements not behave as block level elements So there’s a there’s certain things the page voter does that it’s like, okay. Well, it’s not so great or maybe it is I don’t know it actually turns out that it’s not that big of a shortcut, like a cheat code, to have these things set to display flex by default. Again, because they don’t have to be, you can set them back to block if you want to, you can set them to inline if you want to, you can set them to whatever, because the builder gives you control, because the builder doesn’t think you’re a moron. So it gives you these kinds of controls, right? Builders are like, no, this is built for morons, so we’re going to hide all the technical things, we’re only going to show the really basic things and then we’re going to make things in a different language like plain language versus technical language because people are too dumb to understand the technical language and you know we and then you use a builder and you You get 90% of the way through a project. You’re like, oh man, there’s significant limitations. It’s like you think Yes, think it wasn’t built for somebody who wants to do what you do. It was built for a dummy It’s dummy to slap a page together and not worry about all the things that we worry about as professionals. There’s this, here’s a really perfect example. Somebody asked me what I think about this. There’s this thing called Framer, okay?
Here it is.
Imagine building a website in Figma, but you can hit publish and then it’s real.
And it’s easy for beginners to use. Look how easy we’ve made it. Look at this, look at this. You don’t even need to know Flexbox, just choose your little icon right here. How do you want to align this stuff? Right, no labels, no nothing, just point and click. Point and click, point and click, point and click. Ooh, stack, grid, direction. These are plain language, right? Anybody and their mom, come on down, use some Framer. And you’re gonna see content creators making endless videos about Framer, I’m sure. Look how amazing this is. I opened Framer. See, if I can break it in five minutes, is it that great of a product? So I opened Framer, because I already knew, I already knew, well, that’s very interesting. You’re not making people put things in divs and containers You’re letting them put things wherever they want like it’s Sigma Just drag shit around and wherever you want it to go It’ll go there and then we’ll we’ll handle the code on the back and we’ll handle all that part. You just focus on Dragging and dropping things right? So I go into framer and I’m like, oh this looks like fun and I just start dragging stuff around and putting it down and then a very simple layout I had published and then I went straight to the DOM. What a fucking disaster. What an absolute nightmare. Not a semantic element to be found. Nothing is in a section. It’s all divs. Everything is a div. Nothing has proper tags. Nothing, nothing, nothing on the back, nothing that matters on the back end. It’s been accounted for. But how could it, how could it, how could Framer know what you’re doing just dragging around things and dropping them? How could it know? It’s just auto generating code based on what you’re giving it visually. But there’s much more than just the visual aspect of what we’re doing. And so accessibility, no, out the window. You know, SEO, like actual code structure when Google crawls a site. I mean, how’s Google gonna know one thing from another? No figure tag, no section element, no nothing, right? So I went to the video and I commented and I was like, this is hilarious. I commented, I was like, I said something about like interesting tool, unfortunately, the DOM is an absolute nightmare. And you know what the first comment was? What’s a dom and that’s the user base and the question is can you take that user base and actually get them to create something that’s acceptable now somebody’s going to criticize what do you mean by acceptable well look if you’re building if my mom is building a website for her bunko club, then anything is acceptable.
But if my mom, if I call up my mom and I’m like, hey mom, how’s retirement going? Oh, well Kevin, you won’t believe this. I decided to do a little side hustle. I sold this company on a $2,500 website. I’m gonna have some more spending money this month. Oh, what are you using mom? Oh, this new thing called Framer that I found. Oh, great. I gotta phone that company up and be like fucking run run right like these why why are we giving people tools and saying you don’t need to know what you’re doing just use this tool it’s like magic and then we look on the back and it’s like but it’s a disaster where’s the value there does this make our industry better oh gosh I’m doing it again you didn’t need to see it don’t worry you didn’t need to see it. It’s just this, that’s all I’m showing. So does this make our industry better? Does this make any of us more money? Does this make clients trust us more? What does this do for us?
That’s my question.
It is a, it’s becoming a shtick
that I don’t share the screen
when I’m supposed to be sharing the screen. Maybe that should be a thing. And then all of y’all can get t-shirts and says show me the screen. We can have show me your DOM, show me your screen. Okay. Hey Kevin about BIM. I made a BIM. What time is it? I don’t even know. 30 minutes left. All right. Oh I missed one. I want to add an icon in my buttons and bricks in ACSS but can’t find a way to link the icon to a utility class and end up adding the icon manually to every button like a chump, any solution. I think what you mean is maybe change the icon with a utility class. Like if you wanna say button and then button check mark or button X or something like that, and that swaps the icon you can’t do that you can but I don’t you have to so you would have to use like CSS background image for the actual icon instead of putting a physical icon in the button and maybe that’s a route to go but then you would be able to change it with a class if it’s just a real physical element you can’t change it with a class because classes don’t change HTML so you would have to go the background image route with that. Hey Kevin, about BIM, I made a BIM for cards and wrappers and image and text. Then I thought an accordion would be better here, but then I need to copy and rewrite every class. Feels chumpy. Tips. Okay, so you made a card with an image and text, and then you thought, okay, so you just named it card, right? Okay, here, let’s do this. Let me open this install right here. You wanna know another phenomenon, so again, we say, what’s the difference between oxygen and bricks? Well, this seems like a small thing. I mean, it seems like a small thing, but it’s actually a really, really, really big thing. Hey guys, I’m sharing my screen, look at that. It’s fantastic. So let’s go with classes. Fantastic. So let’s go with classes, publish, edit. So here’s the situation you found yourself in. Section, let’s go with like grid three. Let’s go with grid gap, not grid gap, grid cap. And in Bricks, hey, it’s so easy to just go, I don’t need that anymore. Can’t do that in Oxygen. Now you gotta go to the classes magic organization area and you got to find the class and you got to delete it there. And okay, a little faster, a little faster and bricks to just delete it. Now you’re going to put in a card, right? Which is going to be a block. Hey, there isn’t a block in oxygen, little bit less efficient in oxygen, but here’s my block. And now you’re going to call it like my card. Okay, and then you put your things in. By the way, right here, I just want you to think, oh, should I give a sneak peek of this? Should I even let competitors know? I can’t do it, I can’t do it. I was about to tell you how this workflow right here is about to be kind of revolutionized and it’s gonna become, BIM is gonna become so much faster in a page builder, my gosh. Okay, let’s go add this. So you added BIM classes to all of these things, which I can do right here. So it’s my card double underscore. I’m gonna copy that to my clipboard. And then you’re just saying heading. And then you’re just saying, hey, this is a text. And then you’re saying, that’s really just a button action. Doesn’t even need a BIM class. And then you do all your styling. And then you’re like, you know what? This shouldn’t have been a card. This should have been an accordion. And so you’re faced with these all saying my card. I think this is the problem that you’re presenting right here. So I can click this little pencil, instead of my card, I can say my accordion. And guess what? All of the styles, see in Bricks, guys, this is a fundamental difference. In Oxygen, I agree, you are fucksville. You’ve got to delete all those classes, all your styles go, well, you could then, you could dance, you could do a dance, you could dance by copying styles from one class to another. So you make the new classes, copy styles from the old class to the new class. I get it, you can dance with it, all right? But in Bricks, the class name is just a visual reference, right? In the back end database, they’re all actually assigned unique IDs. So you can actually change the class name without losing the associated styles, just like you would be able to do in VS Code, right? So you can change the class names in your HTML, go over to the CSS, change the class names to match, and your styling all stays there, it’s great. Same kind of workflow in Brics. So I select my card, I come in, I just name, instead of card, I say accordion, all my styles are gonna stay here. And then I just do that for every element, it’s slightly chumpy, but Brics is also coming out with a class manager where it is probably gonna be possible to do all that bulk. Okay, but that’s how you do it. See, but if you’re an oxygen, much less efficient workflow for doing something like that. But I mean, I saved it, right? Now it can be an accordion and all the classes make sense. I think that answers your question. Okay, have you tried the plugin UserWay for usability? Some clients think it’s great, but I believe it creates more problems. I think you mean for accessibility What is user way?
Yes, no don’t use any of these these are terrible
to the accessibility community these are Basically like no that’s a middle finger like you you’ve you’ve made the website worse in a lot of cases by using these accessibility overlays. So no, accessibility has to be done by hand and it has to be done the right way. There is no magic pill for accessibility. Okay, what’s the best way for freelancers to get their foot in the door? Where, how do you find these business owners Google Maps? Listen, I kind of, I put a, I’d never done this before in the past. I’ve always gotten my business via other methods, but I wanted to do some PPC trainings and tutorials and I’ve done PPC for other clients in many other different industries I’ve just never done it in web design but I was like you know what I’m going to do because I just like to experiment I like to play around and I have to create these tutorials anyway I was like I’ll teach how to set up a Google Ads campaign and I’ll just do it for my agency and we’ll see if we can get some web design leads and I did like the bare basics and I got a $15,000 job and I got a bunch of leads that turned into a little bit smaller jobs and it happened pretty quick. I was like, oh, okay, that’s fun, it’s interesting. So I mean, you can literally go with PPC with a good landing page and a decent PPC campaign, you can be getting clients in 72 hours, right? Now it took a little bit longer than that. And for that $15,000 job, I think that month, I had put in 750 bucks into Google Ads. It’s pretty good ROI. So yeah, you could do it with PPC. Now in the inner circle, I have a video called the top three ways to get web design clients fast. And so I would recommend going to watch that video for sure. One of the ways is PPC, but there’s two other ways that are really important. And they’re really important for getting ongoing work and work that you, you know, PPC is like, the unfortunate side of PPC is, you have to have some money in the bank. The other two methods don’t require money in the bank, but PPC does, the downside of PPC, you have to be willing to like, just light, potentially light, you know, a grand to two grand on fire. And I get it that not everybody is in that situation. They just can’t do that. They need that money to pay bills. They need that money to put food on the table. It’s just not a viable option. It may be an option down the line for them, but right now they need other methods. So that video covers three methods. Two of them do not require money and one does require money. But yeah, foot in the door, that’s where I would start. I would start with those three methods.
Question, sticky sidebar, mini tutorial.
Could you quickly show it with ACSS? Last week you did it in Vanilla Bricks. It’s really not that different.
You would use a utility class for the grid
instead of writing out the grid instruction.
And I mean, I guess we can do it. It’s just kind of the same tutorial over again. So let’s do grid two one, because that’s gonna get us that kind of, see, it’s already got the little sidebar structure there. Still use grid gap here, if I actually selected the element properly. Let me sit up in my chair. Okay, I was lounging. It’s getting late in the stream. Let’s add our two blocks. There’s our block block. This is our channel for the sticky element. So I’m going to put another block inside of that. And then this will be my grid. I’m just gonna label these so everybody knows what they are. This is like the body of the content. This is the sidebar. This is the sticky, okay? And then, so what we need to do is we need to go to website ipsum. We need to grab a bunch of this copy because a sidebar is only a sidebar if there’s actually a lot of stuff next to it. So we’re going to go with a rich text element and then we’re going to put that in there. Perfect. And I’m actually just going to paste it again. That way we can actually, maybe I’ll paste it again. I’m a large screen. We got to make sure we can scroll down the page. Here’s a look at this. The text does not reach the edge of the container. And this is caused by automatic CSS. And people have said that, hey, this is broken because automatic CSS is preventing my text from reaching the edge of this container. And I’m gonna show you guys why this is happening. We’re gonna go to automatic CSS right here, typography, text line lengths. On this particular install, I don’t want any of my text getting wider than 70 characters because after about 75 characters, you lose readability. You start making users break their neck going left to right reading stuff. And there’s a lot of science behind it. It harms conversions, it harms how much of the page they’re gonna read, it harms a lot of things. And so people see this and they’re like, I don’t want that gap there. And I’m like, exactly, you should have used a better layout. This is alerting you to the fact, your text should not get wider than that. So this is alerting you to the fact that you have a layout problem, right? You should do better things with your layout. Now, once I add, if I styled this up, I solved the problem immediately by putting this text in a container, putting a little background color on there, dropping some border radius on there. Now it looks like it’s supposed to be this width. It only looks bad because I haven’t styled the container. Once you style the container, you’re good to go. We’re not going to go through all of that, but this is not an error. This is alerting you to you created an error with this layout if you don’t do anything else beyond what you’ve got going on here, right? Because the text should not get wider than that for proper readability. Okay, just wanted to point that out. All right, so our sidebar needs to, here’s our sidebar right here. Notice the sidebar is Not a sidebar. It’s not stretching Well, we need to tell it to stretch So I’m gonna put a stretch class on now the sidebar is stretching See it goes now our channel is complete We have a channel for this sticky block to move up and down in so now I’m going to add a heading Notice, I haven’t I didn’t need to know what flex stretch was or how to apply it or anything I just need to know that stretch is a thing and I need to be able to type the word stretch Right. So this is better for a beginner that doesn’t know how to write the CSS You’re able to work faster if I wasn’t sitting here talking the whole time So there’s there’s a lot of benefits here So now what I want to do is I want to make that sticky. So I’m gonna grab this and I’m gonna say sticky can I write the word sticky and there we go we see that it is sticky now why let’s go over here okay why is there a gap there well there’s a gap there because I have in ACS settings this is an option turn it on or off do you want an automatic offset from the top well I said yes and I set the offset to what I wanted it to on this particular install And it was probably because I was doing something else for this is a whole testing install It’s not a real website, but that’s why that’s happening You could set this to zero and then you will have no offset whatsoever But what a lot of people do when they’re doing something sticky like if I did not use this class watch the mistake That a lot see if you don’t really know the CSS very easy to make this mistake, so I go to style, layout, position, sticky. Cause I know I want it to be sticky. And so I choose sticky. Now bricks has a little alert, but I’m going to ignore that right now. Cause oxygen doesn’t have that alert. Last time I checked. And so what the hell I set it to sticky. Why is it not being sticky? How could it not be sticky? When I asked it to be sticky, it’s not anything else. It’s not block. It’s not, it’s, it’s sticky. Or I mean, sorry, it’s not absolute. It’s not relative It’s it’s sticky what says right there. You have to set a top value for this to be sticky Well in automatic CSS, you know, we’re like, well, this is a shortcut. It’s not cutting corners It’s just a shortcut that you don’t have to use one of the sticky top classes You can just say sticky and it’s automatically gonna set a top position for you. That top position is controllable in the dashboard. It can be zero, it can be whatever you want. You can, yeah, it’s 100% flexible. You can do whatever you want with it. But that’s just one step to make something sticky instead of two steps. Because real sticky is set it to sticky, then go change the top position to zero. It’s gotta be something, right? So it’s two steps in a normal builder, one step with automatic CSS. But that’s it. We just created a sticky element right there. All right, let’s go down and let’s see here. When Kevin proposed his ACSS style sheet, copy into Oxy style sheets manually, it was mind blowing. Now I can’t see myself without ACSS and frames. So easy to build sites the correct way. Yes. And let me bring it back to automatic CSS was the see I said this yesterday if you’re in the ACS as live stream yesterday then you’re is I’m going to say the exact same thing. My biggest problem with frameworks is that they were too limiting and this is the old argument you’ll still people here they’ll make this argument still but it’s no longer a real argument. They’re too limiting you’re right you’re they’re too limiting because you can’t change the values. Nothing is mathematical. Nothing was fluid responsive really in most frameworks. So automatic CSS said, not only are we going to make things fluid responsive, not only are we going to make things user adjustable. See Darwin remembers in the very early stage of ACSS, you actually had to go in the style sheet and make changes. But at least you could. It was user adjustable. We then said, we’re going to give people a visual dashboard. And so that was, we were the first framework to have a visual dashboard where users could dial in the framework to exactly what they needed. And it’s going to have a color system in it. And it’s going to be fully tokenized. And there’s not going to be these limitations that there were in other. So you can no longer say, we shouldn’t use a framework because it’s too limiting. Because ACSS has no limitations whatsoever. If it did, I wouldn’t use it myself. That’s why it is the way that it is, because I had to be able to use it myself. And so I needed it to not have limitations, and it doesn’t. At least not any that are measurable or like significant of any kind. Okay, what is the best solution to dynamically display data in a table from a CPT? That would be, let me get the name of it. I’m so bad with names. I’m so bad with names.
Where is it?
It’s in my other folder. I’m on my other screen, so you can’t see what I’m doing. WP data tables, WP data tables. So you’re able to whip up a table. You don’t create tables with grids. Don’t create tables with Flexbox. Tables need to be tables. And so if you do WP data tables, you can quickly whip up a responsive table. You can query CPTs in it. You can do pretty much everything you need to do.
I can attest to what Kevin is saying.
I submitted a client site weeks ago and he hasn’t reviewed it yet. It’s probably bad. What other frameworks are available for BRICS? Oxygen, Oxyninja, which was abandoned and is now coming back as a core. They’ve all, I mean, it’s an unfortunate reality. Automatic CSS more or less like killed frameworks in the oxygen ecosystem. There’s OxyProps. I would say OxyProps is the number two. And I fully respect what OxyProps has done. I like them as a competitor. It’s not a proprietary framework, it’s simply an integration. OxyProps was not created by, like the props side of OxyProps was not created by the developer of OxyProps. Automatic CSS is a completely thought through from scratch for page builder workflow, for scalability, for maintainability, for best practices and current standards. Like it was thought through from scratch. That it was not built off of anything, right? So almost all the other frameworks that then that would be the advance, that would be what I would say good about Oxyninja. Like as far as I know, when it was around, it was built from scratch. It wasn’t like, let’s base it off Tailwind, let’s base it off this, it was built from scratch. But automatic CSS came in and it quickly dominated, right? The Oxygen and Bricks space. And so unfortunately, a lot of them went away. Oxymade was around, they went away. There’s a lot that have come and tried and failed. So it is what it is, but yeah. Ah, Crockford’s Law. Yes, that was the name of the law. Thank you, Justin. Okay, I have to admit, I do use copy and paste in Bricks. The thing is, I know what the classes are on those elements and they match up to my overall style sheet. So surely that’s okay. I mean, honestly, I don’t even know how the copy and paste in Bricks works. I don’t use it. And I don’t know exactly what it does. But if it just copies, if it keeps your class structure the same and just copies the, I mean, I don’t know how it would work. Like, does it add the classes to the elements? I don’t know. I’d have to investigate it. I’ve just stayed away from it because copy paste is not a workflow thing that I’m interested in. Okay. Okay, a lot of these are from the rants. I gotta scroll through, these are all rant comments. Yes, all about the money. Okay, most website builder users are not developers, so it makes sense to target the kind of people if you’re developing one. It’s not though, that’s been my argument. It doesn’t make sense. I mean, yes, it makes sense to target them. It doesn’t make sense to build a builder around them. That’s my argument. Webflow. You know I don’t use Webflow. It’s a closed system. It’s not a WordPress. But can we give them props for a minute? And this also proves my argument. Okay let’s let me do this again because people it’s you know heads are a little thick in some areas of the industry. Webflow market cap. Right, so $4 billion valuation. Can we all agree that’s not peanuts? Okay, so what Webflow did is say, designers, designers, all of you amazing designers who don’t know web development, we have a tool for you. It’s called Webflow. You can easily monetize with it. We are going to make it possible for you to go from your beautiful designs to a website. But here’s the thing, you’re going to have to learn web development. So what we’re going to do is we are going to pour millions of dollars into education and we are going to help you. We’re going to hold your hand and we’re going to get you to know what you need to know to build sites in Webflow. Now do they build like according to the most amazing standards? Some of them. A lot of them, you know, not really. But at least Webflow didn’t try to dumb everything down and treat everybody like morons. Webflow is a technical builder. They targeted designers. They taught the designers how to do things and they are valued at four billion dollars So don’t tell me you can’t make money doing things the right way It’s not it’s an argument that is objectively proven false Hope I wasn’t unclear
Okay, let’s see
See as soon as someone tells me don’t look at this other workflow and definitely don’t compare them to classes, seems bold. Are you saying I’m saying don’t look at other workflow and definitely don’t compare them to classes? Because I compare them for you. And you’re free to do whatever you want to do. If you want to go copy paste your freaking heart out. It doesn’t, I don’t lose any money, right? Doesn’t create any inefficiency in my workflow. If you want to use presets, hey, it has no effect on me. I don’t care. What I don’t want is the leaders, the quote unquote leaders saying, ah, we don’t need standards, ah, it doesn’t matter how you do things, ah, do whatever you want, ah, use whatever builder you want. Because that doesn’t do any of us any good. What that does is it devalues the industry and it makes clients it’s harder to find people that know what they’re doing and it is harder to find people using the right tools so it that has a lot of downsides and it’s a lie it’s a lie it’s just it’s just it’s not true. Why consider oxygen at all when you can’t trust the company to continue to support something that’s not going to make them money? Well, I mean, I don’t I don’t know the financial situation of oxygen. I also like Elijah Let’s keep in mind that Lewis has more or less From what I can tell stepped aside from oxygen. I like Elijah Elijah’s a great guy Elijah is a talented developer. I want Elijah to be successful. I don’t want Elijah to go broke. I don’t want Elijah to not be able to put food on his table. I want Elijah to turn oxygen around. I want Elijah to bring back good PR to oxygen. You know, as long as Lewis stays away from it, you know, and stays away from the people creating content for oxygen, because that was a big problem as well. You know, it wasn’t just the like, man, I feel like people try to argue this, and they’ve never watched that live stream. They don’t have any idea what was said, and that live stream is still up. And I would encourage you, you know, if you’re considering, you know, investing, I would watch the live stream before that. And then there are some people that watch the live stream and are like, oh, it’s not that big of a deal, da, da, da, da, I’m like, did you not hear what I heard? Maybe I read through lines a little bit better. I don’t know. But it was pretty bad. And in one of those things, he said, content creators for oxygen have more or less done nothing for us, which is an absolute lie, absolute 100% lie. And so he’s dissing content creators. He’s just, it was a disaster. Rightfully so. I mean, they were treated the way they should have been treated after it. So yeah, and by the way, you know what’s funny? You know what’s amazing? He’s recruiting content creators for Breakdance. Yeah, all these people, they didn’t help Oxygen one freaking lick, guess what? They’re all gonna come in, now we need you. We need you for breakdance, oh my gosh. I don’t, I guess we won’t keep score. I keep score, right? If you don’t wanna keep score, don’t keep score. If you feel like going through life without keeping score is like a, oh, you know, I just don’t worry about these problems, I just don’t worry about these things. It’s all positivity. Roses and rainbows and unicorns. That’s a, that do you, right? It would probably help my blood pressure, probably help my, you know, if I didn’t keep score, but my brain just keeps score by default. It does. And, you know, I track these things. I notice these things. I can read through lines fairly well. I have an extremely honed in fake radar I just it is what it is and so yeah it’s I just gotta say what I what I see because nobody can argue that he was right about that and I think he’s right to say oxygen creators didn’t do anything he said it to the face of a content creator, actually a well-respected content creator on that live stream, right to his face, basically said, you didn’t do anything for us
in that live stream.
And then to turn around and try to recruit content creators for Breakdance, does anybody think that’s a viable position to hold? It’s up to you, it’s up to you what you want to believe. Okay. How much time?
We’re going to pack it in. Okay. We can turn this off now.
No, I made like eight cards. That’s eight times six times new classes since the card class was already in use in another page. Yeah. If you got that far in, well, no, no, no, hold on, hold on, hold on, hold on. It depends on if you have to change the HTML structure. If you have to change the HTML structure, then you gotta go change the HTML structure. There’s no way around that. If we had global components, proper global components, then you would be able to easily fix that. But we don’t have that in Bricks. We don’t have that in Oxygen, only Webflow has that. I’ve been asking for it though in Brics and I’ve been asking for it in Oxygen. So we’ll see.
Advanced Themer has a class renaming feature, okay.
But yeah, I mean, like, is it a bulk class renaming feature or is it the same thing that Brics has? Question, could you comment on what you feel makes this is a really good question Nolte music fantastic question Could you comment on what you feel makes a website effective at converting maybe a few of the do’s and don’ts Would love to hear your thoughts All right here it is here it is we don’t have to have an extensive conversation about this There are two things that make a website effective at converting two things number one that make a website effective at converting?
Number one, copy. Number two, offer. You don’t need any design, you don’t need any accessibility, you don’t need any best practices, you don’t need any classes, you don’t need no nothing, you need copy, you need an offer. Websites can look like dog doo-doo and still convert like gangbusters with good copy and a good offer to the right audience. And I think this is what people, some people actually make this argument. They’re like, well, you know, my sites convert well, I don’t need to care about classes and da da da da. And it’s like, but that’s not the only thing we’re worried about. Not the only thing that we’re trying to, that’s not the only box we’re trying to check. Because there’s many more important things beyond conversions as well. But if you break it down to what converts, honestly it is two things. It’s copy and it’s offer. Give me a, guys, are we going to pretend like sales letters don’t exist? That the whole marketing industry thrived on sending people physical white papers with copies and offers and that was the entirety of marketing before the internet like that kind of direct response marketing you can do that that same principle applies on the web you could literally create a blank white page with amazing copy and an amazing offer and run ads to it and make millions of dollars you don’t even need a website So those are the two things that convert Now you start to bring in a bunch of other elements and we can start to accomplish other things, right? but Honestly, if you boil it down and you don’t want to have a conversation any further copy an offer You’ve got to nail copy and offer you have to if you don’t nail copy and offer then you’re screwed doesn’t matter how beautiful it is and How many best practices there are and how many classes you know none of the other stuff matters I try to tell clients this all the time and I’m like look we’re gonna check all these very important boxes And this is what I say about the the whole idea that somebody’s gonna hire a web designer I mean that that’s just laughable in itself So I’ve tried to make this point when a client is looking for web design What they’re really looking for is a whole collection of things which by the way is why we do WDD Live. You have to understand, guys if you want to make more money, you have to understand this, they’re not just hiring you for web design. When they say I need a web designer, what they’re most often saying is, I need somebody who can put a website together that’s beautiful but also grows my business. They don’t know they need to ask for a copywriter necessarily. They don’t know they need a UX designer necessarily. They know web design as a visual website and end results and that’s what they call it. They call it web design. But there’s so many other disciplines. They don’t realize they need SEO. They don’t realize that you can make the most beautiful website with the most amazing copy and if it doesn’t rank or you don’t have a social media strategy or you don’t have PPC or advertising dollars put into it, it’s going to sit there and do that. Zero. Nothing is going to happen. So clearly hiring a web designer didn’t do them any good. You have to be the one to step up and say Mr. client you’re going to need this whole laundry list of things if you want this thing to do to meet the goals that you said you had and now you sell them those things and now you make more money and this is why if you’re a pixel pusher a pixel pusher is somebody who listens to what the client says and they just do it regardless of whether the clients right or wrong whether the client knows what the hell they’re doing or doesn’t know what they’re doing pixel pusher just pushes pixels a pixel pusher is a like a detriment to a client Like if you’re doing if you’re doing the work of a pixel pusher you my friend are doing the client a dramatic disservice We already know that most clients don’t know what they’re doing and that they don’t know what they’re talking about They don’t know what they should be doing So the idea that they’re gonna give you direction and you’re gonna follow their direction and this is laughable You could absolutely do that and be amicable and be like, yes sir, yes ma’am, yes sir, yes ma’am, like you’re in the freaking military, right? You’re just licking boots all day long, and then the client gets what they wanted, and it does that. It does zero, it does nothing, because none of the right pieces are in place, because somebody who didn’t know what they were doing managed this project. And you were an accomplice in that. So when they get sentenced to 10 years, you’re gonna get at least five, right? You gotta go to rehab. And that’s what I’m doing. I’m taking people to rehab, right? I’m, we’re doing the work right here to make sure that you were not going to prison. So yes, copy, offer. That’s how you get people to convert. All right, I’m doing one last question. This might sound like a dumb question. Can you break down what the offer is exactly? Okay, this is a good follow-up question. All right, so let’s think about this. Let’s think about any real world examples that can just come to the top of my head.
Okay, okay, let’s use Framer.
Let’s just use Framer?
Because an offer is a lot of things beyond what people might think that it is.
Okay. Where’s the offer here? Let’s just do a pop quiz.
Where is the offer here? This is part of the offer. Start building your site for free.
Upgrade to unlock more features.
This is part of the offer. What else is the offer? Most people would say that’s the offer right there, Kevin. You’re offering to let people start building their site for free. You’re offering that they can pay more if they want to at some point, if they decide they want to unlock more features, that sounds like a solid offer. But really the offer well, well, well beyond that. Guys, this entire product is the offer. So think about it this way. You have a world where people build websites in Webflow. People design websites in frames. The offer is, we’re going to let you build websites using the Figma, I’m sorry, I said frames? I got frames on my mind. They design websites in Figma. So the offer is, we’re going to let you build your website in a Figma environment and we’re going to let you do it for free and then you can unlock more features if you decide you want to. And there is a gigantic group of people that already work in Figma and then they take what they do in Figma into Webflow or into Bricks or into Oxygen or whatever and Framers offer is you don’t have to do all that. Just do what you normally do in Figma, and then it’s live. That’s the offer. The price, how the pricing structure’s done, that’s only part of the offer. Now, if we change this part of the offer, and we said, hey, it costs $1,000. Well, a lot of people are going to be like, that’s not such a great offer anymore. So this impacts the offer, it is an important part of the offer. But we can also change the other thing, where this says, hey, it’s we’re just like Webflow, but better. That’s a shitty offer. You know what? We’re just like Elementor, but better. That’s a shitty offer. That’s a shitty, yeah. If we’re grading marketing offers, that’s a shitty offer. This is actually a good offer. But now we see a difference between offer and execution. So the offer was fantastic. Hey, you’re doing two different workflows, we’re gonna offer you one workflow, and it’s gonna be super affordable. That’s a fantastic offer. The question is, can you execute on that offer? And visually they can execute on the offer. But if we inspect under the hood, we find many, many, many, many… Am I doing this again? I am so sorry. I really, really, really apologize. We’re getting a producer.
That’s what we’re gonna do.
We’re gonna solve this problem. We’re gonna get a producer. This is all I was showing you right here. So it was just a pricing table. So that’s that’s part of the offer, but the whole actual offer is this. I was just going back and forth between the home page to highlight everything they’re talking about. The core of the product, the reason it exists, the mission behind it, that is the offer.
If you change this, the offer could get bad. If you leave the pricing the same, but change this, the offer could get bad. But these things combined, that’s a gangbusters offer. That’s a really, really, really good offer. Anytime you find yourself or your client going, well, we’re like them, but better. That’s a shitty offer. That’s such a lazy ass offer. And you gotta do better. You gotta do better. So you look at the, what is the offer of frames? What is the offer of automatic CSS, right? Again, identify what the offer is. It’s not just the price or the call to action. A lot of people feel like the call to action text is the offer. And these are all just little parts of the offer. If you developed a good product or a good service, that is what you are offering people. And the problem is, let’s use a restaurant as an example. Two different restaurants. So we’ve got restaurant A, sushi restaurant A, sushi restaurant B. If they both have the same food, the same experience, the same process, they’re not offering anything that people don’t already have access to, which by default kind of makes it a shitty offer. Because it’s like, but why you? I mean, I could get it over here, or I already had it over here. Like you’re not doing anything different. So there’s this concept around us locally of a revolving sushi restaurant. That’s what I think that’s what they’re called. So you go sit down and there’s this conveyor belt and it brings sushi by you, like all these different types of sushi and it’s all enclosed. So nobody can touch it unless you buy it. So like as it’s coming by, you can stop the conveyor belt and you can open the lid. The minute you open the lid, you bought it. And you can take it out and you can enjoy that sushi and then it keeps rotating and then you eat that one and you’re Like, oh, I want to try that one right there, but pause it take it off. You bought that one good and you eat it This restaurant is offering a dramatically different experience for people who enjoy sushi It’s not the like here’s a coupon Right the people would see a coupon in a coupon magazine for that restaurant as the offer But really the offer is I’m offering you a completely different experience here That’s the core of the offer and I think that’s what people just don’t understand in marketing land When they think the coupon is the offer or the call to action is the offer there’s nothing better that you can offer somebody than a fantastic product that does things differently. And differently means better in most cases. If differently means worse, like presets, like copy paste, that’s a shitty offer. That’s why I’m not buying that offer. It’s a shitty offer. But if you do things differently and it’s better, like when there wasn’t an oxygen for, that’s why oxygen was so successful. Because there wasn’t one. There wasn’t another builder like oxygen. That was a great offer Hey, do you know what you’re doing with web development? Here’s our offer. It’s called oxygen Okay, so hopefully we see that right that’s the distinction between Offer and then then your copy comes into play. Can you accurately describe your offer? Can you make it sound simple? Can you really break it down and communicate it well? Can you build a narrative around it? Can you speak to objections? Can you speak to emotions? And by the way, I mean let’s just go let’s just go take a sneak peek and then I gotta get out of here, because I got work to do. We go into inner circle. We go down to maybe sales and closing. Let’s see. No, we are in discovery is right here, there you go, offer messaging masterclass. This is a almost 90-minute masterclass on copywriting, it’s prep for copywriting, preparing for copywriting, preparing for getting your messaging on point, preparing for selling a product or service, it has a workbook that goes along with it. And I will tell you this right now, guys, this is, let me translate the value of the Inner Circle. There are already people who have taken this PDF and this 90 minutes of training, and they have sold. Why is this in the discovery folder? Because you sell this as a service to your clients. Hey, Mr. Client, we’re getting ready to build your brand new website. Are you a copywriter by chance? And you know Bev says no we’re not a copywriter. Oh okay good just checking. Well if you’re not a copywriter you’re gonna need one because copy is the most important part of the website and if the copy is not good your website’s not going to perform very well. So here’s what we do for clients. We do this offer messaging discovery session where we sit down with you and we’re going to lead you through a series of questions and we’re going to help coach you during this and at the end of this what we’re going to have is a game plan for what the copy on your website needs to say. The narrative, specific bullet points, selling points, objections, overcoming things, all the important stuff. That’s what we’re going to have by the end of this session. Well, how much does this session cost? Well, here you go. I mean, put whatever price you want on it, right? So you can say, well, we do this for $1,500. We do this for $5,000. If this is a company that’s gonna have a ton of different pages and they make millions of dollars, there are agencies that do just this kind of thing for tens of thousands of dollars. So there are already people, it doesn’t matter, I don’t care what price you put on it. You paid $20 to get into the inner circle. There’s one PDF and one 90 minute training right here, and this is just one of many, where you could really take action on it. And you could go make $1,500, $2,500 a pop, easy. That’s the bottom, easy. Client by client by client by client by client. And there are already people have done it. And there are already people have shown me what their client says. So they take this PDF, they spend two hours going through this workflow with their client who paid them 1500 or $2500 or whatever it happens to be. And then afterwards, the client is like, that was amazing. Like nobody’s ever done this for our company before. We’ve never thought about any of this stuff. And they can actually use the outcome of this session not just on their website but in their advertising online and offline in their email marketing in their social media it can change the game for how they’re communicating their products and services that’s one training one PDF it’s putting tons of money in your pocket if you just take action on it putting tons of money in your clients pocket if you just take action on it this is one example is one thing right and you see I mean let’s go read go read all the comments go read all the experiences ok this is and if you’re passing up this kind of value I don’t know what to tell you but this is like very very actionable stuff and it greatly greatly greatly matters. That was the final question. I do want to thank those of you who have been here this entire time. Absolute rock stars and I get it you could be doing other things you could be building you’ll be working on client stuff right now but there are some sometimes there are nuggets where it’s just like wow alright that’s that’s going to change the game for me. And that’s what I try to do these, that’s the whole point of doing these streams. I like nothing more than when people come to me and they send me an email or a DM or whatever, and they say things like, Kevin, last year, I was doing sites for $1,500, and I made a whopping $37,000 last year. And this year I’m on track to break a hundred thousand and my average project is like $7,500 that because they’ve they’ve literally changed their life and When it’s somebody in a different country Maybe a developing country and like they’ve never they’re getting money. They never imagined. They’ve never even seen like that’s why all of this exists. And then the products is helping people with their workflow, making their life easier. And that’s why this, none of this feels like a job to me. And it is why I take it seriously, right? Because I know what I’m, I know what the impact I’m having is. And what I also know is if somebody goes off into these other lands, into the, do whatever you want, oh, use whatever paid, oh, duh, duh, we don’t need professionals, we don’t need this and that. It feels to me like you’re missing a big opportunity, like, oh, that’s a person, you know, I could have had an impact on, but now they’re off doing whatever jokester stuff over here. And maybe they don’t get the outcomes that they could have had. That’s why it feels a little serious to me you know so I do my best to put out the best possible content I can the truth as I know it right now I’ve said many many times I have I’m committed to if I give you the wrong information on something I and somebody can instead of calling me names instead of being like you know just blind dismissals on that if you can put forth a reasonable argument With evidence and I can be like, yep, you’re right That I was wrong. I will put that out all day long. I have no problem with that whatsoever. I’ve done it in the past Okay, I have no problem with that whatsoever. The problem is You know, we’re getting to a point now where the debate is happening so much and they’re just not able to do it They’re just not when we talk about class and for they’re just not able to do it. And so they just come up with empty concepts like, you’re just saying what you say for money. Am I? Oh, okay, I’m just saying what I am for money. That’s why I’m not going after the Elementor crowd, the gazillions of dollars sitting over there, that’s why I’m not going, because I care all about money. So they just talk nonsense, that’s what they do. Okay, but I was saying, you guys are rock stars for sticking around, and I was saying, the value you’re getting out of this is, you know, usually higher than what you could get elsewhere doing other things. But if you have a client deadline, please, don’t miss client deadlines to be on these streams. That would be the only thing, right? Go serve your clients, and then come back when you have time. And you can always watch the replays, that’s the other thing. You can always watch the replays. You don’t have to catch it live. But for those of you who stay live, you guys are rock stars. I’m out for today. I’ll be back next week. Thank you guys so much for being around. I love you. I’ll today. I’ll be back next week. Thank you guys so much for being around. I love you. I’ll see you soon.