WDD LIVE 019 – Web Design Critique, Q&A, and Mini-Tutorials

0:00:00
Let’s go. Good morning everybody. Got another excellent session coming your way today. We’re doing one in-depth web design critique and then I felt bad about not answering everybody’s questions last week. So we are going to continue with our Q&A session. I did three hours of Q&A last week and got to like 20% of the questions. So we’re gonna do another round of questions. Let’s see who’s with us today. Dumarest Street. Let’s see, TIR Phillip is here. Welcome Phillip.

0:00:39
TIR says, had a bad day until I realized WDD Live is today. Yes, that absolutely turns things around. Ruben is here, Calisthenics Ireland is here. Charlie is here. Jason, any Inner Circle members here are probably going to join this week and I just want to hear a couple of personal feedback from any members. Gotta tell you guys, the Inner Circle on and popping. We are experiencing a nice surge of growth right now.

0:01:08
We are well over, I think, 1,150 members now. Absolutely fantastic. So Jason wants to hear from any Inner Circle members. If you want to drop a little note for Jason in the chat, tell him what your experience is. That would be fantastic. All right, Derek’s already got some questions rocking and rolling. If you guys want a question, what I will say is this, let’s hold off, don’t ask them right away because I want to jump into this this live web design critique.

0:01:41
We’ve already got about 50 people here. That’s fantastic. The YouTube notifications are going to go out and collect a bunch more people. So we’re going to dive into this web design critique first and then I’ll do questions and it’ll be best to ask your questions at that point. That way I don’t have to scroll up and down as much in the chat. So just save your questions until right after we get through this first critique. We’ve got Rob here. Welcome Rob. Pedro, welcome. Danielle, welcome. Man, we got a lot of new faces and a lot of faces that I’ve seen before, which is amazing.

0:02:15
All right. So, any announcements? Any announce, yeah, there are some announcements. There’s some big, big things coming. Man, I am so excited about we’ve got ACSs 2.5 is in testing right now scheduled for release on Monday and This is a big update big update to ACSs 2.5 a lot of really really fun and exciting stuff in this release frames the accordion toggle component is about to be released, which is really phenomenal.

0:02:55
And that has schema markup built in, which is a really great feature of that element. We just released a vertical, two vertical header frames. So if you’re a frames user, two vertical headers are now available to you. Those are not easy to get right. We spent countless hours getting those right so that they’re more or less plug and play. You don’t have to do a lot of nonsense with your template. You just you literally just drop that the thing in and your whole website will now work with a vertical header. So those are really good. What else do we have? We have a new product add-on on the horizon something that was promised back on Black Friday but it’s actually more it’s actually more than what was promised, and it’s something that people have been asking for relentlessly from the beginning of automatic CSS almost, but also lives partially in Frameland.

0:03:53
Very, very exciting. Very, very exciting product happening. We have a very exciting announcement for the inner circle, something that I think a lot of people might consider is like, wow, didn’t even see that coming, did not see that coming, that kind of announcement, that kind of announcement coming to inner circle. This probably this week, later this week, I just got a notification in my inbox, which is very exciting and it allows me to move forward with this announcement. So man, there is every every front every front. Oh, there’s a there’s a new PB 101 lesson coming out tomorrow All about flexbox deep dive on flexbox for PB 101 Every front there’s something exciting happening right now in this ecosystem, and that is really really really fun Alright, I’m going to dive into this first little look-see at the website that we have today and then we will go into Q&A. So let me go ahead and screen share make sure our screen sharing is working. Let me bring this site onto the page. It looks to me like everything looks good from my end. I’ll check here and there. Looking fantastic.

0:05:12
Okay let’s dive in. Remember when we do these live web design critiques we’re trying to be in-depth. We’re not just looking at UI, we’re looking at UX, we’re looking at copy, we’re looking at SEO, we are looking at accessibility, we’re looking at everything, we are looking at everything. And I will say this, you know the sites that need more work on like just general basic UI, UX type stuff, copywriting, we don’t always get to the other detailed stuff. We don’t always get to the SEO. We don’t always get to the accessibility. Why? Because there’s bigger fish to fry.

0:05:48
Like there’s more things have gone wrong here that need attention before we get too deep into that. So if we have a website, like this one, right off the bat, is looking like, you know, it’s very clean, there’s a lot of good stuff going on. We might be able to get into the more deeper stuff with this kind of website, because we’re not gonna get hung up on all the basic UX, UI stuff that’s going wrong.

0:06:16
That’s at least my initial impression here. But I’m gonna start the way that I start all of these, which is with a no scroll test. Okay, so we can’t scroll around, we just have to figure out what’s going on here. Beautiful websites and strategic design for small businesses in Vietnam. I am seeing one issue here and you got to be very careful with this. Where did my, oh there it is. These things like seem to move around on me. This to me is like a bit of a problem right here. You know you’ve got a little bit of a blending in with the text and this light image right here and that that’s definitely definitely a problem.

0:06:58
And what you could probably do is let’s see how these images this is a background image or is this a real image. And this image is, let’s see how it’s positioned and all that. There’s a lot going on here. All right, it’s in a div. Maybe the div has the positioning. Okay, we got some transform. No, no trans, that’s probably for animation of some sort. There you go, position absolute, okay?

0:07:33
And so what we need is, I would use like a math calculation here right we know the width of this image we know how much this image takes up we probably set a variable for that especially if this image is shrinking and expanding as the the screen moves and then we need to set a width on this that is you know maybe a hundred percent minus this thing right here depends on how this whole section is set up but you’ve got to find a way. There’s more than one way to skin a cat, right? You’ve got to find a way to make sure that this text is protected from overlapping this image right here. There’s a couple different ways to do that. I just mentioned one of them, but this is the basic problem we have to solve for. And this is a very common thing when you when you when you do stuff like this. So the other the other potential fix for this is to put this image in a grid with this heading over here.

0:08:31
So this cell is going to contain this content. Right now there’s nothing containing this content. It’s just free flowing all the way across. If you had a grid cell that was containing this content and then put this image in the grid cell but break it out of the grid cell to get this visual effect, that would be another way to solve for this. So there’s a couple of different ways, but you see that we have a fundamental problem that has to be solved for, and that’s this right here. My thumbnail’s too big? Hmm, who else feels like my thumbnail is too big?

0:08:59
Move your big head. Oh, oh, because the inspector. Well, you guys don’t really need, I was just inspecting it for myself. I don’t know if you guys really need to see, but what I do, I can’t move me, but I can move this, I can move this thing. So I’ll put this over here. Now you can see. And yeah, you’ll see how that image, this will give you a good view of what that image is doing and behavior wise too.

0:09:23
Which I actually don’t really like that behavior and I don’t think that behavior needs to happen and I don’t think that behavior really makes sense if this image was in a grid cell right here and visually breaking out. We do this in frames. In frames, there’s a few different frames that do this. We break content out of its container to the right-hand side of the screen which is quite easy actually. All of this will will naturally not interact with your images and then your image can actually be as big as you need it to be right.

0:09:53
This image is getting small for absolutely no reason and on a screen size like this it just looks like it’s like tucked away in the corner down here and that’s really not a great effect. You could have a very large visual of this. All right stick your head top right as nothing of note usually in that corner. But then it looks like I’m floating. I don’t know it’s weird. But it’s fine here right? It’s when this is over here it should all be good. I live down there in every tutorial so it’s kind of the it’s kind of the thing. All right I want to I want to think about this copy here. Now, again, we’re doing a no-scroll test. Beautiful websites and strategic design for small businesses in Vietnam.

0:10:34
So this is telling me this is a locally focused website. But I’m also seeing in my no-scroll test these like Converse and Extra. I mean, these are very large global brands. And I’m wondering, I get the vibe, a lot of people do this, okay, where they’ve worked with Converse because they worked for an agency at one point or with another agency that is working on part of a small project for Converse.

0:11:07
And it’s not like Converse hired you to do their whole website or anything like that. You worked on a very, very small part of, it’s like saying you worked on the shuttle because you created rubber you know the space shuttle because you you created rubber that was used in a wheel or something on it’s like you’re not actually like in you know in the control room at NASA helping them you know launch the shuttle or anything so I want to know what’s going on here with it because but it creates a mismatch there’s a huge mismatch here because you’re like we’re for beautiful websites for small businesses in Vietnam, such as Converse and Extra. And you know, like there’s a clear disconnect here. So are you for small businesses in Vietnam or are you for Converse?

0:11:49
You know, those are two very, very different things. So in my no scroll, notice I haven’t scrolled anywhere and we’ve come across a massive disconnect on the messaging and the copy, okay? Something to address We specialize in beautifully designed websites and marketing content for small businesses in Vienna all right. What’s the first thing? I’m going to say about this right here All right, Dommy’s pop quiz Dommy’s What’s the problem with this right here? Songhan collective is a web design and digital marketing agency that helps small businesses grow So just drop in the chat and by the way if you you notice some people participating in the chat, they’re giving their own feedback, they’re giving their own, it’s a free-for-all.

0:12:34
Okay, you’re listening to me, but you get to put your own feedback in the chat as well. Let people know what you think. And you might have some golden nuggets. You know, the person who submitted this is here watching a lot of times, or they watch the recording. You might have some golden nuggets for them, some stuff that I don’t talk about some stuff that I miss whatever drop those things in the in the chat for them this extra added value Somebody says they like the underline. How was it done?

0:13:01
Okay First Ruben is correct and Sylvia is correct This is just repetition, which means we’ve talked about this all the time, wasted opportunities. This is something over and over and over again that we see. Let me get a, is this a highlighter? No, that doesn’t work. It looks like it should be a highlighter, but it’s not a highlighter. I still gotta play with these things. Okay, so beautiful websites and strategic design for small businesses in Vietnam.

0:13:35
And it’s like literally that sentence again, okay? Just a wasted opportunity. You have two elements, a heading and a lead paragraph where you have an opportunity to get these people to stay here on this website before they’re like, I’m going somewhere else, right? So don’t waste one of those opportunities, namely this one, by repeating what you’ve already said here. Give them something more to chew on, make them more, give them another compelling reason to continue scrolling down this website.

0:14:11
All right, somebody asked about this right here. So we can go check and see how this is done. So it’s done with a background image. There you go. It’s just a background image, little SVG action, most likely. I can’t even see what it is. Yeah, it’s an SVG and it’s just positioned and it’s attached to Well, I really hate that pop-up this underline dark class so he can basically throw this underline dark class on to any span element and It’ll it’ll underline it just like that. Now. The question I have would be like, you know, how does this behave?

0:14:43
What kind of limitations are we running into? like very beautiful. Mmm. Oh no, no, no, no, no, no, no, no, no. All right, so we already scrolled around and Kevin Hart has showed up. This is fantastic, fantastic, okay. I just try to break these things, you know, because again, when you are designing and developing sites and you’re creating an effect like this, your job, yes, I get it, the effect works on the word beautiful, but your job is to, especially you’ve created a class called underline dark, which theoretically you should be able to apply to any text and get the underline effect.

0:15:28
The question is, did we create a scalable effect? And unfortunately, this is not a scalable effect. It can only be used on singular words. And so you’ve created some sort of natural limitation. Now, if I took a pseudo element and I use some math functions, can I create an effect like this that works across multiple words perhaps? Very, very, very possible. So I would reject the background image, almost out of hand, like just based on experience, I already knew when I saw it was a background image, I already knew it was going to have a physical limitation.

0:16:08
So all I had to do is demonstrate the physical limitation. As a developer, we have to be thinking ahead and say, that’s going to have a physical limitation. And if there is quite possibly a way that I can achieve this without that physical limitation, I’m going to go that route. I say this all the time, and I’ve said it many times in PB 101, there are multiple ways to get to a visual effect in web design or web development. There could be five ways to get to the same exact thing. There could be 10 ways to get to the same exact thing.

0:16:38
But some ways are objectively better than other ways. What we have to do is use our experience to say, here are the pros of each method, here are the cons of each method. This is the method that I’m going to go with because it has the most pros and the least cons. And then you don’t end up with situations like this. Okay. Let’s do a little quick refresh. We can get that out of the way. All right. Now we are free to start scrolling around now. Okay. So we’re coming down. We’ve helped companies. Ouch! Once again, massive disconnect. That is not like this. These two things are not the same and this is very critical. I mean you are trying to one of your main objectives with your copy is to let people know they’re in the right place and that you work with them and right now they’re having a hard time knowing if if you’re for them or not you seem to be for small businesses in Vietnam in one place and then five feet down the page you are for global companies and so this this kind of it disconnect is like I just don’t know if you’re for me if you’re the right fit we’ve got a slider here. I Can already tell you this is almost certainly not accessible because there’s no controls for this. I can only use my mouse There is no Keyboard there’s no way to navigate this slider with a keyboard. I can only do that so I have to have a mouse to do this It’s possible that I can keyboard now. I can’t you can only keyboard navigate the two active items So this is why I mean what we’ll come back to this because I you know We’re not gonna there’s not a lot of UI stuff here to harp on about like why’d you do that shitty?

0:18:37
1990s box shadow like you know that kind of stuff We don’t have to do that with this site so we can get a little bit more into like accessibility and and things like that Scalability maintainability, we’ll take a look at the DOM a little bit more on this website and see what’s going on. I’m just doing a quick overview of what’s our copy, what’s our narrative, what’s our organization of content here on this page. So it goes from hero to social proof to portfolio to services. So it’s a good natural flow.

0:19:11
But what are we seeing right here? here another big issue with there is a little bit of layout you know issue going on here so we have an image that’s a weird it’s a slider okay I see what’s going on visually it’s off balance this is actually the component that we’re looking at here so let me grab my little box this is a component right here these things go together these are images that and I know it’s sliding automatically, which is, well, let’s watch this red bar right here. Well, now I’m interacting with it. Okay, so the red bar is indicating the slide that you’re on, but you can also manually go through them.

0:19:51
But it’s the fact that this cuts off up here and leaves this giant white gap that kind of throws off the visual balance. So I would probably recommend centering this right here. I don’t know, it’s tough because this also goes off the edge of the screen. I don’t know that it’s necessary for that to go off the edge of the screen here. I think that might be contributing. If you put this blurb right over here, that’s probably the best way to balance this.

0:20:18
So you have your heading and your little accent heading here, you have your blurb over here on this right side and now this is not going to have a giant open gap like hey What’s supposed to go here? Okay So we do web design and development. We do design and branding we do sales and marketing I don’t know if you do sales and marketing You know, maybe maybe you do digital marketing. I don’t I don’t Sales is all you know internal to companies. It’s not you’re not doing like, you know sales coaching or I don’t know this seems weird just do marketing digital marketing or some specific form of digital marketing that you do you’re talking about social media campaigns strategy and management for small businesses and startups but again here it’s like I don’t know are you small businesses and startups or you global brands global companies you know which which one which one are we get an identity you need an identity, chief.

0:21:14
All right, so skills and culture, your capabilities, you’re perfect for these people. This is a little odd, because these are buttons, these are not buttons. They look very similar. I get it, you know, there’s a different border radius on these than on these, but visually it’s like they’re both white, they both have the same text color, they both have these icons.

0:21:42
These are clickable, these are not clickable. And there’s no hover effects. So we’re not even indicating that these are clickable with hover, which would help a little bit. But these things look too similar and you’re kind of teaching people that these are clickable, these are not clickable, it’s just a little confusing. So, you know, very, very simple here.

0:22:04
Very, let’s take a look at this. Very, very simple to fix this. How do you make them not alike? Well, we come in here and you’ve got, all right, so you’ve got some sort of framework going on here. Color gray, 700. I don’t like this framework, whatever it is, simply because they misspelled color. Okay, let’s just, all right. Everybody that’s not in the US will hate me for that one. Okay, so background color is and here We’re gonna see guys you’re gonna see Scalability maintainability, okay. I harp on it all the time Let’s decide that this needs to change. So this is actually going to go to 700 and Okay, good. He did see see this is good badge gray now the class name, not so great. First of all, that doesn’t even look like a gray badge to me. I guess that’s light gray back there instead of white, but it’s like so close. It could be, it could be white, right? But the minute I need to change it, it’s like, you know, it’s, it’s, does badge gray still work? You thought it was light gray. Now it’s dark gray. I don’t know I avoid and by the way with this framework right here with a variable these are the worst names for variables and classes never put the literal name of the color in a variable or a class because brands change their colors and the minute you need let’s say let’s say their brand color is pink so you have like button pink, heading pink, and all these and var pink.

0:23:43
And then it’s not even Bev. It’s not even Bev this time. It’s just brands go through rebrands. And they pick up the phone, hey, hey, guess what? We changed our brand colors. We need to update the website. And here you are going, oh, perfect. I got my tokens, I got my classes, I’m ready to rock and roll and then you go into edit and they’re like, so the pink color is now blue and you change the value to blue but your chump like, do I still have a, your chump like has to still use VAR pink and BG pink and button pink everywhere even though pink doesn’t even exist on this website anymore.

0:24:29
Because you use a literal color name in the variable and the class. You don’t want to live that life. That’s why in automatic CSS, we use primary, secondary, accent, base, shade. Do not use literal color names, okay? But let me fix this as I was doing. There you go. Fixed. So now these are buttons and put a hover effect on these.

0:24:53
And these no longer look the same. They don’t look similar anymore. And we’re still using your color palette, which, by the way, this is the power of variables. Did I have to decide what color to put here? No. I’m just using one of the dark shades, and I switched the color to being one of the light shades. And because it had a class on it, they all updated. We’re seeing in real time why it’s important to make scalable, maintainable websites.

0:25:21
So that we identify a problem, we can solve the problem in seconds, instead of being a chump and going and spending 30 minutes doing all of these individually one by one, and then searching for where they exist on any other page of this website so that we can fix those iterations of it too. This is a perfect example. Scalability, maintainability for the win. Okay, these absolutely need a hover effect here. All right, let’s look at more component-based stuff. So here I what I try to do the BIM check, the you know class check, I just find an element that’s obviously a repeating element. We found one here. That’s a badge. It had a class on it. Fantastic let’s look at the Yeah, see, you know we can we can you know nitpick little things like this these are not divs They’re you know, they’re spans or even I would honestly I’d make these p tags Because they’re keywords, right?

0:26:26
Oh, and there you see, the minute we change it to a P tag, things are a little bit out of control. And so we go back up here, so now it’s inheriting that. So badge gray is gonna need font size of like, let’s just see what 1M does. Oh no, I can’t, oh, I can’t affect that one P tag right there. And there’s no BEM classes on here.

0:26:49
Ideally, this text right here would have a BEM class, right? So it’s a P and it has a class of Let’s go in here. So that’s called a badge gray Unfortunately badge gray double underscore label right there now, they all have that BEM class I can affect them all equally right now I don’t really seem to have global control over the size of that text when there are P versus not a P because there’s some other Override happening on paragraph size So that’s again why is BIM important because every element of a block needs to have a class that gives you Unlimited control unlimited control right now. We have limited control okay but anyway I identify an obviously repeating element like a card and then I inspect it and I say let’s see how this was set up and I go to classes bricks block that’s a class that gets added to everything uh-oh owl gap 20 align item Center no custom class do you guys agree with me that this is obviously something it’s a card right here.

0:28:05
We can see that it’s been used two more times. But this is a very basic feature card style. I mean, we’re probably using this on almost every page. There’s probably going to be a page where this is, I mean, it’s just everywhere. It’s going to be everywhere. So the fact that it doesn’t have a custom class, and the fact that these elements don’t have custom classes. These are how many elements are we dealing with here? We’ve got one which is the card. We’ve got two three four five five things that Potentially need custom styling. Okay now multiply that by how many other times these appear on other pages of the website and how many pages there eventually exist on this website That’s a lot of elements to where we get to a point where we say we actually want those feature cards to have a white background. All right, so we say backgrounds color of white and Well, how about how about we do one of these vars? I don’t even know what framework this is.

0:29:14
Var, let’s do gray. It’s not auto-guessing. Normally, sometimes it does. All right, I don’t know if I can go steal it again from this, inspect. I just wanted to give a quick example. So, oh yeah, that’s right, that’s right. It’s spelled wrong. Okay, so I’ll go in and let’s do VAR. Oh, it copied the wrong thing.

0:29:40
My gosh. Colour, Colour grey 700. There we go. So we decide, hey, that needs to be, those need to be grey boxes now. Cause we’ve changed our colour scheme up, whatever. And you can see right off the bat, we have a big, big, big, big, big, big, big problem.

0:30:00
First of all, it didn’t have a background color before so there was no need for padding. The minute that it has a background color of any kind doesn’t even need to be this background color it also needs padding. Okay so we’re gonna throw padding in there. None of these other cards are updating. None of these other cards are updating. And then we also determine now that it has a background color which we didn’t even foresee this happening. Look at this thing. This thing has a background color right here what does it also have border radius okay so now this card in order to match needs to also have border radius all right so how many things am I having to change because we made one design decision then I’ve got to address all of the content in here maybe I can change some of it with inheritance right oh but I can’t change the heading with inheritance.

0:30:50
Only the text change with inheritance. Why? Probably because the heading style, oh my god, it’s not even a heading, it’s a div. Oh, I’m on, oh, wrong, wrong, wrong button. No, no, no, no, no, no, no. So, this has got to be an H3, or, you know, like a P at minimum, but a P still doesn’t even make sense. H3 in these cards. This is a paragraph tag not a div all day long okay and so we see we’re getting yep there you go so oh we’ve got a utility class on it so we’ve littered utility classes all throughout our what should be custom components so inheritance no longer works here because of this uh text gray 900 class so i take this off and our h3 is still being controlled from somewhere else.

0:31:40
So I still can’t get any inheritance going, but there’s no BIM class here. So I can’t change them all. This is a this is a nightmare. This is what living in Trumpville feels like. The minute. Yeah, I get it. Right. Somebody people are going to argue. Here’s their argument all the time. Utility classes are so fast.

0:31:58
I can just make the website so fast. They just make this whole website real fast. But then the minute someone comes along and they’re like, we need to make a change to that thing that you used 400 times. You’re not even Chumpsville, you’re fucksville. You don’t wanna be anywhere near that situation. Imagine, how big is this website gonna get? It’s insane to me, it’s insane to me so this is not the life you want to live clear demonstration of oh wow oh wow we needed to change something and things are going south very very very very quickly and this is why I say and I’ve preached this in video after video after video after video do not use pure utility class frameworks this is not a pure utility class framework.

0:32:53
There are variables here. So all we have to do is make a class, use variables in the class, and your life is fantastic. That’s all you have to do. That’s all you have to do. All right, let’s scroll down. Here’s another, we’re gonna look at accessibility in just a second, because there’s a lot of accessibility things I wanna look at here.

0:33:16
Potential, potential issues with accessibility. We’ve already seen some of it in the DOM. We’ve got headings that aren’t headings. We’ve got text that is divs. We’ve got a lot of semantic inaccuracies here. But I’m wondering if we will find some other interesting things to look at. But notice here, I just don’t know why there’s no hover effects on anything. There’s zero visual indication that I am interacting with links.

0:33:43
These images are clickable, nothing happens when I hover them. These headings are clickable, there’s nothing that happens. This badge is clickable, nothing happens when I hover it. So we need to go back and get hover effects on everything that can be interacted with. That at least kinda changes the background color up there. All right let’s take a look real quick at accessibility. I’m just going to start with some basic tab navigation here. Okay we have a skip link, we have a skip to main content, we have a skip to footer. We need a hover style.

0:34:18
We need a hover style or I’m sorry a focus style. A focus style on these elements. It’s got the like default, you know, dotted outline, but it’s not super exciting. Home about a services. Uh oh, I just lost. Where am I? I’m lost. Watch, I’m on services. Oh, I know where I am. I bet I know.

0:34:43
I’m in the menu. I am. Look at the bottom. Look at the bottom left. I’m in the menu right now But you would never know that I’m in the menu. There’s no way to know Can I open this menu? Oh? No, I can only go to the page Okay All right So I need to be able to open that drop down with the keyboard and I absolutely cannot and I can’t it forces me into the submenu which is a huge no-no and then services where then I finally pop out okay finally I’ve popped out of the I was like there’s not there can’t be that many items in there there’s not there’s only three items what’s all the tabbing going on there I’m tabbing through like six or seven different things All right, let’s open this up. Oh I bet Look at that Yeah the image is a link and Then there’s this link. So there’s double links for everything So you’ve got a tab through the image then the link then the image then the link then the image So it’s duplicating all of the links Okay Okay Lots of stuff to improve and talk about here and this is really good. This is really you’ve got it when you are building websites This is the difference between like crossing T’s dotting eyes Right and just throwing shit together Got across the T’s dot the eyes, right?

0:36:15
All right. Let’s keep going for a second and see what else we get everything else seems to be All right. Now we’re at the slider. This is what I really wanted. Oh, we have the same problem in the slider So we’re gonna focus on the image, which is a link focus on the heading which is a link They go to the same exact place So one basic rule of accessibility you have a component right you have a block If that block has a link we can look at something like this like a card Okay, like a portfolio card down here. We would be looking at a blog post card. You should not, just the general rule of thumb, do not link to the same place twice in the same block. So this image and this heading both link to the same place.

0:37:03
That’s an accessibility violation. There should only be one link per element, per block, okay? Now the fact that this is a link, there’s really three links in here. But this is okay because it’s a link to a different place It’s a link to the category of marketing. That’s fine These two things linking to the same place is the problem that has to be fixed So immediately the image loses its link the image should not have a link This is the link and if you want the entire card to be clickable There’s a technique that I continue to talk about over and over and over again and show and demonstrate called clickable parent, where we extend the clickable area of this heading to the entire card.

0:37:44
And then people ask, well, what about this badge? I want people to be able to click that too. So within the clickable parent technique, all you do is set this to position relative and it will elevate itself above the clickable area as its own unique clickable area. And people can still tab through these two links just fine it’s it’s a perfect solution to this problem that we have so you’ve got to learn the clickable parent technique clickable parent technique go to my channel look up clickable parent there’s two three videos now that are two videos that are dedicated to it almost and then multiple where I demonstrate it happening and then you can also if you have frames we use it throughout frames and in cards but it’s a key technique for doing cards correctly.

0:38:31
I want to really see what’s going on with this slider. So we’re going to inspect here. I’m wondering if this is a, is this the brick slider? Is this a bricks extra slider? I don’t really know. Let’s see what’s going on with it. Okay. Hmm. Hmm. Hmm.

0:38:53
Main article, aside article. We’ve got some semantic stuff going on here. It’s interesting. Why are these, hmm, I’m confused now. So you’re using sections, instead of sections you have articles. Why have these been changed to article tags? Now just to clear up, you know, what is an article in semantic HTML? It could be a piece of stand-alone content.

0:39:24
It doesn’t literally mean like blog article, okay? It’s an article like another word for item, but semantically it could stand alone from the other content that’s on the page, kind of like a blog article, right? You have a blog article that’s a standalone piece of content that could exist and still make sense in a different context. I would not say these should absolutely just continue to be sections. These are sections of a page. This is not this is not an article, okay? This is not an article. These are sections of a page. So we’ve got semantic issues going on here.

0:40:02
What is this aside? Okay, so when a side is content that’s like tangentially related to the other content on the page. You know, I don’t think that’s nearly as big of a deal as turning sections into articles. We definitely keep those as sections. Let me get into this slider here. So there’s that section. Here’s the div. Here’s the div. Here’s this Okay All right Open this All right. There’s our splide track and our list Oh What has happened here what is what is this Every slide is a section That’s Kevin Hart, baby, I Don’t know what’s gone. I’ve never seen this before Semantically though these these the this is where you would you would actually get away with saying article These are hundred percent could be articles Much much more than their sections. These are not sections of a I wouldn’t say that there’s sections.

0:41:14
I’m gonna need to now see I’ll go and I will reference the document official documentation and say is there some sort of Context where somebody has recommended to use sections with it because it’s a slider situation Is that why there’s some unique use case where sections make more sense inside of a slider than an article? I don’t recall seeing this ever, but I would go check the documentation here to see what’s going on with this. I wanna see if this has been recommended somewhere officially, but I can’t imagine that it is. It just doesn’t seem to be in alignment with the section tag.

0:41:56
Because if you look up section, right? Let’s go to Mozilla section HTML5. And here you go. The section element represents a generic standalone section of content, which doesn’t have a more specific semantic element to represent it. Section should always have a heading with very few exceptions. So, let’s see if they made the same mistake here. Yeah, see, so you’ve already violated by putting section but putting these in sections you’ve already violated the spec the spec and I don’t know why that’s I Don’t know what’s going on with this. This is semantic tag like Hell that we’re finding ourselves in you’ve actually downgraded these like, you know A heading has semantic value a span has no semantic value whatsoever whatsoever.

0:42:47
Like for SEO, for you know anything. Nobody cares about a span. Spans are completely ignored, right? An H heading has meaning. A paragraph has meaning. Span tags have no meaning whatsoever. You’ve downgraded all of these headings to meaningless semantically. So I, and I don’t know, but you had to do that on purpose.

0:43:08
This is not the default of this. The default would have been div, which also has no semantic meaning whatsoever, which is why when you use a div for like paragraph text you are downgrading the semantic value of your website. So I’m not sure what’s happening here. Make it make sense. Somebody make it make sense. We’re doing the same double link thing up here, so we got to lose the links. These are not clickable badges. So I would just say these all need clickable parent and the entire card should be clickable using clickable parent technique.

0:43:46
But of course we also have the issue of no slider controls. This is an unmitigated disaster is what I would refer to this as. Like from an HTML5 standpoint, semantic HTML, accessibility, this is an unmitigated disaster. And this is why I always say you know like you want to give people the ability to create a slider this situation would not have happened if it wasn’t like if you couldn’t just drag and drop a slider onto the page it would have been cards it would have been something done a different way and you wouldn’t have all the accessibility nightmares just because there’s an element that you can drag from a page builder onto the page doesn’t mean that it’s going to work as is like it should.

0:44:29
You’ve got to check these things. You’ve got to know what you’re looking for. You’ve got to audit, right? Alright, Jason says what is semantic value? But Sylvia jumped in, Derek jumped in, got an answer to that question. How are we doing on, oh we got good viewership today. We’re good. Okay, we’re going to get to Q&A in just a second. We’re gonna spend about five to ten more minutes on this on this site and then we’re gonna dive into Q&A.

0:44:58
I think we’ve, here’s, I love this website as a WDD topic because visually everything is as you would expect and visually it’s like, hey, this looks really great. This looks really great. I mean, we talked about some copy issues, you know, some things like that. But visually, most people would be like, man, you have just built, this is a fantastic website that you’ve built here.

0:45:28
But you open the DOM. This is why, gotta get me the t-shirt. Somebody get me the t-shirt. I don’t have time. Guys, I don’t have time to run merch, okay? I’m not interested that much in merch. But you want to get me a t-shirt that says, show me your dom, right? You want to get me some Bev related t-shirts? There’s a lot of t-shirt ideas that I’ve seen floating out there.

0:45:52
Hey, more power to you, right? But this is a perfect example of show me your dom. Because we look under the hood, and suddenly we realize from a semantic HTML standpoint, from a scalability and maintainability standpoint, there are major, major issues, okay? And these are not by any means like nit, this is not nitpicking, this is not small time issues. These are big, big, big, big, big issues. Accessibility issues.

0:46:23
And so things look one way on the cover of the book, but you get inside, it better be a good story too, right? It can’t be trash inside. And that’s why it’s called Web Design for Dommies, because we will inspect the DOM. We will look for the DOM. And by the way, we’ve checked the box of like, did you use the right page builder? This is built in Bricks. So we know Bricks has clean HTML output.

0:46:49
We know that Brics when used properly can make perfect semantic HTML. So we’re using the right tool. We’re just, we’ve got some things to work on in terms of our expertise level when it comes to semantic HTML accessibility, maintainability, scalability, really important things. So I’m glad that this was submitted today because it goes to show, there are ugly websites that are semantically perfect, and accessibility perfect, and scalability, maintainability perfect, they just happen to be ugly.

0:47:24
The person needs to work on their UI and their UX, or they just need to hire a designer to do those things for them, because that’s obviously not their skill set. But then we see the complete opposite, where we see a really good looking website but under the hood everything else is wrong. So we’ve got to get both sides of the coin taken care of. It’s got to look great, got a good UX, good copy and then when I show the DOM it’s got to look good there too. Alright, is that enough? You guys want to look at anything else here?

0:47:59
I mean we can look at SEO. I don’t, I see a lot of just standard stuff going on. We’re going to see the same problems over and over and over again now. Because from a scalability maintainability standpoint, I mean if we didn’t use BIM on the homepage, right? Yeah, see? Pad XS, BG Gray 50, it’s just littering utility classes everywhere. How many of these cards are there? I just feel bad for this person.

0:48:25
The minute Bev knocks on the door, this is where, let me just say again, you have to be an expert at self-defense when you’re doing web design. Self-defense against the Bev’s of the world. That’s what this is. Let’s be real. And against yourself too. There is gonna come a time where you just decide, man, I didn’t design that very well, I wanna update that.

0:48:48
I wanna make that card look a little bit better. You don’t wanna be in a hell of like, ah, I use utility glasses the whole thing. So now I gotta change every single one, man. You just don’t wanna live that life. But really, when it’s a client, the bevs of the world will absolutely come after you. And you’ve got to have good self-defense skills against the bevs of the world. And you see this situation, I just feel bad for this person, right?

0:49:13
It’s like the minute any of this stuff needs to change. How many of these cards are there? I mean, this is on a service page. How many services do we have? Let’s go to sales and marketing. Ah, there they are again. I just start to feel bad. It’s like the nightmares, the nightmares. You’re gonna have utility classes in your head as you’re trying to sleep because of this kind of stuff. So yeah, you see, right? If it is a repeating element, please, please, please, for the love of Bev, just make a BEM class. Just throw some BEM classes on there and add the styles to the BEM classes and you won’t hate your life. Okay, I think we’ve Let’s go back to camera.

0:50:02
Let’s go into Q&A, open Q&A. Your questions should be in all caps, and not the whole thing in all caps. Just put question in all caps, then write your question in normal case. And I’m gonna dive in and start to answer here. I’m also gonna pull this back up. Let me give you guys an example of topics, okay. Where did I have my little list? Just so I don’t leave anything out.

0:50:30
WDD, WDD Live, okay. So you can ask questions about business. So agency, freelance questions, sales, pricing, client management, workflow. You can ask questions about best practices. If you’re in PageBuilding 101 and you have questions about content from page building 101, now is your chance to get those things answered. Automatic CSS and frames related questions.

0:51:01
Bricks questions in general. SEO questions, marketing questions, whatever you have. Yes, Justin says brace yourself, the floodgates are going to open. I will get to as many as I possibly can and I will do my best to try to make them short and sweet and will answer and move on but I don’t like to leave any crumbs I told you guys that before it’s not I don’t sit down for lunch and leave a bunch of crumbs at the table so when I do live streams I don’t leave a bunch of crumbs in my content either I try to hit all the bases ok all the angles where can we mail you the swag merch?

0:51:38
It’s got to be good. Okay, it’s got to be good It so if it is good if you have well-designed swag merch ideas, I Don’t know. I should set it up. There’s got to be some way to set it up where I can open a little merch shop My cat’s entering the office Like no manners no manners I should be able to set up a little merch shop where if somebody submits a design, they get the proceeds of it or something. I don’t know. Is there a way to do that?

0:52:09
Maybe we can find a way to do that. Okay. Let’s go, let’s go, let’s go. A lot of people ragging on Bev. What kind of SEO strategy should you follow if you don’t want to only target a local audience but nationwide? For example, web development doesn’t have to be a local service only right okay really good question really common question about SEO and the answer is is fairly simple let’s use in the context of web development if you try to rank for what there’s only 10 spots for let’s just say general like and it wouldn’t be web development it would be like web developer but then even Google answers this question for you if you type in web developer that’s it just type that in Google has already identified that this is a localized search term it is not a national search term because people tend to prefer web developers near them even if you don’t write near me, you’re probably going to get near me related searches.

0:53:19
Google has already decided there is no global ranking for this topic. There is just this is a localized search and they’re going to show you local results. Now sometimes they might mix and match depending on what the query is, but the vast majority of them are going to be localized listings. That’s what you’re going to get. So if somebody’s like I want to rank for a web developer nationally, it’s kind of like well you can’t Jack because Google doesn’t even rank that term nationally. Google sees that as a localized term. So that’s the first thing is when you’re working in it whatever industry you’re doing SEO in you’ve got to figure out what Google has already determined to be localized versus national. If I did something like roofing materials or something, shingles, roofing shingles. Well now I’m probably, I’m looking for a product, okay, so Google’s identified that I am looking for brands of shingles and because brands of shingles are not local, whereas roofing contractors as a service is a localized search term. You can’t say roofing company and you’re in Georgia and Google’s gonna show you a roofing company in Washington because it happens to be the biggest one in the, people don’t really look like that, right?

0:54:35
They wanna show you local roofing companies to you, people that can actually serve your area. So they’ve identified that as a localized term. But the minute you turn around and search for roofing shingles, well, they know, you don’t care what state your shingles come from. They’re gonna show you national shingle brands. So Google has determined based on the intent of the searcher what’s going to be a localized term and what’s going to be a global term or a national term or whatever it happens to be.

0:55:02
So that’s the first thing you have to look at is what terms could I possibly rank for globally and what terms am I really only going to be able to rank in certain areas for, which Here’s why, by the way, a service area page, an SAP strategy, is very, very valuable. Because if you are targeting localized terms, then you’re gonna need to rank for that term in individual areas. And so that’s exactly where the SAP strategy comes in, of service area pages. So that’s kind of the overall answer to that question.

0:55:36
Now, if there’s something that is national that you want to rank for, you have the next layer of the onion which is how many other people want to rank for that. Because the minute you try to rank for something nationally or globally, I mean you’ve opened your competition to gazillions and gazillions of people. That’s not a technical value, okay, not a technical number, but you get the idea. There’s only ten spots, okay, and so how good are you, really? How much domain authority do you have? Because people ask me this all the time, I want to rank nationally for XYZ, and I’m like, okay, let’s pull you up in Ahrefs.

0:56:11
Oh, oh, you have a domain rank of zero, that’s cute. Well, you’re not going to rank for that anytime soon. So let’s focus on your local area for now, because you can actually stand a chance of ranking there, and then we’ll talk about national or global terms a little bit later. So there’s a lot of things at play, right? How much domain authority do you have? How long has your business been around? It’s endless.

0:56:37
It’s an endless amount of things to think about. On top of, does Google even consider that a global term or national term versus a localized term. All right, let’s see. I litter utility classes too. I feel like I’ve gotten better at fighting back with the BEVs. I do things for a reason as a designer so I can call her out on what logic is behind those changes. Should I wait with my dark mode setup for ACSS 2.5?

0:57:03
Yes. I feel like I rinsed your early videos on utility classes and adopted that logic early and find it hard to change. Yes. Yeah, so let’s talk about that. So I was using a framework called Oxyninja, which is now called Core, in the early days of doing this channel. And I’ve gone over this many times. Why did I create automatic CSS?

0:57:40
I created it because of the limitations of the frameworks that existed at the time. The major limitation of that framework at the time was it didn’t have any variables. There were no tokens. You were forced to use utility classes. If you didn’t use utility classes, you effectively had to abandon the framework. And utility classes was better than styling everything at the ID level, so that’s the direction that we went.

0:58:04
But then I really got tired of having, you know, sites that were still not scalable and maintainable. So I was like, the tokens are the most important thing. And I’ve taught this in PageBuilding 101. The tokens are the most important thing. The utility classes are helpful in certain situations, but they’re not, like by far, the tokens are the most important thing. And that’s why all the advanced users, all the power users of a framework, use the variables 90% of the time. And they use utility classes here and there, but it’s mostly variable work.

0:58:31
So, you know, there weren’t any real frameworks using variables. So I created one. And then there weren’t any frameworks that were adjustable, user adjustable. So I made it user adjustable. There weren’t any frameworks using scalable like a fluid responsive typography and spacing on mathematical scales and all this other so I created that. So it was just here are all the problems and we don’t have any tools available let’s create the tool that people actually need and you know it just it it makes workflow fantastic absolutely fantastic and like I said it takes one website to get the hang of it It takes two websites to enjoy it. It takes three websites to realize you’re never going to build a website without it ever again That’s the process that you go through Now some people don’t get past that first website for whatever reason they just they expect I guess You know magic to happen do they expect zero learning curve? I don’t know.

0:59:37
There’s a learning curve. It’s one to two websites. But that’s the progression you’re going to go through. So you’re going to use it on the first one. It’s going to start to make sense. You’re going to use it on the second one. You’re going to like it. You’re going to use it on the third one. You’re going to realize you’re never going to build without it again. That’s the typical progression.

0:59:54
You can look in the testimonials. You can look from the people. The nightmare scenarios where they’re like, now that I’ve used ACSS on so many sites, I went back to edit a site that doesn’t have it, and it’s an absolute nightmare. This is just what you’ll hear over and over and over again. It’s the absolute truth. How does somebody go from freelancer selling $500 websites to selling $5,000 sites and then becoming an agency owner? I’m stuck.

1:00:16
Okay. Really good question. If you’re at $500 right now, listen, very, very, very, very, I don’t care. You’ve got a It’s not anybody else is going to come in and be like that can’t happen. It’s your own head the minute I tell you this you’re gonna Five excuses is going to flood into your head of why this can’t happen But I will tell you this if you are at $500 for a website right now There is nothing Nothing.

1:00:46
Nothing. Let me repeat. Nothing. I’m saying this many times so that every, because right now it’s already objections are popping into your head. There is nothing. Stop listening to yourself. There is nothing stopping you from being at $1,500 tomorrow.

1:01:00
Or if somebody calls you five minutes from now, there is nothing stopping you from getting them at $1,500 instead of $500. Absolutely nothing. So that’s your first goal. Get to 1500. Now when you get to 1500 I want you to get to 2500. When you get to 2500 I want you to get to 5000. When you get from 5000 to 10,000. You get from 10 to 25. When you’ve done a project to 25, you’re probably clear of all of the nonsense and mental and emotional junk and garbage that stop you from going any higher. You can get to 50, 75, 100, whatever. Ok? But those, and it’s all mental, emotional, that’s not all, sorry, that’s inaccurate. Let me back up. It’s 50% mental and emotional garbage that’s stopping you from getting to 5,000, 10,000 whatever and it’s 50% sales skills. And when I say sales skills, I do not mean by any stretch of the imagination like used car sales tactics. Okay I’m not talking about tactics or like how can we how can we trick people into signing at 10,000 instead of 5,000.

1:02:28
That’s not I’m not in that universe whatsoever. When I mean sales skills I mean can you get on the phone, can you ask the right questions, can you push back in the right areas, can you outline your process, can you be confident, can you talk about price, do you know how to bracket people, do you know and bracketing by the way is not a, there’s zero manipulation in an effective sales call. Zero, in fact what I teach in sales is to actually push back to where the person feels, they feel a hundred percent like I don’t need this project, I’m not telling them what they want to hear to land this project, because of the way that I pushed back. They realize like I’m just genuinely curious and I’m happy to have the opportunity.

1:03:23
What is the word that we use all the time? Positive indifference. I’m positively indifferent. I am super positive that we’re on the phone right now and that there’s this opportunity in front of me, but I’m gonna make sure that it’s the right opportunity for my agency. I am not on the phone to persuade you into doing this project with me no matter what. That’s not what I’m doing here. So I’m asking questions, I’m outlining my process, I’m telling them like it is, I’m being honest and open with them. I’m a lot of times pulling up their website talking about different things that are important to them. I’m making it very interactive. I have a whole in the inner circle the whole training of checkpoints.

1:04:02
It’s called a sales checkpoint training. You’ve got to hit all these different checkpoints and here’s why all these checkpoints matter and why they’re so important. And if you can just confidently lead people through a call like this and you’ve gotten over the mental and emotional garbage that’s holding you back on your pricing, there’s nothing stopping you from being at 10,000, 15,000, 20,000, 25,000.

1:04:23
You know, it’s gonna take a little bit of practice. So I’ve done sales call trainings with people where they’ll book a training session with me. We’ll get on the phone and either I will grill them as if I’m wanting a project from them and I’ll see how they do. Or what they’ll do is record a sales call. Now you gotta be in a state or country, whatever, where you can record people. But they’ll submit the recording.

1:04:48
They’ll be like, here’s the sales call, here’s how it went, and I’ll listen to it with them, and then I’ll pause it and be like, eh, okay, here’s what we should have done in this situation, right? But if you are, it’s 50% can you lead a good sales call, and 50% did you get over your mental and emotional garbage. But I will tell you right now, 500 to, I would say 500 to $2,500, if you’re landing $500 websites, you can probably land $2,500 websites without learning a single extra thing about sales.

1:05:21
It’s just the number you’re giving them and the confidence and like that’s it. That’s it, you are stopping yourself from charging $2,500. Okay, I think that answers that enough. What are the best practices for bi-directional relationships in BRICS and MetaBox, especially since in BRICS, additional controls and query loops are heavily missing. There is a lack of functionality with bi-directionally queried items in BRICS. But I think I need more insight into what you’re actually asking.

1:05:54
Because you’re just asking what are the best practices for bi-directional relationships in BRICS. actually asking, because you’re just asking what are the best practices for bi-directional relationships and bricks? I need, are you, what limitation are you, are you running into? I guess I need more clarity there. If you’re the only one talking, why do you wear headphones? Because I have to be able to hear myself, right? It’s tough to record when you, it’s just very, it’s weird.

1:06:19
It’s weird when you can’t hear yourself. I also need to hear the sound effects, and then sometimes I play videos or whatever, I need to be able to hear that too. I don’t want to be taking headphones on and off and all that. Is it possible to integrate Bricks Forms with HubSpot or Zapier? No. Bricks Forms is, so this is a little controversial, I guess.

1:06:46
Like Elementor has a forms thing. Everybody ragged on Oxygen for the longest time because Oxygen doesn’t have a native form. And Oxygen actually did the right thing in this in my estimation and they said why do we need native forms? There are professional form plugins out there. Forms are a very very intricate complicated in-depth thing and so what you see with the Elementor’s forms of the world the Bricks forms of the world they’re insanely limiting insanely limiting you always should invest in a professional forms plug-in such as WS form and rock that on every single website and then there’s people are like well I’ll use WSForm when I need it, I’ll use BricsForm for simple forms.

1:07:41
No. This goes back to scalability, maintainability. It goes back to process and workflow. Anytime you swap between different tools, same thing with the people who say, well, I’ll use this page builder for that project, this page builder for that project. You know what that tells me? Your process is a nightmare. It’s spaghetti.

1:08:03
It’s not organized, it’s not, you can’t be efficient with your workflow when you’re constantly jumping from one tool to another. Yes, oxygen and bricks have fundamentally the same philosophy, but shit’s all in different places. You can’t easily, the shortcuts are all different. You can’t easily just swap back and forth and say that your workflow is efficient. You can’t build a team. You want to scale above being a freelancer, you got to build a team.

1:08:33
Well, you can’t have one guy that’s great at oxygen, but sucks at bricks, and then another guy is good at bricks, but sucks at oxygen, another guy that only works on Elementor sites, and another guy that only works on Divi sites, and what are you doing? You cannot scale like this. This is an absolute atrocity of like trying to create an agency. If you want to scale, you pick a tool and you master the tool and you create a process and a workflow around the tool.

1:09:01
So we say every site is going to be built in bricks. There’s our process, there’s our workflow, everybody is a master at bricks and we’re good and we’re efficient, we’re fast, we’re everything. We know how to cross our T’s and dot our I’s. Same thing with a form system. Think BIM. Bricks is the block. A form is an element. Okay, I want to use WS Form to fill that gap right there. WS Form is our go-to form system.

1:09:27
Everybody on the team knows how to use WS Form. Everybody on the team knows how to integrate WS Form with ConvertKit or ActiveCampaign or whatever else our client happens to be using. HubSpot, Salesforce. We picked a tool that integrates with all of these things. We’re not in a situation where, oh sometimes we use the Brics form and sometimes we use WS form and we use the Brics form here and all it has no integration so now we have to replace it with the WS form but we weren’t even using WS form on this website. Now we got two different form systems running on the website. What are we doing? What are we doing? These are easy problems to solve. Choose a form system, plug it in, master it, use it on every single website. So it’s all about process and workflow efficiency and making sure that everybody on the team can follow the same process and the same workflow and we’re not jumping around all over the place because that creates inefficiencies, that creates mistakes, that creates breakages, it creates a lot of things, a life that you don’t want to live. So and but people I don’t know they have this like well WS form cost money none of these plugins cost you money, none of these plugins cost you money. So let’s go back to pricing. I’m going to do a custom web design project for a company, small business, big business, doesn’t matter who it is.

1:10:52
Here’s the cost to build a website. Here’s your cost to manage the website on an ongoing basis. That management includes hosting. That management includes all of the plug-in licenses that we use across our workflow. So guess what? It’s not, oh we need this tool for this client. No, we have this tool in our tool bag. These are the tools that we use for all of our clients and we spread the cost of those licenses out across all these management fees and yeah you can you absolutely is profitability baked into that too. Okay so you know automatic CSS costs for the what the highest plan $149 a year. A year.

1:11:35
Okay, so one management plan, and I’ve paid for that in two months. 40 management plan, how many, like now I’m just making tons of profit on having this tool in my tool bag. Especially because it’s enhancing my workflow and I can get sites done faster, make them more consistent, and then oh, add frames into the mix, my gosh, we’re building websites twice as fast now.

1:11:57
And these tools are paying for themselves. You look at these things as a cost, that’s broke person thinking. That’s poverty thinking. Okay? These tools don’t cost you money. Your clients pay for them in management fees of the website. And you’re actively managing the website. So you’re making sure that, and this should be happening. I don’t know what this obsession with is with handing off websites to clients and say, good Good luck, Bev. Like, Bev does not know what she’s doing. That’s why we make fun of Bev, okay? And we’re just poking fun.

1:12:32
It’s just, it’s all in good humor, okay? We’re not being mean. Everybody like attacks me. You’re so mean to Bev. I’m like, first of all, Bev doesn’t even exist. Get off my back, okay? She’s just a representative. But it’s all in good fun. But do you think in any world I’m going to advocate for handing off a website to Bev? This is like your lawyer drafting up contracts and then being like, well here they are, good luck, all right, if you need to make any changes, you know, good luck.

1:13:04
A lawyer would never do that to you. A photographer, like, hey, I spent all this time learning photography, I’ve taken, here’s the raw files, why don’t you go edit them in Photoshop. There you go, you go edit them. And now we got people fucking opening their photos, their family photos in Canva trying to do. These people are not going to get good results, they’re not going to like you very much. Okay, when everything is broken and sucks in their life, they’re going to remember, oh you handed it off on to them. Even if they request it, you have to protect Bev from herself. I know Bev wants to get in there and tinker around You’ve got to protect Bev from herself So our rule is we’re managing the site We’re made like we tell them that up front we are and sometimes they’ll push back Well, we want to do this and we want to do this and you just start to ask them like okay, let’s all pause Let’s take a breath. Let’s think about this for a second How much experience do you have in SEO?

1:14:03
Zero, okay. You remember those SEO goals you told me you had? Okay, every change you make to a heading, every change you make to text, every change you make to images, there are SEO implications involved. So who’s gonna be on the hook for your SEO results? Is it me or is it you? Now, I’ll actually tell them this, like I’m fine with you taking over if you are also willing to blame yourself when things go wrong.

1:14:31
And then clients start to realize, oh, this stuff impacts things I didn’t even know that it impacted. They don’t know that changing a heading impacts SEO or swapping out an image can potentially impact SEO. They don’t know that. They just assume, hey, I want the control to do this and that. Conversions, hey, how much experience do you have in copyright?

1:14:54
Do you have a professional copywriter on your team? No, no you don’t, okay. So every heading you change, and every paragraph of text that you change, and every bullet that you change affects your conversion rate. So who is on the hook for these analytics, right? When it turns out that your conversion rate has dropped by 50%, is that my fault? Right? We got to be clear, whose fault is this going to be? They don’t realize that there are these implications. And it goes back to, hey, I am the professional. That’s why I’m being hired, presumably, because I’m the trusted professional. So as the trusted professional, let me tell you right if your lawyer wouldn’t let you edit your contracts yourself and You would agree that they should not let you do that because that would be a very very bad thing Then I should not let you edit your website. I Should manage the website for you. So if you want changes I can advise on how best those changes should be approached and Then here’s what I’m willing to say when I’m managing your website and shit goes wrong I will take a hundred percent of the responsibility won’t be on you it’ll be on me I am the professional so you you do have to be willing to live that life you’ve got to be willing to say I am responsible for the results of this website but that’s how it should be because they’re hiring a professional so I am not I do not advocate for handing off websites to clients.

1:16:27
I don’t advocate for letting clients edit websites unless it’s unsubstantial stuff. So for example, let’s say a business has high turnover in their employees and we’ve got all their employee profiles on the website and stuff. I will make it so they can go in and delete an employee and add a new employee, fill out some custom fields, hit publish, it shows up in the grid. That is inconsequential stuff right it doesn’t affect SEO it doesn’t have it has to happen right doesn’t affect you know their conversions is whatever it’s just a thing that gets managed on the website whatever they want to be able to drop employees at employees and not bother us okay no problem whatsoever fine but if they’re just talking about like oh we want to move the sections around we want to change images we want to know no and then you know even if they’re going to pay you to fix that stuff when it goes wrong that’s still not fair to them I should have warned them ahead of time hey very likely the things are going to go wrong when you do this and then it’s going to cost you more money for me to come in and fix it so and I’m talking to you guys differently than I’m talking to actual clients when we have this discussion obviously because you guys need to hear the absurdity of it I’m trying to make sure that you all hear how absurd this concept is of, hey, the professional just throws the work at the person and like, oh, now you do it.

1:17:48
That’s absurd. It happens in no other industry whatsoever. So I don’t know why people advocate that it should happen in ours. And again, it goes back to the topic of general professionalism in this industry. There ain’t nobody licensing us. Lawyers are licensed, doctors are licensed, and the licensing boards have said, no, you can’t actually give contracts to your client to edit themselves, bad thing.

1:18:15
So we have to come in and just be willing to say that. I don’t advocate for licensing in web design or any other institutionalization of web design. So we are responsible for setting our own standard. That’s what I’m trying to do. All right. Can you share more on the exciting announcement in the inner circle? When do you plan to make the announcement? I gotta go draw some stuff up.

1:18:40
I’m hoping to get the announcement this week though. But I can’t give any more details at the moment. All right. Question, using the nestable tabs element in bricks. How would you ensure it is semantically correct and accessible? I Have not used the nestable tabs element in bricks yet So I would have to throw that on a page and then and then see but I know that there There’s a lot there’s a lot of excessive it gets into re do they have the right aria labels for aria Expanded and all this other stuff. There’s a lot to look at there. It’s really not an easy question to answer. I know that out of the gate their accordion element thing is not, at least it wasn’t last time I checked, you can’t open them with keyboards and things like that. So that required a little bit of adjustment. But honestly I stopped using those Bricks elements because we’ve been working so hard on frames elements that now I’m using the frames accordion, we’ve got tabs coming next.

1:19:39
I’m using the frames modal, frames table of contents. I’m using everything from frames now. So I’m not really doing a lot of inspection on Bricks native stuff. Okay, does proper semantic HTML help with SEO? Yes, absolutely, absolutely. And the easiest way I think to explain this is, everybody knows what a heading tag is. Everybody knows what an H1 is. It’s the most important heading on the page. There’s only one of them.

1:20:07
There was a time where the spec tried to change. People advocated for changing the spec. And it became, you can use an H1 in every section. But then, people got back in their right minds, and they realized, that’s not such a great idea. And so it went back to the standard of one heading one per page. All the sections have your H2s typically. And then cards, things like that, within those sections have H3s. And really H1s, H2s, those have the most value. H3s have a little bit of value.

1:20:48
H4 and on don’t really have all that much value, but they do still help organize things for screen readers and all of that. But if we take that concept, very basic concept that everybody can understand and just say, would changing all of those heading tags to divs have an impact on SEO? 100 percent. So we take the same thing like a section, like a list, like they all have their place, they all have value and so we should be using them. It helps, remember humans, SEO is not humans reading your page and determining how good is this content. It’s bots, bots crawling a page and trying to figure out what’s happening here and figure out the content.

1:21:34
If your semantic HTML is a disaster, how do they figure it out? Remember, they’re skipping divs, they’re skipping spans, they’re skipping a lot of these, you know, contextually value list tags. They’re looking for tags of value. They’re looking for headings. They’re looking for lists. They’re looking for sections.

1:21:59
They’re looking for articles. They wanna know what’s an aside. They want to know, this is very, very important. Okay, so yes, it has a big, big, big impact. So yeah, it’s, and so SEO and accessibility, which we talk about a lot as well, huge implications for accessibility with semantic HTML. Both of those things important, and I will say this, the more important accessibility becomes, accessibility will also be an SEO ranking factor. 100%. It was just like they did it with mobile optimization. So back in the day, we didn’t have to care about responsiveness.

1:22:38
And responsiveness had no impact on SEO. And then responsiveness came into the game. And it was like, oh, we got all these devices, so websites are gonna have to shift, you know, depending on the device. And people were like, that’s actually quite important. And Google was like, you’re right, it kind of is important. But it’s not going to affect rankings yet. And then responsiveness got even more important. And then it reached a tipping point where Google was like, if your website’s not responsive, we’re probably not going to rank you.

1:23:07
And the same thing is going to happen with accessibility. Almost guaranteed, especially because of the looming legalities of inaccessible websites. So Google is going to start to say, hey, we want to provide the best experience to the most amount of users. Therefore, we are going to prioritize accessible websites over inaccessible websites. Doesn’t mean they’ll always win, but it is a factor in ranking. If it’s not already, by the way, they don’t tell us what the ranking factors are. It very well could already be a factor. All right, are there general padding gutter settings that work on most websites?

1:23:44
Can I just create a clamp for gutters and use that over and over on all websites? I mean, there’s nothing stopping you. The question that would determine that is, what does the design look like? So if somebody gives you a design, you have a designer, for example, they give you a design in figma and you’re trying you’re not pick remember pixel perfect websites are dead but we are dealing in ratios we are dealing in balance we are dealing in rhythm we are dealing in design concepts so your h1 may not be like if it’s 56 pixels in figma it may be you know 56.245 because we’re using a clamp function or something right in but that doesn’t matter whatsoever.

1:24:28
Is the H1 versus the H2 versus the H3, do they follow the same ratio? Does your spacing balance? Does it follow the same ratios that are given to you in the design? So that’s when you have to change it. Now, if you’re doing your own designing and you just wanna use the same kind of spacing on every website, I mean, there’s nothing stopping you. Nothing’s stopping you.

1:24:49
But automatic CSS, for example, is designed as a framework for custom built websites and no limitations. So we have the ability to just go in. You don’t ever, when you’re using automatic CSS, you never see a clamp function. Never ever will you see a clamp function, anywhere. You don’t see them anywhere. In the dashboard, you just set minimums and maximums hit save you’re done move on with your life and then you just see variables on the front end you’re just using tokens to reference everything so you you know you can make changes on the fly with automatic CSS and never generate a single clamp function ever again in your life and that’s what I would recommend because generating clamp functions every time you need to and clamp functions by the way when they’re done right you want to change the maximum you also have to change the middle value.

1:25:39
You can’t just change the maximum. So you have to go generate a new clamp function. It’s very, very manual. It’s very laborious. You know, I didn’t want to live that life. So I was like, we need a dashboard. Make this easy. Any idea of what is happening with Plaster? I mean, I have an idea. I have an idea of what is happening. I think you’ll know very soon. How do we decide what our canvas size should be in Bricks for each breakpoint?

1:26:06
Really good question. So in Bricks, let me see if I can pull this up. It’s kind of a confusing aspect, I guess. I got to share. Hopefully I don’t remember that I’m sharing and that or you know, try to share and then I’m not sharing That happens from time to time We just need any page Okay, so here’s your breakpoints up here and we see 1279 991 767 479 we click on this one as an example 1279 it’s showing me 12 7 8 This is not I don’t think these are appropriate defaults now Thankfully bricks allows you to change this what I actually want to see when I am designing websites I want to see where this breakpoint is most likely to break things one pixel below where the breakpoint starts, right?

1:27:19
It’s most likely to break things one pixel above this breakpoint, 992. So what you’re going to actually do is go into Excel and click on this and say, I want to see, when I click on this breakpoint right here, I want to see this width of a website. So then I can see exactly where the breakages may occur. See now I’m viewing 992, which is one step above this breakpoint right here. So, because if you think about it, like if I go back to where we were, so 1279, this is 1278 or whatever, update. So I click on here, things can still look good right here. I don’t realize that on a slightly smaller device before the next breakpoint that things actually don’t look so hot. So what I tend to do I think what we’ve done in our blueprint actually is we go in and set the builder width of what we’re actually previewing to one pixel above the next breakpoint down. So this would be 992 and I can hit update and then I come into this breakpoint right here which is the 991 but I and see right there it’s showing 768 one pixel above the next breakpoint and then I come down here 479 shows me 479 in the builder I wanted to show me 360 so I put that in and now it’ll show me look how thin that is that is like the minimum device size. So I know if it looks good there, we’re good. But I had to change this. I was seeing 479 and it could look fine on 479 and look like absolute dog doo-doo on 320. So I think it’s good to go in and set your what you’re viewing at one pixel above the next breakpoint down.

1:29:08
Hope that answers that question. All right back to camera. I would think of it you get penalized okay proper semantic HTML. Have YouTube page builder gurus reached out to you angrily for forcing them to have to relearn everything CSS because viewers are complaining that they’re not doing it the Gary way? No I don’t know nobody no I don’t think they ever would. What I I don’t care I don’t care what other page builder people do. I only care about my standard. It’s kind of like in athletics. I’ve talked about this before in interviews. I don’t care what other people’s jujitsu looks like. I care what my jujitsu looks like.

1:29:54
And so that’s what I worry about. And then that’s what I teach. And if you hired me to teach jujitsu, I would teach the jujitsu to the highest possible standard that I could teach it to. And there’s other people teaching dog doo-doo. I mean, that’s up to them. And it’s up to the people that follow them to do their due diligence. I got a lot of do’s in these statements. It’s very hard to say. Yeah, you got to do your due diligence of who are you learning from? I don’t know. Just look around, see what the options are. Does what I say make sense to you? Can you find any flaws in the logic or the thinking or the workflow? Are there any problems occurring from what I’m teaching? So I think it’s fairly objective.

1:30:34
I think people will say that it’s subjective because they want to avoid the objective fact that what they’re saying has problems. And so they’ll just try to pretend that, oh, it doesn’t really matter. Use whatever page you want, whatever utility class system you want, whatever framework, whatever, whatever, whatever, all the same, whatever. Look at how I wrote an article, detailed article. People cannot contain their, they cannot stop themselves from getting all up in their feelings. I wrote an article that is thirty, thirty five hundred words, I don’t know, somewhere around there, maybe three, I can’t remember exactly how much it is? Very detailed is what I’m getting at about using Tailwind in page builders. Now do I have anything against the Tailwind framework? No absolutely not. I don’t. Fundamentally I still think even outside of page builders there’s some flaws like for example the assassination of your HTML.

1:31:32
Tailwind assassinates your HTML. If you ever want to switch away from Tailwind to a different framework, you’re done. You’re done. That ain’t happening. Okay? Absolute assassination of the HTML. So, that’s a problem. I see that as a problem. But do I have any, like, anything against Tailwind? No. I care about my Jiu-Jitsu.

1:31:51
I don’t care about other Jiu-Jitsu, right? I don’t care what these other people are doing. So I have nothing against it. I don’t, I have nothing against the guy that created Tailwind. I’ve never met him in my life. Never talked to him ever in my life. Don’t know him. Don’t care. Don’t care But I identified that when you’re using tailwind in page builders Which if you don’t know what tailwind is it is a pure utility class system Pure utility and it’s a utility first system, which means use utility classes for literally Everything that is the philosophy of Tailwind, okay? Now, if you’re writing code in a code editor, this is a very different environment.

1:32:34
You have multi-cursor editing. You have the ability to multi-select things from page to page to page. You have the ability to search across an entire website and replace. None of these tools are available to you in a page builder that are essential for using Tailwind in a code editor. Therefore it is objective fact that you are missing what you need that makes Tailwind scalable over here and maintainable over here is not available to you in page builders. Therefore you should be very very very highly highly highly cautious of using Tailwind in a page builder. That is an objective fact and by the way the article if you go read it I went and I looked at the Twitter feed of the guy who created Tailwind and there are certain things he talks about in terms of Tailwind philosophy and scalability and maintainability and I quoted him. His arguments for using Tailwind in like a code editor perfectly demonstrate why Tailwind should not be used in a page builder.

1:33:43
So half of the article are quotes from him and people still couldn’t take it. These the Tailwind fanatics the minute it got published, oh you’re just attacking Tailwind, oh you’re this, you’re that, started calling me names, not one person refuted a single thing in the article. They cannot refute it, apparently. They don’t even try. They just call me names, do this, do that. It’s that kind of situation, right? It’s like, but do you have an argument for the things that I said? Like, you’re just going to call me names? That’s all you have? I mean, more power to you if that’s all you have, but you’re kind of demonstrating that there’s a big failure here to actually argue against what I’m saying. And we find that same exact thing in page builder land where it’s like, well, you know, oh, he just hates Elementor.

1:34:34
He’s just a hater. He’s just a this. I’ve never met a single person that works for Elementor in my life that I know of. Don’t know, don’t care. Nothing against them whatsoever. What I know is the objective reality of the DOM being an absolute nightmare, of the workflow being an absolute nightmare. It is not a class-first workflow. It is not a professional workflow. These are objective facts. Some people hear an objective fact and they get all up in their feelings. Okay, that’s for them. That says more about them than it does about me.

1:35:07
I don’t care. All I care about is professional workflow, best practices as I know them to be, getting better personally every single day and then whoever else wants to get on board with that, let’s go, come along for the ride. So yeah, I you know whatever anybody else does making their videos that’s up to them. And if they recognize just like I do, okay, so there have been many times early on in accessibility, guess what? I had to watch other creators and sit here and realize I don’t know enough about accessibility I’m not creating accessible cards I’m not creating accessible navigation I’m not and you have to actually be able to acknowledge I’m fucking that up okay let me watch more of this creators videos oh okay good let me start implementing these practices. Now I’m learning more things. Hey, I’m getting better. My jiu-jitsu is growing, right?

1:36:08
It’s the ability to look at another jiu-jitsu practitioner who says, hey, this technique shouldn’t be done like this, it should be done like this. Here’s why they demonstrate, they show all these examples. And then I go, oh, I’m fucking that technique up. All right, let me start to incorporate what this guy says. Hey, look, it’s working out better for me in my life. All right, and since I’m an educator, I’m gonna start teaching these things now because I don’t want other people to make the same mistakes that I was making.

1:36:32
That’s the natural progression. There are some content creators who cannot do that. The minute they see something being done different from how they do it, they don’t have like a, oh, here’s my logical reasoned argument for why it should be done this way. They just get up in their feelings. Oh, he’s just over engineering things. He’s just over engineering. And you can do it however you want.

1:36:56
And da da da da da, all these other excuses. And at the end of the day, you look under the hood and you realize it’s absolute nonsense. It’s absolute nonsense. They’re not saying anything of substance. Therefore, let’s move on and let’s not worry about it anymore. Okay, that was a long-winded answer for that question. Any best practices when it comes to custom post types, custom taxonomies, I’m not sure when to use standard blog categories and when to create custom taxonomies. Very, very, very, very, very good question. Very good question. Okay, so this is going to be hard without a pure example because it’s going to depend on context, but I can give you, I can give you an example let me see if let’s let’s screen share here okay let’s go to dashboard I think this will be I think this will be a decent example would it be here or would it be frames yeah now it would be here so under docs this is for our documentation.

1:38:05
Okay, so under docs, we have framework categories. Under utilities, we have, oh, there it is again, framework categories. But these are two different things. A piece of documentation is one thing, and that’s its own, obviously its own custom post type, right? Then we have utilities. These are all of the utilities in automatic CSS. This is where the cheat sheet is generated from.

1:38:28
So you think about like, let me go here, automatic CSS, cheat sheet. So again, we talk about like building a scalable, maintainable resource, right? So this is quite, would be quite a nightmare to manage manually, I think we can all agree, right? It also wouldn’t be sortable in the way that it is and filterable and like pro mode, what’s a class, what’s a variable, yada, yada, yada, be able to live filter this like this. Every single one of these is an entry in the database.

1:39:02
It’s its own thing. They’re all categorized. See categories, these are all flexbox controls. These are all text controls, yada, yada, yada. So they’re all organized. So when we’re creating documentation, we also want to be able to reference utilities to specific pieces of documentation. So there’s bi-directional relationships going on there. But we had to determine, hey, we have this thing called framework categories because a utility can live in border radius, but so can a documentation piece.

1:39:31
Therefore, they need a shared taxonomy. So anytime your website needs a shared taxonomy, you can also then determine, like with posts, would I be categorizing my posts in these categories? Probably not, that’s not what we use our blog for. So we use our blog for a different purpose, therefore these are a separate taxonomy from our blog posts. However, I have been in situations where the blog and the services and something else all shared the same taxonomy because they were writing posts on these things.

1:40:09
And now you only have one taxonomy to manage versus having three taxonomies to manage. So you really have to look at the underlying architecture and just how you’re gonna organize content on the website and what content needs to be able to access what other content and how the taxonomies come into play there. And you’ll see a, hopefully a pattern evolve. If you just map out some likes, like if I was doing this, let me brainstorm five pieces of documentation.

1:40:36
Here’s five utilities, here’s five blog posts. Does it make sense ever for them to share a taxonomy? Well, it makes sense for the utilities and the documentation to share a taxonomy. But the blog post can have its own taxonomy over here, which is the default WordPress taxonomy BAM. There’s your answer. That’s what we roll with So you just kind of need to map it out a little bit whimsical really helps for this, right? So you pull up whimsical Let me go to create new board BAM, okay, so architecture So here’s your website right here. Just that’s actually not your website. It would be this right there. Okay, so website and then you start to map out like I you know I love whimsical for doing this I do this for all like SEO site mapping everything, you know You drop your home page in you got your about page Here’s going to be your services page your contact page then you come into services and you’re over here. This is a CPT obviously, right?

1:41:31
You have like service page one service page two and then you can also create another one of these. And these can be your service categories, right? And then you put in your service categories, then you can link them, you can draw them across, you can link them together. Or you can just do it like this, like cat one. And then you bring off this and this service number one, service number two, whatever. And then you just kind of see how you’re outlining things. These are obviously your categories right here. And then you may have another CPT over here. And you just determine, if you find yourself, here’s cat number one for this, this will be a good example, cat number two.

1:42:11
If you find that these terms right here perfectly overlap, you just answer your question. They need to share a taxonomy. So if you just do some general kind of architecture layout of how you want this site to be organized, this can often just answer your question right off the bat. If these things are completely different, then they need their own taxonomy. So that that’s probably the best way to answer that question. All right back to camera.

1:42:38
I don’t have WP code box yet. Is that okay to simply create my custom CSS variables in the global in brick settings instead? I mean, I guess it’s exactly the same. Is there any drawback? Yeah, you can absolutely do that. It’s not a problem. You don’t have to have WP Codebox, but it’s going to make your life easier in a few different ways. By the way, if you have WP Codebox, they have a native integration with automatic CSS now. So when you’re writing variables, it’ll auto suggest variables to you. You know, there’s a lot of helper features in WP CodeBox. Let’s see, let’s see. And the ability to write SAS. So I know if you’re in page building 101, then you know, you probably have no idea what SAS is, but I’ve shown SAS in the inner circle now a few times.

1:43:24
I’ve done maybe a little bit here on the YouTube channel at some point. But SAS is a, it’s like, you know, CSS on steroids. And it just, it provides so much, so much extra functionality and efficiency plus we just released this let me show you guys this So let’s go to we’re still working on all this documentation. This documentation is a monstrosity of work Let’s go to advanced Okay, check this out, so if you use WP code box you will have access to internal components of automatic CSS that most other people don’t have access to. For example, functions and mixins and internal variables. So you can import functions in WP CodeBox. And there’s a fluid clamp function that allows you to generate custom clamp functions on the fly if you want to.

1:44:24
There’s REM, percent, VW, VH functions, power functions for raising to an exponent. This comes into, it comes in very handy if you want to expand, for example, the math scale very easily. But if we look at something like mix-ins, this is, you know, really, really, really important. So SAS, you know, you don’t have to write media queries if you use automatic CSS, especially if you’re hooking into the mix-ins for automatic CSS.

1:44:50
So you can simply write, for example, include breakpoint, and then you don’t even need to know what the values of the breakpoints are. It’s like, I just want this to happen in my L breakpoint and down. So you’re writing custom CSS at a specific breakpoint, you don’t write a media query, you just write the mixin, put the extension of the breakpoint that you wanna target, like XL, LMS, whatever, and then put your styling in here. And it’s gonna automatically write the media query for you.

1:45:14
And then if you want that to be a min-width media query, you just write breakpoint up instead of breakpoint. So it’ll go from that breakpoint and up, obviously. And you put your custom code in there, and it writes the media query for you. And again, if you’re writing media queries from scratch, you have to know what the value of all your breakpoints is. It’s really freaking annoying. So you’re constantly having to go reference, what are my breakpoints again, what are my breakpoints again?

1:45:34
With this, you just need to know what your token is. XL, LMS, whatever you want to target, and you’re off to the races we have fluid text with fallbacks right include fluid text and then you put your your raw value your min your max and it’ll write your font sizes with fallbacks into your custom CSS which is really really handy there’s same things for spacing buttons you want to create a custom button here are all of the things that a custom button has if you want it to be the same as your other buttons, right? Well, you don’t have to know what all these things are. You just say include button defaults and it’s going to include all of your defaults and then you can add whatever other styling you want to it to make it a custom button. So there’s all these little advanced helper functions if you have again WP code box you can easily hook into all of this stuff.

1:46:26
Internal variables, you can use all of our SAS variables, which if you know the power of SAS variables, much, much, much more powerful than actual CSS variables. But again, these are for advanced users. But this is the, I don’t know of another framework that does this, that allows you to do this, that gives you this level of power and control. I don’t know one. I truly want automatic CSS to have zero limitations. It only has pros, it has no cons. That’s what my goal is.

1:46:57
It only has pros, it has no cons. So that’s what we’re working towards constantly. All right, that was just a little, but again, that’s WP code box would be required to hook into that kind of stuff. And I’m gonna be creating videos for all of that. It’s for as difficult or like as like foreign as that may seem it is insanely easy to actually use. So as soon as I do a video you’ll be like oh I can use that got it it’s very easy. Alright let’s go down I already answered that already answered that. Is frames adaptable to any framework or does it work exclusively with ACSS?

1:47:38
Works exclusively with ACSS. Because ACSS is what makes frames easily scalable and maintainable. Do we need a better word to describe sales or maybe a better definition for many sales is a dirty word? I mean, in some context, I don’t think you can get around it, but, I mean, I agree, it does have a negative, that’s why I have to, every time I mentioned teaching sales, I’ve got this whole caveat of like, but not like that. Okay. Not like the way you might be thinking. It is kind of annoying. Would it be okay if I put your name and picture next to other people in a section called top by the best on my website? Sure. Whatever.

1:48:19
I thought you was listening to Tupac this whole time. It’s been a while since I’ve bumped some Tupac. My whole high school career was Tupac and Biggie though. And Jay-Z. You mentioned giving the client an opportunity report at the end of the discovery step. What do you include in the opportunity report? Can you show us an example? I can’t show any examples because that’s like proprietary stuff that’s not mine. So that’s not possible. But yeah, opportunity, it depends on, so here’s the biggest thing people don’t understand about discovery I guess. Because I talk about selling discovery, but I don’t, it’s not that everybody gets a discovery package, like it’s, I’m not Oprah, like you get a discovery package, you get a discovery, and they’re all the same thing.

1:49:14
It’s what does this client need from us, and what do I need to know in order to do those things correctly? So if a client says, we’re gonna want a website, we’re gonna want a PPC campaign, we’re gonna want analytics, we’re gonna want SEO, okay, now I’m thinking, all right, we need keyword research, oh, copy, we’re gonna want you to write the copy for us.

1:49:40
Okay, so now I’ve gotta do a whole copywriting workbook, which I just did a training on in the inner circle. It’s a 90 minute training on how to lead a client through this workbook to get very, very valuable copy and messaging insights. So that’s gonna be part of their discovery package. Keyword research is gonna be part of their discovery package. Oh, they said they want PPC, so now forecasting PPC campaigns and strategizing PPC campaigns is going to be part of their discovery package. So you got to put together a package that makes sense for what the person is asking for. If they don’t ask for PPC, I’m not doing forecasting for PPC in my discovery. I’m only doing stuff I need in order to really get the job done. So I do outline some common things and in the inner circle there’s gonna be trainings coming for various things, like I just said, just published one on the copy and messaging workbook.

1:50:32
I’ve done one on keyword research already. There are so everything related to discovery that I can do a training on, there will be trainings for that stuff. And then it’s up to you to determine what does this client need? All right, what kind of discovery package am I gonna sell them? Okay. Good, good, good, good, good.

1:50:53
All right. Kevin, can you share your microphone setup equipment and how it is connected to your Apple computer? I mean, real quickly. I feel like there’s girls on TikTok where it’s like, bell, this, like, you know, they turn their stupid wardrobe stuff. Like, nobody cares about the clothes you’re wearing. Sorry. All right. So I can’t do it without thinking of like them. This is a Shure SM7B microphone. I have no idea what the, what this arm is.

1:51:23
I have a Canon R6 and it’s on this ridiculous Manfrotto multi arm thing that is attached to my desk and it just sits right there at all times. What I wanted out of my recording setup, it had to be like this. In the old days, you know what I used to do? Get out the tripod, bam, put the camera on top, hook it up to the computer, hook this thing up to the mixer, all right, put the lights up, hit record. My God, it was like 30 minutes of setup for every single video that I wanted to record.

1:51:57
And then, because my office wasn’t really set up like this, I had to tear it all down because the shit was like all up in the way at all times. So it was like, tear it down, set it up, tear it down. I was like, this is never gonna work. And so I created this setup where literally everything is attached to this desk. So there’s two monitors attached to the desk. They don’t even sit on the desk. They are attached to the desk.

1:52:20
There are three lights attached to the desk, okay? Then there’s this Canon R6. I have a photo of it in the inner circle. A while back I posted it. So I just took a wide angle photo of it and it’s in there. Canon R6, that goes directly into the, it’s a Max Studio, and it goes through a HDMI converter thing. It’s a Elgato. It’s some Elgato HD thing that allows the live stream feed and the audio to both go in at the exact same time.

1:52:52
Actually, not the audio, sorry, no audio comes in from that. That’s what I had to cut off because that was problematic. I had it going into the camera and then camera into the computer. That is all taken out of the process by this Rodecaster Pro 2. So there’s this mic that goes into the Rodecaster Pro 2 and then if I don’t want to use this mic. Now you’re hearing the shotgun mic that’s right above me. Now you’re gonna hear more of an echo here. So on trainings when I do a training I do it like this. It’s really this is really weird to do this now. But I have to use an echo killer in my… I do have a bunch of sound treatment in here it would actually be way way way way worse. But I have an echo killer in the videos that I do. So when I get, people are like, why do you use this mic for live streams?

1:53:42
Like, cause the audio is going to be better with this mic. I have to treat the audio from this mic when I do trainings. So, but I, I, this Rodecaster 2, which makes switching very, very, very easy. So now I also have an Elgato Stream Deck right here. That’s how I’m switching between screen and camera. And I can even shut off my lights like that. Ooh, now we can tell ghost stories. Okay. So I can sit down and I can literally go tap, tap, tap.

1:54:10
Lights come on, tap camera on, and then I’ve got this software right here, Ecamm Live Pro, where I can just start recording, streaming, I can go back and forth between camera, screen, whatever. I can actually switch my audio channels on the stream deck here, do a lot of stuff. So now it’s like setup time, 30 seconds, and then I just shut everything off when I’m done. Then I just edit the video.

1:54:43
And I do very little editing, so that’s how I can pump out more content faster. I was like, instead of getting better at editing, why don’t I just get better at talking? Then I don’t have to, and why don’t I just get better at, you know, web design? Then I don’t have to edit everything, you know, a gazillion times. Because the editing is a nightmare. Editing can easily, you want a one hour video?

1:55:05
If you really want to edit that up, you could spend three hours editing, for sure. I spend about 20 minutes editing. Like that’s my goal. 20 minute edit, export, move on with my life. All right, follow up question, a coffee shop website querying the coffee beans offered. That bean custom post is also querying another custom post like the origin, country, plus other details. How to use a query for this case? So you’re offering coffee beans and you want to list the origin country plus other details. Well, I need to know what the plus other details is. That’s kind of a heavy part of that question right there.

1:55:46
But yeah, I would 100% use bi-directional relationships for that. Are the other details about the coffee or the other details about the country? I think what you’re getting at is that when you do bi-directional relationships. Trying to think about, you should still be able to, now you can still pull custom field data for that. So you should be fine there.

1:56:11
There’s only certain limitations like the order of things. You can’t control the order, you can’t control the number of things that are queried. You can’t, that’s really what’s lacking. It’s not really the data you can query into the loop. So I think you should still be fine there, but yeah, you would have countries as a CPT. You would have coffee beans as a CPT. Then you bidirectionally relate countries to coffee beans. What’s your thought of current state of Bricks 1.8 menu update not implementing properly native WP menu editor? I think it’s a very easy problem for them to solve.

1:56:46
Bricks actually has already solved this. They have something called a slide menu, and you can drop it into their mega menu thing. Bricks can easily do that to solve that problem. So I don’t see it as a big deal. All right, question. Hi, Kevin, could you make some tutorials on using WS Form plus Postmark plus Active Campaign? I will do WS Form. I was gonna do one on Postmark for sure. Definitely on Postmark. I need what I need for WS form is people to give me some examples of what they want to see. Because I don’t want to just poke around and WS form like, well, you can add this field and this field, we’re just making nothing. It’s like, do we have like an objective that we’re trying to get to? That’s a probably a good way to teach WS form. All right, let’s see. Worst things Bricks could have done. All right How did you do the clamp generator WS form was it complicated? All right. Well, there’s a good example. Let’s look. Let’s look. Hey Jonathan What’s up, man?

1:57:48
What is up? Okay You guys want to see that? Let’s go Let’s look at the clamp calculator Screen share, dashboard. All right, so we’re gonna go to WS form right here, forms, forms, and clamp calculator. All right, this is probably a really good one to look at. Let me zoom in a little bit here. Okay, it also will help if we actually look at it on the front end.

1:58:29
So what does the clamp calculator do? So you have a root font size selector, you have a minimum device size and a maximum device size which have defaults already set for you. You get to set a minimum value, it doesn’t matter what this is for, font size, padding, spacing, whatever, it doesn’t matter what this is for. Now I built this for people who need to use a clamp calculator. Would I ever advocate for using this? Do I use this myself? No. No.

1:58:59
I hate managing clamp functions. That’s why I use automatic CSS. I don’t ever want to see a clamp function ever again in my life. Okay? So, this is just if you need it. Like if you have to have it because you don’t have a better option, then use this. But you put in your minimum, like 3.2, rim is going to be my minimum, and 6 is going to be my maximum. And there you have a live clamp function generated for you on the fly.

1:59:25
You get to copy it, whatever. I can add some JavaScript to make it copy on click, but haven’t done that yet. So let’s look at how this was done. So we have the root font size field. I’m going to open that up. And you go over here to the radios and here you can see here are my radio options 100 and 62.5. Now this is a very important thing. I needed to give a value to each of these. This is what I’m dividing some of these numbers by. If you choose 100 I’m dividing your rim values by 16. If you choose 62.5 I’m going to divide your values by 10 and not your rim values your pixel values that you give because if you notice These are pixel references for your device size You state your values in rim that you want in your clamp function But I need to take these and convert them to rim on the back end. Otherwise, the clamp function is not going to work, right?

2:00:21
Okay, so very important that these two things have values here. So now what I’m going to do is open up, here’s your min device size on mobile. So default value of 320, then you have a max with a default value of 1366. These are just number fields. Of course, with WSForm, things are easy to, if you want to create multi-column layouts, it’s just like this. You’re just dragging this little handle, you can choose. That’s how I got these side by side right if I do this it’s gonna push it to the next line if I want to be side by side I just make them equal parts you could put three on a line you can do whatever you want you can also separate forms into sections very easily group content whatever the general UX it doesn’t it’s not a beautiful like notice it’s it’s very utilitarian I guess I would say.

2:01:14
Like it’s not gorgeous, okay, but the functionality, and by the way, I like using good looking software. I love it when software is gorgeous. And it is a factor that I factor in how, because I like to use beautiful software. But sometimes there’s just undeniable functionality. And it’s like, okay, I’ll deal with the utilitarian style like you know not not fantastic looking Because I need all that functionality that’s under the hood and the UX and all of that ease of making this happen Okay, so I’ve got the min device size the max device size these are number fields, then I’ve got three hidden fields right here Which is a min rim which calcs this and it’s dividing field 45 by field 47. So here’s field 45 and then here is field 47 right here and This has all the math on these things is on these clamp calculators. It’s quite phenomenal if you go read some articles on Like we go on here. You’ve got to know there’s a slope calculation calculation There’s a slope 100 calculation because it then has to convert it into a different unit. Then there’s an intercept And again, I am NOT a mathematician I actually copied all of this straight out of automatic CSS when I was creating automatic CSS long ago I spent I swear I swear to you it had to be 14 straight days trying to get these calculations to work properly and again it was in first it was in normal CSS then I had to do it again when I switched over to SAS and I was just like I was literally sweating bullets I was like having nightmares of calculations in my head at night it was just sitting there for days on end like one part of it would break, damn it, which part of it broke?

2:03:17
Okay, and then going back and getting this right. So then what I finally figured out is, okay, I can take the slope calculation and I can assign it to a placeholder basically. I can take the intercept and assign it, and then when I’m doing the long formula, I can actually just use the slope and the intercept together, da da da da da, and finally got to a really good. So all I did was steal that work that I did a long time ago from automatic CSS and Drop it into this form right here But the fact that WS form can handle these calculations is another you know really good thing and then here’s the output so the output is basically just adding these tokens it does a little bit of of Here’s calc field 22, and then it adds the rim value to it because really what I’m doing here is not an actual math calculation.

2:04:05
I’m just outputting a number and then making sure this is what the calculation is based on. Then it just has rim after it. Then it has to output a comma. Then it has to output this number. And then it has to add the VW extension to it. Then it has to output a plus sign. Then it has to output this number which is calculated. And then it has to output a rim. And then another comma. And then a six.

2:04:26
And then a rim. And then it has to put these parentheses in here That’s really all this is doing in WS form and the fact that it calculates on the fly It’s just a feature of WS form WS form calc fields all just without submission or anything else They just automatically calculate on the fly Which I haven’t used another form system in a long time So I don’t know if that’s unique to WS form and now other form systems have caught up But there’s a lot of little things that WS form does. That just, you know, I ran into roadblocks in other form systems constantly when doing more advanced things like this, but that’s really all there is.

2:05:00
Unfortunately with this form, there’s no action items. There’s no like submissions, what happens on submission? Cause there is nothing to submit. Here’s the conditional logic that you have though. So divider value, if rows checked is a hundred percent, then set the value of a custom field to 16, right? So there’s some advanced kind of conditional logic in here. If the row checked is 62.5, then set the value of this custom field to 10. That’s what then determines what it gets divided by. So yeah, I don’t know, that’s it.

2:05:31
Now if we look at something like their website critique. Okay, so then you see basic stuff. First name, email, here’s the URL of the critique, here’s a consent checkbox, here’s whether they want to opt in or not, and then we have the submit button. Here’s the date that they submitted on, which this gets passed. This will be, you know, slightly of interest I guess. So we go the actions. What are we doing when somebody submits this form? Well, we’re saving the submission to the database, we’re showing a confirmation message. So if I click this, I can edit the confirmation message right there. We’re sending an email Okay, where are we sending it? Well, we’re sending it from this email address right here, which is my admin email address Here’s the person we’re we’re sending the email to me, right? I’m getting a notification basically There I’m replying to field 12, which is the person’s email address. So that’s set to the reply to here’s the subject Here’s the body of the email just fills it out automatically new website critique work request from field 13 so that’s the URL it puts the URL in the subject line for me this is all the standard stuff on forms but I just want to show you how WS form handles all of this and then we go into Google Sheets so we’re going to add all of this data to Google Sheets when the form is submitted to this spreadsheet right here happens to be an untitled spreadsheet, but whatever.

2:06:52
And so this is, if we looked on the backend, we’d see all of these submissions in the Google spreadsheet. It’s gonna add it to sheet one, and it’s gonna map. First name goes to this column right here called name. Their email address goes in the email column. The URL goes in the site column. The date goes in the date column, okay? All that is good. Then we’re also going to add this email address to ConvertKit using the website critique form. I can put them in a sequence if I want to. I can use an opt-in field if I want to for the confirmation. If I want to map that over into ConvertKit and then here’s the mapping for the fields right here. First name goes to first name, email goes to email, and we’re done. If you look on the back end with our plugins, you’re gonna see that WSForm has integrations with all these different email systems.

2:07:41
So you just, whichever one you’re using, drop in the integration for it. So there’s the ConvertKit integration, and then there’s the Google Sheets integration. And it just kind of all works out of the box. And it automatically links to your Google Docs, and you get to choose the sheet, and it’s just very, very, very, very easy. So lots and lots, but again, we could do examples for days. It’s really, we wanted to build a form from scratch, which would be a good learning experience. We just need to know what do we want to build. You know, so come up with an idea for what to build and I can do a video on exactly how to build it.

2:08:14
All right. Question, I know you say that you don’t care what the other people say about you, but does it get hard to deal with the negatives that people throw at you online. It’s frustrating when what I want, I like debate, by the way, I really like debate. I like hearing people’s arguments for things. The only time it’s frustrating is like when they just call names, or they make up non isn’t good for page builders because he wants to sell ACSS. I mean, it’s a dog shit thing to say.

2:08:53
If I write a 3,500 word detailed article with like 10 different arguments and I use the words of the guy who created Tailwind to help make my arguments and all your response is, he just wants to sell ACSS. Like that’s, you get middle finger on that. That’s all you get from me because it’s just it’s absolute nonsense like coward level nonsense Like you’re just gonna. Oh, let’s just dismiss the 3,500 words of arguments Because I just I just want to you know make this nonsense claim. That’s what’s frustrating But you know it’s easy to dismiss those people as well now I like to play with them a little bit before I dismiss them.

2:09:38
But, you know, it is what it is. Do I lose sleep at night over them? No, no, absolutely not. What I really love is when somebody can come back and give like a, here’s my reasoned logical argument for why I disagree. Okay, awesome. Now we can have a debate and a discussion. And then I will attempt to defend my position. Why?

2:10:04
Because it’s like in Jiu-Jitsu. You’re grappling with somebody. How do you know your techniques work? Well, you need to try them on people, okay? So it’s the same thing in debate. It’s like, I need to use this argument because if they can defeat this one and then this one and then this one, then I got to go back to the drawing board. Then there’s a problem, right?

2:10:22
But if I give this argument and it’s like, they don’t have anything to say now about it. I’m like, okay Well, I guess that technique work, right? I guess we haven’t found a problem with the technique yet halfway So it’s exactly that same concept. You can’t know You know when I say like, all right, we’re gonna put padding in a section and not the sections inner container How can I say that’s objective you should 100% you should do that Because I’ve debated the topic many many many times I’ve tried the topic both ways many many many times It’s the same reason I can say that this is what you do in this jujitsu situation You shouldn’t do this thing over here because one continues to fail and one continues to succeed and at some point We just have to say this is the way to do it So now maybe somebody comes up with some amazingly new great thing way to do it later Oh, we can all consider it then when it happens, right?

2:11:20
But as of right now, this is what we know to be the best method and it’s not because it’s just my opinion It’s because I’ve either debated it many many many times or because I’ve used both Many many many times and one continues to fail and the other continues to succeed and therefore it’s a very easy statement to make. So no, yeah I don’t lose sleep, people can call me names all day long, whatever. I love it though when people have a reasoned counter argument to something. That is when things get exciting. Please put this to bed, jet engine vs. metabox for bricks builder. Do you have preference a lot of people say jet engine is bloated but maybe not so in bricks builder I can’t put that to bed because I have never once I don’t think in my life have I used jet engine I don’t ever think I’ve used it so I cannot put that to bed okay is frames going to be a full replacement of bricks extras regarding functionality?

2:12:29
I’m sold for your code quality already just want to have an idea of your roadmap. Yes, and it’s nothing against bricks extras. I use bricks, I use oxy extras back with oxygen same developer. I have nothing for nothing but respect for that development team. I think that their components are the best components for oxygen and bricks by far. They’re accessible, they pay attention to details, they cross their T’s, they dot their I’s. There is absolutely nothing wrong with bricks extras or oxy extras as a product. But there’s a philosophy that I have of frames is very very critical to people’s workflow. So you’re using frames to build websites 50-60% faster. It’s taking care of all your sections, right?

2:13:24
And individual components, I mean, individual modularized grid sections, not actual semantic sections, but just grids, right? Carbs, individualized components like a checklist item, okay, is a frame. So this is really fundamental to workflow. It doesn’t make sense to me that I should add a section that, let’s say, has a slider in it, and it’s not a frame slider. Now we have to rely on Brics to do this slider the right way, or we have to say, sorry, we don’t have a slider, so go get Brics Extras and drop their slider in, because that’s the best accessible slider that’s out there right now. That doesn’t make sense to me from a workflow standpoint. What makes sense to me is I trust Frames to speed up my workflow 50 to 60 percent and by doing that it already has the components that I need. So Frames has a slider that I need that’s built 100 percent the right way.

2:14:21
It has a menu component that I need. That’s in my workflow. I don’t want to have to rely on bricks to do that for me and do it the right way. I’m using a system called frames. Frames should do that for me. Frames should handle my accordions. Frames should handle my carousel. Frames should handle my modal. These are all important components to building this page out. I don’t want to have to mix and match. So just from a philosophical standpoint, this is how frames should work for users. So the unfortunate reality is we have to build what Oxyextras already offers and a lot of people are going to say well I already use frames for my workflow there is no reason for me to have Oxyextras. Nothing against Oxyextras it’s just philosophically that’s what the workflow needs to be and so it’s going to compete with what they’ve done.

2:15:13
But again, nothing but respect for them. All right, let’s see. Only one con for ACSS, no more LTD. But again, you’re not paying for it, or you shouldn’t be. Ideally, you should not be paying for these tools. Your clients are paying for the tools. And like I said, $149 for a year like our agency rate is 175 an hour so that should give you an idea of like and and think about this you know 175 an hour how many hours am I saving by using automatic CSS on a website how much do I care about my own time like doesn’t it pay for itself in like what like three hours of work even if you’re if you’re like $40 an hour for $50 an hour let’s say you’re like my internal time is $50 an hour right that’s what I value my time at I’m not saying that’s what I value my time at but maybe that’s how you feel I don’t know but if you value your if you value your time at $50 an hour the minute ACSS has saved you three hours in a year which it’s going to save you on one project you’re already making out like a bandit.

2:16:28
Ok so this is how by the way successful people look at things like this. If you are looking at oh it’s another hundred and fifty forty nine dollar a year subscription that is not how successful people look at stuff that’s not how wealthy people look at stuff. They have a totally different way of looking at expenses like this. It’s the same reason why I pay a guy 65, 70 dollars a week to come do my yard. He comes in with his mower, he mows the yard, he trims the bushes. Now I can sit around going, God, another 50 dollars a week, 75 dollars a week for that to happen? I hate spending that money. Well, what’s the alternative? The alternative is I have to mow my own lawn and I have to do my own bushes and all of that. Do you know how much money I would lose cutting this yard?

2:17:24
Like how much money I do make on this stuff over here, priorities, right? And there’s ACSS people that depend on me. It does no good for an automatic CSS user to know that I’m mowing my lawn. It does them absolutely no good whatsoever. Doesn’t do any of my agency clients any good for me to mow a lawn. None whatsoever. So if I go out there, if my time is worth even a hundred dollars an hour, right, and I spend two hours mowing the lawn, do you know how much money I’ve lost over paying that guy 75 bucks to mow it? This is how you have to think about things now. You cannot think about just raw numbers and raw expenses.

2:18:03
You have to start weighing options. So this is this is if you can make that mindset shift, it’s a wrap. This is how you’re going to scale. Because the other problem is you’re going to start hiring somebody and you’re going to be like, well, I got to pay them. Oh, I got to give them some money. Oh, look at this expense. Oh, I look at it as thank God you’re here. Thank God you’re here. Let me write this check for you. Because here’s a whole list of stuff I can’t get to. Please get to it. And then you’re happy to pay them. You should be happy for these expenses. Right? Because they’re allowing you to do so much more. The minute you get into that mode of thinking that you’re going to be light years more successful. Okay.

2:18:48
Okay Let’s see the duh I have a new client in a niche. I don’t know shit about Any tips on how to do basic SEO when you don’t know shit from okay, so You can do at SEO is not like niche specific I mean it would really help if you had experience in the niche, but if you’re willing to do a little extra work, a little extra research, you’re going to be doing competitor research. So automatically you’re going to see what all the successful people are doing in that industry for SEO.

2:19:22
And that’s going to clue you in a lot of ways to what you need to be focusing on. But then you’re going to look at what’s just there in general. SEOs, like there are techniques to doing SEO research where you can say, I don’t really know what I’m going to find, but I know how I’m going to find it. There’s an approach to doing SEO. These SEO tools, once again, that people will say, I don’t want to pay for that. It’s an expense. It’s money. Okay, stay broke. Stay sucky with your SEO. I don’t care like whatever you want to do.

2:20:07
You know we’re whining about all the wrong things. But if you invest $179 a month into Ahrefs as I do, and I don’t even use Ahrefs all that much anymore, because you know we scale down agency work. We’re doing focusing very heavily on just frames, ACSS, inner circle, like those are the things I’m trying to nurture. So, yeah, but I still gladly pay $179 a month to HRS every single month, don’t care, because I still have enough clients on management plans that it’s paid for, like I don’t consider myself as paying for that.

2:20:40
So I’ll open it up and you can use all of the tools inside here to take a seed keyword and from one seed keyword, you can have dozens and dozens and dozens of targets for SEO. On the blog side of things, on the service page side of things, on whatever this happens to be for, I can go look up competitors, I can see intricate data about how competitors are doing SEO, what their top pages are, what their top terms are, I can see the content that ranks for all that stuff. Tremendous insight, tremendous insight. But to get that insight, I have to pay $179 a month, but I gladly pay it, don’t even bat an eye, because of the value that it provides on the back end.

2:21:18
But yeah, you’re going to get, it doesn’t matter if you know the industry or don’t know the industry, you can still do SEO for it. But you have to know the techniques, you have to know the methodology of getting from point A to point B. Any news about CSS logical properties in automatic CSS? Yes. Actually, good question. Version 2.5 coming out next week. Everything has been switched over to logical properties. So yes, staying at the forefront of CSS. And for all of the people who are like, Oh, just build my own little frown. Good luck. Okay, good luck. That objection. I love hearing that objection. I’m like, All right, good luck. Good luck there, chief.

2:22:02
It’s like, all right, there’s like thousands of hours invested. And by the way, if you try to build a framework with just pure CSS, I learned that the hard way. I learned that the hard way in the initial stages of building automatic CSS. If you don’t know SAS, like, you know, you’re going to have to learn SAS to really do it the right way. It’s not a small project, let’s say that. It’s not a small project. And then of course having the dashboard, and that’s a whole nother can of worms.

2:22:33
Because even if you built your own SaaS framework, it’s still all wrapped up in SaaS stuff. And you know, it’s not like, you know, I could make SaaS changes all day long. I still love to open the ACSS dashboard and just make the changes there. Like it’s so easy. So just from a workflow standpoint, it’s a very large project. All right, let’s see.

2:22:56
I’ve got, we still got good viewership. Seven more minutes. I don’t wanna go three hours today. I’m gonna go seven more minutes. We’ll keep doing it. The Q&A is fun and it’s, a lot of people have a lot of questions. So we’ll continue to make this part of WDD live every week. I think one solid website critique, Q&A, I think that’s a good balance.

2:23:21
When creating your grid tokens, the concept of making them auto responsive is pragmatic. Why not use repeat auto fit min max, maybe another var to control min? Well, in automatic CSS, we do have automatic grids. But they work differently from standard auto-fit and all of that. But basically, what you’re saying is, I want this item to be a minimum 250 pixels. But it can be larger than that.

2:23:56
You put more things in a grid and now you have more columns, and then as the screen shrinks, then you have less columns. But the main reason is because there’s a lot of situations where I want tight control over the number of columns that I’m displaying. And so if I’m allowing a lot of that to happen automatically, I don’t really have so much of that control. There’s nothing wrong with automatic grids, it just has to be used in an appropriate situation.

2:24:21
Like I said, sometimes I just want there to be, and so for example, like a service card right I want it to be maybe three of them in a three column grid on this page but maybe on this page I want them to be wider and be in a two column grid and so I need better control over my grid structure in those situations and additionally this is gonna be very interesting to see how builders and frameworks approach this but media, not media queries, container queries are coming to CSS very, very soon. And what a container query is, is the concept of, take a media query, which says, I want this component to look this way at this break point, and this way at this break point, and this way at this break point, and on and on and on.

2:25:06
A container query says, I want this component to look this way in a container of this size, and this way in a container of this size, and this other way in a container of this size. So you can actually change, right now you can’t do that in CSS. If you take a container with element and there’s cards inside of it, and you shrink that container, but you’re not shrinking the device, you cannot change how that component looks.

2:25:28
But with container queries, you can. And so this is gonna open a whole new can of worms that both page builders and frameworks are gonna have to figure out a way to manage, and manage easily. And right now, it’s very interesting, right? Page builders are going to have a hard time with this. Frameworks, not so much. And that’s always been, you know, people think, people ask this question, would automatic CSS ever be natively integrated into Bricks or Oxygen?

2:25:56
No, 100%, no. They would never do that. They would never make that decision. It’s too influential, it’s like they would never make that decision. Because there’s also, there are opinions on using one framework versus another framework. And so they wouldn’t want that kind of lock in. That’s number one. But number two, we look at something like container queries or grid.

2:26:25
So just take grid, grid’s a great example. Bricks did not have any grid controls whatsoever a while back, but automatic CSS users could create grids for days in bricks. Why? Because the framework allowed it, even though the builder didn’t. So, this is going to be the same thing with container queries with logical properties. You just asked about logical properties, perfect example. You can use logical properties in your workflow in Brics. Why?

2:26:53
Because ACSS allows it, even though the builder doesn’t. Brics does not use logical properties, but ACSS does. So if you’re an ACSS user and you need a right to left website, for example, you can use automatic CSS inside of Brics and get an RTL, logical properties based website. By the way, it’s good for everybody to be using logical properties, not just for RTL purposes, but it’s the new standard going forwards, right? So you want a framework that’s keeping up with standards. That’s another big thing.

2:27:21
And so a lot of people are very comfortable with ACSS because they know who’s behind it, and they know that I am a stickler for best practices, and I’m a stickler for let’s do things the right way, and let’s stay on the forefront and let’s innovate There’s a lot of frameworks coming. Let’s keep in mind. There were no UI dashboards for frameworks before automatic CSS There were no frameworks really that I know of using fluid responsive clamp functions with fallbacks There’s a lot of things that were not happening before automatic CSS So you’re not just there’s going to be frameworks that come along. It’s like oh now we showed up late to the party saying, oh, we’ve got all these things now.

2:28:04
Okay. Well, congratulations. You are late to the party. And by the way, you’re going to continue to be late. Sorry to inform you, you’re going to continue to be late. So ACSS is going to be first to the forefront with things like container queries, first to the forefront with things like subgrid, first to the, there’s all these things coming, layers, right?

2:28:25
CSS layers is coming. So ACSS, everybody knows because of the attention to detail, because of the constant education, because of the paying attention to these things, crossing these dotting eyes, that ACSS is going to, it doesn’t matter, there’s going to be a situation where one comes in and tries to leapfrog. It doesn’t matter, you’re already behind, right? We’re already working on the next thing. So it’s just the unfortunate reality of the situation that they face. I feel sorry. Obviously, obviously, I’m poking fun. But I feel sorry for you know, other framework developers. It’s like, hey, you know, in my mind, the same way that they have in jiu jitsu. It’s like, Oh, you practice?

2:29:04
That’s, that’s cute. You’re still gonna be behind. You’re still gonna be behind. That’s it. That’s just my philosophy of like, how I approach it. Which is why you would love to, anybody would love to play on that team, right? You want to be on that team. I want to be on the team that thinks like that. You don’t want to be on the team that’s always playing catch up. It’s like, oh, look, they had a good idea. Let’s go implement that. Okay.

2:29:25
All right. That’s boring. Boring. Okay. Let’s go three more questions. What is the best way to create a ticket scheduling on a website using Bricks? Ticket scheduling, ticket scheduling. Like event, like event management? Is that what you mean?

2:29:43
I think I would need more clarification on that ticket scheduling. I think you just mean events. Like event management, but they can buy tickets to the events maybe? I need more clarification. Maybe a stupid question, but does ACSS have the ability for use in a static site? Yes. Automatic CSS was built to be builder agnostic and actually work without a page builder whatsoever. Now, there’s no documentation for it. There is, it’s not really, that’s not our angle right now. Our angle right now is dominating the page builder world. So that’s our first angle.

2:30:30
Now once we’re done dominating the page builder world, we will create a way for people to use ACSS easily on static sites and on and on and on. There’s no limit to what’s possible. But we’re starting with page builders. And as you see right now, we’re going into Gutenberg, we’re going into generate press. So again, we’re focusing right now on page builders, but it is designed to be builder agnostic. It is designed to work outside of a page builder and even outside of WordPress. It will have no problem with that.

2:31:03
He said, yes, buying a bus ticket with a calendar. I mean, that’s, it’s very, it’s a very, it’s a very detailed question, right? So it would be something we would have to start to build out, but it’s also a situation where you have to sit down with a client. Like let’s say a client, this would be the last question we do, and this is very, very important for sales, very important for scoping, for pricing, and on and on and on.

2:31:33
Client A says, we need a system for buying a bus ticket with a calendar. Client B says we need a system for creating a bus ticket with a calendar. Client C says we need a system for creating a bus ticket with a calendar. I guarantee you’re gonna create three different bus ticket with a calendar systems. They are gonna look radically different. And you can’t stop there.

2:31:55
So you have to grill each client. Okay, does it need to have this? Does it need to have this? In this situation, what’s this situation? What localities? What da da da da da da da da. It’s going to be a laundry list of figuring out what are, what does this actually need. You gave me this global concept, but I can’t develop against the global concept. I have to develop features and functionality and it’s got to work like this and it’s got to do this when this happens and da da da da da. And it’s going to be a whole laundry list.

2:32:24
And you have three different conversations, guess what? You’re gonna end up with three different solutions. So we need way more details to figure out what actually needs to happen, how it’s all gonna work, what it’s gonna look like and on and on and on and on. And that is a good thing to know because one of the deadliest things in this industry is you don’t get enough details, you scope the project incorrectly, and now you’re in an absolute disaster and a nightmare scenario. Where it needs all these things that they didn’t tell you ahead of time, and it needs to work like this, and you thought it was gonna work a different way because you didn’t ask enough questions, and it doesn’t look the way they wanted it to look because you just made some assumptions, and oh my gosh, a project like that can easily just 100% go off the rails.

2:33:10
So I should probably do, maybe add that to the training list of like how detailed do you need to be when somebody tells you what they want in terms of something like that and how do you actually scope that kind of thing out because that is a little bit more challenging than just hey we need a new marketing website you know okay all right guys I’m out that’s it I got a dip I thank you guys so much for joining today viewership was fantastic questions were fantastic this has been really fun. I’ll be back next week. Let me see my schedule. Let me tell you guys.

2:33:43
I know I might, there’s gonna be one that’s challenging to get to. It’s gonna be the 17th. So not next week, but the week after that, I will just tell you, it’s going to be very challenging to make happen. I’ll see what we can do for that one. Might move it to a different day, don’t know yet, but I’ll be in Florida and we’ll be closing on a house. It’s just kind of a, that’s a crazy little situation down there. So I’ll, I’ll update everybody via email.