Web Design for Dommies LIVE 012 – Deep-Dive Website Critiques & Live Mini Tutorials

0:00:00
Yo, what’s up everybody? Wednesday March 8th, another episode of Web Design for Dummies. Drop a comment in the chat as soon as you arrive. Let me know you’re here. Got some familiar faces as always. Calisthenics Ireland is here. Amanda Lucas is here. Got Arnott and SilentPhil. Dan, howdy Dan, Robert, Ruben, Kristof, fantastic, fantastic. John is here. All right, as everybody comes into the room for today’s session, we are going to just go over some quick news, some quick news and announcements. Announcement number one, Automatic CSS version 2.4 beta will be out later today. So as soon as this Live stream ends. I’m going to go ahead and button up the change log and Get the new beta published Lots of really cool stuff coming in this beta some significant changes. That’s why it’s in beta some stuff that affects pretty much the entire framework. But some stuff that’s been requested for a long time now. If you’re one of those people who likes to design wider websites, you know, 1440 pixels and up, then you are going to definitely like the new optional breakpoints that you can add. Yeah, just a really good update. So that is going to be later today. Frames 1.2 is going to be out by the end of this week.

0:01:40
I wanted to release it today. There’s a couple of things that we have to button up still on the new slider. The components, you know, the components are a little bit more complex than just, you know, ACSS, CSS framework type stuff, right? They’re a little bit more complicated. They got a lot going on. They’re natively integrated with Bricks. So they’re a little bit tougher. So a couple more days on that should be out by the end of this week for sure That’s going to put the modal element in RC so that’s going to come out of beta that’s going to be an official release candidate The trigger element is going to come out of beta that’s going to be an official release candidate And then the slider is introduced in beta and then we are working on the accordion component now That should probably be in the next release.

0:02:27
Okay, so there’s ACSS update, frames update. We have a new video coming out on this channel tomorrow, maybe later today, probably tomorrow, probably tomorrow. I’m still finishing up editing and some stuff on it. But that’s gonna be, it’s a highly requested video. It’s gonna be how to set up a Bricks Blueprint website so you can start new web design projects in seconds, and this is again like I said a highly requested video If for those of you who liked my video on the plug-in stack, this is like that video on steroids We go from start to finish Every step how to do WordPress settings how to do all the plugins and not just you know get the plugins And sold and all of that and obviously you guys already know how to install plugins.

0:03:15
I go plugin by plugin by plugin. Every single setting that’s non-default. Anything that I change away from the defaults, I show you exactly what every setting is in every single plugin. We cover what custom post types to create by default, how to set those up. It covers everything in detail. Alright? And so by the end of this video, you are going to be able to set up a Bricks Blueprint website. And what this allows you to do is basically in seconds, you can deploy any new project.

0:03:47
So it’s like, hey, I got a new project, I need to start working on it. Bam, deploy it, five seconds later, you’re up and running with all of your plugins, all of your license keys, all of your settings, already set the way that you want it to be. No shenanigans, no hassle, no chump-ville of going setting by setting, plug-in by plug-in, trying to get everything set up the way that you want it. No, you’re not doing that anymore.

0:04:08
You’re gonna be much more efficient. So, how to set up the Bricks Blueprint website is coming to the channel tomorrow. And then, if you remember back to last week’s episode, we talked about a situation where there were, in fact, let me see if I can bring it up. Let’s go to, yes. Let me share my screen. We’ll share the screen first. Let me make sure the screen is sharing correctly.

0:04:35
Okay. And let’s jump into the inner circle. And let’s go down to, there’s CSS in here somewhere. Here we go. CSS and SCS is trainings. Okay, so right here. of the downsides to doing it in Photoshop. And then I showed how to do it. So this one uses no mask, by the way, there is a no mask version.

0:04:57
This is a no mask version as well. And this is a mask version. And so there’s two separate versions, pros and cons to each one. There’s an entire video, it’s an hour and 15 minutes long that covers both techniques side by side that is available inside of the inner circle as a premium training. So if you remember that discussion last week on web design for Domies, guess what? You can learn exactly how to pull it off without touching Photoshop. All right, that is the end of our announcements today and we are going to jump right in.

0:05:54
Let’s check the chat first. Remember, we’re doing deep dive website critiques. We look at everything from the Dom, which is why we call this Web Design for DOMMIEs. So that’s the underlying, you know, code structure of a website. Hold on, my phone alarm, I believe, is going off. Okay, good. So we look at the DOM, we look at UX, we look at UI, we look at SEO, we look at copywriting, we look at all of the things that make a website successful. If you have comments or suggestions or whatever on the site that we happen to be looking at at the time.

0:06:28
Go ahead and drop those in the chat. I want to see your participation. I want to see what you guys think about the websites that we’re taking a look at. If you have questions, write question in all caps and then you can write your question after that. It’s going to help me find your questions in the chat. And with that said, let’s go ahead and hop right into our first website. So we are going to bring this onto the screen. Let me go ahead and we don’t need Basecamp open and we don’t need the Inner Circle open anymore. And this is gonna be Dr. Alps Thakkar, I guess is how you would pronounce this. And it’s a dentist, okay? Bespoke dental solutions personalized for you.

0:07:09
We enhance your smile, you enhance your life. This is not, this is in English, so this is not a translated website. And we’re just going to start out by doing our typical no scroll tests. We’re not going to scroll around trying to figure out what’s going on. We’re going to see if we can figure out what’s going on without scrolling. And so from the logo, I can see that exactly where we are. Okay, so this is like a personally branded dentist website. I’m looking at the logo here and what I’m seeing is I’m not sure there’s a there’s kind of a lot you know hmm there’s a lot going on with it the three heads right so there’s a patient this is the patient right here in the middle and then we’ve got a dentist dentist here assistant here and then we have a tooth.

0:08:02
It’s a tooth. So it’s unique. I’m not sure I’m the biggest fan of it, but ultimately it doesn’t matter all that much. It’s not bad, right? Okay, let’s move on. One thing I think is throwing me off maybe is the position of the logo. That’s what I think is really throwing me off here. Because you’ve got the text under the icon which is then floating above the nav text Which is also centered and just taking up a gigantic amount of space up here it’s making the header really really big and So, you know And I get maybe why this happened is because this is a little bit long of a name And so if you put the icon over here and then the name next to it You wouldn’t have as much room for the navigation, which does have quite a bit of elements in it.

0:08:54
The navigation feels a little small to me, right off the bat, this text in the navigation feels a little bit small. I would try a different header style. I don’t think this header style is working. It’s pushing the page content way too low, especially for an overlay header, right? So you’ve got an overlay header that’s just taking up a lot of space. So I would put this over here on the left-hand side in a more traditional way.

0:09:18
I would put, if you want to do a two-column header, you still can absolutely do that. Make this icon smaller, make the text next to it, take this phone number CTA and put it on the same row and then give the nav a dedicated row below that. I think that could maybe work a little bit better. This column of text right here that we’re look why can I not right-click? Oh well that’s gonna be a problem. Oh you’ve got some what is with your JavaScript snippet? We can’t right-click. Okay hey look nobody’s gonna steal your dental stuff okay? You can you can you can enable right-click you don’t have to block the right-click functionality. Does anybody know a way around that? Is there any way around this right click?

0:10:03
I think there’s a way. I just can’t remember what it is. Yeah, I can’t right click anything. If you know of a way around this, because we’re gonna maybe need to look at the DOM here at some point. Yeah, drop in the chat and let me know if you know of a way around the right click blocking. All right, so Bespoke Dental Solutions personalized for you. This, what I was gonna say is the width of this column right here is too narrow.

0:10:33
And so look at all look at all this blank space that’s not being used. Now let’s look at how this maybe looks on a smaller screen. Yeah. Oh, it’s even worse. It’s even worse on a smaller screen. So you’ve got some alignment issues here. Wow, yeah, look at this. Okay, oh, there we go. Okay, well, that’ll get us at least to the DOM. But man, what is going on here? What are all these blank zero pixel SVGs? Oh boy, okay. I don’t know what’s going on here.

0:11:04
I don’t know what I’m looking at. All right, so yeah, this is way too narrow right here. I don’t like this icon doesn’t need to be here, it’s not adding anything. It’s clip art, okay? And we talk about principles F12 on Chrome. F12, yeah, alright. So let’s see, well. I don’t even know how to do F keyboards on Mac. I don’t ever use them.

0:11:32
Well, that’s not it, that’s sound. Okay, I don’t know how to do it function f12. There we go All right. Yeah that gets us back in here with all of our nice little blank SVGs All right, man, what a whoo Oh Astra theme Okay, is this just junk and garbage from Astra? Is that what’s going on here? I’m not familiar with I’ve never used Astra. I’ve obviously heard of it, but never used it This just looks like an absolute nightmare. Absolute nightmare. You know, if you open like a brick site, you can see what’s going on immediately. I mean, look at what what is what is happening? What is happening? Yeah, I don’t want anything to do this.

0:12:17
This is just an absolute nightmare. Hmm. Hmm. What is going on, dude? Why is there 500 templates with document fragments and script codes? Man, what a nightmare. Okay. I guess we’re just gonna focus on the design and content then.

0:12:41
One of the, you know, I talk about common principles that we talk about over and over again. One of them is don’t use like clip art. Don’t use clip art icons. And this just looks like clip art right here. This, this looks like, get real, like, this is right off the bat, right? This two thing, this is, I would say like a day one web designer inclusion thing. Right, they’re like, oh, found this cute little clip art.

0:13:15
You go to a stock site and you’re like, person working on a tooth, and you just happen to be in the clip art section, and this is kind of what comes up in the search. And anybody, if you have, like I said, and I’m not trying to be mean, I’m just, this is, honestly, it would harm, tremendously harm the business to keep this here, okay? But anybody with more than a day of design experience is gonna be like, nope, not that one, okay?

0:13:44
That’s a no right there. So get rid of this immediately. Again, just avoid clip art type stuff unless you really highly know what you’re doing with custom illustration. Like, custom illustration’s fine. No problem with illustrations. This is not an illustration. This is clip art. So get rid of this.

0:14:03
No good. It’s only detracting from the professionalism of the website, from the image, all of that. Okay. Before we scroll around, I also will say that this background image, this does not do it for me. One, I don’t like the fact that it’s like almost a sepia. It’s like a sepia toned thing going on here, which I get it.

0:14:29
Like I guess this kind of brownish color is like one of the brand’s colors. It just, I’m not feeling it. It’s all too monotone and it’s not a pleasing, it’s not a really pleasing color to me. But the image also, I know this is, okay, this is a this is professional Dentist where but we talked about this kind of I think in the last in last week’s episode a little bit We talked about with that site dealing with like depression, right? You know, you’re the problem you’re solving is depression, but you don’t want to show a lot of depressed people, right?

0:15:07
You you want to show the scary Dentist with the weird things on her eyes the optical things whatever those are You don’t want to show that you and in scrubs and like it’s not like it’s not a pleasing like oh I really want to go see that dentist That’s like this is the thing you would not want to see when you close your eyes in your dreams. Okay? So show something that’s very pleasing here. Show a nice, beautiful person with a nice, beautiful smile. That’s the outcome that we all want. That’s the image that our brain is going to instantly connect with and give us those feel good feelings. This is not giving anybody feel good feeling vibes. This is like predator style, you know, like, and I you know I’m not dissing the dentist here I get it this is your professional attire or whatever but it’s not a pleasing marketing type image okay let’s move on down so we’re starting off with credentials always good to show credentials I don’t think this is the cleanest way to do it.

0:16:26
And I don’t think you need to have a big section all about it. If you just take these logos and you make them white, for example, and you just kind of put them in a row right there, right under the hero, everybody knows what that means. Everybody gets the picture of like, okay, the credentials, I see the credentials, let’s keep moving. We don’t have to write a paragraph about them and put them in a box and then give them a box layout and put them in this complicated slider. Nobody I guarantee you like if you watched you know a hundred people visit this website that were actual potential clients they’re not really scrolling through this thing right here.

0:17:09
They want to know that you have credentials they’re not going to go inspect all of them. Okay, they’re not gonna look through here and be like, oh, is this the one I’m looking for? No, they don’t care. So just put them right here to show that you have them and then people can easily move on. All right, let’s talk fonts for a second because now I’m seeing this font right here, down here. I’m not a fan of this font. I’ve seen it before.

0:17:33
I’m not, you know what it looks like? It looks like that font that they use in like etching gifts you know when you when you go buy a gift for somebody and they’re like do you do you want to put the person’s name on the back we can etch it in this is the font that they use like in every place and so it’s just kind of like I don’t know it’s not a good web font it’s not great in this situation it’s this kind of typography contrast not it just doesn’t really work. So I think the typography needs to be improved here. And then we’re introducing new colors all of a sudden. And I don’t know if these are brand colors, all right?

0:18:13
We’ve got this green underline effect. We’ve got this blue underline effect. The underlines disappear and reappear. They’re animated, which they don’t really need to be. And so there’s really professional animation where you go to a website, and you guys know I’m not huge on animation. I don’t do a lot of animation type stuff because honestly it’s hard to get right. But the people who do it right, you could tell really good animation.

0:18:42
And then there’s the old 1997 GeoCities spinning globe kind of thing. Or remember those 3D letters that you used to make spin around in circles there’s that kind of like chintzy animation and this is kind of in that category of like chintzy animation and so I just say get rid of it it provides no value whatsoever to the visitor and it’s just a distraction and it’s just kind of it’s like the clipart of animations and I just just avoid that at all costs it’s not you’ll never see this on really professional websites. You’re just not gonna see it.

0:19:16
So don’t put it on yours. All right, so we have three products here. We have dental implants, porcelain veneers, and Invisalign. Oh, and here’s the, what did we talk about with the depression site? Don’t show depressed people, right? If you have, if you’re a dentist, we can just say this with confidence, you don’t need to show people with busted-ass mouths okay everybody know if I have a busted-ass mouth I know I have a I don’t need to see somebody and connect with them what I need to see is a dental implants equals beautiful mouth right right now I’m getting dental implants equals busted-ass mouth I want dental implants equals beautiful mouth like this this photo is a little bit better but this is oddly like very close.

0:20:04
We don’t need the close up. We don’t need like the medical version of the photo. We need a marketing version of the photo. It’s like McDonald’s. Don’t show me a busted ass hamburger. I know that’s what you’re going to give me. Okay, when I go through the drive through, I’m going to get a busted ass hamburger. I get it. But McDonald’s never shows you that. They show you a nice plump juicy hamburger, it’s got a little sweat on it, you know, a little bit of sweat on the lettuce, okay?

0:20:30
That’s what you get in the market. You’ve got to step up the marketing imagery a little bit. Don’t be so like, this is exactly what this looks like. You got to put some polish on it, I think. So I would redo these photos right here. You know, this one’s not so bad right here, because we’re a little bit further away from the person’s we’re not all up in their grill okay we can we can see this a little bit better that’s that’s more friendly this is too much too close this is too busted so better images here and then we get to the these this card design right you know I if you’re gonna Center stuff you’ve really got to control the, oops, I didn’t mean to click on it.

0:21:17
You really need to control the amount of text. The longer text gets, there’s a threshold, okay? The longer text gets, it reaches a point where it should no longer be centered. And that point is not very far from the beginning of where the text starts, okay? And I see this all the time, right? You’ll see giant paragraphs that are just all centered on a page, like text aligns center. And that’s not what you want.

0:21:39
So once it reaches a certain number of lines like I would say five You go left with it. You go left aligned with it, especially since and here’s a here’s kind of another exam It’s a little too You know, it’s a little too much to be centered in my opinion plus it’s a little too long It’s too wide is what I’m saying, right? The width of the text is too wide for the size of the text. And now we get into like character, and I can’t right click this and easily edit it to show you the examples unfortunately, but character counts, right?

0:22:12
Character counts are very, very important. How many characters from left to right before you break to a new line? There’s a lot of scientific studies on readability and UX regarding the amount of characters in text on the web. And it’s between 40 and 60 characters. So I can already tell you that’s more than 60 characters right there. And so if you can make it narrower, if you can limit the amount of characters, and this changes based on the text size, obviously, so larger text is going to be, you need less characters, even less characters, I should say.

0:22:46
But this text is already very small, just way too many characters left to right to be able to make this super readable and here we just have too many lines of text in order to center it I would recommend left aligning this you have left align text right here you have left align text right here you have left align text right here so it doesn’t make sense to me why you would suddenly go centered centered left left left left left centered left right here it’s that there seems to be no consistency with centered Left right here. It’s that there seems to be no consistency with the text alignment. You can center some stuff. That’s fine Like it makes sense to have this stuff centered But notice it’s one line of stuff and if it’s two lines if it’s three short lines, that’s fine But the minute it gets to like five lines or longer you got to go left with it It doesn’t really make sense to center it anymore. And then you also get these ugly orphans down here.

0:23:39
You get little orphan words. What is that? Is that called an orphan or is it, there’s another term for it. It’s slipping my mind right now. But anyway, you wanna avoid that at all costs as well. And the way that you, look, it’s happening on all three of your cards. Which the orphans don’t look as bad when they are aligned to the left, but you still wanna avoid them.

0:24:00
And the way you can avoid it is by putting a what’s called a non-breaking space in between the last two words. And so I can write it over here. So front teeth. So here’s front, right? And then you have teeth. So you put an ampersand in B non-breaking SP semicolon. That is a non-breaking space. Okay. So this is how you write the text in that. Now by the way I do want to say we are looking in automatic CSS because this is a major problem you’ll see this on all and and I’ve looked hey what what are the solutions there’s not a lot of just there’s no easy solution so what we’re looking at doing in automatic CSS is a feature that you can turn on and it says fix all orphans and so what it’s going to do is automatically detect orphan. I really can somebody in the chat tell me what the proper name for this is because I hate using the wrong term over and over and over again. I know there’s orphans. There’s something related to lines like the final line of text and then there’s something related to the final word of text and I don’t know which I don’t remember which one is which and I actually don’t even remember the other term.

0:25:14
So tell me in the chat what the proper term for that is. But we’re gonna work on developing a feature that automatically fixes this, but manually fixing it looks like this. Front, teeth, and in the middle is a non-breaking space. Okay. I would show you, but I can’t right click and I can’t easily find these elements in the DOM. Okay, let’s go through. We got that, we got that, we got that.

0:25:41
Okay, anti-wrinkle, dermal filters, TMJ, teeth whitening, root canal. Okay, here’s the other problem with this, right? When you show me three services in a card layout, my brain goes, services are in cards. That’s what’s happening on this website. If it’s in a card like this, then it’s a service. But you’re actually showing more services down here. And these are not in the card layout. They’re in their own layout.

0:26:12
And then you go to a wide card layout. And then you go back to this layout. And then you go back to the three card layout. But now these don’t have any descriptions. And then we’re back to this layout, but not talking about a service. And so from a UX standpoint, we’ve created a bad user experience right here, in the sense that we haven’t been consistent with how we’re, we started out conveying the information in cards, which would have been fine.

0:26:38
You should put all the services in cards. And I’m sure that this is not structured properly with these learn more buttons. These should be fake buttons, not real buttons. We should use the clickable parent technique here I’m almost positive that The car the whole card has an a on it a link and then the button has a link on it and the image may even Have a link on it. That’s typically what I see all the time So, you know improper structure going on here but worse than that worse than that is the UX the bad UX of Starting out presenting services and cards and then just switching to a completely different style.

0:27:14
Plus, what is this learn more button floating around here? Is this learn more about TMJ? Is it learn more about anti-wrinkle dermal filters? Is it learn more about both of these? Why does this one have a learn more, but this one doesn’t have a learn more? So that’s a little odd. Then we go to a new card layout for this service, and then back to a no card layout for this service then back to three cards then no card and we’re not even talking about services anymore and there’s no separator for this content right here so a lot a lot to improve there and then oh okay um guys this this esteemed this section right here this slide is so important so important that we had to do it twice.

0:28:05
So there’s another one, there’s another one right here. That seems like a waste of space, a waste of an opportunity here. You’re in good hands, top-notch equipment, soothing practice, professional staff. I don’t know that the beach icon is working here. Doesn’t really jive with dentistry. Ooh, ooh, top-notch equipment. I don’t, the last thing when I am trying to choose a dentist, the last thing I want to think about is like mechanic tools, okay, in my mouth.

0:28:37
So this icon’s got to go. I would just delete this whole section right here. You know, if you want selling points, that’s fine. First of all, they’re way too far down the page. You know, that should be up here somewhere. And then we need to make them much more pleasing. And then they actually need some explainer text to go along with them. Like don’t leave this to my imagination. Let me just imagine top notch equipment. I don’t I don’t know.

0:29:03
I don’t even know if that’s a value to talk about with a dentist practice. I’ve never walked into a dent. Well, I mean, in the US, right? I’ve never walked into the dentist in the US and then like wow this is some outdated shit. You know they’re always like just really clean and nice and they’ve always got the latest stuff. I don’t know. Professional staff, I mean look they’re all, every dentist is going to say that. Soothing practice, what makes it soothing? Give me some details.

0:29:33
How is your dentist office different from other dentist offices? How is my experience going to be different from my experience elsewhere? You need to go into more detail on these things. Slapping an icon and a little heading is not going to get the job done here. And again, move this higher up the page so that we are introduced to these things first, right? You’re giving me reasons. These are reasons to care. So don’t give me the reasons to care after you’ve introduced all the other stuff you want me to read. Give me the reasons to care to make me want to read. That’s why this order is important of these types of things. That’s why this type of stuff needs to be way up here on the page. Okay, let’s keep going down.

0:30:25
Experience the power of personalized dental treatment. Hmm. Okay. Let me go. All right. I guess that is the same, the same font, but I just, I just don’t like, I just don’t, I’m not a fan of that font. Not a fan of that font at all. Why is the E a backwards three? Who, who made this font? I’m about to, I’m about to roast this font. Yeah. I just, I don’t like this font, but this general card design just doesn’t it look way out of place from like the rest of the of the website I don’t know Looks a little bit off. Okay So we’ve got this down here. All right, you got a nice professional headshot so another I guess Question important question. It seems would be we have a personally branded dentist personally branded dentist You I’m guessing this is her is is this her or was this a stock image?

0:31:21
I don’t really know but you know what I’d rather see is her right here Take her get it get it get a like a cutout image of her. That’s really professional works Well put that up here in the hero so I can see the person I’m gonna see right off the bat I mean, we’re it’s a personally branded dentist. I want to see the person and I don’t want to see them in their nightmare outfit, their predator outfit. I don’t know why it’s triggering that in my mind, the movie Predator, but it is. But yeah, that’s a much more pleasing image than everything that’s going on up here. So start out with that. Let’s not bury the leads like we talk about.

0:32:01
Don’t bury the most important things. We have the person who we’re gonna be seeing is literally the last thing on the page. You were like, let’s take one of the most important things and we’ll just put it all the way at the end. So let’s start with that. All right, areas of focus. We have some sub pages here going on. Oh, guys, what, let’s look at this nav. Here we go, test in the comments.

0:32:27
Pop quiz, pop quiz. What am I immediately seeing in the navigation that needs to change? I’m immediately seeing it in the navigation that needs to change. All of you dummies out there who have watched more than one episode, you should know this. Pop quiz. Write it in the chat.

0:32:44
Write it in the chat. Let’s go look at the gallery. So we’ve got befores and afters. Before, after, before, after, before, after. I’m not a fan of the, this looks very carnival. Like the, it’s giving me carnival vibe. Whoa, hold on, wow. This entire, it’s almost as if I went into another branding dimension. It was like, hey, here’s our brown earth tones website and here’s our carnival on the gallery.

0:33:23
It’s like immediately it’s like bright and all new colors and then we’ve got the stripes in the background and this is, oh, and then we’re back to the brown in the footer. That’s quite a juxtaposition there. This needs color theory help. So we really need to consult somebody who has more experience with color theory to help get the color situation on this website under control.

0:33:55
Yes, there you go. All right, Domies have immediately identified never use the word solutions. Never, never, ever, ever, ever. And these aren’t, I mean, like it’s services. It’s like what we do or what we can do for you. There’s so many other names that we can use here. Solutions is not the one. All right, let’s pick one. We’re not gonna go through all of these.

0:34:18
Let’s see, root canal treatment. Okay, so we’re back to notice you know it’s how many how many pages have different okay that’s the same don’t see the blog the blog is back to you know what it is you know what it feels like it feels like it feels like it was almost like a customized theme and like we forgot to customize parts of it like it feels like this section, like this was a section you pull in, like from a template pack almost, and it comes with a gradient blue to turquoise background, and we just never got around to customizing it.

0:35:00
That’s kind of what it, that’s like how off it feels from the rest of the website. All right, let’s go to about contact. All right, let’s go back to, I just wanted to see what we’re doing with the color situation here. So, alright. This is, it just needs a lot of layout help. It’s like, it’s like the the client was like, well here’s all the content that we have on root canals and you were like, okay copy paste and you just kind of pasted it in there and and through some things and some toggles.

0:35:40
There’s just not a lot of thought put into the layout of this page and the content. Things are very tight. There’s not a lot of white space for my brain to work with. We’ve got check boxes that are off alignment here. We’ve got way too much line height in our text items and our list. Yeah, here we are. So now we’re in, now we have anime. So we have a clip art. We went from clip art to anime. We’re hitting everything. It’s just there’s a little bit of everything to have a bit more time and energy put into the layout of this content.

0:36:24
Let’s check on our pricing here. I don’t know if it’s standard. Is it common? Maybe it is in, I think this is Australia, right? Is that where we are? Australia, yeah. Maybe it’s common out there to put pricing on the websites. I don’t think I’ve ever seen that here in the US. And I, this, I don’t, does this mean anything to anybody? This ADA item number, ADA item number, ADA item number?

0:37:00
Is it, this seems like all just super technical, like jargon type stuff that would not be important to a normal visitor. Yeah, yeah, all right. There’s a lot to do here. Well see here we are with animated. This is the GeoCities, you know, spinning globe type thing going on. And then, yeah, we’ve got, and this is my, you know, let’s talk about builders for a second. Let’s talk about builders for a second.

0:37:34
Bricks, and guys, bricks is, I can rag on bricks for this. I can rag on oxygen for this. For sure we can rag on Elementor for this. Beaver builder, Divi, okay? Let’s pull up a builder. Let’s just talk about this for a sec. I think this is very important. Let’s open whatever. We’re gonna open this cutout, okay. So let’s go to add an element container useful very important heading very important rich text very important nav menu very important section block div all very very important basic text very important button very important icon useful image very important.

0:38:27
Divider, not important whatsoever. Zero importance. Never ever in the history of using Brics have I used this element right here. Just haven’t ever done it. It’s not a good way to add a divider to a website design. This is not, adding a physical divider element is not a good way to add a divider. And guys, I’m doing this in Brics because this is the one I have installed you could do this in any builder and a lot of people have asked me Kevin if you if you build a builder what would the builder look like let’s talk about it this is exactly what we need to talk about icon box gone delete get it out of here icon list gone get it out of here list gone get it out of here accordion very important okay and then you only need one.

0:39:15
You only need a nestable accordion. You don’t need this other thing over here. So a nestable accordion that’s query loop compatible, very important. Tabs, very important. Only need the nestable version that works with query. You don’t need this other one over here. Form, we have form plugins for this. Okay, so that’s not, to me, that’s not important to have in a builder.

0:39:36
If you notice, compare native form functionality in any builder with something like WS form. There’s zero comparison. The builders should focus on builder things. They shouldn’t also be form systems. Let the form systems handle forms. It’s too complicated. Forms are their own universe of an element. And so to ask a builder to be an expert in creating forms, it’s not gonna happen.

0:40:02
So it just doesn’t need to be there let’s not lose focus let’s focus on making the best builder possible that that’s my opinion a map element good okay fine useful alert get it out of here don’t need it animated typing there it is okay and so here it is right here and this is what you end up with because you take these elements that don’t need to exist and you put them in the hands of beginners that one they don’t know it shouldn’t exist and number two they don’t really know how to use it very well and you get stuff like this and it’s just like why did we do this because we can because the builder made it easy for me to do it and that’s why I did it and I thought it was cute and I thought it was a look it looks like a more advanced thing right to a beginner this looks like a more advanced thing to a professional this looks cheap and chintzy and not desirable, right?

0:40:53
And so, this is what the builder, by giving these elements, these blocks, to a beginner, this is what happens with websites. A countdown timer, this is functional. It’s not necessary, but it’s useful, okay? A counter, useful. Pricing tables, gone, get rid of it. This doesn’t need to be an element. You build pricing tables yourself the right way progress bar Okay Do I use them like very rarely have I ever used one, but I get it This is one of those things where it’s a little bit It’s kind of difficult for you know Somebody to build unless they’re an advance like a very advanced user So this can be helpful if you need a progress bar This can be helpful if you need a pie chart.

0:41:38
Team members, gone, no reason for it. Testimonials, gone, no reason for it. Code element, very important. Template element, good, very important. Logo, gone, get rid of it, don’t need it. We’ll just use an image. Why do we need the logo element? We don’t. Oh, it auto links to the homepage for you. I could have done that myself.

0:41:55
We don’t need a logo element. We don’t need a whatever this is right here. I don’t even know what this is. I don’t use these. I don’t use I never touch any of these Any of them okay media? Audio yeah, I’ll use the third-party audio player. That’s that’s probably better Image gallery sure okay carousel slider these are obvious very important That obviously the WordPress stuff isn’t is important as well And then this is just kind of dynamic data type stuff. But a lot of these, you see a lot of these things just do not need to exist.

0:42:21
And when they do exist, you get outcomes like this. And you’ll see this in Elementor all the time. It’s like all these cute little elements that people just throw on the page. And it’s like we’re back in 1997 with GeoCities. And it’s like, ooh, I saw a spinning globe on that site. Where can I get that from? And you just go, why is it there? Well, I don’t know, it looks cool. There’s no reason.

0:42:52
There’s no reason for it to be there. There’s no value to the visitor. It’s just like the developer thought it was like it looked more advanced. So we did it. And the same happens with animations. They make it easy for people to animate things. And so they animate them. Why is it being animated? Don’t know. Just looks cool.

0:43:07
How is it being animated? Well, in a very, you know, bad way. It’s not good animation, but we made it easy. We made it easy to do bad animation. So obviously you should do bad animation. If we made it easy to do bad, no. That’s what happens on websites. It doesn’t need to be happening. All right. I think we’re done with this one. We’ve given it enough feedback on what needs to happen here. Get somebody who is well-versed in color theory. Get somebody who’s well-versed in typography. Those are the major things that need to happen. We have some UX issues with how we’re presenting content on the website.

0:43:44
The person that’s well-versed in color and typography is also fairly well-versed probably in spacing, and because this needs a lot of spacing help with our content here, especially with regards to line height, font size, the amount of spacing in your grids, all of this stuff needs work. So this is a, clearly we have somebody who was able to build the website in Elementor, but we’re missing the fundamentals of color, we’re missing the fundamentals of typography, we’re missing the fundamentals of spacing, we have too many chintzy elements, and just a lot to clean up, basically.

0:44:24
We didn’t even really get to copy analysis because too much other stuff is distracting from the copy anyway. We got to get that stuff fixed first. Okay that’s my general thoughts on that one. Alright let’s get to the chat and let’s see what we are saying in the chat. Chaha Design says the site explodes with colors. Yes it can or Or it is sorry the irony It’s a candyland of colors All right, we were talking about the solutions Yeah, we couldn’t do a lot of Dom stuff on that one because I could not right-click it had right-click blocked And the Dom was just a disaster when I pulled it up, so I did not want to dive into that Dom Hey Kevin started to get serious and WordPress development since I self-taught myself to develop my work company site back in 2019, saw your tutorials and they are amazing. Thank you from Malaysia.

0:45:24
Well, you are very welcome. Thank you for watching. Chahat Design says, yes, dentist should be the dentist photo. That headshot that’s at the bottom should be on top, should be up front in the hero section. Let’s see. If my dentist used a wrench, I’d run a widow. There you go. Thank you. Thank you. Thank you. A widow. A widow is the last line of a paragraph left by itself at the top of the page. An orphan is the first line of a paragraph left by itself at the bottom of a page. Good. Okay. Thank you. Thank you. Good, okay. Thank you, thank you.

0:46:00
There’s some JavaScript code that can deal with orphan. Yeah, I think I saw that somewhere. A widow is at the end of the paragraph that appears on top of a column. An orphan is a single word that sits at the bottom of a paragraph of text. Okay, good, so I had it right. I had it right, but I couldn’t think of the other word, widow, I couldn’t think of the other word. All right, thank you.

0:46:18
So much is happening on this site. Hierarchy is all over the place. I assume you’re talking about like maybe heading hierarchy. I wasn’t again able to get into the DOM very well. I always skip big blocks of center aligned text, even worse when it’s the full width of the page. Yes, yes, that is the only way to make center, big blocks of center aligned text worse is to make them the full width of the page width. Okay, I think we’re good. Good, good, good. Let’s bring up the second one. All right, where are we at here? Let me get it into the right tab. Drop, drop, drop. Thank you.

0:47:07
Okay, good. All right, let’s check our stream. We’re all still going good. We got a lot of viewers here today. That’s fantastic. This is our second site, contentastro.com. No scroll test right off the bat. It’s looking a lot more modern, a lot more clean than the site that we just looked at. Let’s look at right off the bat content width, right? So juxtapose this with the other site that we saw, much narrower column of content.

0:47:44
My eyes do not have to go very far. I can, it’s a very tight read, right? And thus it feels more inviting. It feels easier to read. It feels like there’s less work to read the text. You could maybe argue that it’s a little too narrow. You know, we know too wide is a problem. There is also a thing of it being too narrow. And so let’s just look here and let’s see if we can easily… Okay good. It looks like we are going to easily be able to do this. Wow we’ve got… I haven’t seen this in a while. Just some some manual clamp functions being thrown in there. Oh this is a utility class.

0:48:25
Got it, okay. The thing I wanna look at here is, so clamp, where are we at with clamp these days? It’s been a while since I’ve looked at it. Oh, comp. No, we need clamp. So we’re still at 93%. Now, IE is officially in the trashcan, so that’s good. But there are some people who are still not going to be able to make use of these clamp functions.

0:48:57
And so when I see them defined like this, I always wonder, are there fallbacks somewhere else? There are clearly not fallbacks put into this set of CSS instructions. You would see, like when you look at automatic CSS, you see three different lines of declarations, right? So there’s the clamp function, then you’ll see a calc function declared as well, then you’ll see a rim value, like a pure rim value. And that’s how you do natural fallbacks in CSS. Now there’s another way to do fallbacks in CSS, where you actually look at whether the browser supports the clamp function or not, and if support is not there for clamp, then you change values to something else. That’s another way to do fallbacks.

0:49:39
So I just wonder if, you know, I see a lot of people putting in manual clamp functions and they’re not putting in any fallbacks. It’s a little bit dangerous. I mean, most people are gonna see your site the right way, but you know, it’s not like it’s support is like 97% or anything like that. And you know, you’ll always get, for some reason, you know, Bev in accounting always still has IE.

0:50:00
She always still has, you know, an outdated version of Safari or something or she always she always has like a I An iPhone 8 you know and so you know she pulls it up, and she’s like the website is no space And it’s because you know she she’s not seeing the clamp functions, so she’s a good idea to have fallbacks It’s a good idea to have some fallbacks so throw those in there Okay What we were going to talk about was the width of this and it’s being done with a clamp which is okay I don’t know I find that a little odd let’s see especially since it doesn’t seem to be doing anything okay so because you don’t need the max width is the max width max width is already responsive when when the edge of the device hits something that’s max width it’s gonna allow it to get smaller anyway.

0:50:51
Does not seem like the width, the clamp is needed on the, it’s not doing anything. You can visually see that it’s not doing anything. So let’s just change this here. First of all, let’s put it 100% and just see what, this would be awful, right? We all agree that that is awful. Now it’s even more awful here because it seems like, oh, that’s the actual container. Okay, all right.

0:51:15
And I can’t change it to the website width. I don’t know. Oh, there we go. That would be the normal website width. We’ll just turn off that. That’ll allow the Brics. Did you put in a manual clamp in Brics container width settings? That’s something that doesn’t need to happen. This is an overuse of clamp.

0:51:32
This is a 100% overuse of clamp right here. The container width is supposed to be the website width. The website width just needs to be defined as a max width. It’ll always get smaller when the edges of the browser touch it, right, without a clamp function. This will happen without a clamp function. Let’s go to, let’s talk about width and max width too, because this irks me. I want to know in the comments in just a second how you guys process this in your brain.

0:52:02
But I’m gonna do 1,366 pixels here. And what you’re gonna notice is it’s still responsive. Now, it actually wouldn’t be responsive normally. Like if you were just writing the code, that would not be responsive. It’s responsive because Brics automatically targets all elements by default with a star selector and sets their max width to 100%. And what this does is it allows people to use the width field without danger, right, of creating overflows.

0:52:33
But in my estimation, like the width should be 100% and then you set a max width at a pixel or rim value or whatever. That’s how I’ve always done it. Bricks asks you to do it backwards. Bricks says, no, we’re going to put a max width of 100% and then we’re just going to set the width to a static value. I guess it doesn’t matter either way. You get the basically the same outcome. It’s just kind of a change in thought process. But this clamp function, that clearly did not need to exist.

0:53:02
So I would take those out. You’re just adding complication. And I mean, look, browser support for setting a width on something is 100%. Browser support for clamp as we saw is not 100%. So you throw a clamp function into an area that doesn’t need a Clamp function, and suddenly you’re risking breaking, you know, major aspects of the site on any device or browser that doesn’t support Clamp.

0:53:25
But we can all agree that this text is way too wide. The heading is too wide, this line of text, way too wide, way too wide. So we start to come in with a width control on this, and so we set something like 50 characters and this is what we get. We set something like 60 characters and this is what we get. Now we obviously don’t want that orphan right there. So we could bump this up until we don’t have an orphan anymore.

0:53:53
80, there you go, right there. That to me, and in fact, I would actually probably target this. I like to kind of sculpt text down like an upside down pyramid a lot of times. So let’s put a max width on here of 48 characters. Oh shit. This is going to put off the centering on this margin inline auto. There we go. That’ll fix that. And then let’s drop that down. Even that’s how, that’s how I would do it right there. You see this upside down triangle kind of concept? I think that looks fairly sharp and I think it’s very easy for the eyes.

0:54:33
It also creates more contrast between the heading and the body text, right? I can clearly see that the heading feels more dominant in this and then the text is still very easy to read. It’s nice and compact and tight. There’s no orphans. This is what I would probably try to achieve. Now if we refresh, actually let’s do this in a different window, we can just pop back and forth. Which one do you like better?

0:55:00
Right, we just look at these. Doesn’t this feel just, it’s like a box, bam! It’s like a square of text on your page. This feels more like sculpted to me. I don’t know, drop in the comments, what do you guys think? Which one? This is a Okay, this is our a version even though this wasn’t the original This is going to be a and then this is going to be B right here So a or B in the in the comments. All right this image Let’s read let’s read and do our no scroll test content creation tools and resources curated for content creators.

0:55:38
Content creation, tools and resources, curated for content creators. If you fit another C into that heading, my man, I might be out, I might be out, okay? There’s a lot of alliteration going on. There’s a lot of Cs. Content creation, tools and resources, curated for content creators. How many times can we say content and creators and creation and curate and see.

0:56:03
It’s a little wordy. It’s a little wordy. Streamline your content creation process and skyrocket your growth with Content Astro’s hand curated collection. There we go again. Content hand curated collection of the best tools and resources. It’s good. It’s good.

0:56:20
It’s not great. We need to drop some Cs. Find some other words for things. And I think we can improve this section. This has gotta go. This right here has gotta go. It does, I get what you’re trying to convey here, but it’s not the product, okay? It’s just a 3D modeling type visualization. It’s basically, you know, 3D clip art, right?

0:56:44
And so we’re back to the same kind of conversation of don’t use clip art show me something meaningful here I guess you’re not a product you’re a collection of things so I guess this is an affiliate play if I had to just guess off the bat I would just say we’re probably just doing this is a a what will be the term for a kid yeah well just a curation site and the whole the whole play is let me recommend stuff if you’re a content creator, you click on it, you buy it, I get my affiliate commission, and that’s that. All right, let’s scroll down the page. Categories we are currently curating.

0:57:23
Man, you are killing it with the Cs. Categories currently curating. Discover the best tools and resources for your content creation needs with our curated categories. So here’s where I can just immediately say, all right, I want to look at email marketing tools, I want to look at design tools. Okay. This is a very easy format for presenting these. Let’s talk about this right here.

0:57:45
Let’s see if this was, I’m guessing this was done with Flexbox. It is. Okay. Now, how did I know that this was Flexbox and not Grid? That would be question number one. How did I know that this was Flexbox and not grid. Okay, so I’ll just answer the questions. We don’t have to watch in the chat. Let’s get the answers though. Claudia says, yours, the larger one, two lines always better than three, A is better, A, A, A, A, A, A, A.

0:58:16
The hero headline should just say, tools and resources for content creators. That is a much better headline. I agree. That is a good, you know, just tell people what it is. Tell people what’s going on here without being too wordy. Good, good, good. Okay. So this could easily be done with CSS Grid. But the challenge is when you have an orphan item in CSS Grid, you cannot center it.

0:58:42
And this is one of the most common, let me go back, you can center it, but not without a lot of shenanigans. There’s a lot of shenanigans to center a orphaned element in a grid. So this is the number one question I get about CSS Grid, is people end up with an orphan item and they’ll say, how do I center it? And my response has always been, why would you?

0:59:14
This does not look better to me, right? We know it’s an orphan item, which obviously if we can avoid an orphan item, it would be great to avoid an orphan item, but it’s just not always possible. You’re not always going to have an even number of things. Or if it’s a three column grid, you’re not going to have an odd number of things. So you can end up with orphan items. I don’t see any value to centering the orphan item. It would look just fine if it was still over here in the left, in the first column of the grid. We’ll look absolutely fine. Nothing would look out of place. Now, the other thing that you can do with this, let’s see if we can quickly change this.

0:59:56
So if I had a grid, oh God, just doing this stuff on the fly is grid template columns. Let’s do, let’s just do one fr one fr just to quickly just see. Okay that’s not a great way to do the grid but it’ll just allow us to visualize. Okay does that look any worse? It looks better in my estimation. It looks like this is supposed to be there. It looks weird to me when it’s just oddly like oh I’ll just I’ll just float here in the center, even though nothing else is floating in the center. And you lose the gutter down the middle. It’s just not as clean of a presentation. This is how I would expect this to work. Now, if you want to fill this gap, but you don’t have another item that’s one of these, it’s not a category, right?

1:00:44
I’m out of categories. I queried all of them and I ended up with an orphan. You can put a call to action card here. All right, you can fill this space with something of value that’s not one of these things. If you really want to, I don’t even think you need to. I don’t think there’s any problem with an orphan item in a grid. Leave it to the left. Leave it where it’s supposed to be in the grid.

1:01:05
You don’t have to, because then people are like, well, I really, really, really want it centered. And I’m like, well, you’re really, really, really gonna have to switch to Flexbox then, because grid isn’t for this, that’s not how grid works. So now you’re changing the whole structure of how this is, just so you can center the thing for, in my estimation, zero value. You get zero value out of doing that. This is fine, move on with your life, okay?

1:01:28
I overall, this section, I like, I love the cards. I like the cards, I don’t really like the images because they feel, number one, it looks to me like you cut them all out which is fine except they got fuzzy like the edges are fuzzy and they just seem low resolution to me I don’t know and I think you know if we inspect the Dom here I would get yeah those are actual images okay and I think you’re doing that because you’re animating their scale on hover right so their scale is increasing on hover, which I like it. I like the effect. I just think maybe there’s a cleaner way to do it.

1:02:06
They just look a little fuzzy and low res to me. I don’t know what’s causing that right off the bat, but it’s making it look a little cheap. All right, we’ll look at Dom in a minute for sure. Overall, I like the design of this section though. I don’t like the orphan here, right? So this, we can see. What’s causing this? So you have at the ID level a width of 20 characters, but this width of 20 characters didn’t do you any good.

1:02:32
We put a setting on here, it just did not need to be there, right? This looks objectively better. Art is subjective. A lot of stuff we talk about design is subjective, but you’ll hear me say that looks objectively better. Because I don’t know anybody who would be like, no, it looked better with an orphan, with an orphan word, right? So to me that’s objective, that it is better if this width 20 characters was not here.

1:03:06
And that’s set at the ID level, which means you did that to this one-off element and there was just no reason to do that. Also look at what happened here with the text, because all of my styling that I changed is gone. So it’s now kind of oddly put this back into the center. It’s not aligned with the grid anymore, which now feels a little bit off. I get like content being wider than other content. I mean, that’s fine, but it just doesn’t work with this.

1:03:33
We’re also missing a space between our paragraphs. So we’ve used the wrong element here. You’ve used a Bricks text element. Let me go back just to show everybody. Let’s not ruin that page for no reason. Add new, okay, blank. All right. People ask this all the time. That’s the only reason I wanna cover it. Let’s do grid 2 gap M block block Text Text rich text okay those look exactly the same don’t they but they’re different So this is a div of text there is text in a div This is the rich text element element. There’s a div wrapper with a paragraph tag inside of it. Now look what happens when we grab text. Place, place, place. Oh dear I can’t even do it. I can’t even it’s not even letting me. Okay there we go.

1:04:48
Save, refresh. Hey, it looks exactly the same, doesn’t it? Is it the same? These two things are not alike. Look at that. You have giant blocks of text with BR tags, no paragraphs defined whatsoever. This is the wrong way to handle texts like this. Multi-paragraph text. You do not use a text element, okay?

1:05:12
What do you use? Use the rich text element, because we hop over here and we inspect this. And look at this, multiple P tags. Every paragraph has its own paragraph tag, which is semantically correct. This is semantically incorrect. Now, you could say, well, Kevin, swap that text to a P. Great, let’s try that. Refresh, inspect, here’s a div, hey there’s our P, womp, womp, womp, womp, womp.

1:05:44
Okay, you have two paragraphs in one paragraph tag and they’re separated with break tags, semantically incorrect text. So if you’re going multiple paragraph, then you need to use a rich text element. If you’re going single paragraph, this would be perfectly fine. Put your text in the normal text element, change the HTML tag to a P, nothing wrong with that. This is perfectly fine. But the minute you need another paragraph, you have to switch elements. You go to a rich text element instead of a standard text element. All right, I like this, this is good right here. Again, I like these cards. I like this hover effect. I think that’s really good. I love the outline on hover. I love that this gets a little outline. This card is not working properly though.

1:06:44
So see how I get a pointer cursor on the actual text? When I hover the card, I get the hover effect, but I get no pointer and I cannot interact with the item. So this is a flaw in structure and a lot of people make this error. So I wanna cover it, let’s cover it. And there’s actually a couple things about this card because I see a very faint background image that we’re gonna talk about in just a second. But if you are indicating a clickable item by hover effect, which is happening here, you need to let them interact with it.

1:07:22
I should be able to engage with that item. You’re showing me an indication of engagement, but disallowing me from actually engaging. I can only engage when I fully go to the text, okay? So this is not a really a clickable card. Even if I click on it, it goes nowhere, right? It only works if I click the actual text so that needs to be fixed right there Does that happen up here? No, it doesn’t happen up here. So you’ve done these correctly. Let’s go ahead and look So if we inspect the DOM, there’s our and it’s using a clickable parent technique right there Okay It’s using a different clickable parent technique.

1:08:01
It’s using clickable parent block one class on the wrapper and then another class for a trigger on the H3. You’ve got your link inside the H3, which is perfectly fine. And then you’ve got your image over here, which does not have a link, which is good. I just don’t know. It seems less efficient to implement clickable parent like that. So the automatic CSS clickable parent class, there’s only one of them. You put it on the age 30, you move on with your life.

1:08:33
This requires you to put a class on the parent and a class on the trigger and do that on every item unless you’re using a loop here, which I would really hope that you’re using a loop here. But still, two classes versus one class, I think there’s a more efficient way to do that. But this is being done correct here. So what went wrong over here is the question. So you’re just not using it. You’re just not using clickable parent over here. Hmm, interesting. Oh, look at this.

1:09:00
You have a blank link tag. Let’s inspect this one. Does it have the same problem? If this is in a loop, they’re all gonna have this problem. Oh, look at that. Okay, let’s see what this does. You have two, so yeah, well, that’s just, yeah, look at that. So I start to use my keyboard to navigate. It goes select nothing, select the text.

1:09:28
Select nothing, select the text. Select nothing, select, and it’s gonna do that all the way down. And then you’ve just ruined, whoever is using a screen reader, you’ve just ruined their life. They’re getting double announcements on all of these. Okay, so you’ve got something to fix there. That’s probably just a small mistake during the card build. Let’s talk about this image that’s in the background there.

1:09:53
So again, I think you’re using a real image here because it appears that you’re scaling it, but it’s way, way, way too faint. I can barely see it. I can’t definitely can’t make out what it is. So you’ve got the opacity set with a filter to four percent. Let’s just beef this up. Let’s maybe go to go to 10. Yeah well what I would probably do there, they’re getting more distracting now for sure it’s gonna be hard to balance this but what you may want to do Let’s try 15 Which seems to be bright enough for me to make out what the image actually is, but it’s the color That’s really causing the problem, okay, so these filters Yeah, you’re gonna have to I think you can layer them Yeah, there we go. Okay, you can you can layer them. So I just use another filter to make it grayscale but then you know it’s getting cut off and I don’t know if you wanted it to be cut off I assume you did but now it’s a little distracting at that opacity I don’t know these things need to be this needs to be thought about a little bit more I get what you’re trying to achieve and like it’s just it’s a tough situation I just refresh and put it back to the way it was.

1:11:14
And it’s like at this opacity, images don’t even need to be there. You’re loading a lot of images for no value whatsoever. And I get that these are the featured image for these blog posts. So it was easy to, you know, you didn’t have to go pick out new images or anything like that in order to get this effect. But I just think the effect is not executed super well because I just can’t see what’s going on back there.

1:11:39
All right, let’s keep moving on. I mean, I like the overall direction. Now this is interesting too. This is an example of why you would want to use flex versus grid. And this would be a good use of flex over grid. So notice that these items have their own width. The width of the item is responding to the width of the headline that is in it. And thus you get an unstructured kind of almost like a tag cloud style of layout here. You can’t achieve that really in a grid very well. You can, you can, but it’s way easier to achieve a flexbox.

1:12:20
So this would be a good use case for flexbox. But up here you have a very even column. So this is much better to use grid and see once again it just to me it’s like that floating centered item just looks out of place to me. Look at the eye of if your eye is following the left side of the text it has to go down down down down down down cut over when it could just go down down down down down right so you’re making the eye jump across to the center of for again, no reason to do that. All right, let’s go to, I wanna see the collection of tools.

1:12:54
Let’s move on to our, let’s see email marketing tools. All right, so we’ve got basically all of them, all the common ones. You are missing a few. You are missing a few here. Can I click on, oh, I can check it. All right, so that takes me to MailChimp. Send in blue. So you’re not really doing like blog posts about them. Reviews, for example.

1:13:22
That’s interesting. I would have expected there to be maybe reviews here. Is there a blog? Yeah, there is. Reviews, hey, hey. These are not reviews. Oh, I’m noticing something else we need to look at. And just, I wanna look at this little blur ball right here. You guys see that blur? I like it, but I wanna see how it was built.

1:13:41
We’re gonna take a look at that in just a second. All right, these are not reviews. Well, this one is, kind of. List posts are not reviews, right? A review would be like an in-depth MailChimp review. So we just do a whole post dedicated to reviewing MailChimp. What are the pros, what are the cons? That’s what a review post is. So I think we need to get a little bit more clear and accurate on our blog categories here.

1:14:22
And really what I would do, the reason I was thinking about this is because you would want a way to query, like this should be, yeah, I get, you get a link to we go to MailChimp, okay? But if I click on this, I wanna see the review of MailChimp. If I click on this, I wanna see your in-depth review of Sendinblue and of Substack and on and on and on, right?

1:14:44
I think that would be much more valuable to the visitor. This feels like, what this feels like is, you’re just, this is a pure affiliate play. You’re not giving any value in exchange for the affiliate commission. If you gave me an in-depth review of each of these tools and there was some sort of guide that really made my decision a lot easier and then some people are going to pick MailChimp after they read your reviews. Fine. You’re giving value in exchange for the affiliate commission.

1:15:20
It’s not super valuable to just say, here are all the email things on the internet and pick one. Like I could have Googled it, right? I could have done that myself. So I think giving somebody in-depth reviews of each of these things would be good. And then when you go to a page like reviews, guess what? You can just query them. And you can categorize them again here. So if someone clicks on reviews, you can kind of have the same grid, but it can be filtered.

1:15:45
That would be the way that I would approach that. Okay, we can look at SEO here as well. We’ll look at SEO in just a second, but this thing caught my eye. This, where did it go? It’s in the hero of all of these pages. Screen capture tools there it is that little blur design tools there it is little blur. So just tell me before I look at your DOM please tell me that this is done in a scalable way because the minute I see a accent styled item like this on multiple pages of the website nightmares start popping into my brain of like what what if Bev and accounting doesn’t like I know you have no Bev and accounting But we’re talking about client websites and scalability maintainability and all the clients have a Bev and accounting Just like they have a Fred Fred and Bev are going to come together And they’re not going to agree on the color of this blur And they’re gonna be like I really think it should be our other brand color.

1:16:49
They always have another brand color, right? That they didn’t tell you about. And so they’re gonna want it changed. And you’re either gonna hate your life, you’re gonna love your life. And we’re about to find out right now. So we’re gonna inspect, and we’re gonna see how this blur was created. So we’ll open up this section. Notice this dom.

1:17:06
Hey, doesn’t this dom look very different from the Astra Elementor dom that we looked at? I mean, we have a head, we have a body, I mean come in here and there’s a header and there’s a main tag and there’s a footer. What? Organized? Oh my god, there’s sections that we can easily access? Man this is like foreign. No, this is how it’s supposed to be. This is how it’s Inspect. Let’s see if we can get down into it here. Oh, tell me that’s not it. That’s it right there. There it is.

1:17:47
A background image linear grading. I’m going to turn it off to see it. There it goes. There it goes. Okay. Question number one would be, why is this a div. So obviously, okay, if you have a Figma file, and your Figma file has a cute little thing right here, a blur that goes into all of your heroes, and you’re like, okay, let’s achieve the blur.

1:18:13
You have achieved it. So technically you can check the box. But the way that we achieve something is important. That’s why we try to talk about this stuff all the time and go into the details, right? The way you achieve something is important. Remember when I said the divider element, this thing right here, is just throw it in the trash, you don’t need it. A physical divider is not the best way to achieve a divider between items on a webpage.

1:18:45
Pseudo elements, much better, okay? So we’re adding a DOM element, a physical DOM element. So if I create a new hero, where the hell did I, okay. If I need to create a new hero on a new page, I have to add a section. Now I could just take that section and say, accent blur. Just put a class on it, accent blur, bam, my accent blur appears. It’s like magic, magic.

1:19:12
But on this site, I can’t do that. On this site, I have to add a new div. And then I have to style the div. Or I have to go open another page and I have to copy a div that’s already there that has the accent blur, and then come paste it onto this page. Not efficient, not scalable, not maintainable. But then we get into the situation where Bevan Accounting wants the blur to be a different gradient color.

1:19:41
So what we have to do is we have to open it and we have to select that div and we have to define new values for the linear gradient. And once you’ve done that, it’s only happened on this one blur because this is defined at the ID level. And so now what is our situation that we’re in? Well, you get to open every page on this website and you get to edit every single linear gradient element that exists all individually. And I hope you don’t miss one because then there’s going to be that one that’s just chilling, looking different than all the other ones.

1:20:17
Or you could screw the physical element altogether, put it in the trash can, and just add the blur via a pseudo element attached to a custom class called accent blur and then you could just throw your accent blur on any section at any time on a whim and then if you want to change it if it’s using locally scoped variables you can change it in a one-off situation or you have global control over the colors in the linear gradient the size of the blur the amount of blur all of that stuff is controllable from one single source this is done in a non-scalable way. It’s not any extra work to do it in a scalable way. Some people might think, well, you’ve got to create a pseudo element.

1:21:00
That seems a little bit harder than just throwing a box on the page. It’s not, it’s not any more difficult. You already had to do absolute positioning with this. You already had to do kind of some advanced stuff with this. Just attach it to a pseudo element attached to a custom class and now it’s perfect this implementation is very far from perfect all right I like the let’s get to what I like I like the effect I like the design I like the site I like these cards this is very clean notice the cards not clickable here’s what I don’t like I don’t like and actually tell me in the comments if you think this is technically accurate or technically inaccurate.

1:21:46
I don’t, I’m not 100% on this. I’m not 100% on this, but you have an overlay, like a hover, you have a hover effect, which typically indicates a clickable element, but the element’s not clickable. Only this item, only this button in the element is clickable. So in my estimation, you should not hover affect this card. You should only hover affect this button because that’s the clickable element. You’re indicating to a user that they should be able to click this and they can’t click it.

1:22:15
To me, that’s technically incorrect. Now you guys tell me your opinion in the chat. Overall, I really like the design. I think these cards should all be the same height So you need a stretch class on here Align Item stretch right there And then when you stretch these items to get them to be all the same height you then have to look at how these cards Are structured and thankfully you have what amounts to like a footer down here Thankfully you did this you did this correct. It doesn’t have a custom class on it which it should so we can’t really target all of them but if we do a margin top or really what would be a margin block start these days of auto then you get the correct effect here. So see how my card is always the same height as the other cards, but my footer will all also be tacked at the bottom at all times This is not what you want You don’t want the floating footer deal right with just empty space below it you want this layout right here Now in order to achieve that you need a custom class on your footer to affect all of them They’re probably in a loop so you can affect them all anyway, but still best practice to put a custom class on them.

1:23:38
But that’s the effect that you want. And a lot of people ask, you know, how to achieve this. You could also determine if you wanted this badge to be forced to the bottom as well. That would be another option. Margin block start of auto, which I don’t even think you can do it now on that one. You’d probably take it off this one and then do it on that one or it may require some extra shenanigans here.

1:24:05
Personally, I don’t think that that badge needs to be at the bottom, but it’s up to you. This footer definitely needs to be at the bottom. I like this card right here, I think this is cool. Let’s go to the about page. This to me feels too narrow. Let’s go to inspect. Right here. That’s interesting. Okay, yeah.

1:24:33
Well, yeah. Why did you do that? The Z index of 99, which is way too aggressive. It’s because of that blur. What did you do with your blur here? Let’s find our blur. Where’s our blur? Where’s the blur? All right, so it’s probably not in there. There it is right there. So you see we have more physical elements creating our blur and look at them all over the place. My gosh. I think there’s better ways to do that. But what’s their deal? They have a z-index of one. Why do they have a z-index of one? They don’t need a z-index of one. They should really have a Z index of negative one, which then it disappears, but then you can do isolation of isolate on your container, which I don’t know if this is the actual, yeah, there you go.

1:25:27
So there’s your isolation isolate. Now you don’t need a Z index of 99, which two would have worked, but you know, I think I see this a lot. I see the Z index thing. People are just like throwing around Z and X numbers. It’s, you know, you wanna be careful with that, right? What was I gonna do? Initially, what I was gonna do is change the width of this and then those things caught my eyes.

1:25:46
Okay. So we’re using that clamp again, which did not need to exist. All right, let’s go with 60 characters. It’s a little wider. It’s starting to feel a little bit better to me. That would probably be just fine. Very simple page. I mean, we don’t need to talk a lot about it. Free newsletter.

1:26:03
Okay, all right. Does it irk anybody else that the left side of this text is not aligned with the left side of the actual website? Kind of irks me a little bit. Again, it’s making the eye jump, bam, into the center. You know, it hurts the kind of the scroll ability. Overall, this website is well designed. Like I like the design, I like the look and feel, I like the vibe, I like the, you know, it’s all, the logo is good.

1:26:43
Everything, everything is good, right? Just some stuff that we talked about, Dom Wise, get rid of the clip art type stuff. I don’t think that this clip art, there’s way better stuff you can put in this spot. I’m just not liking the 3D clip art. Overall, I would rate this fairly high and just have some stuff to clean up. Let’s go to the chat and let’s see if anybody has, this is also the part of Web Design for Domies.

1:27:16
We have 30 minutes left, where if you have questions, any question about it, it’s like basically an AMA. You can ask me about UX, UI, SEO, all this stuff is open. You can ask me to show you something, okay? Obviously we can pull up a page here and just build something. You can ask me anything. So drop questions, whatever in the chat. I’m gonna go back through and see if there are any questions left already.

1:27:42
Let me scroll up to where we were. Okay. All right, here we go. Found it. All right, right after Ruben’s rewriting of the hero headline. Grid doesn’t center elements, correct. Remove the fluff. I completely agree that orphaned items don’t need to be centered.

1:28:05
It’s so hard to get clients to be okay with it. Yeah, yeah. And again, it’s one of those areas where it’s, clients don’t know what they’re talking about. So it’s, you kind of just got to put your foot down a bit. They are not link wrappers, just no clickable parent. Every button has the word tools in it. Maybe he should pull it out and in front of the buttons. Let me see what that means. Let me go down and see.

1:28:26
Ah, yeah, yeah, yeah, yeah, yeah, I see it. Yes, good call, good call on that. Yeah, you don’t need all this repetition of the word tools. And really, you could get into SEO, right? There’s questions of SEO here, where do people search for design tools, design apps, design, and you can start using other words here that actually have SEO value. If every single one of them, you’re saying to me, well, I did SEO research and people look for design tools, and that’s why I said design tools, but they also look for email marketing tools, but I can already tell you that this doesn’t really have anything to do with SEO, because if it did, it would probably have the word best in front of it, you know, if I had to guess, like best design tools, best email marketing tools.

1:29:18
But then, then we get in a situation of, are you really giving us the best? Or are you really just curating like all of them? That’s still the one thing I haven’t really figured out on this website yet. Are these, you say curated. What are they curated on the basis of? Yeah, it says best tools and resources. Okay, so you’re claiming to give us the best. I still think you should do reviews so that you can explain why these tools are the best.

1:29:44
But then, you know, okay. I get that this is subjective, but if you’re gonna tell me this is hand curated of the best email marketing tools, milk champagne on that list. Immediate, crunch it up. Jordan shot into the trash can. Okay. Just, this is not, it’s just not. It’s like the thing you would expect to see in a list of email marketing tools.

1:30:09
It’s not what I would expect to see in a hand curated list of the best email marketing tools. ConvertKit, yeah, I can see that. It’s the one I use. Sendinblue, hmm, okay. Substack, nah, not even sure. I don’t think that’s an email marketing tool. SendFox, I don’t know. You’re missing some that I would definitely have on this list.

1:30:34
So I don’t know. But again, this is why you need reviews. I mean, make the case, right? If you make the case in a 2500 word review, which then by the way you can rank for, for SEO, it’s gonna be a lot better. And it’s gonna be a lot better for SEO if these things link to other internal pages where you have lots more details, right? So if you say best email marketing tools, this is almost like creating a list post at that point, except the list, each list item in the list post has 2,500 words of additional content on its linking page.

1:31:11
Very, very good for SEO. And by the way, are these lists? Do we even look? Oh, hey, whoa, whoa, whoa, that’s a double. You get a double my friends. You cannot have list items in a div. That is a womp womp. That’s got to be a UL. Probably just a small oversight. I’m not saying I’ve never done that oversight before. I’m just gonna give you the benefit of the doubt. Probably just an oversight. You missed a toggle when you were creating the grid here, but you definitely cannot have LIs in a div.

1:31:54
Okay, so that’s something for you to fix. See, we’re finding things for you to immediately improve your website structure. Let’s go back to the chat. Why is there an icon plus an arrow? Is it not too much? I believe you’re talking about these list cards. Are these list items? Did we carry on the, oh, oh. I would like to see a list here.

1:32:16
I would like to see a list. All right, you were asking about arrows plus icons. Personally, I don’t think it’s too much. I could see how some people could make the case that it is. For me, it’s not. I like the arrows, I like the icons. I like the design of these cards. I would defend this person on the decisions they made with the cards other than the soft cutout kind of blurred things that we already talked about.

1:32:42
We already talked about that. But I would defend this person’s design decisions on these cards Let’s go down Jason says this answered a big question. I had perfect. What if we add margin bottom to all paragraphs globally except for last child negative? No, no Don’t do that. That means the cat. I wish I I wish I had the Kevin Hart knew however he does that. If I were making a video I would edit that in but we can’t do that because we’re live. Yeah no no so I remove all all paragraph margins that’s exactly what automatic CSS does. When you fix paragraph and heading spacing so we go back into our area here all right so options, see this, fixed paragraph and heading spacing.

1:33:42
You don’t want default spacing trying to do things because it doesn’t match all your other spacing. And then, so if you have things with default margin bottoms, suddenly you’re doing something like, let me see an example right here. You see this even gap, even gap, which I don’t even know if those are even let’s see if they’re even They should be even How is that done is there a bot yeah, oh god you’re killing me small No, oh It’s hurting me. It’s hurting me Why is there margin why whoa?

1:34:17
Why is there padding bottom at the ID level on this H3? You, this is, hmm, hmm. Let’s look at this one. Padding bottom of 1.4 rim. There’s no margin or wait a minute, there is somewhere. Oh, it’s on your H2 by default. Margin bottom point rim, margin top point 8 rim. This is throwing, this is why I was eyeballing it. I’m like you know that should be even but it doesn’t really look even. Looks like there’s a little less here than there is here. And it’s because all your stuff has all these weird defaults on it and they’re adding together. And so the gaps are not even.

1:35:11
And so this is what I do. Because you really want even spacing in here. So we’re going to get rid of that. First of all, you don’t put padding on, you don’t use padding here to space things out. Padding is for when you have like a background color. Okay, so backgrounds color is red. Okay, see, see where we’re at here, you’re, you’re creating a box that’s actually uneven when you use padding. When this is margin bottom, the box is even and then there’s just spacing below the box. Using padding creates a box that is uneven on the bottom which is undesirable. So margin is actually the correct thing to use in this situation but actually I would say it’s not. You just take off the spacing altogether and then on your paragraphs, oh god they’re on your paragraphs too. My friends, my friends, you’ve got to switch these these should not this is a misuse of padding but now see we have basically no spacing so this one still has it here so get rid of the margin top get rid of the margin bottom see this has margin top by default this is why you don’t do this this has margin top by default but there’s nothing to space it away from so all the margin top on this heading does is create uneven padding in your container.

1:36:28
This card has uneven padding because the padding of the card is being added to the top margin of the heading and creating more spacing here than exists down here. Problems everywhere. This causes problems everywhere. And so what automatic CSS does is it gets rid of all of this, all this default stuff. Okay, and then what we do is we take this container. So you have a container, which is a flex container, and you say gap 0.5 M, something like that.

1:37:01
We need it to actually be bigger. So 1.2, let’s just do one M. There you go. Now it’s all spaced nice and evenly. Let me get rid of that ugly red box. Okay, so now we have even spacing, no shenanigans. I would not center this text right here. And in fact, this text needs to be grouped with this button because they belong together. And then you can space them out differently than everything else is spaced out.

1:37:27
But now in modern web design, like the idea of going element by element by element by element and adding margin bottom or margin top, I did a video a long time ago that actually you should use margin top instead of margin bottom. Go watch that video if you haven’t watched it. There’s a very very good reason to use margin top rather than margin bottom. But the idea of going element by element by element and adding margins to things, especially at the ID level. Now if you use utility classes, it’s at least a little better, but it’s still not great. You don’t need to do that anymore. Just get rid of all these default spacing and start using gaps.

1:38:07
And it’s way, way, way, way, way better. Way more scalable. Way more maintainable. It’s just, yeah, all around. I mean, this is breaking, obviously violating something we talk about all the time, which is don’t style stuff at the ID level. So that’s the first thing. But then the misuse of padding, the adding stuff to defaults, no, no, no.

1:38:27
We need that Kevin Hart no thing. You know what I’m gonna do? I’m gonna find it. Oh my gosh, I’m gonna find it. I’m gonna download the audio and it’s gonna be right here next to my womp womp button. Okay, it’s gonna be a button over here and it’s gonna be that. Mental note. Okay, let’s keep going down.

1:38:45
The paragraph thing is a good point. I started to include GB content, that’s Gutenberg content, to rich text, and it keeps H3, etc, paragraphs, and so on. What about if I write into a custom field which contains more text? Paragraph I usually use with dynamic fields, I must check. Okay, I can just answer that for you. So we go back to here. So if you’re going to insert dynamic text right here, you can do it either way.

1:39:13
You can do it either way, I think. Actually I think the best way is to do it with a text box. Yeah I think the best way to do it is with a text box, okay. And then you set this, this is the critical thing. You set this to a div. Then if you’re pulling from Gutenberg main body content, first of all, you would just use the post content module. Okay, so for that. This is a discussion about custom fields. If you’re pulling from Gutenberg, you use the post content element right here.

1:39:54
Then you’re done. There’s nothing else you need to think about. If you’re pulling from a WYSIWYG custom field, that’s really what I was thinking you were mentioning. We go here, you do your dynamic data, and then you pull it from a WYSIWYG field. I don’t think I have one by default. The mistake would be to put this as a p tag, thinking you need to make this a paragraph like you normally do on a text element, but now what you’ll have, the WYSIWYG already has p tags. So you’ll have p tags nested in other p tags, and you don’t want that. So you leave this in that situation as a div.

1:40:29
That’s your answer. Okay. Kevin, it’s not a link grabber, but just a link inside of a box. Okay, I think we already read that. It’s probably an affiliate link. Question, is it preferable to rename the IDs inside the main? I’m not sure what you are referring to. Every element in Bricks, settings, I think it’s under performance, add element ID and classes as needed. Check that box all day, every day, this needs to be on. Then in your output of your code you won’t have any IDs unless you style something at the ID level then it will attach an ID to it.

1:41:40
That’s the cleanest way to have your code output. So at that point, nothing needs IDs because nothing has an ID. IDs have a very limited use case in web design. So most of the times you don’t need them and they should not exist. Okay, let’s keep going on questions. It’s weird to have a clickable parent technique somewhere else on the site and not there. Yes, you’re correct.

1:42:04
It’s weird to make full cards clickable, but then cards that look just like them aren’t clickable for some reason. That would be a UX, that would be bad UX, I guess that’s the best way to say it, right? Because you’ve trained somebody that a card that looks like this is clickable, but then you have another card that looks like that that’s not clickable. So you’ve confused them and that’s bad UX.

1:42:33
Yes, Simone says there’s a great tutorial on YouTube about the clickable cards that we’ve done on this channel. I’ve done many, many, many tutorials on this channel now show clickable parent. Let’s see. Is it ever appropriate to have a centered heading and left aligned text? Yes Yes You would think maybe no But the answer is yes So, let’s see here Hmm This is a centered heading.

1:43:15
Okay. And we’ll just do center all. All right. So that’s nice and centered. And then we have, let’s do this website. Ipsum. Let’s grab this. Now you got to be careful with this. Okay. I’m not saying in all situations. It’s good Okay, there we go Oh dear Call count two. Okay Call gap large.

1:44:04
Okay. You can do something like this. I think this needs a little bit more. This maybe needs all the copy there. That doesn’t look bad, right? Is it the best way to do this? And that this is not, should not be an H3. So it would be something more like this. And then of course you could put a lead, you know, paragraph under there as well.

1:44:34
But this is kind of a common layout. So, but what’s helping this situation out is the existence of two columns of text. Now, could you make this be left aligned? Would this be an acceptable situation? Of course, of course. Would this, could you argue that this is even better? Sure, you could definitely argue that. But in that situation, you asked if it was ever okay. And I would say, yeah, it could be.

1:45:04
If all of your little intros to your sections are centered, you could keep this one centered and do this with your text. I don’t think that that’s a problem. I still think this could be a little bit more contained. And then we have center self, something like that, even. I don’t know, I think it’s fine. What I don’t think would be fine necessarily, I would not like this, I don’t think. No, I’m not digging that. See, the existence of the columns really kind of changes the conversation.

1:45:40
And if it’s this kind of situation, I don’t like it. Now, how would you fix this? Would you fix it by center aligning the text? Heck no, absolutely not. Never ever in a million years is that acceptable. Don’t ever do that Never just don’t do it. Don’t do it. So you fix it by not centering this and Then you you take off this width again. Okay, and now now we get into the conversation of Okay, let’s go into this this is really good this is really good So there’s a feature in automatic CSS that so many people have complained about.

1:46:25
They’ve so many people have complained about this feature. I’m gonna turn it on so you can see it. I’m gonna go to typography, I’m gonna go to text line lengths, okay? I’m gonna go to my base text line length and I’m gonna do 50 CH. I’ll put 50 CH on all these. Save. Okay, let’s go back to our page that we were working on. Kevin, it’s breaking my layouts.

1:46:53
Hold on, you don’t have to have, 50 is a little aggressive. Let’s go to 70. Okay. Let’s go refresh. Kevin, your settings breaking my layouts. It’s not, it’s not breaking your layouts, okay? You didn’t lay out the page correctly. And this setting is alerting you to that fact. It’s not breaking things, it’s showing you that things were already broken and that you should probably fix them.

1:47:28
Okay, so what is happening here? We can actually do that with our heading as well. But if you design this section, see this is actually good UX. This length text is proper UX design. I’m glad that we had the opportunity to talk about this because I’ve actually, I actually should make a dedicated video to it because we are gonna need a dedicated video to point people to on this topic.

1:47:54
This paragraph width is good UX for paragraphs, okay? Obviously it doesn’t look like this and this is what the person designed, but this design is wrong. Okay, objectively from a UX standpoint this design is wrong. This copy is way too wide. So I’m going to turn off this feature and this is what their working version would look like. All right, so let’s take these off. You don’t have to set all those. It’s only the M was controlling what we’re looking at here. This is what they designed. This is objectively wrong. The text is far too wide to read. This breaks good UX for typography.

1:48:40
So what we actually needed here was something like this, where we have a grid 2, and then you put some sort of visual element off to the right-hand side. And so we’re gonna gap this. Let’s just do like an L or something like that. And then we throw an image in here, right? I don’t know, some chick doing whale watching. It would be nice if it actually put the image in for me, wouldn’t it? Let’s refresh.

1:49:09
Oh, okay, there it is. So now what do we have? We have naturally readable text because of the inclusion of a visual in the section. This is how these sections are supposed to be done. You either, what you should have, here’s what I’m trying to say. What you should have are natural caps because of the design layout decisions that you’ve made. The structure of the containers that you’re using, natural caps on the length of lines of text.

1:49:46
You shouldn’t need a CSS cap, which is what automatic CSS gives you. So this is a CSS cap on the line length, 70ch. Now watch, nothing is going to happen. So I’m going to refresh. What have I broken? What has that setting broken? It didn’t break anything, right? This is still exactly the way you designed it. It only breaks it when you design it wrong.

1:50:14
Look, I take this out, I take off the grid, save, refresh. Well, it’d be nice if we refresh the correct thing. And you’re like, Kevin, it broke it. No, it didn’t break it. It’s letting you know, because it’s now floating in the center, that it was broken already when it was too big, when it was too wide, it was broken.

1:50:40
We fixed it for you. Now, the fact that you didn’t put it in a proper layout, that’s not my problem, right? You’ve got to put your stuff in a proper layout. If you want text that’s just like this with no visuals, then you need a column down the center of the page, just like we saw on this site over here. See, he did it right. This is why I didn’t comment on it. This is correct.

1:50:59
I said it was a little too narrow, but this is correct. If you just want text with no visuals, you gotta give people a narrower column. You can’t make their eye go all the way across the screen of football field, and then come back to read the next line. That’s not good UX. So this setting doesn’t break layouts. The layout wasn’t correct to start with, and I advocate for having this on, because it alerts you to the fact that you are using text that is too wide.

1:51:30
That’s all it is. It’s an alert that your text is too wide, and then it’s your job to go fix it, right? By putting it into a proper layout. That’s my rant on that. Okay, let’s go through comments. Question, do you think that you should take out the word? Okay, somebody already asked that, taking out the word tools from the buttons. And by the way, in the comments, if you disagree for some reason on this, tell me why, right?

1:51:54
I am happy to hear arguments from each side all day long. I love to hear it. Because here’s the thing, and people will say, oh, I don’t like Kevin, he’s got, he’s, you know, he’s too confident in his opinions, or what have you. Guys, I’ve debated this stuff for hours and hours and hours and hours, and I enjoy debating it, and I enjoy thinking about it. And many things that I talk about on here with confidence, I’ve actually changed my mind on in the past. And the reason I talk about them with confidence is because I already had your position at some point and I already had debates about it and somebody already convinced me and I put more thought into it and now I realize, okay, that wasn’t the right way.

1:52:35
Now this is the, this is the way. And so it’s just comes from hours and hours and hours of thinking about this stuff and of debating. Like that’s why debate is so important. That’s why it’s important for people to put out their opinions and be confident about their opinions to test them To test them against other ideas, right? Of course, I’m confident in the way that I do things now if you’re confident that there’s a better way You got to make the argument you’ve got it We’ve got to have the debate and of 100% I’ll listen to everything that you have to say and I’ll weigh everything that you’re saying against against The things that I’m thinking right and then I’ll come to to the conclusion that I come to now in some cases Well, actually a lot of cases in the stuff that we talked about There are two ways that just like just like here. Okay, let’s go. There’s a perfect example Some people will say oh you want to make a cutout blob All right. So let’s open this now. That’s not that’s the wrong page. That was one of them. Where’s the side-by-side?

1:53:40
Here we go. View, this is a side-by-side. Which way is best? Well, you can ignore these two down here. These two are exactly the same. These are just copies, okay? Because I was doing something else. These two, which way is best? Now you can see a clear difference in the shape of the blob, but we didn’t say what kind of blob are we trying to create, did we? So somebody might say, well, a mask is the best way to do it. Somebody might say, well, a border radius is the best way to do it. And what I would say is, there is no best way. These two are, both of these processes are 100% legitimate. This one has pros that this one doesn’t have. This one also has cons that this one doesn’t have and vice versa so in a situation like this which there are many situations like this where we say there is no best way there’s just pros and cons here and there’s pros and cons here and there’s a situation and you understand the context of the situation and you as the developer need to choose the method that best aligns with the context of the situation that’s it that’s the reality right there’s a lot of stuff like that. There is never a situation where you can say, no, the best practice is for the user to scan 32 inches of a monitor left to right to read paragraph text. That’s never the right answer. Now, if you can give me an example where that happens to be the right answer, I just don’t think there is one.

1:55:15
Don’t think there is one. So objectively, we have to limit the width of text. And so there is a yes and a no to this question. This question right here, there is not a yes and a no. There is not a black and a white. This, to me, there’s a black and a white, right? It’s just bad. It’s bad to read all the way across the screen. All right, so drop comments about this. Question, Kevin, can you share your onboarding process for new clients?

1:55:43
I know you use Basecamp, but how do you ask for the assets, client info from the client when you get a new client? There really is no onboarding process. We get them into Basecamp. We introduce them to Basecamp. We explain what the different areas are. And we effectively have like a saved kind of message that just has a list of things that we need right off the bat. And we ask them for them and we say, hey, there’s a docs and files section right here.

1:56:15
Please upload these at your earliest convenience, right? And then a lot of times, you know, they’ll upload it not into folders. They just kind of spill it out into the docs and files. But I have a project manager and the project manager just goes and cleans that up. You know, hey, just let’s make some folders, let’s put it in the right folders. Hey, this is how I made a folder, and you just kind of do it as you go.

1:56:33
But the thing about Basecamp, is Basecamp’s so phenomenally easy that there’s no learning curve for the client. When we use ClickUp, oh yeah, you need an onboarding process for ClickUp. You gotta train the client, and then of course they don’t ever use it, because they’re like, wow, this is a lot going on here. But Basecamp is so simple that it’s like they just log in and they kind of immediately know what to do they immediately know where the discussions take place they immediately understand what a docs and files section is they can see all the tasks on their project it’s so easy right so it’s just at that point you just communicate with them hey here’s what we need please upload it when you get a chance and then we go on from there.

1:57:14
Amir says, any best practice for creating blog pages, archive pages using Bricks? I mean, beyond just using the templates the right way, not really. So you go in and you’re gonna go to Bricks templates, add new. I would say best practice as far as naming convention goes, right? So the way that I do mine is blog single blog archive blog cat archive if you don’t want to use abbreviations category archive and blog search results Something like that. So everything starts with blog and then the each kind of template is is nested under that, right?

1:58:02
And then if you’re creating a search results template, you just need to make sure that you select the search results template type. If you’re creating an archive, you need to make sure that you select the archive template. If you’re selecting a single post, you need to select the single. So just kind of standard stuff like that. Obviously you need to structure the things right. So your cards need to be clickable parent if the whole thing is clickable and you need to have them in a list.

1:58:33
And there’s a lot of that kind of, but it’s the stuff that we talk about on every page. It’s not specific to those kinds of templates. Further on that topic of the tool section. So those tool categories be ACF taxonomies. Yeah. No, see what I would do here. That’s a really good question. Let me elevate this up. Oh, I already did.

1:58:58
Look at that. Okay. So let’s think about this. We have tools. We have blog posts. We have reviews. Tools, blog posts, reviews. I need a tools custom post type. I Already have a blog custom post type that’s posts and WordPress. That’s just what that is Then I need a reviews custom post type. Got it. So then I add a tool such as MailChimp I Add that as a tool then I have a review Post for MailChimp. That’s my MailChimp review.

1:59:38
Now, it would make sense if those were related to each other, because they are related to each other, right? So you set up a bidirectional relationship. Hey, if I write a review on a tool, I need to bidirectionally relate them to each other. Okay, that makes sense. All that we haven’t talked about now is taxonomy. I need a taxonomy for all of these categories. Now, I don’t call the taxonomy, what I should say is the word tools is not in the taxonomy.

2:00:07
So what do we call the taxonomy? I would just say categories. So in WordPress, we go up here, see, and this is a really good question because every site has a different answer. You have to look at the context of what’s going on on the website and then make the best possible decision. And now I’ve only looked at this, you asked this question 27 and a half seconds ago. So I’m just giving you my first initial, this is how I would probably do it, all right?

2:00:37
So under posts, you already have a default taxonomy. And so let’s take these out. So we have something like email marketing, design, productivity. Alright so we’ll just start with those. Oh God what tab are we in? Okay email marketing, ad, design, ad, productivity, productivity, ad. Okay there you go. Imagine the rest were done. Okay immediately I am able to write blog posts that fit nicely into all of these categories. But guess what I can also do? So I go to Metabox, post types, add new post type.

2:01:26
Here’s my tools, tool, tools. Got it, publish. Let’s go to my new post type, reviews, review, reviews, publish, bam. Okay, now I go to taxonomies. Actually, no, I don’t even need to do that. I open review, I open tool, taxonomies, taxonomies, category, category. Guess what? Everything shares the exact same taxonomy structure on this website. And when I create a loop, I say, hey, I wanna query based on these categories, but I wanna query this post type, and it’ll only give me reviews, or it’ll only give me tools, right?

2:02:18
And then I can set up the bi-directional relationship, which by the way is so easy. We just come in here and you say, new relationship, tools to reviews post tools post reviews metabox metabox this is the only part that confuses me so we’re relating tools and I think the title of this would be related reviews and I think the title this would be related tools we can go look here I always get them backwards but I’m dyslexic so All right, so let’s go to add new tool. Bam, okay. So I say, and where, oh, look at that, related reviews.

2:02:54
So I did it right. So it’s showing the related reviews right here. And then, so I say MailChimp, bam. And look at this over here. There are the categories right there. And so I don’t have, what I think the mistake would be is somebody thinking, well, I made a custom post type. I actually see this often. I made a custom post type, therefore I need to make a custom taxonomy to categorize this post type.

2:03:21
And they end up with a tools categories, reviews categories, blog posts categories. They have three taxonomies that all effectively have the same options. And so now when I wanna add a new category, number one, that’s just a nightmare. Number two, when I want to add a new category like email marketing, let’s say I forgot email marketing, so I add it to my post categories, but it’s not there in my tools categories and it’s not there in my reviews categories.

2:03:48
Suddenly we’re managing three different taxonomies when we only really have one taxonomy. That’s it. So just put everything under the same taxonomy and that’s the way that you do it is you go to your post type settings and you just tell them to share the same taxonomy. And done, end of the day, very easy. So hopefully that saves people from tremendous headaches because that will give you headaches and nightmares.

2:04:14
And it’s a pretty easy fix. All right, let’s see. Holy cow, how did you guess I’m using ClickUp? Exactly right, thanks for sharing your insight. Yeah, it’s very popular. It’s a very popular, and I used to recommend it to people. That was one of those things, you know, where there was a time where I was just doing the bad thing. I was doing the bad thing of recommending an overkill tool to people.

2:04:44
And I came to the conclusion after many, many headaches, and many just, gosh, this client will not use this tool many of those situations where I said, you know what I Click up is amazing. Like as a tool. It’s just the what they’ve built is Phenomenal, it’s phenomenal. But you know what wins in the end? simplicity Simplicity won in the end and so base camp the simplicity is is the value, the phenomenalness of the simplicity beats the phenomenalness of ClickUp’s features. Bottom line, end of story. And so yeah, that’s just how that decision was made.

2:05:28
So that’s an example of Kevin has changed his mind on something, changed my mind on a lot of things. And it’s just, it comes from, you know, you get tired of banging your head against a brick wall. And then when you have spent five years banging your head against a brick wall and you see the light and you find a better way, you kind of want to be confident about that better way because you don’t want to see other people smashing their head against a brick wall for the next five years. It’s just not a good feeling to just be sitting here watching somebody, you know, bash their head against the Divi brick wall for five more years or the element or brick wall for five more years, or the element or brick wall for five more years, or the beaver builder brick. Well, I just want to say, please just trust me and use bricks. Please just trust me and use a class first approach to your to your to your workflow. Right? You know, so I yeah, I’m confident when talking about those things, because I don’t like watching it. I don’t like watching the train wrecks, and all these people and answering all their questions. Well, how do I do this? Well, you know, like, oh, element or doesn’t let me do that. Well, right.

2:06:27
That’s why you should stop using Elementor. Right. So we just have these like circular conversations where people like insist on using this tool that’s not really the best tool. And then asking questions about how to do all these workarounds. This don’t need to work around. That’s kind of the answer. Just let’s do things right from the beginning. All right. All right, let’s see. Claudio says, I agree with all your opinions, Kevin, but aren’t we just smashing our heads against a wall? On mobile, the content lives in one column, and 60% or more users go mobile first.

2:07:04
I prefer desktop. No, I mean, you need to design for every user’s experience. That’s what a good website does, right? If I want to look at it on a desktop, because I love immersive desktop designs, right? But you just said, oh, the hell with it. Everybody sees it in a mobile view for the most part. And you just give me one column of like stacked content and that’s what I have to look at on desktop. Yeah, I’m like, eh, it’s not a great experience, right?

2:07:36
It was great for you as a developer, I’m sure. Less decisions to make, but for the user, it’s not a great experience. So yeah, I think that we have to design for all of the devices. Question, how is going frames for Figma? Really good question. I started to get all of the initial organization of how we’re going to approach it. It’s an add-on that’s going to be used by a smaller percentage of users.

2:08:12
So while it is very important, anytime there is a more important thing that affects a wider range of users, I’m going to put the attention there and then get back to the Figma thing as soon as I can. And that’s just been the case for the last couple months, is there’s just, there’s been far more pressing things. For example, it’s far more important that we get frames and automatic CSS working with the trashcan, you all know what I’m talking about, working with the trashcan than it is to get a Figma version of frames released.

2:08:50
So we’ve been working on getting integrated with the trashcan. And then we’ll come back to the Figma as soon as I possibly can. Now I will say this, if you are a Figma ninja, you can’t just be like, oh, I use Figma on the weekends. If you are a legitimate Figma ninja and you wanna send me an email and say, Kevin, I can jump in, I can take, I can own frames for Figma and I can make it happen.

2:09:20
And I can make it scalable and maintainable and I can make it amazing, because I’m a Figma ninja, I will absolutely entertain your email. So send me an email. Because I am not opposed to, right now I’m the bottleneck. I am the bottleneck on that side of the project. And I don’t like being the bottleneck on things. So if you are a ninja and you want to send me an email and say, hey, I can own that and I can do it, then I’m more than happy to hear you out and take a look.

2:09:53
All right, let’s see. Going to hit the hey, 2 a.m. where I am. Thanks a lot for the informative session. Yes, we are over time. I’m going to answer one more question and then we’re going to get out of here. All right, Joker says, what’s the best practice when styling a card made with frames, i.e. feature grid Sierra? Do we style feature card Sierra or create our own class and style it from there?

2:10:15
I’m gonna do a dedicated video on this. There is more than one answer, but there is a don’t do. There is a thing I would not recommend. So I’m gonna go to Pages, Add New, and we’ll just edit this with Bricks. Okay, I’m gonna go up here, Remote Templates. Let’s just do Features right here, and let’s just bring in Tango. Okay, oh, well, this site already had styled parts of Feature Section Tango, but not all of Feature Section Tango, so let’s not use tango This this anything can happen on this website right here, this is this is the Test anything and everything and do things on the fly on a whim website Let’s see How about slider section Bravo have we screwed up slider? Okay? We haven’t look at this look at this So you got these cards in here right these are actually using testimonial card echo.

2:11:15
Let’s see this on the front end. Oh, look at this, nice and beautiful. You just pop this in, then you can get to styling it. It’s gorgeous. Okay, so we take this card and we’re like, hmm, testimonial card echo. What I would highly recommend you don’t do is, I mean, this would just be straight up for, I don’t wanna see frames classes. Okay, like I guess that’s a valid argument if you wanna make it.

2:11:42
I build sites for clients and they have all these, you’re gonna see all these classes in here, right? So you do something like this, testimonial card. You’ve edited the name. Well, you now have to go to here and edit the name of this one. And keep in mind, just keep in mind, I’m saying this is what you should not do, right? So testimonial card, take this. I mean, this is tedious isn’t frame supposed to be it’s supposed to make your life faster right this is not fast and there isn’t the value you might think there is some people edit these names because they’re like well if I want to bring in this version of this frame again without it being styled well I can do that because I’ve edited the class.

2:12:25
No, you can’t. You can’t. That’s not how classes work in Bricks. The class name is superficial in Bricks, as it should be, by the way. The styling is actually attached to a hidden ID that you can’t see. Every class in the database has an ID and the styling is attached to the ID. The ID never changes.

2:12:46
The name of the class can change. It’s superficial, right? You’re giving a name to the ID more or less. What this allows you to do is edit class names on the fly. Because if styling stayed attached to the old name and you change it, well, your new thing would have no styling. That’s really how things work in CSS, right? If I put classes on an HTML element and then change the names of the classes, I would lose all the styling because the database says those styles are attached to a different named class.

2:13:18
So this is actually beneficial the way that Bricks does it, but you don’t get any value in just changing the names like this. In fact, I’ve just screwed this up. Now I don’t know where the FR testimonial cards are anymore. And unless I know what the naming convention was, I can’t even get back to it. So I would not recommend doing this. This is what I’ve seen people do, and I would not recommend doing it.

2:13:41
You can do a technique using a simple modifier class and that’s one thing that I’m going to demonstrate in here. You can use the CSS tab. There’s a certain way to do that. Of course, there’s obviously a way to do one-off styling at the ID level, but the modifier class is the way to go and you can do the modifier a couple different ways. So again, I’m gonna dedicate a video to this, but there is a very fast and scalable maintainable way to create custom designed elements while also maintaining the default design of the cards.

2:14:13
And I will say that Bricks is working on a class management system and they’re working on updates to this remote templating. So here’s what will happen. I talked to Thomas about this a little bit. We theorized what are our options. I don’t know what the timeline is. I can’t say for certain that this is being worked on. I don’t know any of that. But what we discussed is when you hit insert template it’s going to say do you want the version that you’ve already styled right the version you imported before which if you change the styles at those class names you’ll get the new style you’ll get the same exact style element added to the page, which by the way, is beneficial in itself.

2:14:54
This is pros and cons situation, right? But it’s also gonna say, or do you want a clean version? And you can just say, I want a clean version. And what it does probably, what will happen is it’ll just add a little extension to the class to make it unique and it’ll use a unique ID. And therefore it’ll be a completely unstyled version of that frame. And so this will give you the option when you insert, do you want one you’ve already styled or do you want a fresh clean version?

2:15:19
And then you just simply choose which one you want and you move on with your life and everybody is happy. Right? So I don’t know when that’s going to happen or if it’s going to happen, but that’s what we talked about. All right, that’s it for today. We’re over time. Thank you guys for being here. I hope you got value. Drop a comment below, hit like, make sure you’re subscribed to the channel. Every single Wednesday, I am here live at 11 a.m. Love you guys, I’m out, peace.