WDD LIVE 057- 2 Website Critiques (Education Site & Landscaping Site)

More about this video


  • Education Website Critique
  • Landscaping Website Critique
  • Q&A

Join me LIVE every Tuesday at 11am Eastern for in-depth web design and development critiques, plus spur-of-the-moment mini-tutorials based on our discussion!

WANT TO GET YOUR SITE CRITIQUED? SUBMIT YOUR URL AT https://geary.co/critique-application/

Through the critique process, you’ll learn tips, insights, and best practices for things like:

  • UX Design
  • UI Design
  • Technical SEO
  • On-Page SEO
  • Copywriting
  • Content Marketing
  • Conversion Optimization
  • Offer Strategy
  • Technical Development Best Practices w/ DOM Inspection
  • And more!

Video Transcript

Happy Tuesday, everybody. Glad to be back with you. Let’s see who we’ve got in the house today. Say hi when you when you arrive. Say hi in the chat. If this is your first time watching, maybe this is your first time to a WDD live, even if you’ve seen other live streams, but this is the first time you’re at a WDD live. Let me know in the chat that this

is your first time. I will tell you what we do here because we have had a couple weeks where we’ve done some alternate type content. It is really, it’s a variety show. We can do whatever we want. Anything related to web design

and digital marketing agencies, you know, it’s a free for all. We can do whatever we want. But our main agenda, what we often do or typically do is we do website critiques. We talk about what

makes websites successful. All the things that make a website successful. So not just design, not just development stuff. We talk about UX, we talk about SEO, we talk about PPC, digital marketing, copywriting, we talk about just the DOM. We talk about lots of stuff. Accessibility. I mean anything that’s relevant. Anything that is relevant to a website’s success. We talk about it on WDD Live so that you guys can be more informed and we can elevate the

industry in general and everybody can be better at their job. We want websites in general to be better. That is our goal, right? That is our goal. And as you often see from week to week, there’s a lot of room for improvement, right? There’s a lot of things that we can all do better.

And so we’re all here to learn and grow and make better websites and, you know, do better for our clients, right? At the end of the day, we do have real people with real businesses who are relying on us to know what we’re doing and to do our job well.

And we wanna help them also, okay? It’s kind of why we do what we do. Justin says, back to critiques today. I’m secretly hoping for a classic Gary rant. Okay, maybe, we’ll see. Depends on what you guys bring up in the Q&A section, maybe.

Announcements before we get going. First of all, I have this new, I’ve got a new little mic position here. I’ve got this, it’s called a low profile arm. I wanted to get the big, like over the top arm out of the picture. Plus the big over the top arm used to block the like half of the vision of my

screen over here. It’s nice little low profile. The problem is my arms got to kind of go under it. And so if I get crazy, okay, I’m going to be, I’m going to be bumping stuff. So, uh, I gotta get, I gotta get a little bit used to it, but so far I like it a little bit better. Okay. Uh, announcements. Let me, let me actually screen share for this. This will be, let me, hold on, I’ll pull up a tab first.

Let me go to automaticcss.com. Okay, 101 course. All right, let me move this over. Let’s go ahead and screen share. There we go. Okay, you should be able to see it.

ACSS 101, Automatic CSS 101 has officially started. The first lesson, lesson one is published. It is available to watch. You want to go to automaticcss.com slash 101 dash course. And you can go ahead and sign up there.

And it is a 100% free course. You don’t even need automatic CSS to participate in the course. If you have a license, then go ahead and spin up a new install of 3.0 and follow along. But if you don’t have a license, I mean, I would recommend you get one, right? But if you don’t have a license, you’re like, no, I want you to teach me some

things before I get a… Okay, then we have a sandbox available for you. Now it is first come first serve, but you can spin up a sandbox install and you can follow along. Now, if the sandbox installs are temporary, they have to be temporary because there’s a limited number of them. And so they’ll expire every 24, 48 hours or something like that. So you’ll have to continue spinning up sandbox installs throughout the course.

First, again, every time first come first serve. Okay. Um, you know, it’s better to just have a license, but if you really, really, really, really, really want to take the course without a license, then you can use the Sandbox environment to do it. Episode one so far has had a really fantastic

outpouring of support. People are super excited about it. Some of the lessons will be pretty quick. It’s gonna be, I think, some of them will be a lot less detailed than like PB 101, for example. And that’s my goal.

I want it to be easy to digest, easy to learn, easy to implement. But at the same time, we do have to talk about any time there’s important principles, we’re gonna have to talk about them and cover them. So we’ll do that in detail, whatever detail is necessary.

But definitely go sign up for this course. I mean, this is the like, you know, automatic CSS is not really just an opinion. I think it’s being proved by real workflows, real world, thousands of sites, thousands of developers implementing it

and putting it into practice, you’re essentially building websites with superpowers. Right? It’s a cheat code of sorts. And it’s not just to build websites faster, it’s building maintainable, scalable,

consistent websites faster, which is, you know, that’s next level. Anybody can just whip up a website at the ID level and it just is an absolute disaster on the back end. No tokens, no maintainability, no scalability, no nothing. But to be able to whip something up fast that’s fully scalable and maintainable and super consistent and responsive,

I mean that’s next level, right? And this is what ACSS gives you as a tool. And so it’s just so valuable to learn how to use it, to learn how to implement it and to master it. So go do that. I’m going to go ahead and close that out. We’re going to jump right into our main agenda today.

We are going to do two website critiques. We have this website which is a, we’ll call it an education based website. And then we have a landscaping company that we’ll take a look at. And then we’re going to do open Q&A. as you use a hashtag Q hashtag Q and then ask your question okay the hashtags make them findable if you don’t use a hashtag I will not find your question so

make sure you use the hashtag but you can ask them at any time we will do the open Q&A after the two website critiques all right we’re starting with website number one it says school websites Ireland and the same thing is found in the logo up here as well, okay? And we’re going to do our no scroll test. Not allowed to scroll around, just have to figure out what’s going on here from what we’re able to see. It says we grow revenue and profitability for early year settings through online marketing.

Now unless this is translated for me automatically, I did not tell it to translate this. I don’t know if it’s been translated or if it’s not been translated. I’m gonna assume that it hasn’t since I have told it not to and I apologize if it has somehow automatically done it for me.

We grow revenue and profitability for early years settings through online marketing. I’m having a hard time digesting that little lead paragraph right there. I’m not exactly sure what that is trying to say, but we can increase inquiries, increase applications,

fill spare capacity, fill summer camps, take bookings online, take payments online, campaign informs, grow waiting lists, advertise on Facebook, automate inquiries, save admin time, recruit new staff. VAT-free 2024 is our call to action text.

Is anybody as lost as me? I am, I am, so far, I am still lost on exactly, it seems that this would just, they create websites for schools in Ireland, but man, I don’t, is it just for private schools?

Maybe I don’t know anything or enough about the Ireland school system to know what’s going on here. I just, this call to action, VAT Free 2024 with an arrow is not really doing it for me. It’s not really a clear thing, I’m not sure. Gervin says, no clue what the site offers.

Keep in mind, I didn’t mention this, but this is an interactive live show. So it’s based on your feedback as well as my feedback. So put your feedback in the chat, put what you’re feeling in the chat, what you’re seeing, what you think

about what you’re looking at, all of that is relevant.

Have to consider the local audience,

though I have a ton of experience with internationalization. Okay, Ireland is English speaking, that could have local meaning that doesn’t make sense in the US. Right, it could. Like early year settings is not something

we would say in the US. Maybe it makes sense to people in Ireland. But I still don’t think, I still think, I mean even if we, you know, had somebody from Ireland, I’m not sure that they would say that that’s fantastic copy by any means. Now, right here, okay, Carl says, I’m lost what it’s about. Don’t put a hashtag Q for that because that’s not a question, okay.

Only do hashtag Q for things you’re asking as a question for the Q&A segment of the show. Nick says, an early year setting is education jargon from preschool and schools up to age five in UK, Ireland. Okay, so you grow, this site grows revenue and profitability for that school segment through online marketing.

I would still clean that up. I still think that that can be improved dramatically. The CTA, 100%, I don’t think anybody would agree that that’s a great CTA text Now let’s talk about color scheme. Let’s talk about branding a little bit. I Don’t have a problem with the colors in general

But I think I do have a problem with how they’re being used. This is this site is extremely green I I’m not a fan of the box shadows on the buttons. They’re very, they give me early 2000s vibes, 1990s vibes almost. They’re too dark, they’re not soft enough,

they’re not subtle enough for me. You could say that that’s a personal opinion, but I think a lot of UI people would tend to agree. Same thing with it being on the logo. I think this would look much cleaner without the drop shadows.

I’m not big on this logo here. I’m not big on the letter spacing in the Ireland text. I’m not big on a lot, this is a very generic little graduation cap thingy here. It doesn’t have a lot of personality. It doesn’t have a lot of uniqueness to it.

It looks like a templated logo or like a very, just like amateur logo was slapped on a site that a designer did not actually design. This is a classic case, it feels like, of a developer trying to be the designer. And that’s the vibe that it ends up giving off.

Let’s scroll around, okay, and yeah, we’re gonna see that more here. So now we’re starting to really struggle with color, okay? We’ve got a dark gray hue. I haven’t seen gray used at any point yet, and just randomly out of the blue, we’ve got this charcoal, light charcoal color text.

Then we’ve got a green that is a completely different hue than the other greens that are being used. We’re back to the charcoal divider and then we have the charcoal text here. And then we have green and white, like a checkerboard pattern,

which is highly distracting to my eye anyway. The icons aren’t awful, the icons aren’t awful, but again, we’re back to the drop shadows. We have aggressive rounded corners, which, you know, this is a very square photo that we’re starting off with.

We’ve got a pill shape on our buttons and then we’ve got another kind of aggressive radius going on on these cards. With the drop shadows, with the checkerboard, there’s just a lot going on. With another thing that’s not really a card but looks like a card but then has a list in it with links in it that it’s Maybe without the arrows I wouldn’t even know that they’re links. I’m really struggling with this section right here.

This section has, there’s a lot to clean up in this section right here. I’m really confused on where this other alternate green hue has come from. For no reason, just on specific areas of text. I mean even like the check marks are the standard dark green like that. We’ll call it like a forest green But why not use the forest green here? All right, why are we introducing a brand new hue?

For just these words that’s a little bit and now we’re off to now. I’m confused. We’re introducing a sky blue button When I think the orange would do just fine here.

And now it has a different drop.

Well, hold on. Let’s look at this site. Let’s look. What’s going on in the… Okay. Okay.

Well, we see classic case. I mean, this is what you would tend… I mean, no hate to the Elementor people, but I mean, this is what you start to expect from an Elementor type site. Okay. an Elementor type site, okay?

And let’s time out. We’ve had multiple flags on the play, okay? Multiple 15-yard penalties have already been racked up on this team. But we’ll just take, coach needs to call a timeout here. There’s a lot going on.

We gotta slow the game down, okay? Okay, I’m still in. It’s late in the softball season. I’m in coach mode, okay. This is what you will commonly see when a site is not using a framework,

when they’re not using, and they’re not frameworking. Like, you know, using a framework like Automatic CSS that does so much thinking and consistency for you, even if you’re not using that, you could still bake in consistency in other ways yourself manually,

but it takes a lot of time, effort, thinking, consideration, philosophizing, okay? And this is just what happens when people throw stuff together. I mean, we’ve got colors that aren’t consistent, we’ve got buttons that aren’t consistent, we’ve got drop shadows that aren’t consistent, we’ve got spacing that’s not consistent, we’ve got border radiuses that aren’t consistent. I mean, this is all over the place. This is just, this is magic numbered to death, okay? If you know the concept of magic numbers,

it’s like, why is this text the size that it is? Well, because that’s what they felt like doing at the time. You know, it felt good at the time. It’s just a magic number, it doesn’t mean anything. It’s not a number that’s tied to any other number. It’s not a number, like if you asked

why this text is the size that it is, I’d say, well, it’s 1.33 times bigger than the body text. And it’s using a mathematical ratio. And that’s why it’s the way that it is. But on a site like this, it’s just all random. There’s no reason for anything.

It’s just, well, that looked good when I was doing it. So, well, at least I thought, but I’m a developer, not a designer, right? And you just, this is what you end up with. It’s a, it just becomes a gigantic mess. The images here are not the most important thing.

The content is the most important thing, yet we’re called to the images by this gigantic orange border. Like the colors, the use of color is so important, right? And everything is to draw the eye here, but it’s drawing the eye away

from the actual relevant information. Then our calls to action, we’ve trained a user up here to click on orange things. Hey, click on things that are orange, Mr. User. Okay? And now suddenly down here we’re like, or sky blue. I mean, that’ll work too, right? Just toss a little, just mixing it up, mixing it up, throw you a little curve ball, okay?

I just don’t know. I don’t know why we’re doing that or why we feel like we need to do that. All of these drop shadows are radically different. And now we’ve got, is this smaller than the other text going on here. What is happening? Let’s look at this look at this span br. Br. Br. Br. Okay, this look colors are just thrown in here Hey, do you need tokens? Nope. No hex codes will do man, this is

This is tough. This is tough. That’s a that’s an inline color Okay, just thrown in just a random hex code thrown in. What’s the computed size of this? 30 pixels? Is it just my eye? Okay, that’s still 30 pixels.

All right, what is this body text? This body text is 16 pixels. Let’s go up here. That looks like 16 too. What are these, like 13? 13.95, okay.

What’s this text right here? We’ve got 20.925. I mean, we just have sizes on sizes on sizes on sizes. This, everything is like, well, it’s whatever we feel like. The bullets, you know, the check marks are far too large for the size of text that’s next to them.

There’s a lot of struggle here in terms of UI. And you guys know, like, often if like the UI is basic you guys know the pattern now if the UI is kind of Decent I go straight to copy on this site. I can’t I can’t go to the copy yet The the UI is too distracting to even get to the copy. Okay, we need to turn this off Well, what does do not disturb mean in this? I mean until this evening what and you’re disturbing me. What does this feature even mean? Okay, my gosh.

All right, hopefully that ends. Yeah, I would love to get to the copy, but I’m gonna keep going on the UI thing because I think there’s just so much going on here. This white border at the bottom of these cards is also throwing me off.

Doesn’t really need to be there. It doesn’t really add to design. Kind of feels like the card is cut weirdly or something. I don’t know. Okay. What is this section for?

A 10-step marketing process. So we’re gonna do setting analysis is one, two, three. I wonder how this was done. Did they do this properly? What did they do here? Elementor ribbon.

Oh, was this like a, I wonder if this was like an element or module? I’m not an element or user enough to know if this is like a pre-done module of some sort They have a lots of pre-done modules and in elementor and people use them because they feel like they’re cute Okay, free 30-minute call is our is our CTA here. We got a little video that we could watch I’m not going to pull that up

Again with the different style card, I mean where we’ve got a random green border over here again forest green versus this other hue green But none of the other cards have that but like a big discard. What’s the difference between this card and this card? I mean, they’re both cards But this one has that random white actually it’s got a random white border on the top and the bottom But not the right and left this one has no white border top and bottom, but a random forest green border on the left. We’ve got to try our best to limit randomness, right? Limit all of this randomness that’s going on.

Consistency is what we need to work to achieve. Check out these cards. Look at all of the blank space at the bottom. I mean this is just very basic stuff to clean up. But I think that this is probably caused by whatever they’re doing with this grid Okay, is it even a grid display flex? It’s not even a grid and this is the problem with elementary sites, right? They don’t encourage they don’t encourage best practices. In fact, they encourage the opposite of best practices. So this is not a grid It’s a flex situation flex is not good for this kind of layout

Then you get into flex stretch situations, which is probably why one of these cards is super long most likely. I don’t even know they all appear to be the same content length what is causing all of this blank space? Is there a min height on that net? It’s going to be hard to figure it out because Elementor loves wrappers. Elementor has never seen a wrapper it doesn’t it doesn’t like it. It just wants as many wrappers as you can possibly get Padding is consistent. Okay, h3 h3 h3. This has got to be from the flex parent stretching items

But I can’t tell off the off the rip why is stretching them so tall Unless it has something to do with these right here here but still there’s just oh I mean the the spacing is all all out of whack what’s this section oh this is the footer okay that looks like a footer template was used there so this is looks completely different than the rest of what’s going on on this site okay this is a this is a site I would I would

highly recommend this needs to be scrapped redesigned okay we need an actual, we need a designer to come in and design this. We’ve got cards where this image should fill up this space right here, or be smaller, be smaller or bigger, but you can’t be, this is like the wrong size for these cards.

And then it rebuild it in bricks, rebuild it in a better builder, when you take the opportunity when you’re redoing this to rebuild it in a better builder. What’s going on with this pad? Look at all this space. Where’s all this space coming from? So it’s raw padding values 200 pixels, 100 pixels, 0 pixels, 100 pixels. What’s going on in here? 190. Look at this. This is why I said,

and okay, if anybody’s used Elementor encourages the use of min-height on sections instead of section padding. And this is exactly what happens when you use min-height. You end up with random values and they’re using padding and min-height probably but I mean we’ve got 190 pixels being used as the padding on this section and then 200 being used as the padding on this section. What is the reason for a 10 pixel pixel discrepancy? None. There is no reason. The reason is there’s no system. The reason is there’s no tokenization. The reason is there’s no actual

principles being deployed on the website so everything is random. And this is why you have all of these issues. These issues come from having no system, having no framework, having no tokenization, having no process. Okay, it just comes from, let’s just do it because we feel like doing it. 190, oh, you know what it also comes from? Those little drag padding sliders.

Like, whoever thought that was a great idea. I turn that off in Bricks. I recommend everybody turn it off in every page builder you use. If you, I will just tell you this right now. If you are dragging padding values, or margin values,

or dragging values of any kind whatsoever, you’re doing it wrong. That’s 100% wrong. Every single time, that’s wrong. Stop doing that. Turn that off.

You don’t need to be doing that. Random values is not what we’re looking for. We’re looking for consistency. Okay, so, but Elementor encourages that. This is why I say that these page builders encourage bad practices.

It’s not that a user just doesn’t really know. I mean, they probably don’t really know, but it’s also that the page builder is not helping them know. The page builder is encouraging them to do it wrong. And so that’s a big problem that I have

with some of these page builders. These feel like, look, this is like, I bet you this is, you know, came from some sort of template or something. And look, once again, where are we at now? Haven’t every other card, oh, okay, I see the problem.

Wait, does it have a border radius? It’s so hard to tell, because I can’t even see the color of the card. It does not. So on the homepage, all of the cards we saw had a radical border radius,

like a very aggressive border radius. These cards suddenly have none. Just, well, these won’t have a radius but the others did. It’s just all random. Look these images don’t have a radius. Everything else had a radius on the other page but these images don’t have a radius. And now we have a different style of card completely now. We’re just switching, I think I’ve seen

seven different card styles on this website. The randomness and it’s not just a oh what’s pretty what’s not pretty or anything like that. Part of UI design is UX. It’s training users how to use a website and how to identify and make sense of things. And so when you have a bunch of randomness,

the user can never really figure out visually what’s happening in any different area. And so it’s disorienting. And when a user is disoriented, they end up leaving. They end up not converting. They end up getting frustrated.

They end up just not liking the experience all that much. And so it’s not just a matter of like, ooh, who thinks that’s pretty versus doesn’t think it’s pretty. It boils down to an actual user experience issue, okay? And you’re seeing a lot of them here.

You’re seeing why consistency is so important. Why tokenization is so important? Why frameworking is so important? Okay, I think we don’t even really need to go all that much further on this website. To me at this point, I mean look at this.

Different green, different green, orange, green on hover that matches the green that’s not hovering. This is a situation, this is an absolute situation. And now we’ve got another templated section, it appears like. This is the problem with like piecemealing stuff together, too, I think. We’re introducing a yellow.

We’re introducing a blue, a pink, another blue, a purple, whatever that is. A hot pink, a tan, another yellow, a caution yellow

We’re over here with different style bullets now

Just ran. I mean what what why does this text need to be so big every other list text? I’ve seen it’s not that big and now the bullets are small in the other site the bullets are the other page the bullets were Too big they were bigger than the text now. They’re small much smaller than the text This is what happens. This is what happens. Why do these buttons just take me to the next section? That’s confusing. What do you guys have to say? Left or right? This is a situation. Yes. I have seen much worse sites from breakdance and bricks users all the time.

Sure, it can be improved by a lot, but I would say if a client liked the design, it is still sellable like it is. I wouldn’t agree with that. I would agree with the first half. You can use Breakdance and Bricks to make an absolutely atrocious website, of course. Obviously, yes.

But should you be selling a site like this to a client? No. No, no, no, no, no. This is very, very amateur work. This is work that hurts this business’s goals. This is, you should be, we need more practice,

more development of skill, unless this is a situation where this company, whatever organization, school, whatever it is, and I think this is an agency website, isn’t it? I mean, this is what they, this company builds sites for schools, okay?

But if it was a site for a client, it would only be deployable if it’s a situation where you’re like, hey, I’m learning, I’m at the early stages of this, I’m happy to do it for free. If you like it, you can pay me XYZ for my efforts.

If you want to actually deploy it live, if you end up not liking it, you don’t have to use it. That’s where this site kind of is right now. This is not a doing professional work for companies who care about their success because it’s just not to the level that it needs to be done at

for that kind of situation. We need more practice, we need a better platform, we need better processes, we need better everything before we step into the ring. And some people might think that that’s harsh to say, it’s just the reality.

It’s the reality. My job is also to protect clients. And so I wouldn’t wanna see a client pay a significant amount of money for this level of work, also knowing that it’s not gonna do what it needs to do for their business.

So there’s a lost opportunity cost. It’s not just what you’re paying for the website to be done. There’s lost opportunity cost in what that website is not doing for the business that a great website

would be doing for the business. So we just have to face facts here. This is a situation where, now on the development side of things, here’s what I would say. Just focus on getting better at development

and then put a designer into your process. Put a real designer into your process and that will take care of all the UI design side of stuff. Then you don’t have to worry about any of the, all these UI issues can go away like that by hiring an actual designer.

I’ve said this time and time and time again, do not be the developer that’s like, I’m gonna do every instance of the design in my agency. I’m gonna refuse to hire a designer and I’m just gonna try to wing it and I’m just gonna try to do my best

and that’s how I’m going to run my agency. Don’t do that. Hire a designer. Hire a designer. If you want to get better at design, then hire a consultant designer, right? At least be consulting with a designer who can say, no, don’t do that. Nope, don’t do that. Nope, change this. Nope, adjust this. Okay. As you’re working to improve your own design skills. You can do that as well, okay?

But we gotta face facts here. All right, let’s see, let’s look at chat here. Remember, I’ll answer questions at the end. You can put them in, but I’ll answer them at the end. Less and refined content is more goes a long way. Keeping it short and having CTAs, okay.

Looks like they were in a hurry to finish up the website. Don’t let customers like the design. Create excellent websites that contribute to their goals. Yep, that’s another thing. It’s not about whether the client likes the design. We’ve talked about Bev relentlessly, right?

The Bevs of the world love stuff that is horrible and that doesn’t work. So it’s not about what the client likes. They’re hiring you for a purpose, right? Based on skills and experience and expertise to do something that meets business objectives not to you know oh because the CEO loved that

style that’s why we’re doing this we’re doing this because the business needs to grow and this is the tool that’s going to help it do that it’s not about what anybody’s little pet feature is or or pet design accent or whatever that’s not what matters. I feel like I just saw 10 sites in one. Yes, it’s a problem. It’s a problem.

It’s a situation. Okay, I think we’re ready to move on to the next one. Dennis says, this is all great feedback. I hired a designer once before and it did not work out. If you can recommend designers afterwards, it would be much appreciated.

There’s a few in the inner circle that I’ve seen that are fantastic, that seem like they’re available for hire. I’ve gotten great designers from, I don’t go to Upwork and things like that, I’ll tell you that right now.

I hate that whole situation. Where I have gone with great success is Figma Design Groups. So, because I also, I want people who are using Figma and not XD, because XD is an absolute trash can. So I go to Figma Design Groups, and I look for, because designers that are showing off their work

and their portfolio and things like that, and then I’ll just contact them, because that’s what they’re there for. And we’ll get into a discussion, then I’ll have them do a test project for me, so I’ll just pay them to do a homepage or something.

I’ll give them the project requirements and all of that, and see what they get back to me with as far as a homepage goes. If the homepage looks fantastic, and I pay him for the homepage, right? Homepage looks fantastic,

then we move on to the rest of the project. And then if that project goes really smoothly, hey, guess what? Like I got another design contact. So that’s how I’ve tended to approach it in the past. Designers though, there’s a gazillion of them, okay?

They’re not all that hard. It’s probably one of the easiest positions to hire for. In my opinion, because you know Figma is it’s quite technical but it’s far less technical than actual development right. It’s much harder to find a developer that actually knows what the hell they’re doing than it is to find a great designer that knows what they’re doing. So it is it tends to be an easier position to hire for in my experience. Okay let’s move on

to site number two. And I know that felt like a roast, but that’s what we have to do sometimes, because when it has that level of UI challenge, that’s just all we get to focus on. That’s all we have to focus on. We’ve gotta pick the most important things to hit on first.

And when those boxes are checked, that’s when we get deeper and deeper and deeper into other stuff. Okay, DW Burr, Landscape and Design Incorporated. We’ve got a video background on a no-scroll test, bring your property to the next level, landscaping, hardscaping, irrigation and more in Simsbury, Connecticut. We can get a quote,

we can view services. We’ve got a very, very concise navigation up here. Not much in the nav, so it’s very clean, very easy to understand where to go and what to do. Property maintenance, irrigation, landscaping, hardscaping, and masonry. I can get a quote.

This is an example where I would say, I tend to, as a general rule of thumb, we’re gonna talk about this more in terms of primary color, secondary color, things like that. Obviously the primary color here for this website is red, but then we get into a button situation, okay, and I use Coca-Cola as an example. We all know

what Coca-Cola’s primary color is, right? Red. But if you notice, they do not use red for their calls to action. They use white buttons and black buttons. Black links, okay, they avoid using their primary color for action items. And I would argue, and I believe this is because they’re avoiding the connotation of like, no, danger, warning, right?

Red typically, and if you see red links, red buttons, it’s like cancel, you know, avoid, that kind of thing, right, it’s not the primary thing somebody wants you to do. So in my opinion, you have to be very careful when you have red as your primary color. Should you be using it for your calls to action?

I would say probably not, probably not. And this red, I’m a little confused by because the red in their logo is not the red that’s being used for the buttons. And the red for the buttons is a darker red, which actually makes it harder to see on this like background video,

for example.


and it doesn’t appear to be the red that’s being used in the icon. So it’s like, there’s two different reds going on. I think that needs to be sorted out a little bit. These icons are hard to see because they are on these background images that are darkened.

So we have another situation where I think a designer consultant would be very handy here to kind of clean this up a bit. We’re also seeing these nineties drop shadows used on hover guys. I’m just, I’ll just let you know right now, like unless you really know what you’re doing,

dark drop shadows that are very close to the object are not all that great. Okay. They, they just look cheap. They look like, you know, you guys were around the internet in the 90s and early 2000s.

Like that’s what drop shadows look like. And they were on everything. People were like, oh my God, in web design you can put a drop shadow on there. And then people just did it on like literally everything. And that’s the vibe that you’ll often get.

We’re also seeing this red outline here on Hover. Not so sure about that situation. I think this can be clean up. We also have some spacing going on here where the spacing is even but it needs to be more. It’s this is a little bit tighter. We’ve also got drop shadow on the text. You know it’s it’s just not making for a super clean experience. I think we need more spacing between the

the icons and the heading and then the heading and the text, and just all needs to be spaced out a little bit more.


But the grid itself, you know, it’s a clean, tight grid. We can at least read stuff. We can see what’s going on. It’s obvious that these things are clickable. Okay. Let’s talk about copy here.

Before we do much scrolling around

and looking at other things.

When I first read this, bring your property to the next level, the first thing that popped into my mind obviously is we’re using abstraction copy. It’s not obvious what’s being said. It’s kind of like left to the user’s imagination.

And in this case, it’s just not all that great. Abstraction copy, if it’s not really, really, really good, is usually bad, okay? Bring your property to the next level doesn’t actually mean anything, right? What, who’s grading the levels?

What’s the level at? What kind of property is it? Is it residential? Is it commercial? How are we going to bring it to the next level? So this is landscaping, hardscaping, irrigation,

but bring your property to the next level, I mean, couldn’t a painter say that? Like, what if it’s a painting company? Couldn’t a painting company say that? Like, we’ll paint your house, bring your property to the next level.

Couldn’t like a driveway company say that? Like, get a new driveway, bring your property to the next level. Couldn’t a fencing company say that? Hey, bring your property to the next level with our great fence.

So you can see the generality, like there’s no specificity. One easy way to make copy better is to make it more specific, just like SEO. The better, SEO is better when it’s more specific, and so is copy.

Because now the user knows exactly what you’re referring to. They know exactly what they’re supposed to imagine. They know exactly what they’re supposed to be thinking about. When you’re very general, generic, and abstract, it’s just left to their imagination, and then often they don’t really know what’s going on here,

or what, so they just don’t think. They just don’t think about it. Nothing really pops into their head. They don’t connect any dots. You haven’t helped them down the funnel. Okay, so we gotta improve this headline right here.

Landscaping, hardscaping, irrigation, and more. This is very specific now, so it informs them of what’s actually going on here. But there’s no emotion evoked by this headline right here. Get a quote, view services, okay? Let’s keep going.

Trusted for 40 years. All right, okay. Now, let’s talk about, we’ve talked before about us versus them copy, right? Me copy, me focus copy versus you focus copy. We want mostly you focus copy,

like talk about the actual customer, don’t talk about yourself. So we’re talking about them here. So bring your property to the next level. That’s one good thing about this section right here. Then it goes to our services.

That’s back to me, we focused, okay. Top-notch care for both residential and commercial, okay. And then the next section is me-focused copy, is we’re talking about us now. Trusted for 40 years, okay. Here’s where we are.

We were established in 1984. If you’re new here to WDD Live, the reason why this is just not fantastic is because nobody gives a shit. Honestly, nobody cares. Nobody cares that you’ve been around since 1984. What they care about is, do you provide the services they’re looking for? Do you provide them at a quality level? Show me examples of your work. Show me testimonials and social proof. If you can let me know that you’re pretty much who I need, then I care more about you and then you can tell me your like life

history, okay, and your favorite color and your fucking cat’s name and all that shit, okay, that people put on websites. But don’t, we don’t need to tell them that right off the bat, okay. Now some people think well if we just tell them we’ve been around since 1984 they’ll just know that we’re super experienced and great. No, there’s a lot of shitty companies that have been around since 1984.

So we’re just wasting an opportunity here to talk about stuff that actually matters. Like you could have gone from our services to like showing a gallery of the work immediately. Like, hey, look at our work, look at what we do. Show some properties, like see these properties

in the background, can’t even see them. Can’t even see them because they’re covered up by text. There’s no detail for me to even see. Up here I see a video but this is this dude’s face. I got guys wandering around. Oh I see a piece of a property. I see a guy in a motor. Moert, shit’s going by at light speed. I’m not gleaning any work quality from this video. Not gleaning any work quality from here. You’re not painting a picture.

You’re not showing me beauty that I would maybe want to have for myself. Instead, you’re just saying, hey, we’ve been around for, and then once again, what are we looking at? We’re looking at a bunch of equipment and people waving. Okay, not what I want.

I don’t want these people in my yard. I just want my yard to look fantastic. Okay, so show me fantastic looking yards, right? I’ll care about these people after they do a great job for me. All right, now we go down.

So now we have some social proof, which is good, but it’s a lot of space. There’s a lot of space taken up for this social proof. Like we got a whole, look at my, I’m on a giant monitor too. I mean, there’s a lot of room taken up

for three testimonials.

Like we could, what could we do different?

Well, we could take these three testimonials and sit them next to a gallery of work. That’s a better use of space. So now we’re actually showing people our work and then right next to showing them the work is like, and look what people said about it after we did it for them.

Like it’s like, you get both at the same time, that creates a really great vibe. Creates a really great vibe. This is not, this kind of visual layout is boring. It’s not of any visual interest. So, you know, people are gonna scan it and move on.

It doesn’t really have the impact that it could have if it was paired with other visually interesting and important content. Check out recent projects. Okay. Now we have the gallery, which is fantastic, but it’s, it’s a chintzy gallery. It’s like, uh, oh, let me, let me just throw in a little grid gallery of work.


You could, I’m sure you can probably expand.


You can’t even expand it out. It’s going to, Oh, go gosh. Oh my gosh. We were going to talk about that in just a second. Flag on the play, 15-yard penalty. Let’s talk about it in just a second, okay.

When you need to visually show off a project of some sort, right, like look at this, look at this, maybe that’s a beautiful, look at this beautiful little patio situation going on here. I can hardly see it. Give it to me big. Find a way to present it in a large format. Large format photos have far more impact than little thumbnails. Okay? And then even worse, here’s the 15-yard

flag on the play, personal foul, okay? You’re going to take the person to Instagram, Jack, they ain’t never coming back. Okay? Like 30% of your traffic probably never coming back. Once they’re on Instagram, it’s cats and photos and gym shots and all this other, now they’re all into this other topic and in somebody else’s website,

you just took that valuable traffic and you were like, here, go to this playground over here for a minute, this distracting playground that’s not gonna do us any good once they leave this little photo right here. So 15-yard flag on the play.

You’ve got to keep the traffic on the website do not send them elsewhere and is this some sort of plug-in let’s inspect this who’s responsible for this who is responsible for this yep SB Instagram what is this SB Instagram gotta be gotta be some sort of SB Instagram let’s just do this I I wonder if this is fucking smash. Okay, what Instagram feed WordPress plugin.

Look at this. Look at these people, responsible.

Put them in, put them in.

This is a felony charge, I’m afraid. This is a felony charge on Instagram feed pro. Put them in the slammer, put them in the slammer. Go to at least three years community service for this afterwards. I mean at least you know 90 day stay and then community service. This is a this is not a good situation.

Okay all right we’ve we’ve diagnosed this and then don’t you love they throw in the buttons that don’t look anything like the other buttons on the website. That’s why I don’t use plugins for this shit. Like this this is a not a good situation. Okay, back to the 1998, says hi on our drop shadow here.

And then we’re at the bottom.

Okay, now, here’s the thing. We talked about this before, okay? We’re grading this, I graded on just like web design in general, but the world will grade it in relation to other sites in this industry.

And thankfully, you know, other sites in this industry are pretty terrible, pretty terrible. You know, most landscaping companies, they don’t put a lot of money into their sites. This is what you’re gonna see kind of like on average, I guess I would say.

About, you know, okay, it’s all about us, all about us. We got a lot of photos coming soon. I do like that there’s people on here. I do like that there’s a little bit of bio about them. You know, this does help build trust. I don’t know if this is the best way to put the bio in.

I would probably go for a little bit of like a modal action here. But yeah, okay, let’s move on. Let’s just check out a service page here. And let’s maybe dive into a little bit of SEO opportunities, see if they’re checking those boxes. We’ll pull up a little bit of Ahrefs.

Okay, let’s get Ahrefs cooking so we can we can look at some stuff here that might be going on with this domain. All right let’s get that pulled up and I’ll just throw the domain in here while we’re here. We’ll head over to Site Explorer and we’ll pop this in we’ll do the whole domain. Okay fantastic we’ll look at that in just a second. All right let’s get back to the website. So commercial property maintenance in Connecticut and Western Was this Massachusetts Maryland Maryland’s gotta be Maryland, right? There’s a lot of fucking states here. Okay, it’s not my fault. It’s not my fault See how hard this red button is to see not to mention it’s like now it’s like blending with the fall leaves and stuff

I don’t know there’s and And that red button and that red truck are not one in the same. There’s a little bit of inconsistency here with our reds. Ok, oh it’s back to us. It’s back to us us us. Look at this. I mean commercial property maintenance. I would love to see a commercial property that you’ve maintained. Why am

I looking at this giant truck in front of a gigantic building that may not look anything like the building that I own? I don’t know. What is the, what is this person have against showing us their actual work? Who we serve, condo communities, retirement communities, HOAs, commercial spaces.

Got a little bit of photo action here, but not big. It’s not large format, but at least I can see what’s going on. This is probably one of the better sections here. And then we just have a nice list of this is a what I call lazy list it’s like hey yeah this is our stuff I didn’t

know how to visually lay it out so here it all is more or less like a Word document we got to get a little more creative there oh now now now this is what I’m talking about so we have a full-width gallery the thumbnails are much larger I can see more detail I can click on them. I can go, now we’re talking. Now, see, see, now we’re talking, right?

If I’m actually a prospective customer, look at that. Look at that lawn. Look at this lawn, okay? That I probably don’t need. I don’t know what’s going on there. And this is where we need to get into categorization, okay?

I mean, I guess all of these, maybe I want to sort and filter, right? Show me like, you know, residential, well this says all commercial, okay? But what they’ve got, condo communities, okay, I guess that’s when the condo hires, so it’s like, you know, people who live in the condos don’t actually hire the company. Same thing with retirement communities, HOAs, commercial spaces, okay. But maybe still, like if I’m an HOA, I want to see all these like, you know, neighborhoods.

I want to see all the neighborhoods you’ve done. Maybe I want to filter just because if I’m an HOA, do I give a fuck about Volvo’s lawn? No. All right. So you’re showing me something I don’t really care about all that much. So a little extra effort to make these sortable, filterable goes a long way.

All right, let’s hop over to HRFs. Okay, we’ve got a DR1.4. Okay, not great. When’s this site been around since?


Mm, mm-mm, mm.

Have you been around since 2019?

What is that, five years now? We’ve been around five years and we’re at a DR1.4. That’s a struggle. You’re on the struggle bus. We’ve got hardly any keywords being ranked for here. Just not, nothing really happening from an SEO standpoint.

Go to organic keywords that they rank for. DW Burr, obviously, okay, they’re, what is, oh, they’ve lost this position too, recently. Hmm, this needs a lot of SEO help here. Crew member job description 1.3 thousand volume. But look at the position on these things. I mean nothing really. There’s one thing in the top ten. Landscape crew member job description. Is that what they want to rank for? No, probably not. The SEO on this

website non-existent. Needs a lot of help. Let’s go back and see. I don’t know when this website was deployed. Probably very recently. Maybe they had a terrible website. This is the new website maybe. Maybe this website will kick the SEO into gear a little bit. Let’s see if it’s geared up to do that. Where do I go in ARC to see?

Oh, it’s right here. Is this the title tag? Commercial property maintenance.


Consider if that’s the keyword. I didn’t do the keyword research, so I don’t know. Complete, but this says, look, commercial property maintenance. So we have complete grounds maintenance. Let’s just double check and make sure this is an H1.

It is, okay.

Let’s make sure that this is an H2. It is, okay. What is this? A paragraph, okay. I’m just gonna assume that these are all H2s. What are these?

Okay, H3s, and we’ve got weekly maintenance, seasonal cleanup, okay, okay. Highly certified and experienced doesn’t really do anything for us. You know, why don’t you tack some keywords onto here? Highly certified and experienced commercial maintenance company or something like that, right?

Get a maintenance quote, doesn’t really do anything for the SEO, does it? Right? There’s no keywords in this h2 here. So we’ve got some some low hanging, this is all low hanging fruit stuff, low hanging fruit. I’m not seeing any links. Okay, no links, it’s gonna be tough with no links to rank. Like internal links, extra like something, something, give me something. Not much going on there. Is this this? No, that’s just red text for no reason.

I thought that was clickable. See what happens? See what happens when you use your clickable color on non-clickable objects? People get confused. People get confused.


All right, so we need SEO work.

We need, I think, you know, in terms of, in terms of general design, there’s a couple things that could be cleaned up a little bit here or there. This is not an example of a project that, you know, needs to be scrapped by any means.

This is just a little bit of clean up work to do and then heavily, heavily, heavily focus on copy and SEO. Heavily focus on copy and SEO. Navigation’s clean and simple. I don’t see any major issues. Get these social links out of the header.

Once again, flag on the play, 15 yard penalty. Don’t send people to social profiles. Your number one objective is to get them to fill out this form. That is your number or call that phone number. That is your one and two objective. There is no other objective.

And I don’t care what the client tells you. Well, we want to get our Facebook numbers up. I don’t care. I don’t stop. That’s not what we’re doing. Okay.

We have two objectives. People email you or they call you. That’s it. That’s all we’re doing, Jack. Okay. We’re not, we’re not worried about anything else.

You know when you can get them to Facebook? After they fill this form out. If you’re desperate to get people to Instagram, get them to fill out this form, then send them to Instagram. That’s how you do it. Do not send them before they fill this form out,

or call that number. That’s it. Plain and simple. Alright. I think we’re done. Let’s go to Q&A. We’ve done enough. We could dive into DOM, and we could dive into other areas but kind of the similar

story we’ve got some color issues going on here we’ve got some UI stuff to clean up we’ve got some copy to clean up those are the biggest pieces of the puzzle for this particular website and then SEO just I would focus heavily heavily heavily on SEO or PPC or both depending on budget one or the other this is a PPC play all day it’s an SEO play all day. You can do one first both at the same time right now I don’t know if either are being done. So let’s just get something going in that regard

Alrighty, let’s go Q&A. I’m gonna go back to camera. I’m gonna I’m gonna just put in my brain for one second Okay, remember to screen share if you show anything else on the screen you need to screen share It’s well coaching myself session there so we don’t forget. Let’s move on to Q&A. First, before we search for questions, I will, let’s see. Calm down, Kevin, you’re getting high blood pressure

right now, that’s how you feel. I don’t agree here with the Instagram feed thing, okay? I mean, you are free to disagree. I would prefer a argument, you know, what is the counter argument. I just personally know, I’ve looked at enough analytics

to know that sending people off of your website when you’re trying to convert them on your website is a horrific thing, okay? Now, there is one caveat, there is one caveat. You know what the one caveat is? If you are a banging social media star, okay?

If like you convert like hotcakes on social media because you have just a knockout personality or whatever else you have going for you and you love social media attention and you convert social media attention because you’re like an influencer on social media or whatever, that’s when I would send people to social media because that’s your most important. Those are your most important channels, but a landscaping company When have you seen a landscaping company knock it out of the park with their social media not very often not very often You could you’ve got them on the website, that’s the where you want them we got them where we want them

Why would we send them somewhere else that doesn’t make any sense from to my brain or to my experience or the analytics? I’ve looked at, doesn’t make any sense. Now, if you have a counter argument and data and whatever else, I would love to see it, but I haven’t seen it up to this point in my life. Let’s see, okay, okay, okay, let’s see.

I see some questions in the chat, by the way,

I’m just glancing, I see some questions

that do not have a hashtag. If it doesn’t have a hashtag, Q, or hashtag question, I will miss it. Okay, I’m gonna go to questions. Chat seems to be mostly questions. Let’s go answer. Is automatic CSS 3.0 being tested with bricks 1.9.8? Yes. Are you aware of the ACS 3.0 issue with settings? Oh gosh,

come on. Comments and reactions. Tool tip always gets in the way of the question. Settings getting out of sync in the front panel versus back end panel even after refresh and cache erase. No, haven’t seen that at all. Haven’t been able to reproduce it.

Haven’t seen it in my installs or instances. And I’ve used it quite extensively. That I have not seen. But if it’s happening to you, please report it and give as much detail as humanly possible. And it’s really probably going to be a server, like we need server data or a

login of some sort, something like that to work with. How do you deal with BRICS bugs like lagging while developing? That’s a really bad bug. Yeah, they’re working on it. They’re working on improving it. I don’t experience it all that much. And you guys watch me use BRICS all the time. I rarely ever have lag issues. I do, you know, there’s a slight, I would call it, what would you call it, you know, like a slight delay in some things. And it’s annoying. It’s not fantastic. I wish it wasn’t there. It’s not show stopping. It’s not preventing me from doing my work. It’s not really all that. It’s just slightly annoying. Now, what I’ve noticed is,

is some people have 8,000 browser extensions installed. Some people have 8,000 tabs open. Some people are running a five-year-old PC. Some people, like, you know, that kind of stuff does matter. So I’m running, like, you know, an M2 Max, and I, you know, keep a tidy tab situation.

I don’t use a lot of browser extensions. Maybe that’s the thing. It’s been a hard situation for them to track down. I know they’ve been looking into it. Everybody seems to have a different kind of like cause for it. It is absolutely related to DOM size. So the bigger the DOM gets on the page, the more lag is introduced. There’s been lag in

different situations. There was a lag with the structure panel that’s unrelated to the lag from actual like the the page builder and what’s going on with classes. So there’s multiple scenarios, multiple situations. They’re tracking it down, they’re looking into it. I will also tell you, the lag is present when I’ve used Divi websites. There’s a DOM issue in Oxygen.

So the DOM size in Oxygen causes a lag. This is not the only builder that’s run into a couple lag issues here and there. All right, so you gotta keep that in mind as well. There’s a lot going on in some of these builders. If you use a lot of loops, if you use a lot of dynamic data, that can all contribute. Okay, so they’re trying to track it down, they’re doing their best. I agree it’s annoying, but I’m

also confident they’ll get it sorted out. Do we still get the discount for access to the Quikly plugin? Yes. You just need to message hello at automaticcss.com. Okay, how to take a client’s brand colors and turn those into effective web design. Well, that’s a great question for a UI designer. Excuse me, I would like to have a UI designer

do some trainings for the inner circle. I’ve had that back of my mind, getting that done. I think that would be absolutely fantastic. I think that would be really, really, really good. And I’m still working on that, still working on that. What are your requirements for hosting you use?

I’m currently on a cloud professional hosting plan from Hostinger and was wondering about your opinions are on that. I use GridPane, I’ve gone over the GridPane stuff before. I think we did some GridPane stuff in the inner circle. So I recommend going and checking that out first.

But other than that, I mean, a bunch of specifics, it depends on a lot of stuff. Okay. Do you have a video or course to recommend for best practices regarding UI UX? I don’t. Not a single source of truth, right?

There’s a lot of like, it’s an area of study. So you have to commit to the area of study. You’ve got to learn from a bunch of different people and a bunch of different sources. There’s maybe I can make maybe a list of some great YouTubers I know that I personally follow in the UI UX space

I could do that. But still they’re not the, you know, it’s not like a course that you can take. Maybe some of them have courses, I don’t know. But it’s just an area of study, it’s much like SEO. Right, you’re not gonna take one SEO course

and now you’re like, you know everything about SEO. You’re not gonna take one UX UI course and know all there is to know about you. It’s, same with development, it’s an area of study. And so you have to commit to the area of study. It’s a discipline, it’s a practice, okay?

So it’s gonna be years and years and years of gathering information and practicing and learning. It’s not gonna be a where’s the one course I can take,


It’s not that kind of situation. I currently have a small solo WP business and I, there’s the tool tip again blocking me. And I feel like designing the sites takes too much time, although I’m fast with development, any good resources to get better at web design.

We’ll just hire off the design. You shouldn’t be, if you’re having to do the design and the development, number one, your projects are going to take forever. Number two, you’re going to be very limited on how many projects you can take at a time. And then, yeah, it’s going to be, you know, that situation over and over again. Why in the world is it not even open?

Flag on the play. What can I say?

Okay, where can we buy the cap and other gear? I actually don’t have any, I don’t have any merch. I don’t have any merch. Maybe if I find time in the day at some point, someday in the future, we can come up with some merch concepts.

If you have any great merch concepts, send them my way and I’ll take a look at it. If you want to run my merch shop and you’re like a you’re a merch type person, and you can make some badass merch, contact me. Get in touch. Let’s talk. I would love some Bev merch. I would love some flag on the play merch. I would love some felony behavior merch. I would love there’s so many concepts we could go with based on based on our live stream situation

that I think would be good. Show me your dom, you know, like we got a lot of stuff we can work with here. I need some creative people. I just don’t have the time for this. I do not have the time to worry about merch.

Is there something I can do to override inline styling being applied to the text on a WooCommerce listing? Oh my God, you just said WooCommerce, my eyes glaze over, I instantly have a headache. I suddenly want to go find a high bridge to jump off of. Okay, let’s try to dissect this here.

Override inline styling being applied to the text on a WooCommerce listing. Client has copy pasted and the inline style is pulling through on the text boxes. Well, the unfortunate part of inline styling is that it tends to take precedence.

That’s, that’s its whole point, right? Um, so no, you need to get your client to stop copying and pasting shit. And, um, yeah, you need to remove all that stuff manually. I would say, make sure it’s not there. That’s probably going to be your, your solution. Can we look at this site in a mobile view?

I bet 60 plus percent of the audience will be looking at the site on a phone. Um, I mean, sure, but is that really gonna help much of anything? Let’s go here. Like, being on mobile is not gonna solve the color problem. Like, look at the color problem. We still have red buttons that say no.

We still have a discrepancy between the red colors. We still have a video auto playing, which I would say should be switched out on mobile. You would wanna switch that to a image, background image on mobile. The cards are the same cards. The about section is still talking about them.

This section is still boring. This gallery is a little bit better because the thumbnails are a little bit bigger, but it’s still sending them to Instagram. So immediately, I mean on mobile, think about this. I mean, think about what I said about sending somebody to Instagram. On mobile you probably, when I sit on desktop 30% of the people you’re not getting them back, maybe that’s 60% on mobile because half the people don’t even know what the hell a new tab

is or where it went on their phone, right? On a desktop it’s easy to see maybe that opened in a new tab or whatnot. See I can see right there it opened in a new tab, I closed the new tab, I’m back. Good luck on a mobile device, my gosh. I mean ask my wife where that tab went on her phone. Probably has no idea. No idea. So, and you sent her to Instagram, boy you ain’t getting her back ever.

Okay, so, point stands. Why? Why are we doing this? When we can give them the same information on the website. We can put the same photos and the same videos on this website and not worry about sending them away.

Wouldn’t that be the preferable thing to do? I think that would be the preferable thing to do. What do you recommend for team pages with bios? Best practice for implementing that? Hey, good question. This is a fantastic question.

Let’s go to the about page. Okay, so you’re gonna run into a couple different situations. Situation one is we don’t really wanna, you know, have a bunch of information about the people. We just want to show them like their face, their, their, you know, name, obviously,

their title, whatever, okay? Then just put them in cards. Any kind of card you like is fine. And obviously, it’s not going to be clickable. And there’s going to be no other thing that the person can do. That’s like situation number one. Situation number two is we have a bio that we want to tell a little bit more about the person. Maybe even there’s a little video that they’ve done or something, I don’t know. It’s not a lot of content.

It’s just a little bit of extra content. Where are we gonna put that? Well, I would say put it in a modal. If you’re not gonna do a bigger featured people sections that does support inline content, if you’re gonna still use a card layout,

then I would do a modal. So you click on this, a modal comes up with the additional information in it. Okay, you’re good to go. By the way, all that data is still crawlable on this page, yada yada yada. In most cases if the modal is done correctly. Now there’s a third situation where it’s like no we have a lot more

content. Now maybe this is think about this is like a course creator. So if this was a grid of like people creating courses or of teachers, okay, and the teacher needs a longer bio maybe she has a they all did an intro video for their students and then there’s other things like how to get in touch with them and their curriculum that they’re going to be doing now we’re talking about like there’s a lot of information associated with this person now they need their own URL okay so now you don’t try to put that stuff

in a in a modal or even on the same page now every teacher has their own URL. And maybe there’s even, you wanna be able to send people via a link, a direct link, directly to somebody’s profile page. Obviously, they need their own URL, and that’s all a new template now that needs to be created

for how that content is gonna be laid out. Now, I will tell you this, in all three scenarios, this is a custom post type. Every single one, whether they need a URL or don’t need a URL, whether they need a bio or no bio, whether there’s additional information

or no additional information. It’s a CPT every single day of the week. Do not create these people as pages. That is, we’re skipping the flag on the play. You’re going straight to prison and that is a felony violation.

You won’t be out anytime soon.

So don’t do that.

It’s a CPT. It’s a CPT every day of the week. Okay? All right. Because this has got to be a loop. You got to loop through this. All right? This is not, this is not static content situation. You don’t just manually put cards on this page. You create a CPT. You loop through this dynamic data, call it a day. It doesn’t take any extra time. Okay? If you, you know, if you know what you’re doing, maybe it’s a minute extra. Maybe it’s two minutes extra.

Well worth it, well worth it, well worth it. You do the CPT. Okay, let’s move on.


I’m skipping a couple,

I’m looking for really, really good questions because there’s a lot today.

A few of the frames footer templates have social media links. Is that the preferred spot or modals? Yeah, if you are going to put social media, put it in the footer, put it in the footer. Because here’s the thing, if the person gets all the way to the footer,

a lot of times it’s like, all right, they passed up every other opportunity we gave them. Like we’re trying our best to get them to convert, but they didn’t bite on any of that stuff. They got all the way to the footer.

Maybe they’re looking for our social media. I don’t know. Okay, so you can include it down there with like everything else. A footer is like a catch all situation. It’s like, hey, did you not find what you’re looking for

anywhere else on this website? Here’s your last chance right here, okay? So it makes sense to put it in the footer, but that’s never in the header. Absolutely not. Never in the header.

Let’s get rid of that situation. And then I would just avoid it everywhere else.

Stick it in the footer,

and then if you want to make it prominent, make it prominent after they convert. The best place, in my opinion, assuming you have nothing else you want the person to do after they convert, the best place to show them your social media

is right after they convert. Because you just got them as a lead, now you can even maybe get them to follow you on social media, that’s like a twofer, right? So use that thank you page to send them to your favorite social media account, okay?

I think that’s a fantastic use of a thank you page. Where did you learn what you know about UX UI design? So again, it’s not a single source. It’s literally, you know, what now? Decades of just being in the game right being in the game? You just you learn a lot by playing the game for a very long time

That’s that’s literally it and I and I watch UI designers. I watch you I just UX designers. I listen to them I hear their arguments. I watch them work. I I do actively Pay attention to that side of things Let’s see after yesterday’s ACS has 101 ACS s3 has the feature to eliminate orphans Is this possible with the current version as I’m constantly getting orphans at different breakpoints. It’s not possible with the current version. No There is a there is something in the current version called text wrap balance

So you it’ll there’s a switch for automatically balancing headings, but it’s not the same as eliminating orphans It’s a little too aggressive for my taste, so I always turn it off. But yeah, using the, you know, in ACSS3 that’s the best approach is the orphan elimination. Okay, let’s see, what do you think having a parallax effect on the hero section? I’m not a huge fan of parallax effects. They’re cool in some cases. They’re very distracting to users in a lot of cases.

A lot of users don’t know what’s happening, honestly. Like when the page is parallaxing, they get very confused as to what they’re looking at or where they are. And it’s just, it doesn’t tend to be great for UX. I know it’s cute.

I know that Bev loves it, okay. But it can be bad for conversion rates, I’m just saying. How important are NAP informations for local businesses like restaurants? Should we show them above the fold? Yeah, that’s and anybody that doesn’t know what NAP means, that stands for name address phone and it’s an SEO term. So you absolutely want the phone above the fold, phone number for a local business that would get calls and wants calls. I think the address above the fold

is very important as well. Now this is a service company that comes to you. So their address is not important. But if it’s like, if you’ve got a restaurant, if you’ve got a local shop that people come into, absolutely, address above the fold,

phone number above the fold, directions above the fold, all that stuff on like, because that’s the prime thing that people are looking for from a local, visitable business. Okay, let’s see. How would you do a query loop through a CPT but output into a grid with different grid areas?

Basically, grid one is one, two, one, three. One, two, one, three. Well, I mean, you could do programmatic grid styling with a query loop, so that’s not a problem. But it does depend on the actual grid structure. I’m not sure what you mean by grid 1 is 1, 2, 1, 3.

I would need to see it. If you have a link to an example or something, I can pull it up and then I can say, okay, here’s how you would do this with a query loop. But you can absolutely do. It doesn’t have to just, like, the fact that we’re using a query loop Doesn’t mean we have to have a three column basic grid like this. We can absolutely do a fancy grid with a query loop

What are your thoughts on using options pages or custom content types in lieu of CPT’s? Not a fan of options pages for that Custom content type is like a new concept as some plug-in came up with I can’t remember exactly which one.

I don’t know.

I don’t think it’s all that fantastic over what we’ve already got going on.

What do you think having a,

okay, that question’s been asked four freaking times now. With the idea of potential customers converting before reaching the footer, if the content is well formatted, is there such a thing as too much content, too many sections on the homepage?

There is. Now, what is the number of sections that’s too much? I think that’s a good question. This is a good question to talk about. The answer is yes, and the answer is no. So, we live in a gray area now.

So let’s describe the gray area that we live in. If I said this sales page and every page on a business website really should be seen as a sales page of some sort, okay? So if I said this sales page has 30 sections on it, 30 sections guys, that’s got to be too much, it’s got to be too much. That’s so long, that’s so much, nobody’s gonna go through 30 sections. But then I told you that that page, those sections, that 30 sections of content was as entertaining and

as valuable as like a really great popular book or something. Like people can’t get enough. Just the content that was put there is so engaging that you get through all 30 sections and you actually want more. Then can we say that that’s not enough or that’s too much? We can’t say either one actually.

Maybe it would have done better with more. Now we look at the conversion rates and it turns out that that content’s so engaging that that 30 section page has an astronomical conversion rate. That people just love it so much,

they all end up converting and it’s a 30% conversion rate or 40% conversion rate on that page. Who’s gonna argue that that’s too many sections? You can’t. You can’t. Now we look at a page that has 10 sections. Is that clearly better than having 30? No. It depends on what the 10 sections say. Maybe the first two sections are great and then it just starts to get super boring or irrelevant or like it just feels like this is stuffed with content.

It’s not actually content that I care about. Well, that’s eight sections too many. That page should have only been two sections because the other eight nobody cares about. So that’s too many. So is there an answer where it’s like this number is too many or too, no.

We know that squeeze pages, which are effectively one section, can also convert at 30% or 40%. What is the objective of the page? How much content is it going to take to reach our objective? Depending on the object if the objective is to download an e-book you only need one section for that maybe. If the if the page is to buy a

Tesla maybe I need 20 sections right. So you know it is what it is based on the content and the objective there’s no way to say by length. Now what I will say is a general rule of thumb is, the harder it is to get them to say yes, the more sections you need, the more content you need. It’s like a sales conversation. I’ve compared this to sales conversations in the past,

I think it’s a good metaphor.

Let’s take a salesperson,

a really, really, really good salesperson, and the salesperson says, what am I supposed to sell this person? And you say, you have to sell them the car that they want. Okay. And so it’s how much is the car? It’s a $70,000 car. Okay. And so this part, this person’s, you know, they’re about to invest $70,000 in this car. Now they say, how long do I get to talk to him for? And you say, you have five minutes with them. Well,

that salesperson is going to be like the fuck what I need more than five minutes. They’re gonna have questions. They’re going to have objections. They’re going to make, they need to make sure their $70,000 going to a good place. It’s not going to be wasted. And they need to know, you know, is there a warranty? Is there this, is there that, what’s the financing? I can’t do this in five minutes. Okay. Well, clearly you need more than five minutes to sell a $70,000 car, don’t you? So if you’re selling something

big that takes decision-making that people are going to have questions about, you can’t sell that with one section on a squeeze page. But you can get them to download an ebook with a squeeze page. So it depends on what the objective is. And I link that to sales because all the time you’ll hear Bev go, that’s too many sections. Nobody’s going to scroll that entire way.

And it’s like Bev, if I put you on the phone with this person, are you going to be able to sell them? Let’s do this Bev. Bev, you’re on a 400 word limit. Now get on the phone and sell them this thing. And she’s gonna be like,

well, I can’t sell, I mean, I gotta know. Exactly Bev. So I need more sections on this page. Assuming they’re good sections and they say what they need to say, I need more of them.

Because this is the harder thing to sell. So I gotta do more convincing. I gotta do more overcoming objections. I gotta do more FAQs. I gotta do more of everything. I gotta do more social proof.

I gotta do more because it’s a harder thing to sell. If it’s an easier thing to sell, I don’t need as much stuff, okay? So think about it in that way as well. When is the best scenario to change the color of the section? Let’s say on the homepage, it has a hero section

with black BG, second has a white, and third has a black BG, and fourth has a white, and so on. There is no rhyme or reason or rule. It’s like, now you don’t want sections to look like they’re part of other sections obviously, but you could do that without background color.

You can do that with how you’re doing your typography. You can do that with how you’re doing your spacing. You can do that with how you’re putting other design accents that maybe look like little dividers that show a clear division between sections. There are pages that are all white.

Let’s see what Apple’s doing lately. Let’s go to one of their actual sales pages. Let’s go to iPhone 15 Pro. See what’s going on here. Okay, so there is a slight background change from one section to the other.

Let’s continue looking.

Here’s another one.

By the way, I hate this I absolutely hate this oh I thought they hijacked my scroll they didn’t it was just a delay and that thing loading okay not not a big deal all right so we come down okay they’re using a very subtle very subtle background color change to denote different sections almost so subtle okay right here so right here is an example of this is black and I’ve got lights on,

like it’s hard for me to see my screen sometimes. Okay, yeah, there we go. Okay, so this is all black, come down, and they’re using spacing and this little animated, where did it go? That little animated thing that then disappears

to kind of denote that we’re going into a second section of content here and then off into more. Notice they’re not using any use of background color here. Look at this little visual divider they’ve stuck in here. Look at the spacing, the way that they’re using spacing in these sections.

So it doesn’t always have to be background color, background color, go to a different background color, go to a different background, it doesn’t, look, they haven’t used another background color in a long while now. It’s how they’re laying the content out.

Now they’re using these cards. Okay. So the little card format here.

And, and really even when they do swap background colors, it’s very, very,

very subtle. Um, let’s take a look at Stripe. Very subtle. Look at this very subtle again you’ll see over and over and over again subtle tends to be the rule of the day then when you go bold you go bold okay but you don’t want too much bold so this section really stands out they use an angle divider here back to subtle subtle now cards cards help as well subtle with Subtle with an accent or I’m sorry, bold with an accent.


Now we’re back to subtle. So they’re mixing sometimes subtle, sometimes bold, not always bold, not always subtle, sometimes subtle, sometimes bold, sometimes with a little cute accent. Okay.

Any other, any other sites? What’s Coca-Cola doing here? I don’t even like their site all that much. Pretty, pretty amateur, pretty amateur. Look, they’re not using, look at this, they just go from this cards to different cards to different cards to these cards. Their use of spacing is not

all that good. It’s actually pretty atrocious. The site’s pretty atrocious overall. I mean this is so boring. This is so it’s just amateur. It’s like man low-hanging fruit. It’s like lazy. lazy You know Okay, so not much to look at there

And this is where I would say if Bev says that logo is too small. I’d actually agree with her here. That logo is too small It’s weird. It’s weird that the logo is smaller than the links in the nav, you know, I would say visually they should at least be the same But that’s just me. That’s just me. What is the best practice for rounded sections? Margin equals prison time, obviously. Can ACSS be any help? Rounded sections, rounded corners on sections,

is that what you mean? The sections that round off here? Well, you can do that for sure, but I don’t know what that would have to do with margin.

I would need an example.

I would need to see a example layout that you’re trying to achieve. Okay, let’s do a final call for questions. Let me hop back to the chat here and see what people are up to in the chat. Yeah, very templaty Coca-Cola. Absolutely. There’s some questions in here guys that did not get hashtags and so they got missed. Let’s see. Why are the likes so low? Get them likes up.

I agree. I agree. You should you should comment and like when you first arrive. Okay, okay, okay. Croc. Yeah, Croco block was the name of that of that plugin that does the CCTs tease. Okay. Okay. I want the don’t touch my box merch. Yes, yes, we absolutely need that. I forgot about that one. That was a good one a while back. Okay. Here’s one. How?

Oh, no, that. Okay. Then that was, that was re-asked with the hashtags.

So that’s good.

Some people have 8,000 tabs open. I feel attacked.

I just say it does. It uses resources.

It uses resources. Hey, Kevin, they are making block editor races.

Let’s make bricks editor building challenges.

Yeah. I’ve thought about doing it the right way.

Cause that format is atrocious. Man, I could talk about all of the problems with that little, that format that’s going on, which when I first heard about it, I was going to apply for it. And then when I asked what the format was, I was like, that’s promoting all the wrong things. It’s promoting all the wrong things.

And it’s going to lead to, it’s going to lead to the situation getting worse and worse and worse that we happen to be in. And so I do think that there is a really good case for doing that with a better format. And you know, I wish they were open to feedback on like serious feedback on the format that’s being used. But yeah, it’s not a good format. All right, let me check. Remember, I said last call for questions, then we’re gonna get out of here

Let’s see if any came in is a background video frame planned for frame similar to the background image frame No because you actually use CSS background video for that you don’t actually embed a real video in the background So any frame section like a hero any frames hero for example that exists right now You could add a background video to very easily Any frames hero, for example, that exists right now, you could add a background video to very easily.

So, that’s why we haven’t created any in particular. You’re not a WooCommerce fan, I think, what would be a good alternative? I’m a big SureCart fan. I do like SureCart a lot. Other than SureCart, we do have,

two, why do I, NorthCommerce. Okay, I almost forgot it again. I was like, I don’t know why I can’t remember the name North Commerce. We do have North Commerce on the come up, but it’s not ready for prime time yet.

Now, if North Commerce gets ready for prime time, I’m like, I’m taking a hard look at North Commerce, okay? I’m taking a hard look at North Commerce. But in general, I feel like e-commerce and WordPress is stuffing a square peg into a round hole. I feel like we’re fighting the CMS.

It’s just not designed for WooCommerce, or for e- see, I didn’t use the fucking brand name as the thing. It’s not designed for e-commerce. It’s like, it’s like we can use it for e-commerce, but what a mess.

What a mess it feels like it becomes. Which is, SureCard’s not even a WordPress, it’s like you’re doing, it’s a third-party platform that just integrates with WordPress, right? But you’re not using WordPress in the exact same way. And I’m just a big fan of what Adam and team

have going on across almost all their products, really. But yeah, I’m very impressed with what they’re doing. And the fact that it’s not hosted in your situation, I think is actually a bonus. Because I also see e-commerce shops on WordPress that don’t have enough server resources pumped to them.

The checkout situation, it’s just, think about like I shop from so many e-commerce sites. I buy shoes, I buy this, I buy that, I buy a lot of stuff. And when it’s a Shopify site, I can check out really fast. It’s all, like they all share the same checkout flow.

They all share the same data more or less Like I can use my information across multiple sites and then when I get to a WooCommerce site, especially if it’s on mobile Oh my gosh, what it’s it’s just like amateur hour. It just really really really feels like amateur hour so I’m just not a fan. I’m just not a fan Have you heard of pin pod as a Figma alternative that’s thought out for the web.

It has CSS grid layout and Flexbox, only V2, but getting pretty powerful. I have heard of it. I haven’t had time to take a hard look at it yet, but I think more options are good. I don’t know if they’ll be able to gain enough market share to be relevant, but we will see. Is there a golden nugget to set correctly a CSS background video? No, I mean, not really, obviously it can’t be 8,000 megabytes and you need to

switch it off for mobile like we talked about already and replace it with an image on mobile and make sure it’s well optimized. That’s it. You got to really, really, really get the file size down and it’s very, very, very difficult. And then it also has to be a really good use of video. It can’t be a terrible quality video. It can’t be a distracting or annoying video. You got to find to overlay it so that you can make the text readable. It creates a lot of challenges. I tend to tell clients we’re

not going to do it unless they have a really really really good concept for it. I tell clients we’re not going to do it. If you have border radius you will have white black background where your border is so you oh yeah yeah yeah yeah you well yes so the way that I’ve approached that didn’t I do that on one of my sites didn’t I do it on like digital gravy or something I thought I did the I did rounded rounded section corners somewhere

What site was that on?

Can’t remember now so I

Thought I taught it though. I thought I taught the concept because there’s a way to do it with Classes you and you do it with a The name is escaping my brain now a mask you can do it with masking, you can do it with pseudo elements, there’s a couple different techniques that you can go for, and then you need to use tokens so that you can, because sometimes you need a color above and a different color below, which means the

corner piece has to be different in each, a different color in each corner. So we use tokens to achieve that fairly efficiently? I guess I need to do a video on it. That’s probably the best thing to do. I will make a note of that. I will do a video on that.

So video incoming on rounded section corners. Okay. This will be the last question right here. I have an issue with a Z-index for a site I’m working on. I saw a video but can’t remember what’s another alternative to Z-indexing oh gosh I

Don’t I don’t know that that’s an actual question. Let’s see. I don’t know what the issue you’re having with z-index is I Saw a video of a camera. What’s another alternative for z-indexing? So and Anthony to explain what you’re trying to do and then I can tell you how to do it, but I don’t know what that means or what situation you find yourself in. Will ACSS3 fix the broken separator in BricksBuilder? I also don’t know what that means. I don’t know of a broken separator in BricksBuilder. Let’s see if he clarified any of this down here.

I do wanna tackle the Z-index thing

if I can get a bead on like what the situation actually is. Oh, somebody else replied, isolation isolate. Maybe you have a Z-index, negative Z-index and the item is disappearing.

Is that the scenario?

In that case, isolation isolate would help. Bricks does it with drop shadow and pseudo elements, I believe, but I’m not sure if it’s the most efficient maintainable way. Oh, okay. So bricksbuilder.io.

We can investigate. Oh yeah, they have one right here.

Let’s see.

See how they did it. Let’s get out of mobile mode. Okay, here’s their section. Let’s go down and see if it’s more. Okay. It’s probably this section right here.

It is there’s there before pseudo element. And that is that one right there. So you see that little corner piece. Now let’s bring this out and see. Oh, they’re using a box shadow. Kind of.

There, just make it go away. I don’t know why you would, you don’t need to use a box shadow there. And they’re using a class is rounded to apply that pseudo element.

Okay. Okay.


Yeah, I think there’s maybe a little bit easier, more efficient way to do that. They’re only doing it on one corner too, by the way, if you notice, they’re not doing it over here. Because there’s another situation where sometimes it needs to be like on top and on bottom.

They’re only using it bottom left. That’s like, it appears that’s the only time they’re using it. There it is again.

Yeah, that’s the only time they’re using it.

There it is again. Yeah, that’s the only time they’re using it. There it is again, which I don’t actually like. I would like to see it on both bottoms. Sometimes you’ll see it opposites to bottom left, top right, you’ll see it. So there’s a bunch of different approaches. And actually, when I implement it, I kind of want to account for all of those various ways that I can have more flexibility on how it’s being applied and done. Like right here, this is why I don’t like it. I don’t like that effect. It just, especially with nothing going on on this side, it just looks weird.

I will do a video because this, that’s a really good topic for a video actually. So thank you for that. All right guys, I got to get out of here. I got, I got more work to do. We got ACSS3 stuff to do. Busy, busy, busy, busy, busy. Thank you for joining in. I will be back, really, the next time you’ll see me is probably the next ACSS 101 video

that I’m hoping to record today and maybe release tomorrow if I can get it done. So look out for that, acss101automaticcss.com slash 101-course. acss101automaticcss.com slash 101-course. Peace, love you guys.