WDD LIVE 026 – Web Design Critiques, Commentary, Jiu Jitsu, and Q&A

0:00:00 Hey, hey, hey, good morning everybody. Good morning. It is time for another WDD live. Hey, hey, hey.

Oh wait, hold on. I got to turn that off, don’t I? 0:00:17 Okay. 0:00:18

We don’t want, we don’t want two of me today. That’s too much. It’s definitely too much. We got Ian in the house, David Das in the house, Team Keely, Bev in accounting is in the house today. I love this.

I love that our characters are coming to life. I need a Fred in the next stream for sure. We got Manny here from Miami, Patrick, Derek is here, Ruben is here. This is really really really good stuff. I see a lot of a lot of the same faces.

I’ve got I’ve got a few announcements before we get started. I got to pull up my notes here. Okay, all right. I do I want to start off by saying this. I didn’t even know if this stream was gonna happen today.

Where’s my camera pointing? Are we good here? That’s a little flimsy or something. I got to tighten that up. Okay, I didn’t know if this stream was going to happen.

So on Sunday morning, my wife had to leave town real quick like her grandmother was in the hospital and so she had to go visit out in Texas and so I stayed with the kids and all that and then she was supposed to come back at like 9pm. Last night, her flight was supposed to land, I was going to go to the airport, pick her up, bring her back, you know, get in bed. 11pm. It’s all good. Well, her she’s, you know, texting me, hey, we’re about to take off.

And then the next thing I know, 30 minutes later, she’s a text, we’re back at the gate. Well, what happened? And so apparently, the plane had a maintenance issue, which you never want to hear. I don’t know if any of you enjoy flying or I don’t particularly enjoy flying. That’s the last thing I want to hear is that the plane has a maintenance issue.

They went back to the gate, but good thing it didn’t take off with the maintenance issue, obviously. So they go back to the gate, they’re going to find us another plane. All right, sounds good. I guess I won’t be going to the airport. I’m going to put the kids to bed and so on and so forth.

And then she texts me, okay, I think we’re on the next flight. And then I get another text, now the next flight left without us. So they think we’re going to switch gates and then we’ll get a plane. And so they end up switching gates about another hour later or an hour and a half later. Finally, they find a plane to use and then they end up flying back.

But she didn’t get into like, they landed at 2am, the airport’s like an hour away from us she didn’t go home to like 3 a. m. so I’m on like four hours of sleep now and we’ll just see how today goes that’s that’s that’s basically that we’ll see how today goes but I decided you know what we’re still here I am awake even though my brain’s not functioning at a hundred percent I am awake and we can get this done I didn’t want to miss a WDD live. So thank you everybody for tuning in. The airplane was built with Elementor.

Very possible. Very possible. Okay. Who’s Fred? You don’t know Fred?

Man oh man. Somebody’s got to school this guy on who Fred is. Fred is on holidays this week. All right. So we’ve got two.

Here are my announcements. That was announcement number one. We do have two websites to critique today. So we’ll be doing a deep dive on those. I am going to be, I just signed two agreements for speaking engagements.

So one will be the WP Web Agency Summit in September. I forgot who this is sponsored by. I gotta look that up. As we get closer, I’ll talk about it again. But the WP Web Agency Summit is happening in September.

I’m on a panel discussion about AI. That’ll be interesting. And then I will be speaking at the recurring revenue retreat at Disney World November 15th to 18th. I don’t know if anybody is going to the recurring revenue retreat. This will be my first time there, but I’ve heard it’s a fantastic event with fantastic people and so I’ll be speaking there.

And then the next thing that I want to say is after our critiques today, we will do Q&A, we will do Q&A, but I was listening to the Joe Rogan experience, Joe Rogan podcast, a podcast I frequently listen to. I like it. It’s entertaining. And a situation occurred with Matt Serra was on as a guest. Matt Serra is a big Jiu-Jitsu guy.

They’re talking about a few different things. And then there was a few months back, I don’t know, I’m terrible with time. A few months back there was an incident in New York City on a train and it involved a guy doing a what’s called a rear naked choke technique. And this guy ends up dying on the subway. You know, a very not nice guy, by the way.

And so it’s kind of in the news about, oh, because he’s being tried for murder and all this other stuff or manslaughter. I don’t know what it is. But now if you watch the video, I mean, the guy clearly did not die from the choke. We’re not gonna get into all that though, but they’re talking about it on the Joe Rogan experience. Then they start talking about this incident with Michael Bisbing, who was an MMA fighter, who was with Steve-O from Jackass.

And obviously, you know, Steve-O does a bunch of stunts and all this other stuff. And so he wanted Michael Bisbing to choke him out. And it presented a very interesting situation because, you know, a lot of people like to criticize the fact that I talk about or use this, and to me this is just like, what are we even talking about here? They criticize me for using the term best practices. And because they’re like, as if, as if there are best practices.

0:06:27 It’s like, what? 0:06:27 What? 0:06:28

What are we talking about here? And so this presents a situation where I think very clearly, first of all, it’s a good example of, you know, I come from a world where, and a world outside of web design, a world of Brazilian Jiu-Jitsu, and before that I was a martial arts instructor for a very long time. I come from a world of focusing on best practices and technique, okay, from like the age of 10. And so this is just a world that I live in where like, and we’re going to talk about why it’s very important and why people care so much, and how that directly translates over into stuff that we talk about here on WDD Live and in web design in general and professionalism and all this other stuff. And I’ve said time and time again, this talk about best practices, like it happens in every industry.

It really should be happening in every professional industry. But for some reason, people get all up in their feelings saying like, oh, who’s the person that’s gonna decide what a best practice is and all this other stuff? I’ve got a 100% clear answer for this and it comes straight out of Jiu-Jitsu. I’ve tried to use the photography example before, but the Jiu-Jitsu example will be yet another. It’ll just be a good, fun example to discuss and then we can just see.

We can see why it’s very important to talk about these things. Okay, critique. Let’s do critique number one. Let’s get a deep dive critique going. I’m going to pull up the first website on my second monitor over here, and then I’ve got to make sure that when I screen share this, we are sharing the correct monitor.

It looks like we are. Okay, so we are ready to rock and roll. Jason is in the house. Hello, Jason. Jaroslav is here.

Patrick is here. So we got a bunch of people coming in which is good. I like to do those announcements because you know it takes a minute for the YouTube algorithm to go find some people and bring them in. But we’ve got a good showing today. So we’re going to go ahead and get started.

This is Vypr Mechanical. Everybody knows that we do a no scroll test which means I can’t I can’t scroll around my job here is to figure out what does this company offer who is their target market what is going on here without being able to scroll around and read a lot and so we see right off the bat it says Willamette Valley’s top HVAC company okay so I know they’re an HVAC company right off the bat a true Ritz-Carlton experience. Interesting. We’re going to talk about the copy in just a second. I can already tell we’re going to talk about the copy in just a second.

Bringing you extraordinary customer service in a world full of noise. Catch the signal with Viper Mechanical and join a true premium service for all of your in-home air quality and comfort needs. Got a call of schedule online. Then we can see three little, I guess, talking points down here. Emergency service, premium experience, top rated company.

This is a site that’s going to give us a lot to talk about in terms of dev, it looks like, in terms of copy, for sure, in terms of design, UI principles. It’s going to give us a lot to talk about. If you’re new here, we just kind of tell it like it is on these and Derek’s websites and more does say smash that like button, which that would be phenomenal. That definitely shows support for the stream when you arrive. We don’t sugar coat, okay, I don’t sprinkle a bunch of sugar on everything.

Everything it’s just people submit these because they want honest critique and they want You know they give us these sites as a great example of some things to do Like we look we do look at stuff that was done really well but then we also obviously get a lot of examples of what not to do and you learn a lot by Realizing oh, I shouldn’t do that. And so some people, again, they do get up in their feelings about, oh, yeah, it’s just so, so mean, or so this or so it’s just honest critique. And it’s not coated with a bunch of sugar. But they know that when they submit, I mean, it tells them on the form that they submit to prepare themselves for emotional damage. So they know exactly what they’re getting into.

I mean, and you can watch the stream, right? So, and it’s all in good fun. It’s, it’s, we have, we have fun here. 0:11:16 Okay.

0:11:17 What do you guys see right off the bat? How about we, we just, and you guys get to participate, which is also fun. Obviously we see like an issue up here. Uh, but what do you guys see right off the bat?

This is what is your general impression? Uh, off the bat, what do you want to focus on first? Do you want to focus on copy first? Do you want to focus on design first? What do you want to focus?

We can hit the low hanging fruit maybe and then work our way up into the more detailed areas. Diana says, I’ve been creating websites since the 90s. Best practices are there for a reason. We learned the hard way that not following them causes issues. That doesn’t mean that you can’t be creative.

100%, 100%. Cropping that image would be a good start. Okay. Bad spacing, says Derek. Bevan Accounting says the logo needs to be bigger.

I love the commitment to the character. The commitment to the character is exactly what I was hoping for when I first saw Bevan Accounting was here. And this is just fantastic. Okay. Spacing is a major problem.

There’s no breathing room, not enough white space. Lot of people talking about the spacing that’s going on here. And yeah, so let’s start with that low hanging fruit. Let’s start with the spacing issues so we can see, and I, Oh man, I’m, I’m, I’m off my game. I don’t know if we have, where’s my annotation.

Ooh, I do have it pulled up. Okay. I think I can do it on this. Can I do it on this screen, even though it’s on this screen over here? Oh, it’s only going to work on that one screen Okay, so you guys see right down the pipe here There is no spacing in this two column layout, which is not good You want this you definitely want some gutter there, right?

And then no spacing between this container and if we can inspect this for a second we can start to see exactly where the containers are and you see one right on top of the other with no gap between them. Now this looks like it’s they’re using automatic CSS so this is not a situation where they weren’t given the tools like if we just put a container gap on here well that’s it problem solves and then in this little layout here we’ve got a little side-by-side action let’s see there’s our main main container right here. They’re styling at the ID level. Okay, so that’s definitely something that we would want to try to fix. I mean, you’re using automatic CSS, you have utility classes at your disposal here.

Let’s see if our grid gap class is in action. So that gives you a little bit of a gap. If you wanted more of a gap, you can also go to your normal gap classes. You know, you could do an Excel something like that now. We’ve added some basic spacing here What we’re also seeing the reason I think it feels very very cramped is because we have Quite a large headline and when you when you go large on your headline You probably also don’t want to go with a lot of copy in the headline So it’s the largeness of the headlines already taking up a good amount of space.

Now you’re just trying to stuff as many words as possible into here. And it’s creating this really just like unbalanced situation with like, look how much height is being created by all of this text here with the large heading. And then there’s a little bit of text down here, which I would also argue is probably a little bit too big. And man, we got a lot of styling at the end, just a lot of, you know, I just sometimes I inspect the site. First of all, this is not a paragraph.

Okay. This needs to be a paragraph, not a div. I just see a lot of things happening where I just feel like maybe the person’s just clicking around, you know, like I don’t know why certain things have happened in certain builds. And this is a good example right here. So I right-click on this.

At the ID level I see a text align of left. Now I’m going to turn this off. Text align left. And we see that nothing happens. And so I don’t know why.

. . Text align left, by the way, for those of you who don’t know, is the default of text. It’s the default text alignment. So I don’t know why we had to set this text align left.

It’s just already the default. We’re just giving instructions that really we don’t need to give. We also are giving font weight instructions here and a Oh, this is even more confusing. So textM is the default font size. And so we’re setting it to textM, but when I take away textM, oh here we go textSection Okay, and you also don’t have class chaining turned off in bricks because this is this is what a class chain looks like I would turn off class chaining in bricks but then what is this class text section that you’ve just put a 18 raw 18 pixel value when you have variables with clamps at your disposal.

Why are we using raw? 18 pixel values for the font size and then coming back to override that with a variable that also seems to give you much larger Text than your base text. There’s a lot of confusion happening here a lot of confusion in the DOM By the way, this is web design for dummies. So, you know, we do go deep on these critiques We do look at the actual this is the DOM for those of you who are new We do look at the DOM we care about these types of things. It says my video is covering some styles.

That’s right. Sorry, I’m out of practice. We have to put this on the left-hand side. So there’s the paragraph I’m talking about right here, which was a div. So that needs to be a paragraph.

Then you can see over here the styles that I’m referring to. We’ve got this ID text-aligned left. We’ve got this font size set to a variable, which seems to create larger text when it’s activated, larger text than the base even though it’s the base text variable. A font weight declaration, a font family declaration, which why is this being declared? There’s this text section class which is declaring a completely different font here.

There’s a conflict in the font families where, and this is again when I say like I’m not sure what happened here it’s like I would almost like to interview the person because This is like going out of your way to create problems if you set your font family in bricks global styles You don’t need to set it at the ID for sure. You don’t need to set it on classes for sure But all of this was done and just some of it is irrelevant It just seems random and this is where I would I would love to see the process that went in because, and I’m thinking about almost doing a series. I’m trying to find people who are willing, like maybe more beginners, maybe more entry level people to like allow us to get, is that Bev calling me? No, it’s my mom. We allow them to get on a recording and watch them build.

And then we can discuss like, okay, hold on, pause for a second. Why are you doing this? Why are you making this decision? And I think that would be very, very, very helpful for people. That is what we do, by the way, when teaching jujitsu and such.

You know, this goes back to just my, nobody’s instructing like the way people instruct in other industries in web design. You know, it’s a lot of content creators showing this, showing that, but really, I think a lot of value comes from watching people get taught as well. So I’m thinking about introducing as much of that. It’s just a matter of finding brave souls to come on and just say, hey, I’m not an expert, I’m an intermediate or I’m a beginner, and I’m willing to let you record me as I try to build a site and teach me as I go. The other problem with that kind of format though is, you know, an hour recording, we might be halfway through a hero section and still nowhere, right?

But there could be a ton of great stuff for beginners and intermediate people in that hour, even though we don’t really accomplish anything. So, I don’t know, I think it might be a good format. It’s definitely something I think I’m gonna test. Rob says, why not invite the user onto the stream to answer questions when you review their site? I could I could it would it just adds a lot of It adds a lot of technicality and scheduling and a bunch of other stuff.

I don’t know. Okay Let’s continue on with this Right off the bat here. So I think if we had less text here, let’s inspect this by the way, just see what’s going on Whoo. Well, hold on. What?

What is what is hold on? Pause. What? What is happened? What is this?

This is not something I’ve seen before. What is the custom? Is that custom HTML? See, this is a we got we’re going out of our way. I think what they were trying to do is change the font color with an inline style but they ended up creating a custom HTML tag with this color attribute that doesn’t exist in HTML as far as I know.

I think what they were looking for here which this is also a link. Why? That goes nowhere, by the way, it goes to pound, it goes to the town sign. There’s a lot of this is a like a mystery fun box. Okay.

I think what they were trying to do here. Just imagine for a second that that’s a paragraph. And then this would be a style equals I think what you’re looking for is an inline style where then we define a color, right? But at the same time, you don’t, none of this needs to happen. Well, it put it back to the way it was.

Okay, let’s just delete all of that. That’s, this is what we should have here. Okay, we don’t need all of that. I see what, yeah, if I look at it now, they’re trying to get this orange color. And, you know, there’s a lot of ways they were trying to achieve that font attribute style I just apparently that’s valid well I don’t that doesn’t even look like a the proper hex code so you could do this but I’ve never seen this technique done I’ve never this is not plus you’re inlining it it’s just this is not the way to do it not the way to do it is this all in the H1?

Yeah, that is all the H1. Okay then we’re going to open this. I still don’t know why there’s a link. And then open the A. Okay, then this is not going to be a P.

This is going to be a span. Okay, and you could do this in Bricks. I’m going to have to open Bricks to demonstrate this because just to show how this is. You don’t have to do all that craziness that we just saw. Let’s do that just in case.

I’m gonna open, I always like to have an install open. So let’s just hop into this install real quick. And is that the right install? Bricks ACS is new. I guess that’ll do.

Okay. So let’s go add new. All right. Page, publish, publish. Don’t use drafts.

I learned that on the last live stream. Causes preview problems. Okay, here we go. Section. So we’ve got a heading.

We’re going to drop this in. We’re going to go h1. It’s not just a critique, right? I like to show, Hey, you know, how can we fix this? Uh, here we go.

Chris House’s font font tag was a thing in HTML four. It’s quite obsolete. Yeah. Yeah. My brain clearly erased that from Like, oh, we don’t need that information anymore.

Okay, let’s just put in, well, that’s gonna be a very large heading. Let’s say we wanna change the color of the word placeholder, right? Now, depending on the builder you use, there’s different ways to do this. In Brics, this is how you do it. Inside of this area over here, and I can zoom in, inside of this area over here, you can put HTML tags.

And so we can put a span, that’s gonna wrap that in a span and then if you give your span a class like Anything else you could say like highlight right here. So I’ve just given this a span of Highlight, let’s go to the front and take a look at this thing All right And we’re gonna inspect this and we’re gonna see that there is in fact a span class with Highlight on it and now you’re free to style highlight now what people are like, well, hold on, Bricks, it’s not like I just added a class up here. So how do I actually style this class of highlight? Well, you could go into code box, you could style it there. You could go into the Bricks child theme, you could style it there, or you could come up here and you could still create the class of highlight.

And then we’re gonna style what a highlight looks like. So we’re gonna go to typography, we’re going to go to color, you can change it to whatever. And notice the entire heading changes to that color. Why is that happening? Because I put the class on this entire heading.

But remember, the classes are also on this span right here. So now that I’ve styled the class, if I just remove it from the entire element, it’s still on the span. And this is what you get as your effect and then I can just use that anywhere I want or if I want to highlight an entire heading I can highlight the entire heading. You can still style it in bricks right you don’t just because I put a manual class in here somewhere doesn’t mean I have to go somewhere else to create the styling for it. I can still create the class in bricks like I normally do and style the class in bricks like I normally do and then just make sure it’s applied to the appropriate place.

And problem solved and we don’t need HTML for font tags with inline styles and everything else that was going on. Okay so that’s a good way to show how to fix that issue. All right H1, we definitely need to get rid of the link that doesn’t need to be linked there and then I would say shorten up the text, okay? This text needs to be smaller, and then we lost all of our spacing because I refreshed the page. And then let’s talk about heading hierarchy here.

These headings are way too large for the cards that they’re in. And so we want to try to match our typography sizes to like the allotted space, you know? You’re also in a situation here where emergency service just happens to fit on one line where everything else is forced to break to two lines. And so I’ve shown this technique before where you want to, well, one, it would solve the problem if we just use an appropriate font size. Let’s just start there.

If you use an appropriate font size here, I don’t even think you’re going to run into this problem at all, right? Yeah, that’s all I would say. That would be the primary way to fix that. Just use an appropriate font size. We don’t even need to go on how to fix it.

Just use an appropriate font size for the container. That would probably be the easiest thing to do. And then I would say that all of your. . .

Hold on. It just feels like. . . Are we bouncing?

Okay, the rest is a little consistent. We see a problem here that I talk about a lot. I was looking at the base text size across the website. And it appears that you just set your base to be large, but I don’t know if you’re using classes for all of these like you were before. 0:27:02

I don’t, again, I don’t know. 0:27:04 Ah, okay. Oh no. All right.

Oh gosh. The font family is being set on every class differently. I feel like you installed a font for your global styles and then was like, I don’t really want that font. Instead of switching it, you just started overriding it everywhere with classes and sometimes with IDs. And then the same thing with the weight.

Like the weight was set somewhere globally and then you were like, I don’t really want that weight. And then you just started, instead of changing it in the global setting, you started overriding it at the ID level, and it’s just creating tons and tons and tons of problems with scalability and maintainability, and it’s clearly inefficient from like a CSS and styling standpoint. Okay, all right, there’s a lot going on here. Let’s also talk about this break right here. Because I was noticing when I was inspecting that the break goes away.

And this is one of the challenges with developing sites on a smaller screen. So if you were developing on a laptop screen, you would think that you did your job up here, right? You’re like, oh, that’s good, I did that properly. But the minute somebody views it on a large screen, they get this as the experience. And oh, I just noticed something else.

Look look at look at this Look at what we’ve got going on up here Okay Well, this would be a good time to talk about hover styles. Let’s go ahead and talk about hover styles So one thing you want to avoid I do see this a lot and we’re gonna look at what’s going on here with the hover Let’s activate hover activate hover and we can see the hover classes right here. You’re changing the font size on hover from XS to S, so it’s going from small to like larger. That’s a no-no, okay? There’s a lot of no-no’s with hover styles.

This is a no-no with hover styles. You’re also changing the weight on hover, which is also a no-no. And the reason these are no-no’s is you want to avoid anything that changes the explicit size of an element, especially when it’s next to other elements. There are times where you could potentially scale an element but there’s a certain way to scale it. Notice that when I change this font size on hover, it’s pushing other stuff around.

It’s manipulating other elements that are not this element. If you actually use a transform scale, for example, it would transform this element without affecting the other elements, potentially. It looks very janky, very janky when you are doing this where it’s affecting other elements. And then, of course, we see, look at this icon. The icon gets bigger and it gets out of position even more than it already is.

It’s already out of position. It’s not centered in the circle. But it gets even more out of position when I hover it. And so there’s just a lot of, this is the difference between like, you can clearly spot when somebody’s more of an amateur. 0:30:15

Right? 0:30:16 These kinds of things are obvious, right? That a more experienced person would never do these kinds of things. Let’s come down.

Let’s talk about the copy. Because clearly there’s a bunch of UX and it gets a little bit better as you go down the page. This is a frame by the way. So frames has rescued you here and given you what amounts to a very clean layout. Of course you can see that there’s some adjustments that need to be made so that these things are not, these are designed for very small snippet style testimonials, not for larger, longer testimonials, but you can still adjust it.

It just needs some adjustments to where we’re not covering up people’s faces. Um, let’s talk about this. We’ve talked before about, I mean, just absolute, like I need a chiropractor after reading this, the, the, my head going left to right, like the distance of a football field to try to read this text This is where we want to control our line lengths, right? So this had a max width on it of something like 60 characters now immediately We see like this becomes much much more readable. We got some typos in here that need to be fixed up Yeah, just a lot of okay see it in here, I’m not gonna be able to stop that scroll to inspect it, but anytime you’re, these probably didn’t have a background color on them and you added a background color, but when you add background color, you also need to add padding.

Now we see things touching the edges of the container. So these are very, this is very basic UI type principles of we shouldn’t have logos and text touching edges of containers, and we shouldn’t be changing the size of elements on hover and on and on and on and on. So basic, basic stuff here that we can really work on. Once again, we find ourselves in a situation where the text is too big, the line height is too much. Look at the line height of 1.

9, again, at the ID level, just a random value chosen, not in relation to anything else. Just hey, I guess 1. 9 will go go good here We need to see probably something more like 1. 5 here We’ve got random margin top values and pure pixels instead of using gaps this font size text M just needs to be changed 24 as like a base font size is is that computes to 24 pixels. That’s big, that’s big for a base font size.

And it’s just resulting in a lot of cramped feeling in all of these containers, especially with the amount of text that you’re putting into them. And then down here we see again, like a lack of spacing, a box shadow straight out of Bev’s accounting department. This is, it’s just one of those, it’s too dark. It’s just, yeah, it’s, you wanna be subtle with your box shadows, right? You wanna be subtle with your box shadows.

Don’t overdo it. Too much really, really harms things. And then I don’t know, again, what has happened here. This goes back to the, how did this occur? How did this occur?

When you add these toggles in, you’re given one icon. You’re given one, just one icon. And now we have two icons going in competing directions. You can just sit here and ask yourself from a user standpoint, like, does this, do I know what they want me to do here? I don’t, I mean, I know that it’s a toggle, but you know, does the average user know that this is a toggle?

Based on these arrows, I mean, what? You’re giving the instruction of up, down, hey, up, down, up, down. And so I don’t know. I don’t know what you want me to do here. And then when I click on it, one of the arrows disappears.

I feel like this is just, I don’t know. I don’t know what happened here. And I don’t know how we arrived in this situation because you’re not even, you’re given the proper situation out of the box. You add a toggle, it gives you an arrow. It was done out of the box.

We had to go, we had to do extra work to arrive at this place. And we did not clearly arrive at a better place. So why did that work get done would be my question. Okay, let’s talk about the copy now. We’ve talked about it.

Oh, no, sorry, I just saw this. We got to talk about this now. So general UX of a drop-down menu, you know, service areas are good to have. It’s good to have service area pages. We could click, oh well, if they actually existed it’d be even better.

The SEO for service area pages does tend to work better when there’s content at the URL. Okay, let’s just, let’s get off that. So the drop-down here, if you’re gonna, if your drop-down is gonna go, there’s a point at which you go, there’s too many things for the drop down. There’s too many items for the drop down. You could go mega here, you could go mega menu here.

Or you could just make this a link to a service areas page. Perfectly fine, we don’t need to use a drop down here. You don’t need to use a mega menu here. You could just have a link to the service areas. Then people click on the service areas, they arrive here, which is perfectly fine.

Would be even better if this was like a grid. This is an area where, okay, let’s talk about this. Man, this is the gift that keeps on giving for WDDLive. So many things that we can talk about. If I’m going to take somebody to a service areas page, that’s a dedicated page for service areas.

From a UX standpoint, we’re talking UX design right now, the user experience design. A carousel is not a fantastic user experience. I’ll tell you that right now. It’s not the ideal user experience. You use a carousel when you have lots of items that need to be shown in a small amount of space.

That is where a carousel can come in handy. It’s like, hey, you know, if I was looking at a whole, like you’ll see this on an e-commerce page. Imagine that these were categories on an e-commerce page. But below this is all, is all these products. So primarily I’m looking at the products, but I want the user to know, hey, we do have a bunch of categories you can scroll through and navigate by if you want to.

But that carousel is not the main focal point of the page. The main focal point of the page is the grid of products and so on and so forth, right? So we’re in a situation where we took like, if this was on your homepage, so I’m scrolling down the homepage and then I see the carousel of service areas. That’s where you use the carousel. The minute you take somebody to a dedicated service areas page, why are we using a little carousel here as the main focal point of this page, knowing that it’s not a great user experience?

This is where we should do a grid. You should do a grid of cards for the service areas. That way I can just scroll up and down quickly, I don’t have to try to navigate through this thing or interact with it. You’re gonna introduce accessibility issues if this isn’t all done 100% above board. Just go with the simple thing here.

Go with the grid of cards, done, move on with your life, right? Use the carousel when you’re putting that information as like secondary information on another page and you just want people to see that it’s there and maybe you know scroll through it horizontally. You don’t want to take up a lot of space with it but you want to know you want people to know that it’s there. That’s a good use case for a carousel. Okay, so we’ve learned don’t put a gazillion things in your drop-down menus.

Don’t use carousels as the main focal point of page content. Now, finally, we got to get to copy. Okay, Willamette Valley’s top HVAC company, a true Ritz-Carlton experience. So we have a literal headline followed by what we would classify as a marketing headline, right? And then I’m going to jump in the chat because I want to see what chat is saying in just a second.

So the question is, like, literal headline we know is good. The marketing headline, first of all, this is not all the H1, okay? So from an SEO standpoint, you would want to break these up. Maybe this, Willamette Valley’s top HVAC company, that’s your H1 for SEO purposes and all of that. This then becomes basically a paragraph.

This a true Ritz-Carlton experience becomes a paragraph that you can style as a heading but it’s not carrying the weight of a heading because it doesn’t mean what a heading actually means semantically. Okay, so the next question is does the marketing headline do anything for the page or for the user? And so if we remove this, let’s just pretend that this part doesn’t exist. All right. And so somebody arrives and they just read a true Ritz-Carlton experience.

Now imagine that’s the only thing that you that you read. Well what does this do for the visitor? Absolutely nothing. It means absolutely nothing. Also you know Ritz Carlton is a hotel chain, I believe.

And so, you know, that doesn’t really have anything to do with, I know they’re famous for their customer service and such, but there’s like a disconnect. It’s like, come on, man. This is like, it’s an HVAC company. Okay, like I’m pretty sure my H, if I listen, if I read this and I go out and look at my HVAC unit, if it doesn’t have a fucking mint on it, you know, like a little, I used to have a little chocolate, a piece of chocolate on it, right? Probably be melted at that point.

But like, that’s, there’s a disconnect here. It’s like, you know, Ritz Carlton is like, they put a mint on your pillow. And it’s all they take care of you in that regard. And like, dog, you’re HVAC, you’re HVAC. Like, you get out of my bedroom, dog.

I don’t know why you, why you Ritz Carlton in my bedroom. I just fixed my HVAC unit. That’s kind of the disconnect that I get in my mind. It’s not copy that connects with an HVAC customer in my estimation. And then we just read this to see if we can get any other further glimpse of value.

And we see bringing you extraordinary customer service in a world full of noise. I’m not so sure the world full of noise part maps back to customer service. I don’t know what those two things have to do with each other. And then it says catch the signal with Viper Mechanical and join. I see what you’re doing signal versus noise kind of situation here but is the average person going to catch this?

Like it doesn’t mean anything to them? I just feel like this is um this copy is from another planet. It’s not from the world of HVAC customers, okay? I just don’t think it’s gonna connect with your average HVAC customer. And there’s just a lot of focus on true premium customer service, but it’s like you haven’t given me an example of what true, like what would a Ritz-Carlton experience in the world of HVAC even look like?

What would it mean? See how my mind went to like, are they leaving mints on my HVAC unit? I don’t, because I can’t visualize what this would mean in a world of HVAC. And then I see this photo over here. And I’m just a little bit more confused because it’s like, I don’t see HVAC.

Okay, oh, sorry. Is this why this was chosen? They got a little wall unit up here. And I guess they’re just they’re old people and they’re happy. It’s just again, does it connect with the average HVAC?

I don’t want to look like that as a cost. If I’m that fucking excited about HVAC at any point in my life. That’s a problem. Honestly, that’s a problem. So probably I’m one step away from being in a home somewhere and and it’s just not giving the greatest vibe Okay, so we see the copy above the fold and then emergency service, okay Premium experience once again, we’re hitting the same same thing over and over and over again.

We got mandatory training I think you know doesn’t everybody have mandatory training It’s it you start to ask yourself a question of like, I mean, does any HVAC company just grabbing people off the street and be like, hey, we got a job for you. Go that way, walk that way. There’s an HVAC unit you’ll run into at some point. Go ahead and see what you can do with it. Like fairly certain they’re sending trained individuals out to do your HVAC.

There isn’t like a epidemic of untrained HVAC technicians or anything like that. So it’s like, what are we actually saying of value in the copy here? Top rated company, twice awarded BBB Best, over 50 plus charities, all right. Specialized technicians, but you said that right here, pretty much. It is good to note that you’re BBB Best, twice awarded.

Do you have, if you have badges for that, show the badges. It’s an opportunity to show the badges. Almost all of this copy right here, I would scrap and we would be rewriting. This is the kind of copy that maybe comes from AI, maybe comes from someone that doesn’t know how to write copy, maybe comes from the client, maybe comes from Bevan Accounting. It’s not good copy.

We come down here and we see our technical expertise over 30 years in combined experience. Let’s just rant on this for a minute. This idea of combined experience. Does anybody else have a problem with, we just do a whole bit on combined experience. I’ll go to like a lawyer’s website.

It’ll be like 178 years of combined experience. I’m like, dog, you you’re 30 and that dude’s like, you know, 42. Alright, you can’t add those numbers together. You’ve been in, you’ve been practicing law for 10 years. You have 10 years of experience, okay?

You haven’t seen what could be seen in 137 years. This is, you don’t all get to add up your years, alright? And say, I don’t, I’ve never understood this concept of combined experience. Average experience would probably be more like it. You know, if you got one guy that’s been there 40 years and 10 guys that have been there two years, I want the average, dog.

I don’t want, you don’t get to say, oh, we got 60 years of experience or whatever that adds up to. I’ve just never understood the combined experience thing. All right, we don’t need to read all the stats. The best whole home, we’ve gotten halfway down. What I’m trying to get out of here is we’ve gotten halfway down the page we’re really not making an offer really we’re not really we haven’t talked about a problem yet or an opportunity or we’re just like we’re the best we’re the best we’re the best cheer for us Ritz-Carlton yeah just we haven’t gotten anywhere yet we haven’t said anything we got a lot of words on a page we haven’t actually said anything yet.

We’re talking about discounts already. So I don’t, why are we just, why are we talking about discounts right here? I don’t know. You’re, we’re just selling discounts, then we got some testimonials. I don’t even know if these are real people.

I don’t, I don’t, I look at these photos and I’m like these aren’t real people. Like you know the average senior citizen I’m like hey you got a headshot I can borrow. They’re not giving me this. Okay this is not this guy’s Facebook photo. This just screams to me like oh we found some stock photos of people and we throw them in here for the testimonials.

So we have a little bit of inauthenticity going on here. I know this girl. This girl I’ve seen plenty of times right here. I know this is not your support technician. Okay.

I know her. She’s not your support technician. So we’ve got to use stock photos in appropriate places. Not not in places where you absolutely need real photos here, here and down here. Okay.

We absolutely need real photos. Maybe these are placeholders for now. I don’t know. I don’t know. But if if you’re going live with this, you need real photos in those areas.

All right, I think we’ve done enough here on this one. We’ve done enough. We don’t even have to, I don’t even have to look at accessibility and all the other stuff. I mean, we’ve, we’ve done enough. We’ve, we’ve seen enough here.

That is the review of Viper Mechanical. I’m going to run to the chat real quick and I’m going to see what we’ve got going on. I will join you guys again in the chat. All right. Let’s scroll up just a little bit and see what people are talking about here.

Manny says smash that like button. Over 100 people watching and only 52 likes. That does not add up, does it Kevin Burris? It does not add up. Good technique, didn’t think of styling inside Brics like that.

Might be useful for someone who doesn’t know all the CSS properties. Okay, can you add a background image to the heading without custom CSS only by using Brics? No, the answer is no. You can add a background image behind the heading, but if you’re talking about clipping the text to the image so that your text appears to have a true, like the inside the text has a background image, you can’t do that without custom CSS and bricks. Overflow problem with the hero image, it looks like.

Ruben says it looks like a modified template. Yep, probably. I mean the letters to have the background image clipped. Yeah, yeah, you can’t do that natively in Brics without custom CSS. All right, I used to override text with Elementor all the time.

Oh, how I don’t miss those days, yes. What happened with Kevin Hart? I haven’t played it today. It doesn’t have batteries. It does, it does.

Oh no, no, no, no. 0:48:23 It worked, it worked. 0:48:24 I just had to, I had to drop in the other, we got a new sound, a new sound to use.

A little hold on sound. Yeah, one line call out testimonials still there on the page, yep. What’s the hashtag and the URL for? So, it’s simply a placeholder. It’s like, I don’t know where this link is gonna go yet.

I don’t have a URL for it, so I’m gonna put in a hashtag, which makes it an active link on the page. But if you click it, it just takes you to the top of the page. It doesn’t actually take you to a location. Okay, I agree that drop shadow looks so good. Dude, I love this.

I love it. Okay, so this is an example where you end where you use three different independent templates and wireframe providers and mix them all together. I think so. I think this is a, that’s definitely a problem, right? And this is why I say like, you know, frames, template packs, whatever you want to use, these things don’t save you from needing to like still know what to do.

They don’t make you, they don’t take you from amateur to, to advanced or anything else. You still have to put in the work. You still have to put in the time. You still have to study your craft. You still have to do a lot of stuff.

We’re going to maybe pause and do the jiu-jitsu thing, and then we’re going to go into the second review. I just want to do a couple more comments here. Last time I went at the Ritz, bedrooms were not like the picture. There’s a disconnect with the Blue Trophy premium experience and whether that pertains to the customer’s or company’s experience. Yep, true that.

One piece of copy that gets lost is they have $60,000 money back guarantee that should be a highlight piece of copy. Fantastic point. I didn’t even see that. I didn’t even, it didn’t even register with my brain. I was, I was distracted by other things.

If they have a $60,000 money back guarantee, of course, you know, the other question is, cause I know a lot of these HVAC companies throw around big number guarantees like that. So it’s only really a talking point if it’s unique and special. If everybody has a $60,000 guarantee or some companies have a $100,000 guarantee and you’re advertising a 60,000, so now this becomes relative of like, well, what are the other, what does the competition have as their guarantee? We only need to really highlight it if we’re doing something special with our guarantee. And that’s a question I would ask the client right but definitely if you have a great guarantee that needs to be highlighted 100% okay to be fair people in the heatwave could be happy about that HVAC 100% yep I guess so picture does not connect with the premium experience they’re trying to sell you’re correct okay let’s go down all right I think we’re good.

Stock images really take away from the legitimacy of the reviews. A hundred percent. Okay. All right. Let’s do this Jiu-Jitsu talk.

Let’s because we’re gonna do this talk about best practices and going back if you weren’t here in the very beginning I opened with talking about how a lot of people content creators not not people typically other content creators criticize me for talking about the word or using the word or trying to define the word best practices. And there’s a big kind of like, um, there’s a sector of content creators who are kind of have this, like just do whatever you want, you know, whatever makes you feel good. However you like to do it, whatever you want your workflow to be is all good. I mean, we can all just get along and nobody really knows anything more than anybody else. And it’s just this kind of like vibe.

And it’s like, what the, you know, are we, are we doing, this is not how you like elevate an industry. It’s not how you actually help people or educate or, or anything else that of like a value or importance. Uh, it’s how you get an absolute mess and then our industry declines and you know there’s a lot of bad things come out of this so my brain My brain is my brain focuses intently on Technique because it always it’s been trained to do that from a very very young age So I’ve been in martial arts for like you know my entire life more or less then I was a instructor Then I was a studio owner and you know when you’re the owner of a studio like you take pride in How your students their skill level right and what they know and then you also realize When people are pushed right and even kids, you know 80% 70 80% of the people of my students were kids right and You know kids if they’re allowed to be lazy, they’ll be lazy. If they are allowed to be sloppy, they’ll be sloppy. Some kids, they naturally don’t want to be like that, but they’re few and far between.

It’s a small percentage. Most kids are just happy-go-lucky, playtime, yada, yada, yada, we’re just having fun. But when they get pushed to excel at something, they actually really, really appreciate it. If you don’t push them with anger and with living vicariously through them the way a lot of parents do in a toxic fashion. You don’t want to do that, but if you’re encouraging, but you also hold them to a high standard, they become top performers and they love the fact that they’re a top performer.

I think all human beings value being a top performer at something. You would rather, if you could choose, be a top performer at something then just not be good at it. Especially if it’s something that you want to be a top performer at. When I was getting into photography 15-20 years ago or whatever it was, I was so upset with myself because like I envision like I want I can’t draw, I can’t paint, I can take really good photos, I think. And I love the editing process of photos.

I just love it. I absolutely love it. And so I got a camera and I started taking photos. And I was so upset with myself because they all sucked. Every photo absolutely sucked because I didn’t know what I was doing.

I had no idea what I was doing. And so then I would go into photography forums and I would submit my photos. And I was submitting them almost like we do on WDD Live here where I’m saying, please tell me what’s wrong with these photos, how can I fix this? Give me best practices, what am I doing wrong? Because I want to be good at this.

I want to be good at this. And so then you value feedback. You also come to value content creators. Like if I’m watching photography YouTube videos if you know creator is saying I just you know grab your camera go have fun with it you know it doesn’t really matter what your exposure is doesn’t really matter what your aperture is doesn’t really matter what your shutter speed it you know whatever oh yeah you want to do just hey take your iPhone out there but you don’t need a real camera just go poke around with your iPhone that kind of creator is not going to get me from point A to point B on the timeline that I would like to get there. Maybe, and I don’t know if ever, I don’t know if ever.

When I go into a jujitsu academy, I wanna be good at jujitsu. I wanna be like a, you know, a perform to the best of my abilities. And so when I go into a gym, I don’t want to look for an instructor who’s like, ah, just do the techniques, you know, however you want. I can’t even do the Brazilian thing, but you, you understand what I’m saying, right? If they were just like, do whatever you want, you know, a, you know, whatever techniques work for you.

And in fact, I’ve spent so much time in jujitsu that I actually, you identify when you get to, if you don’t know, I’m a Brown belt in jujitsu. Okay. Been doing it a very, very, very long time. And you come to a point where you start to look, you can identify patterns. And there’s actually a well-known pattern in Jiu-Jitsu, which is very funny because it maps back directly to like web design.

And what you realize, all the brown belts and purple belts are sitting around and they’re watching these white belts talk to each other, right? These beginners, these newbies, right, talk to each other. And they’re sharing like, hey, what’s worked for you, what’s worked for, which is fine, which is absolutely fantastic, that’s what they should be doing. Now you should also get the opinion of brown belts and purple belts and black belts, that would be helpful. But they’re talking to each other, which, okay, yeah, you guys are hanging out, you connect because you’re both beginners.

And they’re saying, oh, but what you’ll hear is, yeah, I got this technique, it’s working on everybody. It’s working on everybody. And then he’s showing his friend his other white belt friend the technique and oh, yeah, this works all day long I’m catching everybody with this know what he means is what he means it and this is a well-known Phenomenon in jujitsu what he means is he’s catching every other white belt with it But against anybody who knows what the fuck is going on. He ain’t catching anybody with it, right? Why?

Because the technique is not a technique. It’s a technique that works on people who don’t know what they’re doing. But the minute you put them with somebody who knows what they’re doing, the technique doesn’t mean anything. It’s useless. It does nothing, okay?

In fact, it maybe gets you into a bad situation. But they’re sharing it as if it’s this great thing, right? So it also brings you back to, you know, pay attention to who you pay attention to. I’ve said that many, many, many times, pay attention to who you pay attention to. And there’s a concept in Jiu Jitsu, well, at least at our gym, at our gym, the concept is don’t break your toys.

Don’t break your toys. Now, what does that mean? What does don’t break your toys mean? Don’t break your toys means don’t hurt your training partners. Do not, you are 100% responsible for not injuring people because jiu-jitsu is a very injurious sport.

If you have somebody who doesn’t know what they’re doing or you have somebody who’s too aggressive or can’t control themselves, we’re talking like kneecaps snapped, elbows snapped, people going to sleep way too long, but going to sleep at all is a bad thing. There’s a lot, you have to be responsible for the care of your partner. And so there is a tremendous focus on proper technique, on proper attitude, on proper everything. There’s a tremendous focus. And this is the world that I’ve lived in where you go into a jujitsu, everybody is going to point out bad technique every time it occurs, because it’s so important to focus on technique, not just from a safety standpoint but from an excellence standpoint.

We want you to be safe but we also want you to be excellent and the only way to do that is to focus intently on how the technique is being done and the intricacies of technique and if you don’t know anything about Jiu-Jitsu, you can’t imagine the most basic, basic technique that you might learn on day one may have 20 different intricacies within it, right? And so you learn these over time. Now I’m going to pull up a video here. I’m going to pull up a video and we’re going to see in the real world still a disconnect and how this translates to a, you know, a respected individual in Jiu Jitsu calling out another respected individual in jiu-jitsu for a very good reason by the way okay and so I’m going to pull up we’re going to pull up this video first we’re going to watch this together and this is just fun because we can not talk about web design for a little bit we can talk about another topic and it’s it’s interesting but it’s also valuable from a topic standpoint. Okay.

All right. So I’m going to screen share. All right. So we’ve got this. Now I am going to play this.

This is Michael Bisbing right here. This is a well-known UFC champion champion. Now I watched this video months and months ago when it first came out and I had a thought in my head. Now I didn’t rush out to YouTube or anywhere else, but he’s doing the choke wrong, okay? But this is very important, all right?

I’m just, let’s just play this. Let me play this and I might just turn it down. Let me see how loud it is. Okay, it’s not too loud. All right, so right here, I’m just gonna pause it right here.

This face that’s being made right here, you see Steve-O’s face? This is a, it’s a face people make when they flex their neck a certain way. When you’re getting choked in Jiu Jitsu, you can expand your neck and it does help you for a minute. It just helps you for a little bit. And people will make this face, right?

Now he’s not trying to defend this choke or anything like that, but I’m looking at the angle of the choke. And the detail that you see, this is a technique that you may learn in week number one in Jiu Jitsu, okay? This elbow right here, the number one thing that they teach you, the number one thing that they teach you is that this elbow needs to be directly under the chin. Why? Because right now this forearm is crushing his windpipe.

It’s like straight up in the front of the neck. And that’s a no-no. Let me go back to the statement about don’t break your toys. This is how you break your toys in a training environment. This is not a fight.

This is not any, this is, let me demonstrate a technique for you we are basically breaking our toys right now which means this is going to bruise the windpipe you could damage the windpipe you could do a lot of bad things here this is not how the choke works either by the way so this is an example of where the proper technique not only keeps the person safe but actually applies the choke faster and one thing you’ll notice if you watch this choke versus other chokes is it takes too long. It takes too long for Steve-O to go to sleep. He should be asleep in seconds, four, six seconds, something like that. When you put the elbow under the chin, the bicep is then on this carotid artery over here, and the forearm is on this carotid artery over here, and it’s like a vice, okay? And it cuts both off, same time, no oxygen to the brain, they go to sleep.

You let go, they wake back up immediately, it’s a hundred percent safe. This is not a safe choke. Now, the question is, should somebody come and point out, because if Michael Bisping’s going to be, I got to know, I got to believe that Michael Bisping knows how to do a rear naked choke the right way, okay? And somebody might say, oh my God, you call out a, who are you to call out a UFC champ? Well, I mean, any brown belt in jujitsu or purple belt in jujitsu or blue belt in jujitsu that’s had good instruction knows that that’s not the appropriate technique for this choke.

Now, the question is who calls him out? Well, it turns out that he did get called out. Months later, months later, Matt Serra, who is another, probably another MMA fighter yes but probably one of the most highly respected jiu-jitsu instructors in the United States said hey I can’t we can’t not talk about this video and by the way this happened after this guy dies on the subway from somebody choking him who was attacking people but I want to listen to how you know Matt Sarah approaches this and it’s so it’s a leader in the industry, so on and so forth, calling out bad technique. And there’s a good reason for this, but let’s just listen to the conversation here. 1:04:10

Fuck, man. Guys, when you want to do the re-enactment, and I love Michael Biskup, I get along with him very well. They put a couple, they put Steve-O and someone else in the story. 1:04:18 I just want to make sure you guys can hear this.

Is the audio coming through okay? Audio, audio, audio. Yeah. Give me a, give me a thumbs up on audio. I know there’s a little delay.

I just gotta make sure that we’re not listening to nothing. 1:04:33 I’m waiting. 1:04:35 Audio check, audio check.

1:04:37 And don’t worry, we’re gonna get into a bunch of Q&A and all of this stuff, but this is important. Audio check. It’s a little quiet but coming through. Let me see if.

. . Okay, there. Let me see if. .

. Hold on. I can probably boost it. 1:04:59 Hey, guys.

Now look. You don’t. . . Can I say something right now?

1:05:05 That’s as loud as I can make it. 1:05:06 And do you mind if I do this to Dean Thomas? Oh, wait a minute.

I mind. no way about my but just when you get all around the renegade elbows and i want to help all uh. . . i think the point of the chain that we know a lot of crime or at least i’m not going to do it but now if i just slightly go to compress what the fuck man like i don’t know what i feel like if you don’t know what they were on the website i’m looking at this thing like guys my crush’s fucking throat like look at the amount of pressure he’s putting all the weight behind him like look what he’s doing holding it but his forum was on his windpipe yes I love Mikey I love Mike I do but guys come on man fuck that’s also like he like leaned into I know he got

1:05:58 all of his weight all right that’s that’s all we have to watch you guys you You guys get the point, okay? So it’s important, and we come, I come anyway from a world again where all of the focus is on technique constantly. 1:06:12 Why?

1:06:13 Number one, safety, okay? And people are like, well look, we’re not choking out business owners here, but you do have their business in your hands. I mean, technically like if we go, if we go back to, you know, not breaking your toys. Okay.

One of the concepts of not breaking your toys is if you break your toy, not only did you do a bad thing, but I mean, they’re out of training for six to 12 months and that’s like best case scenario. If you didn’t like really enjoy career ending injury type thing, right? So you could put a business out of commission for six to 12 months. Like you build a website for them and it’s just absolutely terrible, and they launch and they don’t have a lot of funding, they’re hoping that this thing helps them grow, they’re spending money on marketing, and they end up getting no results. They spin their wheels for six months, 12 months because of the work that you did.

That is kind of the similar concept of breaking your toys like the business is hiring you because they think your technique is good the business is hiring you because they think you’re a brown belt or a black belt not a white belt in most cases ok so to me this like directly maps because there are real-world implications to the work that we do that’s number one. But number two, why are they anal about technique in Jiu-Jitsu? Because like the white belt conversation I just talked about a minute ago, bad technique works on white belts. Bad technique doesn’t work on anybody else. And it’s not, there is no pride in like, oh, I did bad technique and it worked in this instance.

Nobody cares about that in Jiu-Jitsu. Because they know if you get attacked on the street or you get whatever, you go to a competition and actually compete, the people are going to wipe the floor with you. You’ve got to know, no, this technique is wrong. This technique does not work. This technique should not be done and you should do this instead.

And so there’s a culture of excellence. There’s a culture of best practices. There’s a culture of being a top performer. And that’s what elevate, that’s why Jiu-Jitsu is still a respected martial art. That’s why Muay Thai is a respected martial art.

Whereas Taekwondo, karate, all of these type martial arts have gone straight into the gutter. Selling belts, you can do whatever you want, it doesn’t really matter, we don’t care about quality, it’s only, you know, are people progressing, are they sticking around, are they da-da-da-da-da. I’ve watched it. I’ve watched this mindset kill an entire industry. Nobody respects, oh I’m a black belt in Taekwondo, which I am, I’m a fourth degree black belt in Taekwondo.

It means fucking nothing. It was Olympic Taekwondo by the way, full contact Taekwondo, the same Taekwondo they do in the actual Olympics, still doesn’t matter. Nobody cares that you’re a fourth degree black belt in Taekwondo because everybody knows that anybody can be a black belt in Taekwondo in three years. You just pay the bills and you show up to the classes and there you go. There’s really no check for quality or anything else.

And Jiu-Jitsu is funny because Jiu-Jitsu, Taekwondo is like, oh, you get to spar other Taekwondo people. You’re never in a situation where you’re sparring against like a boxer or a Muay Thai person or anything else, right, that’s actually been proven in like MMA, and I’m not saying zero Taekwondo techniques work, but what I am saying is you create this false idea in your mind that Taekwondo is actually like everything that you’re learning and doing sparring is like super valuable. And Jiu-Jitsu is the opposite. Jiu-Jitsu is, there will be wrestlers that come in off the street, there will be Muay Thai people and boxers, and you get to see that the minute, the minute they’re on the ground with you, it’s a wrap, it’s a wrap, it’s not even, it’s just done, it’s done. And it proves itself constantly, it just proves itself over and over and over again, the effectiveness.

But that’s if you know what you’re doing. That’s if you do the techniques properly. So there’s this major focus on, no, no, no, all belts in jujitsu are earned, it takes a very long time. You know, we’re talking like, if you consistently train three to four times a week, 10 years, you know, to get a black belt. Eight to 10 years to get a black belt in most gyms, unless you’re like a prodigy, or unless you’re competing constantly.

It’s just a completely different industry and the respect that that industry has versus the others in martial arts is very clear and I want the same thing for what we do in web design. I want to lift our industry up and I want people to feel good about themselves because it feels good to be excellent at something. It doesn’t feel good to just not be that great at something and so people are saying hey I want to get better I want to learn. Well we got to talk about best practices. We got to talk about technique.

We got to talk about all the things that make you into somebody who knows what they’re doing and talking about. We have to talk about those things. And I don’t know why other content creators want to come along and be like, oh no, there’s no best practices, there’s no this, there’s no that. It’s just everybody do what they want to do. I just don’t understand it.

It doesn’t make sense to my brain. So, but I wanted to put that out there as an example and just give us something else to talk about other than web design. Ok let’s bring up website number two. Website number two where are you? Alright I’m going to pull it up on screen number two.

Does that make sense in the chat? I mean am I like have I lost my mind? Should we not be talking about proper technique and best practices? Am I totally confused and lost at how to help people on the internet? I don’t know.

Let me know in the chat. All right, here is our website number two. Oh, we got to go to the top. AIpromptmaster. pro.

I believe this is submitted from a long time WDD watcher viewer I think it’s um I had the spreadsheet pulled up a minute ago it might come to my brain it might come to my I don’t have it pulled up anymore it might come to my brain all right your ultimate resource for AI prompts and tutorials is our no scroll test welcome to AI prompt master your one-stop destination for the most effective AI prompts and comprehensive tutorials okay and then I can see featured prompt categories some cards down here tutorials Okay, and then I can see featured prompt categories some cards down here generative AI copywriting marketing productivity and SEO So I’m getting a glimpse of exactly what’s going on here. It’s going to be a library of AI prompts I guess you know for getting the best out of AI as a result of what you’re what you’re asking AI for UI UX right off the bat, you can tell a massive difference. Look at the hierarchy of typography. Look at the rhythm of the spacing. It’s way more clean, there’s more breathing room, it flows, it allows your eye to go from very important and then the next most important thing.

And then there’s an action I can take and then I can scroll down and I see you know in a nice organized fashion what my options are available to me. We look up in the header and we see you know a very clean navigation no drop downs no mega menus just like hey you want prompts you want engineers you want blog like let me take you there and there’s a little search box up there that I can use. I’m wondering how that interacts. Okay, yeah, fantastic. All right, so, so far, I like the dark theme.

I like the background image. I don’t know, so it’s a person using a computer. Here’s the person, if you can’t see it. Here’s the person, here’s the computer screen over here. But it’s used mainly, I guess, just for vibe and like, it’s not like, hey, study the photo.

It really means something. It’s just more, I guess, for like a general vibe of the page. So all good there. I think maybe that this underline accent, we’re going to nitpick the UI a little bit, is a little thick, is a little thick. That’s a pseudo element that they’re using as an after, and it’s got a height of 0.

3 M. Let’s go to 0. 2 M. Let’s go to 0. 15 M.

I think, because it’s not thick text. You know, if you had thicker text here, maybe you get away with a thicker underline, but it’s not really thick text. It’s kind of light text. So having a really thick underline, why does it say 1. 56 M?

Okay, something like that, I think would be good. And you you put a little extra width on it so that it extends but it feels like it’s extending off to the left a little more than the right maybe it’s just the way I’m looking at it I don’t know probably not it looks like it’s everything here it looks like it’s even so that’s fine but yeah maybe maybe not so thick on the little accent there. All right we come down here and we see some nice cards for the engineers. We’ll click on all these in just a second. Let’s, from a logic flow standpoint of the narrative, it’s let’s tell everybody what’s going on here.

Let’s allow them to browse by category. If they don’t want to browse by category, maybe they want to know about our engineers. This is like a really well done homepage, just like, you know, narrative flow, okay? Where we’re introducing people to the right content at the right time. Where are we do you want to browse by category?

Oh, you don’t want to do that. Okay. Do you want to know about our engineers? No, you don’t want to know about them and then we get into just get them into the prompts Just start showing them some prompts. Maybe maybe this will you know, pique their interest here and then we come down to articles All right, you don’t want any of that stuff.

Maybe you want to read some articles. Okay, this is very like You know, it’s a very logical flow. I don’t really like this. This is the first area that I don’t really like. I don’t like the very long submit button.

I feel it’s a perfect situation to put a little submit button right next to the input. So, these could kind of be side by side. I’m curious if this is WS form. It is. Yeah.

This is very easy to do in WS form. US form and you know violation of rule number one of submit button text is that your submit button should never say submit okay a little just a little inside well inside a technique here never put the word submit on a submit button you put the just describe the action the user wants to to take they’d never want to submit to anything but they do want other things like free prompts and stuff like that. So tell them what they’re gonna get here. And then I also never am a fan of this. So let’s talk about lazy technique.

We’ll just call it lazy technique. It’s like I don’t really have a good offer here. I haven’t really come up with anything decent. So I’m just gonna default to join our newsletter. Anytime I see join our newsletter, it’s basically like that, okay, that’s like that’s the lazy call to action, the obvious lazy call to action.

And what you’re going to get with a lazy call to action is lazy growth and lazy results. Okay, you’re not going to get good results here. So come up with something creative right here. I would redo the little layout here of the actual form element itself. And that will, you know, fix that up.

Everything else is looking very, very clean. Let’s take a peek at the DOM and see, you know, the first question I have, because I’m thinking about scalability and maintainability, I’m finding a repeating element on the site. And I’m saying, do they have global control over this element? And so we can inspect it and we can go easily see. And so we have a unordered list, which is semantically correct.

We have list items within the unordered list, which is again, semantically correct. It looks like, all right, we’re using Bricks. I’m just kind of examining some things here. We’ve got a little div with an h3 okay we’re using a look oh look at this we’re using a little clickable parent technique to take the link that is on the heading and extend it to the entire card this is fantastic this is somebody who studies this is somebody who pays attention this is somebody who implements what they learn this is this is achieving higher excellence okay this is what it looks like all right so all of this all of this looks really good and I saw the custom classes on there the first thing that we were looking for and actually it looks like this is frames is it from frames but they weren’t using frames everywhere because I looked like this unless they’re just changing maybe they’re just changing the class names but that’s not a frames class name but maybe they’re just editing the class names I don’t know that’s a that’s a very strong possibility okay but all of this is is done really really well but again frames you know does this for you but you can easily break frames you can easily mess it up you can if you don’t know what you’re doing right it still doesn’t like I said earlier it doesn’t make up for not knowing what you’re doing so you know the fact that clickable parent is still here and that this isn’t all have ID level styling and all of that it’s like this person knows what they’re doing with frames so that’s always good to see. Okay so they’ve got global control over everything.

What do we want to look at next? Let’s look at some actual I’m just curious about their content. So let’s look here let me let me go to prompts. Okay we got a little WP grid builder faceting over here so we can filter. Sort filter sort by name a to Z.

Okay, we get that going on. I’m wondering if this is fixed. I’m going to do the test. You can you can actually break bricks query loops with WP Grid Builder facets by faceting by filtering and then trying to load more. It’s gonna be hard because I don’t know I’m not familiar with the content on the site to see if this is breaking or not but it looks to be still working so that’s good.

All right, what is some examples here? How to force, these are prompts, five secrets, I’m a little confused by the headlines, like I’m on prompts right but then I see five secrets to productivity with chat GPT, that feels like an article to me not a prompt. So it’s like am I Am I actually looking at prompts here? Or is this filtered wrong? Filtered by category.

Narrow by tags, okay? All right, I don’t know, I don’t know. Maybe take a look at that. Maybe that’s a little bit confusing. I feel like I’m looking at articles.

Like if I go to blog, all right, 1:21:30 well now I see different things. 1:21:31 I don’t see the five.

What makes that a prompt and not an article? Why don’t we open it up and find out? So let’s click on this. The AI advantage show details. Okay, this looks like a, um, this is a link to a video.

Summary. Okay, there’s a prompt that goes along with it. A couple different prompts. 1:21:46 Oh, okay.

1:21:47 Various prompts. I guess there’s grouped under this, uh, video right here. It’s a little confusing because I expect to maybe see like individual prompts for things, but now I’m getting it. There’s collections of prompts for things.

Okay, what do you guys think of the photos here? To me, it’s like there’s a lot going on for my brain to like, whoa, process. You know, it’s like, like this dude right here, you know, what is, what is, black, black, black mirror, black mirror. This like went straight up black mirror on me right here. I don’t know, there’s just like a lot for the brain to process.

And it almost pulls the attention away from the headings that I’m trying to read. Especially because there’s text inside the photos, you know? So I just don’t know if this is the best way to present the prompts area. Like I get if this was a videos area, I get it. If this was a blog area, probably.

I guess these are all AI generated too, which is kind of neat. I don’t know, I’m just not sold on, 1:22:56 when I go to browse the prompts, 1:22:58

I feel like these thumbnails are distracting me from reading the actual headlines of the prompts, especially because we’re sandwiching the headline, let’s take a look at this, sandwiching the headline between vibrancy and vibrancy down here. Very vibrant label colors, very vibrant thumbnail, and then a white heading. And it’s really making it hard for my brain to focus on the heading. Okay, let’s take a look at what is in the engineer’s area. Okay, the AI advantage.

1:23:31 I guess that’s a person, that’s like their screen name 1:23:33 or something, okay. Is this a place where anybody can sign up to be an engineer?

Meet our elite team of AI prompt engineers, each contributing their unique experience to deliver top-notch AI prompts. So I read the little lead paragraph here and the question I still have in my mind is, are these people like hand-picked or can anybody be an engineer? I feel like if anybody can be an engineer, then it’s fine the way that it is. But if these people are like hand-picked for a reason, you might want to make that explicitly stated. Because it’s still a question in my mind.

Words at scale, let’s see this guy. Okay, words at scale, prompt engineer. This is the power of custom post types and query loops, by the way, the fact that you can associate prompts with an author, right? So when somebody is looking at the author page, they then come down and they only see prompts by that author, you know, it’s just, it’s well thought out, right, this is what you should be seeing. And this kind of thing, if prompts aren’t in a CPT, like this, this stuff becomes very, very, very difficult to manage.

So this is a proper use case of CPTs and dynamic querying of data. 1:24:57 So overall, this is very, very well done. 1:25:00 I wanna see what the chat is saying here about some things.

Other creators on YouTube are projecting their insecurities. This is, go back to our jujitsu instruction, conversation that we had just a minute ago. It’s extremely chumped, don’t wanting to understand the best practices are for a reason, absolutely. The white text on red button, all right, so now we’re onto the chat about the site. The white text on red button might be bad accessibility.

Oh, that’s a good question. I mean, we can pull this up. Let’s go ahead and pull up PolyPayne. And a lot of people asked about Polypain the last time I pulled it up. I opened it.

Where is it? Okay, here it is. So I’m going to hit enter on this, pull this over. So Polypain is a paid tool. Okay, you can’t just go download it.

And it is actually flagging that color on the button, which visually like for me, it’s like, I don’t know, that seems like the contrast ratio is fine, but it is actually, it’s very close though. Okay, so I believe 4. 0 is a little over 4. 0, 4. 5, somewhere in there is like passing.

You’re at 3. 92, and it gives you what would be the valid color here. And using ACSS, it’s just a matter of going in and tweaking that shade to where it passes, and then you’re pretty much good to go. 1:26:23 These are failing as well,

1:26:24 these blue tags with the light text are failing. But everything else tends to look like it actually all of your labels are failing. Oh I just clicked off polypane. Where did it go?

Oh it went in the backgrounds. Okay. All right let’s do a little refresh. Sometimes as you scroll the labels get all all messed up. Your social links at the bottom are failing color contrast.

So, but these are, look, they’re very close. You know, these, and these are very easy adjustments to make, especially when using ACSS. Because you just go into the dashboard, you do a little tweak to the shade that you’re using, all good. Okay. And then PolyPaint also allows you to do the mobile testing like all at the same time.

You can see all these different devices you can configure this dashboard however I primarily do it for color contrast checks and other accessibility checks there’s a whole list of accessibility stuff in here that you can use to quickly check a site very very very helpful but people were in the chat I saw last time they were like oh you can do this with XYZ you can do this with that you can do the mobile viewing with other tools polypane is unmatched at accessibility checks. Which by the way, you need to check accessibility stuff manually using a browser like this. You can’t run it through an accessibility scanner, right? Those are good for surface level stuff, it’s really not good for the detailed accessibility stuff. You really gotta look, and by the way, there’s another revenue opportunity for everybody.

If you learn about accessibility and you know how to do accessibility audits properly and then do accessibility work for companies, that’s a whole revenue stream in itself and it pays really really really good money. Because the lawsuits that are floating around you know fifty thousand dollars, hundred thousand dollars, big companies getting hit with million dollar lawsuits and things like that, they will pay accessibility people to come in and fix their stuff up. I’ll tell you that right now. So for those looking for new angles on revenue and deliverables, accessibility is a big thing. All right, let’s see what everybody else is saying in the chat.

I would like a 3×3 grid. Yeah, yeah, I think, so, you know, people ask me this all the time. At some point, it’s maybe a little bit subjective. I just tend to not do, I don’t like the wide, I don’t like the content that goes all, even though it’s in a grid and it’s in cards It’s not like a paragraph going all the way across the screen. But just on big monitors, it’s it’s It’d be nice if it was tighter, you know, and so if we pull this in me shrink this up over here So here’s the UL.

They’ve got a grid template columns repeat 5 1 F are okay That must be an old frame that was doing it like that because you can just do var grid five. It’s probably before we had the grid variables in there. But if we take this UL and we do like a max width of var width VP max, that’s gonna give us our website’s actual content width, which he’s even using a wide content width, but even that looks better. Doesn’t that look better? I mean, like, I guess you could say that it’s subjective.

Look at this one that stretches all the way across. This just looks tidier. And it’s like, I don’t have to look left or right as far, and it puts more things in my central focus and vision. It just feels better to have that be content width, even though that is a wide content width. Let’s see, that’s got to be 1600 pixels or something.

Even more, it looks like I can’t, I got to put this down here to actually measure it properly. Then get rid of the, okay. 1920, so they’ve got their website content width set at 1920. But yeah, even containing it at that would be preferable over letting it go 100 percent of the section container, all the way to the gutter. I’ll see what you guys say about that as well.

Andrew says it’s not a site about prompts. I don’t know what that means. Too many colors. I feel like I’m looking at a pinball game room arcade. Yeah, I think that’s coming from like the site itself right here.

We’re fine. We’re fine right here. You know, it’s when we get down to the thumbnails. It’s the thumbnails that just introduce like chaos, right? 1:30:54

And these, these badges right here. 1:30:55 I don’t think those need to all be a different color. I get what they’re trying to do. They’re trying to color code the categories, but I just feel like it’s a little, it’s a little much maybe.

Okay. Is there a best practice for labels? I mean, the answer is yes, but then the question that that begs the question of like in what area are you talking about label color, label size, label shape, label this, label that. I mean, I got to know what area of labels we need to talk about best practices within. Do you do critiques on the mobile version?

The most users come over the mobile version of the website. Yeah, I mean, we do take a look at the mobile versions of websites, but what I do with these critiques is we look at the most egregious things first, and then if we get to other things, you know, like if the whole experience is off, then what does the mobile version really matter? The mobile version’s not gonna fix your copy, the mobile version’s not gonna fix your broken ass menu, the mobile version’s not gonna, at some point it becomes just irrelevant. We need to get there by saying, hey, is everything else in order? And you can see here, you know, there’s no, and when you, when I see that a site is built with automatic CSS, and especially if they’re using frames, so much of the, of the responsiveness is just baked in, like out of the box done for you, it’s going to be, it’s going to be a great experience.

Yeah, I mean, it’s exactly as you would expect, right? How would this author link to prompt video CPT relationships done in MetaBox? No, in this case, you actually, because it’s an author situation, WordPress by default is already linking authors to the post that they’ve written. So all you have to do is create a query based on that. So you actually don’t have to use bidirectional relationships and all of that.

That’s just the WordPress default architecture. But if you did use custom CPTs for something that was like a CPT post related to another CPT post, that’s not default WordPress functionality. An author is default WordPress architecture. So anytime an author authors something in WordPress, you can query that thing, even if it’s a CPT. So that’s just querying based on default WordPress architecture.

Okay, I know a company charging upwards of $15,000 just to do accessibility audits. Per audit. Exactly. Exactly. I’m telling you.

Huge revenue opportunity. Kevin went over ARIA labels in a video I recently checked, but I apologize. I can’t remember which one I would prefer. Three, okay, that was, we already saw that comment. Colors are too vibrant, that’s all.

Yeah, so I think things can be toned down a little bit. Maybe instead of thumbnails, maybe go a little bit different route. Maybe just stick with the AI generated artwork. I don’t know. Question.

Okay, let’s move into the Q&A phase. We’re 100% we’re going into Q&A right now. I am going to, at risk of forgetting to screen share again, I am going back to camera. But I’m putting a marker in my mind. We are not, Kevin, we are not screen sharing right now.

So if somebody asks something that requires screen sharing, hopefully I will remember. You can ask about anything. Business, ACSS frames, UX, UI, SEO, photography, jiu-jitsu, sales, pricing, whatever we need to talk about. Questions can start flowing in right now. Let me check our time while we’re waiting on these.

We’re at 12. 30. Seven, at least 20 minutes. If we’re getting really good questions, I’ll go a little bit longer. At least 20 minutes though.

Question, is there a main use case for labels? 1:34:57 I mean, yeah, yeah, yeah. 1:34:59 But again, your question didn’t get any more specific.

You can use labels for lots of different things. When can we expect frames for Figma? August. Why are automatic CSS icon in the dashboard still the old one? In the dashboard, in the dashboard.

Oh let’s let’s open WP admin. Oh this one right here. Yeah good question. Well the new automatic CSS branding doesn’t really have an icon. So I just need to think about that.

Notice the new logo is here in the dashboard, right? So we did the important thing first and just haven’t addressed this yet. Most people care about when is the next feature thing because I gotta tell you guys, this 2. 6 release that’s about to come out, I mean, just very, very helpful. It’s gonna be very, very helpful.

Really excited about that release. Really excited about the next frames release that brings us the tabs, the accessible tabs component. An accessible tabs component that collapses to an accessible accordion on mobile. Fantastic stuff. And I don’t know if you guys saw but I just released the first video showing the modal component from frames.

I’m doing a series of videos showing all of our components. We’re now going to start heavily marketing our library of accessible dynamic components. Very, very helpful. 1:36:38 Okay.

1:36:40 Question. Have you made any videos addressing accessibility overlays? If not, is that something you plan to make? I haven’t made any videos specifically on them because I don’t feel like they need to be, we need to make one.

The general thing that people need to know is that accessibility overlays do not make a website accessible. In many cases, they make the website accessibility worse. There’s a lot of screen reader users, various levels of accessibility within the user who says, I hate the overlays that people add to websites. So I’ve pretty much said best practice is to not use an accessibility overlay. Best practice is to do as much accessibility as you possibly can by hand.

Question, when will the form styling be compatible? That just jumped on me. When will the form styling be compatible with other plugin forms? Fluent Forms is about to come out. So 2.

6 is, I believe, I gotta double check, but I think 2. 6 has Fluent Forms support, which is fantastic. And then we’re refactoring everything to do with forms. Because the way that we’re doing it now, basically going in and seeing how a form system approaches things, creating necessary override, basically what we do with page builders, same approach that we do with page builders, is not gonna work nearly as well for forms. And so what we’re gonna do is refactor our forms so that if somebody handed us unstyled inputs, every input type imaginable, but unstyled, you turn on ACSS and ACSS styles them.

That’s the ideal. And then somebody comes along and says like formidable. Somebody asked me about formidable forms. Can you integrate with them? And so I asked a very simple question.

Does formidable forms allow you to turn off the default CSS? And they said, yes. And I said, fantastic. So when we refactor these forms to where they work with clean inputs, any form system that allows you to turn off default CSS will instantly work with automatic CSS. And that just opens the door right there to a tremendous amount of form systems that we can integrate with, as long as those form systems allow you to deactivate default CSS.

So that’s the status on forms. Question, do your other plugins, stack, licensing, baked into the website maintenance plan? How do you deal with this when they want to unsubscribe from the maintenance plan? Very, very good question, Patrick. Very common question, but we’ll answer it again and I’ll try to keep the answer as concise as possible.

Your management plan that you should sell to every single client includes licensing fees for the premium plugins that you use. That’s number one. You keep your management plan separate from any other contractual agreements or retainers or anything like that. So for example, let’s say you sell a PPC retainer. Don’t combine their retainer for PPC with the management plan into one billing scenario.

Keep these things compartmentalized and separate because if they want to cancel the PPC at some point, their management plan stays intact over here. You don’t have to do a lot of admin shuffling around and reworking contracts and reworking. Just keep everything separate, okay? Think a la carte. Now, let’s say they do end up at a point where they want to cancel their management plan.

No problem whatsoever. Let me shout out the admin bar for a minute. Kyle over at the admin bar. So website, you can go to websites, owner manual. I have an affiliate link for this, but I really don’t care.

Just go to websites, just Google it and it’ll come up. You can buy it now. It’s 47 bucks. And what you do is they say, Hey, I want to cancel the management plan. And so you fill out the, the WOM as it’s referred to, you fill out the WOM for them and then you send them the WOM and you say, happy to do this for you.

You still have, you know, what, two weeks, one week, whatever left on your management. But I wanted to get this over to you ahead of time. We’ll be canceling it at the beginning of next month and the one basically outlines everything that they need to do to care for the website to maintain the licenses and What it kind of does in effect, you know It is very helpful for the person to have but it has an effect on the person where they read the WOM and all of the things that you’ve been Managing for them and doing for them and they come to the conclusion that I probably shouldn’t cancel this. You know, like, you know, the $79 a month that I’m being charged, I’m getting more than $79 worth a month of, a month worth of value here. I think I’m just going to keep it.

And so you send them the WOM and you tell them you’re about to cancel their management plan and then many, many, many times you get an email back from them that says, never mind, never mind, let’s keep going with the management plan. So it’s fantastic in that regard, but let’s say that they did take the step of not we still want to cancel Thank you so much for the WOM. This is gonna be very helpful in us managing our own website 1:41:46 well

1:41:46 It very clearly in your contracts and in the WOM and all of that says You will no longer get updates to these premium plugins. They will go out of date There could be security issues that you need to go acquire your own Licenses for these tools and so that’s what they would have to do. They would have to go acquire their own licenses. By the way, you can put your affiliate links for the tools that you use inside of the WOM.

That way, when they go to the URL that you’ve given them for that tool, and they buy that license for that tool, you also get a commission on that. You can do whatever you want there, right? But they have to acquire their own licenses if they want ongoing updates and all of that. But that’s kind of how you handle it. And it makes sense, it makes sense.

I mean you know that part of the website you leased basically and so it’s time to turn in your lease and you don’t get to keep the car. I mean in this case you get to keep it but you don’t get to get the new things that come to it. Okay, question what part of accessibility do we have to focus on after using frames? What part should we study and improve on? That’s a good question.

I mean, we don’t have control over text sizes that you’re using. We don’t have control over the colors that you’re using, so color contrast, zooms related to your text sizing, all of those things you need to be paying attention to. If you create a, you do a bunch of customizations to your menu, you know, is that menu still accessible at the end of the day? When you add various things, are you putting the correct ARIA labels on them? When you swap out images, are you putting in the alt tags?

Get a whole laundry list of things that need to be taken care of for accessibility and make sure that you’re paying attention to all of those items because there are a lot of things. Frames gets you to a point, but the minute you start customizing, it’s out of our hands. It’s out of frames’ hands. I mean, it depends on what you’re doing to the website. And so you are responsible for maintaining or improving even the accessibility from that point forward.

Comments, with respect to the ACSS icon on the dashboard, why don’t you just use what is used as the favicon on the ACSS site? Because that’s just a placeholder as well. It was an icon that we were experimenting with originally, and we decided to go in a different direction and so we’re not using it, but yeah, you’ll still see it here or there, but we’re about to release the new website for Automatic CSS. Got a whole redesigned, rebuilt from the ground up and that’s coming in August and so you’ll see much more consistency of these little pieces being all tied together 1:44:25

when that comes out. 1:44:26 Question, parsing is a pass fail criteria for WGAC, meaning that throwing errors in the W3C HTML validator is a fail. How much time should we put into battling that? Now I’ve seen the W3C validator fail a lot of things that are not actually failures.

I’m not convinced that it’s really all that up to date. I’m not convinced that it, I just, I don’t use it as a tool anymore. It flags way too many things, way too many valid things get flagged on it. So yeah, I don’t tend to use it. That’s all I can say about it really.

Okay, is ACSS and frames going to adapt container queries and start to replace media queries, what are the plans for that? 100%, 100%. So when those things are usable in production, you are gonna see container queries come to frames, which means that like I showed in my demo, if you take a wide card and drop it into a grid, you won’t have to do any work. It’s just gonna restructure itself the way that it should to live inside of that grid, which also means by the way, that it’s going to be fine by default on different media devices. So container queries are tremendously powerful and we will be building frames around container queries.

And I just want to say, this is yet another reason why people choose to invest in a tool that is constantly updated, constantly being thought about, constantly trying to innovate, constantly keeping up with the next set of things. So you just make a comparison of like using a design set that styles everything at the ID level that’s over opinionated, that’s not accessible, doesn’t have the proper HTML tags, and then doesn’t use container queries. And like then you compare it to frames where it’s like all of the HTML is accounted for, everything is automatically responsive, now they’ve got container queries built in. we’re trying to create a situation where, and you’ve noticed, like for marketing, all I have to do for marketing is use the tools. That’s all I have to do.

I just have to use them. Then people see me using them and I show a little bit under the hood of what’s going on and then they just come to the conclusion, oh, I should be using that thing. We want to make the tool so good that it just is an obvious conclusion when you’re watching it being used that that’s the tool that should be used. That’s the goal. That’s what we strive for.

Okay, question. Did you ask Lewis when quickly we’ll add the intersection? As far as I understand it, they are working on it. They are concerned with backwards compatibility. I don’t think backwards compatibility is an issue whatsoever.

If it comes down to it, it was the same answer I gave for the oxygen query loop issue, the repeater issue that they had forever. Which by the way, they said they couldn’t fix and then they ended up fixing it. But it could have been fixed way before it was actually fixed by releasing a repeater 2. 0. So you release a repeater 2.

0 that’s built properly and anybody who wants to use the old repeater, hey, knock yourself out, use the old repeater. But anybody who wants to use the new repeater that does things properly, use the new repeater. And then backwards compatibility is no longer an issue. So they could release a new section element that does the container thing properly, and people could start using that immediately with no backwards compatibility issues whatsoever. It’s like, you know, automatic CSS did with owl spacing.

Well, you know, we deprecated owl spacing, but it’s there in a deprecated file. You can keep the deprecated file loaded if you’re using owl spacing. But if you don’t care about owl spacing, you can unload the deprecated styles and you can start using gap everywhere. I don’t see what the problem is. I don’t see why it’s such a difficult thing to approach.

So, but I expect that they’ll have it solved in any case in the very near future. They know it’s a problem. They’ve acknowledged that it’s a problem. And that’s all you can ask for other than like, please get the fix out like sometime soon. 1:48:35

Okay. Justin says sneak peeks. 1:48:38 What do you want to sneak peek of Justin? Any more development from the plaster side of things?

Yeah, yes. Oh my gosh. Oh, oh, just wait. Hey, for those of you who are using generate press, generate blocks, the Gutenberg environment for anything, ACSS is, we’re about, let me just tell you this. We’re bringing a class first workflow to Gutenberg, number one.

All of the contextual panels that you know and love inside of Bricks are gonna be available inside of Gutenberg. It’s just, it’s going to be Guten, we are, we’ve just decided, you know what, Gutenberg is a trash can, but we can make it way less of a trash can. Yeah, we can do a lot of things to make it way less of a trash can. And so that’s what we’re going to do for users because, you know, users want to use that environment. Some, some, some users want to use that environment.

And when you have to, it is really nice to have these features. Okay, that’s all I’ll say about that. But we’ve added functionality to the plaster integration. You know, Christoph is, there’s some really good things coming in that regard. So just hang tight for 2.

6, baby, hang tight. And then on and on and on. 2. 6 is nothing. 2.

6 is like a toy compared to like what we have planned for 3. 0. It’s like, oh, that was cute. That was cute. What you guys did, you know, from 1.

0 to 2. 6 was cute. 3. 0 is ACSS taking a next step. That once again, no other framework has taken.

Just like we took that step for 1. 0, when nobody else was doing it, we’re taking another giant step for 3. 0. All right, let’s keep going. So if Figma has the potential of replacing XD, well, hold on, let’s let’s pause there.

Figma already replaced XD. XD is night-night. I said this when when Adobe bought XD that was our bought Figma, that was the nail in the coffin for XD. I said it the day one that announcement came out, because some people were like, oh, I hope they don’t kill off Figma. Are they buying it to kill?

No, they were buying it to kill XD. And I said that on day one. And so XD is done, okay, done so. Figma has replaced XD. It is the industry standard now.

I’ll just say that was, I was saying that on day one when it wasn’t actually true, but I think it is actually true now. So yeah okay so let’s move past that part of the question. Do you have a recommendation for an alternative to Illustrator and Photoshop? Do we need the Adobe Suite subscription? It would be nice if I could get away from Creative Cloud.

I’ve been thinking about like what do I still use Creative Cloud for? Illustrator and Photoshop. Now the Now, the problem for me is, I know that there’s a replacement for Photoshop, and I’m almost sure that there’s a replacement for Illustrator, but I don’t just use Photoshop as a web designer. I’ve used Photoshop for 15 years in the context of photography. And so I know parts of Photoshop like the back of my hand.

I do photography related stuff in Photoshop. And the idea of switching tools is just like, I do not want to go learn all this stuff in another tool. And that’s just, so I just keep paying for Creative Cloud just for Photoshop for that reason. But if I was just a web designer using Photoshop, 100% I would probably be looking for alternatives and I would cancel my Creative Cloud subscription and I would move on. But then we don’t even know now like is Figma gonna come to the Creative Cloud family?

I don’t even know what they’re gonna do with that. So that’s another thing that’s kind of up in the air. Can you create a modal using a button instead of a trigger? Regarding my question about the modal jumping to the top of the page, I can’t remove entirely the href on buttons. It’s a good question.

I mean we can try to play with this live real quick before we go. I don’t know what’s, I’m just going to preface this by saying I have no idea what’s on this install, what’s been done to this install. It appears to have the latest version of frames and it appears to have everything turned on. So I just can’t predict what’s about to happen because I don’t I’ve got many of these local installs floating around I just chose one at random so let’s just say modal and let’s see what happens not making any promises but we’ll see okay so I’m gonna add a let’s just add a modal right off the bat we need our modal to be able to trigger it and then I’m gonna put a heading inside of here and I’m gonna put text inside of here and this is gonna say this is our modal. All right this is I’m not going to make a beautiful modal or modal or and actually you know what we could do we could probably just let’s just go up here to templates remote templates refresh make sure we’re seeing the latest version of our library here and let’s just go drop in a modal let’s just go do like this one right here just see what happens okay so there’s modal alpha let’s put it in the modal.

That would actually help. 1:54:05 Okay. 1:54:05 And then what we’re seeing, I’m gonna refresh the builder because sometimes Bricks just, okay, so what are we seeing here with this problem?

Settings, overlay, modal positioning, place and relation to page, body container with L. Is there a height issue on, it’s feeling like a height issue. Or did that just, what did bricks do here? Bricks just like, oh, now we’re back, okay. All right, let’s try a different modal and see.

That’s, I’m gonna log this if this is actually an issue here. Menu modal alpha. This, does anybody, maybe you guys can answer me in the chat. I cannot get bricks. When I have something selected, like a container, and I try to insert something from the library.

This is all Bricks functionality, but it really irks me constantly. I’m selecting the container because I would like to insert the thing from the library into the container that I have selected. Just like I selected the modal because I wanted this thing to go in the modal, but it constantly wants to put it below the item that I’ve selected. Is there a setting in Bricks that I’ve missed somewhere that says, hey, insert the thing inside the container. See that works.

So when I drag that in, so now I’m gonna go to body container, just clear out all of the padding. And then it looks like there’s a width set on this FR menu modal. Yep, right there. And so now I just basically in a second made a menu modal, okay? So that’s good.

Now, we’re going to create a trigger. So we’re going to come up here, we’re going to say this is going to be, we’re going to test this class called button trigger. We’re just going to make a custom trigger, and then we’re going to turn off this modal. First, I’m going to add the trigger element because we want to make sure, why did my, look at what Bricks is doing to me. Bricks has got a little buggy over the past couple of, why can’t I see the outline of the container is it because I have nothing inside of it okay all right so let’s add a I just want to make sure we can fire it prop before we go experiment with something let’s just make sure we can actually fire the modal proxy yeah put it in the I didn’t have the modal selected I had the containers like they just dropped it in the modal don’t know what bricks is doing but it ain’t right okay so we said button.

What do we say button trick do my short-term memory? gone button dash trigger button Trigger, okay. Let’s go save. Let’s go to front ends and let’s see if we get a modal All right, we get a modal Close the modal. Alright, so that had a close button in it and we need to get rid of that close button So we’re gonna go in here.

Let’s show the modal in the builder, let’s get rid of that little close button, we don’t need it. Let’s bring that close button into the modal. So let’s go with a close icon inside and let’s get rid of the background size on that, let’s get rid of the background color on that, and I just want that little X. So now we hit, hit, we’re all good. Okay, now we can start experimenting.

So we have a working modal, we verify that it’s working, we verify that it can be triggered. Let’s hide it here, let’s get rid of the trigger, let’s add a button. Now, how do we add a button? Well, you don’t add an actual button with the button element. Like people would think this adds a link, okay?

So for everybody that isn’t aware this is a link that is styled as a button and you can verify this in the DOM so I’m a link and I’m gonna say that our link goes to pound sign so that makes it a real link that makes it a focusable active link so now I’m gonna go view this on the front end and we’re gonna inspect in the DOM okay let’s pull this up and let’s put this back on the side okay I just had a flashback I said like PTSD thinking I wasn’t screen sharing. But I just checked I am screen sharing. So this is good. Okay, so you can see that this is in fact an A. See it’s an A that is not a button element.

That is an A element that is an actual link. Now I’m going to put a button class on here. I’m at what I would do I would not even use a button. I would put a div honestly. So I would throw a div in here and then inside of the div it would say my button trigger.

Okay, no text sorry text and then we say button trigger. Let’s go here button trigger excellent make this a span. Okay so it’s not a div obviously it’s just a span of text. So this is going to be our label for the button this is going to be our actual button. So now on this div and this is why it’s important to use a builder that allows you to change the HTML tag and not just change the HTML tag to like a few options but to literally anything that you want.

Okay so we come in here and we see I don’t see button. Hmm. Womp womp. Right? Well that’s the pause.

No that’s not that. There we go. There’s our wamp wamp. In another builder, I might just be SOL here. I might just be in a set.

Well, I can’t make it the thing I need to make it. Gutenberg, you’re SOL. They don’t allow you to select button here. It’s not an option. But in Bricks, you just say custom.

I can display it as block. I don’t know why it’s not in the builder on. I’ll just be honest with you, right? Is because it’s in the frames modal again. What is what is bricks obsession with like sometimes putting it in something and sometimes not putting it in something?

Sometimes putting it below some. I haven’t figured it out. I don’t know what the secret handshake is or what’s going on, but never does it add the thing where I wanted to add it to. It’s my biggest pet peeve with bricks. Okay, now let’s see if a button action class.

And this is why you use automatic CSS. You know, like, because buttons in HTML have a bunch of default, what are called user agent styles. And typically you have to like undo them and override them, but you see the ACSS button class already does that for you. And so now what we need to do is we need to go to the front end and we need to see if we have a button and we do have a button trigger let’s in the DOM is it an actual button hey it’s a button look at that a button with a span inside of it that is exactly what we were looking for and now if I go back to my frames modal and see that I need to call this button trigger okay so I come up to the button itself let’s do button trigger and then I hit save and then we go back to the front end. The moment of truth, can we trigger?

And yes, we can trigger. Now you asked, I think yours was scrolling to the top of the page. So what we’re gonna do in all fairness, to Mr. Manny, in all fairness, we’re gonna add a bunch of sections. We’re gonna make this page really long, and I’m gonna drag this section to the bottom somewhere.

Okay, and so if I trigger it down there, and then we’re gonna put something at the top of the page. All right, so this is gonna say heading, and this is gonna say, hey, top of the page, just so we’re all clear on where we’re at here. We’re gonna refresh, this is the top of the page, I’m gonna scroll down here, button trigger, and then I’m gonna escape. And you see, Manny, that we don’t actually get scrolled to the top of the page at this point. So this is all working.

2:01:34 And because it’s a button, 2:01:35 it’s naturally gonna be focusable, you don’t really have to do anything else in that regard. And because it has a span text in there, it’s going to read and announce the span text.

So there’s really no ARIA labels you really have to put on here. It’s kind of, you know, if it was just an icon by itself. And by the way, for those of you asking, how do I just make an icon button? The same exact method. So we go div.

The div is like, it’s the most flexible element in web design because you can just change its tag to whatever you want. So once again, I go HTML tag, I go custom, I go button. And then what I’m gonna do is I’m gonna put an icon in here and we’re only gonna use an icon. So I’m gonna grab this and then let’s just grab a, somebody said like, how do I make it an info icon or something? All right, so we’re gonna go solid.

We’re gonna say info. We’re gonna drop that in. Notice the button styling. Okay. I’m going to show you this on the front end.

What I was talking about. Well, you guys might not be able to see it because of the screen resolution. There’s a light gray box behind there. It has a default background color on it. So what we’re going to have to do, and I’m just going to do this at the ID level, because I don’t care about this.

We’re going to go to background and we’re going to have to write the word transparent to override this because we don’t actually want a background color. And then what I’m going to do is, that’s probably fine, let’s just leave it as a big ugly icon. We don’t need to do anything else. So this is your button element and then it’s got an icon inside of it. Got it?

Now there is no text here. I’m going to say that this is button trigger. That was our class. So this should technically trigger the modal as well. Let’s go take a look.

And there you go. We get, so there’s an icon, a custom icon, triggering our modal. No problem whatsoever. Now, the problem with accessibility here, and this is where somebody asks, like, what do we as developers, like you’re using ACSS, you’re using frames, do we still have to do accessibility stuff? 2:03:35

Well, yeah. 2:03:36 I mean, if you do something like this, you’ve got to know it can’t announce the icon. It doesn’t know what’s going on here. So now you have to come down to attributes and then you’re going to say ARIA label or really, really the best way to do this.

This is one way to do it. Then I’ll show you the best way to do this. So ARIA label is going to be like modal trigger or something like this. And obviously you would want to give it more context as to what is being triggered here. But at least now it’ll announce that this is a modal trigger.

It’s gonna let the user know that this is gonna fire a modal. There’s some other ARIA stuff that you can do here as well to make things even better. But what I do here in this situation is I add text inside. Okay, so we add a little text element. Doesn’t matter where it’s positioned.

It’s not gonna be seen on the front end. And this is yet another area where automatic CSS comes in and helps where maybe other frameworks don’t pay attention to these things. And so you say that this is the info modal. Whoops. It would help if Bricks allowed me to continue editing the text.

Okay. Info, modal, trigger. I don’t even know what it’s doing. It never does this before. You get on a live stream.

Bricks is just like, nah, it’s like, you know, when you get your pet, your dog, and you’re like, hey, I showed my dog some tricks you wanna watch, and then your dog doesn’t do jack shit in front of them, even though it was doing tricks earlier for you. It’s kind of the situation on live streams. So let me type slowly and figure out what’s going on here. So, info modal trigger. Okay, well, now it’s deciding to work.

Doesn’t really matter, I don’t think what the, because again, this is not for visual users, it’s not for the DOM, it’s not for anything else, it’s for screen readers. And so we’re gonna use a class called Hidden Accessible. And you’re gonna notice that we’ve also gone to the extra length, knowing that, hey, when this text disappears, when you’re in the builder, it will be really helpful if there was an indicator, maybe to you six months later or to other people, that there is hidden accessibility text here. So in the builder only, it puts a little icon that says A for accessibility, for hidden accessibility text. So when this icon is activated by a screen reader, it’s going to read these words right here, info, modal, trigger.

But the users on the front end, I’m gonna go to the front end and take a look at this, it’s just an icon. Like nobody visually looking at this knows that there’s any magic sauce going on. But behind the scenes, there’s some accessibility magic sauce going on. And you’re alerted to this inside of the builder by Automatic CSS that that is what’s happening here. Now, people ask me, why do that versus the ARIA label?

And I think there’s only one answer. This is a simple answer. This text can be translated, and a lot of translation apps and and translation browser support and stuff like that Doesn’t translate ARIA labels at least last time I checked so this gives you the benefit of having translatable text Where the ARIA at least in the past did not give you a translatable option So that’s why I say that this method is better than the other method Okay, we got to get out of here I’m gonna do maybe two three more questions. I hope, hopefully this gave you guys an example of how do I use a button? Oh, oh, well, last thing on this.

So let’s, let’s go back. Here is a, why couldn’t we just use a link? Why couldn’t we just use the normal button element with a pound sign or whatever? Well, number one, it had the problem of taking people to the top of the page when we closed the modal. But even then, you know, why can’t we use, if it didn’t have that problem, why couldn’t we use a link?

That would probably be the best way to phrase it. And the answer is very simple, because it goes back to semantics. A link is a navigation element. You’re navigating to a place. A button fires an on-page event.

These have two very different semantic meanings. And so, you want to use a button when you’re firing an on-page event, you wanna use a link when you’re navigating the user somewhere. That’s it, that’s the end of the story. So this is a common, common, common mistake. When people are firing modals, they put links everywhere.

You need to be putting buttons everywhere because you’re firing on-page events, you’re not letting the user navigate. So that’s an easy upgrade to your DOM ability. 2:08:01 Okay. 2:08:02

for DOMability. 2:08:04 Okay. Justin says he feels so validated. 2:08:07

Are you talking about me adding things to the bricks? I don’t know what you’re talking about, but I imagine maybe you’re talking about bricks, just seemingly adding things to random parts of the structure panel. All right, let’s go down. Somebody said Affinity Designer 2, Affinity and DaVinci are alternatives Like Kevin I use Adobe for more than just web design. It’s worth the cost for me.

I know the tools very well Okay The Hunzi says you’re putting a modal in a modal. I wasn’t actually putting a modal in a modal It’s a modal frame, but it’s just a block. It’s just a it’s just a div. Basically. It’s not actually a modal It’s just it’s it’s a frame made for modals.

And we can actually go back, I mean, let’s just go investigate like what the heck was happening there, because I would like to know. We, it’s something we need to fix if it’s not, if it’s not working. So let’s go to drop our modal back in. There’s our modal, let’s go to library, let’s go to modals, and let’s look for, it was CTA modal alpha. Once again, it decides to put it below.

I’m gonna drag it in and then it’s gonna do this And so what we’re gonna need is a trigger Okay, we’re just gonna do some good old-fashioned hunting hunting for where the problem is coming from. So let’s turn this off Let’s get a trigger Implemented in here. Oh, I do not want two of them. I just want one of them triggers should always go before your modals by the way. All right.

And then I’m wondering if I need like a custom class on here. This is set to FR trigger and yeah, we can just use FR trigger. That’s just the default. So save and let’s just see what happens. Are we experiencing the same problem we are?

Let’s inspect this now into the div. There’s another div right here. Okay. We’re still in the modal area. Here’s the body of the modal.

Here’s our CTA. So what it appears like is our modal is not growing to accommodate the content on this particular frame. Not on the other frame, just on this particular frame. And you can see the element right there. So the question is, why is the modal almost like not recognizing that there’s content inside of it?

So what I’m going to do is I’m going to put a let’s see what the actual structure is here modal alpha. Oh, no, you are wait a minute. 2:10:34 Hold on. 2:10:34

Maybe you were right to Hunzi. 2:10:37 Hold on. 2:10:38 I built this modal.

2:10:39 Now we’re going to go now we’re going to go to the library and we’re just gonna see did I act I’m pretty sure I built this modal and I didn’t build it as a modal I built it as a block okay let’s go over here let’s just figure this out so we’re gonna go to modal and that was CTA modal alpha who is the off the author’s frames on all of them. Okay, let’s edit this edit with bricks. Oh Maybe maybe maybe mr. Tobias Let me look at the chain.

Okay there I started it Okay, then somebody else took over then Tobias took over. So maybe something was changed that I’m not aware of Was it changed to actually be a modal element? Okay, so CTA modal alpha, let’s go ahead and edit this in Brics, see what we’ve got going on here. And the Hansi was correct, but is this? Okay, you know, because in Brics, it’s called a pop up, right?

I want to make sure that this was actually the frames modal. But then I’m looking at something else, something else caught my eye. No, that is the same icon. Okay. So it looks like Tobias put this in a modal so that people could just add it to a page and not have to drop it manually into a modal.

That’s exactly what was happening. Now knowing that, okay, because I was like, my brain was like, hold on, I built this modal as a actual frame, not as a modal. Because when I built the modal, we didn’t have a modal component at all and it was just designed for dropping into a modal and so now that it’s been changed let’s let’s see the actual use case would be grab the container and then just drop in the frame itself so cta modal alpha there we go we’re going to drop it into the container excellent now we can turn off the preview in the via fr trigger, see now, just knowing, hey, there we go, okay. But at the same time, it does need to have a max width on it. So let’s go down here to body container and the width, we can do something like width L.

Maybe M, let’s see M. It would probably be helpful if I previewed it in the builder. Okay, we don’t wanna go with M, there’s L, XL, okay, XXL. Just get something that we like here. Save, refresh, trigger, there we go.

Now the next thing we need to look at, what is this, whose form is this? Ugh, it’s the Bricks form. This is the Bricks default form. 2:13:30 No bueno.

2:13:30 So this would, if I was using this modal, this would immediately get deleted. We have to use it because not everybody uses WS form, but I would delete that form right there, and then I would drop in an actual WS form into that container, and then we can do the rest of the customization on here that we want to. You can change the grid structure if you want to. So if you notice, here we go, and actually, let’s go into the inner, activate our class.

2:14:02 There’s our main. 2:14:04 Okay, that’s got our content gap on it, that’s good. 2:14:06

Here’s our sidebar. 2:14:08 All that’s fantastic. Okay, anything you wanna do here, we can just change. Var grid two, grid three, or whatever.

If I could type, it usually works better when you type. Okay, so now I have a side-by-side So I can refresh got a little side-by-side action drop a little form element in there I can swap the image side over to the left-hand side if I want to by changing the order of those containers So it’s just a matter of what you want to do from here to actually style the component But now I know that we actually probably is a good thing We need to talk about now, and I’ll just ask frames users. Do you want the frames as blocks that you can drop into a modal? Or do you want the frame modal the modal frames modal frames get this in my brain the modal frames as Modals that you just drop into a page in my mind if it’s a block you could drop it into a frames modal You could drop it into a bricks extras modal you could drop it into the Bricks pop-up. But if it’s a modal modal modal modal like with the frames modal that you just add to a page, it’s just you’re using the frames modal.

I think the frames modal is better than the other modals so it’s still a benefit I think but it does it would I could see a case where you’re like well it limits my flexibility and how I use the modal. That could be the case that I see happening. So, but you guys got to give feedback now. Because we’re now in a situation when I said when we started building the modal frames, we didn’t have a modal element. So we just built them as blocks and divs and you just drop them into a modal element, whatever modal element you want to use.

But now we have a modal element. So it begs the question, do we go in that direction of let’s just make them all modals out of the box? Or do we make them blocks and divs, allow people to drop the blocks and divs into the modal of their choice? 2:16:08 And shout out to Dehunze for spotting that.

2:16:11 See my brain didn’t spot it, because I built it and I was like, well when I built it, it was a block. It wasn’t a modal. So surely it can’t be a modal. But that was a fantastic spot, Dehunze.

So Tyree says blocks is better, more flexible to drag something is simple. Okay, perfect, perfect, perfect. I think that’s what most people are going to say. I’m going to do, I’ll do an official poll. I’ll do an official poll.

All right. I’m not going to answer that. I’ve already, we can discuss that at a different time. Last question, because it’s a follow up to what we just did. In the button example can you make the trigger button accessible with proper HTML button you just showed us?

I just did I think I just did. And you asked the same question I believe twice. Yeah that I just did I just showed it. Okay I gotta go I gotta get out of here. Thank you guys for coming in.

I’m glad I didn’t fall asleep during this one on four hours of sleep and I will be back next week. Hey, by the way, if you didn’t watch last week’s WDD live, the process is everything masterclass. I’m just telling you like you, you’re a hundred percent missing out. You’re a hundred percent, like tremendous amount of value. The feedback on it has been amazing.

Everybody, the con, the consensus is it’s like the must watch training of 2023. If you are an agency owner or a freelancer working in this space. It is the must watch training for this year. So go back and find it. WDD Live from last week.

It’s called Process Is Everything. I guarantee it’s three hours long, but it is the best three hour investment you can possibly make this year. Okay. I love you guys. I’m out.

I’m out. I’ll be back very, very soon.