Hey, hey, hey, what is up my friends? Welcome Dommies. We’ve got Randall in the house. Click here when live stream. I don’t know what that just said. Okay. All right. I’ve got a new we got a new version of Ecamm live here running and I don’t know it’s either going to blow up or it’s going to work just fine. or it’s gonna work just fine. All right we’ve got Randall in the house, Callis in this Ireland, Bradbury Robinson. Time for the weekly Geary grilling. Oh I love it, I love it, I love it, I love it. John, D123, Philip is here, Ruben is here. Ruben says good to be here, good to have you here Ruben. All right we’re feeling good today, we are going to All right, we’re feeling good today.
We are going to do a quick round of updates before we dive in. I will say, let’s see what temperature it is. I had a feeling this was going to happen. So a week, week and a half ago, it was 70s here. I think it got to like 85 at one point. And I told my wife, I was like, March in Atlanta always does this. March in Atlanta always does this. It’ll be like, you know, February, late February, it’ll be like warm, like unseasonably warm. And then March, like it gets you all happy, right?
You’re, you know, you’re like, oh, warm weather. It’s like a warm hug. You go outside, the sun just feels amazing. And then March just always rips it away from you. And that’s exactly what has happened. It is, the low this morning was 28. It’s been in the 30s. The low this morning was 28. It’s been in the 30s. Had to take my daughter to a softball game last night at night and it was like we were sitting out there and like 32 degrees.
It was just terrible. So, you know, I’m a little agitated. I’m more agitated than normal because I hate the cold. I absolutely hate the cold and I even hate it worse when it teases me with warmth and then just rips it away from me. It’s not a good situation. with warmth and then just rips it away from me. It’s not a good situation. So it’s cold in the house right now.
It’s just, it’s not good. It’s not good. I got a taste of spring and it’s gone. It’s just like that, gone. And there’s no sign. I looked at the 10 day fork. There’s no sign of it coming back any time. There’s one day that it’s like in the 60s again and then it’s just back. I don’t know, not good.
All right. Do we have any updates? I don’t know not good. All right Do we have any updates? Do we have any updates today on anything going on automatic CSS just got a I just actually posted a teaser video of some big changes coming to automatic CSS I have some other big news about automatic CSS that I can’t reveal quite yet Frames Oh frames frames, oh frames, some WooCommerce stuff will be coming to frames very, very, very soon. We were waiting, there’s a bug or was a bug, it’s fixed now, there was a bug in Bricks with dynamic pulling the star rating from the database with their little dynamic data custom field thing and it wouldn’t pull the value correctly. So obviously with WooCommerce stuff, you know, if you’re doing the value correctly. So obviously with WooCommerce stuff, you know, if you’re doing a product card, if you’d anything related to products that needs a rating, we weren’t able to build our own custom little rating frame, which we were working on. And so kind of all that stuff had to be on hold until that bug got fixed. That bug is now fixed. And I think the first product card section of frames will come out today, product section alpha, and will come out today, product section alpha, and then we’ll be releasing a cart, we’ll be releasing a checkout page template, a lot of that stuff for all of you who use WooCommerce, you’ll probably be happy about that.
That’s kind of the only update that I have. So we’re gonna go ahead and we are going to dive right into our first website today. This is of course, Web Design for Dummies, where we do in-depth live web critiques. If you are here for the first time, where we do in-depth live web critiques. If you are here for the first time, we look at everything that makes a website successful from the colors to the typography to the copy to the DOM.
That’s why it’s called Web Design for Domies. We actually look under the hood, see how the code is, see if the site is accessible, see if it’s clean, see if it’s following best practices. We look at the overall design. We look at UX. We look at everything, everything, SEO, We look at UX. We look at everything everything SEO everything that makes a website accessible Successful, that’s what we look at So I’m gonna bring the first website onto the screen and I am going to share my screen And hey, look at that. Ecamm has not blown up yet. So that’s good. Good job. Ecamm. The new version is Appears to be working. Well All right. Let’s see. Oh Let’s see. Oh, just to let you know, if it’s your first, second, third time, whatever, this isn’t just about listening, right? You get to participate as well. So when I bring a site up on the screen, if you have comments on things that are going on in the website, drop them in the chat. Let people know your thoughts. And if you have questions about anything, write the word question in all caps and you can ask your question. And if you And if you want me to stop and kind of go off in a tangent and do a little mini tutorial of some sort, we might be able to do that as well.
So if you have a specific question that you want to see, also after we do the reviews, I’ve been saving time to just answer general questions about BRICS or UX or UI or how do you do this? How do you do that? Whatever you want to know, we can try to get into it. that whatever you want to know we can we can try to get into it. All right chat is going well so I’m gonna go ahead and dive into this first review so we’ve got McGrath’s dot ie it’s an interesting domain extension here McGrath’s Kong and then I’m seeing four logos right off the bat so we’re gonna do our no scroll test is what we always do it’s just like can we figure out what’s going on here So we’re gonna do our no scroll test, is what we always do.
It’s just like, can we figure out what’s going on here without scrolling around the website? So I see the main logo here is McGrath’s Kong, and that fits the domain name, McGrath’s. I’m guessing this is like the main company, or it’s like a parent company of these other things here. I will say I’m getting strong vibes of like the client had a lot of, made a lot of decisions here, I’ve made a lot of decisions here.
Because I don’t see this kind of thing typically with web designers. I see this kind of thing when web designers have to listen to their client. Their client’s like, no, you gotta put all the logos, all the logos in the header, every one of them. Every one of them. So they’ve got their little sister companies that they’re super proud of. And they think that this website has to market these other websites too.
And this is what you end up with. website has to market these other websites too and this is what you end up with and in fact you know this is wait hold on I don’t know I’m looking now I’m looking at the bottom at the URLs doesn’t appear that these go to other websites and well this one does this one goes to a different website this one goes to category pages of the current website so if I click on that it takes me to a category page and so this is like I think for UX I think especially for So this is like, I think for UX, I think especially for accessibility, this would probably be a big issue.
Because you’re like, this is a little confusing to the user, where you have this main menu over here that does things, takes you to places, but then you almost have like another menu in the form of logos. You have like a logos menu going on here. And so I don’t know, that would be a little confusing. I don’t know that would be a little confusing. I think if you are forced, you know at gunpoint or something to put these logos I wouldn’t put them here. I would just tell the client now. I’m not I don’t that’s not a good idea Let’s not do that If you’re forced to though You know, they have a weapon of some sort and you have to put these here in the header I wouldn’t link them, you know, like and I would probably you know, gray scale these Let’s see if we can quickly quickly do this Wow. All right, cool Let’s see if we can quickly do this.
Wow, all right, cool. Got a lot of SVG stuff. All right, so filter, grayscale, there you go. And then let’s opacify it. Let’s go to like, see this? You know, you could do this to all three of these. That way, hey, Mr. Client, yeah, they’re there. We got some representation for you, but it’s not distracting. It’s not super distracting.
This just collection of like, It’s not super distracting. This just collection of like, hey, here’s my logos collection. That’s not so great. I don’t like how we’re starting off in the middle of the header here. Let’s talk about the menu too. So I’m a fan of these kinds of menus on more like techie websites where you’re gonna have a techie audience.
I think for like a construction type company, If you’re gonna have a techie audience, I think for like a construction type company, I would most certainly go with like a traditional navigation. I would definitely, and you know, because of the things that are having to go on in the header up here, I would have a two row header, a dual row header, where you have the navigation on a second row right here, and just have a nice standard navigation for this kind of audience.
So that would be a big change that I would recommend. navigation for this kind of audience. So that would be a big change that I would recommend. I mean, you could keep this. This can be, it can still, like it wouldn’t be here on desktop, but you don’t have to like get rid of the work you did. This can be your mobile menu. But I think you should have a different, just a traditional desktop menu.
And I think this would look much cleaner if we put this main logo over here on the left, and then that would actually give you room for these three logos to kind of just be next to it. I think that would actually give you room for these three logos to kind of just be next to it. But also I would still say, you know, gray scale them, get them, you know, the drop the opacity down, make them less distracting. And then you have your get in touch call to action. Then you just have a nice main navigation here. And that’ll kind of get rid of a lot of the confusion.
I think that a lot of this causes up here. As far as the hero image goes, it’s pixelated, it’s low resolution. It’s pixelated, it’s low resolution, so it’s not giving the best professional vibe, right? So we need something that’s higher resolution to go in this hero section. And then I think we need to put, oh, this is a slider, I didn’t even realize that. Okay, so this is a, so, you know, the clients, here’s what I’ll say.
The clients that request this, now I don’t know, I’m just guessing. Here’s what I’ll say. The clients that request this, now I don’t know, I’m just guessing, I don’t know if this is the case. And if the person who created the site is here, they’re welcome to chime in in the chat and let us know what happened, what was the process of this. But what I will say is clients who tend to request things like this also request sliders.
They love sliders. They love their logos and they love sliders. And so maybe this was a decision that the client made, and they love sliders. And so maybe this was a decision that the client made, I don’t know, but I’m just not a fan. I’m not a fan of these sliders because what you’re effectively doing is you are hiding content, number one. You know, if this stuff is important up here, it shouldn’t really be hidden, should it?
And you know, these red dots down here do indicate a slider, but as the only indication of a slider, it’s very easy to miss. I mean, these things blend in. But as the only indication of a slider, it’s very easy to miss. I mean, these things blend in. I’m sure that contrast ratio is not accessible. So if somebody’s colorblind, it’s gonna blend in even worse.
And you just really don’t know that it’s a slider. There’s no arrows, which would be typical of a slider here. Having the dots as the only navigation element is probably not the best here. So if it has to be a slider, is probably not the best here. So if it has to be a slider, I’d like to see some arrows on the sides to indicate that. But we also have an issue where instead of having a nice, vibrant, clean hero section with a strong headline, we’ve got a slider that just kind of goes through our categories.
And so what we lack is a nice, big, selling point headline. is a nice big, you know, selling point headline. And I think we’re also gonna run into an issue here. Semantic HTML issue. So you notice that this one is an H1, and I’m just guessing that they’re all H1s. And we’re gonna, oh, okay, all right. So at least we didn’t make that mistake. So we have H2s for the other ones.
But I don’t know, I don’t know. But I don’t know, I don’t know. Quality concrete and block products. So that seems like this is not a category, this is the attempt at a marketing headline, but it just kind of lacks. We’re not telling us what’s special about this company. I get it, you sell quality concrete and block products, but give me more than that. Give me more, right?
Talk to me as somebody who might want but give me more than that. Give me more, right? Talk to me as somebody who might want to do business with you. Right now you’re saying, hey, we’re a commodity, let’s just be honest. That’s what we are, we’re a commodity. We have concrete and block products just like everybody else. Do you wanna do business with us?
That’s kind of the question that’s being asked to the visitor right now, which is not a very compelling question, right? So we’ve gotta find a way to stand out a little bit So we’ve got to find a way to stand out a little bit and speak to the person in a more impactful way. All right, that’s my no scroll test. Drop your thoughts in the chat. I want to see what other people are thinking so far. Managing multiple brands is always difficult if those brands have separate websites.
That is true. More logos equals awesomeness for client That is true. More logos equals awesomeness for client equals also more confusing equals visitors staying longer on the page to figure out what is what equals better analytics. Yes, okay, so you can get those vanity numbers up. And yes, I get it.
All right, a lot of centering issues with the header logos and also with the hero section. Yeah, yeah, the other thing, you know, with the headline being, you know, down below, like I’m trying to figure out why it’s aligned The headline being down below. I’m trying to figure out why it’s aligned to the bottom. My guess is that they were like, well, we need to see the photo more, which would be maybe a relevant thing if the photos were worth seeing.
These photos aren’t really worth seeing. This is also a really strong contrast between, strong like contrast between right now I’m seeing a factory situation and then I’m seeing like an interior decorating type photo and that’s a little that’s a big jump it’s a big jump for my brain to make then I’m seeing a farm right and and this is always you know it’s tough right it’s tough because these these are the categories these are the categories but I think maybe the the visual categories, but I think maybe the visual presentation could be a little bit better. Road surfacing products, man, these are stone products and then just calcium carbonate. Yeah.
What I would say is maybe I would go back to the drawing board with what are we going to do here in the hero section? in the hero section. Again, and you’re taking something that’s a challenge and trying to do it all in the hero with this slider situation. And it doesn’t all have to be done in the hero. What the hero needs is a hero image and a hero headline and a hero lead and your main calls to action. And then let’s get into the, how do we present all of these different categories?
How do we talk about all the, figure that out later on down the page. How do we talk about all the… Figure that out later on down the page. We don’t have to do all of that in the hero section. I think that’s one of the main issues that’s going on right now. We’re trying to do too much with the hero and it’s just kind of like, oh my God, as a visitor, where do I go? What do I click on? What am I like, you know, it’s a lot. It’s throwing a lot at the person. And it’s a lot of jumps between factories and interior decorating and farms. Factories and interior decorating and farms and there’s a lot it’s a lot to process So we just tone it down to like get rid of the slider Main nice hero image that really speaks to what this company does Strong headline strong lead paragraph now We’re in a situation where this website is suddenly more inviting to the visitor. They understand what’s going on Then they can scroll down and maybe We can see this okay, but then we can get to our product categories now and maybe we can see this, okay, but then we can get to our product categories.
Now, when content is not hidden anymore, it starts to be, it seems a little bit more organized, right, and the client can choose, or the visitor can choose exactly what they want to learn more about. Okay, so like what’s happening on the rest of the page is a little bit better than what’s happening in the hero up here currently. All right, let’s take a look at this first section right here.
in the hero up here currently. All right, let’s take a look at this first section right here. Serving customers for over 60 years. So the problem with this headline is that, we’re trying to speak to experience and expertise, but we’re really speaking to nobody because who is the customer? Am I the customer? Is like, who is the customer here? You’re talking past the person that is reading this.
You’re talking past the person that is reading this. Instead of talking, you really with copy, you want to talk directly to the person that’s reading it. You’re just telling this, we serve customers for over 60 years. I don’t know if you’re a customer. I don’t know what you’re doing here, actually. But I just wanted to let you know that we’ve served customers for over 60 years. See, it doesn’t really connect, right?
So I think this needs to be rewritten. So I think this needs to be rewritten. We have a 60 years badge, which is always good. It’s always good to have a visual of the expertise and experience, but I don’t think it fits right here. Because what it’s doing is it’s creating a giant gap of white space and it’s just pushing this content down. You could actually, you know, maybe get away with putting this after or putting it before this headline. Maybe get away with putting this after or putting it before this headline. Probably not You’d have to find a better spot for this little badge this little bit doesn’t belong here I know that but you know I get that it’s hard to find a spot for it Maybe it would be better. You know if you had a better hero going on you didn’t have the slider situation There might be a spot for the badge in the hero that could work It just doesn’t belong here though, so let’s get rid of that work. It just doesn’t belong here though. So let’s get rid of that. So let’s just delete that. There we go. All right now I think what would fit here is a lead is another lead paragraph right? So you have a little bit of paragraph intro kind of thing and then you can get into your into your three kind of company features.
I think what also doesn’t work here is these icons right? They come across as What also doesn’t work here is these icons, right? They come across as, you know, this is very cliparty. You know, we’ve talked a lot about clipart on web design for dummies. It’s just, it’s not a great representation. It’s like, here’s the copy, like I said, talking past the visitor. And then here’s an icon that just doesn’t connect with the visitor. Because, you know, if I’m a client of this company, I don’t see myself as a scarecrow, right? this company, I don’t see myself as a scarecrow.
That’s not how I want to envision myself or anybody that works with this company. It’s very stiff, it’s very lifeless, it just doesn’t connect. And then this icon is very, very different from these two icons. This is a filled icon, these are outline icons. So there’s a, creates too much of a contrast here. creates too much of a contrast here. These look like they’re most certainly from different icon sets. The rings of this icon are thinner than the line of this icon.
So really all three are from a different icon set. And then, you know, I get what’s going on here, but it doesn’t really speak to this that well. You know, an infinity situation doesn’t really, doesn’t really speak to like, you know, situation doesn’t really doesn’t really speak to like you know anything this company does sustainability wise I don’t I don’t even know yeah okay so maybe put like an environmental type thing here right I don’t think the I don’t think this icon really fits I would like to see maybe something going on with these images a little bit change their sizes create a kind of an off off alignment create a kind of an off alignment grid.
Like one can be a tall one, one can be a square one, one can be a little wide one, one can be another kind of tall, but not as tall as the first one kind of situation. I think that can be a little bit more creative of an image group here. So, you know, this section doesn’t have to go, it just has to be retooled a little bit, reworked. All right, let’s keep going down. bit. Reworked. All right let’s keep going down. David says the family affair icon reminds me of radioactivity. Yeah it kind of does. It kind of does.
Phillip says images could use image group Bravo from from frames. Yeah so let’s go to let’s go see what image group Bravo is looking like here. So So image group. All right, let’s look at image group. It’s going to be hard to see. Okay, so yeah, there you go. It’s going to be hard to see because this is actually not in a container of any sort. That’s, yeah. Oh, oh, geez. Okay.
Just look at it on here. There you go. So yeah, that kind of situation right there. situation right there. So you see this one’s appears to be square or this one’s square. I don’t know but they’re the other like different heights and then this one’s kind of tucked in there and then this one’s more like a traditional image tall ratio. So yeah, it just gives a little bit more life to the images that are going on in that section. Okay, let’s get down to our product categories. So the first thing I notice about these cards is the spacing is off. So the first thing I notice about these cards is the spacing is off.
We have large gaps between the image and the heading and then between the bottom of the text and the card. We have effectively no gap here between the heading and the text and then the gap on the sides is way out of proportion with the gaps here. So just visually let’s see what’s going on here. gaps here. And so just visually let’s see what’s going on here with this card. Okay so here’s one issue right here. Where’s that coming from? Okay there’s a margin top M on these headings which does not need to be there. And unfortunately so So these were, this is a frame, these are frames, but they are frames that were customized with utility classes rather than customizing the actual BIM classes that come with the frame.
And so this is something we try to avoid at all costs. Does this warrant my new sound effect? This may warrant my new sound effect. warrant my new my new sound effect this may warrant my new sound effect guys I we talked about the sound effect last time and I was like I got a program it in I got a program I don’t know I maybe I should save it we’ll just womp womp this we’ll just womp womp I’m gonna save the new sound I’m gonna tease you guys a little bit longer I’m gonna save the new sound for something else something maybe maybe a little bigger, I don’t know. But yeah, this, so pad S doesn’t need to be there.
And this H3 margin top right here doesn’t need to be. I mean, first of all, we don’t want utility classes when we have custom classes available, because we’re just creating an unscalable situation out of a situation that already was ready to be scalable and maintainable. We never want to combine. scalable and maintainable. We never want to combine. If you have a custom class, use the custom class. Don’t introduce utility classes. That would be littering. We talked about that.
It’s it is littering your utility classes. You don’t want to litter. Nobody wants to be a litterer. Okay. Don’t make this site dirty. All right. We don’t want to litter our utility classes. Use the custom classes that are available to you. Where are we? There’s the okay, man, I’m trying to figure out where to you. Where are we? There’s the okay man I’m trying to figure out where all this spacing is coming from. Some of this is coming from the stretch that is on to make these cards all the same height. What I want to do is figure out the body situation here. There you go. So there’s there’s the body class and then this is where you would oh there’s a padding top set on that man we got padding padding on that man we got padding padding and spacing going everywhere here okay so if this was padding like var space M something like that now we get consistent left and right consistent top and bottom though we’re still it looks like there’s a gap in this card somewhere yeah there’s a road gap okay that’s not needed so you don’t need you don’t need the gap because this there’s not needed. So you don’t need the gap because there’s a body and a header. Oh jeez, I clicked on it. Oh gosh, okay. There’s a body and a header, so the body is just going to get the padding and therefore you don’t need gaps. You don’t need a gap between the image and the body, right? Here’s the body and then here’s the image. So you don’t need a gap between the two because the body padding is going to handle that perfectly fine. Now the padding is going to handle that perfectly fine. Now the body is not stretching the full height of the card. Now it is because I put this flex one on here. So now the body is stretching the full height of the card. What we’re going to do for right now, see how my effect is not happening to all of the cards?
That’s because of those utility classes that are littered in here. Excuse me. So there’s now a situation where I would have to go card to card to card to card Excuse me. So there’s now a situation where I would have to go card to card to card to card, removing those utility classes that are causing the spacing issues and then fixing them. And that’s not something that we’re gonna do on here because we’re not chumps, okay? We don’t, we don’t, we’re not chumps.
We try to avoid that situation. I’m not gonna do it because I actively try to avoid that situation. So we don’t wanna use those utility classes in the first place. But this is kind of the situation we would want to get to. And then where you would have a gap in the first place. But this is kind of the situation we would want to get to. And then where you would have a gap is in the body to gap between the heading and the text, right?
So now you would put your gap in here and this would be like var space XS or actually there’s a contextual utility class, FR card gap, right? So all of your cards will have the same gap when you use FR card gap. Now you get in a situation like this. all of your cards will have the same gap when you use fr card gap. Now you get in a situation like this and the white space at the bottom is okay because when you don’t have this extra space at the top with the with the card alignment being stretched but what you would want to do is allow for more text now. There’s really no reason to cut off this text at two lines when you’re allowing these to be three lines. You want to cut off so that they’re all three lines and then they’re all lines you want to cut off so that they’re all three lines and then they’re all going to be even height and there’s no no extra spacing in the card whatsoever at that point so there’s just a lot of things to tweak here to get the spacing correct inside of these cards which they were correct by default okay so in frames like if you got this frame the spacing would have been correct by default so we introduced uneven spacing or spacing issues with the addition of So we introduced uneven spacing or spacing issues with the addition of these utility classes that did not need to be here.
And I’m not sure why they were put in, but they just don’t need to be, they’re only causing problems. Now, let’s talk about this situation where we have a three and a two. Because I see this happen a lot. We’re going to look at the DOM here and see exactly how this was accomplished. But my argument is this did not need to be accomplished. how this was accomplished. But my argument is this did not need to be accomplished and this is the effect some people want where they’re like, well, I have an odd number of items.
And what they don’t want, let’s go ahead and check because I can show you what this would look like naturally. Okay, all right, this is a call for the new sound. Oh no, no, no, no, no, no, no, no. All right, that’s my new sound. No, no, no, no, no, no, no. All right, that’s my new sound. So we have two lists going on here. There’s a UL and a UL. And this is one list of categories.
So we can’t introduce a second list here because that’s semantically inaccurate. You’re telling the bots, you’re telling the screen readers, hey, there’s two separate lists here, my guy. No, but there’s really not. This is only one list of product categories. two separate lists here my guy. No but there’s really not. This is only one list of product categories. So we cannot introduce a second UL. Cannot introduce a second UL. Now you introduce the second UL because you wanted to change the grid structure from three to two. I see what’s going on here. So I’m going to change the oh not 32. I’m going to change this one to three as well.
This is the situation you were trying to avoid. Now notice you’re not limiting the text on these trying to avoid. Now notice you’re not limiting the text on these, but you’re limiting the text on these. But in your mind you’re like, well I don’t want there to be a space here. But this is how grids work and it’s absolutely fine. We talked about this on the last episode of Web Design for Dummies. Having a gap here is absolutely fine.
Visually this is not a problem whatsoever other than the spacing issues. Other than the text length issue between these cards and these cards. other than the text length issue between these cards and these cards. If all of the spacing and the text length were consistent, this would look absolutely fine. It should all be one list. It should all be controlled with a query loop. Okay, we can already see that this is not driven by a query loop as well, which I also think is a bit of a problem.
So why did we, let me refresh, why did we do this situation and make the cards wider? What is the problem with it? did we do this situation and make the cards wider? What is the problem with it? Well, from a user experience perspective, the problem with it is when you make these cards larger to make them take up the entire width of this row, you’re subconsciously telling the visitor that these two things are more important than these three things. They’re larger so they call more attention to themselves. things. They’re larger so they call more attention to themselves. They’re different from the others. Why are they different? There must be a reason they’re different from the others.
Well, to most users they’d be like, well maybe these are the main categories. Maybe these are the things you specialize in. I don’t know. But they look more important because they’re bigger and they’re wider and their images are larger and there’s more text written about them. Something tells me that you want me to think that these things are important written about them. I don’t, something tells me that you want me to think that these things are important but I know they’re probably not more important. They’re probably just like these things. So they should look just like these things and that’s a better UX because you’re introducing confusion when you’re saying hey look at me look at me look at me more than you look at these things but why? I don’t know. Because I didn’t because I didn’t want to empty space in my grid. That was really that was really the explanation right? It’s not that That was really the explanation, right?
It’s not that these things are more important, it’s that we didn’t want the extra space in the grid. Now, if you really, really, like it so offends your OCD, or again, your client has a weapon and the client’s like, no, we’re not going with that. You’re gonna put something there or you’re gonna fix this situation. Well, your other option is you can put a CTA card in here. Okay, so it’s product, product, or this is category, category, category, category, category, CTA.
Okay, so it’s product, product, this is category, category, category, category, category, CTA. Now you’ve filled your space, but you filled it with a secondary thing. See this view all products button? This get in touch button? Well, this view all products could be a card. You could design a card, it can have its own little background, color, kind of stands out, and it’s like a view all products kind of situation. Or view all category, yeah, view all products I guess would be just fine. or view all category. Yeah, view all products I guess would be just fine.
But you put this CTA in this empty space right here. That’s an option for you. If you must fill the empty space, I don’t think there’s a problem with the empty space whatsoever. Okay, let’s keep going down. What are we saying? What about center and using Flexbox instead? I’m not a big fan of that either because I don’t think it doesn’t, we talked about this on the last episode because I don’t think it doesn’t, we talked about this on the last episode of Web Design for Dummies.
Not only do you have to change your whole structure here from a grid to a flex box, but you gotta do other shenanigans like with your card width now, your card width has to be tightly controlled, and then you end up with two centered cards which also look, it looks a little weird. It just, it kinda looks weird. There’s just no reason for it in my estimation. just it kind of looks weird. It’s just no reason for it in my estimation. So I would just leave it like this and move on with your life and then if another category ever gets added it’ll fill the spot or you can fill the spot with a CTA just like I talked about. How to put a CTA card there is it queried? No it’s not no you know not queried at all it’s actually very easy. So imagine that these No, it’s not no you know not queried at all. It’s actually very easy. So imagine that these Other four cards don’t exist only this product this category card exists. This is your query loop right here Then you add a the CTA card right next to it and the query loop will populate and the CTA card will just always be at The end of the list after the query loop populates. So you just have a query loop card and a CTA card and you’re done That’s it and a CTA card and you’re done. That’s it. So hopefully that answers that question.
Symmetry is important blank space looks weird. It’s not though. This is symmetrical. This is symmetrical. You just clearly have one less item, right? But if you look at all grids anywhere, they’re not always have the exact amount of cards that are needed. You can look at people that are needed. You can look at people cards all the time in grids and there’ll be three, three, three, and then two. And it’s perfectly fine because it’s still organized. Your brain understands the grid layout structure. If you have two in the center, it’s not necessarily like, it creates like a little triangle situation, but that’s not happening anywhere else on the website.
You just have this one random grid where two things happen to be centered at the bottom. And then you don’t have clean gutters down the middle anymore. things happen to be centered at the bottom. And then you don’t have clean gutters down the middle anymore. So I don’t know, it’s not wrong to do Flexbox and center the bottom two cards. It’s just more work.
And then my argument is why do the extra work to do that? Why change the entire structure of this section just to get two cards centered at the bottom? When visually to me, it’s like it doesn’t add that much, if anything at all. Sometimes it just looks weird It doesn’t add that much if anything at all sometimes. It just looks weird depending on how the cards are designed All right, let’s see in get those accessibility design standards Can we also factor in the target demographic when doing some of this stuff? What are you talking about specifically?
Not to give less importance to blind users, but what a blind person really be looking at this website Yeah, 100% blind people would be accessing this website. Yeah, if you’ve got somebody who works in this industry and one of their jobs is ordering, product ordering, anything like that, they could absolutely need to navigate this website for sure. But it’s not just blind people. You know, when I talked earlier about the color of these dots, it’s colorblind people too.
My dad was colorblind. There’s tons and tons of colorblind people, right? My dad was colorblind. There’s tons and tons of colorblind people, right? So they’re not blind, but they don’t see colors very well. And there’s different categories of colorblindness. And so contrast ratios are very important, because people can’t see these dots. They don’t even know they exist. Now you’ve got a user that doesn’t really know this is a slider, or how many things are in the slider, or where am I in the slider?
Which, by the way, we didn’t even mention. This is another problem. in the slider, which by the way we didn’t even mention. This is another problem. These dots don’t indicate which slides you’re on, right? So, you know, that would be another issue there. But yeah, no, accessibility is very important. It’s not just blind people that we’re, you know, building sites for or thinking about when we think about accessibility.
There’s a lot of different types of disabilities and we want as many people as possible to be able to use the website because we would like to sell to as many people as possible. be able to use the website because we would like to sell to as many people as possible. That’s kind of the, you know, if you want the business side of it, that would be the business argument for accessibility. Let’s see. Okay. All right.
Good. So, down here with the products. So, this is a symmetry problem right here. So, you want to talk about symmetry, right? symmetry problem right here. So you want to talk about symmetry, right? So here is the vertical alignment of the website and this card starts way inside of the outside alignment. But there’s no visual, and this is actually hoverable right here.
This part of the card that seems to not exist is hoverable, which is not a great thing. which is not a great thing. So what happens here is that’s the card. The card just happens to have a background color of white or no background color, so it’s blending into the section. But what you’re showing to the visitor is, ah, we’ve oddly offset the alignment of these items from where the page is, right? This should be aligned to the left over here, or these cards should have a background color.
to the left over here or these cards should have a background color. I would also say that these images should be larger. So if we came into something like this, now we’re getting into a better situation. But still these cards, where’s the actual card here? Here’s the LI, this is the card. Now this is a little bit different here because this is in a, is there any padding on Is there any padding on the, yeah, there’s gotta be padding on these. It doesn’t appear there’s any padding. Okay, their width is being controlled because they’re in the slider. So what I would say is there’s some adjustments that need to be made here to get this alignment issue resolved.
And then I will say, I don’t know what’s happening with these images, but they look oddly like cut off, right? Doesn’t that look like cut right there? right? Doesn’t that look like cut right there? I don’t know if that’s, let’s actually look at the image. Here’s the figure right here. Here’s, oh look at it. Yeah it’s just like that. So it’s not like CSS or any any issue like that doing. It’s just a weird image. It’s just not a great image. And so what I tell clients in this kind of situation is, look we’re poorly representing we’re poorly representing your product.
We need, this is why investing in photography is very important. I mean, there’s got to be a better way to show this. There has to be a better way to show this is gives like very amateur vibes. You know, this doesn’t come across as like a small company by any means. It seems like they have money. And so let’s invest the money and getting some good imagery. And I mean, this is the most important thing.
This is your product. This, and getting some good imagery. I mean, this is the most important thing. This is your product. This is how we’re gonna represent this product? I don’t think so. I don’t think so. This would be a, I would be putting my foot down on that one.
I’d say, no, we have to invest in photography. If we’re gonna do it this way, we have to invest. If you have to show this product, then we have to do better. We have to do better here with the photography situation. It’s also weird that, you know, again, better here with the photography situation. It’s also weird that, you know, again, we’ve got all these different categories, but it’s the juxtaposition between, I’m looking at rocks or sand, and then I’m looking at chickens.
And then I’m looking at the back of a tractor that’s like five pixels wide. There’s just, it’s not a consistent visual. And you know, I don’t know that this needs to be in a slider either. And you know, I don’t know that this needs to be in a slider either. Because here’s what I’m seeing. Look, here’s the grow lime. I don’t even know what that is. There’s grow lime right there.
So literally, I slide once and I’m back to the beginning. Which tells me, you know, this does not need to be a slider. It should just be a grid. Just make a grid of these and that can’t be the only products. Maybe this isn’t done. That can’t be the only products. Maybe this isn’t done. You got all these categories and these are the only products I’m thinking that’s that’s not correct. Let’s click on this. Yeah, hold on. Yeah, we’ve got a lot more products here so Yeah, look at look at all these Unless there’s overlap between these I don’t know. There’s only one there There’s only two there, okay There’s only two there.
Okay, I don’t know, but they’re not all represented in this slider. The slider would be important when there’s many, many, many, many, many, many things, right? And so they can go through them. But if I just start the slider over, right, I’m just seeing the same things as I slide through over and over and over again. So that doesn’t need to be a slider. Let’s just get a grid there. Just make a grid there. Let’s talk about this situation.
Let’s talk about this situation. I see this situation commonly. What we have to do is tailor, it looks like these have been loaded in, hopefully, into a custom post type. I’m guessing that this is spaced apart, this content. Let’s see what’s going on here. We’ve got a div up here for our stars. We’ve got the body. We’ve got a div up here for our stars.
We’ve got the body. We’ve got the footer. Woo, look at that. All right, so if I grab this, there’s our row gap. But see the gaps? The gaps are a little redundant with the way the spacing is going on in this card. Hmm They are aligned items flex start It’s just the stretch there’s a stretch on the cards and then I’m guessing that this is like a margin top of auto Yep, there it is margin top of auto. Okay, so you want to avoid this situation at all costs, right?
and the situation is caused by the caused by the text discrepancy. There’s a little bit of text here and a whole lot of text here. And it’s just very important, you either limit the amount of text that goes into a testimonial, or you curate the text of the testimonial. You can take all of this and kind of take out all the filler nonsense.
It doesn’t, it’s not really impactful. And just show the impactful part of the testimonial and try to get the lengths of the testimonials as close as possible, and try to get the lengths of the testimonials as close as possible so that you don’t end up with situations like this. And if we view all testimonials, we’re gonna see this problem kind of all over the place, giant long testimonials, small testimonials.
It’s hard to deal with, but there are ways to deal with it for sure. But as like a, here are like, focus on these testimonials. Why I don’t wanna focus on this gigantic gap right here. Here are like, you know, focus on these testimonials. Why I don’t want to focus on this gigantic gap right here. That’s really distracting. So, you know, for these two cards side by side, for sure, we’ve got to curate this a little bit.
And then I was going to say why, like what’s with the big gap between the stars and the text here? I would try to get rid of that. Hmm. Mm-mm-mm. Okay, it’s not all right. That’s odd. Oh, it’s because these okay. Why is it not selecting? You guys see this? It’s not selecting. Are those empty paragraph tags? Is that what’s going on here? Yeah, those were just empty paragraph tags. I was like, what? There’s no padding in there.
What’s going on? All right, here’s the paragraph right there. There’s another empty paragraph tag. So I think what’s happening here, if I had to guess, is this is a query loop. You’re pulling this dynamically, but you’ve pulled content from a rich, like probably the WYSIWYG custom field into a paragraph tag element, probably the WYSIWYG custom field, into a paragraph tag element, which causes paragraph tag duplication.
This actually needed to be a div, and then it would put the paragraphs inside of it correctly. And it’s unfortunate that you need the extra div or whatever to have the dynamic content from a WYSIWYG, but it’s just life. But if you put the WYSIWYG content in a paragraph tag, I think we covered this maybe the last episode or the episode before, you end up with duplicate paragraph tags covered this maybe the last episode or the episode before, you end up with duplicate paragraph tags or extra paragraph tags and sometimes blank paragraph tags. There’s also a setting where you use, let’s go in here, on the WYSIWYG element. Do I even have any custom fields in here? No. Well we can put one in. I don’t need a new group. I need a new field. Thank you. So you add the So you add the WYSIWYG custom fields, and then you save data in the raw format.
I believe that’s the setting. If you’re using MetaBox, you click this setting and that will usually solve any empty paragraph or duplicate paragraph tag issues. But you still have to make sure that you put the WYSIWYG custom field content dynamic data in a div and not in a paragraph element. Okay, that’ll solve that. in a paragraph element. Okay, that’ll solve that.
Let’s go over this, latest from Instagram. Here’s another client request all the time. If I was doing the design of this page, never in a million years would I say, you know what you need? You need your Instagram feed. You know what you need, construction company? You know what construction buyers really care about? Your Instagram. what construction buyers really care about?
Your Instagram. That’s what they really care about, is Instagram. No, they don’t care a lick about your Instagram feed. And here’s a problem, you know, that I say this is a huge problem. What is the goal of the website? The website is the central marketing hub, the online marketing hub. Your entire goal of having a website hub. Your entire goal of having a website is to get people to the website. If you have an Instagram, if you have a Facebook, if you have a TikTok, these are like satellites that orbit around your website. And the goal is not to get people to the satellites, it’s to get people from the satellites to home base, which is your website. You’re going backwards here. You’re saying, hey we got You’re going backwards here.
You’re saying, hey, we got you on home base, but don’t you really wanna go to one of our satellites? Come on, man, click and go somewhere else. And even worse. Oh no, no, no, no, no, no, no, no. Even worse, it happens in the same tab. And so now you’ve taken hard-earned traffic and you’re like, just go. Go off to Instagram and start looking at cats and people’s pictures of their meals.
And don’t worry about us so much, right? start looking at cats and people’s pictures of their meals and don’t worry about us so much. Just go take a little trip through Instagram and hopefully you’ll make it back around to us someday. That’s exactly what’s happening here. Don’t do this. This is a, I hate seeing this on websites. Unless you’re an influencer, that’s it. That’s the only time.
influencer and you crush it on Instagram and you want more eyeballs on Instagram this is perfectly fine. If you’re a construction company ain’t nobody care about no construction companies Instagram page. Tell you that right now okay and you’re taking hard-earned traffic that’s on the main online marketing hub for this company and you’re just shooting them off into outer space because once they go here they ain’t coming back. Most likely they’re once they go here they ain’t coming back. Most likely they’re not coming back. So you know delete. But here’s the thing clients will be like we have to have our Instagram on there or you know Bev from marketing from McGrath marketing Bev is like you gotta put our Instagram on there. No Bev we don’t. We’re not Bev I hate to break it to you but we’re not putting the Instagram feed front and center right here and getting people to click on it and say I know you want your But we’re not putting the Instagram feed front and center right here and getting people to click on it and say I know you want Your Instagram numbers up Bev, but we’re not doing that. Okay, that’s not helping us sell more stuff And so this has got to go right here delete that Latest news Fine. Okay Let’s go down. We got our footer. Okay clean. I think we’ve done enough on this website We’re 50 minutes in we can jump to our second way. I think we got enough just on the home page here We’re 50 minutes in, we can jump to our second way.
I think we got enough just on the homepage here. We can go into the other pages, we can do other stuff, but we’ve talked about enough on this homepage right here. We all know of Bev. Bev shows up every episode. You know Bev is gonna make her appearance. All right, Simone says, don’t send people outside, 100%. Leave Beth alone, Fred is worse. I’m not gonna go outside 100% leave Beth leave Beth alone. Fred is worse. Hey, it could it could absolutely be Fred and Fred and marketing. Alright, so let’s see. Thanks, Kevin. Teach me how to get out of the hellfire of maintenance and managing a website. Yes. All right. Never took much notice of accessibility stuff until I had a problem with one eye and it doesn’t do contrast too well suddenly notice how many places I’ll suddenly notice how many places use light gray on white paper.
Yes. All right, cool. Are you guys ready to move on? Any questions before we move on? Drop your questions in. I’m gonna go ahead and close this one up. Also be thinking about any mini tutorials you wanna see. Let’s bring this next website onto the page. All right, and let me get my Ecamm window back so I can see our chat.
All right, and let me get my Ecamm window back so I can see our chat. Okay. All right, let’s roll right into this one because I do want to save time for anybody who has any little tutorial requests or anything like that. Let me get a sip of water here. Okay. This was, was this translated? Let me go incognito for a second. No, okay. There was no request to translate.
Okay, so this is in English. Okay, good. First off, right off the bat, I don’t know. What one, there’s no SSL certificate here. I’m guessing this is a temporary address for your agency that you’re doing something cute I’m guessing this is a temporary address for your agency that you’re doing something cute with ididyourwebsite.com. But do you only work on one website at a time that you load up their site on this URL, right?
Because you don’t have multiple of these. Maybe you do. Maybe you’re like ididyourwebsitetoday.com. Ididyourwebsiteyesterday.com. I don’t know what’s going on with this. Whose website is this? Tell me what’s going on with your domain up here. What insight is this? Tell me what’s going on with your domain up here. But we’ve got Meridel’s, Meridel, is that how you pronounce it?
Holistic Therapy. This is in Spain. I don’t know what this means. I don’t know if this is a family name or it means something special. Not sure. But here’s what I’m, guys, what am I, no scroll test, no scroll test, dummies. What am I going to say about this right here? Domies, what am I going to say about this right here? This situation, this, this whole, I’m just going to circle this whole situation right here. You should already know if you’ve been to multiple episodes now, what are we going to say about this hero right here?
There’s something very important about it. Very, very, very important about it. Fred wants more logos. about it. Fred wants more logos. Bev wants the gram. Yes, it was probably Fred 100%. Fred’s the business mind, right? Fred’s like, Oh, no, we got to show all of our sister company logos up there. So that Fred was responsible for the logos. And Bev in in marketing 100% wants people on the gram. She doesn’t care about the website because she’s not responsible. She’s just she’s the social media Person right? She only cares about the social media channels. So she wants everybody on the on the gram. Oh Chris stops he nails it the first the first Dommy Says missed opportunity. Yeah, what is the missed opportunity?
The missed opportunity is very clear and apparent in the header You’ve told me this is Merideth holistic therapy and you’ve shown me the Sun Meridell’s Holistic Therapy. And you’ve shown me the sun, okay? I don’t know what those things are called. Well, it’s actually the moon. It’s the moon, but it’s a, what are these called? There’s a name for these things. But anyway, you’ve told me this is Meridell’s Holistic Therapy right here.
But now you’re saying, hey, you know, we also want to tell you again. We want to remind you, in case you forgot, after looking at our header, this is Meridell’s Holistic Therapy. And you just added a couple more words here. This is Meridell’s holistic therapy. And you just added a couple more words here. But what we need, what should be here is an impactful heading, an impactful lead paragraph, something that really tells me what’s going on here.
And really what’s happened is you’ve just told me the exact same thing in two different places, you know, 500 pixels away from where you told me the first thing, you just told it to me again. So we need something different here. where you told me the first thing, you just told it to me again. So we need something different here. What should it say? I don’t know.
As we get down the page, we can think about it. Maybe we’ll come back and revisit this. What could this say? But right now it’s a waste of an opportunity to have an impactful heading, an impactful lead paragraph, and really suck the visitor in and make them wanna see what’s going on here. All right, there’s not much else we can do on the no scroll test other than, this is a little interesting.
There’s not much else we can do on the no scroll test other than This is a little interesting. We’re open Okay, I wonder if this is dynamic based on the Hours of the day and the days of the week that would be cool if it was This menu situation What are we gonna say about this menu situation is this day is a people who want holistic therapy? is people who want holistic therapy, are they known to be a very techie audience? I don’t think so, but this is a very techie header, right? And so sometimes I see the web designer is techie, so they’re like, well, we gotta go the techie route.
But really, it’s a situation where I would just like to see a standard menu. Look at all this wasted space up here, where we could just have menu items. And the person could just see right when they arrive what they wanna click on. And they don’t have to go, where’s the menu? right when they arrive, what they want to click on. And they don’t have to go, where’s the menu? Imagine my mom, right?
My mom, she’s not the most techie person on earth. She calls me about everything. I feel like I’m tech support for my mom. And she would not, I don’t think she would go right here and be like, oh, that’s the menu, and just click on it and open it. And so if it was my mom, and just click on it and open it. And so, you know, if it was my mom, she’s probably not getting any holistic therapies.
She would probably get a little confused with what’s going on here and maybe not become a buyer. And see, look at this, it’s very, look at this faint menu. Anybody, you know, colorblind, they’re not seeing this back here. This is definitely not accessible. See that? Oh, there it is.
Did you have trouble seeing it before? There it is. trouble seeing it before. There it is. It’s very techie, right? It’s like I would expect to see this on like a gaming site or like, I don’t even know. Just yeah, very techie site. Not this site. Not a not a holistic therapy site. This just kind of feels out of place. In fact, I will say this font feels out of The font feels out of place, doesn’t it? Doesn’t this, this is a very like, I hate using the same word over and over again.
This is kind of a very techy kind of font. I don’t know. It gives me like Star Trek vibes or something. Or like, yeah, I don’t know. It’s not, it doesn’t feel warm and inviting and it doesn’t particularly feel very feminine, which it seems like this would be more of a feminine kind of thing. which it seems like this would be more of a feminine kind of thing. Yeah, I don’t know I’m thinking the typography has to be redone here.
I mean, I guess this you know, the body text is fine, but look at this. What’s going on with our paragraphs right here? Let’s we’ll take a look at that in just a second. second. All right. What are what are your first thoughts? What are your first thoughts on this site right here? Someone says alignment issues. Is it not too far? I don’t know what too far means. Oh, you mean like way too much white space here? Yeah, What’s going on here? All right, so this is oxygen. Wow, I have not seen, it’s been a minute since I’ve seen Oxyninja. Been a minute. And I got to get, I got to get used to this because oxygen puts the padding in the wrong container for sections. So there it is right oxygen puts the padding in the wrong container for sections.
So there it is right there. See hero one, but that’s actually not what’s doing the job. I’m guessing there’s a height on this section. There it is. 100 V, oh no. We don’t wanna use height. You don’t wanna use height. We don’t want to use height. You don’t want to use height, an explicit height for this.
Because now it’s not a problem with this content here, but if the content ever got a lot larger, it would overflow. It would cause an overflow issue. Can you duplicate and oh gosh, it just changed my whole thing. Is there a shortcut for duplicating elements? Like I can right-click and do, duplicating elements Like I can right-click and do is it really they don’t have a shortcut for this Okay. Well the padding on here Did I remove the padding I don’t know we’re good we’re just approaching the we’re approaching the overflow point Duplicate I wish there were bigger things I could duplicate Duplicate again Duplicate again. There you go And there you go.
Once it, it also depends on your screen size here. I do have a very large screen, so it takes a little bit more to create an overflow. But look what’s happening. Because your hero is not allowed to get any bigger. It is explicitly set to 100 VH, and that overflow situation can be even worse if I’m on a smaller screen, right? So this is a no bueno situation. So this is a no bueno situation.
Let me refresh here. How can we improve this? Well, number one, we can take off the height, 100 VH. Now let’s see. Okay, instantly we’re getting better. Oh, check this out. This is why you use automatic CSS, right? This site is not built with automatic CSS. We have an overlay header. right? This site is not built with automatic CSS. We have an overlay header.
I’ve talked about this many, many times before. This is a one-click fix in automatic CSS. You have an overlay header. The problem with overlay headers is that they eat up padding inside the first container. And so what you have with this section is even padding. So if I go here, and we have to go the inner container because it’s oxygen, and oxygen puts this on the wrong container like I inner container because it’s oxygen and oxygen puts this on the wrong container like I said before. We see the padding top and the padding bottom are equal 150 pixels. Now we shouldn’t use pixels but nevertheless they’re equal. 150 is equal to 150. Does this look like even padding to you? Look at the amount of padding here and the amount of padding between here and the start of our header.
It’s not even. Visually it’s not even because the header takes up a lot of Header it’s not even visually it’s not even because the header takes up a lot of space so what we have to do is create an offset and It’s a real pain in the ass to create this offset manually everywhere now an automatic CSS. You just say offset Header content and BAM. It’s done. It’s fixed So you just put in the height of your header and you’re off to the races You’re good to go and it makes all of this perfectly even good to go and it makes all of this perfectly even. So you know just a quick selling point for automatic CSS there. Finding common issues on websites and fixing them with one click is a little bit of what we do. So yeah that’s but this is a better hero right here. This is I you don’t need the gigantic 100 VH hero situation. Alright let’s talk about this right here. It’s different. It’s very It’s different. It’s very different, right?
So, hmm, first of all, I don’t, I think the centering of the text and stuff is throwing me off. So there’s an H2. Where’s the centering coming from? Right here. Okay, let’s check Okay, let’s check that out. I Don’t know. Maybe it has to be centered. I This whole visual situation looks a little bit much to me. I don’t know Also because it’s full width and I’m just on a gigantic screen. What is this? What’s the experience on a smaller screen? Let’s get this over here Let’s get this maybe something in there all right, I Don’t know. I don’t know I don’t know.
I don’t know. Is anybody digging this layout right here with all these card options on the left, and then this big image on the right with another kind of, visit the well-being center. I mean, you’re trying to, what do you want them to do? What do you want the user to do? I would think you’re presenting the therapies. That’s what you want them to focus on. That’s what you want them to click on. to click on, why are we pulling attention away from that with this second half of the screen and a completely separate call to action?
Icons too detailed and not enough contrast in the colors to be that small. There’s also a hover issue, right? I can barely see that hover glow effect back there. there. So I think there needs to be a little bit more going on with our with our hover effect. But what is also the problem here is these are very cliparty. Once again we’re into the realm of clipart and it doesn’t this look very cheap and chintzy and just like amateur right? Look at this what is this? What is this dude doing with his thumb? I don’t even want to know. Future life don’t even want to know. Future life progression. I’m not even sure what that is. You know, I would say as well, this kind of presentation assumes that people know what these things are. Does anybody know what automatic spirit writing is? I don’t. Daily energy routine.
Don’t know. So when you have a situation like this, what should we do? Well, we need a little sentence right here under each one. There needs to be a little explainer sentence under little sentence right here under each one. It needs to be a little explainer sentence under each one of these to help people understand what’s going on before I click. Right now you’re kind of forcing me to click on every single one of them. So I’m going to click on this one and see where we go. We’ve once again we have the 100 VH hero situation happening. Takes up a lot of screen real estate. I’m a fan of this when and I don’t even think Tesla does it. Okay they do it with I’m a fan of this when and I don’t even think Tesla does it. Okay, they do it with this hero. Okay, yeah, they do.
Alright, that’s why it triggered in my brain. When is it appropriate to take up the entire screen with a section? Okay, let’s compare and contrast. I’m going to let you guys answer this. Okay, here is a 100 VH section. Here is a 100 V8 section. I’m saying this one is wrong. I’m saying this one is right. What is the difference? What is the difference? There is a clear difference. This and it’s not it has nothing to do with this clipart icon. Get rid of these clipart icons, please. Joker says he likes the Joker says he likes the color palette though. Yeah, I don’t have any problem with the color palette. It’s yeah, the color palette is just fine. I like the colors. I don’t like the typography and I don’t like the way the colors are necessarily used, right? Like these glows that I would expect to see on a, like I said, like, you know, in gaming or something.
Like a gaming brand. That would be fine, but this is not a gaming brand. It kind of, would be fine but this is not a gaming brand. It’s a completely different vibe. Yeah so Ediwear says look at here we have gorgeous photography of the product right and so you’re like the the this is not the content okay this is just a little badge effectively the content is this image The content is this image. It’s like we need to show this, we paid hundreds of thousands of dollars, most likely, for this photography. No joke.
Tesla pay, and I’m not saying all in all they pay a hundred, I’m saying for this little photo shoot right here that just made up their homepage, they probably paid hundreds of thousands of dollars for it. Commercial photography is not cheap. So, and it’s beautiful. Commercial photography is not cheap. So, and it’s beautiful. And it’s like that is the presentation. So let’s make it as big as possible.
Let’s make it take up the entire screen. Good design decision. This, not, none of that is going on here. This is a stock photo. It’s darkened, it’s pixelated. It’s like none of that is going on here in this hero section. So this just is not, What’s going on here in this hero section? So this just is not, if you don’t have a reason, if you don’t have a good reason, this is a good reason, not a good reason to take up the entire person’s screen.
Okay, let’s go back. Typography is part of the initial branding, I think if you look down the page. What do you mean? Yeah, yeah, yeah, I know. What do you mean? Yeah, yeah, yeah, I know. It’s the same font is in the logo. I mean, I don’t like it there either. They’re using the same font on the page as in the logo.
I get it. But also look at the spacing of the characters. This, I’ll just tell you, the logo was not done by a really solid branding designer, 100%. I mean, look at the, you know, the icon is nearly touching the text here. I mean look at the the you know the icon is nearly touching the the text here So it’s just there’s there’s problems with the logo the font all together scrap the font in the logo and across the way It’s just we need we need a different. We need different typography here What is AI generated let’s see GPT Tesla for GPT Tesla for What’s happening with the scrolling on that page is it smooth scroll hard to use?
I’m not getting a smooth scroll effect, and I do agree with you. I hate smooth scrolling type stuff I’m not getting that effect, but they they did style the scroll bar Emotional damage Let’s see Let’s see. Maybe it’s too dark to be a therapy site or is that dark color is good. I could see you making the case for, you know, a dark site for a therapy site is not the best. But I think if you’re saying, look, we don’t want to be like everybody else. I think that’s what was going on here, right? We have this holistic therapy business. We don’t want to be like everybody else. We want to stand out. We want to do this holistic therapy business.
We don’t want to be like everybody else. We want to stand out. We want to have our own look and feel. We want to, you know, we really want to be different. I don’t think there’s any problem with the fact that it’s dark. I think the problems arise with the other aspects of it. The typography, how the color is used, like with these hover effects, the clip art icons, the clipart icons, which by the way, the clipart icons, the color doesn’t jive with anything else that’s going on on this page.
Right? I don’t see this blue anywhere else. So like, why is it there in the clipart? Probably because that was the color of the clipart. It can’t be changed. I don’t know. Is this an SVG? Yeah, it’s just an image. Let me get this out. Yeah, it’s just an image.
Let me get this out. Oh, it is an SVG image. So you could have changed this, but it would require you to open every one of these icons in Illustrator. And that would just be a pain in the ass. Yeah, 100%. But I just get rid of them all together. I mean, look at this. Hypnotherapy. I don’t want to see a dude that’s hypnotized, like old school cartoon hypnosis, like his eyes are spinning. cartoon hypnosis like his eyes are spinning that’s not giving off the right vibe for hypnotherapy so all these icons got to go yeah 100 all those icons got to go it’s too masculine for a holistic therapy side in my opinion i like the colors though but yeah so i i think the vibe you’re getting for masculine is the is a lot of that’s coming from masculine is the is a lot of that’s coming from the typography the all uppercase right you know yeah the the modern kind of techie gamer vibe on the hovers because I don’t think this color is specifically masculine I don’t think the background colors are specifically masculine I don’t know what’s going on with these like 3d wave kind of things in the background which changes from I don’t know what’s going on with these like 3D wave kind of things in the background, which changes from section to section.
I don’t think that really adds anything to what’s going on. I don’t think this needs to be a full-width section, right? So you’ve got your two people that are existing way over here on a big screen. The text that’s talking about these two people exists way over here. So we end up with this gigantic gap in the middle. So we end up with this gigantic gap in the middle. This is why you have to be very careful with website widths and how you’re presenting content.
Because on a normal screen, well, hold on, I mean, wow. Let’s go. What happened? Why did it scroll me to the top? All right, let’s go back to here. Look at that. That’s a problem, right? I mean, this doesn’t look great. These images do not scale appropriately. I mean this isn’t this doesn’t look great. These images do not scale appropriately. They get too…geez it takes me back to the top when it stacks. Those get way too small way too fast.
And you still end up with kind of a too large of a gap there. Look at that. That’s way too large of a gap for this screen size. You also have a very light border that hardly anybody can see around this box which has extra border that hardly anybody can see around this box which has extra padding in it which isn’t needed because I can’t really see the visual border so it’s just to me it looks like it’s just creating a lot of extra spacing so there’s definitely some issues there. I’ll show you guys the box so you probably can’t see it with the resolution that we’re that we’re dealing with here. There’s the box. See how it’s in a box? But you really can’t tell when you There’s the box. See how it’s in a box?
But you really can’t tell when you load the site that it’s in a box. That line is so faint. And so all this padding is just extra spacing that doesn’t need to exist. All right, let’s go to a sub page. Let’s check out a sub page. Let’s go to therapies. Hmm it’s taking a while. It’s taking a while. Let’s look at the chat here. Question in that case if they have a shitty logo but don’t have the budget yet to hire a branding expert should you go off their brand guidelines? May it be typography or color palette? Really really really good question.
I’ll put that up on the screen. There’s a couple different ways to handle this. The way that I handle it is I take the client aside digitally, right? So we get on a call or whatever and I talk to them first about where the logo came from. Because the last thing you want to do is you know just start, just start you know disparaging the logo. logo because then you come to find that the client actually created the logo and they just absolutely think they did a fantastic job with it. So the first thing is you want to know where the logo came from. Where did the logo come from? And I usually say, hey, you know, I see all the products that you have here.
I’d like to know more about your target customer. We do this during the discovery phase. I mean, these are natural questions, right? We want to know what kind of people are expected to come to the website. We want to know what kind of people are expected to come to the website. Tell me about your target customer and tell me a little bit about how your logo came to be. How did this branding come to be? Did you guys hire a branding person? What kind of concepts did you go through? What were you going for?
Get them to start really talking about the process and how we arrived at this not great thing. And they’ll get all into it. not great thing and they’ll you know, they’ll get all into it and then what I typically do is I will speak to their goals, right? You told me you had a goal of reaching this kind of person this logo that I’m looking at based on my 24 years of experience Isn’t a great fit for that market. It’s not a great fit for what you’re trying to accomplish that market. It’s not a great fit for what you’re trying to accomplish. Okay. And then I’ll start pointing out some issues, right? So the letter spacing, we’ll point that out. We’ll point out the spacing issues between the icon and the actual text. We’ll point out the way too wordy here. There’s too much going on in the text itself. There’s a lot of things that we can point out, right? And so we’ll just kind of start going through it. And then what I might, you know, it’s start going through it and then what I might, you know, it’s depending on the answers that are given. What if they’re like, well, you know, my long lost daughter, this was her favorite thing when she was eight and there’s some, there’s always some reason why this has to be there.
There’s something about that that had to be there. And if that has to be the case, it’s like, okay, we can, let’s, we’ll keep that. We’ll keep that. But what I’d like to do is give it to my branding person and let’s clean this up What I’d like to do is give it to my branding person and let’s clean this up a little bit and let’s maybe rethink the typography because it’s really not great typography for the logo. And so let’s basically take what’s there and just fix it, okay? Because there’s some things here that could just be fixed. And suddenly when you fix the typography, maybe this thing, right, is their long lost family heirloom and it’s got to be there, okay? But that doesn’t say anything And it’s got to be there.
Okay, but that doesn’t say anything to the typography. So I don’t have any problem with that if I can fix this. Can I fix this, please, please let me fix this. And then suddenly when we fix this, we don’t have to copy the problem here and everywhere else on the page with every heading. So suddenly we’re now working towards a better place. And that’s kind of how I deal with it. And then they’ll be like, well, you know, if it’s like construction, right?
Oh, well, we got to change it on every truck. And then they’ll be like, well, you know, if it’s like construction, right? Oh, well, we got to change it on every truck. Like, well, you know, you should have talked to me before you decorated the trucks. Yeah, it’s a problem, but like, do you, don’t take the junk and say, well, let’s just multiply the junk. And, you know, because we multiplied the junk, we got to keep the junk.
No, you don’t, you really don’t. We should just do this right. Now, the problem is more expensive now because you’re only consulting with me now. And somebody should have pointed this out ahead of time, only consulting with me now and somebody should have pointed this out ahead of time but and it’s unfortunate they didn’t but it’s not it still does need to be fixed it’s definitely still a problem so that’s kind of how I handle it and you know what sometimes in those situations where they got well we got 30 trucks we can’t redo them all well you can’t redo them all now but you can redo them all at some point and we need to be working towards that so you know it’s we need to be working towards that. So, you know, it’s just, it is what it is. You got to tell them the truth. All right, let’s let’s keep moving on. We’ve got the icon is not fit to the dark theme. Correct. They need some softer pictures, moments, new icons, fonts, etc. Yes. Let’s go to the sub page that we were talking about. I just want to know what spirit writing is. Is this like spirit cooking? Hopefully, it’s not writing is. Is this like spirit cooking? I hope it’s hopefully it’s not like spirit cooking. I don’t know. I that was the the vibe I started to get. You remember that situation? I don’t know. Maybe you don’t. If you’re not from the US, maybe you don’t remember that situation. Automatic writing is a psychic or parapsychological phenomenon that enables a person to produce written words without consciously writing. Okay.
Okay, we can do a lot of copy analysis here. Let’s just focus on copy now. We did a lot on the design. Let’s just focus on copy. We already said on the homepage that this hero copy doesn’t work. But now we’re getting more specific. We have something specific that we can talk about. Automatic spirit writing. Now, I don’t know anything about automatic spirit writing. But what I do know, it’s actually good.
automatic spirit writing But what I do know it’s actually good. It’s good that I don’t know anything about it because your copy should educate me I’m gonna assume that a lot of people that come here don’t know what automatic spirit writing is In fact, let’s do a quick poll in the chat. If you know what automatic spirit writing is type Yes, and if you don’t type no, we’ll just keep it very simple We’ll just keep it very simple. Keep the voting very simple. If you know what it is, hit yes. If you don’t know what it is, hit no.
And when I say know what it is, maybe you heard about it before. Maybe the term rattled around in your brain somewhere at some time. But I mean you actually know what it is, enough to like sign up for it. Somebody says yes. All right, try to be nice. Alright, try to be nice. I know there’s some people who aren’t woo. They’re not woo woo. So not everybody is woo woo, but we can still be nice to woo woo. So we got a lot of no’s. No, no, no. We got one yes.
Okay, so by reading this page I should get a good understanding of what understanding of what automatic spirit writing is, how it works, what the benefits to me will be, what the outcome will be, what is my current problem, what will the outcome be. These are the things that I should gather from reading this page. Let’s see if I gather these things. No, no, no, no, no, yes. No, but I’m not into I’m not into holistic stuff, so it might be insider jargon. Okay. Automatic writing is a… So, first of all, automatic spirit writing, automatic writing. Okay, we got to use the exact term again.
Automatic spirit writing is a psychic or parapsychological phenomenon. So, is it a phenomenon or is it a service? Is it a controlled thing? Is it a thing that just happens? Need some clarification here. the thing that just happens, need some clarification here, that enables a person to produce written words without consciously writing. Great. You told me the feature.
You still have yet to tell me the benefit. We’ve talked about this on many episodes of Web Design for Dummies. When you are writing copy, there’s an itch that people have to describe There’s an itch that people have to describe the feature or describe the product, and for some reason, they always, not always, they very often fail to tell anybody why it matters, right? And I use the example all the time of, you’re trying to sell a computer.
So like, but sir, it’s got eight gigs of RAM, it’s got a 300 terabyte hard drive, it’s got this, it’s got that. It’s got a 300 terabyte hard drive. It’s got this it’s got that you’re great. You’re telling me the features Let’s go back to my mom Selling my mom a computer mom. It’s got 32 gigs of RAM. I just told her the feature and What does she have to say back to me? Why the hell does that matter? What does that mean? Mom, it’s got a 1 terabyte hard drive Why should I care Why should I care?
Mom, it’s got this, it’s got that. You’re not selling anything to anybody. You’re just spitting out features. And so you’re telling me automatic writing is a psychic or parapsychological phenomenon that enables a person to produce written words without consciously writing. Why? Why would I care? Why should I do this? Why should I keep reading? What is the outcome going to be? What is the outcome going to be? What is the benefit going to be? If you want to write a good lead paragraph, you say quickly, what it is, why it matters.
What it is, in this highlighted area, why it matters, right here. This does not have a why it matters. So I’m still searching for the why it matters. Let’s keep searching. We’re gonna go down. The best time to plant a tree was 20 years ago. The second best time is now. a tree was 20 years ago. The second best time is now. Did that tell me anything? Did that tell me anything about automatic spirit writing? Did it tell me what the outcome is going to be? Now we’re talking about planting trees and Chinese Proverbs doesn’t answer the questions that I need answered.
Look at this. Don’t care how long it is. Don’t care how much it costs. Don’t care where it happens. Don’t care who it happens with. Why? Because I don’t don’t care where it happens, don’t care who it happens with. Why? Because I don’t know what it does. I got to know what it does to care about any of these things. Because I ain’t signing up for it. So doesn’t matter how long it is. Doesn’t matter how much it costs. Alright, let’s keep going. We have a giant paragraph. It’s got to be in here somewhere. Let’s dig deep. Automatic writing is a… come on now.
Automatic writing is a… come on now. What is this? Copy, paste? Copy, paste. So you’re not helping, you’re not giving any more details. You’re just saying the same things over and over again. Wasted opportunity. The content of automatic writing is produced through paranormal means. It’s from a supernatural source. Automatic writing as well as trance writing can often be found in spiritualists and theists.
and theists. If I was writing, if I was in high school again, junior year, and they’re like, you’ve got to write a paper on automatic spirit writing. I don’t know why they would ask that, but let’s say they asked that. This is kind of what you would get. You would get a term paper. This is a term paper on automatic spirit. This is not sales copy. Okay. This is a, This is a term paper. Let’s keep trying to find it. Automatic writing involves the production of a message either by a physical object without conscious intervention, although the practice is often attributed to mediums and psychics. Automatic writing is considered to be an automatic process and a psychic one. It’s also a form of channeling and generally involves writing down messages or information that spiritualist feels are being communicated by another entity.
communicated by another entity. At this point I would like another entity to show up and tell me why I need to do this. Okay? This form of channeling is where a spirit takes control of an individual’s hand to produce an unknown script. Automatic writing is believed to be the activity of unconscious beings or spirits. Okay. I’m still searching for the why. What am I going to get out of automatic spirit writing. Where is, what is my problem now? Ok, let’s be very basic about this. Problem, spirit writing, solution. Ok? Problem, spirit writing, outcome. That’s all you have to do with the copy. Here’s your problem. Spirit writing connects your problem with your outcome. How? Tell me. Logically, right? Make it make sense.
So get me down that path. That’s all you tell me logically right make it make sense so get me down that path that’s all you have to do writing a term paper about automatic spirit writing doesn’t get it done Chinese proverbs doesn’t get it done this little paragraph right here about a feature about whatever it is doesn’t get it done so now I come down not gonna book now not gonna do it I have no reason to yet I don’t know what my problem is don’t know what my outcome is going to be don’t know how spirit yet. I don’t know what my problem is, don’t know what my outcome is going to be. Don’t know how spirit writing is going to bridge those two things.
All right, knowing is making a difference. And now we have some very short testimonials, very short testimonials. Okay, let’s go back and we’re going to see this problem repeated over and over again. And this is going to, I’m just guessing, I’m just guessing that we’re going to see the problem repeated over and over again. repeated over and over again. I’m going to go to deep chakra healing. I know I’ve heard the word chakra before, okay, so I’m a little more familiar with this than I was the other thing. But still, what are we looking for, guys? What is my problem? What is the outcome? How is XYZ going to get me from one to the other? How is deep chakra healing going to get me there? In this session, you will be clearing and energizing eight of the body’s chakras on a session you will be clearing and energizing eight of the body chakras on a deep level.
Okay this would be described as a lazy copy. Once again we see um we we lack the why right here’s what it is and then we’re missing the why it matters part. Okay we come down here oh gosh wow this is a uh this is really this this quote is really special Wow, this is a… This is really… This quote is really special to the person who is running this site. Because we’re going to see it on every page, I guess. And then we get our term paper again. In this session you’ll be clearing and energizing eight of the body’s chakras on a deep level. Firstly, I will guide you into a grounding and protective meditation.
Once in a relaxed state, we’ll be concentrating on each chakra in turn, where I will then guide you… in turn where I will then guide you. Guys, stick around because there’s going to be a major lesson that comes from this. Major lesson incoming, okay? Once in a relaxed state, we’ll be concentrating on each chakra in turn while I will then guide you through clearing and releasing any lower energy or trauma stuck within that chakra from all lifetimes, getting to deep core issues.
I’ll guide and talk you through the process, give you the sacred space to be shown, these deep core issues which may be forgotten. give me the sacred space to be shown these deep core issues which may be forgotten. I will help you by asking key questions if needed to bring them up and to show you to be shown to you. We’re going to get into many tutorials in just a second if you have any if you have any anything you want to learn on the fly. Then we can clear release and heal. I will then give sound and energy spirit healing as we go through each chakra clearing at the end of the session you will have at the end of the session you will have your main energy chakras cleansed. Okay. Here’s, here’s an outcome.
At the end of the session, you will have your main energy chakras clean, cleansed balanced and full of universal light energy. Having been released of lower energetic core issues. This will help your overall health and wellbeing. Okay. Here’s the thing. I don’t want to help my overall health and wellbeing. Anytime you’re selling fitness, health, nutrition, Anytime you’re selling fitness, health, nutrition, whatever, you never, overall health and well-being is never the selling point. Nobody cares about overall health and well-being enough to invest a lot of money in doing a specific thing. They need to recognize a specific problem they have and pay to get that specific problem fixed.
and pay to get that specific problem fixed. They don’t pay to fix generic problems, okay? So that’s number one. This is not impactful because it’s far too generic. But it also doesn’t really give any specifics of like, I just need a little more to chew on, right? These sessions have helped people become more confident within themselves. Okay, now you’re gonna list some specifics. Becoming more open to their spiritual path.
Okay, now you’re going to list some specifics. Becoming more open to their spiritual path with new awakening gifts coming on board, feeling lighter in their energy and physical body, an insight into issues and once cleared, giving them overall a sense of calmness and peace. It feels a little nebulous. It feels a little generic. It doesn’t feel quite specific enough. This is a little bit better than the other copy that we reviewed over here, but it’s not a lot better. that we reviewed over here.
But it’s not a lot better. This could be done a whole lot better. Also, I need imagery. I need, you know, break this up, give me some bullets, give me some subheadings, give me some more stuff to chew on. You have more space here. People will read more content if it is captivating content, engaging content. I mean, think about a sales page. People will read 2,000 words of sales copy I mean think about a sales page people will read 2,000 words of sales copy if it’s captivating sales copy if it’s got images in there right if it’s got it’s broken up with all these different things so What happened here? This is the big lesson incoming, right?
The majority of this site is these Services one two three four five six seven eight nine. I think that’s all of them. Let’s make sure that’s all five six seven eight nine I think that’s all of them let’s make sure that’s all let’s click on view all therapies oh it’s not my gosh whoo okay one two three four five six twenty four services twenty four services these twenty four services make up 90% of this website so what most people will focus on 90% of this website So what most people will focus on and this is clients and web designers We got a nail we got to get the colors the way we want We got to get the typography the way we want We got to get the imagery on the home page the way we want They spent a bunch of time probably on like should we have the 100 VH heroes, right?
VH heroes right what’s going to be our hero photo back there what’s going to be the layout of these pages alright we’re going to make a template for all of these services what’s our template structure going to look like they thought about everything except the most important thing which is the copy the copy on this website like it is on on many, many, many websites was the afterthought. It wasn’t the main thought. It wasn’t, see if I was consulting this business and I would sit down and say, look, yes, we have to have a beautiful website.
Yes, we have to have consistency and design and spacing and all of that. 100%, we have to have those things. It doesn’t matter how well we execute on any of that. It doesn’t matter how well we execute on any of that. By the way, I want it to be accessible. By the way, I want it to have good color contrast ratios. By the way, I want it to have clean code. By the way, I want it to have, and the list goes on and on and on.
Those things are all important. But what I’m going to tell you, Mr. Client, is that we have some services that are going to be a little bit difficult to sell to certain people. difficult to sell to certain people and the copy on this website is without a doubt the number one thing we have to focus on. We’re going to make it clean, we’re going to get the good presentation, ok, but if you don’t focus on the copy, which basically means if you don’t pay us to write the copy, which which I’m going to tell you up front is going to be thousands of dollars. It’s going to be thousands of dollars to Which I’m going to tell you up front is going to be thousands of dollars It’s going to be thousands of dollars to write this much sales copy for 24 different services But if you don’t make that investment the entire investment that you do make in this website Put it right in the trash Because it’s not going to convince people that arrive here. Nobody cares how beautiful it is how beautiful it is.
Nobody cares about consistent spacing. Nobody cares about great typography. Enough to be like, yeah, well, you know, the copy doesn’t really tell me anything. I’m not, it’s not connecting with me. It doesn’t show me how my problem is gonna be solved, but I really like the colors. You know, I like the colors and spacing so much. I like that photo right there so much. I’m just gonna sign up for automatic spirit writing.
That never ever has happened spirit writing that never ever has happened in the history of a marketing website ever just like somebody doesn’t go to Tesla and go god that’s some gorgeous photography I’m gonna buy a Tesla no they buy Tesla for other reasons okay so if you’re consulting this client this copy was clearly the afterthought it was let’s plug this into the template that we created and let’s The afterthought it was let’s plug this into the template that we created and let’s rock and roll and This will a hundred percent fail and remember this is the entirety of the website There’s no reason to have the website if we’re not going to talk about our services So this is the number one most important thing it was an afterthought and now the website is going to fail and None of the other stuff that we talked about matters because these this is not going to sell these services because this is not going to sell these services.
So the client has to get to a mental and emotional place where they say I understand how important the copy of the website is to sell our services and I’m willing to invest the thousands of dollars that it’s going to take to write the kind of copy that’s going to convince people to sign up for these services. And if we have to put more money into copy than we do into design, If we have to put more money into copy than we do into design, that’s what needs to happen You can’t put more into design and less into copy and hope for a really good outcome Especially in a situation like this Okay, so that was the really big thing and you know so many people They don’t even talk about copy with their clients copies. I oh you’re gonna provide the copy box checked oh you’re going to provide the copy, box checked, but you’re not, you’re failing your client, because this is the kind of copy they’re going to give you. And when a client insists, usually it’s because they have a weapon of some sort. When they’re allowed to do the copy for their website through our agency, it’s usually because they have a weapon of some sort.
And so we say, all right, you give us the copy, but here’s the thing, don’t give us all the copy. I want you to give us the copy for the first service. Because I don’t want their workload to be too big, right? I don’t want it to be late. Okay, just focus on this one. Give me that, deliver that to me. And then they deliver this right here. And then I have another meeting again, right? We gotta take them aside, arm around the shoulder, right?
Digitally, of course, we’re just doing this on Zoom. We got to take them aside, arm around the shoulder, right? Digitally, of course, we’re just doing this on Zoom, kind of like we did with the logo, right? Because this is that logo version of copy. Okay, this is not, it’s not professional. It’s not, it’s not great. It’s not good even. So we have to have another conversation. Okay, Mr. Client, I know you wanted to save money on writing the copy.
I know you guys thought you could do this yourself. I know you guys thought you could do this yourself. I just am going to be honest with you. This copy will not sell this service. Period. End of story. So we have a decision to make. Do you want to pay to get new copy written and we’re going to do this for you? Or do you want to alleviate us of the responsibility of your website You want to alleviate us of the responsibility of your website getting any traction, momentum, sales, whatever.
Because that’s the thing too. If you let the client write the copy and you just stick it in and then you hit publish and you send this website off into the wild and nothing happens, no rankings, no sales, no leads, guess what? The client is never, Bev and Fred leads, guess what? The client is never, Bev and Fred are never going to get together in a boardroom, and this kind of company wouldn’t have a boardroom, right?
But you get the point. In the break room, at the water cooler, Bev and Fred would never stand at the water cooler and go, you know, you know Bev, you know what I think happened with the website? That shitty copy we gave the web design agency isn’t converting. copy we gave the web design agency isn’t converting. That’s not the conversation they’re going to have. The conversation they’re going to have is, you know that shitty web design agency built us a website it doesn’t get any results. That’s what the conversation is going to be. So if you’re a web designer you have got to cut this off. Immediately when this gets delivered to you. We got to have a conversation. This copy is not going to sell you. Be very very point is not going to sell you. Be very, very point-blank. I want you to be successful.
I want you to get all these leads. I want your business to grow. This copy is not going to accomplish that mission. Just be very, very honest with them. And then it’s a discussion of how are we going to acquire copy. Look, you don’t even have to hire me. Don’t hire me. Please go hire a copywriter of some sort that knows what Don’t hire me. Please go hire a copywriter of some sort that knows what they’re doing and get us new copy. This copy is not going to work. Okay, and that’s that that’s the discussion you have to have with them. Now if they’re again If they pull out a weapon or something like that and it’s like no, we got to rock and roll with this copy Okay, here’s what I want you to do. Mr. Klein. I just want you to put in writing, okay writing, okay, that if your website gets no leads and no ranking and none of that other stuff that you want, that it’s not my fault. Right? Don’t don’t we had this discussion, right?
Now, I don’t say it like that we’ll have some sort of thing like a little disclaimer for you to sign, right? Here’s the thing that you’re proceeding with a copy that we don’t feel is adequate for the goals that you’ve stated. Okay, and because you you cannot allow them to put this on you when you have done allow them to put this on you when you have done your job of really standing up and saying this is not going to work. So that’s that’s kind of the way that I approach it because they’re going to go tell everybody else oh they built a website for it doesn’t do anything. They’re going to leave you a negative review. Sorry Jack you signed off on the copy that we clearly told you was not going to work. Alright so now by the way let’s back up so you guys understand not going to work. Alright so now by the way let’s back up so you guys understand.
Have I ever really had to do that with a client? The answer is no because clients know from the jump that I am NOT a pixel pusher I’m a consultant. They’re hiring me to tell them that shit is not going to work. That’s why they’re choosing me because they know that’s what I’m going to do and so I’m going to tell them that going to do. And so I’m going to tell them that that copy is not going to work and they’re gonna go we trust you. Now what do we do? Well you can hire us to write the copy or you can hire any other copywriter that has great experience that you think is going to get the job done. Hire them. I don’t care who writes the copy. This copy is not going to work. Get us a new copy. And they’re like got it done and they do it. Okay so you it starts with positioning yourself as a It starts with positioning yourself as a consultant so that when you stand up and say, this logo needs to be fixed, then they go, all right, I guess we gotta fix it.
Or you say, this font is not gonna work for these headings. Okay, I guess we gotta change, I guess we gotta choose a new font. That’s how you want clients responding to you. You don’t want clients saying, no, you gotta stuff our 18 logos in the header. Well, sorry, right? That’s not what we do here. Well, sorry, right? That’s not what we do here. We don’t stuff 18 logos and headers. We have a logo in the header that’s for your company, and then we’re going to find other ways to represent your sister companies on this website. But we’re not going to stuff all the logos in the header, and we’re certainly not going to link them to every sister company website or oddly to other product pages on this website. We’re just not going to do And so, and we have clients that respect us when we stand up and say, that’s not gonna get done, right?
And so then we come up with other solutions. Okay, let’s get to, let’s get back to the chat. All right, why the share button is there? Do the visitors share a section? Ooh, I didn’t even see a share button. Hold on, let me look, let me look. Oh, I didn’t even see a share button. Hold on, let me look, let me look. Share, share, share, share, share. Ah, right here.
Good question. It’s like a share a post. Yeah, I guess you can share the page. You don’t share the section, it shares the entire page. Which by the way, this is very 2008, right? By the way, this is very 2008, right? 2008 people might’ve done this. 2023, probably not doing it. Do you think this was chat GPT? What would I ask it?
What is automatic spirit writing? It’s probably not copy paste chat GPT because chat GPT would have put automatic spirit writing. It’s probably not copy paste chat GPT because chat GPT would have put automatic spirit writing. I mean, they obviously could have edited it. What is automatic spirit writing? Wow, it’s thinking. Okay. It’s different, but it’s very, very, very, very similar, right? It’s basically what you would expect a chat GPT to write, right?
So they think could have used AI for it. I don’t know. I’m not going to accuse them of using AI. But if you look at AI, how AI writes, AI writes, you know, fairly academically, But if you look at AI, how AI writes, AI writes, you know, fairly academically, right? AI does not write sales copy. So I can see the thought process there. I’m afraid the site was made by a cousin, as we say in Italy, just for joke. No, that’s not just Italy. That’s, look, oh, you know how many cousins are in the United States?
Oh, my gosh, cousins do everything in the United States. Cousins do everything in the United States. Cousins do photography, cousins do copy, cousins do web design. Yeah, brothers too. Brothers are huge in the United States. I got a brother that does the copy. I got a brother that can do web design. I got a brother that can handle my hosting. Yeah, we got brothers and cousins in the United States.
Unlimited amount of them. Most freelancers I see don’t like to write copy. Understandably, including copywriting service Most freelancers I see don’t like to write copy. Understandably, including copywriting service in your packages is a great idea. So this is a really good point that Amir is making. Hey, maybe you’re a freelancer. Maybe you don’t know how to write copy. Maybe you don’t like copy.
Like you just hate writing, right? So A and B situation. A is we just let the client handle it. We plug in what they give us and we move on with our life. is we just let the client handle it, we plug in what they give us, and we move on with our life. B situation is you still understand how important, not just important, how critical good copy is. And so you network and build a network of copywriters who you love and trust and you know they do good work.
And so when your client hands you this, you go, this is not gonna work. And so when your client hands you this, you go, this is not gonna work. I don’t happen to write copy. I’m not a copywriting expert, but I know this isn’t gonna work. And I’ve got three people in my network. They’re not affiliated with me. They’re not on my team, but I’ve seen the work that they do.
I’ve referred other clients to them. They knocked it out of the park. I’m going to put you in touch with these three people. with these three people and we need you to commission the copy from them because this is not going to work. So it doesn’t need to be a situation where you’re charging for the copy or you’re taking charge of the copy. It’s just a situation where you say with the client as a consultant, this copy is not going to work. Here’s some people that can get it done.
So if you don’t want anything to do with it, that’s perfectly fine. It doesn’t mean you can ignore it. It doesn’t mean you can ignore it. You still have to have a solution for the client All right, let’s see Mm-hmm 2008 feels like an eternity ago, but I guess in tech it is yeah every 10 years in tech It might as well be like 30 years, right? The AI content detectors say it is most likely human written. Yeah, I mean, it probably is human written. It’s not good, right?
If you’re reading copy and you’re like, I wonder if AI wrote that, it just wasn’t written good. It’s like poorly written. I heard the best thing, the best thing about ChatGPT when everybody was like, ChatGPT is going to take our jobs. We need that take our jobs audio probably. What’s that mean? What was that from? We need that take our jobs audio probably.
What’s that meme? What was that from? Is that from, it’s a cartoon. What is it from? Take our jobs. South Park, yes, okay. I probably need that. But here’s the thing I heard about ChatGPT. When people are like, it’s gonna take our jobs, somebody said, the only jobs that that can replace People are like, it’s going to take our jobs.
Somebody said, the only jobs that that can replace is like a BuzzFeed author. When it comes to like copy, so everybody at BuzzFeed, their jobs are 100% in jeopardy. But anybody else, probably not. They’re probably not going to take our job. It can absolutely replace a BuzzFeed writer. And this is like, BuzzFeed level text. All right, let’s see. All right, let’s see. Never mind that website is all over the place.
Copy is very expensive if done right. It’s not though, because expensive is relative. I have to have this conversation with clients all the time. This is how you sell the copy. Because if you say, Mr. Client, this copy is not going to work. Well, what is going to work, Mr. Consultant? What is going to work Mr. Consultant? And you go well $5,000 copy, $10,000 copy and they go well that’s so expensive.
Alright well tell me how much money do you expect or want this website to make you over the next three years? I would really, really, really hope that the number you’re about to give me is way over I really hope that the number you’re about to give me is way over $10,000. Like way, way, way over $10,000. Right, is this a six figure business? We multiply that by three? Because a website has to be refreshed every three years. So I’m not gonna say what is the money you wanna make over the next decade or something like that.
But over the next three years, and that’s kind of a good benchmark. How much do you wanna make over the next three years? the next three years and that’s kind of a good benchmark. How much do you want to make over the next three years? If you make a hundred thousand dollars, let’s just say just from the website, the traffic, SEO, just what comes through this website, right? Because I imagine this kind of website would be fantastic for like content marketing, blogging, pulling tons of free traffic in through articles about all of this stuff. I mean you could easily, easily get this website you could easily, easily get this website into the tens of thousands of unique organic visitors every single month, very easily.
Potentially even the hundreds of thousands, right? So if you’re really good at content marketing, you can create an entire business through this one website right here. And that is going to be worth what? Let’s say it’s $100,000 a year, just through the website, $100,000 revenue. through the website. $100,000 revenue. So multiply by three. $300,000. Now that’s a website, this website with really good copy and really good content marketing. Now the shitty copy was free. $0. Man, that sounds like a really good, that’s a steal. If my cousin can do this copy for zero, this copy for zero? Do you know how much of a steal that is? But is it? Is it really a steal? You spend zero on the copy and then guess what? The entire website failed. You don’t have tens of thousands of visitors. You don’t have hundreds of thousands of visitors.
You don’t have $100,000 a year. It costs you an insane amount of money to deploy free copy that your cousin wrote on a website. An insane amount of money. Or you could write $10,000, cousin wrote on a website an insane amount of money or you could write $10,000 you can pay $10,000 for good copy right and we can do some content marketing and then because you have good copy you also have tens of thousands of visitors or hundreds of thousands of visitors you also have $100,000 in revenue a year or 200 or whatever it happens to be. Now is to be. Now is the $10,000 so expensive? Seems to me the $10,000 is like the linchpin of this entire narrative. It’s either going to work or it’s not going to work. This copy ain’t going to work. So if it doesn’t work, you don’t have the visitors, you don’t have the revenue. If you pay the money, you have the visitors, you have the revenue, and you make a lot more than you spent. That seems like the path forward. These are the conversations you have to have because people think, These are the conversations you have to have because people think they always think well if I can get the copy done for free That’s like a box. I check but copy isn’t a box you check a Copy is like the most important thing. It’s not just a box and If you think if you let them think it’s just a box They’re gonna fail you’re gonna fail. Everybody’s gonna be sad sad face Womp womp, okay, or you can just stand up and say this copy is not going to work you’re a quack, okay, or you can just stand up and say, this copy is not going to work, the outcomes that you’re hoping to achieve are not going to be achieved, we need to fix this in order for everything else to happen, that’s going to happen down the road.
That’s your job as a consultant. So 10,000 for copy for this site, if you’re hoping to make hundreds of thousands of dollars over the course of three years, if you’re hoping to get tens of thousands of visitors, hundreds of thousands of dollars over the course of three years if you’re hoping to get tens of thousands of visitors ten thousand that’s not expensive at all. All right let’s see what if clients say this is the script I want on there and you explain but they insist again it depends on if they have a weapon or not if they don’t have a weapon I’m continuing to press I am continuing to press them on this isn’t gonna work this isn’t gonna work when this isn’t gonna work, this isn’t gonna work, when you better copy, and then I will go, I’ll go show them better copy.
I’ll take them to other websites. Hey, this is what your competition is doing. They’re gonna blow you out of the water with this. And you just show them the differences. Do whatever it takes. Now, if a weapon comes out, all right, we’ll put the copy on there. But no weapon, hey, I’m still pressing. AI can only replace humans when clients know exactly what they want, give detailed requirements, so I think we’re pretty safe.
Exactly, exactly. when clients know exactly what they want, give detailed requirements, so I think we’re pretty safe. Exactly, exactly. All right, good. Preach Brother content is king, 100%. And we can prove this all day long. Do you know how many ugly ass sales pages I can find you that make millions of dollars?
Just absolutely terrible. Spacings all off, colors are all off, just awful, awful. Millions of dollars. Why? colors are all off just like awful awful millions of dollars why because the copy is gold and that proves it right there and that will happen day in and day out consequently there is never an example of a gorgeous website with dogshit copy that’s doing millions unless it’s selling for another reason like they have an amazing brand or they’ve done all this other war or whatever people selling for another reason. Like they have an amazing brand or they’ve done all this other work, whatever. People are pre-sold before they arrive. Okay, those situations can happen. But if you take cold traffic, that’s the key. Cold traffic to a gorgeous website with terrible copy, you get zero conversions. You take cold traffic to a terrible looking website with gold copy, you get conversions all day long. That’s just how it works and clients need to know that that’s how it all day long. That’s just how it works and clients need to know that that’s how it works.
Alright we have five minutes I’ll answer any questions before we jump out. We got good viewers, good viewership. It is sales is a skill, copywriting is the method for the website to sell. 100%. I need to go have dinner but of course we’ll watch it back at a later point. Thanks for these great videos. I need to go have dinner, but of course, we’ll watch it back at a later point. Thanks for these great videos. You are very welcome. This is a last call for questions. If you haven’t liked the stream yet, throw up a like, please.
Drop a comment below. Ninja says, question. Do you, Kevin or anyone else, know a good copywriter? I’ve finished the text on my website, but after today, I feel I need someone to go through my site. I’m in Montreal. The good thing about copywriting is it really doesn’t matter where you’re located, I’m in Montreal. The good thing about copywriting is it really doesn’t matter where you’re located unless you need somebody writing in a specific you know cultural way or obviously language does matter at that point. But yeah if you guys have any copywriters you want to recommend drop them down below. I’m starting or I’m thinking of starting you know if we go to like gary.co. So I’ve been thinking about this for a little bit I just got to get some other things So I’ve been thinking about this for a little bit. I just got to get some other things done, but I’m gonna have a resources area so like all these resources that I have for dev and design and UX and SEO and Just all all resources. I think would be good to you know Catalog on this website, and then I also think that I can have some room for You know some hey if you don’t do SEO here’s some really good SEO people. Hey, you don’t handle copywriting you know some hey if you don’t do SEO here’s some really good SEO people.
Hey you don’t handle copywriting here’s some good copywriting people and I’ll just make a little a little directory of those referrals as well that might be a good thing to have. All right mini tutorial how to style WS form with ACSS. Should we do it on the fly? We only have three minutes or so. I was having problems earlier with my whole local setup. Let’s see if it’s still broken. I don’t even know if this site has a form. Let’s see. Oh look at this. Yes, it’s I don’t know what is going on with it. I woke up in my, see this all runs through the VS code, this branch in VS code.
I woke up this morning and it was like right here under changes. It was like you have 192 changes. I’m like no, I definitely don’t have 192 changes. Because it runs the sites dynamically, the locals were broken as well. I’ve been investigating it and then my investigation dynamically, the locals were broken as well. And I’ve been investigating it, and then my investigation had to cease because I had to do web design for dummies.
And it’s looking like the style sheets just aren’t loading right now. Maybe we can do it on a live site. This needs to be updated. This needs to be updated. Uh 2.4 beta 1. Okay. All right. What do we have for forms? Forms, forms, forms, forms, forms, ws form. There we go. All right. We got to contact us form. All right. Let’s do a page, add new. Alright, we got to contact us form. Alright, let’s do a page add new. Now I can’t do a lot because this is a live site sample form.
But I can show you how it’s done. Should be fairly, it’s it’s fairly self explanatory. Alright, let’s add a section. Let’s make this a grid to Let’s make this a grid two. Let’s do a gap of L. I just want to put a form on this right side over here. So we’ll do a form. Oh, no, not that kind of form. First of all, let’s put a block to take up that first space.
Now we’ll put a form, a WS form. There we go. Then we would select a form. Let’s just do contact us. Okay. Save. So this is what we get out of the box. Let’s go to the front ends. Okay, save so this is what we get out of the box Let’s go to the front ends. That’s the that’s what you get out of the box now. I don’t even know if this is configured on here form light save Yeah, it’s not. Okay. So we’re this is what we’re getting by default with the form light class from automatic CSS now My website is not a light base website is a dark base website a light base website. It is a dark base website. So you see we’re going to lose our labels.
They’re going to go ahead and blend in. But all you have to do is come back here, automatic CSS, we go down to forms. And what I can give you guys is an update. This notice it says forms beta. We have light form styles, dark form styles coming soon. 2.5, version 2.5 version 2.5 automatic CSS should have all of your dark styles as well. So right now we only have light cause we wanted to nail lights. We wanted to get these are, it’s very complex. I mean, you can look at the amount of things that can be customized in a form. I mean, forms are, forms are quite a nightmare, which is why it’s so good to have automatic CSS, be able to do this with one class and then come back here and be able to change everything from this one spot.
and then come back here and be able to change everything from this one spot. Because the other thing with forms is you gotta where the CSS loads is important. Sometimes you need an important override, you know, exclamation mark important. There’s so much stuff, so much stuff. So the ability to come back here and just do it in these panels is very, very helpful. But we don’t have the dark form styles because we’ve been mastering the light form styles. And we don’t want to do basically duplicate all of the fixes that we have to create. mastering the light form styles. And we don’t want to do, basically duplicate all of the fixes that we have to create.
So we want to get light form style to be 100%, then we’re going to do dark form style. We’re basically there at this point. Let me put this on a white colored page. So we’ll just do BG white. Okay, save. So this is what light form styles are for. So light form styles is customizing a form when it’s on a light background. Then we’re going to have dark form styles.
a form when it’s on a light background. Then we’re gonna have dark form styles. Let me get rid of this and this. So when your form is on a dark background, this is the dark form style you would use. And then you would put the class form dark instead of form light. Makes sense? Now we’re gonna go customize the form. So you can customize your label styling. So here’s your label color right here. You can see it was set to base dark. Why? Because this is the light form style. You can see it was set to base dark. Why? Because this is the light form style. Now I could make this base light and I could fix those on the dark style, but that wouldn’t make sense because I’m doing a light form style.
So I’m just going to leave this stuff and just kind of go through it. You can set your text size of your labels. Remember, we’re doing label styling. So every input in here applies to your labels. You can put a background on your label if you want to. You can pad your labels if you want to. Have a bottom margin on your labels. if you want to, you can pad your labels if you want to have a bottom margin on your labels. You can do a bunch of stuff to your labels. Then you can come in here and do a bunch of stuff to your legend styling.
Then there’s your help text styling, right? You have your field and field set styling. You have your grid gutter, which we just added. So you can control the gutter in the grids here. Literally just go tab by tab. Most of it you really don’t even have to mess with like the defaults out of the tab by tab. Most of it, you really don’t even have to mess with like the defaults out of the box. As you can see, I mean for a light form style, let’s, let’s take it off and see what we had before. That’s, this is what we had by default. So not great, right?
It’s not using our, like it’s, I don’t know. It’s not great. It’s not great. But by default, I’ve done nothing. I’ve done absolutely nothing. I put the form light class on. I mean, now it’s looking a lot sharper right out of the gate. I put the form light class on I mean now it’s looking a lot sharper right out of the gate Where is it getting this radius from from my button radius? It’s actually toning it down because you don’t want this pill shape on your form fields. It doesn’t look great So it tones it down a little bit but it’s getting you know the rounded corners effect from the From the buttons that are on the website, so it realizes hey, we’re not doing square stuff. We’re doing is hey we’re not doing square stuff we’re doing rounded stuff so it inherits that it’s inheriting all of your fonts your font sizes are all inherited all that good stuff your button styling down here is inherited from your main button styles so like out of the box it really looks good by default but you can always go in here and start customizing stuff and it’s just all organized in the back-end and the dark style will come in 2.5 so if you need specific stuff here the dark style will come in 2.5.
So if you need specific stuff here, we’re about to do documentation on all of our forms, which I’m absolutely dreading because, guys, can you just imagine for a second having to document what every one of these inputs does? I mean, just put yourself in my shoes for a second. Is this a situation you wanna just spring out of bed and tackle? Not really. I know it’s very important and it’s coming, and we had to get it out of beta first, but I am just dreading.
and we had to get it out of beta first, but I am just dreading. I am dreading doing documentation for forms. Shout out to Mark Westgard, because just having the courage, the courage to say, I’m gonna build a really advanced form system plugin. I mean, it’s a lot. Forms, it’s a lot. All right, is it easier to style from custom CSS?
Absolutely not. All right, is it easier to style from custom CSS? Absolutely not. No. Styling forms with custom CSS is an absolute nightmare. People who are using the form styling automatic CSS will pretty much all tell you it’s a dream compared to trying to style this stuff with CSS. Will it work for WS form free as well? 100%.
Let’s see. 100% let’s see when is fluent forms going to be included in a CSS right after dark form styles is released for WS form and by the way guys by the way get this get this the comment form in bricks like if you have a blog with a comment form at the bottom slap the form light class on there it’ll look just like your other the form light class on there it’ll look just like your other forms so it styles the comment form in bricks it styles the bricks native form it’s going to style your WooCommerce checkout form for you so you do this work to style what a form looks like and then you can make any form on your site look like that whether it’s a comment form a checkout form on bricks native form a WS form a fluent form doesn’t matter it’s magic it’s magic you put form light on hey now it a fluent form doesn’t matter. It’s magic. It’s magic. You put form light on. Hey, now it looks like the form I like to have on this website. So you’re doing this work once, right? For this website. And then all your forms can look like this. And you have two different styles to choose from light and dark. Fluent forms is already in Bricks Extras. It is, in BRICS extras. It is, but is WS form in BRICS extras? Is the native BRICS form in BRICS extras? Is the common form in BRICS extras? You won’t need BRICS extras after about another eight to 10 months, eight to 10 months. BRICS extras if you have frames, if you have frames, BRICS extras will not be needed Let’s see.
Oh, that’s a great feature. I’m now looking forward to the full feature set very much. Okay, I think we’re over time. I think we’ve answered enough questions. We’ve shown some things. We’ve had some good, good content today. As always, I want to thank everybody for being here. Thank you for any likes that you are able to throw up on the stream. being here. Thank you for any likes that you are able to throw up on the stream. Drop a comment as well if you have an extra minute. And I will be back next Wednesday and I’ve got another video slated to come out later this week so make sure you’re watching the channel. We’ve done a lot of really important work on automatic CSS documentation, on frames documentation. We’re putting out videos on the automatic CSS channel related to new frames and new automatic the automatic CSS channel related to new frames and new automatic CSS features. So make sure you’re subscribed to that channel as well. If you’re not you’re missing out on some good content over there and new feature releases and there are some really really I can’t talk about it, but there’s some really really amazing stuff coming to automatic CSS.
So stay tuned. I’m out. Peace Peace.