WDD LIVE 017 – Live Web Design Critiques Deep Dive

0:00:00
Yo, yo, yo, yo, yo, what is up? Web design for dommies. It is another Wednesday. It is 11 a.m. I am excited. I’m excited that we’re back on track with our regularly scheduled programming, you know, doing some deep dive web design critiques. I was on vacation. So we missed a week of that. And then I came back and I did the first look at breakdance.

0:00:25
So it’s been like, you know, two full weeks. I haven’t done, I’m itching, I’m itching to do some deep dive web design critiques. And I think we’ve got a couple of good sites this morning to talk about. First, everybody say hi when you arrive. We’re gonna give, we’re gonna give YouTube a little bit of time to get the stream out and collect everybody. And then we’re gonna dive in.

0:00:46
I was thinking about giving, I like to give sneak peeks on these Web Design for Dommies episodes. So we’ll talk about maybe something, something, something with regard to that in just a second. But I do want to just make sure, because I think there are a lot of new people. There’s a lot of new people coming to the stream, a lot of new people coming to the channel, which is fantastic. Page Building 101 has attracted a lot of new people, new eyeballs. And so let’s just talk, let’s clarify. What is Web Design for Dommies? You know, a lot of the new people have come in through the first impressions looks of these builders.

0:01:22
So they haven’t actually done a real Web Design for Dommies episode with us. And so let’s just clarify. Web design, and I’ve been getting some criticism as well. I wanna talk about the little bit of criticism here. Just some, we’re all on the same page, okay? But Web Design for Dommies is designed to be a live session where we deep dive critique real world websites, like websites that people submit to me for critique. They say, please critique this website.

0:01:53
And so I bring it up, and we don’t do a typical web design critique. A typical web design critique is, let’s look at like the surface level stuff, let’s just mainly talk about design really. There’s not a lot of people critiquing development, there’s not a lot of people critiquing UX, there’s not a lot of people critiquing copywriting, there’s not a lot of people critiquing SEO, there’s not a lot, I mean they are in these separate industries, but there really isn’t a lot of people doing it all.

0:02:22
Like looking at, like let’s pull up a website and let’s talk about all of the things, all of the ingredients to making it successful, what can be improved, what was done well and what can be improved, all the way down to the DOM, the DOM, which is why it’s called Web Design for Dommies. So one of the criticisms that I’ve heard is that, you know, Kevin, you’re calling people names. You’re making fun of people. Web Design for Dommies, saying that I’m calling people dummies. And that’s not, obviously not the case, right? We all know, and I’ve said this on many, many, many of the WDD streams, that being a dommy is a great thing.

0:03:01
Being a dommy is a fantastic thing. You want to be a dommy. We are dommies, right? A dommy is somebody who cares about the DOM, that cares about quality code output and best practices and scalability and maintainability. That’s what a dommy is. It’s not an insult. It’s a good thing. You want to be a dommy, right?

0:03:22
So that right there. And then they’ll say, oh yeah, and here’s more evidence. You call people chumps and you call people, come on. Like, I also say that you should get prison time for, you know, effing up spacing and stuff like that. Like, it’s tongue in cheek. Please, like, get a sense of humor, okay? If you don’t have a sense of humor, this is, it’s probably not the channel for you. So, yes.

0:03:45
I think we’re all on the same page. Most of us are on the same page. But that’s what we do here at WDD. We deep dive critique web designs. And then I break it up every now and then by doing first impressions of builders and things like that. Because there’s always, you know, new stuff happening in our industry and it’s good to do first impressions of this stuff and I kind of made the case of I mean if we’re going to talk about best practices for a website we should probably be talking about best practices of the tool you’re using to build the website seems fairly relevant and important so I think it makes perfect sense to do these builder first impressions and even we can go into other plug-in first impressions perhaps at some point but I’m starting with the builders because that’s the core of what people are using to build the websites that I’m Critiquing so the builders screwing you up Obviously there’s going to be issues with your website if you’re using a great builder Then then it’s up to you and you can still screw it up sure But hopefully over time we talk about this we do enough critiques We we you see the same issues and errors and things over and over and over again You learn to avoid them you learn to fix them and so on and so forth.

0:04:52
So that’s the whole goal. The whole goal of WDD is, yet again, like pretty much everything else on this channel, is to elevate everybody’s skills as much as possible, as fast as possible. This is just another way to do it. There you can do it with trainings, you can do it with these lives, you can do it a lot of different ways. So I’m just giving you different angles on content to help you absorb these concepts as fast as possible.

0:05:21
Okay, so do you wanna sneak peek? That’s the real question here. Let me pull up on the screen. I just wanna talk for a second. One of the things with frames that we promised when we first launched frames was it wasn’t just gonna be a rapid wire framing and pre-design tool. It wasn’t going to have all of these great, accessible, well-structured, organized, unstyled layouts. It was also going to be an accessible component library, because to me, the vision is I don’t want to rely on another third-party tool.

0:05:54
Here I am using a tool that allows me to wireframe, pre-develop, pre-design an entire website that should include the components that I need. So if I need a toggle, that should come from frames. If I need a carousel, a slider, that should come from frames. If I need a modal, that should come from frames. And another great thing about that is you guys know that the quality that goes into actual frames also goes into the components that we’re building for frames. So this is gonna have this accessible component library and I am really excited about how this is turning out.

0:06:32
I mean, if you haven’t been paying attention and following along, we started with zero components, obviously, and now we have a accordion and toggle that is about to be released into beta, a table of contents, that was the very first component that we created, a slider and a carousel is out. And these are, you know, feature packed components, right? This is a syncable slider. You can sync this with other sliders. It has its own control elements.

0:07:01
You can put the controls for the slider anywhere you want them to be. A lot, a lot, a lot of functionality baked in. Of course, everything is built to be accessible, follow best practices. We have a trigger element. We have the modal element tabs is coming soon We’ve got our menu builder coming soon a content switcher coming soon, but the library is it’s filling up It’s filling up as quickly as we can fill it But as I was going to say So the team sent me the accordion and toggle component I saw it sitting in base camp like an hour or two ago, and I just quickly added it to a page I haven’t you know taking a really hard look at it yet and I just quickly added it to a page.

0:07:40
I haven’t, you know, taken a really hard look at it yet, but I thought maybe we should look at it together. So the question is, do you guys want to see a little bit of a, well, let’s do this one. You guys can already see the table of contents, slider, carousels, all these are released already. So you could just be using them. If you’re a Frames user, you should be using these. But the accordion and toggle is the brand new one that we’re about to release.

0:08:03
And we can take a look maybe at what’s going on with that, but I’ll let the chat decide. Or if you don’t want to do that, we can jump right into the critiques. It’s up to you, 100% up to you. I will wait to see what the chat says. And I’m going to scroll through some of these comments as we do it. So we’ve got a lot of familiar faces here. Ooh, we’re up to 77 already.

0:08:21
This is fantastic. All right. Let’s see. I want to see if there’s any questions that have been asked yet. Better a dommy than a chump? Every day of the week, David. Every day of the week. Let me position this better down here. Okay. Whatever happened to the website critique checklist?

0:08:42
Hey, that’s a really good question. I think I created it. I probably just need to publish it. Yes. I’ll revisit that. I will revisit that. Ruben says he left Chumpville. That is fantastic. All right. I’ve also been thinking really heavily.

0:09:06
I think I’m going to recruit somebody. I’ve got to figure out the logistics of it. I’m 100% I think going to recruit somebody to just moderate the chat to like, because I don’t want to go, like I just feel, I feel like I’m wasting everybody’s time. Like I’m sitting here looking through comments. If I had a moderator, it’s just a, every time I’ve seen this happen, the moderator is with the person live.

0:09:26
They’re not like, it’s hard to get the logistics right of, all right, how’s the moderator going to be on the stream and not see the delay and also be able to feed me questions. But it would be a person that goes through and finds the best comments and questions and then when I just turn to the moderator, they’re just ready to go like rapid fire, you know, telling me what the questions are, reading the good comments, things like that.

0:09:47
I just got to figure out the logistics of like getting them on the stream with me. So, let’s see. Max says, Gary is such a fun thing for me. I was flip-flopping on him. If I like him, he made me laugh enough and sprinkled enough wisdom in to make me like him now. Okay, good. I eventually win people over I feel like you know. Let’s see it depends on you know I mean I put out a lot of stuff so you know you may see the best right away you may see something that’s right away but eventually eventually I think you’re going to be won over. Can we talk about the section tag? No reference of the inner container for sections.

0:10:21
Documentation even goes a step further to say sections should always have a heading with very few exceptions. Mozilla references the code like this, section H2, bunch of awesome content, section. You mean there’s no reference in the official documentation of sections. That’s because the section element is a section element. You could absolutely have a section without an inner container. It’s just a lot less efficient to build your website like that. Okay. Okay. Okay.

0:10:51
Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay.

0:10:59
Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay.

0:11:08
Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay.

0:11:16
Okay. Okay. Your site is getting critiqued today. So yes, we are gonna jump into, and I believe it’s first. I have two sites to do today, and I believe yours is first. I saw your name next to it, so. And I’m glad you’re here, ready to do this live. Moderator is a good idea, yes, okay. All right, well let’s do, let’s see if we can get a little sneak peek going.

0:11:36
Oh, before we do that, I just wanted to show you, I do have, if you find this page, this is not a public page, it’s not like in the navigation. I mean, it’s public, you could get to it, but it’s not in the navigation. But if you do, just know, and it’s me doing it right now, which is not the best case scenario. I’m gonna be hiring somebody to continue on, but I wanna establish a standard for our documentation.

0:11:54
That way it’s easy for someone to come in and just pick up and follow the standard. But there’s a lot of work to do here on documentation. But if you look at the modal, for example, you’ll get an example of the quality of documentation that I’m going for, like the standard of how the documentation should be. So, the modal is well documented, right? And this is what I want to expand to all of these components. I mean, come on, like this is, you know, I think it’s fairly detailed documentation. Of course, we talk about accessibility notes. There’s going to be FAQs for each specific component.

0:12:31
So a lot of work to do on the documentation, but this is kind of the standard, if you look at the modal of what the documentation will be for these components, which I think is important. But let’s go ahead and here’s the page that I was playing around with. All right, so keep in mind, this is unreleased. It’s going to be released as a beta I Got I added this like an hour ago. I this is all I’ve seen so far So I added these three right here and we will take a look at it. So if you see right here This is the element. Okay, you can add the element through the bricks panel. So if you go down under frames Here’s the frames components. There’s slider slider controls trigger. Here’s the accordion element right here So we open this up and we see that there are items inside of the accordion.

0:13:17
So if you want more items, I mean you could just duplicate. Now there’s more items in your accordion. That seems to be nice and good. So we’ll just look at this on the front end real quick. So right now you see the first item is expanded. That’s because there’s a control for that. So that’s up to you. You can choose to have it expanded, not expanded, whatever. Obviously, you know, nice smooth accordion transitions here. If we look at keyboard navigation, we’re going to see that they are keyboard navigatable. You can open them with the keyboard. This is all very important. Not all accordions behave like this as they, you know, they should behave like this, but not all accordions do.

0:13:54
And that’s why we’re building our own components, right? I want to have control over the components because I hate when components don’t do things the right way. And so these things are going to do things the right way. So let’s take a look at what some of our options are. As far as the items go, this is like any other item that you would add in Bricks. You are free to come in here and put BIM classes on it so that you can style it. They’re query loop compatible.

0:14:17
So if you wanted to loop these dynamically, you just get rid of all but one, and then you place your loop on the first one, and now you’ve got a loop, and all of this content can be dynamic so you can style them very easily. There is a main panel though for the frames accordion. Here’s showing or hiding all of them in the builder which is very helpful when you’re editing. It shows you everything expanded in the back end and then when you go to the front end it shows you obviously you know the front the real front end behavior. Alright so in the settings we have some default behavior for these.

0:14:52
There’s that little toggle for whether the first item should be opened or not. You can also say, hey I just want all these to be expanded by default and then you can expand specific items. So this is really cool and it says right here add class FR accordion item expanded to items that you want to expand by default. So instead of saying I want them all expanded or I want the first one expanded you can pick and choose which ones you want To have expanded using that little helper class We have scroll to hash capability. You can this is the closed previous item So I wanted I don’t think it makes sense to have like an accordion element and then a toggle element, right? So obviously, you know a toggle is like one item at a time, you can open all of them individually. One doesn’t close when another one opens.

0:15:41
It’s like, just make them the same freaking element. It’s the same basic functionality and just give people a toggle switch. Which behavior do they want? Do you want an accordion behavior or do you want a standard little toggle behavior? So that’s what that one does right there. Obviously you can animate this, control the duration of the animation. This one, I asked for this.

0:15:59
I was like, you know, what we have to have because this for some reason is so difficult when using other accordions but it’s like you know sometimes you don’t want them all touching each other so you want a gap between them like why can’t we just make it easy to add a gap between all the accordion elements it seems so simple right so I wanted to make sure that that gap was put in there hey oh look at this fact schema what you can add some fact schema with this. Yeah, apparently you can. All right, then we go into our heading styling. So you can style this whole header section of each. And this controls all of them at the same time.

0:16:35
And then we have our body styling. So you can come in here and control the styling of this body. You can do it from here, or you can do it with Vim classes. It’s like up to you, whatever you want to do. But this is the accordion element. And so we’re about to release this into beta for all frames users, which I think is good So, what do you what do you guys think? Hmm? Good good good enough so far These are very very very helpful little components here All right. Let’s move on that was just a little sneak peek just a little taste Okay, let’s go into our first critique shall we? Let me go ahead and find it. It’s on my other screen. Here we go. All right. We’re gonna bring this in. Oh gosh, that is the wrong…there we go. Okay, good.

0:17:23
All right. We’re starting out spicy today, my friends. Spicy. Oh, if you’re, if you’re probably, should probably, let me take this, take this away. If you’re at work right now, you may, this is, you may want to revisit this stream later, let’s say. But if you’re an agency owner freelancer, you work from home, you work wherever you want, whatever, you’re probably good to go. Can’t fire yourself, right? Okay, so I’m gonna put this up here. This is a boudoir website submitted by Ninja, who I believe, Ninja, correct me if I’m wrong, you are the photographer and you built the website yourself for your photography company.

0:18:02
I’m guessing that that is the scenario that we’re looking here. She should be in the in the chat, so we’ll hear from her in a minute. So the first thing that we do, Web Design for Dommies, every single time is the no scroll test. We don’t scroll around, we just, can we figure out what’s going on here, who this website serves, what kind of services that they have is the copy compelling in the hero section is the visuals compelling right off of the bat a lot of stuff to look at oh I also added I think you guys are going to really like this the ability to annotate the website here so I can do these little cool little I can do whatever I want oh okay I think that’s going to come in.

0:18:51
Because I always try to point at the screen with my actual hand. And I’m like, people can’t see that. It’s a screen recording. I don’t know what I’m doing. So it’s nice to be able now to have a little annotation tool. I can circle stuff. Like the very first thing that I’m going to do is I’m going to point out. I actually what I usually do is pop quiz people in the chat. Because those dommies that have been around for a while and I say, Dommies, what is the first thing that I am going to point out about our no scroll test on this website right here? Um, and by the way, if you’re, if you’re new here, the, I don’t coat these, um, reviews with a bunch of sugar and like, I just, I just tell, I just tell you what I think. I just tell it like it is. Um, and sometimes it’s a little bit rough and sometimes it’s not so rough.

0:19:40
And so it just it is what it is. So in the chat, I need to know what is the first thing that’s going to get pointed out right here. You should know this. If you have been to more than three of these episodes, you should know exactly what I’m going to say first about this. So I’m waiting in the chat. I know we got our little 10 second delay. Image is very uncompelling. Hmm. Says squinting yeti. It’s actually not the image. I wasn’t going to say anything about the image yet. It’s something much, much, much more important.

0:20:09
Much, much, much more obvious. Should be much more obvious. It’s something we talk about all the time. There you go. Ruben got it. See Ruben, Ruben. He said, he said he left Chumpville. That was one of his first comments when he came to the stream, he said, I have left Chumpville and there’s proof positive right there. There’s Suzanne, missed opportunity on Hero, repeats logo info.

0:20:35
Ruben said it, no need for a double logo. Redundant boudoir. Okay, see, we’re catching on. We’re seeing the same things over and over again and we understand. So this and this say the exact same thing. Look at all of this real estate that we have available to us and the information in this real estate is limited to this and this. Now I can see a peak of some stuff going on down here. Just a peak though and I’m not convinced that if I was on a smaller screen, it’s probably just the fact that I’m on a you know gigantic screen, but if I was on the smaller screen, I’m not convinced I would see that.

0:21:17
I mean, maybe I would, maybe I wouldn’t, but what I’m looking at is all of this real estate. Now I do get information in the photo itself, a little bit of information in the photo itself, but we’re wasting an opportunity here. I talk about these wasted opportunities. You’ve told the person something right here, there’s no reason to tell them again you know eight inches away from from that area where you told them the first time there’s no reason to tell them again what should be here is a nice big h1 heading a nice lead paragraph that sells the person on what you do and lets them know hey I’m in the right place and I I’m actually intrigued to keep reading you’ve got to get the person intrigued to keep reading down the page.

0:22:05
This is very explicit. We’re just saying, hey, boudoir, by Ninja. Boudoir, by Ninja. And so we’ve said it twice, and we haven’t given the person any other additional information. So it’s called a wasted opportunity here. So let’s get an H1 in here. Let’s get a little lead paragraph in here. Maybe a call to action, never hurts.

0:22:23
Put a little call to action button right here, always a good idea. Okay, so let’s go and talk about the, ooh, here’s the next thing that we need to talk about. This. So one of the things I’ve said before is, if you aren’t marketing to a very techie audience, use a traditional menu. This menu right here, even though I get it, it says menu, which is better than just having the hamburger icon okay fantastic but this whole deal see it’s like look look at that there’s actually look if I go off of this the wrong way to the left if I go straight down I’m good but if I go off to the left because I really want to get see I’m pointing at my freaking screen again which what’s great about this annotation tool is that it leaves the screen as I found it when I go to annotate which is see I can go anywhere now and that menu is going to stay open which is fantastic but look the shortest route to get to these links over here is this way okay you got me now watch what happens the minute my mouse tries to go that way I lose the menu it gone so I like this is what’s gonna happen to real users by the way. This is insanely frustrating to people so they have to go straight down to keep the menu activated then across and I don’t know. It’s almost like you got to train them to use your website at this point So these things always caught mega menus always everybody loves them everybody not everybody users don’t typically love them.

0:24:01
Web designers, for some reason, really love themselves a mega menu. I almost never use mega menus. They just always make navigation harder than it needs to be, and they give the user way too many options, typically. So we need to work on simplifying navigation and then making it blatant. Put blatant navigation right up here, standard links to click on.

0:24:22
Don’t give me opportunities to get lost, confused, frustrated, or anything else. You can have some simple drop downs, but those are very easy to interact with. And then I think what we’re gonna see here is that, what was this built on? Let’s see what we were built on. Oxygen, okay. So this is built on oxygen. So if I tab, I’m getting my buttons, okay, there I am there, there, there, there, there, there, can I go back?

0:24:50
Okay, skip, it’s got, oh, it’s got a skip link All right, that’s good. So then we get here. I can’t open and close the menu with my keyboard I Can navigate it through the items, but I can’t I can’t open it or close it. So the menu is not accessible and I think Okay, oh it forces me to open the menu oh, oh, okay All right Oh, okay. All right. So let’s say I’m on Boudoir, right? And I wanna skip the menu.

0:25:19
I can’t, can’t skip the menu. I could skip the whole header if I went to the skip link, but I cannot skip the menu. I’m forced to go through the entire menu every single time my keyboard goes near it. So that’s something that definitely needs to be improved. Okay, so let’s go back to this menu. Obviously, we’ve got an issue here with our social links. So we need to work on our spacing going on here. And then in our general menu, we’ve got home, what is boudoir photography preparations, my boudoir portfolio, the investment, and about me, but no, no contacts.

0:26:05
We need a, we need a contact page for sure. I feel like we’re missing a contact page. We’re going to come back to this in just a minute. Let me go, I can’t get rid of the menu. Okay, there we go. Man, those mega menus just love to get in the way and stay in the way, don’t they? Okay, so let’s talk about, we’re still on our no scroll test, the image in the background. Personally for me, I don’t see a problem, I don’t really see a problem with this image.

0:26:29
It’s possible that you could find stronger images to go here, but I would need to see the whole portfolio and then start choosing based on what’s available. But I didn’t have a problem with the photo right off of the bat. I think one thing I do have a problem with here is if you look, I mean, obviously, we’re marketing mostly to females, and, you know, there’s curves, right? But then we have squares. And I’m not so sure that that juxtaposition really fits well, it’s almost a little bit jarring, right? You want it to be feminine and curvy, but then it’s like, there’s these boxes everywhere. And worse than that, they’re white boxes that like, you know the contrast of this is pretty pretty jarring and so I think I would try making this a little bit you know get let’s get some softer rounded corners going on here maybe and then maybe try to find less of a dramatic contrast ratio between these areas that’s kind of my first thought and you guys can by the way you everybody in the chat that’s watching, you guys are participants in all of this.

0:27:40
So if you have thoughts, if you agree, disagree, you need to be dropping these comments in the chat. What I say has a certain level of value, what everybody else thinks can also have a certain level of value too. And we are trying to give value to this person who submitted their website for public critique. So, you know, we wanna hear more voices. So let me know what you guys think of this. What I also will say to improve this immediately is see this hard line right here? That kind of stands out to me. So I would try to dark fade this. Okay so you use an overlay to fade this especially because it’s a dark image it would work perfectly here. Fade this into the black backgrounds.

0:28:26
So you get rid of this hard edge and then that would actually allow you to take this whole area right here and move it up a little bit and create a little bit more overlap in here, which prioritizes this content a little bit more and kind of like associates this content with the hero section. I think that would be a good thing to do. Now you are going to have to rethink this because if you change this to an H1 with a lead paragraph, it might be too much to have a H1 right here, and then this big heading right here. And in fact, this might actually be your H1, it is.

0:29:00
But, whoa, what’s going on here? What is going on here? Okay, that, okay, you effectively have two H1s, right? Really, this should be the h1 and then you know this can be a that probably should be like a paragraph tag or something I’m also seeing there’s a big juxtaposition between text sizes here like this feels very very small to me I’m thinking that your your body paragraphs probably need to be something around like in here. And then you also have an issue here with your paragraph. Did you line break this?

0:29:45
Ah! Oh no, no, no, no, no, no, no, no. Okay, don’t line break, no line breaks, no line breaks, please. Paragraphs, paragraphs are good, right? Line breaks, not so great. Because you see what happened, it created this like disjointed paragraph. When I refresh, you’ll probably see it again. I think also it’s your text is feeling a little bit cramped, so it could definitely benefit from a little bit of, Oh, you guys can’t see what I’m doing. Can you?

0:30:16
I always forget that my big head down in the right hand corner is blocking some stuff that I do. Okay. So that was this. I just changed the font size to 1.2 rim And then if we do a line height more in like the 1.8 ish area So like give give that that text some additional breathing room And then I also think the juxtaposition between this being centered and this being left aligned is also a bit of a problem here This isn’t a ton of text right so you could probably Get away with with centering it, though I would make the case that it’s probably a little too wordy and you could drop this down to a single paragraph, then it would look even better centered.

0:30:58
My general rule of thumb is, if there’s more than one paragraph, I’m trying not to center the text. If I can get it to one paragraph, then I’ll center the text. So that’s kind of the general rule I follow. I mean, this isn’t awful, but you can see now it looks in better alignment, right? Because you have this centered, it makes sense to have this centered. Yeah, people in the chat can talk about what they think as well.

0:31:22
Okay, aside from those little adjustments, the next big thing that I see is related to this right here. And I want you to see that, well, let me leave that annotation up. Doesn’t that grab your attention? I know the background color obviously is not great, but there’s a limit to my annotation tools. I’m not an annotation expert yet. I wish I could just make a filled pink box, but I don’t know what the shortcut is for that yet. But look, I mean, look how this stands out on the page.

0:31:58
You want your calls to action to call people to action, which means you have to get their attention. And they should be very, very, very obvious. These CTAs kind of blend in like I’m looking at black here, black here, you got black borders on your on your button here. And then I’m not really digging this. These shadows need a little bit of work. Oh, yeah. And it gets even worse right here. Right, you guys see this, this shadow?

0:32:29
This is trending towards 90s shadow territory, 90s box shadow territory. We could really, again, and it’s the, like the collision of what my brain expects and what I’m actually experiencing. Again, curvy, soft, that kind of thing. I’m getting hard boxes, hard shadows. We gotta get softer. We can get softer with all of these things. Get softer with the shadows.

0:32:54
Get softer with the angles. And I think that that can dramatically improve things. I’m not digging this background here. It’s fairly distracting. And it seems to just be completely different from like every other, there it is again. It just is kind of a completely different style from everything else that’s going on on the, and, and if you think about it, I’ve said this many times in the past, avoid clip art at all costs. And I know this isn’t necessarily clip art, but it gives a little bit of a clip art vibe. Um, so I think that’s got to go, or you can put an overlay on it and blend it and make it very faint back there, that’s an option as well.

0:33:41
Something needs to be done with this background in this section. And also it’s influencing the, look at how it’s clashing with the text, right? Do you see this heading? Oh no, that’s, yeah, that’s a real heading. Okay, I thought it was an image for a second. You see how this text is clashing with the lines in the background, making it kind of very difficult to read, it’s a little bit distracting. And then you’ve got these gray, again, hard boxes, gray, drabby kind of color. Look at this pink, though.

0:34:10
This pink is almost an exact match for my annotation pink. If your buttons were this pink color, I mean, that immediately would just add more life and modernism to this page. And then give them rounded corners, make them soft, right? We can improve things for sure. I’m talking a lot about the UI we’re going to talk about the copy in just a second but there’s a lot of UI stuff that’s just kind of standing out to me okay so let’s go let’s talk about how to fix this section right here first of all I don’t think that this image is one of your stronger images I would get rid of this image and replace it find a better image to go here and then once again here we’re having alignment issues with our content we have a centered heading left align text that’s way over here okay so there’s a big jump that are that’s the wrong tool there’s a big jump that our eye has to make to get from our heading to over here and then it has to come back even further over right there’s no alignment here, right?

0:35:15
With your content. Our content really is over here, but some of it’s then over here, and then another part of it is over here. This is just not like, it’s not very pleasing. Then we have the, it’s compounded by the fact that our text is way too small, doesn’t have enough breathing room. So let’s just fix this real quick. And you guys can tell me, here’s your before, take your before, snapshot in your brain, and then let’s make an after. Let’s see if we can make an after real quick. So I am going to come over here. Let’s get rid of that align items to the center. That’s already an improvement. Let’s inspect this div right here. Give it maybe a font size of that line height coming in there.

0:36:03
I also want to give it, it’s too wide, right? Let me put this back down here. Sorry, you might not see some of the things that I write, but I have to be able to see the screen the way that it was. That text is way too long side to side. So we’ve talked about this before, right? This way too wide. So what I’m gonna do is put a max width of 50 characters. That’s too narrow.

0:36:27
So we’re gonna go to 60 characters and we’re gonna go to, that’s actually probably about where I would want it. And then if we came in here and did the same thing here, this is not the best scalability way to do it, but it’s gonna work for what our needs are. Oh, I really hate the fact that that’s breaking that and creating that little orphan So we can put a non breaking space in there I don’t know if I can just add it now It’s it won’t let me just add it in the DOM But if you add that in the builder that non breaking space, then it’ll keep those two last words together Okay, I will put just because it wouldn’t let me do that I will put a little, uh, be, now, oh my God.

0:37:15
It’s not letting me actually write code in here. Okay. Whatever. You guys know what I mean? This, your needs to be on this line with photo shoot, but now I’m not going to style this button up. Cause that would be, that would take, that would take a bit more time. Um, but look at this. I mean, come on, like, right. So I, I’m scrolling down. I can easily see and read this content. Now it’s not stretching all the way across this section, it’s got more breathing room, the text is bigger, it all looks like it’s in better alignment, right?

0:37:46
So now the eye is only having to deal with this right here. And the eye has to end right here. It’s a very nice, neat column for people to digest this content in. So, you know, just simple, simple, simple adjustments that we can make. Background video here, I am very curious. Let me refresh this page. Let’s go to pagespeed.web.dev. Anytime I see like background images or background videos and all this other stuff going on, it makes me very curious to see how the performance is stacking up on the website.

0:38:23
I fight at all costs with clients about putting full screen videos in the background. I understand that it was at one time, you know, a really like, ooh, that’s so cool, right? It has this thing, this video in the background, but like, you know, it doesn’t do a ton for the visitor. It’s not like they’re going to sit here and really watch it. When you have videos that they can actually watch and like, you know, control and hear volume of and things like that then yes they’re gonna interact with these videos but if you look at you can look at overlays of how people are using websites and you just see it’s you know people aren’t just standing there studying the background video it might catch their attention for a minute but it’s not doing a lot beyond that so a little bit of a performance issue on both mobile and desktop here you got quite a bit of layout shift going on here, which needs to be investigated.

0:39:19
Ooh, even more on desktop. So definitely be investigating that. Okay. All right. Oh, see, there was the before, right? Doesn’t that look a little not so as good as what we quickly adjusted in that section? All right. So we’re gonna come down. We already talked about this.

0:39:39
Okay, let’s just look at some, we can look at a little SEO maybe, and we’ll look at a little copywriting, and then I think we’ll be pretty much done here. We can look at maybe a little bit of the gallery, because I do, you know, products, right, are important. And if you are talking about the conversion rate of a website, how the product or service is represented visually is a very very important thing. So in this case we have a photographer and so it might be a lot of people might be thinking Kevin they didn’t ask you to critique the photography but the photography quality is going to impact whether this website works or not and people have to know that and I’ll give you a perfect real real world story to illustrate this.

0:40:27
I was hired by, and I don’t like to do e-commerce sites, I really dislike them, but I have a guy who refers me a ton of business. And he had a personal friend and he was investing in this e-com. And so he basically said, Kevin, I know you don’t do e-commerce sites, but do me a solid, right? Do me a favor and get this e-commerce website off the ground for us, and then we’ll find somebody to take it over.

0:40:56
And so I’m like, all right, fine, I’ll do it. And we start putting it together, and we get the design is all, you know, it’s fantastic. It goes through all of our normal processes. And then, because what we’re told, right, is there’s a photo shoot planned. It’s a clothing line, okay, and there’s a photo shoot planned. And they’re going to get us all the photos and then we’re going to plug them in. Well, it come to turn out, you know, the photo shoot was the most budget photo shoot you could possibly ever imagine. It was like, I’m pretty sure they went to Craigslist and was like, does anybody have a camera?

0:41:30
Can you come take photos of this, these clothes on some Craigslist models? models and and so what we got back I just had to sit down exactly what like what we’re doing here and I did you know when it’s a client I will get out my little jar of sugar and I will sprinkle I will sprinkle some sugar on it and I will say okay let’s um so about these photos right let’s have a conversation about the photos and I’d explain to them that these aren’t going to sell a damn thing. In fact, everybody that comes here is immediately going to leave. It doesn’t matter how good the website is, how good the checkout flow is, nothing else that we do here matters because you’ve poorly represented the product.

0:42:16
And so this is never going to work. That’s a conversation you sometimes have to have. So we will dive in in just a second and take a look at the photos here, right? Okay, just a little anecdotal story there. Oh, I did wanna point out, just I’m seeing it now again, and I see these kinds of things, sorry, wrong tool, all the time, you know, it’s this little stuff, little stuff, right?

0:42:42
What’s wrong with those two areas right there? I’m getting a big gap up here, small gap down here, just is it’s looking off balance. And there’s gonna be a lot of those little things. You see it yet again. You’ve got to be very careful with this kind of stuff. Look at this gap. Look at the gap that doesn’t exist hardly over there. And that’s why this was fixed with, you know, the alignment stuff that I did and max width on these elements.

0:43:10
But these are real issues, right? Throwing things off balance. It just kind of creates that, like almost a discomfort for the visitor. It’s like, ah, Ooh, I don’t know. Something feels off and not everybody can spot it. Like they just know it feels off a little bit, right?

0:43:25
And I feel that professional. Okay. Uh, what was I about to do? Um, Oh, we were going to talk about copy. There’s no copy here. So we’re going to scroll down. Here’s the copy.

0:43:33
And this is the main copy. This is the first copy. I’m not gonna do all the copy. This is the first copy that people interact with. So let’s read it. Live this wonderful and liberating experience of a boudoir photo shoot now. I want you to feel like a goddess and fall in love with yourself with every image we take. My mission is to let every woman I photograph see themselves in the best light by taking this empowering journey of boudoir photography with me. Every woman is amazing, beautiful and unique and therefore your boudoir experience will be as unique as you are.

0:44:07
Okay, it’s a little wordy. It can definitely be cleaned up. It can definitely be simplified a little bit and this is if you want straightforward sales copy. But now I’m putting my my marketing sales hat on and what I would kind of advise here is, you could go with standard copy, you could go with standard copy, but we need to think for a minute about audience. We need to think for a minute about the mindset. You really need a visitor to this website to be in in order to raise their hands and say, this is something that I want to do.

0:44:46
And I’ve never done marketing for a boudoir photography company before, but just off the top of my head, something that I would say, let’s experiment with this. Because guys, you know, A-B testing is a real thing, right? And so you can say, here’s version A of our homepage with standard copy, right? Copy with, you know, it’s right down the middle. And then here’s our version of the website with experimental copy. And so everything else is gonna be the same, photos are gonna be the same, buttons, calls to action, everything else is gonna be the same, but what we’re going to split test is a narrative.

0:45:25
And what I would just want to test, it just pops into my brain right off the bat, and I’ve never read any of these, and I know some of them can get fairly steamy, let’s say, but if you wrote these, like, you know, those 50 Shades of Grey type books that women read, like I said, I haven’t read them. So I don’t really know what is what is in them. But I know that there’s like, for example, I like Russ. Anybody know Russ? Russ is a great artist. OK. Somebody asked me the other day, you know, what kind of hip hop do you like? Well, Russ is one of the art. I mean, he’s not my favorite artist, but I, you know, I F with Russ from time to time. And Russ released a song recently.

0:46:05
And he released it and he included, apparently on TikTok, there’s this section of TikTok, this segment of TikTok called BookTok. And BookTok is all women who read these kinds of books, right? And they just, they fell in love with Russ and, you know, they helped influence the direction of his latest song and all of this. But I know that this is a thing, right? And so if you want to speak to women for this kind of thing, you may want to experiment with that type of copy. Um, I, and I, and some clients would be like, Ooh, I’m not brave enough to do that. Or, you know, I don’t, I don’t know if that’s appropriate or would work. I mean, I don’t, I don’t either. I don’t either, but it just popped into my mind that I would split test it because, uh, it might, it might connect way better than standard boudoir photography copy.

0:46:51
And if it does, everybody that’s your competition is basically done, right? Because people are obviously, you know, they’re probably not choosing the first boudoir photographer they come across. So remember, they’re doing their research and they’re like, here’s you, here’s this other person I found, here’s this other person I found. And these other three, let’s say there’s five sites.

0:47:11
There’s your site, there’s four competitors. Four competitors all say live this wonderful and liberating experience of a boudoir photo shoot now and that’s the kind of copy that they all have on their website and then here you are with this book talk level copy right and and you know it can make a big difference. So I don’t know this is an idea might want to run a little split test kind of action there. Alright let’s just look at our portfolio, quality of photography, and move on. What time is it? How are we doing on time? Oh, perfect.

0:47:44
All right, where are we? Portfolio, okay. So again, not safe for work, right? But we just want to get an idea of kind of quality of photography. Guys, by the way, you probably know, I’ve said this many times, I’ve done photography for a very long time. So I’m not just coming in here like, I don’t know jack shit about photography, but here’s my opinion.

0:48:07
I know what good photography is, and I’ve looked at portfolios before, and judged portfolios before, and so there’s relevance in what I’m about to say. Okay, let’s just get a general, a generalized feeling. First of all, I think this would benefit maybe from some organization here, like some facets. Like if you could categorize some of these a little bit. And I’d have to spend more time like analyzing like your style and your clients and things like that to really get a feel for what those categories could possibly be.

0:48:47
But I think, you know, just having somebody scroll down the page is not the best. Actually now what I’m seeing is, the reason it’s probably not categorized is there’s just not a ton of work. It’s not a big portfolio. So as this grows, you may want to start thinking about some categorization. So the first thing I’ll say is, you have a lot of black and white, you have some color.

0:49:18
The challenge, the first challenge that I’m finding, it’s not bad photography, it’s not bad photography. But the challenge that I’m finding is, I’m having a tough time identifying the core style. Like, what is your style? I see that, okay, and this is, well, this is made harder by the fact that these are all low contrast until you hover. Okay, I’m just now noticing that. But what I was gonna say is, you know, it appears like you’ve got this kind of like, you know, kind of a, it’s like a slight low contrast film on a lot of these.

0:49:51
And it’s hard to say because until I hover, then I can actually kind of see, I guess, the real version. But I will say this style right here, this very bright, vibrant, obviously stands out. Yeah? Like it doesn’t seem to match anything else that’s going on here. So I’m just trying to like really, really, really good photographers, when you look at a photo that they’ve taken, you’re like that’s that photographer. I know they have a style in the way that they shoot and the way that they edit. And it feels like, look at this, this isn’t even a boudoir photo, right?

0:50:31
This is just kind of a, oh, here’s a photo that I took that I like and you slapped it in the portfolio. This clearly does not fit with anything else that’s going on here. It’s probably, it could be part of a boudoir shoot, right? But the images you’re choosing to show, it does not fit within the context of all of these other ones, right? This is not a strong photo, like the lighting is not strong in this photo.

0:50:59
It looks a little bit grainy, it looks like a very high ISO photo. Here’s another one, this is like headshots, right? These are not, none of these are headshots. This is more like a headshot style photo. This is why I say it needs to be a little bit more categorized and organized, right? And I think, do you have a blog? Blog, blog, okay, no blog. What I would actually show is sets.

0:51:28
I would think about showing these photos in sets. Take this photo as an example. You probably did a whole set with her. So I would write a blog article and I would share photos from the entire set so they see, you’re gonna get these kinds of photos, you’re gonna get these kind of photos, you’re gonna get these kind of photos. We do a whole thing, there’s a whole thing involved. And right, so if you give people a peek into the set, and I know you do that a little bit on the homepage with your videos, like these.

0:51:56
These probably, I haven’t watched them, but I imagine that this is what this does. It tells the story of the shoot that you did, but I think you could do that with your portfolio as well. And so, yeah, even like organizing these into sets might be really good. But right off the bat, what I’ll say is, you know, it’s not bad photography. The photography can be improved. The lighting can be improved, but obviously every photographer can always improve. What I think would be best for you right now is to really start to nail down and define your style. Because it’s not jumping out at me as to what that style is. Like this photo right here is a completely different photographer than this photo right here.

0:52:38
It seems, it feels. So that would be the main feedback. But I think the way that this portfolio is, you can get clients. You can absolutely get clients. So there’s nothing stopping you from getting clients here Let me give you an example this photo is Similar to this photo that this would be like I can believe that the same photographer took those two photos But then this it just jumps out as like nothing is similar about about these things Okay, I don’t know. I don’t know if I’m explaining it well, but that’s the general feeling that I’m getting. But in terms of conversions on this website you can absolutely get conversions with that portfolio, you can get clients, it’s all good, there’s nothing stopping you. I think I pointed out enough stuff for you to think about and consider and potentially bake in to this website and so what I’m going to do is I’m going to officially close this out, we’re going to go to the chat, we’re going to see what everybody’s saying and then we’re going to bring up website number two, and we are going to deep dive website number two.

0:53:41
Okay, let’s go up. Question, is it only me or does the Kanye West soundbite sound like Homer Simpson? Hey. Oh no, no, no. I don’t know, I don’t know. It definitely sounds like Kevin Hart to me. It is Kevin, I mean, I took it straight from Kevin Hart’s video, so. Okay, is the font small or just the zoom level?

0:54:02
No, the font was small. The font was small. Button is ugly like an old Windows button. Yes. Who is the customer? So far I don’t know who the ideal customer is. All right, good question, Ruben. Let me elevate that onto the screen. I mean, Ninja can say who is the main customer. I would imagine that it’s women hiring the photographer for themselves.

0:54:26
That would, I would say that’s probably, hey, maybe I’ll throw out a percentage. Is that what, Ninja, is that 70%? Is it 80%? That’s what I would imagine. That’s what my guess would be. Do you use Figma or Adobe XD before doing your designs? I don’t design. I am not the designer for our agency. I do the UX, I do the wireframing, and I use frames to do the wireframing now.

0:54:53
I used to use Figma to do the wireframing, now I use frames, and then I send that off to our designer, and they send me back a design in Figma typically. That’s how our process works. I’m on the fence with getting oxygen. Well, you need to look at BRICS and oxygen, and look at the pros and cons, watch my videos, and then you’ll be able to make your decision. Question, can you please increase the size of your cursor? Apple menu, system, accessibility. Yeah, I’ll do that for next time. Let’s see, classy black-white site, then along comes Kevin with his pink sharpie. Hey, the pink was a color on their site, okay, and they need a little, they need a, I think that website needs a little pink.

0:55:38
Just saying, I think it needs a little pink. It’s some good comments. Would it be better if all the photos were black and white with no color photos? I don’t think so. I, well, there’s an example. I think you should have a black and white gallery and then a color gallery, or at least be able to sort them, filter them by show me black and white, show me color.

0:55:58
Because some clients only like color. I’ll tell you that right now. They only like color photos. Some clients are down with the black and white. And so if you get a visitor to the website and that visitor is like, I don’t like black and white photos, half this portfolio is black and white. I guess this isn’t my photographer, right? If you suddenly can filter and all they can look at now is color photos, hey, now their experience is much better and they’re much more likely to stick around and much more likely to consider you. So like I said, I think the portfolio always benefits from some sort of categorization, filter options, et cetera.

0:56:34
Okay. I love this. You can edit code, right click, edit as HTML. It’s like Chrome, dog, I’m in the DOM. I’m in the HTML right now. Let me write it. Why do I edit the HTML as HTML? Okay, I get it, all right, all right. We don’t need to knock, we don’t need to knock the Chrome developers now.

0:56:54
Let’s see, is it responsive? That’s the thing. Some people are like, you forgot to look at this, you forgot to look at this, you forgot to look at this. So what I do is I look at the most important factors first. What are the most critical things stopping this website from getting conversions? And if I can make it through those, then I’ll keep going down the list to other stuff. Right? But we look at the most critical things first, because that’s the most value to the person that’s getting the critique. What is the best way to prevent CLS content layout shift?

0:57:32
So, it really depends on the website. It depends on what techniques you’ve used to do specific things But I will say that one of the biggest factors of layout shift is images that don’t have dimensions so in an image has to place hold for itself and If you give the image a height attribute, for example, as soon as the HTML starts loading Before CSS is loaded because remember CSS is often Informing what size the image would should be the aspect ratio of the image so on and so forth But before that even starts to happen the HTML can set a height attribute of that element And it’s basically letting the browser know you need to reserve this much height for this image and so it’ll reserve that height if that’s not there the image will load as a more or less as a dimensionless object.

0:58:30
And then as soon as the CSS instructions or wherever the sizing of the image is placed pops into the flow, that element pops in with its dimensions and shifts all of the other content down. And that’s where you get these content layout shifts from. You can also get them with things like some people will put those banner ads on their site. The banner ad doesn’t have a placeholder size and it loads last typically because it’s coming in an iframe or JavaScript or something else.

0:58:59
And so the minute it loads, well there was nothing there a minute ago, now there’s something there, the whole page shifts down. There’s a lot of things that cause layout shift. But those are some of the really, really common ones that we see all the time. Okay, do you understand what you mean re-videos? Do you find especially for craft clients? Okay, I think you were talking about the background videos. Yep, yep, okay. Good, good, good, good, good. All right.

0:59:29
All right, Ninja is liking the critique. And she said, yes, she’s new, so her portfolio will grow. That’s good. All right. For some reason, if I scroll the page fast, some of the images and text will shake. Does anybody else see this? Okay. Is ACSS, okay, we’re not answering questions about ACSS right now.

0:59:49
We can get to them at the end, but we’re trying to stick to our critiques right now. What do you think about using a masonry grid in general? Is it a good idea to throw all pictures in different aspect ratios into a grid wall? I think for photography, because you want to avoid cropping photos a lot of times, that a masonry grid does work really well for photography. Okay. I’ve never heard of this sort of photography, but I guess I’m just sheltered.

1:00:20
Yeah, I guess you are sheltered, Ruben. It’s a very popular niche of photography for sure. And you can make bank doing it. It’s a really can be a very very lucrative niche of photography. Alright I think I read enough comments now we’re bringing on website number two. Without further delay this one is in Spanish so we are going to translate it. I want to make sure everybody is aware of the caveats of translating a website. If it’s news to you, Google translate isn’t always that great. And then, you know, translating language to language, it’s not the same vibe of the copy. So whenever I have a Spanish or German, whatever we’re translating from, it doesn’t really matter.

1:01:07
Website. I’ll kind of look at the copy a little bit to see the gist of what they were going for, but I’m not gonna do a hard focus on copy because it’s not fair, because it’s not the words that the person wrote. It’s translated and by a automatic trans, it’s just not really fair to the person who wrote the copy. Okay, so what we’ll look at a lot is UI, UX. Let’s just, let’s do our no scroll test. So we have, Aliviato, Aliviato I’m guessing is the name of the company.

1:01:40
We’ve got a basic navigation up top. We have a button with no hover style. Gotta get that fixed. Let’s get a hover style on that button. Let’s read our first thing here, focus on your work. We work on your taxes, I guess it’s supposed to say. So it’s a accounting firm, bookkeeping firm, I don’t know. Whether you’re a full-time professional, work from home for tech companies abroad, that’s interesting, or just don’t want to deal with the tax monster, we’ve got you covered.

1:02:11
So whether you’re a full-time professional, work from home for tech companies abroad. Okay. So it feels to me like you’re trying to sneak you’re like sneak it’s like a sneak attack you’re giving me the the niche focus sneak attack why is there a niche focus sneak attack in this copy that’s what I’m trying to figure out right now because if you want to do accounting for tech companies and yeah okay well I’m so confused you’re targeting somebody that works from home for a tech company. So you’re not targeting the tech company itself like you’re gonna do the taxes for the tech company. You’re talking of what is this an employee of a tech company you’re doing taxes I’m so this is very confusing maybe it’s mistranslated but regardless let’s just say you want to target tech companies for your accounting firm. Well my guy you got a target in your heading right here this is the most important thing on the page. So this niche attack needs to be in this h1 heading right here Not in the second sentence of your lead paragraph. Okay, so we can move that focusing up there Let’s see what’s going on here. Oh gosh All right, you guys see the problem here Where is your H1?

1:03:35
Where has it gone? We need search and rescue. Put the H1 tag on the side of a milk carton because I can’t find it. We are missing the most important H tag on the page. All right. That needs to be an H1 right there. All right, let’s improve this right here. One thing I’m looking at right off the bat is, remember, didn’t I say this happens over and over and over and over again?

1:04:02
Well, one, you see an issue, let’s just do this first. There’s a lot of issues here. Those two things are not alike. And doesn’t it feel, hmm, there’s something off. Doesn’t it feel like that? Don’t you get that vibe just looking at this section? You probably should. I get the vibe immediately that there’s something off. You know what I also get the vibe of something being off? Let’s try this. That is not the same as this.

1:04:38
Now does it have to be and the reason being is this happens all the time what my guess will be is there is a border on there’s a white background on this image that we cannot see. That’s going to be my guess. So I’m going to inspect this here. There’s a figure tag. Here’s the actual image itself. Okay, no, okay, so it is a it is a PNG, but look at that. You see the checkerboard above the image? There’s a baked in gap in in a hard coded into this image that you cannot get rid of. And that’s a problem. So that needs to be cropped at the exact top of this frame right here, so that you’re not creating extra space where you don’t actually want it.

1:05:22
This image, it forces alignment issues by itself. So that just is a cropping issue with regard to the image. But immediately, we just feel like things are out of alignment, right? We’ve got the content ending here, but we’ve got the image ending way down here. So it starts here. There’s this other line right through here, created by the top of the laptop. And then there’s this image here where we’re squeezing this.

1:05:51
Then you’ve got all of this space, not equal to all of this space. Man, there’s just a lot going on here. So here’s the thing. Oh, and guys, by the way, if you’re new to Web Design for Dom, you’re like is mine gonna get reviewed? I really do, I do two. I do two sites, that’s it, per episode. Now yours may get done on the next one, but we deep dive, right, we deep dive.

1:06:15
So we’re not just gonna skim through these. There’s a lot to talk about in each website, and it’s all of value, and we give the person tremendous value, so when it is your turn, you know you’re gonna get tremendous value, right? But we don’t do a lot of sites. We’re not just bang, bang, it’s not rapid fire, okay? All right, so you guys see all of the issues there. So how can we fix these issues? And I think this is gonna be one of those examples that actually calls for me to bring up a local install and talk about how this gets done.

1:06:42
Because what I’m already seeing that I’m gonna suggest is going to create another issue that has to be overcome and I want to show you how you might want to approach overcoming this. But here’s what I would do first let’s figure out what this is built in. All right it’s bricks and oh it’s ACSS okay then it also may be frames. And so what you’re going to see is, we can very, very easily manipulate some of this stuff. Okay, and we’ll show you, and remember, frame starts as a wireframe more or less, then the person is responsible for styling the frames.

1:07:28
And, you know, alignment issues like this are not there in the frame itself, but as the person begins to work with content and make changes, we can get some alignment issues going on. I think a lot of this Let me clarify something real quick with this what we just talked about here. Oh, geez that is the wrong tool Rectangle, thank you. So this spacing Still feels off I’m gonna I’m gonna look at what the values are, but I think some of it is caused by This whole header being white as well All of this free space feels like it’s adding to this feels like there’s a bigger gap up here than there is down here We’re about to find out if that’s actually the case Because the very first thing that I’m going to do is come in here and I’m going to add a class to this and it’s going to be BG base Ultra light and then I’m going to hit enter and now we’re going to get this websites base color right in here No, I still feel like it’s out of alignment. Let me look here So let’s go down But now that now that our brain has like some more structure to work with Let’s see what we’ve got going on. So here’s our section. There’s our padding All right So it looks like this the same top and bottom Okay, so I think it’s this text alignment that’s throwing me off. So let’s do the next thing of grabbing this grid right there and let’s Number one. I want to change that grid structure to like a one-two structure We’re just gonna experiment with that and then what I’m going to do is add a class here of align items to the center and That’s going to bring that down Okay, suddenly it’s starting to feel a little bit more balanced.

1:09:13
Now, you don’t need all this crazy stuff with your pad section XL. That’s a lot of spacing. Maybe pad section L would be good here. I mean, it is a hero, right? But I think the pad section XL was a bit aggressive. So let’s just do a little L right there. Now, see, it’s starting to clean up. But what I’m thinking to help this out is to overlap this right here. So if we grab this card and we do something like a little margin top and we give it I’m just gonna do this in pixels because I have no idea what we are working with here okay right there something like that.

1:09:58
So now you’re starting to see like we’re breaking up the flow a little bit. I mean, these are very simple adjustments, but they can have a good impact. But what you’re seeing, and I said, in my mind, I already knew this was gonna happen, we’re creating a big, big, big issue. The minute you create that overlap, you have this problem. This is a very common problem with overlapping elements. And this is what I said, we’re probably gonna need to jump into a local install and try to whip this up.

1:10:29
Because I don’t think I can do it very easily in the, in the inspector. Okay. Are you guys up for building this, this hero section really fast? Let me know. I’m not, I’m not going to do all, you know, BIM and everything else, but I want to show you how I would potentially address this overlap issue right here. But y’all let me know in the chat. I can keep going on this or we can jump into local and take a pit stop and talk about this situation right here. Because it is a situation you’re going to run into over and over and over and over again. But while I’m waiting on the chat, I’m going to come down and I’m going to look at the next section down here.

1:11:09
Okay. I don’t like all of this. Right. This is a waste of space. So this image could be made to fill this space right here. Find a tall image to fill this space would probably be the best way to do it. I think that your gaps in here probably need to be a little bit more aggressive. So you’re using grid gap, right?

1:11:31
The great thing about grid gap is you can calc it, right? So you can do VAR and then you can do your grid gap and then you can multiply your grid gap and so you get a little bit more white space going on in this grid everything doesn’t feel so cramped together get a tall image to take up the rest of the space because your form is a little bit it’s a little bit long mainly because you got these options here to choose from you could always put this as a drop-down as well it doesn’t need to be option buttons you can put a drop down here to save space Some examples there of things that you can do. I don’t know why everything is lowercase. Did you do this on purpose? Well, it’s not everything. Okay, so this is Capitalized this is all lowercase and fix that up But once again, we see you know, what exactly because this is not how the frame is out of the box What is going on here my friends?

1:12:20
What is going on with these gaps? So let’s take a look. So you have, well you have a container in a container. I don’t know what is going on with that. No, no, no, no, no, no, no. This is how it’s supposed to be. Container, container, one on top of the other, not one inside the other. This container doesn’t even need to exist. Get rid of that. Okay, so you’ve got a container here and a container here. That’s how that section is supposed to be.

1:12:42
Why is there a gap S on that section? Your containers are touching. This is, so Automatic CSS has a contextual utility class for this. So on your section, this is where container gap comes into play. See that? Hey! Suddenly the spacing looks better. So you got to use your container gap, your contextual utility classes, use those correctly. What’s going on with your gap here? You got a content gap. Okay, we’re good. All right, that’s improving a little bit. I would make all these cards the same height. Personally, I think they’re like that by default. I’d put them back to being like that.

1:13:44
Okay, let’s look. What else do we have going on here? Something like this, easily fixed. Some people will maybe like this. I prefer, it’s one of those areas where I will say maybe maybe this is just preference and if you’re an expert designer you know you can feel free to chime in but I don’t dig this okay it just again it feels like you’re making my eye go in back out like it’s and for what reason for what reason I don’t know so we do have a in ACSS where you just pop this on and it is list none and there you go now all of your alignment on your list is fixed here I don’t to me it’s just like I bam down so easy right you’re not making the I jump in and out and all this other stuff what am I gonna say here avoid what these are emojis dog you got emojis going on.

1:14:53
I always say try to avoid clip already type stuff and emojis are their clip art city, right? That’s basically what they are. Modern clip art. So I don’t, these just, it screams like what it doesn’t scream. Let’s talk about what it doesn’t scream. It doesn’t scream tax professional, right? Doesn’t it screams iPhone chat conversation. That’s what it screams. So we got to swap these icons out right here.

1:15:20
Overall, I mean, it’s a clean page, right? We’ve got some stuff we talked about fixing, cleaning up, okay? You’re on the right track. You’re on the right track. Let’s see. Jump into NoChumpVille, local, please. Bricks, please. If you’re going to show something design related, use a design tool. Like what?

1:15:43
Like what? What’s the design tool you want me to use? Oh, you mean like show this section in Figma? But we got to talk about the people really want to, you know, what we’re going to talk about is design related, but it’s really requires development skills to pull it off to actually make it happen. Yeah. Ruben says, rebuild and local do it do it do it do it do it. Okay, all right, so we did a bunch of that. We can come back to the site in a minute, but we’ll take a little pit stop. So let’s go to, which one do I want? Let’s go to Bricks ACSS. Okay, let’s go to pages, let’s go to add new, let’s go to hero section, let’s go to publish. I could figure out what frames he imported and just import them But I don’t I don’t that’s not gonna be as much value because anybody watching this who doesn’t own frames They’re gonna be like well, okay, like Thanks for using your cheat code and not actually show us showing us anything So I’m just gonna do this and actually I have a white header up here on this site anyway So that’s kind of exactly the same as what’s going on up here. So that’ll be good.

1:16:49
All right, so we need a hero with a, it’s a two column grid. We’ve got a heading, paragraph, button on the left. We’ve got this image right here on the right. So let’s go to, let me bring this out in my finder. Let’s just, I just want to delete everything that’s on the desktop. That way we can easily find this stuff. Okay, save image as to our desktop, bam, just like that. Stole your image.

1:17:14
Okay, let’s get in here. So I’ll just I’ll whip this up with some utility classes. Let’s do our grid one two Let’s do our grid gap and let’s do our grid maybe L1 Something like that. So the L breakpoint this is going to break down to one column I Don’t know if the grid one two is going to look the best on My screens wider than his screen or my website width is wider than his, so we’ll play with this in just a second. But inside of this, I just need two blocks. These are gonna effectively be my containers for content.

1:17:47
And then I’m going to do a heading. I’m going to do text, which I’m going to turn into a paragraph. Then I’m gonna add a button, and I’m gonna do button action on that, which is gonna give me my button style. I will do my content gap on here and I will align all of these items to the center and I will add his image over here. I’ll make sure that that is going to be wrapped in a figure tag. I will cover it and I will object no caption Okay, let’s pull in That image just like that remember this image has a faux Padding at the top of it. Okay, we’re not going to be able to necessarily fix that there it is right there You can see it the the space between that blue border and the top of the image is that built-in gap Which is rather annoying BG base ultra light gives us what I was talking about earlier. And then we add another section to the page This is that card CTA container that he had right here. So we’re just going to use a grid on this It’ll be 3 1 and then a heading and a paragraph. Okay, so same exact thing here grid 3 1 we’ll align items to the center and We’ll do a gap of we’ll just do a simple grid gap right there. Let’s drop a block and a block.

1:19:16
Let me go back to that container real quick and say at the probably at the M. I’m not even looking at the breakpoints, but probably at the M breakpoint we’re going to make this go to one column. This is going to have a button over here. That’s our call to action and we’re going to use a button action class on that as well. Button action, bam, just like that. Let’s justify this to the center as well. That probably needs to be a flex row. Okay, and then what do we, we’re gonna do a heading in here. We’re gonna do text in here, make that text a paragraph. Bam, just like that.

1:19:56
Let’s go with our content gap. And let’s make sure that that’s an H2. Let’s make sure that this is an H1 because my headings are never found on the side of a milk carton. I’m just kidding. I do make mistakes all the time. All right, H2, but you know, you know, that H2 is looking a little large, it’s looking a little large.

1:20:20
So what I’m going to do, I’m not going to come in here like a chump and go, Ooh, let’s make it an H3 instead of, no, it needs to be an H2 semantically. But what I’m going to come in here and do is I am going to use an H3 variable and that’s going to make it the size of an H3. Okay, now I’m going to go to website ipsum and I’m just going to grab some copy and we’re going to come back to, oh, actually, why am I doing that? Why don’t I just grab his copy? Why can’t I select this copy? What did you do to my, why can’t I select copy here all right I guess we will go to website Ipsum so let’s paste this in right there perfect call to action we need to give this thing a background color don’t we absolutely do not use utility classes on a call to action card like this big big big big big no no I’m just trying to whip this up as fast as I can so we’re gonna do color we’ll do text white.

1:21:15
Okay, and then we’re gonna do text white on here as well. Do not do this. This is how people do this stuff, but this is not, no way, shape or form do I ever advocate for doing this unless you’re on a live stream. Okay, all right, there’s our call to action. Let’s do rounded, and I don’t even use half these utility. I don’t use half these utility classes.

1:21:34
The people are like, oh, you gotta memorize all the utility classes. I don’t, I haven’t even memorized all the utility classes. But they all just make sense. So, you know, they kind of map to CSS. You can just guess. Make good guesses. All right. So now what we’re gonna do, notice these two things are in different sections. Yeah? Is everybody following along so far? Is anybody lost? Yes, the H3 variable is from automatic CSS. Every heading size has a variable attached to it, so that you can make any heading any other heading size very easily Okay, is everybody following along have you before we get into the the alignment stuff that we’re about to do and I’m you are about to get a deep dive in why variables are insanely important in web design Hopefully, I always say this stuff and then my brain stops working halfway through the live and I’m like, shit, I can’t make it.

1:22:28
No, that’s never happened. But it could happen. It’s going to happen one day. I’m going to be doing a live tutorial and I’m just gonna be like, shit, I can’t think of exactly how to do this right now. I just need to know, guys, the delay is not this long. Are we all following along? Do we understand what’s going on here? I wanna make sure that I haven’t lost anybody.

1:22:46
We have a really good viewership. So there should be no problem with answering questions of whether you’re lost or not. How do you feel about using Lottie animations? Do they slow the page or generate other problems in the site? It’s like general animation. There are people who do general animation really, really well, and it’s like, wow. That really adds to the experience.

1:23:11
And then, that’s 5% of cases. 95% of cases, the animation sucks and shouldn’t be there and detracts from the user experience. And so Lottie animations are exactly the same way. So I’ve seen Lottie done really, really well, and I’ve seen Lottie mostly done really, really, really poorly. Okay, everybody is following along. Okay, John has a great question. Why not utility classes?

1:23:37
And I am going to let the chat answer that. Cuz dommies, you should know why you should never use a utility class in this situation. So I am going to let the, the chat can answer this now. I’m not even required to answer this anymore. There you go, Justin has answered you. Not scalable or maintainable. Because if this call to action, I assume because it’s a call to action, that I’m gonna use this throughout this website. And I don’t know how many pages this website is gonna be. I don’t know how many calls to action there are going to be.

1:24:11
But what I do know is there’s gonna be more than one. And any time there’s going to be more than one, don’t use utility class. Make custom classes using BIM, style up those custom classes, use variables to style them. If you’re using automatic CSS. We’re in the context of automatic CSS right now. But even if I wasn’t, and I was telling you to do this from scratch, I would tell you to do the exact same process.

1:24:35
And that gives you global control over every one of these call to action strips across your website. Where right now, if I need to make a change, I gotta go remove a utility class, add a utility class. Remove a utility class, add a utility class. And if this exists on 10 different pages, I am up Chumpville without a paddle, right? I am headed straight to Chumpville. So I don’t want to be in that situation.

1:24:57
Now remember what I said, I don’t know if this little column, this grid structure, 1, 2 will work on this 1366 pixels screen, made the image a bit bigger than I wanted. So what I’m going to do is just swap that. So we’re going to go to grid 2, 3, instead of grid 1, 3, whatever we just had. So now suddenly I have a little bit more breathing room and everything is, is shaping up really well. Uh, what other, here’s his content. Oh, now I can select the content. Okay. Let’s put that in. There’s this thing. What is this? Focus on your work. We focus on your taxes. Okay. Now my H ones on this website happened to be, you know, really freaking large, probably because I overrid, I overrode them overrid them overrode them let’s go into automatic CSS let’s go to typography let’s go down to our no we don’t want heading colors we want our heading size overrides okay so oh I just have a big scale set on this website that’s what that’s what’s going on so I’m just gonna go back to 1.333 there and okay let’s go back, save, refresh.

1:26:05
All right, let’s just try to tame these H1s a little bit. There we go. Okay, so let’s talk about this overlap because everybody said they were following along. So what I’m gonna do is go into this section and I’m gonna say padding zero, got it? I want that thing to be as close as to where I need to move it to as possible. So this section does not need top padding anymore. The top padding in that section is just making my thing further away from where it eventually needs to be.

1:26:34
Now what I’m going to do is I am going to move it up. Okay. But I have to be very careful how I do this. I don’t want to just give it member on the, in the Dom a minute ago, in the inspector, I just gave it like some random value. I actually the value is very very important Okay, so what we’re gonna do is we are going I’m thinking about how we could potentially use a Variable for this we could definitely absolutely we’re going to be using a calc, okay But I want to see if I can do a variable for this I’m just thinking about the scoping of the variable whether it needs to be Local or global because I’m thinking about whether it can be used in this section versus in this section or not and I’m thinking I’m thinking I’m just gonna for the purposes of this I’m just gonna make it global so that everything has access to it so we’ll go to WP code box and we will just make a quick variable and what I’m going to do is name this variable okay this is going to be the CTA offset I’m gonna make it equal to a hundred pixels right here I don’t know if 100 pixels is right I’m not even going to use a hundred pixels I’m not going to use pixels at all I just I’ve said this time and time again in tutorials get something going on the page then you can clean it up but just get something moving in the right direction so we’ve created a very I don’t even know if the variable works.

1:28:03
We got to get in and just get something going on the page and then we can work to where we want to go. All right, so what I’m going to do is come in here with this container and I’m going to go to style layout and I’m going to go to margin top and I need to see if that variable works. So we’re going to do var cta offset. Okay, variable works. Now, what I need the offset to be is actually a negative number right so i could come in here and where’s my let’s put let’s get these tabs organized i could say that’s going to be um i think you can do i’m pretty sure you can do this yeah minus 100 okay so you just say hey it’s negative 100 pixels your other option is to wrap the cta offset in a calc and multiply it by negative one and then it’ll negative and I try to do that because sometimes you may want it as a negative sometimes you may want to use it I don’t know if you know this situation you would use it as a positive ever but we’ll keep it made negative maybe that makes the most sense to people well actually hold on let me think about this no no no no no no here’s why here’s why we’ve got to make it positive we’re gonna need it to be positive in just a minute I just popped into my brain fairly certain we’re gonna need to be positive in just a minute.

1:29:14
Okay, so here’s what we’re going to do. We’re going to take that variable, we’re going to put it in a calc. So it’s calc offset times negative one. And this is going to make it effectively a negative number. CTA, did I do something wrong? CTA offset, yeah. It does help to put the actual equation function in there. Okay, I was missing my multiplier. Alright, so times negative one, now it’s negative. Now let’s view this on the front end. Let’s go to preview.

1:29:42
Okay, does anybody know why I’m going down this path? Anybody know why I’m going down this path? What I want is even, dang it, that is the wrong thing. Even padding in this section, look at this. That is, and I already, this is so great. Like automatic CSS always reveals its superpowers, right? Best practices always reveal their superpowers. This is not an arbitrary section spacing value. There is a variable controlling the spacing called section space M.

1:30:16
It’s medium section space. And we have large, we have extra large, we have small, we have extra small. We have a lot of different ones to choose from. The default is medium. I want medium down here. And that’s what I have. I have medium down here. The problem is I have this thing that’s encroaching on my padding and it looks as if I don’t have any padding and that obviously is visually wrong. But if I can use a calc and I can know, hey what is the height, what is the offset of this, how much is that encroaching into my section, then I can say, well, take my default section padding and add that encroachment value.

1:30:57
And suddenly I will have perfect section spacing restored to what I’m working with. Okay, that’s kind of the direction that we’re going with this. And this is always maintainable, like everywhere this overlap exists. And if the overlap ever needs to change, guess what my friends, I have a central point of control for this overlap for this offset okay so now what we’re going to do is we’re going to go into our padding and see if we had an arbitrary number like 80 pixels or actually this computes to 90 pixels we could do 90 plus I guess it would be a hundred maybe it’s half I don’t I suck at math so we’re we’re about to see my shitty math skills reveal themselves in just a minute.

1:31:38
But you guys understand the theory, right? And I could do a normal calc with normal pixel unit, but it’s not, you don’t want to be in that realm. That’s Chumpville, okay? So what we need to do, we already have our section spacing, but it’s var section space m. This is the default padding. See, if I change this to L, I’m going to get more. If I change it to XL, I’m going to get more. But I don’t want to just do that willy-nilly because that won’t match M.

1:32:05
I want to match M. So what I’m going to do is I’m going to get us a calc function going. And I’m going to say, hey, give me section space M, but add the offset, right? So I’m going to come in and I’m going to say, CTA offset. Guys, there we are. Bam, bam, bam. We’re good. So then I come in, perfect, perfection, right? So, and I don’t even need to know what the values are. And guys, if the offset ever changes, watch this.

1:32:34
Let’s say I don’t want a hundred pixel offset. First of all, I can clean this up by saying 10 rim. So now I switch from using pixels to using rims, which is preferable. You’re gonna see that in the next training of page building 101. Look, nothing broke. Here it is. It looks exactly the same. Does it not?

1:32:50
Okay, now you’re like, Kevin, I want it to be a little bit of an offset, not a lot of an offset. So the question is now, you see why we use variables. If I were to change this offset, if it was not a variable, I would have to change the offset margin on that object, then I would have to go redo the calculation. But here, pretty sure I can just change the offset. And then we come back and look, the offset changed, this gap did not change this gap recalculated itself for me because it’s based on variable calculation so I can make that offset whatever I want and never break the padding that is in this hero section so that’s a perfect example of how to tackle I don’t know what do you guys think why not just create a new section for the CTA and not have to do all the calcing?

1:33:42
I don’t know what you mean. Why I did create a new section for the CTA. This is in its own section right here. So you have to clarify what you mean. Now I see what you were doing. The background of the section is so light, I can barely see it. Oh, sorry. Okay, you want it to be a little bit darker here. BG base light.

1:33:57
Okay, now it’s a little bit darker. Now, on this website, it’s all like mostly black and white color, so it’s not super exciting. But now you should be able to see, sorry. Yeah, if the contrast of the stream wasn’t great, you were probably having trouble seeing. So let me put it back to the way that it was, 10 rem. Look, look, the offset changed. The spacing is still the same because the spacing is calculated based on the offset value.

1:34:27
So this is 100% dynamic and it’s unbreakable. Unbreakable. So this is really, really, really good. So that’s how you would approach putting a section like that together. Now, what else do we need to do? This laptop is just floating. It’s like floating around. So I would come in, put a shape back here, put a shape back here behind here, pseudo element of some sort, maybe another pseudo accent element on top somewhere you got to give that start to give this some layers start to give this some some added elements to tie it all together you can’t just have a floating laptop over here because it just doesn’t look that great you could also come in and put a shadow on this right so we could do a box shadow let’s do box shadow L something like this very soft box.

1:35:16
You guys might not even be able to see it because of the stream resolution, but a nice soft box shadow down there. So you see, right? And obviously we need some color in this site, but I’m not gonna go through and set all my colors and all that good stuff. Okay, where were we? Where was, oh, there it is right here. So see what we fixed?

1:35:36
Instead of having this, you can have what we put together, which is even spacing in your section. And even if your section spacing needs to change, very easy to keep everything in alignment. All right, let’s look at, so how do we do it? Okay, so you got some process cards going here. It’s a very small site. You got a little modal. Okay, I will say right off the bat, you need a heading up here in this modal.

1:36:04
Let people know what they’re doing here. Give them a expand on your call to action with a nice heading inside of this modal right here. Questions, here’s your FAQs. What does the service include? Oh, this is interesting. I don’t usually see FAQs in cards like this. And the reason being is because sometimes you need a longer answer and it’s going to destroy this layout. So you’re kind of limiting yourself by putting the FAQs in cards.

1:36:33
But I mean for what you’ve done it works it’s fine. But I’m just saying for future you know it does create some limitations here. But I see once again you have forgotten your container gap. So we can see here is a container right there and here is a container right here. And there’s no gap inside of it. So what I’m gonna do is inspect this and we’re gonna see the problem. There’s our section. Oh, so wait, wait, hold on, hold on. Yeah, yeah. Okay.

1:37:02
So in page building 101, we talked about grouping associated content. The heading. Oh, no, this isn’t a, uh, what have you done, my man? This needs to be a P, a paragraph, okay? Grouping associated content. The H1 and this intro paragraph are associated content. They need to be in their own container. So there’s a container right there, but there’s only one container. And so inside that same container is this grid.

1:37:29
That grid needs to be in a separate container. It’s already in a separate block, but it needs to be in a separate container So now what we do and this is why guys I need a different gap between this between questions and this paragraph Needs to be a different gap than between this group of content and this group of content and the way that this is structured I can’t achieve that so this should not be gap M this should be Content gap in this container should be container gap. So I’m going to come in here, container gap. That gives, see the problem?

1:38:10
When you don’t group associated content, you can’t space things accurately. You’re forced now, all of these things are the same top level items in this container. These things need to be in their own container. So what I’m going to do is grab this. Can you wrap? I don’t even know if you can wrap in here. I guess you can’t. You would need to put another div, put the heading and paragraph in that div, then that is a group of content, then you can space those out differently from everything else.

1:38:38
This is the problem with not grouping associated content right here. So if anybody had questions in that page building 101 lesson, where you’re like, why, why don’t I still, are you just grouping them? Cause it’s cool to do that. No, it solves spacing issues. You constantly run into this problem if you don’t group associated content.

1:38:58
Okay. Create a new section, use a shape divider with a 50% gradient. Create a new section, use a shape divider with a 50% gradient. First and second step. Yeah. Okay. So you could do this. Look, let’s go back here. What are you saying is that this section right here should be the same background color as this section up here, but with a gradient that stops halfway down, creating a pseudo overlap.

1:39:29
And you could absolutely do this. I’ve actually taught it. You can go watch. It was, it was an oxygen. I did a video on like nine ways to create overlaps. The pro, I will tell you right off the bat, the problem with that is that these two sections are independent elements and if this background color ever needs to change you automatically now have to go to this element and change the background color here. You could solve that by creating a background color variable for these two pairs of elements just like I did with the offset. However, you’re still going to be limited by remember everything we do is to defend ourselves against Bev in accounting. And you know that Bev in accounting is going to be like, well, I’d actually like to try a gradient there.

1:40:19
And then the minute she wants like a gradient going in this direction, my guy, your little technique down here of pseudo overlap is fucksville. It’s gone. And if you’ve done that everywhere, that’s a bad place to live. It’s a bad place to live. This is a physical overlap. It is not influenced by whether this is a gradient, whether this is an image, right? If Bev in accounting wants to put a background image in this hero, this overlap technique, gone, out the window, broken, everywhere.

1:40:55
A physical overlap, you can’t break it. Anything she wants to do to this hero background can be done. So that’s why I default to this technique right here. Because in my mind, I’ve been screwed by Bevan Accounting enough to know, I’m always trying to defend myself against Bevan Accounting. So when I’m trying to make a decision, that’s why I use that variable in this calc, because Bevan Accounting is going to want to adjust the spacing in here. And I’m not going to want to have to rewrite these calcs every freaking time on every page, right, where this is happening. No, 100%.

1:41:27
I’ve got, I’ve got, I am 100%, you know, defending myself against Bevan Accounting at all times when building websites. That’s the whole story of best practices, maintainability, and everything else. The underlying thing, if you really want to know. How can you control the distance when clicking on a menu and take me to the section with the ID and not be hidden under the header? I currently have it with higher padding, but I don’t like it.

1:41:50
There’s a lot of, you have to create what’s called a scroll offset. You need to know the height of your header. And then on that scroll, you have to, we put a variable, right? In automatic CSS, this is all done for you. So, because these are common, common challenges, right? Automatic CSS is more than a framework. Like these other frameworks, like you got Tailwind, you got, you know, all these other frameworks going on.

1:42:13
They don’t think about common problems like this, at least to my knowledge, and put in fixes for them and helpers for them the way that automatic CSS does. So if we go to additional styling and you go to header heights right here This these are the heights of my header at every breakpoint Okay and so Automatically this assigns these values to header height variables and then what I can come in and do and if I have an overlay header right I Toggle this on right here offset page content automatically and what this is going to do because you’re gonna have the same problem When a header is sitting in your hero section, right now it’s above my hero, but if this was overlaid on my hero, it would be destroying my hero padding.

1:42:58
And then all of my heroes would look off balance. So you come in automatic CSS, you toggle this one setting, and it fixes it for you everywhere. Every section on your site, every hero section is automatically fixed when you toggle this on. But then you come down and you say, well I actually want to add to scrolling, like scrolling to hash links, I want to add more of an offset. We can add them right here, that’s no problem. And then you turn on offset sticky elements automatically, and this is also going to anytime you’re doing an auto scroll thing, like scrolling to a hash, it’s going to take your header height, it’s going to take your desired offset, and it’s going to automatically program that into the scroll. And so the scroll is going to stop with the exact offset that you asked for and it’s going to account for the height of your header it’s going to account for the manual offset you put in all of this stuff happens automatically if you want to do it manually it’s a bit extra work so you know we would have to do like a tutorial on that all right Let’s see.

1:44:05
On the site is set to H1, shouldn’t it semantically be an H2? Questions on the site is set to, ooh, ooh, we’ve got somebody inspecting the DOM as we do this. All right, let’s see. Inspect. I’m seeing an H3. Oh, you mean this one right here? This should be an H1. Every page gets its own H1. So this is the main heading of this particular page.

1:44:31
This is not a section on another page. This is the page itself. Now maybe you mean somewhere else. Did he have questions down here? No, I think that’s what you mean. Here, this is correct as an H1. This was wrong, this paragraph, because it’s a div. And man, what do you? You got to get all these font style things out of your out of your you’ve dirtied you’ve dirtied your HTML my friend you’ve soiled your HTML.

1:45:00
Let’s get this out of here. We don’t need that. This should be a P right here. Okay, what about all these? Okay, these are paragraph tags. That is correct. And then let’s look at this is the h3 that we had but again you’ve soiled your dom that I’ve got to that that my friends is a viable t-shirt that is a viable t-shirt yeah everything else is fine I think this is a this is a frame these cards yeah it’s process card Charlie these cards actually auto number themselves by the way Which is pretty pretty cool pretty helpful All right, every page only gets one h1 is that correct yes, that is correct Thanks to Kevin in the stream. I just noticed the basic text element has to have a p tag assigned yes hundred percent except except There is an exception.

1:46:03
If you are using dynamic data, do not assign a paragraph tag to the actual text element, because it will create empty paragraph tags. So if you’re gonna use dynamic data, the dynamic data uses paragraph tags in its dynamic output. So you just leave it as a div and it’ll put the paragraph tags correctly in the div. All right. Any questions? I’m done with this site.

1:46:29
I’m going into question mode. We’ve got 15 minutes left of the stream. Now is your time to get in questions. And by the way, you need to write question in all caps or I’m probably not going to see it. So write question in all caps and then write your question. Question, is it possible to prevent utility classes from loading in the Brics builder because you said it’s better to use custom classes and variables? So Pro Mode removes all the utility classes that most advanced users don’t use, don’t need.

1:47:02
And what we can’t do though, you know, talks with Mateo about it, is we can’t remove them from Bricks because if you’ve used them, if a user has used them anywhere and we remove them, they can’t be added back. It’s a destructive change. And that is a, like, we would definitely want to avoid that situation at all costs. Now one thing we’ve talked about is putting in a very stern alert to where if you turn on Pro Mode and you want to remove the classes from Bricks altogether, you would have to basically sign an agreement.

1:47:43
You would say, I know this is going to destroy my site if I’ve used these classes, and I’m not going to hold Kevin responsible. It’s not going to be that crazy, but it’s going to be a very stern alert warning you that if you have used these classes, you are about to completely break your website, because that will happen. And there is no undo button, by the way, because we can put them back in the BRICS database, but we can’t put them back on all the elements you had them on.

1:48:11
So it is a very, very destructive change and we’re not gonna do that without a ton of caution. Question, what is the highlighting tool you are using? What is it called? I don’t know, I’m gonna have to look it up. I got it on the App Store. It was like six bucks. Just type in screen annotation in the App Store, in the Apple App Store, and you should be able to, it was like the first one I found, and I was like, oh, I hope this one’s good.

1:48:37
And it turns out to be pretty good, I like it. When using heading offset, how do you handle a page using div that’s used to wrap everything with an article tag? That becomes the first container and knocks the calculation out when using a heading offset. How do you handle a page using div? That’s used to wrap everything with an article tag You’d have to show me the page structure sometimes there’s things that we can do to work around it. Sometimes I have to add a new instruction for a new scenario into automatic CSS to account for that kind of template. If that’s a properly structured template, then we’ve done that before in the past.

1:49:28
We can’t think of like literally every single situation that somebody might find themselves in, but if somebody brings me a situation, and they’re like, hey, this is a legit situation where the automatic heading offset is not working for me, then we can just bake in a solution for that. All right, I’m looking for additional questions here. Yeah, we talked a lot about using the gradient technique there, we’ve already talked about that. I see this when I’m helping others sort out issues on their site.

1:50:03
It’s hell trying to sort things out with those utility classes. Yeah, it’s one of the things that I’ve strongly, strongly advocated for, tried to put this in as many videos as possible. The idea of littering utility classes everywhere on a website is just you’re basically styling things at the ID level. It’s more efficient than styling things at the ID level. It’s faster than styling things at the ID level. But when it comes to scalability and maintainability, you’ve effectively styled everything at the ID level. Because any change that you want to make has to be a manual change of removing a utility class and adding a utility class.

1:50:42
So it’s the biggest misunderstanding people have about automatic CSS. And I understand why they have it, because we offer a 1200 something utility classes. And then you’re told, but don’t really use those. Well, the reason they’re offered is because in certain situations, they’re very helpful and they speed up workflow. It’s about knowing when to use a utility class and knowing when not to use a utility class.

1:51:07
Then we have pro mode that does shut off a lot of the ones that you shouldn’t be using that were added early on for ease of use for you know beginners and things like that or that really you could use in legitimate cases but they’re just not that common so it’s just better to just default to using BIM and so I actually made a video called utility classes versus custom classes very important videos anything that’s typically very important I’ve made a video one it’s just up to us to get that video in front of users so that they know what the standard is and what the best practice is. And then you have obviously Tailwind style utility frameworks where Tailwind literally says the opposite philosophy.

1:51:49
People are like, oh, ACSS versus Tailwind, they seem very similar. Why? Because they both have utility classes? They’re completely fundamentally opposed to each other. Tailwind says use utility classes for everything, absolutely everything you should use utility classes for. Automatic CSS says you should use utility classes for hardly anything. The power of automatic CSS is in the variables, the automatic targeting of elements, a lot of the helper stuff that’s going on, and then using BIM.

1:52:19
You use BIM methodology, which is just a way to organize your custom classes. You use BIM and variables and all of the typography, the fluid responsive nature of everything, the clamp functions all done for you, everything being in mathematical ratios, like all of that is the power of automatic CSS. It’s not the utility classes. Utility classes are the least important part of automatic CSS.

1:52:41
So getting that point across is the hardest thing to constantly communicate. It’s the biggest misunderstanding people have about automatic CSS. So I guess I’ve said enough on it, right? But fundamentally different from Tailwind. So I understand why people get confused. Question, in your blueprint, you don’t use Brics native forms. Is there a problem with Brics forms? No, just because we use one form system, it’s WS form. I don’t mix and match. It’s not good practice to mix and match form systems. So now, the question of is Bricks native forms good, it’s very limited.

1:53:21
So if you, people will say, well, this client, they’re a basic client, they don’t need fancy forms. But the thing is, is like we create a process and we create a workflow. And that process and workflow is based around a tool. And so it’s same discussion we had to have when people say, well, I use this basic value Elementor on a cheap client site, and if I need to use something advanced, I’ll use Bricks. That makes no sense to me whatsoever. We have a professional workflow built around a professional tool, so we use it for everything.

1:53:55
It’s the same situation in photography. If I’m a professional photographer, I have a professional DSLR camera that I do my work with that is the camera I know it’s like the back of my hand. It’s the camera. I love it’s the camera that puts out professional level work 40 megapixels, whatever I can blow it up on a billboard if I want to but it’ll look great on a postcard doesn’t matter What the situation is if I need? External off-camera flash a DSLR works with that if I want to go natural lighting, DSLR works with that. I don’t need a beginner tool. So it’s not like, oh, well, they just hired me for Christmas cards, so I’m gonna bring my fricking iPhone and shoot it all on the iPhone because that’s faster and easier, and I can just use filters, and then I can give them, and make them go away, right?

1:54:41
That’s what it sounds like you’re telling me. When you’re like, well, I’ll use Elementor for a basic website. Like, okay, you’re using an iPhone. You’re using an iPhone. If you were a photographer, you would be telling me that for the Christmas card shoots You use an iPhone and if anybody else wants to pay you more and hire you for a real project Then you’ll use a real tool. That’s exactly what I’m hearing when you say that right? And I don’t think that’s a legitimate argument. We have a professional tool We’ve created a professional workflow and we use that for everything It doesn’t make it harder or fat or slower to build the website, it’s, we can actually build it in the same exact time.

1:55:18
So it’s a smaller website, so it happens faster. But we’re still following best practices, we’re still working to a standard, nothing changes. Just because it’s a small client versus a large client. Right? So if a roofing company that makes $50 million a year hires me, I’m gonna use the same tools as if my local buddy who’s starting a local shop hires me to do a one-page site for him. Same tools, same workflow, same standards, same everything.

1:55:45
Because also, my goal with my buddy and his one-page website is to get him to $50 million, right? And so as he grows, I don’t wanna be limited in what I’m able to do with this website. I wanna be able to scale it and maintain it easily. I wanna be able to add things onto it on the fly as needed, right? I want to be able to do whatever I want. I don’t want to be limited by the tool. I don’t want to give them garbage just because it’s a smaller project.

1:56:11
Professionals, use professional tools and follow a professional workflow. You can’t convince me otherwise because this is how it works in every freaking industry. Okay. Yeah, DSLR. Okay, we’re in the mirrorless camera era. Got it. Bobby says, my website is not as enticing as boudoir photos, but I need my site reviewed. Maybe next round. Yeah, absolutely.

1:56:34
Guys, there’s a link down below the video. Anybody can submit a website. It’s 100% free. Submit a website for critique. Let’s see, why navigation arrows in Bravo slider from frames visible in Builder and not on the front end. I don’t know, I need a link. Need a link. Okay, I think we already talked about that one. All right guys, I think we’re at the end of the stream here.

1:57:04
It is about the two hour mark. I don’t see any other questions strolling in. So we’re going to cut this stream. I’m thinking about doing a first impressions of another builder next week and then we will wrap back around to more in-depth web design reviews. I hope you guys got a lot out of this session. Make sure you throw up likes on this stream. If you have any further comments or questions they need to be put in the comment section not in the chat. If you put them in the chat towards the end of the stream they will disappear into the ether. So go put them in the comment section and I will reply to you there.

1:57:44
Alright guys, I am out, love you, thank you for tuning in, peace.