WDD LIVE 023 – Web Design Critiques, MIni-Tutorials, and Q&A

1
0:00:00
Yo, what’s up everybody? Welcome back. WDD Live, Wednesday, 11 a.m. Eastern. Man oh man oh man. Busy busy busy busy busy. But we have some really good things, some really good developments. Number one, first and foremost, biggest announcement, we have officially hit the 10,000 subscribers thousand subscribers mark on YouTube which is a it’s a it’s a good mark it’s you know it’s a humble milestone it’s not it’s not anything you know I don’t think YouTube sending any plaques for 10,000 these days but we are it is a milestone nonetheless it is a milestone and we’re going to keep marching towards the next milestone which I would say is 25,000. And then on up from there, right? Now, the growth is, it’s naturally limited by the niche that I’ve chosen to focus in. Most of my content is made for oxygen and bricks. It’s not made for the Elementors of the world. It’s not made for WordPress in general. Those are much, much bigger and larger ecosystems. And things may progress into those areas, but I think it is important to not make, we’re making very specific content here. That’s what we’re doing. For specific people, for a specific purpose. And for those people and for that purpose, I think it’s phenomenal, right? And not everybody is going to be in that camp. We’re not going after every WordPress user that’s ever lived. We’re not going after everybody that calls themselves a web designer and a web developer. It’s a specific type of person that makes up this tribe, right? So naturally, we’re not going for millions and millions of subscribers or anything like that. So it’s just a milestone. We should celebrate all milestones, I suppose. It is something that continues to be motivational, but it’s also not something I put a ton of thought into. I put all thought and effort into the actual content, and then whatever happens with subscribers and things like that is going to happen. So that’s kind of how I approach it and think about it. There’s other metrics that obviously are far more important than your YouTube subscriber count and those are the ones that I tend to pay attention to. But it’s a nice thing that we finally got to 10,000. All right, let’s see who is here with us. I got a couple other announcements that we’ll dive into. I want to make sure the audio is good. Looks like nobody’s complaining about audio or anything like that, so we should be good there. Netrunner’s already throwing questions into the chat. We will get to questions in just a second. Inotrens, this is Scott, says that he went from Elementor to Oxygen to Bricks Absolutely. You know I thought about, you know I can do Elementor content, right? Like the first Elementor video that I actually have mapped out and planned and outlined is a you know it’s basically a rundown of all of the issues that I have with Elementor. And I do think you know that would get the Elementor crowd stirred up a little bit, it would get me into the Elementor space, so to speak. I mean, that’s already happened a little bit. There’s actually a lot of people who are Elementor users who started doing PB101 and are now Bricks users. You know, like, it’s, you could very clearly see, like, I just, I just don’t know how people continue to use Elementor. I just don’t get it. I don’t, I, you know, I say often there’s things that will make you want to jump off a bridge face first. Elementor is one of those things that it will do that faster than most other things that I’ve ever seen. And I just don’t know how people do it. Especially people that, you know, I see there’s, the other thing is, it’s tough for me, like I see there’s a group of creators, right? And I’m never talking about one creator. It’s like there’s a group of creators who bounce back and forth on all these things. They’ll be in Elementor one day, they’ll be in Bricks another day, they’ll be in Gutenberg the next day, they’ll be over in Oxygen sometimes. Man, my gosh. To me it’s like, get a workflow nailed down and just master that thing and just be as efficient as possible with it because this jumping around, you know, how do you do it? How do you do it? Like everything, everything in these builders is in different places and different, you know, layouts and the labels are all different. And it’s just, especially if one page builder is by far better than another, you know, like bricks versus Elementor. It’s just like, man, that’s night and day it’s night and day and it’s there’s so many limitations in Elementor once you’ve used bricks I just don’t know why you would switch back and forth it’s just I don’t know there’s a lot I don’t understand that I’m still working to understand but I don’t know if I ever will I just don’t see advantages there I don’t I don’t know what’s going on I wish somebody would explain it to me. But we’ve got Urban, we’ve got Jason, we’ve got Derek, we’ve got two website reviews to do today and then we’re going to do Q&A. Ruben is here. Welcome, Ruben. The new update with 2.5 with Plaster is amazing. Well, thank you, Ruben. Absolutely.

3
0:05:54
Love it.

1
0:05:55
Let’s see. Okay. So, this is important. You know, Daniel says, and this happens from time to time, you know, I tried to cancel ACSS because I could not get my head around it, Kevin personally convinced me to try a few more days and now I love it. It is, it is one of those things where, you know, it’s like, especially if you’re, you know,

10
0:06:19
there’s different groups of people,

1
0:06:21
there’s people who are brand new to classes, just, I’ve just never even used classes before. If you go from never using classes to automatic CSS, it’s gonna take a little bit of time to wrap your head around, because you’re not even familiar with like step one. But if you are really familiar with classes, you just haven’t ever had a framework to really bring organization and standardization to everything, and then the next level of classes, which is like everything is automatically responsive for you, it’s user adjustable from a dashboard, and just, you know, if you’re already using classes, the jump’s not that big, right? You just are kind of like, wow, thank you. Thank you for doing all this organization and standardization and automatic responsiveness and overcoming a bunch of challenges that I have on a daily basis as a web developer. Like, okay, thank you, I get it. But if you came from like Elementor, style everything at the ID level, and then someone’s like, here’s automatic CSS, it’s gonna be a little bit of a doozy, right? And I don’t know what Daniel’s background was in that, but once it clicks, it’s done, it’s a wrap, as they say, it’s a wrap from there. There’s no going backwards Okay, so let’s see Darwin is here d123 is here we’ve got Cryo Banshee says I still need to try a CSS absolutely Absolutely. Andrew says a CSS and Gutenberg seems to work in quickly not the plaster. Yeah, we haven’t done the plaster stuff yet But bars like action textile and input fields work any caveats to be aware of? There are, there are caveats. Any builder that we don’t officially support is likely going to have some issues here and there because of the way that they structure HTML. So I’ll say it again, it’s very important to understand. Automatic CSS is designed to work with clean semantic HTML. Like if you went into VS Code and were using automatic CSS and you wrote HTML for a section element, it would work out of the box. It would just work. And so if a page builder writes the same code for a semantically accurate section element, it’s gonna work in that page builder. If you put a button class on that ACS is going to turn that into a button all day long it’s going to look perfect it’s going to look exactly the way it’s supposed to be you do that in VS code or if you do that in a page builder the page builder is that if that’s the way the page voter writes the code it’s going to work flawlessly but what will happen is you open a page builder like generate for example or you know maybe breakdance I don’t know it depends on how the the builder outputs the code definitely like Gutenberg the Gutenberg button that’s I guess that’s a perfect example the good and just Gutenberg has a button element add the button element in Gutenberg we support Gutenberg and add a button class to it and it will break why does it break is it because ACSS is broken? No, it turns out that Gutenberg is broken. As I say all the time, Gutenberg does it adds an extra wrapper to your button that’s not needed and then it puts the class on that wrapper. Therefore the class can’t do its job because the class doesn’t expect to be on a wrapper. It expects to be on a link because that’s all you need. You don’t need wrappers for links. So that’s what breaks the styling. So what we have to do as developers of automatic CSS is we have to go into a specific page builder. And this is not what every framework does. See, frameworks will say we work with everything. Well, I mean, we could say that too. We could say we work with everything. But does that mean the user is gonna have a flawless experience in that page builder, in any page? No, of course not. They’re gonna run into major challenges because the developer of the framework did not go into every specific page builder and create an overrides file. In order to really support a page builder 100%, you have to have an overrides file. You have to figure out what does the page builder do that’s not great, and then let’s create workarounds for them, and let’s put those workarounds into the framework so that when that page builder is detected, we load the workarounds, and now the user can have a seamless experience. That’s what we do So I have to go in to generate and like that’s the next one. I’m working on generating quickly I have to go into quickly. I have to go in to generate I have to use personally every element that they offer and I have to see how they behave and then I have to dream up Use cases for these things like how are people using this element most likely, and what kind of classes and what kind of stuff are they gonna need to do with this element? See, I have to spend, not just not actually developing the framework, I have to spend hours of time just using a specific builder and using the elements and inspecting the output of those elements to see how is this going to behave when a framework is applied to it. And then I have to create the overrides file and say, okay, here’s what’s going wrong, here are all the fixes for it, and then of course we have to hand it over to users and say, all right, here’s a beta, please go use this in your page builder and quickly and generate whatever, and see if anything is still broken with it. And because I can’t dream up every single scenario that’s imaginable, there’s going to be additional issues that users bring up, and then we have to go make workarounds for those. That is work that no other framework is doing. Honestly, there’s not doing it. So you end up and we go back to Crockford’s law. We go back to Tony Crockford on my team. It took me, I couldn’t even believe it. It took me, I did not get the reference. I thought Crockford’s law was just some other dude named Crockford. They came up with this a long time ago because the law is so damn good. The law is so damn good. Crockford’s Law basically says you’re going to get 90% of the way into the project. Well, actually, let me start over. What Crockford’s Law says is, you know, you take a piece of software, like a framework or like a page builder or whatever, and it’s not going to cover, there’s going to be 10% of things that you need that it doesn’t do and the law says you’re going to be ninety percent of the way into a project before you realize that that ten percent is missing and then you’re screwed right you’re up a creek without a paddle so as a developer of automatic CSS because I use the framework myself on every single website our agency uses it on every single website we’re using it in the real world this is not like a we came up with a theory okay and put out a product based on a theory it’s born from the work that we actually do in the real world. So thankfully we’ve defended very, very, very well against Crockford’s law. Okay, you’re not gonna get 90% of the way into a project with automatic CSS and then realize it doesn’t do 10% of what you need. That’s just not gonna happen. There’s really, we’ve built it so there are no restrictions or limitations as to what you can do when you’re using automatic CSS on a website. We’re really, really proud of that. Not every framework can say that. But, you know, these things with like new page builders that we don’t yet officially support, that’s where you will run into some of those issues. And with these other frameworks that don’t do this kind of work, you’re gonna run into those issues all day long. That will be true of those frameworks. That you’re gonna get 90% of the way into the project and realize, oh, there’s 10% that was not accounted for here and it’s a big, big, big hassle. Automatic CSS doesn’t have that limitation because we specifically go into every framework that we claim to support and we make sure that we create the proper workarounds and overrides. And so it doesn’t happen. And it creates a seamless experience for users. So that’s my explanation on that. All right, with that said, ACSS 2.5 official was just released like 30 minutes ago. So that is now completely out of beta. Thank you to all of our beta testers. So that is a really good, that was a huge update, huge, huge, huge update. And I will tell you this, I will tell you this I’m gonna have fun with this I’ve never done this before never done this before and my birthday is coming up as you guys may know my birthday is July 4th everybody in the US We know that’s Independence Day, right? everybody outside the US couldn’t care less, but my birthday is July 4th and so for my birthday what I was thinking is to give ACSS users some sort of a gift of sorts, right? And so what I wanna do with this next release, the July release, is I’m gonna create an official thread, you gotta go find it, it’s in the Automatic CSS private community, and it’s basically gonna say, hey, look, do you have, is there something about ACSS that bothers the heck out of you? Not like just some, oh, that’s kind of slightly annoying or whatever. I’m talking about like a thing that you’re just like, oh my God, if they fix this, it would just make my dreams come true, okay? That kind of thing. Or if you have some idea that you think is absolutely brilliant that hasn’t been thought of yet. Or you’re just like, you know what, this thing is really, really, really important and it’s not there yet, you know, that kind of thing. I’m gonna create an official thread and I want everybody to just come in and give their input on it. What I’m gonna do is I’m gonna see, you know, what are the best ideas that we can practically implement, and that’s gonna be the basis for the July release. It’s kind of like, let me, you tell me what you want and need to see, and then, of course, I gotta vet it, like, make sure that I agree. I gotta agree that it’s a good decision. This isn’t like let’s build everybody’s pet project because what happens with that, obviously as we know, you build a lot of fluff, you build a lot of stuff that one user wanted but most users don’t need or even gets in their way. That’s not the kind of thing that we’re doing here. But I want, instead of just me saying, here’s what I think the roadmap is, I want to hear from the users, right? Of course we’re always taking ideas and stuff like that and adding them to the roadmap, but never have we focused an entire release on like, what do the users, what have they been asking for, what do they really want to see? Let’s bake all the good stuff from that into the next release. That’s kind of what I want to test. I want to do a little experiment with our July release. The other thing that’s unique about Automatic CSS that I think a lot of users know, by the way, you will see a roadmap. So BRICS has a roadmap, Oxygen now has a roadmap. Oxygen’s a great example of this though, where it’s like, you just never really feel like, it’s like how does something make it onto the roadmap? How many votes is required? Is there some sort of threshold that we have to achieve before something makes it on the roadmap? And what’s the logic behind it? Why is this thing being preferred over this other thing over here? And with automatic CSS, there is a roadmap, and some of that does happen with automatic CSS. But I think what a lot of users will tell you is sometimes people will just bring up something that’s very, that’s obviously very important. And it might be, if it’s a bug, like we’re trying to fix bugs almost, you know, immediately. If somebody brings up a bug, it’s next release that bug is fixed. That’s our goal with bugs. But with features, sometimes people will be like, look, you do it this way, and it would be better if it was done this way. Like that would maybe be an enhancement example. Or, hey, this feature is really, really, really, really, really important and it’s missing. It’s not like, you know, I think, I feel like all these other developers will be like, we’ll put it on the roadmap and we’ll see what happens. Put it on the roadmap and maybe someday your dreams will come true. And for me it’s like, if I agree, if I just outright like, Pat, you’re right, you’re right. That needs to happen, that needs to happen. I’m immediately going in and implementing. It’s not like, oh put it on the roadmap and we’ll see what happens. It’s just, I agree, therefore, feature gets built, and then it gets shipped. It’s like, it just, it like, goes right through the process. It doesn’t have to wait around, it doesn’t have to acquire votes, it’s just like, you’re right, that should happen. And so we do it. I don’t know why that’s so hard in other software, and I’m not picking on Oxygen and Bricks and the like, but I just feel like it doesn’t happen in a lot of software applications, but it happens all the time in automatic CSS. And I think that’s something that users really appreciate, especially when it’s their idea. Okay. Got a lot of good comments here. All right. I feel like we should dive in to the first round of critiques. Like I said, we have two today. One is an agency site. We’ll do that second. The other is a site in a niche that we’ve already done before but it’s completely different And it’s a it’s a bit of an interesting little layout. So I think there’s going to be some good stuff that we can discuss Last quick update is we did just release a new batch of frames yesterday as well Some really good stuff in there So if you have if you have frames there are some new goodies if you just go hit refresh in the frames library Okay, and if you want a let me share my screen if you want to know kind of or see an action What’s part of ACS s 2.5? I did do a video on what’s new in ACS s 2.5 a Month ago and the two betas are when the first beta came out and then we did a second round of beta. But this shows you the kind of an overview of the key features in 2.5. So if you’re interested in that and haven’t watched that video, it’s on the Automatic CSS and Frames YouTube channel. Go ahead and jump over there and check it out. Okay, first website, first website right here. Welcome to Austin Treatment Center. So we did maybe last time or the time before, we did a website in this niche as well. This kind of like drug and alcohol outpatient addiction center. But this one is very, very different. Very different. And you don’t see this often. You don’t see the vertical nav or vertical header very often. So this kind of piqued my interest when I saw it a little bit. We’re gonna start with our no scroll test. We can see that this is an alcohol and drug outpatient addiction center in Austin, Texas. You know, it’s again a very literal headline, very literal copy. It doesn’t attempt to, you know, really speak to the visitor in any sort of like emotional capacity. It’s just like, hey, drug and alcohol outpatient addiction center, Austin, Texas, here we are. So you know, sometimes literal is good, sometimes I prefer to be both. I prefer, can you say it literal and can you pack some sort of like intrigue into it as well? So maybe some improvements there in the general hero copy would be good. I’m also, you know, seeing right off the bat the CTA of verify insurance it’s almost like hey did I sell you with those that literal headline and that literal description right there come on in you know I feel like maybe there’s some nurturing that should be done here before we’re just like verify your insurance it’s like they’ve already chosen you know they haven’t even scrolled anywhere but somehow they’ve chosen to get the process started. I don’t know, I don’t know if that’s the best way to lead it out. Now, I do feel like these kinds of calls to action should be here in the hero, because not everybody is a first-time visitor. Sometimes, somebody visits a website, they chew on everything, they leave, they think about it, then they mark it in their list, whatever, they bookmark it, they come back. And when they come back, they’re ready to rock and roll. And so you don’t want them to have to really search around for like how do I get started here. So having a CTA for like repeat visitors like this is good. So what am I a fan of here? I’m a fan of a dual CTA. You give a CTA for a first-time visitor, you give a CTA for a returning visitor, then you kind of cover both bases. And it’s tends to be very very effective there. All right, as far as the header goes, I like the, the logo is very Austin. The logo is very Texas.

5
0:23:22
So that’s good.

1
0:23:23
I think that that fits. Of course, you know, Austin Treatment Centers, I guess, okay, okay. Yeah, I guess that’s fine. I mean, it’s a little, it’s a little hard to read, but like I said, it’s very Texas. So it’s a good fit in that regard. Home, admissions, programs, about, contact. We’ll see how this menu here. Okay, I expected like a fly out here kind of menu, but that giant blue arrow is literally just saying, nope, we’re going to that page. I’m not digging the giant blue arrow. I think if it was just a little smaller here, that would be good. Okay, even like that maybe, you know, you were at 3M, maybe drop that to 2M, might be the way to go. And I’m not so sure blue is the way to go here too.

3
0:24:11
Why is it blue?

1
0:24:12
Why is it not, you know, the action color? The action, I think if it was the action color, it would probably work out a little bit better. And I don’t I see an ACSS I could just change it for you. I could just be like, hey, action. But that doesn’t appear to be. Yeah, that doesn’t appear to be the thing. OK, so we can’t easily test it out because now I got to go reference your action color hex code. And that’s too much work. That’s too much work. Tokenize your CSS, my friends, tokenize. OK, your personalized roadmap to long-term recovery begins here at our Austin Treatment Center’s outpatient rehab, accepting new patients. Not sure that’s a great CTA right here. Like you’re just telling me you’re accepting new patients, maybe like become a new patient. Like you can have an accepting new patients badge, but I don’t know if I would make that your button text. Because it’s not really an action that I’m taking. You’re just, it’s something you’re telling me, you’re informing me of it, but I think a lot of people might see that as a badge and not realize it’s a button almost. Manny says if you click on, this is Manny’s site again, that’s my site, accessibility is a disaster, don’t waste your time. Oh man, that’s good. If you click on the arrows, there is a sub-menu. Okay, so, bam. Okay, got it. See, this is a common question in web design, really a common challenge in web design, is whenever you’re creating a fly-out menu or a drop-down menu, do you make the main text a link or do you force the person into the drop down or fly out and then that main selection is a part of that fly out or drop down. I am a, I am in the camp of, if you’re gonna go drop down or fly out, the top thing is just an activation for that fly out or that drop down. It’s not a link in itself. Because visually, there is no way for me to tell that these two things perform different actions. So from a user experience and a UX design principle, I feel like this breaks UX because there’s just no way for the visitor to know that these two things do separate things, especially since they don’t even have, let me go back to the home page, look at how the arrow, let me point this out. This is very crystal clear to my brain now that this is one action and not two actions. At least that’s what you’re informing me of. Because when I hover the arrow, which has a separate action, you are highlighting the text, which has a different action. That’s telling my brain right there that that is one thing with one action, when in fact that’s not the case. See? And even I clicked on the arrow and went to the page. So I, well that time it didn’t. What happened? Where was I? Hold on. There’s a clickable area right there. There’s a clickable area where I’m either next to the arrow, like right there. If I’m between the arrow and the text, I get taken to the page. If I click exactly on the arrow, then I can finally see the other two options that are here. You’ve effectively hidden these options right here. These are hidden from the user for the most part, especially since you said accessibility is horrible. Let’s go test that out real quick. Test our theory.

3
0:27:54
Okay, there’s home.

4
0:27:55
I’m finally on home.

1
0:27:56
Now I tab. Oh gosh, yes, you’re right. You’re right, accessibility is awful.

9
0:28:06
Whoa, I don’t even know what’s going on now.

1
0:28:08
Why did, why did the half of the navigation disappear? Why do we have, look, home admissions, look, we’re just not going to have home admissions anymore. When we get down to about and contact, home admissions, gone. Can I, I can’t talk, no, I can’t toggle that. So this whole area, Manny, I mean, you already know, you already admitted, is an unmitigated disaster, a dumpster fire, as we say. This would need to be reworked. But just for everybody else’s sake, I think we can all agree, can we all agree, put in the chat, can we all agree, if you’re gonna have a flyout or a dropdown, make the header for that an activation for that item like you know it doesn’t need to be its own separate link I’ll see what everybody else says okay let’s look at this this intrigued me because when I first saw it you know my eyes I feel like this should have a warning it should have a warning of like you know, do bright lights affect you? Do you get seizures? You know, flickering objects or, or scattered layouts. It’s just my eyes are just bouncing. I feel like I already have a stigmatism, but if I could visualize a stigmatism on a web page layout, this is what my eyes are trying to do. They’re like, they have no idea where to go. No idea where to go. We’ve got image, text, announcement. Maybe that’s an announcement. We offer schedule options. Yelling at me. And then this text appears to be related to this over here. We got a call to action in the middle, a call to action right here. Two different kinds of calls to action. More photos, more photos. And then another call to action, and then another yelling announcement. And this is just, I’ve got no idea, no idea what I’m supposed to focus on here, pay attention to, read, absorb, and so I feel like this is, this is one of those things where it’s like, hey I don’t want to do the common layout, I’m gonna experiment a little bit, I’m gonna go off the beaten path. And this particular path seems to lead off a cliff as far as like just UX and general UI goes. But I wanna see what everybody else thinks about this general layout right here. Again, it’s not something we see very often. That’s probably for a reason. But maybe I’m wrong. Let’s see what what what is the collective say about this section right here. I’m going to keep moving on down to this. We have our treatment options, we have ambulatory detox, partial hospitalization, intensive outpatient outpatient aftercare. These are not clickable though. So as a user, it’s like, oh, I want some additional information on this or this. Maybe these things don’t require additional information, but I would think that they do. I would think that they do. So maybe we would have specific, because you have programs pages over here. Well, there they are. Wait a minute. You have pages for them. You reference them right there but they weren’t these things don’t take people to to the page. So I think this can be a dramatic improvement right here. We have a commitment section. We accept most insurances. Okay and then we’re down here to the footer. Let’s go to this is a page. Okay so I will say right off the bat I think this is one thing that we’ve talked about before. When you have a product that is solving a big pain point for people and you can borrow from, I know we all hate them, in fact I think they’re illegal in a lot of countries. Isn’t it true that like in certain countries you can’t, pharmaceutical companies can’t have advertisements on like TV and stuff. Isn’t that a thing? But if you’re in the US, you see these pharmaceutical ads all the time because we apparently love drugs in the United States. And what you’ll see is that the drugs are always for some horrific condition, right? It’s like some condition that nobody wants. And you know, you watch the commercial and what you see is a bunch of smiling happy people living an amazing life. Why are they living this amazing life? They’re at the beach, you know, it’s, hey, hey, that looks like my dad. He’s at the beach, he’s having a great time. You know, the flowing gowns in the background and the sunshine and the everything is perfect. It’s all rainbows and unicorns and why are they like this? Because they’re talking about a horrific condition and they’re talking about the pills that you need to take to alleviate this horrific condition that you have and that nobody wants. And the reason is because people want to visualize the outcome. Kevin, your monitor is extremely huge. The site looks even worse than it’s on your screen. Well, that’s the thing about 2023 web design is there are lots of screens that we have to be aware of. Let’s bring it down to, is it something like this that it was designed on? Let’s choose a, hey, now I’m on a, well, no, these are all going to be, those are all going to be phones, aren’t they? Okay. How about 1366? Somewhere around there. Bam. Okay. Is this what it’s supposed to look? Oh, I see. Okay. Well, let’s go back to the home page and see Okay Well, it’s it’s not you know, it’s the same. It’s the same. You just have less real estate. So it compresses everything into Smaller boxes and the eye is able to scan down the page a little bit better But again, we have to be cognizant of these different screen sizes that are available. And let a client know, hey, this layout, right, it’s not going to work on larger screens. So this layout is not going to work on smaller screens. This is something that we just have to be fundamentally aware of. But I would still say that that’s not, it’s still very scattered, right? And I get it. The thing is, is I think when we’re doing a layout like this, it’s like, but this is not consumable information, nor is this photo, nor is this photo. So it’s like, here’s your information, kind of like right down the center, other than the two things that are yelling at you from the sides. But in reality for a visitor, these images are here because they are creating some sense of like emotion, right? And like I was just talking about a minute ago, you actually have smiling, happy people on the on the front of the website, which is good. But it’s it is something that attracts the eye. Naturally, the visitor, anytime a face is on the page, the eye is going to want to go to the face. So you’ve got the I mean, this is good, because the face is looking at the text here. They’re facing the text over here. Okay, so it’s not like bad in that regard. It’s just that there’s so much going on. There’s so many boxes. Because now when there’s all these boxes of content, and they’re not in just like a neat row or a neat grid, they’re all, they feel scattered. It makes my eye want to jump around. I’m going from photo to this box to this box, the photo to this box to this box over here, especially because also there’s this vibrant blue that’s shouting at my eye. There’s this vibrant pink that’s shouting at my eye. Then these photos are different colors. Then there’s this white box versus these gray boxes. There’s just a ton going on. And so I think naturally you’re gonna run into UX issues with this kind of thing. And as somebody else said, you can also constrain the website width, right? You could do a box layout for something like this so that you’re not running into this issue with content stretching all the way across the screen. So there’s a few different options there for you, but I think even on a compressed screen, it’s still not, I mean, right there, right? Where was it? Right there we see an issue with the layout as well. But I think even at 1366, yeah, even right there, that should break already. It’s just very, it just feels very scattered. We’ll see what everybody else says. Somebody else, Yadira says, capitals with slab fonts are a big no-no for readability. Yeah, I think I would tend to agree. I think I would tend to agree with this. All right, let’s see Andrea says I can’t wait to develop for Apple vision Pro. Yeah, that’s going to be that’s going to be interesting, right? It’s like somebody can put on goggles and now the screen is 9,000 Inches wide not even pixels now. It’s just inches right there in a universe and there’s no constraints whatsoever Okay Can confirm drug advertising is illegal in Australia? Yeah, thought that. Okay. I’m just looking through what everybody else’s thoughts. Black text on a blue background, bad contrast. Yeah, you do have a contrast ratio issue going on right there. Good call, good call. Is it supposed to be 3D? Those colors make me think so. Oh yeah, you’re right. These are the, that’s the 3D colors, isn’t it? I got to put on my goggles. That’s what I’m missing. Missing my goggles. The images of people have their heads cut off. That looks odd. I would change image alignment to show the full head. So yeah, I see what you’re saying here. So let’s let’s look into this. Where’d my inspector go? Just for those who want to know how to fix this. Let’s see what our structure is like here. Is it a real image? No, it’s a background image. And here’s your background image position. So if we did something like 50%, 100% we’re gonna see the bottom. 50%, 0% we’re gonna see the top. And then you can just dial it in. Like a 20% equals perfection. And so yeah, you can just take a little bit of extra time on these images to just be aware of how they crop. Now again, on a larger screen, they’re going to crop more. This is what you see on a on a smaller screen. But still, it’s a very easy adjustment to make. Because now what I’m basically saying with that image position is prioritize this area of the photo, which means that it’s going to look good on almost every screen, right? It’s never going to show like her chest or like down here. It’s always going to prioritize the top area, so you’re good to go. One little tiny adjustment can make a world of difference to how people see these images and even if that was a real image using object fit cover, you still have access to the object position directive so it’s good to go. This one doesn’t have any issues right here. This one, this kills me though, like clients, this will always kill me. They’ll hand you a photo like this where there are people who touch the edges of the screen. It’s a group of people, there’s no breathing room in the photo whatsoever. None, look, there’s no white space on the left or the right. And so naturally as we go down to a, it’s a landscape photo. So on a landscape device, it’s always gonna look great. It’s gonna look fantastic, okay? But not everybody is on a landscape device. Some of us are on phones. And so we get to a phone situation, and you know what, Bev? I can just hear Bev now. Here she comes down the hall, stomping her big feet down the hall in her floral blouse and her gold earrings, and she’s gonna come in and be like, you’re cutting off my people. My people are cut off. Hey, can we fix that? Can you not cut off the faces right here? It’s like, hey Bev, I realize this is your first day on the internet, okay, but we’re gonna need a different photo that’s not a landscape photo with no breathing room if you don’t want people to get cut off because it’s just like a fact of life. Or Bev, here’s your other option. We cannot crop into it, we can just place it and that’s it. But it can’t be the background of a container. It can’t be, we can’t overlay text on it the way you asked for earlier. You know, something’s got to give, Bev. Something’s got to give. They just, I don’t know why they don’t understand. They don’t understand these things about just basic images on the internet. Okay, back to the website, AtHand. This looks like these people are getting married down here. I don’t know exactly what’s going on with that. But let me go back to the programs page where we were, which one were we on? Ambulatory, detox, right here, right here okay it well it’s actually all these yeah this was the one we were on so this this chick is downing a handful of pills which is not I wouldn’t say that’s a great thing to show on the treatment center website this guy could not be more depressed right now and so what I was getting at is there’s a reason those commercials show happy people and unicorns and a fairy dust and butterflies and roses because people want to see the outcome of the service and they don’t want to see the life that they’re currently living, right? I don’t need to see this. I live this every day. Maybe if I’m coming to this website, I don’t need to see this. This is my reality every day. If I’m, if I’m coming to this website. I wanna see the thing that I’m going to transform into. So you can now show me more happy people here, show me what’s going to come out of this. And this is a really good area where along with that kind of bright cheery photo, you give me some like bright cheery headline to chew on. Give me some copy that’s going to give me hope. Give me some, don’t just tell me partial, yeah, here’s what you’re here for, okay, partial hospitalization program. This is what you’re here for. Sucks to be you, right, as we visualize here. You know, go ahead and sign up and we’ll treat you like we treat everybody else, but you know, this is the life you’re going to live for a while. It’s not, it’s nothing hopeful here. There’s nothing cheery here. There’s nothing to look forward to here it’s kind of just like the facts here’s the facts and Here’s the life that you’re currently living and so I think we can be much more maybe inspirational Here for our visitors who are looking into this sort of thing Does everybody agree with that? I mean is there any value in like here is the depression and the pill popping and the facts I just It doesn’t I don’t think this would would really Intrigue me to go to Austin treatment centers by the way also a really good area where we can show the treatment center Itself you know where is the visual is that like where am I going to be going is it a nice looking place? Is it like, is there a great view of the, of some mountains in Austin or something? I don’t know. Like what, what is this place? We can go to the about page and see if there’s any of that. It looks to me like it’s in the heart of Austin. Like it’s in an actual, it’s in the actual city. Yeah.

3
0:44:22
Hmm. Okay.

1
0:44:25
Yeah, I’m not, I really wanna see where I’m going to be going, right? I think that would be like a primary, for somebody going to a treatment program, to me it feels like that would be a primary thing. Like show me where I’m going. Where am I going to be like, you know, locked in for X amount of days? Show me the people that work there maybe. Show me, they’re bright, shiny faces. These stock photos aren’t really getting the job done in that regard. So I think there’s some layout improvements that can definitely be made here. It feels like there was a little bit of experimentation going on with the layout, which is a good thing. It’s a good thing to experiment, right? It doesn’t always work out. I think we can, and here too, it’s like, we were creative maybe in the wrong capacity. Like creative with the layouts, not creative enough with the copy, the messaging, and the photography. Those are really the areas where we probably should have worked to be a bit more creative. And just give people a standard layout, because it’s like, you know, I don’t need the most cutting edge website on earth when I’m, you know, an alcoholic, right? It’s like, I need you to speak to me with a really good copy, I need to see where I’m going. I need to know that this is gonna be effective. And I need to know how to sign up. That’s kind of like what I need to digest for a website like this. Let’s see what everybody else thinks though. Let’s head over to the chat. All right, I saw some of these already. The blue text in the footer with the gray background is where it fails, accessibility, color, and contrast. Yeah, most likely, most likely. I mean, we can pull that up. Let’s go to, let’s see, let’s see, let’s see. Where are we? PolyPane. I gotta find an app. And I gotta pull it onto the correct screen. Let me bring, let me pull it up in PolyPane first. Okay, let’s bring this over. All right. So here’s here’s here’s the website in polypane Okay, let’s get rid of that. Thank you. And so what you’re gonna see is flags on everything that fails color contrast because that’s the setting that I have turned on right now and So actually this white text on the blue is failing the contrast Check the pink text on the white is failing the contrast check. All of that is failing color contrast all of this is failing color contrast the white text on the blue button so now how far off is it well that kind of tells you right the little score down here 2.5 out of 4 I believe 4.0 is passing so it kind of tells you and it tells you the color that would actually be valid here as well that’s similar to the color that you happen to be using so that you can easily make adjustments. And here’s kind of another good thing about automatic CSS because of all the shades that are generated for you and all the transparencies that are generated for you, whenever you do color contrast stuff and they tell you no this one’s not valid but it’s close to being valid, there’s generally another shade that’s valid that you can swap it to, or you can simply go in and adjust that particular shade until it’s valid. Now there is a challenge as to where you use those colors, right? Because if I use this blue on the white, it might be valid where the blue on gray is not valid. And so that’s where the ability to customize or create custom shades really comes in. If you are trying to really dial in contrast ratios. And ACSS is where, why I say there’s no limitations, right? With ACSS color partials, you can make any color imaginable that’s in the same hue family and very close to another shade that you happen to use. But you can make it for a very specific purpose, like passing color contrast in a very specific section. And it’s still very manageable and it’s still hooked into the framework itself. Color partials are very, very, very powerful. So, like I said, there’s no limitations. You can easily do color contrast checks and adjustments on the fly with automatic CSS, which is really, really good. Okay, I think we can close that. All right. Better to not use people at all, just the beach, the sunset, etc.

8
0:48:51
Okay?

1
0:48:52
Interesting. I’d have to see. I’d have to see, you know, here’s our option compared to this option. But I do think that, you know, showing just scenic vibes is good. The problem with this one, I think, is there is no scenic vibe to demonstrate. It’s like in downtown part of Austin. Unless the just interior of the facility is actually very nice, you might be a little – you don’t want to show people the beach when they’re going to the downtown Austin, Texas, right? Like that’s, that would be a disconnect for sure. So there is maybe some built in limitations in that regard. Yeah, Ryan says, we need more happy AF in these pics. Whoa, I’ve never seen sub bullets broken into two columns. Where do we see that? Let’s go back to the homepage. I don’t know what sub bullets he was referring to. Was it on one of the wrong programs? ambulatory detox. Oh, like, oh, oh, that’s interesting. Yeah. You’ve got an unordered list that breaks into an ordered list. That’s not I still want to say that’s two columns though. So I don’t know where you saw the two columns, but I do break lists into two columns a lot. I don’t see it happening here. You rarely ever see the mixed unordered ordered list thing going on here. I’m not even sure. We have to think about some. That’s an interesting question. Is an un, is an ordered list able to be a child of an unordered list? I don’t even think I’ve ever considered that. I’d have to look up the spec on that and see.

4
0:50:34
It’s very possible that it is.

1
0:50:35
I just, I’ve never considered doing something that way. Okay. Pictures do look depressing. Pictures of clients leaving with big smiles would work. Definitely needs a video somewhere. Help me feel what I’m going to feel when going to a treatment center. Yeah, I think this could definitely, definitely benefit. The problem with video in this regard is that, well, you could absolutely get people to sign releases and agree to be in the video. It’s gonna take a production budget, obviously. It’s gonna take some logistics it’s going to take some people agreeing to be part of the thing but I mean we know like the show intervention does this stuff all the time right and so if you think go to like an intervention episode think of your now cut out all the stuff in the beginning okay we don’t we don’t need to see the person’s you know terrible terrible existence prior to treatment but in every almost every intervention episode, the last 10 minutes, five, 10 minutes, is dedicated to this person going into the treatment center, being in the treatment center for a little bit, and then their result after being in the treatment center. Take that five to 10 minutes of a typical intervention episode, it’s on A&E, everybody can go watch it, it’s been around for like 20 freaking seasons, there’s plenty of examples, okay? That last 5 to 10 minutes that they show in most intervention episodes is like the commercial for a place like this. You just get a little budget together, get a little coordinator together who understands video and storytelling, pick somebody who’s going to agree that you’ve had good results with to be in the film and there you go. You got a little 5 minute reel that really tells a captivating story, shows the transformation, gives people a glimpse of how the treatment center is on the inside. You check all those boxes with one piece of content, then that piece of content can go on your YouTube channel, you can run YouTube ads for it, you can run Facebook ads for it, you can run any ads that you want to run. Google ads, everything on a landing page. Man, this is one piece of content can go very, very, very far if it’s a good piece of content. So shout out to Nicholas, I like that pointing out the fact that this really, really, really could use a video to help sell.

4
0:53:06
It’s probably great to clarify that it’s not always

1
0:53:09
happy people in treatment or after relief, support, hope, all these things. It’s important to think about your audience and what their goals are. Absolutely. So, which is why in the Inner Circle we have the offer and messaging workbook. It’s going to help highlight exactly what your target market wants to hear and see and feel and then you put content together for that. Happiness is one of those things, but as Justin pointed out, there are going to be other goals that people have as well, and you need to know what those are, and you need to be able to touch on those with the copy and the content. Peacock says, you mentioned ACSS working with HTML and VS Code. Would it be possible to have an option to export the ACSS settings to use on an HTML site? That would be awesome for my non-WordPress sites. I mean, you can already use automatic CSS in a non-WordPress environment. If you know Sass, there’s no documentation for it. There’s no official documentation for it. There’s no official support for it. We don’t exclude people from using it that way. But we are a framework for WordPress page builders. That is our focus. And until we complete our mission in that regard, we’re probably not going to focus on non-WordPress applications simply because it pulls us away from our current mission and our primary mission. And most of our users rely on us to stay focused on that mission. So that’s the mission that we’re gonna stay focused on for right now.

3
0:54:41
Okay.

8
0:54:41
Nell Media says,

3
0:54:42
if I’m depressed and I just see happy people,

7
0:54:44
I might think that this is not for me.

1
0:54:46
I can’t believe I can be like that. Some people do feel that way and that’s why the photos are not the only thing telling the story. The copy has to match with the photos to assure people that look, everybody that comes here is like you. They feel hopeless, they feel depressed, they feel down on themselves. You don’t have to visualize that with every photo, okay? But you can help relate to them with the copy and then let them know, here’s where you’re at now, here’s where you’re going to be through this treatment process. This is basic marketing. Basic marketing is here’s where you’re at now and here’s where you’re going to be after we get done with you. That’s kind of like the underlying thing of almost all marketing, right? And so you can have a depressed person here or there, but to have the entire page dedicated to depression and pills, I think that’s where we go wrong, right? And the hero, this is called a hero, right? Who is the hero of the story? Like your customer is the hero, and we need to visualize the hero doing hero things. Down here in an area or next to copy where you’re kind of telling the journey story, whatever, you can have maybe a depressed person. But again, it’s take them to the transformation as quickly as you possibly can. And again, it’s the copy along with the photos that tells the story. You’re not relying on just photos to tell the story. You’re not relying on just copy to tell the story. The two kind of have to work hand in hand. And so I was just pointing out that this is just very, it’s very depression heavy, because that’s all that exists here. What is this?

4
0:56:32
How are you doing this?

1
0:56:33
Cryo Banshee, I need details. I have no idea what you’re talking about. We’re talking about a lot of things and doing a lot of things. So details in the questions or comments is very much appreciated. Okay, PolyPaint is honestly the best dev tool for checking sizes and the accessibility stuff. Yes, absolutely. That already exists. Look in the uploads photo of your base. And so, okay, good. That was about the ACSS thing.

3
0:56:58
A video of the facility is coming,

1
0:57:00
but the facility is not fully opened yet. Okay. Where is this located in the WordPress database? Don’t know what that’s related to. Is the frames for Figma plugin available soon? Yes. It will be available very, very soon. I’m currently ironing out my workflow with it. Then I will be recording very, very soon. It’s not going to take very long. Then I will be recording the teaser video for it. And then we will put a launch date on it and a presale date on it as well. But it’s, okay, so let’s pause here and we’ll talk. I’m not going to go back to camera. Very dangerous for Kevin to go back to camera without a producer, because if we go back to camera, we may not recover from that. We may never get back to screen sharing. So I’m just going to leave it like this. I’m going to leave it the way that it is now. But I will pause and talk about this. So, frames for Figma. I want everybody to understand that there is a really yummy goody baked in to frames for Figma. It’s something that had to happen before we could ever think about developing frames for Figma. Because when we think about frames for Figma, everybody thinks about the layouts. Naturally, that’s probably what your brain would go to, is I want all those layouts that you have in Brics, I want those available in Figma, so I can drag them in and then design everything, style everything up, and then it’ll be perfect for my workflow because then I can go into Brics, add the same exact frames, and then just apply the styling to them that I’ve done with my design, and everybody is really, really, really happy. And you’re free to be very creative in Figma you’re not adding a bunch of classes that you’re not going to end up using but let’s pause for a second take a little bit of a breather okay you can’t just throw layouts into into Figma can you the layouts like spacing in the layouts typography in the layouts styling of buttons lots of things are actually driven by automatic CSS in bricks. It’s not just layouts, right? The whole benefit of frames is that it’s driven by automatic CSS. You have automatic responsiveness and you have a very very consistent spacing and color systems and on and on and on and on and on. So what you really need to think about is before you build a product like frames for Figma is having like an ACSS for Figma. Because I mean, don’t you need a framework in Figma if you’re going to build on a framework in bricks? Kind of makes sense, right? It’s kind of a must have. So what had to happen first is you had to build a framework that works in Figma, just like it works in Bricks. And that’s what we have. That’s what we have. And that’s very, very, very exciting. Very exciting. And now we can build Frames for Figma on top of that. And by the way, this is gonna unlock automatic CSS for the entire Figma community. The entire Figma community can use automatic CSS now, inside of Figma. And then if they want to go into development if they happen to be using a WordPress page builder they’re able to translate that directly into development but they don’t they don’t necessarily have to they can just use it to make their Figma life a lot better and a lot easier and a lot faster so it’s a it’s it’s a very big project and when I do the announcement, we’ll definitely shout out, you know, the person that’s put the vast, vast, vast majority of the work into that and who will be heading up frames for Figma going forwards because this is not me. This is not me. What we have to do to get our tentacles into these other areas is we have to acquire very talented people, okay? That’s what we because I am not that talented. I

9
1:01:17
Say it. I’m not that talented

1
1:01:19
I could figure out a ACSS for Figma and a frame for Figma, but it would take me a long time and then then you would stop you would stop seeing Actual work on automatic CSS. You’d probably stop seeing tutorials. You’ve got there’s only one of me There’s all there is only one of me, after all. And then when it comes into like, you know, JavaScript land and PHP land, I can’t do everything. I’m not everything. And so I have to rely on very talented people. So we have a very talented person who has developed ACSS for Figma and who will be heading up frames for Figma. And just like we have a very talented person who we brought on for the contextual menus, right? Like we could sit here trying to reinvent the wheel, but Christoph did an amazing job with Placer. And so let’s just acquire the talent. And so that’s what we’re doing in the land of Figma. And that’s very exciting. But because I didn’t build it, I can’t just rush out and like, hey, here’s all your tutorials for it. Because I have to get my workflow wrapped around it myself, then I can make a nice teaser video for it. So you just have to be a little bit patient, but what’s coming is very, very, very, very powerful. And like I said, it’s going to be, it’s gonna hopefully make waves in the Figma community. Like now we’re branching even outside of WordPress, but this is something that is absolutely necessary for anybody doing work in WordPress as well, especially if you’re an automatic CSS user, especially if you’re a frames user, because it is, you should be doing design in Figma. You should be doing design in a design tool. That is the best workflow by far. Not to say that you can’t do design in the page builder, it’s just not the best workflow. It’s objectively better to do design in a design tool. Okay I think I’ve said enough about that. Ruben says Kevin I just bought bricks. Fantastic Ruben. Can’t wait for this going to change my workflow entirely if I have ACSS in Figma. Absolutely. Absolutely. Okay let’s go to the second site. Let’s go to the second site. Here it is. And hey, look at that, we’re screen sharing, because I did not abandon the screen sharing a minute ago to go off on that tangent. We are still here and still live and you can still see us, which is great. Okay, this is sterndesign.co. And this is the agency website that we are looking into today.

3
1:03:57
Right off the bat, I’m gonna say

1
1:03:58
I can’t see the logo very well. Now, I do have very bright lights, maybe here. Okay. Yeah, I don’t think the dark on dark is the way to go up here. And we can look in, you know, let’s just pull it out. Let’s just pull it out and see how many contrast check fails do we have right off the bat. Let’s get our polypane open. Why do I feel like polypane has the most obscure logo. I could never find it when I’m looking for it in the board down here. Okay, let’s get this going. SternDesign.co. It’s probably not gonna be able to contrast check the logo. Why is it not contrast checking the text? Okay, well, it’s showing it right here. But now, see, I don’t even know how this contrast checker works if it’s like how it’s interpret it may not be able to interpret that background but what is that background is it an image back there because if it’s an image I don’t even know if it’s interpretable because it probably calculates this based on well it is saying that well that would be on light text that would fail contrast to I wonder if it thinks there’s a white background back here let’s go down a little bit. Okay, this blue is passing. All of that’s passing. Maybe in the footer. See, I just don’t know if that’s… let me see if that’s a background color back there. So we’re gonna have to bring this… I can’t imagine that that text on that background passes. So let’s go look at what’s going on back here. Inspect. Okay. Alright, so this is built with generate blocks. It appears. Okay, let’s find, okay, that’s a background color. Interesting, all right, what else? Where’s our burgundy coming from? Inside article, I mean, this could be on the article, this could be on the main, I don’t know where this thing is. Div class content, why are there so many divs?

4
1:06:03
Why are there so many divs?

1
1:06:04
Look at this, look at this. So we have a, we have a site. This is just called site. Hey, here’s your site. But it’s also called a grid container. All right, we’re gonna come down. Let’s collapse this one. Then we have site content. So you have site, which is a main wrapper. You have site content, which is another main wrapper. Then we’re gonna open that then we have a content area which I can’t even see that that’s just another main wrapper that’s still wrapping everything then we’re gonna open that and finally we’re gonna get to our main which is another wrapper I just don’t know what what are all these wrappers for I feel like this is the you know the gift you get on Christmas from your uncle that you know hates you and wrapped it 19 times and you’re just taking off layer after layer trying to get to the gift. All right, here’s the main tag, another wrapper. Then we have an article. Is this really an article though? Is this, hmm, is this an article? It’s our homepage, is it an article? I don’t think we’re doing a little too much here. Well, then we have an inside article. Guys, these are still, look at the blue highlight of what I’m selecting on the page. We’re still selecting everything. Okay, so then we’re gonna open this up. Then we have our entry content. I don’t even know, that’s just another wrapper. There you go, another wrapper there. Then we finally make it to our section. Okay, there is our section right there. Then we have an inside container. Now we finally see the establishment of structure for this page. And there’s GB shapes. So is that what this is? GB shape, let’s just get rid of GB shapes. That’s what it was. GB shapes. Okay, what’s in there? What kind of goodies are we gonna find in here? Shape number one,

4
1:07:48
color FFF.

1
1:07:49
Okay, that’s gotta be an SVG then. All right, we’re transforming, we’re scale, we’re positioning absolute. This is gotta be the, yep, there it is, right there. I’m not so sure the contrast checker knows that that’s there. That’s something I’d have to ask PolyPaint about. Can it detect that this text is actually on an SVG? Hmm, okay.

3
1:08:18
Interrupt, can you guys imagine

1
1:08:20
that this passes contrast check that dark text for the nav on this dark back. I just can’t imagine that that passes, especially not with a 20 or whatever it was saying. All right, let me refresh this. How do we feel in general about the backgrounds and dividers cutting through the text? I feel like it’s just kind of makes it hard to read and it’s not super clean. But I want to see what everybody else thinks about this. We’re going to start off our journey with a carousel here. Okay, this is our featured work. Can I, I can drag the carousel. I can’t expand, so these are not clickable. Though the link is clickable. Let’s see where this takes us.

3
1:09:12
Uh-oh.

8
1:09:13
Oh, no, no, no, no, no, no, no.

3
1:09:18
What’s happening?

1
1:09:19
Oh, oh, there it goes.

6
1:09:20
Hold on.

1
1:09:21
Wait, hold on. What happened? That at the bottom, you see the bottom left? It’s telling me that that goes somewhere. But when I click on it, nothing. Oh, I got to click multiple times. Apparently watch my first click.

8
1:09:32
Here’s one click.

1
1:09:32
Bam. Okay, that went. Why did it? I do, I seriously clicked it like 10 times before that. Okay. I just clicked that one. I just clicked sun, sun, sun, shine. Wow. That’s a tongue twister. Sunshine, seashell, seashore. Okay. That didn’t do anything. Something is blocking me from clicking this link. I just clicked it again. I just clicked it again. I just clicked it again. Now it finally goes. So like the first three clicks is nothing’s happening. So I’m not sure you might want to inspect that, see what’s going on there. Okay, let’s just do a little quick accessibility check here. Let’s get a little tab. Oh gosh, oh dear. Nope, all right, we’re good. All right, here we are. So we do have a skip to content. We do have a logo that links to the homepage. We do have our work, our blog, our about, our contact, testimonials, and get in touch. Then we’re coming down to learn more, learn more, learn more. I’m interested to see how these are announced. The one thing, okay, then it does go to the navigation. I can navigate this with the keyboard. So that looks good. It’s a little odd that it passed the navigation to get to the items. Like I can navigate it last, but the navigation is above. You know, it’s like the visual order and the actual order of interaction are opposite. So it’s a little bit off, but not horrific. I’m going to see how these are announced in just a minute. Then we can book a complimentary call. Okay, let’s do that. Let’s go back and just, let’s see how we can announce these. Cause we are dealing with something that is, you know, built with some sort of accessibility in mind. So let’s see how we’re doing here. I don’t want to blow your ears out. So I’m going to drop these two volumes down before we go.

2
1:11:32
VoiceOver on Chrome, Southern Oregon Web Design, Stern Design Co, Google Chrome Kevin window. Oh visited. Larry go image stern design. Co has keyboard focus you are Visited link work list five items. You are currently on a link to click the visited link blog Visited link about visited link visited link get in touch visited link learn more about Brad’s here project one slash four group Visited link learn more about sunshine solar project two slash four group link external link, 3-4 group. You are current on a link to click visited. Previous visited link. Learn more about Brad’s here project, 4-previous slide button, group article, visited link, book a voiceover off.

1
1:12:16
Okay, all right. So let’s take a minute to applaud because not very often do we see sites that pass some accessibility checks, some important accessibility checks. And this is an area where when I see it visually, I say, wow, this is very easy to make inaccessible. By default, if you make the learn more link a link and you don’t do anything else, you’re going to break accessibility. And as you see here, it said learn more about the Sunshine Solar Project. It didn’t just say learn more. By default, it would have just said learn more. But he made it say, learn more about the Sunshine Solar Project. Man, I hate that word. Not great for me. So extra work has been put in to now we know, you know, if we have an unsighted user, they’re relying on the announcements to know what they’re going to learn more about. They’ve taken care of this. So we do have to give the applause. You know what I need? I need a, we have the Kevin Hart. We have the womp womp. We need some sort of congratulatory audio. So if anybody has any good ideas for that, let me know and we will incorporate that. We do, you know, it’s not often used, but when it is, we do need, we do need something for that All right. I’m interested in the copy here. You know it’s a to me all Agency websites more or less say the exact same thing so let’s get to the copy We have web design and marketing in Southern, Oregon. I’m curious to see if this is the h1 or not Let’s put a little guess in here is this the h1 or? Did he make this the h1 this visually You know you would think is the H1, but I’m thinking that that’s the H1 right here. Let’s let’s find out. Let’s inspect and Let’s see what we’ve got hey Look at that H1. I’m not a big fan of H2 H2 H2 here. I will say that not not a fan of that I’m also not a fan of this and this is my man oh man oh man. I mean this is a perfect illustration of some of the things that I talk about with these other page builders. So what I’m gonna have to do here is I’m gonna go to local, I’m gonna go open my generate install and I’m gonna go here to generate for everybody to see and we’re gonna go to pages and we’re gonna say new and I’m gonna say hey this is my homepage and we’re gonna publish this and then oh yeah there’s no builder to open of course. So what I’m going to do is I’m just going to add a section. Oh I can’t add a section right because there is no section element in generate. So what I’m going to do is I’m going to add a container and then what I’m going to do is I’m going to add a headline and it’s going to say section. Okay then what I can do in generate is I can click this little box right here that says add to contain I think hold on no no I’ve got to click this container and I can click what is it this button yes which one add to container container I think it’s this one click this one no hold on one of these is a shortcut notice that this is not a good UX right here clearly there are some UX problems let me go delete this remove container why do I have to guess what’s going on here? All right, container, there is a shortcut where you can add an internal container. I thought it was that one.

6
1:15:47
Ah, there it is right there.

1
1:15:48
Add inner container. Why was that not an option a second ago? Because I added a headline, it probably went away. Okay, so I’m gonna add this, add the inner container. And don’t you just love how you just add things to the page in Gutenberg and can’t fucking see them? That’s my favorite feature of Gutenberg, is that, hey, I added it, but you wouldn’t know it was added, unless you came over here. Well, you can’t even see the inner container in Gutenberg anyway, I don’t think, so let’s just see what’s going on here. Section, okay, update. Let’s go to the front end. Oh, that’s not the front end, I forget. You gotta go over here. Preview a new tab. God, I love the Gutenberg workflow. It just warms my heart. Okay, so there’s our div, there’s our inner container that we can’t see in the actual builder, and then there is our h2 headline. Notice what this is not. This is not a section, because there is no such thing in generate. So in generate what you have to do is you got to scroll down over here, and you got to go to advanced, and then under tag name you select section. Notice that it just got padding by the way, because automatic CSS is in effect. And automatic CSS is like, oh, you added an actual section, you need some section padding. And so it puts in that section padding by default, which is very, very handy. But it didn’t do that before because it wasn’t an actual semantic section before. But now we have a proper section tag. Why do we have a wrapper? Don’t know, couldn’t tell you. Don’t need it. Really what we should see, oh, and that’s why we have an article tag as well. I don’t know. This is an overdone use of the article tag in my estimation. But really what you need here and what you’ll see in Bricks is main, section, section, section, section, section. That’s what you should see. But here you see main, article, div, then a header, then a div, then you can start seeing your sections. What you see on this page, what I was pointing out, notice, look, look, section. Why is this not a section like it should be? Why is this not a section? These are different topics, right? We’ve talked about topical relevance and how your topics should be broken up into sections. They are in separate containers in Generate, but because there is no section element, what I believe happened is they made the first one a section and then forgot to make the others a section. That shouldn’t happen. It relies on the user to remember to manually make everything a section. Or, or Kareem says there’s nothing that can trigger Kevin so hard as Gutenberg. I mean, aren’t you triggered just watching me? I feel like you should be triggered as well. We should all be triggered by this. This is an act of violence in my estimation, this Gutenberg workflow. An absolute act of violence on web developers and designers. Okay, remember I’ve talked about magic areas before in these builders. These builders love to create magic areas where you go do magic parts of your workflow because why would anybody want to do I I’m ragging on generate and I shouldn’t be I’m about to make automatic CSS compatible with generate I want to I want to encourage you know anybody who’s going to be using a block editor I think generate is probably one of the best that you can choose this is just for entertainment purposes okay you don’t have to get your panties in a wad. You don’t have to get all up in your feelings. It’s just, but it is what it is. I don’t know why there are magic areas. I’ve just got to say it like it is, okay? What’s that other one? Breakdance, the dancing builder. The dancing builder has a magic area. The generate has a magic area. So I go to generate blocks, and I got to go to, is it global styles or local patterns? I think it’s global styles. Okay, so here I can go add a new global style and I can call this section. Now I actually haven’t even tested this. We’re gonna test this together. We’re gonna see if this works. Okay, I have to add a container. This is effectively where, this is the magic area where you create a preset, okay? Or like a predetermined type of element. So I’m gonna add a container here and I am going to say, yes, I want the inner container. See that plus sign, God, it makes me wanna, it makes me wanna click it cause it’s a plus sign. This one is not a plus sign, even though I’m adding something, it’s not, it doesn’t have a plus sign. But I’m gonna go ahead and click that. And then I think I’m done, except for I need to open the absolutely terrible list view. And then I need to come down here to advanced and I need to set this to section. Okay, I’ve created a section element that I wanna save and I’m gonna call this section and I think that’s all you have to do. You label it like that, you give it a name and then I’m gonna go publish. I don’t know, what I don’t know is does the section label, does this whole workflow affect this tag name down here? That’s what I don’t know. We’re about to find out. Okay, so now what I do is I go back to my homepage that I was working on, there it is right there, and I remove this. So theoretically, I should be able to add a container and then apply the preset of section and get the outcome that I’m looking for. So I’m gonna go to container. I’m gonna select that container and I’m gonna go right here to use global style. And I’m gonna say section. Oh God, what has happened? Nothing happened. Do I have to hit apply? Heading, headline, help. Okay, update. Go to the front end, help. Oh, that’s definitely not a section is it? Okay, so my preset does not seem to affect, oh boy, does not seem to affect the HTML output. I still have to go here and I still have to do, I don’t even have the section selected. I’ve still got to add, now I can’t add it. All right, I’ve got to remove the headline, then I can do this, then I just feel like I’m dancing. I just feel like I’m dancing with the builder. But I’m stepping all over its feet. Or it’s stepping over mine. I don’t know.

3
1:22:10
Help, okay.

1
1:22:11
Still, I’m not seeing that we’ve applied the tag properly. Tag name, section, wait, yeah, section. Okay, there we go. It didn’t help, it didn’t help. You just gotta do it manually. And so what you end up doing is a lot of people create pages and they don’t have any sections on their page. This is what I was getting to. Nobody has a section on that. Well, they have one because he remembered to do it here, but then just, I guess, forgot, you know? So semantically, this, this is a completely unorganized page, right? These should all be section elements, but, but they’re not.

3
1:22:47
Okay.

1
1:22:48
Just see, see why I just, you know, now can we compare and contrast? Let’s compare and contrast. So we open Bricks. Little comparison, little contrast, pages, add new, just the same workflow, okay? Edit with Bricks. I need to break my page up into sections. Well, there’s a section element. Bam, bam, bam, bam, bam, right? Section, section, section, section, section. So they all have the section tag. They all have inner containers already. I can start putting myself into inner containers. All good to go. So I don’t have any defaults on this page, but we can probably see the HTML output. Okay, main, look at this. Hey, no other wrappers, not 10 gift wrapped sections. It’s just, hey, here’s a main, here’s your sections that you asked for, here’s the inner containers, you can go start putting stuff in them, everything is semantically accurate. I just, why is that hard? I mean, it’s one of those things where I’m like, can’t we all, I know, I know people on the internet can never agree about anything. Everybody’s gonna have some sort of argument. But like, surely most of us can agree that like, just give me the thing that I need to break up my content on a page properly and let’s call it a day. What is this dance that we all have to do? I don’t know why we’re dancing with these page builders.

3
1:24:16
Okay.

1
1:24:16
Ryan says, dude, what a cluster. I don’t know how someone uses that crap. Completely different workflow, I guess, but damn not for me, not even close. I mean, I’ve felt the same way. Yeah I just I’ve yeah I mean I’ve got a lot to say about it but we don’t we don’t need to get into it right now. I just said ACSS is inefficient you mean Gutenberg yeah yeah Gutenberg. Gutenberg for sure. Should a blog’s homepage be a page or a post? A blog’s homepage be a page or a post? Well, the homepage should be a page. Pages should be pages. And the only thing that should be a blog post

3
1:24:59
is a blog post.

1
1:25:00
That’s the only thing that should be a post. Don’t make anything else a post.

7
1:25:03
Okay, where were we?

1
1:25:04
We were doing this site. I said I wanted to check out the copy. So the internet is full of bland, confusing websites. We won’t let yours be one of them. All right, and then we’re gonna come down, carve out your corner of the internet and build your own mini empire. That’s what we’re here for. Okay, I like the kind of the emotion of the copy. I will point out, I feel like this is speaking to like startups almost or like small businesses who aren’t yet online maybe because you know the clients I work for they tend to be very established and so if I told them to carve out their corner of the internet and build their own mini Empire they’d be like fuck dog like we’ve been around for a minute like we got websites okay we got you know we got lots of money we got a lot we got you know lots of people we don’t need to carve out our corner of the internet like we’ve already kind of done that we just want to take things to the next level that’s kind of their vibe right so this doesn’t now if you’re speaking to startups if that’s your niche that’s your focus of like super small businesses or whatever this copy will probably work I just want you to be aware of and figure out who are you talking to and trying to attract and make sure that your copy is tailored to them. Long gone are the days of if you build it, they will come on the world wide web. Competition is fierce and not just from your direct competitors. Anyone and anything that is vying for your prospect’s attention is in effect your competitor. So what’s a talented entrepreneur or company like you to do? For your website to succeed, you need the right mix. Design alone isn’t enough. You need the right combination of strategy, design, copywriting, and marketing to win online. Okay, I see, I’ll make one suggestion right here. I’m not keen on this word, the right mix. It needs the right mix. I don’t know what a mix is. I think you’re alluding to like a recipe, for example. But I don’t even think we need like a filler word in here. I think, let’s just read it like this. For your website to succeed, you need the right combination of strategy, design, copywriting, and marketing to win. I think you just have this second part of the section that’s not really necessary. You said what you needed to say right here. You could just take this and put it right here. And I think that sentence is gonna be a lot stronger. Because you’re just telling them, like for your website to succeed, you need the right combination of strategy. I don’t think this is how you would talk to them, right, in real life. You would tell them these things. You just tell them that. That’s exactly why we’re here. We’ll work together step by step to establish a winning online presence for you and your company. Curious to see how we can carve out your corner of the internet, book a complimentary call. Okay, so if we’re grading the copy, I give the copy, assuming you’re talking to the right person. This is good copy, right? You see much, much, much worse copy on most websites. So this is good copy that’s been put in here. It goes right into a testimonial with a image that goes along with that testimonial. Hi, I’m Matt Stern, nice to meet you. I want to help you kick ass and take names with your online endeavors. This feels like it feels, I don’t know if that’s the vibe right there. I don’t know about you guys. I don’t even know who remembers this. Let’s just shout out. Shout out to my man, Duke Nukem. Does anybody remember Duke Nukem from like 1996? I think when I was like a teenager, I got like a my uncle, right? I talked about the uncle that wraps things this is real life my friends the uncle that wraps gifts and like six layers just to watch you fucking not be able to open your gift that kind of uncle the uncle that also shout out to my shout out uncle Bryn okay got me he got me Duke Nukem when I was a teenager for my for my computer. It came on a CD. You remember those days? It came on a CD. So my PC got me Duke Nukem, but that motherfucker got me the shareware version. You remember shareware versions of software? Wasn’t like the full version? He got me the shareware version of Duke Nukem. Shout out, Uncle Brent. Fantastic gift. Wrapped it in like eight layers. Just, I had to unwrap all the things and actually think he put it one one time he put my gift in a different box. It was like some fucking shoe box or something. And then I opened the shoe box thing is shoes and you know, there’s there’s an actual gift. But still, it’s just the shareware version of the gift that you know that right? Shout out Uncle Brent. Okay. I love me some Uncle Brent, but that’s what it was Duke Newcomb. This is guys this if you don’t know Duke Newcomb, you got it. I grew up on Duke Nukem. All right. But this gives me Duke Nukem vibes. Duke Nukem saying was kick ass and chew bubble gum, but I’m all out of gum, right? That’s kind of the vibe you’re giving me here with this. I don’t know if that’s the vibe for like an agency website, right? I don’t I don’t know if you want to give the Duke Nukem vibes. But let’s check the rest of it. Clients tell me that I’m easy to work with, attentive to detail, and that they feel like I actually care about their success. I’m currently booking new projects for June 2023. Drop me a line if you’re curious about working together or you can read some of my writing to get to know. Oh, we got a blog. Okay, let’s check that out. We’ll open in a new tab. Got another testimonial here down here. Okay. So overall, it’s clean, you know, other than the I’m not big on this little layout up here, but everything else is very clean. The copy is good, the testimonials are there, the imagery is there, the slider’s there, you’ve got accessibility going on. We’re doing very, very, very well. So let’s go check out what’s going. The only thing that you don’t have is like I can look at your portfolio, okay? I can’t really get any other details about how you work or your philosophy of work or your process. Like process is a very important sales tool in this industry. And so I really wanna see your process somewhere and how does your process differ from other people’s process and what really sets you apart. I don’t know, I’m not getting a lot of that. I can go to the about page and I see a lot of the same kind of copy. I see more testimonials, more testimonials, more tests. So your about page is literally just testimonials. So it doesn’t give me any more insight into process or philosophy or skills or experience. Or I mean, do we even know when you started? Do we know, I mean, any other thing that’s relevant to hiring you? I’m missing some stuff. I feel like I’m missing some stuff here. What’s on your contact page? Just a form. This is a what is this get in touch. Okay, where’s your what are your other calls to action go to right here? Okay, so that’s an online calendar, a little scheduler. Okay, all right. Good, good, good. Okay. Yeah, I just I feel like there’s a little bit of info and insight missing. And ideally, you know, for SEO and all that, like you’ve got to eventually, maybe you’re not there yet, maybe it’s coming, right? You want to build out some pages for, like have a web design page, go over your web design process. If you have another service, have a page for that service, go over that process. So I think we can continue to expand on this. All right, well, there’s not much else for us to look at. So I was gonna hop over to the blog and just see what we’ve got going on here. Web hosting the business’s owner guide, clarify your vision with a website workshop. What does this do? Okay, questions at the workshop,

4
1:33:01
how the website workshop works,

3
1:33:03
60 to 90 minutes, what you’ll receive, cost.

1
1:33:06
Oh, it’s like a service, but you’ve just created a blog post for it. Okay, it’s interesting. How to give good feedback part one and part two. Hey, hold on. Let me send this to Bev real quick. Let’s just grab that. Okay, sending to Bev on my other screen. All right. Bev at, it’s Bev. What was it, Bev2764 at Yahoo.com. Always a fucking Yahoo address with the Bevs, you know what I’m saying? Okay, alright, I sent that to her. Alright, so she’ll be checking that out. Fantastic.

4
1:33:49
Alright, so it’s more like a,

1
1:33:50
it’s not a traditional blog. It’s not like a SEO content marketing type blog. It’s kind of like you’re talking to your clients and customers kind of blog. With a little bit of the content marketing mixed in. Wait, oh, this is just a reference to another article on another site, okay. All right. All right, I don’t know, let’s go into the chat. Let’s see what everybody thinks. Then we gotta move on to Q&A. We gotta do some Q&A here. All right, what time are we at? 12.35, we’re doing good. We’ve got time for Q&A. Let’s go back to camera. Oh, dangerous, dangerous to go back to camera. Hope I don’t have to show anything else later on. Okay. I think he means the blog page, the main page of the blog. Okay. The blog page of a website would be either an actual page or your archive page for your posts. So you can use an archive template for that page, or you can just use a page. If you use just a page, you need to make sure you turn off the archive page. Otherwise you’re gonna have two things doing the same thing and one of them, you might even forget to style. So that would be bad. But yeah, use the archive template for that or use a main page. All right. Yep, yep, yep, yes. Shake it baby, yes, from Duke Nukem. Shout out to my man Duke Nukem. Let’s see. Stuck behind a dumpster shooting at hippos. Was it hippos? No, it wasn’t hippos. Tony, it was pigs because they’re police. Get it together. Get it together. Hippos that Duke Nukem was so oh my gosh, I played I played Leisure Suit Larry. Does anybody remember Leisure Suit Larry? I played that on like fucking DOS. I played what was the other one? These were like, my dad thought these were great games to introduce kids to Leisure Suit Larry and my uncle gave me Duke Nukem. I mean just atrocities of like childhood Okay Frames for figma is exciting and for the record I made a service that uses oxygen and figma and ACSS It will be interesting to see how you did it takes a ton of thought I know Kick ass and take names this is process. That’s funny bro I use why now why Tyree don’t do this to me don’t do this to me nobody oh yes Bev Bev did have an AOL email address but somebody at some point got her to upgrade and she thought the upgrade was to Yahoo but yeah you’re right the Bev definitely had an AOL address at some point. Yep, Yahoo or Hotmail 100% Yahoo, Hotmail or, or AOL. I don’t even think AOL emails work anymore. That’s why I didn’t say AOL. Did they even work anymore? If you had an AOL email address, does it even still work? Yeah, Wolfenstein was a big one. Day of the tentacle for the win. LSL in the land of the lounge lizards. Okay, all right, what questions do you guys have? Let’s get into Q&A. We only, look, we don’t have all day, all right? We don’t have all day, contrary to popular belief. If you have any questions about agency, workflow, pricing, sales, SEO, content marketing, automatic CSS frames, any questions that you have, drop them into the chat. I’m gonna go back up here and I know there’s a couple. Netrunner said, easy way to manage updates with automatic backups and restore in case of update failure on multiple client sites, not on my hosting. Oh, if the site is not on your hosting. Here’s the thing, man. If a site is not on my hosting, I make it very clear to the client, that’s all you. I want every client on my hosting and on my website management fee because I don’t, honestly, I don’t want to deal with people’s two-step-off nonsense. I don’t want to have to deal with whatever BS hosting because you know what, they’re going to choose Bev. If you leave it up to Bev, you know that shit’s going on HostGator or Bluehost. And then you know you’re getting an email from Bev, like, why are people saying my site’s slow? Why is my performance not there? You said yours is gonna be good performance. That’s what’s gonna happen. So I want everybody on my hosting so I can control the environment, and then I wanna make the backups, I wanna manage the security. Then you know Bev’s going to get her site hacked on some shitty Bluehost package. And then she’s going to be like, why did my site get hacked? What did you do wrong? It’s always your fault. It can’t be like Bev, you chose Bluehost and you chose the bottom tier plan. And you didn’t choose my plan and I’m not managing your website right now. So I mean, what did you expect? Bev doesn’t buy that, right? Bev, it’s still your fault. So I just don’t even deal with it if you’re not on my plan it’s all you dog it’s all you baby good luck good luck good luck with the hosting good luck with security good luck with backups good luck with everything that you updates everything good luck it’s not my problem because I’m not being paid to manage the website and you know when you bring it to their attention all of the things that they actually need to consider and manage. And then they go, where do I sign up for your website management plan? Because I don’t want to do all that stuff.

4
1:39:46
And shout out to the admin bar.

1
1:39:47
You know, he’s got, Kyle’s got a great product that allows you to kind of spell that out for everybody. Website Owner’s Manual, the WOM, as they say, the W-O-M. You can just hand over the WOM and a lot of times they look at the WOM and they’re like, okay, where do I sign up for the management plan? And there you go, problem solved. So yeah, right now you’re making the CNET runner, you’re making this your problem and it’s not your problem. It’s only your problem. Now if you came to me and said, Kevin, I got a lot of clients signing up for my management plan. How do I manage backups? How do I manage security? Now that’s a problem you need to solve. But when a client wants to, you know, just do their own thing, let them do their own thing. That’s not your problem anymore.

4
1:40:32
All right.

1
1:40:33
Let’s go down Q&A. Okay. Question, link building for local business tips and tricks. Okay. This is a doozy. So I mean, we could go into, I can’t go into too much detail here. We’ll be here for three hours. Let’s think about quick wins. So typically you are going to have to shell out some money for this. But it’s not going to be like buying links. Don’t go buy links from like you know general link acquisition places. What you need is local links going to your local business. So, you know, typical content marketing stuff that you would do for link building for a blog that doesn’t care where they get their visitors from. Completely different strategy than a local business. So for example, local organizations, better business bureau, local directory sites. But you have to go even further. Like, let’s say your daughter goes to, you know, local high school or something, and you want to sponsor their baseball team or sponsor their softball team or whatever. You can get links for those things. You can get those local sponsorships and you got to pay to be a sponsor. But you’re a lot of these, you’re going to get a link out of them. And a lot of them are some of them are dot gov sites, which a lot of people say, you know, increases their value a little bit..org sites, so they’re not typical, they’re not all like.coms, you’re kind of creating like a portfolio here. But there’s a lot of local places like that that you can get links from. It’s just, yeah, it’s a lot of that kind of very granular, like grassroots kind of link building stuff. And then you want to focus on creating some localized blog content as well. You probably want your traditional content marketing in there that kind of reaches the masses, but you want to find ways to create some localized blog post content as well. I might have to do like, maybe we’ll do like a training in the Inner Circle that’s specific to local content marketing and local link building. Obviously, if you can get any PR in your area, so if you can get on local news for something, there’s a lot of angles that you can take there. You can get local press releases published. There’s a lot of like kind of scattered options that you can pursue for local link building. Okay, let’s see, oh, they’re flowing in now. AOL works, I still have one. Okay, good to know. In a sales call, how do you estimate how many leads you can generate for a client? Where do you find benchmarks for different industry sectors? There’s really no benchmarks. When we break down like how many leads you can generate for a client. The industry average would be the average, which would just be like, okay, this is what like everybody and their mom gets, most people don’t know what they’re doing. So that’s not like, I guess you could say that’s a benchmark of sorts, but really, you can have company A selling service A, and company B also selling the same service and one just does the typical stuff and They get their result that everybody typically gets and then this other company comes in with like a highly focused ad Campaign a highly focused offer a highly focused landing page a highly focused like the whole funnel is built out they’ve got nurture stuff on the back and they just completely crushed the other company and And so it’s like, well, what did the benchmark matter? Like, you should be easily beating the benchmark. So when you’re talking about strategy with a client on a discovery call, you wanna talk about what the industry does in general. Like, so you let them know that you know what the industry does. Like, here’s what everybody typically does in this industry. And here’s what we would propose for you. It’s like, here is a different recipe, and here’s why we think this recipe is going to be far more successful. Because you can point out the fact that most companies in this industry, they don’t have landing pages, they’re sending Google ad traffic to their homepage, you can just list out all the stuff that they’re doing wrong. And then here’s all the stuff that we’re going to do that’s different, and here’s why we do it this way. And then you don’t give, you don’t promise numbers, you don’t say we’re going to get you this amount of leads or anything like that. In the inner circle I have a whole training on this discovery call with the client and a big part of that discovery call is asking them questions related to their goals centered around like how many leads do you want to get per month from this website and what is a lead worth to you and when somebody converts from a lead to a sale, how much is that average value? Right? What is the average lifetime value of a customer? And what you’re often going to find, number one, in these conversations is that the clients don’t have answers to these questions. They haven’t really thought about it and they haven’t really calculated it and they don’t really know their current numbers all that well. And that’s good for you. Because then you can point out, well, these are things that we need to know and these are things that we’re going to find out and these are things that we’re going to track. So on top of hiring us to build this out for you, you’re also going to get all this extra value in like finally knowing your numbers and making data, database decisions with your marketing is all fantastic stuff that you should be doing. Right. And so we help them calculate the lifetime value of a customer because they don’t know that a lot of ways. But what I ask is, you know, just throw out a number. Like, do you want 10 leads a week? Do you want 50 leads a week? And so they’ll throw out a number. And then I’ll say, great, so what’s your budget for this? You know, how much do you have set aside to spend on ads? And they’ll say something, well, I don’t know. How much do ads cost? And I’ll say, okay, well, based on my experience in this industry, if you want 10 leads a week, this is how much money you’re gonna have to put into your ad spend. And then they’re gonna be like, they’re either gonna be shocked and be like, oh gosh, that’s a lot of money. To which we can say like, okay, well, maybe you only want five leads a week, right? Now we help to kind of dial them in. You’re just giving them ballparks, right? And then I would also go on like the high end of these things because you know if they think that it’s gonna cost them Let’s say it’s a roofing company now. I will give you a perfect example roofing client did know exactly how much they told me if you can get leads for $250 a lead Because they know how how many of those that they can close in this specific circumstance. If you can get me good leads for $250 per lead, then I want those all day long. I’ll take as many of them as you can get. They literally said that. So I’m like, okay, we can do that. I know that’s doable. It’s easily doable, right? So that made it easy, but not every client’s gonna be like that. Most clients are gonna be like, I don’t know. How much do they cost? What do people typically get? Da, da, da, da. And so then it can be like, okay, well, here’s our projection. We’re gonna start with, and we’re gonna start with a projection that’s very low, and I wanna know how much they’re comfortable spending. And we also have a conversation about, look, if you say you’re comfortable spending a thousand dollars a month, by the way, the roofing company was spending a hundred thousand dollars a month. Okay, this is what, when you know your numbers and you actually are a successful company, and you end up having a lot of money to spend on advertising. But again, not every client is like that. So I make it very clear to them, if you have $1,000 a month to spend, that first $1,000 may not get us very far. Advertising is a process of, we have a theory, we put our theory into practice. Now the theory is based on experience and good principles and things like that. But don’t expect an ad campaign to just go gangbusters right from the beginning. It’s a process of monitoring the data, tweaking, adjusting, making improvements to the campaign, really dialing it in and looking at everything as a funnel. I’m about to release a training in the Inner Circle that is all about funnel metrics. So what metrics should you be tracking with your ads? What metrics should you be tracking with the landing page itself? What metrics should you be tracking after the initial conversion? And if you have email marketing at play, what metrics do we care about there? If you have a sales team at play, what metrics do we care about there? Because the entire funnel matters. And I’m working with a client right now, this is highly frustrating. And I want to spell this out for you, why this is so important. This is very, very frustrating for me. So we put a ad campaign together to a landing page. Specific landing page matches the ad campaign perfectly. The copy in the ad campaign effectively matches the copy on the landing page. There’s a special offer. The offer is not to buy the product. The offer is to opt in for a discount code for the product. Now we did this for a very specific reason which I’ll outline in just a minute. When I tested the workflow for buying the product and engaging with the product, it’s a software, ok, I’ll just let you know, it’s a software. When I tested the workflow of buying and engaging with the software it was horrendous and I told them, I said this workflow for creating an account, like using my account, like actually getting things set up and getting the final thing that I’m after. I don’t wanna give away too many details, but getting the final thing that, this is atrocious. I’m just gonna be honest with you. This is atrocious. And they said, it’s what we have right now. Let’s rock and roll with it and let’s see what happens. And I said, hey, okay, all right. I told you, I did my job. I told you it’s atrocious, and I even offered to fix it. Like, I can’t code it for you, but I can do the UX. I can hop into Figma, I can redo this, and I can hand it to your developers, and they can, we don’t wanna go that far yet. Let’s just see what happens. Okay, alright. So, we make the ad campaign. We make the landing page. We put in the offer. Now, why didn’t I make it, hey, sign up for the software? Because I knew the sign up process was atrocious. So what I said is, I’m gonna get them to sign up for a discount code. Because if I can get them to click on the ad, and I can get them to respond to the landing page copy, enough to say, give me the code, I want to get the discount and use the software, I at least know the ads are working, the landing page is working, right? And then if they disappear into the ether because the signup process for the software sucks so bad, that just kind of confirms, right? So we did, that’s exactly what I did. I told them that’s why we were doing it, okay? So I turn on the ad campaign. The first question, do the ads get clicks? This is a Google ad campaign. Does the ad get clicks to people go to the landing page? Yes. Is the cost per click acceptable? Yes. Okay, so now we look at the landing page. Are they responding to the landing page? Do they opt in for the coupon code? Yes, it turns out they do. What percentage of them opt in for the coupon code? About 10%. About 10% of the visitors opt in for the coupon code. Some people say that’s good, some people say that’s bad, it doesn’t matter to me yet. What I know is that the ads are working to get people to the landing page at an acceptable price and the opt-ins are happening. So people are not like, oh, I don’t like this offer, I’m leaving. They could easily do that. But they’re saying, no, I want the coupon code. 10% of people say they want. Now, could we get it to 20%? Could we get it to 30%? Yeah, probably, right? We gotta start somewhere and we have to work towards it. But what I know is that 10% of people say, give me a coupon code. And so we get to the point, they’re like, how much data do we have to collect before we start making changes and making decisions? Well, I said, 100 conversions. I wanna get to 100 conversions before we touch anything. Because you need more data than you think you need. And you need more data than a lot of people are willing to collect to really make good decisions. It’s just the nature of data. So it’s a little nugget right there. Most people want to start making adjustments like right away, right? But you don’t have enough data to make realistic, logical decisions. So I say, we’re going to get to 100 conversions before we make any decisions. Okay, all right, we’re on board with that. So anyway, we pause. We pause at around 50 conversions, okay? And the reason we pause is we have this meeting, we have a conversation, and they’re like, nobody’s signing up for the software. And I’m like, well, that’s interesting, because 50 people asked for a coupon code. So of those 50 people, how many people are we talking about? Like, didn’t sign up for the software. How many people used the code?

3
1:53:56
One, one.

1
1:53:58
50 people said, I like what you’re offering me, please give me a discount code for it. One person actually followed through to create an account. And so to me, it’s like, they clicked on the ads, they got to the landing page, they saw the offer, they accepted the offer. Then when you sent them the offer, they opened the email by the way, the open rate is very high on the emails. So they open the email, they stare at the code. Now I also say, do we have any analytics on like what happened when they got into the the back end? Right? No, we don’t have those hooked up yet. Okay, all right, well, you know, that’s a problem, right? So we’re just, we’re tracking ghosts now. We can’t see them, what they do when they go there. But what we do know is they fall off. They drop off. After all these other steps, they disappear. And what I know about in my personal experience is, that doesn’t happen unless they get confused or lost somewhere, right? Within the signup process. So, I have a meeting with them and I’m like, we really need to revisit the conversation about redoing the signup workflow. No, we don’t wanna do that yet. What we wanna do is we want you to make changes to the ads and to the landing page.

4
1:55:16
Come again?

1
1:55:17
Like, oh, we think the ads and the landing page could be better. How much better?

3
1:55:22
Well, actually, let’s just fast forward.

1
1:55:24
If they were better, what would happen? Would we just get more people asking for coupon codes that don’t end up using the product? Is that that’s not an outcome that helps? Who is anybody around here helped by that? I just I don’t understand. I don’t understand the logic. So, you know, trying to explain this flow to people, it seems to me like it should be it should be like common sense in a way. But it’s like, hey, let’s fix this thing over here that’s working and ignore the area where everybody’s just falling through the cracks,

6
1:56:05
my hands are tied, right?

1
1:56:06
You just feel like your hands are tied. But this is the funnel that everybody has to understand because a lot of people will run a funnel and then they don’t know what to track and they don’t know what to change. And that’s why we’re doing the training in the inner circle. I think that’s what I was getting back around to. But can anybody like, you know, sympathize with that? Doesn’t that seem to be a little bit frustrating? Right?

4
1:56:30
Okay.

1
1:56:31
I don’t know, I think so. All right, so let’s go back to questions. The Figma step for design still seems like a time waster versus just framing it up for non-agency work. It depends on your workflow. In an agency environment, hands down, going to Figma is a better workflow. If you’re designing your own website for yourself, then I think it becomes personal preference at that point. But anything that involves a client, if you can do it in Figma, then you should do it in Figma. The thing is, is most people aren’t trained on Figma. And, you know, Frames for Figma is really, really, really gonna help this out. And we’re gonna start doing more trainings around Figma, but it truly is a more professional workflow and the better workflow for various reasons. And when we get there, I will cover the exact reasons. Not to say that you can’t do it in the builder. It’s just that it is objectively a better workflow to do it in Figma. Okay, question, is your birthday ACSS LTD deal in that day? Unlikely, unlikely, unlikely. Not ruling it out, but unlikely. Tips and tricks about building for local businesses. I need more specificity in the question. Okay, let’s see. I empathize with you, some people don’t take good advice. If you make updates to given frame and frames, will that update migrate through to our already created site? If you make updates to a given frame and for, Oh, got it. I know what you’re talking about. Uh, no, that’s the good thing about it. And it’s good and bad, right? Um, if we make an update to a frame, no, it’s not going to reach into your website and automatically make that update for you because that would probably piss off a lot of people. But the bad thing is if you import a frame and it’s got like a bug and we fix the bug, then you’ve got to delete the class that the bug was associated with and then re-import the frame to get that change, to get that update. So it’s a little bit manual to get the update in that regard. But it’s really good in the sense that no, it’s not going to reach into a website that you’ve already finished and start changing things that you don’t know about.

3
1:58:56
And I think that’s the preferred thing.

1
1:58:59
Question, landing page that is not linked anywhere in a page, people can only reach it via search ad, is it good design? It’s not good for like SEO, it’s not good for UX. I mean, it’s, well, for, if you only want ad people to get to it, for example, then I would no index it. And yes, don’t link it up anywhere and just use it for your ad campaigns. Yeah, that’s very, very typical. Yeah, don’t link to it anywhere, don’t index it, but make sure you no index it, that’s the thing. The big mistake I see people make, they make landing pages for ads that aren’t in their nav, not in their footer, not linked on any page. It’s just for ad campaigns, but they leave them indexed. And so you’re creating all of these orphans all over the place. And that’s just, that’s bad for SEO.

3
1:59:49
Let’s see, questions, questions, questions.

1
1:59:53
Okay, up, up, up, up, up. What’s the best practice for making an SVG icon accessible in Bricks? Well, it depends on what you mean by accessible. If it’s not an important icon, then people don’t need to know that it’s there. If it’s not clickable, then it doesn’t need to be focusable. There’s a lot of, I guess, maybe details associated with that question. There’s a lot of icons that you don’t want them to, like, a non-visual user does not need to know that that icon is there. And you should not make it known that that icon is there because it’s just an interruption in their usability of the website. Is it possible to show certain elements components based on post type using conditions? Yes, absolutely. I don’t know what you mean exactly by elements components, but like data based on that block, yes.

4
2:00:50
Pen pot is an alternative to Figma.

3
2:00:52
Have you given it a go? I have never even heard about it. When you plan to start the ACSS and frames tutorials,

1
2:00:58
they’re incredibly crucial for many who are trying to grasp how it all functions. Well, let me just give you guys a sneak peek. I’m in talks right now, okay? The very talented person who is heading up Frames for Figma and ACSS for Figma

3
2:01:23
also sent me a test video.

5
2:01:25
Let me get a sip of water.

1
2:01:26
Also sent me a test video. Kind of like, and it’s not a published video or anything, but it was kind of like a, if I made content, this is kind of what it would look like. It was very well done. I gotta say it was very well done. Now I encouraged him to go a little bit less on the details and the editing, because he’s gonna, look, I don’t want him tied up all day, all right, editing videos. That’s not what he needs to be doing. So that’s why I do a lot of stuff off the cuff, unscripted, very, very lightly edited, if edited at all. I don’t have time to sit around editing videos. Sorry. It is what it is like I my time is much more valuable elsewhere. So I say what I need to say I get in and out I export I upload that’s it. And I encourage him to do the same but I am in talks with him. Okay, we’re you guys know that I brought on cracker as a guest instructor for the inner circle. And there’s very talented person heading up frames for Figma is also a very talented UI designer. And so I don’t have any UI related content in the Inner Circle. I don’t have nothing very heavy on UX related content in the Inner Circle and nothing very heavy on, I’ve done a couple of Figma things, but nothing very heavy in the world of Figma in the Inner Circle. But if these talks work out, which I think they’re going to do, he will be the next guest instructor in the inner circle as well. And suddenly the inner circle will have really great content on UI, UX, and Figma, which I think is gonna be another great update and advantage for all inner circle members. So that’s a little sneak peek of that or a taste of what’s to come. I currently offer too much in my website, I got to go in two minutes. I’m going to take two more questions. I currently offer too much in my website management plan, new pages, forms, etc. and I want to cut down the service offered to currently paying clients. How should I inform them of the change? Okay, fantastic question Tyree. My first question for you would be how much are charging them for this stuff. If you’re charging them $69, $79 a month, $99 a month, somewhere in that regard, I would make an announcement that we are debuting new management plans. We are, you’re not going to be profitable doing all that kind of stuff for clients at those low rates. And I’ll just tell you guys, here’s how I handle management plans. I want website management to be the bare bones of what I do for a website. We’re talking hosting, WordPress updates, fixing any bugs, that’s included for free. If we created bugs in the site, we fix those for free. That’s security, right? All that kind of stuff is included. Licensing for plugins, all that stuff is included in management fee. Any work that you want done, like you want to add a page, you want to add a form, you want to build upon what’s already there, we’re handling that one of two ways. We just covered this in our mastermind call, which is good. One of two ways we handle that. If it’s small stuff, we go hourly. It’s easy, okay. We’re gonna do this work, we’re gonna charge you per hour, and then we’re gonna bill you. Easy, done. What is our agency hourly rate? $175 an hour currently. And so, you know, if it takes two hours, we’re billing 175 times two. That’s what it is. If it’s a big thing, like, wow, we’ve got this whole other like, almost like phase to the website that we want to tackle. We didn’t have a blog before. Now we want to bring in a blog. So we want to have articles, we want to have categories for the articles, we want to have a blog page, we want to have search, you got to be searchability. So there’s going to be a search results page now. What kind of search do we want? Do we want to go big with the search? You know, this is going to require a third party search plugin to be integrated. What’s the scope of this? I don’t know. But that’s kind of a, like a little, think of it like a mini project in itself. Then we go right back to the project based approach. Here’s the SOW for this. Here’s all of the deliverables that are included in this little phase. And here’s how much the phase is going to cost, sign, pay, then we do the work. So we tackle it one of those two ways. Little light stuff, hourly, big stuff, project-based, and then the website management fee is completely separate from all of that. Then, if we’re doing SEO or PPC, some sort of ongoing month-to-month thing, those are retainer-based and they’re completely separate. Big mistake I see is people tying SEO and all this other stuff into the website management fee retainer. It’s like all becomes a jumbled big thing. And it’s like, but then they can’t take away one thing without you having to redo like the details for everything else. Keep everything compartmentalized. Management fee over here. Then we have project work hourly or project work as an actual project. Then we have marketing retainers. So all everything is separate and it all adds up, but everything is compartmentalized. So it’s easy to take away one, add one, I don’t have to redo everything else. It’s nice and clean and simple. And it’s easy for everybody to understand.

4
2:07:04
So I would say to answer your question,

1
2:07:07
you gotta stop doing that because really you’re doing that work for free. If you’re at those low rates, you’re doing that work for free right now, you gotta stop doing that work for free. Just let your clients understand, you’re at 130 a month on top of the hosting fee. So what I would do is take those things away, I would drop their fee down, so take their management fee down to like 79 bucks a month. So it doesn’t include forms anymore, doesn’t include extra pages anymore, doesn’t include any of that stuff. It includes the actual management, which is like updates, hosting, licensing fees, yada, yada, yada, drop that to like 79 bucks a month, and then tell them if they want these other things, we’re gonna start charging hourly for these other things. Why? Because we’re losing buckets of money, and if we keep losing buckets of money, we won’t be here to manage your website anymore. So this benefits you as well, it’s just a change we have to make. Rip the bandaid off as fast as you can, and restructure your pricing. Sorry if this has been answered before, but what are your thoughts on quickly as a building option? You can go watch my quickly, my first look at quickly and kind of get my initial thoughts of quickly. I think it’s over engineered in certain ways. Like it’s, there’s a lot going on. It’s a little too complicated from, I don’t, the UX is not all that great. It does have clean code output. It does have all the necessary features. It is gonna be integrated with ACSS. I just wouldn’t personally use it cause I don’t enjoy the workflow.

4
2:08:32
What do you use for hosting clients?

3
2:08:33
Is it an inner circle?

1
2:08:34
I’m a member and I haven’t seen it. Yeah, I use GridPane. GridPane and highly recommend GridPane. And you can go to my tools page and see all the tools that I use there. All right, guys, I gotta get out. It is the longest two minutes in the universe. Michael’s that upcoming. You know me. You know me so well. Look, I just can’t. I need that addiction treatment center. You know, I’m addicted to doing this stuff, hanging out with you guys. And if I had a producer, they’d be pulling me away. Right now, you know in football when the coach, watch football games. I’m a big college football fan. Watch the coach on the sidelines. He’s got what’s called a get back man. You know what the get back man does? Grabs his belt and pulls him back because he’s so involved with the coach he doesn’t even realize he’s too far onto the field. You know, so I need a get back man, right? Hit that two hour mark. Where’s my get back man? Pull me back and then we’re all good to go. But it’s been fun. Love you guys. I love the, I mean, we got to talk about the Get Back Man, we got more Bev, we’re having fun. Aren’t we having fun? That’s why I have a hard time leaving. But I am out. I’ll see you guys next Wednesday. I love you. I love you. Peace.