WDD LIVE 051- Two Web Design Critiques + ACSS Problem Solving + Q&A

0:00:00
Hey, everybody. Welcome, welcome, welcome. Let’s see who’s here.

0:00:03
I usually I go to the stream a little bit before I hit go and see what everybody’s chatting

0:00:04
up in the chat, but I did not have time to do that today.

0:00:05
So I am seeing the chat for the first time.

0:00:06
Say hi when you arrive.

0:00:07
All right, we got Mark Zmanski in the house. We got an update on that in just a second. I think we should all start coding in the chat. I’m going to go ahead and start coding. I’m going to go ahead and start coding. I’m going to go ahead and start coding. Mark Zmanski in the house. We got an update on that in just a second.

0:00:33
I think we should all start coding in dead man switches into our website just in case clients try to run off with them. Calisthenics Ireland is here. Good to see you. Jaroslav, Larry, Olaf, Simon, Derek is here. Andrew in the house. Brendan in the house.

0:00:50
Good stuff. Charlie Sasser’s here. Tobias. All right. drama in the bricks community. Oh, gosh, plugin authors just taking it to the dome over and over and over again. I don’t know what’s going on. Ian is here. What’s up, Ian? Callison and Silen says, How is ACS with breakdance? Is everything

0:01:12
working? Or is it only early stages thus far? As far as I’ve heard from the people who are using it in Breakdance, it’s working seamlessly. It’s just the early stages of the integration. So the entire framework should work just fine, but context menus, variable expansion and validation, features like that, color palette stuff, that’s coming in a future update.

0:01:42
Maybe in the 3.0 update, that stuff will be baked in. We’ll see, it’s just, you know, our priority right now is 3.0 and getting 3.0 out the door to the masses, like, and Breakdance is not the masses right now. So it’s just, if we can fit it in, we’ll fit it in. If we can’t fit it in we’re not going to hold 3.0 back waiting on that so that’s kind of where we’re at right now but if you’re just using the framework in breakdance that works just fine. Okay let’s see here

0:02:14
Michael welcome if it’s your first time say this is my first time on WDD live we’re gonna get started in just a minute kind of like to just say hi to everybody and let everybody arrive. David McAnus here. Welcome, David. All right. See any other got a lot of familiar faces as usual. Okay. Any idea for April fools announced the discontinuation of ACS? Yeah, we should. We should plan something up big, right? I don’t know. I don’t know. I’ve never done an April Fool’s anything related to business.

0:02:55
And at this point it’s just, you know, I wake up on April Fool’s and I’m like, alright, let’s see what people did. It’s not like, you know, it’s not that exciting. And a lot of it is very obvious stuff, you know. So, I don’t know. I’ve got bigger fish to fry, right? Then getting cute on April 1.

0:03:16
Okay.

0:03:16
Come on, Kevin Geary.

0:03:17
I’m not ditching bricks for breakdance anytime soon. That was just a conversation with the number one breakdancer Ruben Garcia. Yeah, you know, there are there are breakdance users, you know, and they are they are growing. So it’s, it’s always it’s always, you know, it’s good to have another builder because we don’t know, you know, maybe maybe Thomas is the next to shoot himself in the foot.

0:03:40
We don’t know, we don’t know anymore, we don’t know anymore. So it is good to have a couple other options. Okay, here’s what we do on WDD Live. We do, it’s kind of a variety show, honestly, but most of what we do is live web design critiques, in-depth critiques, focusing on everything that makes a website successful. So if you are a freelancer, if you are an agency owner, if you are a business owner, you can learn a lot from these streams.

0:04:06
Tuning in and learning about copy, learning about SEO, learning about the UX, the UI, good coding practices, accessibility. We talk about everything that makes the website successful. So, really, really good learning experience. Then what we do is whatever other random stuff we have planned. For example, today, we are going to walk through together

0:04:27
a future change that I’m contemplating with automatic CSS. And I’m actually going to start doing this more on the ACSS channel, I think, as a regular thing, where when we’re heavily considering something and we’re trying different methodologies and practices and things like that, and weighing pros and cons, I think it would be fun and it would be a good learning experience, it would be good transparency, it would be good for a lot of reasons to kind of do

0:04:56
that stuff out loud on the automatic CSS channel. So you could come into a livestream where I’m, you know, riffing back and forth on here’s how we could implement this new feature, here’s another way we could go about it, and then get feedback from all of you. So keep an eye out for that. We’re gonna do a little bit of that today here and see how it goes. And then if people like it, look out for that on the ACSS YouTube channel.

0:05:22
If you’re not subscribed to the ACSS YouTube channel, highly recommend hopping over there, subscribing to that channel. Okay, another announcement. Oh, the other thing we’re gonna do. Yeah, so a little bit of that and then we’ll do Q&A. We always do a little bit of Q&A in AMA or even live like, you know, people ask,

0:05:38
hey, how do I do XYZ? And if it’s easy, I can pull it up and we can actually do it live. So there’s gonna be an opportunity for some of that as well. Mark Zemanski is, I’m gonna be, this is a new little series we’re gonna be starting here on the YouTube channel, hopefully.

0:05:53
We’re recording session one tomorrow. And this is with Mark Zemanski, he’s in the chat right now. He has a YouTube channel up and coming, YouTube channel, right? And what we’re doing is we’re starting a series that is basically the theme is like a Elementor refugee, because Mark is coming from the Elementor world, right? And Mark has recently switched over to Bricks

0:06:19
and automatic CSS and okay, so that’s the context. And it’s like an Elementor refugee comes to Bricks and ACS, the whole new workflow, class first workflow, using a framework, all this stuff. And he has a lot of questions. He’s got a lot of like, walk me through a lot of this stuff, right? We’re gonna do that as a series.

0:06:38
So for those of you who are, you know, ex-Elementor users, ex-Divi users, ex-whatever chump builder user, okay? And what you’re gonna find is you’re just, and Mark already sent me a list of stuff that he’s contemplating. He’s recorded a few videos, I’ve watched his videos and I see common places where people get stuck, where people have questions, where people are like, what’s the best way to go here?

0:07:02
I mean, there’s so many little pathways that we could take, right? And so we’re just going to talk through all that stuff and we’re going to work it out like in a screen recording, okay? And I think this is going to be tremendously helpful for lots and lots and lots of people. So this will be kind of a new series that we’re starting here. I think everybody is going to be. I mean it’s something people have asked me for for a long time. I’ve thought about doing a pure beginner series where we bring on a pure web design beginner

0:07:30
and kind of do this stuff with them. But I’ve done that privately before, and it takes – it’s quite an experience. I mean, an hour you might be on a basic hero, right? Because there’s so much stuff, there’s so much stuff you gotta work through, right? But if we take somebody that actually has experience, just not an experience in this workflow, but web design experience,

0:07:54
I think it’s gonna go a little bit faster and it’s gonna help people make sense of things a little bit quicker, okay? All right, save your, I guess you can put, if you have questions now Whatever you can put them in because if you hashtag them hashtag Q or hashtag question I will be able to search for them and pull them up when we get to Q&A Okay, are you calling the series trauma bonding over elements or hey perhaps and perhaps we do need to find a good a good title

0:08:20
All right, well with that said, yeah, let’s go ahead and dive into the first review. Yeah, some people saying that that series would be amazing. Yeah, I think it’s going to be very, very, very helpful. All right, let’s go ahead and pull up our first website. I’m going to get Ecamm going here. Okay, I’ve got some new controls on my stream deck. Hopefully all of this works the way it’s supposed to. Here we go. Enviable scapes. Enviable scapes. Okay, we’re going to talk about that brand name in just a minute. I’m having some feelings. I’m having some feelings about the brand name right off the bat. Residential Lawn Care and Maintenance Services in Aurora, Castle Rock, Centennial, and Parker, Colorado. Let’s make your yard enviable so you can relax and enjoy your weekend, get your estimate, call this number. Got a number in

0:09:23
the header as well. Same call to action in the header. All right, we’re doing our no scroll test. That’s how we always start out with a no scroll test. You can’t scroll around. You’ve got to figure out what’s going on from the hero section and the header. That’s it, that’s all we can see. And in this case, it’s fairly obvious. We’ve got a lawn care company, says it right there. Okay, very literal headline. And then we have a little bit of a lead paragraph,

0:09:51
which has this green kind of block background thing going on. And that’s where we kind of are hitting on the main like benefit, right? Which is making your yard enviable so that you can relax and enjoy your weekend, kind of speaking to our target customer who doesn’t want to be out in the yard doing this kind of work.

0:10:13
They just want somebody to take care of it for them. So we’re hitting, you know, we’re checking off some basic boxes right off the bat. I’m looking at the navigation. It looks fairly simple, very clear. These are our services. You can learn about us. You can contact us, or you can read our blog. Now, what I typically say is, you know, I put the contact last.

0:10:36
And I think, you know, general UX principles is make things as familiar as possible. If you start trying to mix things up too much, with a simple nav, it’s not too bad, because, you know, there’s not a lot going on up here. It’s not too difficult to figure it out. But traditionally it would be like about, and then services, and then blog, and then contact. You know, just keep things familiar. It’s like, why mix it up if you don’t have to mix it up? Then we have the phone number, which is good,

0:11:05
and we have get your estimate, which is good. Let’s see what happens. Okay, that actually opens the call. That actually opens the call. Okay, we’re good. Video in the background. Some people are going to feel a certain way about that. I don’t mind it too much in this case. It’s a little shaky. It’s a little shaky. I don’t think, you know, it’d be

0:11:30
interesting to see if you have like, you know, respecting people’s motion preferences turned on for accessibility purposes here. That is one thing you have to keep in mind with autoplay background videos is people who do not want motion, that would be something to keep in mind and you would wanna replace that video with a static image. So it’s a little bit of extra work.

0:11:52
There’s extra work involved when you try to put little cute stuff going on. Not to mention, there’s extra work on the performance side of things because now you’re loading a video file back there versus like a highly optimized background image of some sort. And then you also have another issue potentially

0:12:10
with the overlay text and how dark is this video, like different light parts of the video. Like he’s got kind of a dark overlay here, which is helping out things a lot, but I’ve seen plenty, plenty of situations where they don’t use an overlay and light parts of the video wash out the text, which also makes it inaccessible,

0:12:29
but just is just not good at all. So anytime you’re gonna use, people ask me about background videos. Yeah, I asked, well, I mean, did you charge extra for that? Because it’s a lot of extra work. It’s a lot of extra stuff you gotta think about to get cute like that. And then, yeah, so like Sylvia says,

0:12:47
too much motion and gets me a bit dizzy, especially when it’s a shaky camera. Okay, let’s talk about this brand name because that stood out to me right away. You know brands that put two words together and the two words share the last letter? My brain, now there’s a little bit of a space in there, but my brain still, the first time I read this,

0:13:16
read it as enviable escapes, escapes, like using the E on the end of enviable as the beginning letter of the next word, because so many brands do that. And then I had to like, I had to go backwards, retrace my steps, and go, oh, it’s actually enviable escapes. But then I was like, you know,

0:13:34
that first word’s a lot to chew on, right? Like enviable, like it’s not an easy word, okay? And then you have a spelling thing, because again, we’re supposed to make our brand name like easy to spell, easy to say, easy to remember. There’s a lot going on in this brand name right here. If I was consulting the client, I don’t know if they’re a brand new company or whatever,

0:13:58
but this would have been part of the discussion. That, hey, I don’t know. Should we, like, maybe we should reconsider this before we really, you know, go all in, full send, right? I just, I think that it presents a lot of problems. You’re gonna have problems with people not knowing how to spell this word. You’re gonna have pronunciation problems.

0:14:20
You’re gonna have the enviable escapes instead of enviable scapes thing. The word scapes is just not as an industry term. I get it I’d never use I don’t consider my yard to be a scape like it’s not mmm Oh, I really want my scape out there to be super enviable like that’s not nobody talks like that So it doesn’t even connect with the target market really It’s just not a good. It’s not a good name. It’s not a good name And so I would I would inform my client of that before we get too far into this.

0:14:51
Now if they push back and they’re like, ah, my grandmother came up with that name, fuck you. You know, like, okay, whatever, dog. Do what you do, right? But, you know, it is what it is at that point. But at least inform them, at least make them aware that, mm, not such a good idea. Probably might wanna simplify that a little bit.

0:15:10
Okay, that’s all I will say about that. Let’s go ahead and scroll down. Oh, what do we think of this green block? I’m not hype on this green block right here. It looks like it stands out a little bit. It’s like, it’s by standing out, I mean, not in a great way.

0:15:26
It just, and it’s got the like,

0:15:28
it’s an odd shaped container too. I think it’s supposed to seem like a cutout, like piece of paper or something. I don’t know. I don’t know what it’s supposed to be. But it’s a little not fantastic. All right, let’s go down. Taking care of your yard can be challenging.

0:15:47
We certainly understand that. Okay, I will say this, like this is a waste of like, don’t put these things on two lines. A second line is for another substantial amount of text, like a full sentence, okay? Not like a continuation of the thing I just read. You could easily just make these one,

0:16:11
just make that one heading, all right? Or, you know, just say taking care of your yard can be challenging. We don’t, you don’t need this line. This line is a waste of space. And it’s just, it looks like it’s just floating, it’s like a little orphan sentence, just floating around. Like, what are you doing here?

0:16:29
You know that meme of that guy that’s just like lounging around? I can’t remember how it goes, but you probably know the meme I’m talking about. That’s this sentence right here. He’s just here. He’s just here. Okay.

0:16:40
The yard of a busy family that needs our help. Hold on. Oh, now I’m confused.

0:16:45
Wait a minute.

0:16:47
All right. Taking care of your yard can be challenging. The yard of a busy family that needs our help. These, this narrative is not continuing. This is not a continuation of what I’m reading here.

0:17:00
You’re starting a whole new idea.

0:17:01
And then I thought in my mind, we were about to look at service cards or something. I thought these were gonna be service cards, but they’re actually, because I saw a call to action down here. This is weird because these are like case studies, but well that button doesn’t even do anything. Yeah, okay, we got to do something with that button.

0:17:21
But why doesn’t this one have a button, right?

0:17:24
They both need buttons or they both don’t need buttons,

0:17:27
whichever one, but having one with a button and one without a button is not fantastic so we got to improve that oh wait no now I’m putting two and two together this is okay now I’m reading the ribbon this is a before shot this is the after shot but dog you’ve made this look like two different things in my mind these were two different little case studies going on here because they’re separated right and so the UX is saying in it like visually these are two separate things but really they’re the same thing and so you see how UX stuff is important to not generate confusion and this is an area where we didn’t even

0:18:16
need confusion it just was presented to us in a confusing manner so these need this could be a slider thing where it’s like you know you slide back and forth between the before and the after. You could use that kind of situation, though it’s very hard to make those accessible. You could just put the before and the after side by side, and like all you needed was a different headline. You need a different headline here.

0:18:42
This is not the headline for a case study section, okay? This is the headline for a, we’re about to talk about our services. Like taking care of your yard can be challenging, that’s why we’re gonna do it, and here’s what we do as our list, that’s like the narrative, right? This stuff is all different.

0:18:59
So we would have a different section with a different heading that speaks to projects, and it would be literal, it would be like, let’s take a look at one of our example clients, right, or customers. Here’s what we did before, here’s what we did after, the two things are side by side. So it’s very clear what’s going on with the before after situation, put a little blurb below it with a call to action.

0:19:21
Now, no confusion. Everybody knows what’s going on. All right. So I think this, this section needs a lot of work. And, and this is the second section on the page. So I went from, okay, I’m confident. I know what’s going on here. I know what this business does.

0:19:35
I know what they provide and then bam, confusion. Alright, what’s going on now? I don’t know where I’m at, I don’t know how to interpret all this stuff, okay, so now I got to keep going. Here’s the landscaping services that we offer and here’s the double thing again, we’re just wasting space with it, this needs to be more, you can build more content in right here, right? This is kind of a lazy way to do a lead paragraph.

0:20:03
You’re not adding any value. Like landscaping services we offer, services that make your landscape look awesome. Like it’s, this is, you know, very, very, very basic, basic, basic, basic copy. It’s not really getting the job done there. Okay, we’ve got lawn mowing, property cleanup, lawn fertilization.

0:20:23
I’m not convinced that the yellow on the green is accessible might want to check that And I what just happened let’s refresh I don’t know my hovers stopped working Oh dear, okay now something something has oh, you know what? What is going on here Mmm, you got something going on in this section What is going on in this section? What is going on?

0:20:52
Okay, let’s go to a different section.

0:20:54
Are hovers working? Okay, yep, they’re working. Now they’re working again. I don’t know, I don’t know what happened, but we lost hovers for a second. Now I am screen sharing, sometimes, it’s weird. Sometimes I’ll look at a video after I’m done and things were happening that I actually couldn’t see

0:21:10
when it was happening live. So maybe those were still hovering, you could see it and I couldn’t see it, I don’t know. But the hovers were not working for a second there. Okay, lawn mowing, we do up to 36 cuts per year, our team is always on schedule. Comprehensive property cleanup services, thorough removal of debris and clutter.

0:21:31
Lawn fertilization, customized lawn fertilization plans promoting lush and healthy greenery. Lawn aeration, professional aeration to enhance soil health, promoting better nutrient absorption. Okay, let’s talk about this copy. This lawn aeration right here is a really good example of this. Again, it’s really good in your mind when you’re writing copy to just assume everybody is just they have no idea what you do or why you do it or everything has to be explained to them.

0:22:02
And it’s talking about benefits more than features, right? So lawn aeration, we have a big word, aeration. And there’s just going to be a lot of people that don’t know what aeration is. Or maybe they know, oh, that’s that thing where you go and you put holes in my lawn, okay? But they don’t know why that’s done necessarily, or why that’s beneficial, or why it should be done or needs to be done. So how do you, where are you going to tell them what this is for, right?

0:22:28
Well, you got two bullet points right here, which I’d like to see three. I think, at least in my brain, two’s a little odd. I’d like to see three under each one. But this is an opportunity for you to get started on the right, tell them right now. The question is, should they have to click on it to figure out what it is, or should you just tell them in the text you’ve already put here. So if I have a question in my mind what is lawn aeration or why does that matter? Professional aeration, okay you just said the same thing again lawn aeration,

0:23:03
professional aeration, so we’re just wasting words right because I just read that here I don’t need to read it again. To enhance soil health, that’s an industry thing. It’s like oh we we were enhancing the health of your soil The fuck does that mean dude like just tell me what why why oh well when we do this your grass is gonna grow back Faster meaner taller whatever like give me a result right there’s no result from like soil health Why do I care how healthy the soil like what does it do differently? What is going to be the outcome of this thing? That’s what we got to touch on. Nobody cares about soil health. Nobody cares about better nutrient absorption. Like yes, okay, better nutrient absorption then does what? Just give them the what, right? What is going to happen next? Just tell them flat out what’s going to happen and instantly

0:23:58
you’ve written better copy. Get rid of all the middle stuff and just give them the end Mulch installation okay, seasonal pruning great alright, so we need to clean these cards up just a little bit with our with our with our copy Our team is yeah like the team always on schedule thing is not a feature of lawn mowing right? That’s a feature of your company so We’re gonna have service features and benefits, then there’s going to be a part where we talk about company feature and benefits and you know mission and values and all that stuff. This is the kind of thing that goes over there.

0:24:37
So keep these things to services and not to the company in general is a good rule of thumb

0:24:43
there.

0:24:44
Let’s see what getting our S, no these none of these buttons work. None of these buttons are linked up. Okay, so that’s something to check on. This is a live site by the way. Yeah you need the buttons working on the live sites. We are inspired by happy clients every day. Okay good. There’s a good little clean testimonial section. Okay scrollable fine. Doesn’t appear to be accessible Because I can’t select it with the keyboard. I can’t navigate it with the keyboard I can’t and this looks like a plug-in. This is like a you got a review plug-in you threw it in

0:25:22
They they had this thing out of the box, but of course the developers a slouch so you know it’s not accessible and yeah The common scenario that we run into over and over and over and over and over again. Okay, now I don’t know, I don’t know, let’s see, what plugin is this? Yeah, G-Review Card, this could be like custom done, I don’t know, I would gather that it’s a plugin. I feel like it’s, it feels a little plugin-y, but I’m not sure, not sure.

0:25:55
Because a lot of people like to pull from Google automatically, right? They’re like, let’s just pull in those reviews automatically. Now that I’m looking at it again though, I don’t know that that’s the case. Let’s see. That’s a fake photo right there.

0:26:11
I’ll tell you this right here. Guys, I know stock photos when I see them, right? You can’t get one past me, dog. This Benjamin Stratton, that ain’t Benjamin Stratton right there. I’ll tell you that right now. Yeah, and that’s not Isabella, okay? No, that for sure is not Alexander Thorne.

0:26:27
Okay, I got you, I got you. All right, we got a little fake testimonial section here. Let’s not do the fake testimonial section thing. You could, you know, you pull real and then we can go to enviable escapes. Let’s go to Google and then go enviable, enviable, enviable, escape. Oh, see, I did it again.

0:26:47
I wanted to write escapes. Let’s throw an E on there. That always helps. Oh, hmm. Where did their GMB go? Womp womp, right? Where’s the GMB at? They don’t have a GMB? Okay, we need a little GMB. We need a little we need some reviews. All right, let’s keep going. Let’s keep going. All right, we promise to maintain our service standards for you.

0:27:15
All right, satisfaction guarantee,

0:27:16
fully licensed and insured. I’m noticing now these don’t have any links in them, which is why I couldn’t select them, but I could probably select them with Apple VoiceOver if I went back and did it. But what we do need is you gotta have controls on these sliders. There’s gotta be arrows or dots or whatever

0:27:34
to control these sliders. That’s really the main problem. See, even if I can’t select a card, I would be able to select arrows if we had the arrows. So even in Bricks, right? Bricks gives you one of these sliders, Frames gives you one of these sliders, but they all come with controls.

0:27:49
You have to make sure you include the controls. That’s what makes this navigatable with the keyboard, right? When you remove those controls, we’re SOL on the accessibility side of things. Okay, here is the part where we’re selling the company. Like choose our company, don’t choose other people. Satisfaction guaranteed. Listen to how boring these are.

0:28:16
Fully licensed and insured. I mean, you got to say that to say it, I guess, whatever. Always on time service. Same technician every visit. Okay, let’s set that one aside, quality workmanship, friendly communication. Okay, basically what this is saying is we do nothing unique. There is nothing unique about us.

0:28:36
So, you know, choose us if you want, but it’s like, you know, there’s not a lot of convincing that we can do here, because we’re like everybody else. If this is what your kind of like sell the company thing is going to be, like just don’t even put it. Let people have an imagination at that point, like, cause you’re basically just confirming that, you know, we don’t really do anything different here.

0:29:00
Cause satisfaction guaranteed, I mean, everybody says that, right? Everybody is probably licensed and insured in this local area. You know, they’re always gonna claim to be on time too, by the way. Now, whether they actually are on time, different story, but guess what? If they’re late to a job, they’re not going to be like boss, you’re going to

0:29:21
have to, yeah, you’re going to change that notice on the website. I mean we were late today, so you can’t be saying that. Ain’t nobody in the company is going to do that, okay? So it’s just meaningless. It just means nothing. People know it means nothing. Same technician every visit is the only one that perhaps has some value. If there’s a situation in the industry where, every time somebody new shows up and you gotta constantly be like,

0:29:48
ah, is this new person gonna do the job right? I don’t know. But if you got the same guy or same crew coming every time, I think there is a good benefit in that. And if all your competitors don’t do that, like they’re just sending random crews out every time. This is actually a thing that sets you apart. Okay. And that’s, that actually has some value here. Uh, quality workmanship. I mean,

0:30:11
who’s going to be like, nah, I mean, we, we do average workmanship here. Uh, like everybody says it and I’ve, and we’ve gone over this before. If everybody says it, and this is a conversation you have to have with your client. I’m not even really talking to the web designer at this point necessarily. This is what clients would write. If you said Bev, we need to know what the selling points of the company are. We all know who Bev is, right? This is the copy Bev will give you. And Bev is boring as shit. I mean she knows everything, but she’s also boring as shit, right? So quality workmanship, friendly community, every company says that. And if everybody says it,

0:30:52
it doesn’t mean anything. It has no value. Don’t even bother. Right? Say something, find something important to say here. What does legitimately set you apart? There’s got to be and you think about like, oh, it’s just a landscaping company, Kevin. Well, we’re just web design. I mean, you got to see what are these other companies, these other landscape companies doing wrong? What do clients hate about them? Okay, fix those things and then those become your selling points. You’ve got to do something different though. You can’t

0:31:21
just, oh, they cut lawns, they cut lawns, they cut lawns, we cut lawns, we’re all cutting lawns. Choose one of us. That’s basically what’s going on here. There’s no reason being given to really be like, this is the one. This is the one. Okay, frequently asked questions. All right, these, oh, okay. Speed that up. I’d rather not, we gotta wait like, you know, three business days to read every FAQ here. So we gotta speed up that animation.

0:31:51
Can we, uh-oh, uh-oh, uh-oh. Where’s our tab navigation? I can’t tab navigate through my FAQs. All right, so we’ve got some improving to do there. Womp womp. There you go. Go a little Kevin Hart. Action. Okay. Ready to make your yard look amazing. All right, that’s not a bad, it’s not a bad ending call to action. Yes, I’m ready. Unfortunately, even though I am ready, we’ve got some issues here with our colors too going on when I click that button. I’m ready, but the site’s not ready.

0:32:30
I’m ready, site’s not ready. So let’s get that improved. I really wanted to see the, can I get it up here?

0:32:36
Nope.

0:32:37
I really wanted to see the checkout process and see what the get your estimate kind of thing. Yeah, none of these work. It says get your estimate. I wonder if it’s just slash estimate. Negative. Okay, well, I think there’s a contact page. Yeah, I wonder if this is, this is probably not your,

0:32:55
this better not be the estimate page. It’s just a regular contact page. Okay, let’s go to about. We’re almost done with this one. We can wrap this one up. This is the thing though, like you’re hired to build a landscaping company website. I really wanna encourage people,

0:33:24
don’t just go in and say, yes sir, yes sir, yes sir, yes Beth, yes sir. Okay, we’ll do that, yep. Like you’ve gotta inject your consulting into this. You gotta say, like the first conversation I have is like, alright, well we don’t want to build, you know, the same old same old landscaping website. Like, we want to know, and we’ve talked about this in Discovery, like we go through a whole Discovery thing of like, what makes your company stand out? Tell

0:33:52
me about your services. How do you guys cut lawns that’s different from everybody else? Like, I really don’t want to create a website where we just say you’re the same as everybody else. So what do you guys do differently that we can talk about that’s relevant? And then a lot of the times it’ll be like, well, I mean, we cut lawns like they don’t even know they haven’t even they’re just like, you know, they just threw their hat in the ring. Oh, look at all these lawn care companies. Let’s just throw our hat in the ring, too.

0:34:19
But there’s no thought about like how to do it better, how to do it different, how to be unique, how to do this, how to like, there’s no thought. And you have to break it to a company and be like, guys, like, if you want to market a business, we have to have something to say. And if you’re just like everybody else, we don’t have anything to say. So we can’t do marketing.

0:34:39
Now we can do the me too marketing. We can do like, oh, hey, yeah, me too. We do this, but that’s, I mean, that’s expensive. It’s not particularly like, you know, it doesn’t work well. It’s boring, it’s annoying to do that kind of work. So, you know, this is where you can really step in and be a business consultant on top of being a web design consultant

0:35:02
and just inject a lot more value into what’s going on with these companies. Because they are, you know, very like localized companies, they may not have a lot of business experience, they really value this kind of insight. And you could be the difference between them just being another one or being a standout business. You want your clients to be a standout business. And that’s really required if you’re going to dominate a local area and not just be another option. Alright, I think we’ve done enough here.

0:35:33
Let’s get on to site number two. All right, this is going to be Zao Strength. We’re going to check this out in just a second. I want to go back to chat and see what we’ve got going on in the chat. Okay. The site looks thrown together. The elements do not feel cohesive. Yeah, I think it could help from a designer, like have a designer actually put eyes on this and clean some stuff up and like that you

0:36:05
know there’s colors kind of all over like yellows and greens and black borders on buttons and it’s just it’s kind of the typical like a developer designed it that’s what it looks like it looks like somebody who does development design the site and that’s rarely what you want the situation to be you want a designer to design it you want a developer to develop it. And then there’s sometimes there’s unicorns who can do both, but that is clearly, you know, developer who did the design kind of situation.

0:36:34
All right.

0:36:35
They could even add a guarantee

0:36:36
that if they mess up the next cut is on them. Yeah, there’s a bunch of different stuff that you could do. I never see we won’t mess up your shit on landscape companies. That is my common complaint. Good workers, but often destroy landscapes by overcutting, et cetera, I’d hire you if I saw that. Yeah, I mean, you know, let’s say you,

0:37:01
even if you kind of do what everybody else does, because maybe it’s a situation where it’s like, dude, I mean, it’s a lawnmower, like lawnmowers cut grass, okay? We’re not out there with scissors, you know? This isn’t like artisan lawn mowing here, okay. So then just talk different. Quit with all the corporate babble bullshit

0:37:23
and like use actual plain language and talk to them like a real person. Talk to them like they’re your friend or whatever. Use curse words. Whatever makes you stand out, just quit being like everybody else, okay. That’s like number one in all marketing and all business. Just quit being like everybody else.

0:37:41
Quit saying what everybody else says. If you’re not gonna do something uniquely different, at least talk different or something. Like, don’t come in and be like, yeah, I’m another one. I’m another one of those guys. That’s, it’s so boring. It’s a waste of everybody’s time.

0:37:56
All right, Zao Strength. Zao Strength. No-scroll test. Online powerlifting coaching. So this is a very literal headline, tells us exactly what’s going on right away. With the help of our coaches, you can achieve strength levels

0:38:11
you never thought you were capable of. We’ll talk about that more in a second. Coaching services, contact. So we got two calls to action here. I’m not sold on these two options. So we’ll talk about that in just a second. Then we have a very clean, very simple navigation up top. No drop downs going on, no mega menus. It’s just look, this is the stuff right here. This is where you can go.

0:38:40
Alright, well I mean we know where we’re at. We’re at an online powerlifting coaching website. So we, you know, the no scroll test has been passed because we know exactly what’s going on. The one thing we don’t really know, there is one thing we don’t really know, based on NoScroll, is who this is for. Is it for that guy right there? That guy don’t look anything like me, okay? If I am kind of, like let’s say I do wanna get

0:39:09
into power lifting, right? First thing I would wanna know, if you look like me versus that guy is Like is this for like elite power lifters, or is this for like me you know? So I need to know who the target market is here, and then we can decide if this is You know I don’t know because achieve strength levels you never thought you were capable of I think this guy feels like he’s capable of Some more things you know so that copy doesn’t really speak to this guy necessarily. I think this kind of speaks to like more of the layman,

0:39:43
which now you’re gonna have to make sure the layman is comfortable, right? With what they’re seeing here. And I don’t know, like, you know, cause some people will be like, ah, this looks too advanced for me. You don’t want people to self exclude when you, when like that’s the actual person

0:39:58
you wanna reach, right? So you gotta make sure that that doesn’t happen. Let’s go down and see what our services are. One-on-one power lifting coaching, training app, coaching mentorship. All right, we got three different options here. We got learn more, sign up, learn more. All right, okay, testimonials, little carousel here.

0:40:18
I can drag it, I can bullet navigate it. Can I keyboard navigate it? I cannot keyboard navigate it. I don’t think, oh I can I just don’t there’s no indication that it was selected. Oh I see you guys see that little border right there? Okay we got to make that a little bit more obvious but now I can go left and right. Okay and then tab now I’m down here in this form. All right a little bit of improvement there to be done.

0:40:50
All right, what was I gonna say

0:40:51
about this double CTA section here? If I first arrive on the site, there’s really two options. Is it my first time visiting? And if it is, we need an option for that person. And then if I’m a return visitor, we need a more aggressive call to action. So the coaching services thing is a call to action

0:41:13
designed for people who are not first time visitors. They are re-arriving on the website. That’s the only people who would click that button. Nobody is gonna arrive for the very first time and be like, yep, I wanna go right to services, right? Unless they were referred to the site by somebody else,

0:41:31
they might do that.

0:41:32
Like, so they’ve been pre-sold, okay? So that’s, I guess, another bucket that they could be in. Now if I’m a first-time visitor and a first-time visitor typically wants to explore a little bit, wants to read a little bit, wants to consume a little bit before they make any sort of action towards conversion. So what you’re basically saying is coaching services or contact a first-time visitor doesn’t want to do either of those things. So you’ve kind of excluded the first time visitor with no options for them, right? What could this be? I mean this could be a

0:42:08
well you’ve got blog content, you’ve got a free program, maybe that first time visitor wants to check out a free program, okay. You could have more information on like I think this home page is a little bit sparse on like can I get more context? It’s like, you know, talk to me. What’s the narrative? What’s the story? What am I gonna buy into here?

0:42:32
Besides the like literal buying into things like services. That’s all you’ve really given me is services and testimonials. There’s no story, there’s no narrative, there’s no mission, there’s nothing for me to latch on to as a first time visitor. So I think we need to add a section in here of content, an intro of some sort,

0:42:52
put a little blurb with a video right here, make this a video, do something to give us more to chew on before we’re asked to raise our hand and sign up for things, right? That would be a big improvement to this homepage. And then if that’s all we’re gonna give them, if there’s really nothing else to link to here,

0:43:11
just drop one of these, just make coaching services the only option, then they can just scroll past it. But you’ve given two options, and neither one are for a first time visitor, it’s just, I don’t know. Improvements to be made. Let’s click on coaching.

0:43:28
Actually, let’s click on about. This is why I like about to be over here. This is the narrative of like, you have to go in order. It’s like, hey, here’s what we’re doing here here’s our mission here’s why we exist now let’s talk about how you can be involved in that see how that goes in order what you’re doing here is you’re putting the all the context at the end and you’re starting with the thing you know and so it’s just it’s a little aggressive

0:43:55
ok what does it mean to be strong for life strong for life means that hey we’re getting into some shit right here okay and we’re about to see I’m just gonna guess that once again we buried the lead okay we talk about that all the time what does it mean to be strong for life? Strong for life means that no matter the obstacles life throws at you you have the skills resources and psychological physical strength to adapt and persevere with the help of our experienced coaches you too can develop

0:44:23
strength for life. What we believe community that prioritizes the growth and development of athletes as individuals alongside their development as athletes. Our coaches believe the importance of applying the bio-psycho-social model as a foundation for athletes to build upon their journey towards strength and success. Okay, we got Jim, we got Tyson, and then we can learn more. Okay, this page is off to the right start. I would like to see this go a little bit deeper and say things that are, there wasn’t a lot that I really would just like

0:44:56
hyper connect with there.

0:44:58
We’ve gotta really sit down and figure out

0:45:01
why do people really get into power lifting? You know, because there’s like people who wanna just be fit and go to the gym and you know, that satisfies them. But this is another whole segment of people, right? A cohort, if you will. And so we need to really dig in. I mean, I would just start, every person that they have worked with,

0:45:27
I would literally reach out to them and be like, what caused you to go from just, maybe it was you were an athlete, maybe you were just fit and healthy, but what made you take the leap to go to power lifting? And what do you get out of power lifting that you didn’t get out of those other things that are just normal fitness, health type activities?

0:45:50
And then you’ve got to collect as many of those responses as you can, and you’ve got to look for the overlaps, right? And you’ll hone in on like three to five things that get said over and over and over again. Those are the things you’ve got to hit on. Help people understand why people make this transition into powerlifting and then explain what is going to happen to them once they get into it. CrossFit, the reason CrossFit went like wildfire, right, is because they create

0:46:20
there’s this lifestyle around it and so many people talking about, oh I know you’ve gone to the gym before but there’s this thing over here that you ain’t never tried and Here’s what you’re gonna get out of it and they had very specific like this is what we do This is we do it very differently This is what you’re gonna get out of it and bang it. There you go. Now it spreads like wildfire We need some of that in this website right here. Why power lifting versus other other things? Being strong for life. I mean, okay, it’s like, I guess a little philosophical, whatever,

0:46:54
but there’s not enough to really chew on. I need more to really chew on. Okay, training app, free program. Let’s check out our free program. The ZOW Strength Bottom-Up Powerlifting Program. Okay. This program is designed to help

0:47:10
beginner and intermediate powerlifters

0:47:11
learn how to make effective training adjustments to reach their goals effectively bottom-up training Means that your training is developed based on your current skill experience level training preferences and limitations Then as you train you’ll discover what you respond best to and the pro and the program will help develop based on that response By starting at the bottom and working way up. Okay, okay, okay All right All right, not not bad. It’s got some it’s got some like I would take the date off. Okay, let’s drop the date.

0:47:42
I like the bottom up concept because it’s not something I’ve heard before. And it sounds like it makes sense. And it sounds like it’s reasonable. And it sounds like it’s designed. Like somebody put thought and effort into it, right? You know, if it just said, hey, free program, go ahead, sign up,

0:48:04
they kind of branded it, they gave it a name, like the name is blue. They put some work and thought into that. So I like what’s going on on this page for the most part. I mean, it’s a very simple landing page. Definitely I would move this contact form up here next to the image. Let’s put that, the ability to actually fill out the thing

0:48:23
and get the thing at the top of the page so that people don’t have to scroll all the way down. Now, if it’s a sales page, you know, we’re gonna make them scroll all the way down because like you gotta read stuff, you gotta, there’s, you know, I really want to make sure you’re bought in before you sign up for this thing.

0:48:40
There’s not a lot of content going on here, right? We’re just gonna, we’re just trying to get the emails. Let’s put that at the top. I think you’ll boost the conversion rate on that page. I would drop the author off of here as well. That’s that. That page is fine. That page is fine. Training app. Okay. Oh, there’s a lot going on here. All right. I’m not going to get into all this stuff. I mean, it looks well designed. It looks like, you know, thought put into the cards. I think there’s a little bit of confusion here maybe.

0:49:16
This is about blocks, block one, pivot one, block two. Got a little bit of insider. If I’m just like, I don’t know what’s going on here, and I’m just kind of browsing through, I don’t really know what any of that means down there. I don’t know if I’m supposed to know what it means or not supposed to know what it means. All right, we got an app, how it works.

0:49:35
Okay, browse, join the team, payment setup, download app, add a program, get results. I don’t know if that, that doesn’t necessarily sound like it’s for a beginner, but you do have the free program. Okay, and I am just poking around real fast, you know, I’m not really spending a ton of time digesting. Okay, and then our coaching options.

0:49:56
So we got power lifting coaching, we’ve coaching mentorship. I really want to hit on this because, you know, there’s a lot of improvement that can often be done in like how we’re presenting the services and what services we’re presenting. One-on-one power lifting coaching, maximize your strength potential,

0:50:15
custom programming, then we have the training app. If you’re self-coached, okay, aha, see this? Okay, coaching mentorship, 12-week hands-on coaching mentorship designed to take your skills to the next level. You will learn. I would probably call these different things because again, like the training app is self-coached, right?

0:50:33
So you could think of the options as like, and it probably maps to how you’re gonna bucket these people but it could be self-coached. Here’s your self-coached option that we have for you. Here’s our beginner, like one-to-one coaching option and then here’s a and this is like a You know, maybe a month to month kind of you know, one on maybe one-on-one is month to month I don’t know because this one right here is a 12-week like that’s a commitment, right? So then it could be like 12-week program. So there’s like one-on-one custom

0:51:06
12-week program and then self coached right so because when you’re reading this one-on-one power, then I read training app. The word training app does not give me any context within this menu of options, right? And then I don’t know by reading the headline, how one-on-one power lifting is different from a mentorship. To me, like, I mean, it’s one-on-one, that’s like a, that’s a mentorship.

0:51:33
Like that’s, that’s the same thing. So I would improve these headlines right here, what you’re calling these services. All right, let’s go to the actual coaching. Because now I go here and I see different things. Here’s the mentorship again. But now I see power lifting code. Is this the one-on-one

0:51:51
that you were talking about a minute ago? So there’s a little bit of lack of cohesiveness in how you’re naming and talking about these things. And I know it makes perfect sense to you because you’re in it every day and you designed all the stuff but like I’m showing you the confusion that an outside person is going to have in trying to make a decision on all of these things.

0:52:13
230 a month, 275 a month, those are very close in price. Did we see how much the app costs? Is that free, is the app free? Oh monthly price $39.99 annual price $300, 14 days free. Okay, all right. Okay, yeah there’s definitely stuff to improve here on like the actual services, what they’re called, probably what their price, how they’re structured, just at a glance Let’s go to the blog. Let’s see if this this kind of business relies heavily on content marketing Heavily on I mean SEO can can really really really help a business like this

0:53:00
So I want to spend the last little bit of this Really a pity this photo doesn’t use transparency properly Oh, you’re talking about this one right here Hmm. I don’t know. I’ll get to comments in just a second. What is different site Kevin Geary? What does that mean? What does that mean?

0:53:21
Okay. See, I just want to check our chat here, make sure we’re all on the same page. And I will come and read these in just a second. Okay. All right. Awesome. Let’s keep going. So I wanted to spend the last little bit of this digging into what are they doing with content marketing what are

0:53:39
they doing with SEO because that is a make or break part of a online coaching business like this. Oh the app page is a different site. ZaoStrength it’s just a it’s a subdomain but yeah yeah I see. Okay managing training expectations with auto regulation and psychological flexibility. Okay, let’s just go over this so everybody’s on the same page of how a blog should work on the internet in 2024. There are pure SEO articles, right? And I explained this, I’m not gonna go find it.

0:54:16
I did a whole write-up on this in the Inner Circle, which I think is really, really, really helpful for a lot of people to read. You can go pure SEO, which is basically like we find a search query and we answer it with content. Very classic SEO content marketing, right? Then there is content where we’re just putting our ideas out into the world and there’s really,

0:54:40
I don’t care if it ranks, it’s not targeting anything in terms of SEO. And usually what you’ll see with those kinds of posts is there’s a lot more personality in them. There is, you know, where the SEO, pure SEO stuff is a little bit more academic. It could be stuff that’s much more shareable. And so there’s a couple different goals

0:55:05
you can have with your content. One goal obviously is I want it to rank. I want it to rank number one and I want to get all that search traffic. Another goal could be I want it to be shared very widely. I want to say something that’s super valuable or super controversial or super this or super that and immediately when people read it,

0:55:23
they’re like I just got to share this. Like other people have to read this, right? So you can go for shareability, you can go for rankability. And then there’s the holy grail, which is like you nailed the shareability and you nailed the rankability all in the same piece of content.

0:55:38
So when we grade blogs like this, we’re looking kind of like where does this land? Is this obviously going for an SEO thing? Or is this obviously going for a shareability thing? Here’s the thing, or is it the unicorn that achieved both? Sometimes, there’s a fourth option. What’s the fourth option? It didn’t hit any of these.

0:55:59
It’s not, it’s boring, it’s not shareable, it’s not hitting anything in terms of SEO, so it’s a fucking waste, it’s a waste of time. Don’t write that, don’t spend your time writing that, okay? That’s kind of how I grade or evaluate like blogs and then YouTube channels and things like that, right? Okay, so let’s click on this one.

0:56:19
Managing training expectations with auto-regulation and psychological flexibility. Already off the bat, it feels very academic-y, right? It feels very, I haven’t, I’m gathering that there’s nothing going on here with SEO, but then I’m also like, mm, it feels a little bit, unless your brand is like, you’re the fucking scientist of this genre, right? And people expect that from you,

0:56:43
then maybe that kind of thing will work, but I still think this headline could be improved. The impact of training expectations. Another thing we look for is formatting. Okay, check this formatting out. Not bad on the formatting. Small paragraphs, easily digestible. One thing I would say is a little bit of a problem here is the width of this. This is where you know we come in with you know talk about character widths and the average character width and things like that. I think you’d be much better off,

0:57:17
now we have to center this, okay? It’s now off to the left a little bit. And maybe we can just pop a margin inline on here and it depends on how this is set up, yeah. I mean, we’re gonna lose the top up here. But this kind of column of text is much easier to read. And then you can do different things with like breakouts, content grid is fantastic for this kind of stuff.

0:57:35
But here is the big problem that I’m not seeing. You know what I’m not seeing? And this already tells me we’re not checking SEO boxes, right? I’m not seeing any bullets, I’m not seeing any bold, I’m not seeing any links, there’s no external links, there’s no internal links. So there’s a lot of box, there’s no images,

0:57:55
there’s no videos, there’s a lot of SEO boxes not being checked here. But then these are also just general like UX article like article user experience boxes very very few people you’ve got to be like fucking obsessed with Power lifting right to read this is like I’m back in college. You know it’s like thankfully the paragraphs are kind of short So it’s a little bit more palatable, but you’re asking people to read very far left or right. Scannability is a big problem with wide text.

0:58:30
Okay, and then there’s just not any visual interest. There’s no images for me to latch on to. There’s no videos for me to watch that are supporting. There’s no links to things. There’s no bold lists, nothing, right? It’s just heading, heading, heading, paragraph, paragraph, paragraph, okay? So we can improve the readability for sure by adding a lot more formatting stuff into these posts.

0:58:51
Okay, here’s a much better article concept, right? The new IPF bench press rules may kill the sport of powerlifting. Now, kind of, okay. Everything is dead on the internet. I don’t know if you guys knew this. Like, SEO died 7,000 times. PPC, Facebook ads, these things have died you know 42 million times now. You know, websites, this version of web design, WordPress. I mean my God how many times have we put WordPress in a grave? So many times, not me but

0:59:28
other people. Right, so you know kill the sport of power like this a little bit a little bit outlandish okay. So you know but at least it’s like, hey, take notice. You may want to read this, okay? It does kind of draw people in here. Okay, but still, we got some spacing issues, right? Some spacing issues going on here. Feels like heading into another heading, form a giant gap right here.

0:59:56
Oh, what is this? What is this? Just a blank paragraph. Yeah, not a lot to chew on in terms of the formatting. So this is suffering from a lack of formatting right now. It could be great content. We’re not, obviously, we’re not gonna sit here and read it and grade the actual content,

1:00:14
but I’m just talking about from a formatting and UX perspective, there’s a lot of formatting work to do. And I’m telling you right now, if you have really good content, people won’t know if your formatting sucks or is boring because they won’t read it. You can make people read the content by just great formatting stuff.

1:00:34
So I would say to definitely take the time to improve that. Some people, I’m not saying that’s going on with this website, but a lot of people do have the like, well, my content is just so fucking good that I can format it however I want. Like, no, you still need to put in the work to really format it I don’t see anything obviously SEO here right how to recover from pain and return to competition this could potentially be Be a little bit SEO related

1:01:01
See this one has like some giant block quotes in it to break things up a little bit and at least Create a little bit of visual interest More of that kind of stuff more of that kind of stuff. But how to recover from pain and return to competition. Fails on the SEO front because there’s nothing specific here. SEO is about specificity and when you have how to recover from pain. Okay, we’re in the power lifting context, but the phrase how to recover from pain applies to a gazillion different contexts.

1:01:38
So from an SEO perspective, it’s dead in the water right there because there’s nothing specific in this. Now you would say, well and return to competition. That’s the specific part. That’s not specific to powerlifting. And now I kind of explain it like this. If Google doesn’t know exactly what you’re talking about, they’re not ranking you. You’re done. They don’t know where to put you. They can’t even rank. They can’t rank it. They don’t know. They don’t know what it’s about. Now you’re like, well, I mean, we talk about powerlifting on all this other content.

1:02:08
Okay. The headline is super important. Then you’re going to have, you know, click through type stuff. What’s the title? What’s the title of this page? How to recover from pain and return to competition. So you’re not calling out powerlifters. You’re not, we’re not talking about powerlifting.

1:02:24
Powerlifting is not even mentioned. It’s this is dead in the water from an SEO perspective So now we could do you know, you could go to a truss here We’re gonna get out of here in just a second and move on to our second segment Because I think we’ve done enough here with this with this particular website But I would do something like power lifting pain And I would do a search here so now I’m just showing you like what an approach might look like one keyword is not indexed okay we’re just gonna do matching terms anyway I don’t really care okay as powerlifting one word or

1:03:03
two powerlifting verse power lifting okay powerlifting first weightlifting pros and cons powerlifting powerlifting sorry powerlift it looks like one word is the predominant usage here. Okay, so power lifting. Let’s let’s just simplify this. Power lifting recovery. Let’s tackle one thing. Okay, not a lot there. Power lifting pain. Not a lot there. Let’s go with power lifting. Okay, let’s just start. Let’s start from scratch. Okay, here we go. Now we see. All right, let’s see what some options might be. Mm hmm. Mm. Oh, if you’re Ecom, powerlifting shoes, powerlifting belt. So if you’re if you’re going to have

1:03:53
an Ecom extension to this kind of thing, there’s some some stuff powerlifting singlet, powerlifting versus building. Okay. Low competition, it seems at first glance, good volume, good traffic potential. I would, I would absolutely, I mean, so we can go, here’s how you can tell, like, has a site done their SEO homework, has a site, you know, where, where do they stand? Okay, so now we go back to our client, we go zao strength.com, and then you do powerlifting, verse, let me make sure I spell it right so we’re grading fairly, all right, zero results. So we have not published an article on what is the most obvious, if

1:04:46
you’re doing SEO research, the most obvious first article or first piece of content to publish, right? Because it’s like, man, I got good traffic potential. I’ve got what appears at first glance to be fairly low competition. We could take this exact phrase and go search for it and see who’s coming up. Okay, Healthline, NASM, they’re going to be hard to beat. Reddit’s in there. But this is still content that you want, you know, your opinion on, right? You want to put in because there may be maybe not everybody says the same thing about this stuff Throw your hat in the ring with this. There’s a kind of an alpha progression. I don’t know how big they are barb and tough raps This is the case where I’ll just tell you right off the bat where hrs is dead wrong Okay, this KD score right here dead wrong. This is not a six. Okay, and we can actually look at this in this chart right here.

1:05:38
Let’s take a little bit of time. I think people get value out of this kind of content. You see these lines at the top? This is the position history for the top of what appears to be three or four results here. They are effectively locked in. You’re not beating. This is the last two years of data.

1:06:00
The same site, blue, orange, green and there’s another darker green in there too. Those four sites right there Healthline, PowerDot, VeryWellFit, Bodybuilding, you’re not beating them. You are not going to be in the top four no matter what you do. I don’t care how well you SEO optimize, I don’t care how many backlinks you buy, you’re not beating those four right here. Nobody’s beat them the last two years. They are locked in but look at these see these big streaks of like people coming in from out of nowhere

1:06:32
into the into the spots and then sometimes falling back off that is a signal that there is room in the top 10 ok so you could rank six seven eight nine ten you can rank and that will get you traffic that is a valuable spot to rank in for this kind of thing so it’s that tells me you know they’re not all locked in so I

1:06:52
would definitely go after it but what I do know for sure is this is not a fucking six easy hrefs okay this this number is wildly out of out of control okay this is nowhere near a six but it’s not impossible so you write good content you do all the right stuff you could be in the bottom here but you’re on page one that’s good so that’s kind of how you would further analyze a keyword like this. And then I’m also looking at the kind of content. Look at this, article, article, article, article, article,

1:07:22
no YouTube, I don’t see any YouTube listings right off the bat. I would, here’s what I would do, I would write the article, immediately go record a video on it, then I would embed the video in the article, I’d link the article to the video, okay? So I would hit on the YouTube side of this 100% as well to try to help out.

1:07:42
Okay, so this is how you start this kind of like strategy and analysis for content. Let’s keep going and see if we find one more viable option here. Now, let’s just talk one more layer to this. Okay, so if you’re thinking in terms of SEO, you can also think in terms of shareability right. So what if you go and here’s how you break into the top spot. This is the difference between position 10 and position 5 because we

1:08:12
know we’re not getting 1 through 4. 1 through 4 is on lockdown by corporate America. Ok we’re not getting them but we might get 5, 6, 7, 8, 9, 10. How do I get 5 versus 10? Here’s how you get 5 versus 10. You take power lifting versus body building. Now I’m not saying this is the case,

1:08:28
but let’s say there’s a controversial debate about powerlifting versus bodybuilding, okay? So you do, as your title to your headline, you come in here and go powerlifting versus bodybuilding. So you just put the root keyword right there in the start of the title, and then you go some controversial shit, okay? Right here, goes here, okay?

1:08:54
So there’s an extension of this headline that baits people, right, into like, oh, what the fuck’s this guy saying now, right? And then if you actually say something valuable and important and different within the article, guess what happens? People go, oh, I gotta share this. This guy’s dead on right here.

1:09:11
Then they go share it, and then the shareability creates backlinks natural backlink, so you don’t go buy backlinks, fuck buying backlinks, you’re buying backlinks because you don’t know how to do SEO. Alright so you get the shareability going which gets the backlinks going

1:09:28
which then gets the rankings going. That’s the difference between ranking 10 for an academic-y type version of this article versus combining the shareability strategy with the actual SEO strategy of ranking, okay? Can’t do that with every article. Now, legitimately you’re like,

1:09:46
no, I mean, this is just gonna be an academic article. There’s not anything super like, you know, crazy to say here, it just is what it is. All right, well, just write it then, write it the way you think it should be written, and, you know, we’ll see where we end up. But sometimes there are ways to maximize shareability in articles like that and if you find them you got to take them you got to go after them.

1:10:11
Alright let’s come down with let’s see powerlifting meets me okay okay yeah I’m not seeing anything super exciting here best powerlifting program okay the other thing you can do is come in here and you can go so we can start to narrow to what would be good content to create. I like to do any word. I do why, I do what, I do where, I do how, I do is. These kind of modifier phrases, and then we apply, okay? And we show results here, and we see what spits out.

1:10:42
Ah, what is powerlifting? How to start powerlifting. Guaranteed I’m making this right here. Piece of content that has to be made. How to start power lifting. Okay. Um, let’s see, what is a good, Doug did the, Doug had to be get, look at that. It’s over and over again, how to get into it, how to begin it. Ooh, is power lifting bad for you? A hundred percent. I’m making that content. Uh,

1:11:05
how to train for power lifting. I’m making that content. How to de-load power lifting. Hmm. Hmm. I don’t even know what that means, but it sounds important. Okay, we got to make that content. What are dots in power lifting?

1:11:18
I’m making that content

1:11:20
Okay, let’s like see see what this kind of search just revealed It just took us into the article II kind of territory right because these are the kinds of words that are used in articles So that’s another way to filter and get right to some some golden nugget ideas. Okay all right well well I think we’ve given enough value let’s move on to segment number two we got to save time for the rest of what we have to do here. Let’s take a look in the chat and see what people are saying here. Is this helpful do you guys like this kind of like, okay, we’ve left the website and now we’re just deeper into like a strategy territory here. And the actual execution of what that looks like. Drop your comments, let me know. We will get to questions in just a second or not just a second,

1:12:18
in a little while, in a little while. All right, let’s see you so we change the time, okay, okay I’m looking for any comments on this site here in particular Hmm throwing shade Simon throwing shade here Programs page needs some spacing love free program page looks like a blog template. I agree. I’m looking forward to submit my first client website for the next time it’s an NGO for information and civic participation. Sounds riveting. Just kidding. Just kidding. Yes, submit please, please. What a before after a successful client

1:13:07
work. Look how buff you will be after Yeah, yeah, absolutely. Before and after on fitness sites are. Yeah, that’s a given. The image on the hero represents the statement, with the help of our coaches, you can achieve strength levels you never thought you were capable of. Doesn’t the image show the result of the promise right at the hero?

1:13:27
Yeah, I mean, that’s one way to look at it, but what I’m also, and we have this conversation all the time, sometimes that can be intimidating, and I’m not saying that one photo, okay, you’ve got to take it in context. If every photo is like that, I might feel a little left out as a beginner, right? I want to see people who look like me doing this thing.

1:13:48
Right, and so you got to sprinkle some of that in, you got to make sure those people aren’t left out in the visual diversity department, right? So I’m not saying that image alone is bad, but unfortunately it was like the only image on the, it’s like the only thing we can chew on. Personally, I don’t like that they’re embedding mailer light forms.

1:14:09
I’d like to see even the bricks form with an integration. Yeah, absolutely. I’m not a big fan of that. It’s a technical thing. Some people aren’t technical enough to, you know, figure that integration kind of thing out. I wouldn’t trust myself if my spotter was just on Zoom, but I’m not in the target market. It

1:14:28
looks like it looks like a brick site. Okay. All right. That guy scares me. Okay. All right. All right. And then we’re back to the other site. All right, let’s move on. So here’s what we are powerlifter would want strength results, not how buff they look. They don’t care about looks. Yeah, that’s a good point, Rob. I think I think you’re right there. That it is more about the strength side of things and the performance side of things and so on.

1:14:57
Okay, let’s go on to segment number two. So we’re gonna close this stuff out. Let’s go local, let’s open a site and let’s talk about what we’re gonna talk about here.

1:15:10
Close this.

1:15:12
So segment two is going to be radius. We have a discussion here about how we’re handling two different things. Number one is radius. And number two is concentric radiuses, radii. Is it radii or radiuses? You will never catch me saying radii, all right? So don’t tell me that’s the right thing

1:15:32
because I’m rejecting that at face value. All right, we’re gonna go to pages. Let’s get a sip here. And we are going to open and start and start talking about this.

1:15:45
Okay.

1:15:50
Let’s give you guys some context as to what’s going on. What we’re going to be doing in this live segment is frame working. This is what frame working looks like. Okay, we’re not working. We’re not doing client work. We’re frame working. We’re working on our process. We’re working on efficiency, scalability, maintainability.

1:16:09
This is the life I live constantly as the developer of a framework, right? So I’m going to add a card. Let’s go ahead and do a div here. And we’ll just call this radius card, radius card. Okay, and we will put some text in it. We don’t need much in it. This is a radius card.

1:16:29
Okay, and this is gonna be our text. And what I want probably, let’s go wrap with block. And we’re gonna have like an inner situation. There’s a bunch of different ways to do this, which is part of what we’re gonna have to talk about. So we’ve got radius, inner, and then we’ve got text. Then I could potentially auto-bend these things. So radius card inner, radius card text.

1:16:49
Let’s go ahead and apply these classes so now I have classes on things let’s go to the radius card itself and let’s add a little bit of padding here all right let’s go with M and let’s put that on all sides and then with our inner I think we can put some padding on that as well so let’s go with M on that on all sides. Just kind of getting set up here. Alright on our radius card outer let’s just drop in any color. Let’s go background light. Okay I think that’ll work. And then on our inner we’ll see if we have enough. Let’s go with like white. Okay and then on our page here let’s go with a BG of… I just want to make sure that we can see this

1:17:41
with a little bit of contrast,

1:17:42
so it doesn’t look like a complete cutout scenario. BG, what just happened there?

1:17:47
Let’s go right click. BG, did I misclick it?

1:17:50
Okay, now that’s interesting.

1:17:51
Bang, oh no, it’s working. Okay, now that’s interesting. Bang, oh no, it’s working, it’s working, okay.

1:17:59
I don’t know what was going on.

1:18:00
All right, let’s preview this on the front end.

1:18:02
So here’s our radius card.

1:18:03
We’ve got an outer, we’ve got an inner. I’ll fix the inner if you guys can’t see the inner well enough in just a second. But what we wanna do is first talk about our radius system. Right now on radius card, what you could go down and do is you could go to border and you could go to radius and you have all the T-shirt sizes to choose from, right? It’s like do I want an M radius? Do I want an S radius? Do I want an XS? Do I want an L?

1:18:32
Do I want an XL? And you can put it in. Let’s put in an M and then let’s apply that to all sides. So there’s your radius M. And now we’re gonna get, actually I want to make this a color. Let’s let’s go make this a color. So make it obvious. Let’s do action. Let’s just do action. It’s ugly, right? It’s ugly, but it, you know, we can see what’s going on here. All right, so the first thing right off the bat is I don’t like the fact that we choose radius M, because if you think of a typical website, on a typical website there’s just a radius. Like, for the most part, the same radius is used everywhere. I mean, the concept that you would have like images with a large

1:19:15
radius and then cards have a small radius and like it’s starting to feel very janky isn’t it? It’s like what’s going on here? There’s no consistency on this website. So to me you just have a radius like there’s a site wide radius and then some sites have no radius on anything. It’s all it’s squares and so you could just set the radius to zero at that point. So right now what we effectively have and let me go and where’s the best way to do I guess we could go up here let’s go to themes no let’s go to page settings custom code okay so what we have is radius XS we have radius S we have

1:19:52
radius M this is the argument that I’ve been making and this is why we’re I’m getting ready to make this adjustment but we have to talk about the adjustment radius XXL all right first of all to me. That’s too many options We don’t need all those options, and I hardly ever use all those options. I mean once you use one You don’t really need to worry about the other ones all that much right I guess it’s good to have them and if you look in automatic CSS. They’re based on a scale Okay, just like everything else so if I go to

1:20:22
back here and we look at the radius system, you have a base radius. That maps to M, radius M. The rest of the sizes are generated based on this scale. So L is 1.5 times bigger than M and XL is 1.5 times bigger than that and so on. And then the smaller sizes are down from there by 1.5. You can change the scale that changes all the sizes you can change the base all right, but still This I don’t like it It doesn’t feel good because this is not how I work and this is an example of like this was the original radius system and

1:21:01
then we actually Look at how things work in the real world and we end up making adjustments to some parts of the of the framework, right? So to me you just need this. This is all you need right here. And so if I am going to add a border radius to a card, I would want to come down and I would just want to add the radius. Just that’s it. I know what else do I need to say about it. It’s the radius for this website. And this brings up another conversation of like you’re working from project to project to project. If there’s only sizes available, I have to know what the answer is.

1:21:38
Is this site using M? Is this site using L? And now what I have to do is I gotta stop what I’m doing and I gotta go look at another object that has a radius on it. Oh, what’d they use there? Oh, it’s an L, okay. And now I’m back to using L.

1:21:52
Why? Why do I have to look that up? Why do I have to know? Why do I have to care? I don’t give a fuck what radius they’re using. I just need a radius. Can you just give me a radius? So I think my argument is the word radius is way better.

1:22:07
It’s just this, that’s the radius. Okay, now that can map to M or L or XL or whatever it needs to be. So what I’m proposing is this value right here, the base radius just maps to a variable called radius. It also maps to radius M because we already have that, but that’s just a, you know, it’s neither here nor there.

1:22:29
We would instruct people to use just radius, that’s it. Just use radius everywhere. Then you can still calc your radiuses if you need to make a small adjustment or whatever. So I think that’s what I’m gonna do, 100%, is we’re just gonna have a radius variable. And this is what we’re in, like in frames. In frames, we use radius everywhere.

1:22:49
That’s all we use. It’s not card radius. It’s not this radius, that radius. It’s not MLXL. It’s just radius. And then if you’re on a site where everything is a square, you just go to your base radius and go zero. I don’t need it. We’re not using radius on this site. Okay? Now there’s situations where maybe some things would have a radius, but other things, I don’t know it’s that still feels a little janky to me but it’s not an overcome it’s not a situation that can’t easily be overcome by radius because the fact that this is a generic token means

1:23:26
that on any element look at how it’s not even defined right now right that’s why we’re looking in a square there is no value defined currently for this now if automatic CSS to find a value that would be one thing. I hate how this jumps around. They got to fix this section up here. All right so we’re gonna go we’re gonna define this. Let’s go of one rim. See now it is defined as one rim but this is defined at the root level. This is like what automatic CSS would do. But then I’m on a card guys, radius card with the specificity of this class is not going to stop me from just coming down here and redefining the value.

1:24:04
I mean if I really care and wanted to have a different value, I would just redefine it. Right? So now it’s been redefined at this class level for this item and it has a new value. Which is that’s the great thing about tokens. So there’s nothing stopping you from still having all the infinite flexibility. You could even just map radius to radius L or XL or XXL. Right? There’s nothing, there’s no loss of flexibility. You could still do whatever you want, right?

1:24:36
So that’s what I am proposing as the first primary change. Let’s get rid of the t-shirt sizes and just have a radius. That’s what you have. That’s what you use. And it makes it super easy. Okay, so the next problem that we have to solve is concentric radiuses. If you don’t know what it,

1:24:57
because we’ve been thinking about like, it’s ideal if you’re using radiuses to also use concentric radiuses in situations like what you’re seeing here, which is a nested radius, okay? Where we have an outer radius and then we have an inner radius, all right? So, how do you, first of all,

1:25:17
we need a variable for this, right? So we would come up here, this is our thinking, the start of the thinking process. And I’m doing this live because this is not, this has not all been mapped out. We’re having this conversation live. Concentric radius, right? And the question now is what is the value of that going to be?

1:25:36
Okay, well, I’ll tell you how concentric radiuses work. They’re a calculation based on your base radius, which we now know is just going to be radius. Plus, and this is the hard part, the padding of the container, or really what amounts to the space between the two objects. So this white space right here should be added to the radius of this inner container right here. And let’s say just to make this very simplified, I’m going to take out space M, okay? We’re going to make this padding 10 pixels, okay?

1:26:18
I’m just, we’re greatly simplifying this. Let’s make it 20. So there’s 20 pixels of padding in this object right here. And now I’m going to go back to page setting. Here’s the bug I’m gonna tell you. Look, you see I can see the code right there? Watch this. I’m gonna click on it.

1:26:33
Can’t see it anymore. It’s gone, it’s gone. Come on, Bricks. Come on. What are you doing to me? Make me scroll up every single time. And I can’t tell you how many times I’ve started to write CSS in this box

1:26:44
because when the box is blank, you don’t realize it just scrolled it up on you. You start writing CSS and header scripts oh my gosh okay we got to fix that so radius plus 20 pixels is our is our concentric radius value and let’s just let’s just simplify now we’ll just leave we’ll leave I think you guys can get this radius is there radius is here okay so radius plus 20 pixels so now what we have to do is we have to apply the concentric radius here.

1:27:18
Okay.

1:27:18
Concentric radius gets applied to the outer item. And then the inner item actually gets the real radius.

1:27:26
Okay.

1:27:26
This is the actual real radius. And that is the effect that you get.

1:27:30
Okay.

1:27:30
Now, if there was a lot more content in this card, it wouldn’t look, like, I get, that looks terrible. You’re like, I don’t even know what’s going on. But if this was a real card with real content, like you would see, just look up concentric radius, right? You’ll see bunches of examples for it. Okay, and let me make sure our screen sharing is still going good.

1:27:54
I haven’t even checked on viewers. Wow, we have a ton of viewers today, okay. For a normal WDD Live, this is good. All right, so let’s go back to frameworking, problem solving, thinking, calculating. All right, where did this 20 pixels come from? We know we can’t use magic numbers. You can never use, none of this works with magic numbers.

1:28:15
Okay, all right, so this needs a token of some sort. What is the token going to be? Well, it’s the padding, or it’s the space, or it’s the, could it be margin? Is there a situation where it could be margin and not padding does padding always make sense I? Don’t know I don’t know the answer to these things so we could say that it’s just space Right the space between the two elements the outer element and the inner element all right Let’s let’s let’s go down that road for just a second the space. So now, and this kind of makes sense because you guys know that the

1:28:54
variables that we use here are space variables like L, XL, whatever, okay? So what I need is I need this to be space. And then I need to define space somewhere, right? Which we right, which we can obviously do way down here. And this is one knock on every single page builder. The fact that I cannot define local tokens. Guys, what are we in? What is this, 2018? I mean, why don’t we have a workflow yet

1:29:29
for defining local tokens?

1:29:31
It’s another good question, I feel like we should ask. Let’s go to space M. See what happens when I define the local token? Now what I’m doing is I’m giving the concentric radius the knowledge that it needs to do its work. All right? So now I’ve defined space as space M. What I have to do is I have to come back up here.

1:29:51
Let’s go with, we’re getting a little lost because you see how I’m having to bounce around like 80 different areas. Like, oh, go to the custom code on the page and do this and that. Okay, so we’ve got radius, concentric radius is and then we may run into what I call like an encapsulation issue. We’ll see in just a second with these variables. So we have radius plus space. All right let’s go back here and see where we’re at with our border.

1:30:22
Okay we’ve got our concentric radius is struggling to calculate right now. Then we have our inner radius. Also, we’re not helped by having to go to the inner thing to edit the inputs there, to the outer thing to edit the inputs here. And this is another problem that I’ve highlighted with page builders is if you know how to write CSS,

1:30:45
you’re way better off writing CSS than using these inputs. Going and finding inputs, going from element to element and into the panels to find their inputs tremendously slows down workflow, and it spreads out all of your work. All of your work is littered all over the place, and it’s hard to keep track of what’s going on and where it’s going on. Now, let’s back out and we’ll go to the next segment of this,

1:31:10
which is there is a new feature in Automatic CSS 3.0 if you’re not aware, called Recipes. And my thought was, because you can’t just have a concentric radius variable and everybody’s happy, because if we look at it, obviously, the concentric radius variable has a value that it needs to know, it has information it needs to know. The user has to tell it what the value of the space is.

1:31:37
So how do we manage that? Well actually this concept of recipes is a really really good way to manage that and a recipe is basically a something like a concentric radius all right and I have a video on it in fact let’s go to let’s go to the community real quick I want it’s a very very short video but if you haven’t seen because I can’t actually show you the 3.0 branch that it’s in. 3.0, let’s look for recipe. Okay, yeah, there’s the, well, there’s documentation on it. You can read the documentation if you want to.

1:32:11
Let me see if I can find the video. There’s like a little loom that I did. Let’s go, recipe, or what did I call it? I called it, was I still calling it expansion at the time? We won’t look too much for this. Problem with the var, okay. Oh, I did do, maybe I called it sneak, like sneak peek. Oh, no, no, no.

1:32:36
Why aren’t these in date order? There’s no way to order these by date. Come on, or what’s this called, circle? Okay, bricks, come on, first thing we need to do is form, Circle. Okay. Bricks, cones, first, C, W, form, sneak peek, hidden, generate, UI style guide. Okay.

1:32:55
All right.

1:32:56
We won’t look.

1:32:57
Oh, kind of, is this it? I think it’s this one. 3.0, kind of. Grid, sneak peek, sneak peek, contextual, color.

1:33:04
Okay.

1:33:05
Okay. Alpha group, alpha group. Okay. All right. Here it is. I think this is it. Okay. Let’s watch this. Everybody wants a sneak peek of

1:33:16
automatic CSS 3.0. This is a it’s it’s technically I mean, technically, this is a sneak peek of automatic CSS 3.0. Can you guys hear that? Recipe was on Facebook. I know. Okay. Did the da da da. All right. Um, can you guys hear this? Just tell me if you can hear it so I can play it.

1:33:41
Can you hear it?

1:33:41
I’m waiting.

1:33:42
There’s a stupid 15, 20 second delay for YouTube. Okay. I’ll give you a sneak for this feature. Right, of thing based on, or you can do, to do is I would come up here to the utility classes and I would do something like call count two or three or four,

1:34:02
or you can do a call width, right, of L or M or S or something. Okay, you get what’s going on here. We use utility classes, yada, yada, yada. Okay, but if you don’t wanna do that, if you wanna assign these things to custom classes, there’s no way to do that. It’s not physically possible, right?

1:34:18
So I’m showing how you can, I’m showing the concept of mix-ins. I’m just kind of getting us through this video. All right, let’s go to maybe this part right here. Let me take all that out of there. So this, okay, and this is the feature, guys. This is the feature. So variable expansion and validation,

1:34:37
I’m just gonna take a little pit stop here, just so everybody’s on the same page. We can do things like this. Let me take all that out of there. So we have something like color, and then if I do double dash action and then hit a semicolon it auto wraps it right that’s called variable expansion we have calcs where you could do font size all right and you could say I want to do text L times 1.1

1:35:08
and then when I hit semicolon bang it wraps all of that. So now, again, I’m thinking in SAS MixedNets, I want the recipe. See, a normal variable is you’re just getting a value for something. No, no, no, no. Now, now, I want the recipe for something. Not the value for something, the recipe for something. At columns.

1:35:34
And when I hit the semicolon, just like I do with all other variable expansion. This is now utility expansion gives me, guys, the recipe just right there, attached to my custom class, just like a mixin works. Now it does have the downside, a mixin stays wrapped. Okay, so you guys get the concept. So this is how, and we can do this with clickable parent,

1:36:02
we can do this with focus parent. I show how to do this with colors. So if you want the action color, but you want the actual HSL string with the partials in it so that you can make a custom transparency. Okay, all of that is coming to recipes. There’s gonna be shareable recipes. So you can share, like I can,

1:36:19
anybody, any user can share a recipe with another user and they can just import it into ACSS it’s going to be really really really good. Now we can close this video. So what we need to think about with this radius situation, the concentric radius situation, and let me get all of this out of here. All right so border, radius, okay we got to clear all this out because this is not, you don’t want to be in all these panels doing all this stuff. Okay so the inner is cleared, let’s get the outer cleared, okay let’s get that out of here You don’t want to be in here. You don’t this is not the life you want to live. I promise it’s it seems like it’s Really user-friendly like us doing it’s writing the CFS for now. You don’t want it doing that. Okay. All right

1:37:05
Let’s get this out of here. I think we’re starting from scratch now Alright, we’ll leave the background colors and that kind of stuff. Okay. So now we want to think about authoring the recipe. How do we author the recipe for concentric radiuses? Which would be something like this. I go to my parent element, my radius card, and I type in concentric radius and I hit a semicolon and it just bang the recipe pops into the screen. And then I’m good to go, right? It’s doing all the heavy lifting for me.

1:37:35
Awesome, okay. So what we’re going to do is start to author the recipe now So what I need is my root which is the radius card that’s going to have the padding right of var space Okay, and then I’m also going to be what I like to do is you could do this in the same root Root selector, but I like doing it in multiple root selectors because it feels more organized to me and like compartmentalized. So I’m compartmentalizing the local variables from the code that’s actually running the instructions.

1:38:09
So I would do something like space and then the user maps this to whatever they want the space to be, like space M. So you see that spacing come into play. But I’m taking this generic token because my concentric radius variable is going to be looking for that, and it’s going to look to reference that. All right, so we have that there and then in my inner, so I want to come down here. And the only reason these recipes are even possible is because of this dynamic

1:38:36
root selector. Because we don’t know what your classes are going to be called and all that stuff. But we’re able to just reference them, which is really nice. All right, so we have the root inner. This is going to be padding. And you could make this be whatever you want. This does not affect the, the only space we need to know the value of is between the two elements not inside this inner. Whatever

1:38:58
is inside this inner it doesn’t matter to us, right? Okay on the parent we have a border radius of concentric radius. Con-cent-ric radius. Definitely have to make sure you’re spelling these things right or your shit will not work And then on the inner we’re gonna have a border radius of VAR radius Okay, so that’s like my real radius and this is my concentric radius and then I can even give the I don’t even know If we need a global concentric radius variable, we just give it to people within the recipe, right? So let’s go with a calc and let’s do VAR and we’re gonna take our normal radius and we’re going to add our space right and that is the concentric radius right there. Okay and now I think the only challenge

1:39:50
here that you know we’re going to have to probably comment in okay is target your nested radius element right. So we got to kind of give instructions with these recipes I don’t know if element, right? So we got to kind of give instructions with these recipes. I don’t know if you saw that in the quick You know glimpse that we saw the feature actually working, but the recipes come with instructions, which is really nice It tells you if you need to change anything down here like for example Do we know that you’re going to call your inner thing inner or that you’re going to use BIM? No, I mean, we don’t know what you’re going to do with that inner thing. So target your nested radius

1:40:28
element. So we give you a sample but then you may have to go change this little line right here. Everything else is done for you but this is why you’re calling for the recipe because like you need to make it it’s like hey you know what I like a little bit more sugar in my recipe. I like a little bit more butter in my recipe. Okay now you now it’s up to you. You got the recipe but now you’re free to make whatever changes you want to make, right? That’s another value of the recipe. Okay, so I’m thinking that like this line right here,

1:40:58
I don’t think we need an automatic CSS, an official concentric radius variable. I mean, we could map it to this automatically, because what if this was already mapped in the global style sheet? Like it didn’t need to be here and this all still worked. Would that be better?

1:41:18
I think maybe that would be better. So maybe we do something like that. But it would force you at that point to use the word space. So we all have to come to an agreement that this makes the most sense to use to describe the space between the two items. This is where we need like feedback, this is the kind of conversations we always have to have, you know, because you could

1:41:41
go a bunch of different ways with this. And there’s going to be people with different preferences. Now, we don’t have to nail it too much. Because again, you have the recipe, you can change the recipe if you want it. Here would be like, this is the parent element. Okay. Parent element, and I’ll say parent element gets concentric radius, target your nested radius element and use base radius. Okay, so kind of explaining to people how this all works. Okay, this would be like set up concentric radius tokens. Yeah, something like that. So this is kind of what the recipe would print when you ask for it.

1:42:22
Okay. Let’s see what this question, then we’re going to go. I think this is enough for now. It’s free. It’s free for all. Put in your comments. I mean, what are your thoughts? What are your thoughts on this?

1:42:33
Does this make sense? Would it work like this? Would you, would this recipe be valuable? Let me know. And then we’re going to hop into questions. All right. Um, might I propose a duplicate recipe that goes from outer to calc the inner for those of us who want to work outside to inside for consistency,

1:43:01
concentric outer plus concentric inner. The problem with concentric inner, we were talking about this in the, in the chat beforehand, but our internal chat is going back to the concept of a website having a radius, right? A radius that we use over and over and over again. The inner is the radius you should use everywhere. That inner radius should be the radius that’s used everywhere else.

1:43:29
The only radius that’s different is the concentric radius, which is the outer radius. So to me, this is the only way that it makes sense to do it. You wouldn’t want to work backwards because you would end up with an inner radius that’s not like your other radiuses on the website. That’s the thing right that’s that’s the challenge. Sounds like I’m going to save time on using the builder and waste time dissecting the recipe I personally like the builder and t-shirt sizes. You can’t do this with t-shirt sizes. See we’re solving a challenge that’s not solvable in the current paradigm.

1:44:09
In the current paradigm, you have to know how a concentric radius is calculated. Then you’re going to have to go make variables for these things yourself. The idea that you doing this manually would be faster than a recipe is, I think there’s a lack of understanding of how this is working. You would never be able to do this from scratch faster than you can call for the recipe and even read these comments and even understand. First of all, if you’re calling for the recipe,

1:44:35
you already understand what a concentric radius is, right? And you would presumably maybe know how it’s calculated. But the fact that you’re gonna write the calculations, create the, like, I just had to create that token, I had to create that token, I had to go use these tokens. I had to mentally conceptualize that I’m going to do a root and a root inner and where to put what. The idea that you’re going to do all that from scratch faster than calling for the recipe

1:44:59
is that’s a no-go. That’s never going to happen. The recipe is always going to be faster and it’s always going to be easier. So yeah, I would say that’s not a thing, right? And the idea, you just saw me go through all the inputs the fact you’re going to click on various elements in here especially when this card gets even more complicated and and litter of this stuff everywhere and still make sense of it this makes the most sense everything’s right here in

1:45:28
one place you can see the relationships between things and then you could call it in a split second I don’t see how any other methodology would be faster than this right here. Yeah, I think yeah, this is correct. The outer radius equals the inner radius plus the padding is the only way to calculate. So you have to start inside out, you can’t go outside in. You can, I mean, you can go outside in, but again, you’re going to end up with an inner radius that’s different from all of your other radiuses on the site. Now you have a consistency issue. So when I wrote the

1:46:06
article if you haven’t read this article too I think this is good I think this is really good to do in general but now you’ll start to get an understanding of this article that I wrote. A CSS framework is required for maintainable web design. One of the key points that I make here is that you’re either working or you’re frameworking. You don’t, none of you get paid to framework. I get paid to framework, none of you get paid to framework, okay?

1:46:34
So the longer you spend sitting around thinking about this kind of shit right here, you are burn, you’re just lighting money on fire, right? It’s better if other people, someone else, does the frameworking part for you so that you can just do actual work and cash checks, right? We’re spending, I mean, we could keep going with this. We’ve already had discussions about, oh, we work outside in versus inside out.

1:46:57
Uh, maybe it’s faster to do this in inputs. Maybe it’s faster for the user to do this in something. How much, how much money are we going to light on fire?

1:47:03
Right.

1:47:03
Versus if this just is handed to you on a silver platter, like we already did all the thinking. We already did all the logistics. Now you just call the recipe and use it. That’s where the value of a framework really, really shines and comes in. Think about clickable parent. You don’t even know, I can’t do it right here

1:47:19
because this isn’t 3.0, but the idea that if I wanted this card to be clickable now, that I could literally come in here and change this to a link, okay? Now, obviously I can go clickable parent, all right? And then I put, you know, position relative on the card and I move on with my life. But that’s not assigned to a class and we’re not using components so this is a very dirty

1:47:47
way to do this right and you should not be a dirty person. I mean just try not to be in life in general just don’t be a dirty person. Don’t do that. Don’t do that. We need to assign whatever makes the clickable parent thing happen ideally should be assigned to this thing radius clap radius card right so what you can do now is you can come down here and say at clickable parent you could just call the oh god look at that it just worked I didn’t even know I don’t what branch am I in I’m just in a random oh shit I am in a

1:48:22
3.0 branch you I’m glad we have not actually shown anything, but this is good, okay? So you just saw the recipe just happen in real time. Look at this, begin clickable parent. There is all the recipe to make clickable parent. Now, the idea that you’re gonna study how that, you don’t even need to know how it’s done. Fuck it, just move on with your life.

1:48:44
There’s actually nothing you really need to do here. It’s just done, it’s a clickable card. And it’s removed, the clickable effect is removed for you in the builder. I mean, it’s fantastic. Look at that. I was like, I want clickable parent. There it is. Hey, you know what?

1:49:01
You know what I also want? I want focus parent. Focus parent. It helps if you spell them right. Hey, there’s focus parent right there. Look at these recipes I’m just bringing in. I want a clickable parent. I want a focus parent.

1:49:14
Look at that we can also see action color oh look at that my gosh you could just call that right in right there what if I wanted a custom action color transparency right and maybe I want to map that to a variable here okay so we’re gonna go we could actually define it on this route okay maybe I don’t want it to be global. Maybe I just want it, maybe I just want background color and I want to assign this transparency to this card right here,

1:49:45
but it’s a funky transparency, right? We have 10, we have 20, we have 30. No, no, no, I want 17 and a half, okay? Bev, Bev wants 17 and a half, okay? Well, there is no 17 and a half. There’s no action, action trans 17.5. This does not exist.

1:50:06
It can’t, that’s not, it can’t even, it can’t even work. But with the recipe, I can go do my action color. I want the partials. And now I just go 0.175 or something like that. That’s 17.5, right? I don’t know. But look at that. You see it?

1:50:24
Custom transparency right there. Let’s go, I want 27. Okay, there’s 27 for you right there. Let’s get rid of this ugly background and you’ll actually be able to see it. Look at that. Now, is that, I mean, you could know that there are partials and go, yeah, I know how to do this.

1:50:41
I’m just gonna write action H, then I’m gonna write, oh, see, I made a typo. Okay, I’m gonna do action, fuck all this. Why am I doing all this typing nobody wants to do that I want action color just give it to me right Bang there it is now. I can do whatever I want if I want to manipulate the saturation I could take this out put my own Saturation value in there. I want to calc the saturation I can go do that just fine, okay So that was action s and then I’ll multiply it by, I don’t know, 30%

1:51:17
or something like that, or 30, I guess, would be what you do, there you go. Ooh, that’s hyper, that’s hyper saturated. Anything you wanna do is open season now, right? And you don’t have to spend time writing the entire string with all the partials, you just say, I would like action color, please, and it gives it to you. And the idea that you can expose utilities like this

1:51:41
within a framework, this has never been done before. This is not a thing that’s ever happened or been available to anybody, okay? The idea that you can expose entire recipes from a framework, never been done before. Not something you can do anywhere else. So, and it’s gonna be insanely helpful. Now, the fact that you can create your own recipes,

1:52:01
think about that, the fact that you can share recipes, think about that, the level that takes things to, okay? It’s gonna get fun, it’s gonna get pretty fun. So that’s coming, if you guys wanna sneak peek, there you go, there’s a little bit. Now, you can’t see the real thing, you’re not seeing the thing, all right? So, you think there’s still a dashboard back there somewhere.

1:52:26
There’s no dashboard on this site back there somewhere, okay? But you’re not seeing the thing, right? You’re not seeing the goods that you wanted to see. I don’t even know how this is happening, honestly. I thought I switched branches before we started this. Well, and I didn’t. I thought I did and I didn’t. It’s sitting right, it says build 3.0,

1:52:45
right at the bottom of my screen. Okay. All right, well let’s get out of here before something bad happens. That was the discussion on Radius and doing a little frame working. Okay, yeah go read that article. I think that article is very insightful. Alright let’s go into Q&A, live Q&A here. Alright let me go search for the Q&A’s.

1:53:17
I’ve got to, before we move on, I’ve got to switch branches over here on this screen. Yes, we want to be in this branch please. Thank you. All right, let’s reload. Let’s reload this and this time we’ll actually do a check of, there you go, 2.81.

1:53:37
Okay. We’re safe. We’re safe.

1:53:40
Yeah, there you go, 2.81, okay. We’re safe, we’re safe. Safe from exposing 3.0, all right. Oh gosh, that was fun. All right, let’s go search for queues.

1:53:53
Queue?

1:53:54
Oh good, a lot of questions. Is there an ACSS solution for Bricks mobile menu? The top padding is not working well at my side is there an ACS a solution for bricks mobile menu it’s a disaster bricks mobile menu is a disaster bricks menu element is a disaster I don’t like any of them I hate them all we’re building our own hopefully with any luck we can make it better is it possible to create a dynamic accordion using ACF or Peter Fields? Yeah, absolutely.

1:54:29
If we get time in a minute and there’s no other pressing things, maybe I can run through it real quick. What time will be the YouTube series? Oh, you’re talking about the Mark one? It’s pre-recorded. So we’re gonna record it tomorrow and then I’ll probably publish on Thursday.

1:54:44
So hopefully Thursday you’ll have the first episode of that.

1:54:49
How do you land on the 1000 plus clients in my country clients

1:54:53
really aren’t willing to pay such hence how one can transition from local to international client? Well, I need to know what country you’re in. And there’s other things involved, you know, how well do you speak English? Are you, there’s a bunch of ways to get business

1:55:20
from other countries. You don’t have to get business from your country. But I do really need like, we’re just spewing hypotheticals if I don’t really have any other details. Possible tutorial on an accessible before after slider that winds up as a frames component, great for services pages. Yeah, I think we need to put that on the list. We need to put a before an accessible before after slider component on the list. Let me do that now. Let me let me go

1:55:53
to Jira here. I’m doing this on a different screen, so just bear with me. But I do I do think that’s a needed component. All right, Jira. No, I don’t want to do it now. Pop-ups, I mean, even in the apps, there’s pop-ups now. Killing me. All right, let’s go to frames components. Let’s go to new feature. No, actually, this would be, yeah, okay, that’s fine.

1:56:20
All right, so what we want is accessible before, after slider component. All right, we’re going to put that on the screen create. Okay all right that’s done. In the books. Okay we will revisit that soon. Let me get back to Ecamm here. Fantastic. How do we use I’m still I’m still sick I’ve still got this I’m pretty sure it’s COVID that I’ve had for like a week and a half and the whole family’s had it and then we’ve all had some sort of there everybody else been throwing up not me okay

1:56:55
I have an iron stomach and so I’ve also unsubscribed from a lot of things I feel like I feel like a lot of sickness is you you mentally or emotionally at some point like consent to getting sick I think people do this all the time so they they get sick a lot right I don’t consent I I’ve I’ve let the universe or whoever know, I don’t consent to your sickness. And I don’t get sick often because of that. Well, it’s more of a recent thing. But I’ve now been through the family being sick 3-4 times. I think these guys, they consent.

1:57:30
They must consent like crazy. Because I haven’t gotten it like 3-4 times. This thing finally got me, but the last 3-4 did not get me. And I feel like if you don’t mentally and emotionally consent, it really does help out your immune, like your immune system is, kind of kicks into a higher gear or something, I don’t know. It’s just a theory. Don’t quote me. Alright is online coaching in sports a normal thing?

1:57:53
There’s not much told of it. Okay that’s not a question for the Q&A segment. I’ve seen your post regarding office hours which will take place later on this month. You have more details on what date we can expect it to take place. It’s going to be, I’m going to be out of town next week for a funeral. So that’s that whole week. There’s probably going to be no WDD live. There’s going to be no nothing next week.

1:58:14
The week after that, I will probably be doing the office hours, I would imagine. And back to WDD at that point. Is there a best practice for circular do not don’t say radii don’t that’s that word is banned from our our vocabulary. Radiuses like transforming an image into a circle with a border why does 50% or 50 EM value sometimes make the image oval? Yeah 50% is going to make it oval. 50 VW usually makes it like a pill shaped instead of oval. I go with 50 VW for a circle or pill because it’s just more consistent than percent.

1:59:01
What Ahrefs plan are you on?

1:59:02
It’s not available, it’s a legacy plan. They don’t offer it anymore. I’m clutching it like I clutch my pearls. It’s like, no, I don’t wanna touch anything. I actually don’t even navigate to the account section because I’ve heard of them like auto upgrading people and like they want people off of these legacy plans, like ASAP.

1:59:22
And so I just go in and do my business. I don’t even go to the account section. I don’t even want them thinking that I’m considering a different plan because I’ve heard the new plans are not fantastic. Yeah, I’m on a plan that does not exist anymore. Why did you use loom and not the native Mac OS recording method because loom auto host the videos for me Will inner circle have another full site build once ACS s 3.0 is coming out

1:59:48
Not full site builds full landing page builds yes full home page builds yes, not full site. I’m not doing full site builds anymore. Might I propose a duplicate? Okay, we did that one already. Do you have a good example of concentric radius in use? Just go to dribble and type in concentric radius or something. You probably see a million examples. Can you elaborate on the latest 1.4.4 update from frames where the modal would be fixed? It isn’t as positioned towards the triggers off now and causing issues on mobile as well. I I haven’t looked at it.

2:00:25
So I need to look at it. Mateo and the rest of the team are handling a bunch of frames, those kind of frames updates. Okay, I’m curious what are those curly braces

2:00:35
at the bottom right?

2:00:36
Okay. I don’t know what you’re referring to. How can one query in a grid to show only custom posts with child pages in Bricks given that the hierarchical option is enabled. Hold on, hold on, whoa, hold on. Okay, how can one query in a grid? How can one, like how can a person,

2:01:04
like how can one like me, how can a person query in a grid? It’s hard to read these questions sometimes. How can somebody query in a grid to show only custom posts with child pages in Bricks, given that the hierarchical option is enabled. Oh, if you’re using hierarchical posts, how can you just query children?

2:01:25
Is that what you’re asking? Well, if you go to the inner circle and you go to probably Bricks query loop recipes, there you go, right there. How to query only children in a random query loop. Now there’s an example. Now Circle is, I don’t know what Circle’s doing sometimes. Like I’m in dark mode, so their dark mode code thing

2:01:47
does not apparently work very well. But there’s the recipe right there. That’s one way to do it. But I think you can also, you can use the default loop. I’m pretty sure. Any of these will work. Let’s go back to radius. Okay, so let’s go here. Let’s go loop, loop, doesn’t even matter what we’re looping. I think you can do child of zero. Let me see. Not nine. I think that’s one way to I would have to go back and test that again

2:02:29
But I think zero represents a parent and so you can do a child of zero I think that might might might work. It depends on the loop though, too But if you use this recipe right here You should be good to go Okay with the fall of quickly if you have to live in Gutenberg What would you move into your number two position, Guten Bricks or Generate? I don’t see Guten Bricks as another,

2:02:54
that’s not, that’s just, you’re using Bricks. And then you’re, it’s not a Gutenberg building solution. I said, there’s not like blocks, it doesn’t give you blocks to build with in Gutenberg. That’s really what people want, right? So Generate right now is the number one, for sure. And people ask for like cadence and let’s just do, let’s just do that.

2:03:15
Everybody asks me, they’re like, oh, I use cadence. What’s wrong with cadence? Why do you don’t support cadence? All right, you wanna know? Yeah, let’s go. Let’s go. Cadence blocks.

2:03:27
I think they have a demo.

2:03:29
All right.

2:03:29
Account login, pro features, buy pro, account login. No, where’s their, I thought they had a, there you go, try live demo. Let’s do this.

2:03:40
Launch my site. Okay, being directed to the WordPress admin.

2:03:44
Let’s just see, let’s just see why, why doesn’t automatic CSS integrate with cadence? And why do I not recommend cadence? Well, first of all, get all this stuff off my screen. I have no interest in any of this. Okay, yeah, I think we can, yeah, select multiples. Okay, there we go, we have a blank slate. Okay, let’s start out by seeing what we can add to a page.

2:04:14
So we’re gonna go here, here’s cadence blocks, all right. Oh, they have a section element, look at that. Let’s add the section element. Now let’s look at the section element. Womp, womp. There’s the first thing I look for right off the bat. Do I have an accessible inner container? Now can I add, what does this button do? Section? That doesn’t do anything. Okay, let’s go to here. And this is why I hate icon-only interfaces, guys. Look, I have to study the interface before I can go into options here. Okay. I don’t see any Inner container I can add a block in here. Let’s add a block. Okay. This is a section. All right

2:04:57
Let’s update this now. Let me go over here. Maybe there’s an option over here that I got to look for content overlay link content max width That’s the invisible in a wrapper right there Never ever ever you plug in developers page builder developers, you listening? Never, ever, ever create a wrapper that person does not have access to. Rule number one, already broken, okay?

2:05:23
Let’s go to style. It’s not here. I don’t see anything, advanced. Ah, structure settings. Oh gosh, womp womp. Golly.

2:05:34
This makes no sense to me.

2:05:35
This makes no sense to me, all right? Let’s look at this on the front end. Let me go to style, we gotta add some padding. Well, I think we’ll be able to find it just because there’s text in it. So let’s go to front end. Here we go, inspect. And I know people, like, they don’t want me to be hard

2:05:51
on these page builders. They’re like, come on, Kevin, just be positive. Guys, I asked for a section. A section is an HTML, it’s not just a theory, it’s not a word processing term, it’s an HTML element, I asked for a section. Did it give me a section in the code? No, no, I still have to go over here,

2:06:15
every section I add, which is like at least five per page, it’s gonna force me to go to advanced, and go, where did it go? See, I don’t even know. Block settings, where did it go there it is container div and why I I you offered me a section and I said yes that’s the thing I want and then it’s

2:06:40
like but it’s not really a section but it’s not really a section so I don’t have an interrapper that I can access which is hugely problematic I wrote a whole article on it if you wanted the details. It doesn’t even give me the tag that I asked for right off the bat. Okay, but this is just the start. This is the start of the problems. What’s the next problem? Well now that I’ve changed that to section I can actually see where the section begins. Okay, so let’s inspect

2:07:02
again. So there’s my section. So there’s the invisible inner wrapper. Now it’s got this other div on it called single content. It’s got another div wrapping that called content wrap, then I have an article tag that I never asked for. I did not ask for an article tag. Main tag is all I wanted and all I needed. And then there’s a div between the main and the article, makes no sense, which says content wrap.

2:07:30
There’s content wrap, there’s entry content wrap. This is a nightmare. This is a night, for anybody who’s like, what’s going on here with this structure? It’s just a nightmare. That’s what it is. It’s a nightmare. Now, we could test some other things.

2:07:43
We could say like, what does it do when I ask it for a heading, right?

2:07:47
Heading.

2:07:48
All right.

2:07:49
Let’s, oh, that’s, okay, it doesn’t even offer a heading. That’s the Gutenberg heading. All right, let’s get rid of that. How about this? How about this? Can we use tokens in our paragraph spacing? So let’s go top. Now what is this? See? What is this? What is this? I’m not a dumbass, okay? I don’t, this is so like, you must not know what you’re doing. Here,

2:08:14
just put a slider in here. But the person who does know what they’re doing has to go, no, please get rid of the slider. Let’s click this over here. Okay, now I can do what I was supposed to be able to do, which is put in an actual usable value here. I can’t type M, can’t type E-M, 8-E-M, can’t do it. Oh, it’s because there’s a thing over here. It doesn’t wreck it, like bricks, I can write whatever I want.

2:08:41
This thing, it’s like, no, you got to go over here. Look at how wildly inefficient this workflow is. That I have to constantly be like, no, I don’t want to do it that way. I need to do it this way. Oh, I got to manually select this thing. Then look at this because it’s I’ve chosen M. I am forced to use M’s in every. What if I want to mix and match?

2:09:02
What if I want M’s in the block and I want something else in the inline? What if I want raw values in the block and a token in the inline? Oh, no. Sorry. I guess that’s not possible. Can I use tokens at all? Nope. Doesn’t appear to be an option. There’s no option for none. I’m forced to have a um I’m forced to have a unit. Why would I ever want to use a builder that forces me to have a unit that doesn’t allow me to use tokens and that treats me like a moron right off the bat. Like with this kind of thing.

2:09:41
First of all, just from a UX perspective, these are input boxes, okay? The fact that a slider appears out of nowhere when I click on an input box, I mean, this is just, this is not fantastic, okay? Now, these are tokens. That’s like an internal token. But why can’t I use my own tokens?

2:10:01
What does this do? Oh that links them. That’s still like that’s not helping. Look I’m just stuck. Anybody operating in 2024 with like modern CSS standards just like every go back to PB 101 the principle of just tokenizing things like if you’re not tokenizing What are you doing? What are you doing? And so the idea that I would use a builder that doesn’t even let me use tokens at all, where they need to be used, no,

2:10:32
this is the kind of thing that gets it crossed off the list immediately. And we can’t, you can’t, automatic CSS cannot work in this environment. We use tokens for everything. I can’t even use a token for the first thing that I wanted to do. Much less did I even get the section that I asked for,

2:10:52
and then I have a wrapper that I can’t even access. I mean, it’s just like X, X, X, X, X, right? It’s like down the list, we’re not, nothing, none of the boxes are getting checked. And I hate to sound so like WTF, but to me, it’s a WTF. But it’s actually not, it’s actually not. So here’s the calm, collected, see for me, it’s WTF.

2:11:18
But I also will just give you the analysis. The message that the builder is giving me and people like me, who are a lot of you, is this builder is not for you. And I, see people are like, Kevin, you gotta go to Cadence. Just work around it. Work around it.

2:11:38
Do whatever.

2:11:39
No, no, no, no, no, guys,

2:11:40
guys, I got the message. The message was clear. The builder is not for us. So I don’t go to the builder. They gave us that message loud and clear, loud and clear. This builder is not for us. This could be a fantastic builder for the people it’s made for. It’s not made for us. So we should just go, no, it’s not for us. Let’s go to the builders that are for us. It’s that simple. I’m not saying, see, never would I say cadence shouldn’t exist.

2:12:13
Never would I say that, you know, cadence is useless. It’s useless to me, but it’s not useless to everyone, okay? It’s just not for us. And that’s, so we just have to accept that. And you can do a quick analysis and just see nothing that we need is here. Now what I will go a step further and say is this is not a builder for anybody who wants to build scalable maintainable websites according to the latest best practices, right?

2:12:42
Or even just best practices that have been around for years. This is so far behind the times. So if you are concerned with building scalable maintainable websites this is not the builder for you. You can’t do it. It’s just not possible. If you care about having a hyper efficient workflow with maintainability behind it, this is not the builder for you. I mean you saw how atrocious is the workflow for me to have to always switch to this custom size thing and then be forced to use a unit and just like make the sections manual,

2:13:24
not have access to the inter-wrapper, on and on and on and on and on. This is gonna be a workflow nightmare. I’ve been doing this long enough to know. I can look at a builder in five minutes and be like this is gonna be a nightmare. This is gonna be, I would never do it. I never would I wander into this territory.

2:13:42
So I’m getting the message, this is just not for me and I need to go focus on the tools that are for me. So we don’t have to talk about cadence anymore until cadence sees the light. And Elementor, I’ll tell you right now, somebody at Elementor has been listening, okay? They’re making moves. They’re making moves, they’re gonna bring in classes,

2:14:03
they’re gonna bring in, they’re bringing in, like everything is gonna support tokens, they’ve already brought in grid, they’ve been paying attention, okay? And Cadence will get on board soon. Where to generate? Generate out of nowhere was like, guess what? We have a class first workflow now.

2:14:20
People are listening. And so when I say Cadence is not for me, I mean as of right now. Now next year the conclusion may be different depending on what they do between now and then. And I maintain guys, I maintain a hundred percent you can build a builder that works for beginners and that works for advanced users alike and they can both have a great experience this is not an impossible task it’s not an impossible task you can you can make both people happy you just have to be very careful about how you go about it and I’ll use an example right here with this spacing thing now I don’t like the fact that you

2:15:08
click an input to make this happen I actually don’t hate this slider, okay, if it, these are t-shirt sizes effectively, right, if it mapped to the things that it needed to map to, right, let’s put in a large here and let’s go see what’s happened on the back end. So let’s go inspect what that just added. So here’s our section, here’s our padding. Do I, I mean, I’m looking in the code right now and it’s like, I see no use of tokens,

2:15:33
even internal use of tokens. It’s I just I’m not seeing really anything. What did hold on? What did that just do? What did that just do? Okay. Oh, God. Oh, no. Oh, no. Oh, no,

2:15:45
dear.

2:15:45
What? What have they done? They added it. They added no, no, no, no, no, baby. What is you doing? No, you can’t. No, no, no, you can’t add the padding top to the inner. Oh, no, baby. What? I love that meme. Oh, no, baby. What did you do? I love that meme. right here. See they, you know, global KB spacing LG, ain’t nobody gonna use these tokens. But no, this is a fundamental, this is a manipulation of what needs to happen here. Hold on. Let me let’s. All right, now it raises more questions. Where’s it going to put background colors? Oh God, oh, oh God, my head’s hurting.

2:16:50
My head’s really hurting right now. No, no, no, no. No. No, in no universe, in no universe should I ask for a black background on a section element and get it inside of the inner wrapper that I can’t even, in no universe should that ever happen. What has happened here? I would not be able to use,

2:17:19
I would immediately, I would be on the news the next day. I’d be like, day one would be like, Kevin switches to cadence. And then day two would be like, Kevin’s in a river. Like he’s obviously jumped. He’s not with us anymore.

2:17:36
This is the kind of thing that just makes you like, no, we’re not doing this. Can anybody explain this? I mean, clearly here I’ve selected the section element. I’ve applied a background color and it’s showing up in my inner. And so is the padding. Why do you not use padding in this inner container? Because it fucks your box up. Go back and watch

2:18:04
PB 101 everything is a box. The padding should be in the section element right here. You got to leave this inner box unmanipulated, unmolested, okay? The fact that this this is all this is all gone south and and here’s the thing that’s I think important to consider. We’re on the first element. The first thing we looked at went up completely south, completely sideways, in multiple ways, right? So I was and I didn’t even get to finish what I was about to say with this little slider, okay? Because it started doing this dumb stuff. These are effectively t-shirt sizes. If they mapped to like the clamp functions and automatic CSS would be perfectly fine Right and I have global control over all of those and they’re all related to each other by ratios and that would be fantastic

2:19:00
I don’t think that’s what’s happening here and Yeah, it’s just not general good you but I mean come on This is why I can answer the question and somebody’s like whoa. Why don’t you like Kate? Did you just a hater? Anybody should hate this. I don’t know why does anybody like this? It doesn’t work.

2:19:19
It doesn’t work right. The section element didn’t work right. The inner doesn’t work right. The background color doesn’t work right. It’s putting the padding in the wrong place. What is there to like? And I’m on element number one. You want me to keep digging?

2:19:32
What else are we gonna find? That’s the only thing that comes to mind. It’s like if all the basics, that’s 101 level stuff. If the 101 level stuff is wrong, I can’t imagine what else we’re gonna uncover. What other goodies, right? And again, I don’t mean to hate. And it’s like, oh, it’s not fair.

2:19:51
It is, I think it’s kind of fair.

2:19:54
It just is what it is.

2:19:56
I didn’t make the facts, right? I’m just saying the facts. All right, let me go back to chat. We’re gonna head out of here in a minute. We’re over time.

2:20:06
All right, it hurts me to watch

2:20:07
anything related to Gutenberg. I see people say this, like I use cadence a lot.

2:20:12
How? Do it like, I’m just right here. I couldn’t even get past step one.

2:20:16
My first question is just how? How?

2:20:27
Okay.

2:20:28
Just checking chat real quick. We need a new name for builders like Bricks and Oxygen. These are full HTML, CSS, JavaScript editors. It’s unfair to call them page builders and get put into the same category as other tools? Yeah, I mean, I think there is a distinct distinction. That’s why I call them like professional page builders. Like it’s like kind of like a different category that describes what they what they are, but then

2:21:03
people get their panties in a wad about the word perfect. Anybody can use a book. Everybody wants to cry about it. So yeah, I mean, I tried I try and call them professional page bill. I think that’s like there’s amateur page builders and professional page builders like right like Wix Squarespace cadence, these are amateur tools and that but that’s when people start crying though So we can’t I guess we can’t have those terms I’m open to suggestions, right? I Wish I had seen this review a few months earlier.

2:21:39
Yeah, I mean, this is why I try to save people, by the way. People are always like, oh, you’re just talking shit about. No, I actually just want to save people from using tools like this. Because here’s the thing, if you learn this way, like let’s say you learn on cadence. What did cadence just teach us?

2:21:56
Cadence just taught us that a section element is not really a section element. It just taught us that when you ask for background color on a section it should actually be applied to the inner wrapper. It just taught us that when you ask for padding in a section the padding should be applied to the inner wrapper. If you learn on cadence you’re learning dog shit. You’re learning backwards. You’re learning this is not and now it’s you have to unravel all this stuff. So then they come to really learn, oh, oh, I didn’t learn on

2:22:28
that and now I got to really learn. I got to undo all this stuff this person thinks they know and teach them the right way to do things. So you’ve wasted all that time. It’s just not, I mean, what, I just don’t know what we’re doing here. This is not hard stuff. This is the easiest part of it. Page builders should Page Builder should really, you gotta nail the basics and then we get into deep, like weeds with advanced query looping type stuff, conditions, interactions, and all the other stuff

2:23:02
that a page builder really needs to do for us, like heavier lifting. You can’t get all the basic shit wrong, come on. This has to be, this should be a walk in the park. And I don’t know every this is the problem every builder does it differently if and what what are we doing? Gutenberg same same problem Gutenberg’s like nobody needs a section. We’ll just have containers Elementor did the same thing well people just need containers everything’s a box

2:23:26
Everything is a box Conceptually, but when you write code everything is absolutely not a box a section is not a div an Li is not a div. An LI is not a div. A P is not a span. An H is not an OL. These are all boxes, but a box is not a box. Everything is a box, but a box is not a box.

2:23:52
They’re not all the same. And these page builders treat them like they, oh, you just need a container. So now what people build with Elementor who don’t know what they’re doing everything’s just a div. There’s no sections There’s no semantic HTML creates a mess Then you get into a page builder that appears to offer you a section, but then doesn’t even actually give it to you

2:24:15
So you think you got a section but really in the code you just added a div It’s a nightmare this and this is a nightmare. There’s no standardization. And then I come along and try to create some semblance of standardization, and everybody wants to cry about it. This is the problem that we’re facing. This is the challenge. This is the hurdle.

2:24:35
Well, I think we should all be able to agree this is fucked up right here. This is not this situation right here. Can we? I know on the internet, it’s impossible for 100% agreement. But I feel I really feel like this is a situation where you should be able to get, I mean, 99% agreement and then the 1% of people who just are, they are dedicated to being wrong.

2:24:58
That’s where we should be at with this.

2:24:59
99% agreement and then the 1% of people who are dedicated to being wrong as a profession can still be in the 1%. But you can’t look at this and be like, this is the correct scenario, what’s going on here.

2:25:14
Okay.

2:25:16
Yeah, I know you aren’t a tutor, but there are, trust me, there are plenty of people crying. You said it was possible to create a builder that a newbie and a pro could use, but I seem to remember you saying that that was the problem with Gutenberg, that they were trying to cater to everyone. Yeah, 100%, 100%. It is a problem if your mission is to cater to everyone And I don’t think you should market it that way

2:25:43
But that doesn’t mean And here’s the context of it. Okay. I’ll tell you exactly how the builder should be built You build the builder for advanced users So you build a builder that an advanced user? Opens up and feels right at home and that’s like I’ll tell you when I made the switch from oxygen to bricks, it was 24 hours. All it was a matter of is like things are in different places and then the loop works differently, right? That kind of stuff is, you’re never going to get away from that. UX is UX is UX. You

2:26:19
got to learn a different UX and that takes some time, okay? But coming from Elementor to bricks or oxygen you got to learn what what is a class? What is the token? What is the this? What is it that what’s a what’s a section? What’s a block? What’s a div? What’s a did it up, right? You got to learn all this stuff Whereas an advanced user already knows all those things and so they come in and they’re just able to use it They’re like, oh, okay things are in different places But I know what they all are and they’re all called the all the right things right flex boxes flex grid is grid It’s not all this cute shit like,

2:26:52
oh, there’s a group, do you want a group? And anybody that, you could study web design for 30 years and be like, you want a group element? And they’ll be like, the fuck are you talking about? What is that? I never heard about that. Because Gutenberg was like, oh, people can’t, you know, I think, you know, we’ll just be cute, I guess.

2:27:09
We’ll just be cute, we’ll call it a group, okay? So they come up with these new terms for things, we could open, I mean, we could have another field day with Gutenberg and the way that they’re doing stuff. But that’s neither here nor there. So you build the builder for advanced users. It’s got all the core blocks, okay? You got a section.

2:27:28
You have the block block, which I believe Bricks introduced, which is basically a flex box, which is just a shortcut. It’s still a div, but it’s a shortcut. Then you have a div for the times you don’t want it to be flexed by default and 100% width by default. Then you have buttons, you have headings, you have text, you have images, you have videos, you have, okay, all the standard stuff.

2:27:49
It’s all we need. We don’t need all the chintzy stuff, okay? We don’t need an icon card, an acute little alert box, and things that you should actually never use because they’re not even expandable. Gonna do a whole video on that. And then you get all the proper controls that the person would want.

2:28:06
Then they have to have custom CSS, ideally SAS, but okay, that’s a lot to ask for. So custom CSS, custom code block, whatever, I can do whatever I wanna do. And then an advanced user is right at home. Then what do you, and it’s got class first workflow, the ability to create tokens, you can use tokens in all the inputs,

2:28:24
you can, okay, you can calc everything, you can var everything, you can do whatever you want. All right, now what do we do to satisfy beginners? Now we start to scale it back. Now we take concepts like this, which I don’t hate. I don’t hate this if it maps to the correct things that an advanced user still has plenty of global control over, all the global control

2:28:48
that they need, like in ACSS you would. So this slider is much friendlier for a beginner, right? Now the other thing is like we have to have some semblance of contextual utility. Where are these utilities being being used? People that is highly underrated in automatic CSS is the concept of contextual utility. Content gap, grid gap, container gap, things like that, highly underrated because you don’t even need to make these decisions anymore. Right? And a lot of this stuff, this adding a section in automatic CSS, when you add a section in any builder with automatic CSS, your section already has inline padding and block padding in the proper areas by default. The idea that you’re going to just go willy nilly with every section that you add is phenomenally ridiculous. Like, I have to do this, and then I have to do this,

2:29:41
and then I have to remember what I’m using on every section, and maybe I just do medium. If I’m gonna do medium on every section, why isn’t that just the default? So that I just have it, why do I have to make a decision? Why are we asking the user to make decisions that don’t need to be made? This has been the premise of automatic CSS

2:29:58
since the beginning. The decision was already made at the start of the project that I want a certain amount of block padding and inline padding on every section. That’s done. We don’t need, nobody needs to make that decision anymore. Only when the section needs to be bigger or smaller do I need to make the decision and then I can make the decision at that point, right? All of these little details save a tremendous amount of time, but this is a way that you can make it friendlier. Context menus, right click, choose from t-shirt sizes. Automatic CSS has taken, is a perfect example,

2:30:33
of taking tremendous power and making it accessible to anybody. Because I can just right click and choose a token and pop it in. And then I can right click, choose another token, and pop it in. I can move on with my life. That’s a perfect example.

2:30:46
And then, how do you satisfy the pure beginners, right? How do you really satisfy the true beginners? Education. PB101. Anybody that goes through PB101 is now equipped to do anything they want in a real page builder. And it turns out that when you create an environment, let’s create an advanced environment

2:31:07
where advanced users can do whatever they want, but then add a bunch of helper stuff in, like sliders that map to the t-shirt sizes, right-click context menus, make it super easy for a beginner, then just teach them the concepts of classes. And then by the way give them other helpers like oh yeah you don’t want to write all those classes, yeah we don’t either, we figured that out a while back, so you can auto-bend it now. So now I can take

2:31:31
something with 30 child elements and in one click they all have classes that are organized and that make sense. Huge time saver. And a beginner can easily learn how to do that. So it’s education plus advanced environment plus all the helper stuff that bridges the gap. That’s how you do it, right there. And I’ll tell you, I love to use my mom as an example. Okay, she’s like the, you know,

2:31:58
basically the fresh person to web design. She doesn’t know what the hell she’s doing. She doesn’t know a lick about anything. If you sit her in front of Cadence, it is this thing right here, Cadence Builder. You sit her in front of Cadence and you come back, just give her YouTube, give her books, whatever you want to give her,

2:32:16
come back in three months, okay? She still really won’t know much of what’s going on, all right? But what she will know, she’ll know wrong, right? And if she instead just went through PB101 and then started on a real builder, she would be light years ahead, light years ahead of all this fumbling around in cadence,

2:32:36
doing nothing, learning backwards in a builder that nobody should really be using. That’s the difference. It’s not like you can build a website without learning. That’s not a possibility. So just toss that out. There’s no scenario where somebody can come off the street and build a website.

2:32:55
That is a fairy tale that only exists in the minds of Wix and Squarespace ad representatives, okay? That is not a reality that anybody else lives. So we already know there’s a giant learning curve. So the question is, do you want the learning curve to be the wrong learning curve or the right learning curve? That’s the only option. I prefer the right learning curve,

2:33:20
do the right education, and then use the right tools, versus fumble around in the wrong builder, learning the wrong things, learning everything backwards. I think it’s pretty easy. So, yeah, you don’t have to, the idea, this is where Gutenberg went wrong, by the way,

2:33:35
when you try to be for everyone. When I say make it friendly for beginners, I say make the advanced things easier. I don’t say dumb it down and and try to make it like as cute as possible. Like group, yeah you don’t want to learn what a section is. Just here’s a here’s a thing called a group and all the other stuff that they did here. Let’s just take a look here. There’s a lot of Cade and stuff in here. There’s also just a but like again I couldn’t even get started with this because like I immediately the first thing you need to add to a page is a

2:34:08
section so like where’s that element where’s the first thing that we need to add it’s not here because they didn’t feel you needed it because I guess because a beginner doesn’t look for that and so they bit they based their builder on well beginners don’t care about those things that we won’t have them like what will come again what what about everybody else who actually needs to build a website the right way? And then cadence is like in between where it’s like, oh yeah, we do give you a section. The problem is it’s just not a section. It doesn’t behave like a section. It doesn’t have a section.

2:34:36
Why? Why is this here? This makes no sense. Oh, that’s the other thing. Stacks. Stacks in Gutenberg. Yeah, let’s add a group. Let’s add a group. This is fun. This is real fun. Group. Okay. Now it says, look at this. Transform to row. What is that? Or stack. Okay, this is just using Flexbox. Right? But it’s like, oh, well, people can’t, they can’t learn flex column, flex row. We got to get a cute little name for it. Stack. We’ll just call it a stack,

2:35:07
because people stack stuff. But stack doesn’t really make sense either. Really. Like, you could scrutinize a lot of these names. And I’ll tell you, you know, like this is very advanced. CSS is very advanced stuff. The names they come up, they came up with already. Like there’s not, you know, there’s some areas could use some improvement, especially within the realm of Flexbox. But column and row is, are the names. Like flex column and flex row.

2:35:37
Why would you go from column, which everybody fucking knows, anybody that’s used Microsoft Office knows what a column is. There’s no reason to just go off and use a different term called stack. You’re remapping words for no advantage. That’s only a disadvantage now.

2:35:57
Oh, learn this new term, why? That’s because we wanted you to. Well, does it do something different? No. Is it easier to understand?

2:36:06
No.

2:36:07
Why then? Well, because we wanted to. Because it’s our proprietary system.

2:36:11
Well, fuck you.

2:36:12
How about that?

2:36:13
That’s how I feel.

2:36:14
Like, what? You want to make it easy for anybody to use it, quit changing all the words for no reason. That would be like, you know, principle number one, see y’all got me, yeah, renaming things just to be unique is such a bad idea. It is, because it goes against the mission. The mission was we want it to be for everybody. Well, guess what, it’s not for me now, because you just molested it.

2:36:41
So no, it’s not for me anymore. I prefer to use an environment that behaves consistently with how I’ve done things for the last 20 years a Section is a section a div is a div a heading is a heading and a flex column is a column and a row is a Row and there’s no there’s no such thing as groups. There’s no such thing as stacks No quit. They just want to pat themselves on the back. Oh look at look at how cute we got. Oh Mmm, we made this so friendly No, you didn’t you made it more confusing. Congratulations.

2:37:16
Okay yeah I have to tell you yeah exactly.

2:37:19
Standards are such an old-school approach though. It’s really not because the CSS has that’s the funny thing right. I advocate for the actual like the terms that are actually used in CSS because that’s what we’re doing. The page builder is writing CSS for you. So it would make sense that the things that you’re asking the builder to do have the same names as what’s happening in the CSS. And the fact is you know they say oh yeah your standards are old-school Kevin. No no no no I’m with the current CSS spec that’s actually light years ahead of your builder environment, right?

2:38:04
The builders haven’t, I just explained how BRICS, no support for local variables, way behind. You’re way behind. This was years ago, this should have been done, right? That’s way behind. Gutenberg hasn’t even started on it yet. Elementor hasn’t even thought about it yet. There is not a builder, even quickly,

2:38:22
even the genius forward thinking quickly didn’t have a pathway for creating local variables right not that I know of So no don’t tell me I’m clinging to old standards no no no I’m I’m in the future Hi, I’m from the future. Okay. Nice to meet you. This is how we do things in the future That’s where we are trying to move these things to. But then there’s a bunch of resistance. And the resistance is what’s frustrating. And then when the resistance comes from tools doing this kind of stuff, you’re like,

2:38:58
mm, sorry, you’re off the team. Like, mm, we can’t really care what you think anymore because you’re not even doing the 101 stuff that was done 10 years ago right, much less thinking forwards. And then people are like, ah, you’re just a meanie. I don’t know what to tell you. I’m looking at what I’m looking at. And I’m describing it in you know, without without worrying about you know, everybody’s feels. All right, I really got to get out of here.

2:39:31
I really got to do some work. We’re closing in on too much time. Okay, I love you guys. I do Really really really thank you for coming every single week. Remember, please that we are off next week There will be no WDD lives why I went a little bit longer today. No WDD live next week I’ll be back the week after that and we’ll be back to our regularly scheduled program See ya ACS s3 alpha 1 is almost wrapped up alpha 2 is hopefully going to be packaged up towards the end of this week or early to mid next week. And then the Alpha 2 group will be expanded. Okay, so if you’ve been, you know, active in the ACSS group, you, you know, you have

2:40:16
another shot at getting into the Alpha. We’re expanding this one much, much, much, much bigger. So I think the Alpha 1 group is like 12 people. I would expect alpha two group to be around 50 people or so. So if you’re active in the community, I mean, you have a good shot at getting selected for being in the alpha two group, then they’re slated to be an alpha three,

2:40:40
and then it’s gonna go into public beta. So we’re getting very, very, very, very close. But go be active in the ACSS community because that’s gonna make you more likely to get selected. And that’s it. You’re gonna see some good sauce very, very, very soon. We’ve been cooking hard in the kitchen and it’s getting very tasty. I’m out. very, very soon. We’ve been cooking hard in the kitchen and it’s getting very tasty. I’m out.

2:40:58
Peace.