WDD LIVE 020 – Web Design Critiques, Q&A, and Mini-Tutorials

0:00:00
Yo, yo, yo, what’s up everybody? Sorry, I’m a couple minutes late. Literally a phone call came in from a lender that was like I needed to take and of course it came in at 10.59 and like 30 seconds. But here we are. It was a very quick call. All right, man, we’ve got a lot of stuff. I need to shut down this stream. That is a duplicate stream. Okay, let’s not do that.

0:00:29
We got a lot of stuff to talk about. A lot of stuff’s been happening. Lot of really, really exciting developments. But first I wanna say hi to everybody. So let me get up my correct windows and such. We need to get comments and reactions up. This is good right here. All right, who we got today? We’ve got Stripe Goat, Sylvia’s here, Patrick’s here. Yes, it’s 100% live, always 100% live.

0:00:55
We’re gonna be taking a lot of questions today, extending our very popular Q&A sessions after we do our in-depth live critique. We’re gonna do one critique today, then questions. We’ve got some news and events to talk about prior to getting into our critique. John Hussey’s here. Ninja’s here, but it’s not Ninja. She said, she has a different pronunciation. I believe, I believe if I remember correctly, but I don’t remember.

0:01:24
Maybe it’s Nina, I don’t know, I don’t know. I’m not even gonna attempt it because I’m gonna slaughter it. Isaac’s here, Gordon’s here, Andy’s here, Calisthenics Ireland, good to see you. David, Sonia, excellent stuff. We got a lot of people, already 63 strong. YouTube’s gonna send out the notifications here shortly and we will get a bunch more I’m sure. While we wait, let’s go ahead and start talking about some of the exciting developments that have been happening over the past week or two.

0:02:01
Number one, ACSS 2.5 is out and as many of you suspected, we did officially acquire the plaster add-on. We made a bunch of new updates and adjustments and that is now integrated natively in automatic CSS. There is on the ACSS and frames YouTube channel a complete overview video of all that is new in ACSS 2.5 So if you want to hop over there after the stream watch that video You’ll get a good idea of all the new stuff that is in ACSS 2.5 Flexible grids all of the contextual menus from plaster and builder enhancements Logical properties just a lot of really good stuff completely refactored color system, dark mode is coming next or very soon, dark form styles for WS forms and Brics native forms and coming soon to fluent forms and like there’s just so much, so much packed in ACSS 2.5 and continuing to come out for ACSS.

0:03:12
As you know, we have a release pretty much every single month, which brings a lot of great new features. Of course bug fixes, any bugs that we find, we want to squash as quickly as possible. We’re not that kind of team that just lets bugs linger around, you know, nobody wants nobody wants bugs just lingering around. So we get out that rodent spray, that raid spray, spray down those bugs as quickly as we possibly can, clean everything up, and keep a nice tidy environment, right? It’s always good. Frames 1.3 is out. So this released at the exact same time.

0:03:47
Frames 1.3 features our new accessible accordion and toggle component. And of course that has automatic fax schema built into it as well, which is fantastic. Something that I don’t think any other toggle or accordion component has so that’s good we’re always trying to do things that are not present in other options number three announcement number three guys if you like the ACS s2.5 the frames 1.3 if you like these things you know make sure you smash the like button get some likes going on this stream. It really does help things out.

0:04:27
If you have questions, put them in all caps or the put question in all caps and ask your question. Makes it easy for me to find in the chat. And I will do a couple quick, if you have any questions about these updates before we actually dive into our main topic today, that would be good. Now I’ll go over those. All right, announcement number three. This is also very, very exciting.

0:04:50
We have our first official guest instructor for the Inner Circle. It is Adoro Essien, also known as Designed by Cracker. If you aren’t familiar with his channel, you definitely need to go over there and subscribe. But he is on board and going to be releasing two to four premium trainings inside the Inner Circle every single month. This is going to make the inner circle even bigger and better than it already was. Same thing I do with ACSS and frames. It’s just how much value can you cram into a thing. That’s just the strategy. So that’s what we’re doing with inner circle as well. And I believe this is all going to work out fantastic. And if it does, as I suspect then he will not be the only guest instructor coming to the Inner Circle. All right, so that’s announcement number three.

0:05:44
Oh, along with that, this is kind of announcement 3B. Let me go ahead and screen share for this one. Let me go ahead and share that and then we’ll bring this over. All right, so I have built a roadmap for the inner circle brand new nice shiny Roadmap we can take a look at you know, maybe how this was created as well I don’t know if that interests anybody but here is the official new roadmap for the inner circle and as you can see Here is designed by crack his little headshot here on his training. He actually already wrapped up this training I’m uploading it getting it all prepped. This will go live next week. So he’s showing how to create or recreate Apple’s footer with those collapsible items on mobile, right?

0:06:36
So if you’ve seen Apple’s footer, they have a gazillion links in their footer, but on mobile, it all collapses nice and cleanly to like an accordion style thing. That’s what his training is on. That’s coming out next week. And then I am working on how to create a query loop compatible interactive map with markers. And this is actually from frames we just released or we’re about to release, it’s in final checks right now.

0:07:03
I’m gonna bring up this frame on the page so you guys can see it as well. Let’s go ahead and share that. So this is the frame that I’ve been working on that we are about to release, which is a critical frame for any multi-location business or even a service area type business. And let’s just take a look at a few different things. And I want you guys to notice, like I’m not gonna point out every single detail, okay?

0:07:28
But you will see every single detail if you watch the training. I’m gonna show you from start to finish how to build this. Okay? It is 100% query loop compatible. These markers are dynamically generated from a query loop. This carousel right here is dynamically generated from a query loop. If we do a little DOM inspection here, I want you to notice one thing about out this is by the way the frames carousel. So this is our native frames component. It is a carousel slash slider. It can work either way. It can work as a slider can work as a carousel it can work vertically it can work Horizontally it is obviously query loop compatible, but look at this proper list structure Inside of a carousel that’s hard to find that’s hard to find So that’s a little you know just a little nugget there for you And it is fully accessible we can tab navigate through all of this stuff.

0:08:29
See how all of this is made to be perfectly accessible. You can make the markers toggleable as well. And now by the way, I also wanna mention here, notice this is a world map, okay? This world map by the way is an SVG. It can be made to be any color with a simple fill. No problem whatsoever. So you can make that map any color that you want you can make it a gradient if you want all is good there but don’t don’t get caught up on the fact that it’s a world map right and I’m like and you because you might think to yourself oh well this would really only work for a you know multinational corporation or something like who’s got all of these worldwide locations guys there’s gonna be any map you want.

0:09:13
In fact, in the training, I’m gonna show you how I made the map, okay? So I grabbed a map off of a, what was it? Let me go to it. It was Envato Elements. And the map actually had, it was so stupid. It had like all these like little animal characters in different places. I don’t know what it was for.

0:09:30
It was for some zoo nonsense or like where animals are from in the world. But I just saw in the background, I was like, ah, that’s a clean world map back there. I just got to get rid of the stupid animals. So I brought it into Illustrator, got rid of all the animals, and then exported this like this, and then I’m going to show you the whole process, okay? But you can do the exact same thing. Let’s say it’s a US-based business. Well I can just get a map of the US and make that the entire thing, and then I can do this with cities. Or I can get a map of my state, Georgia, and put a Georgia map right here and do cities only in Georgia using all of this, these exact same frame, exact same everything.

0:10:09
These can be service areas over here instead of locations. They can be clickable cards that take you to location pages or service area pages. This is the kind of flexibility, right? So you can use this for many, many, many, many, many different purposes. And like I said, in the Inner Circle training that’s coming out next week I will show you how to build this entire thing from scratch or if you are a frames user You can obviously just insert it in one click and then you’re off to the races Okay Let’s see here. What everybody is is saying Oh, yeah, see Gordon says I have a proposal out right now or a map with pins as a requirement. Exactly. Amazing thing. Okay. Any questions on this so far? The content, is the content schedule available in frames would be a cool thing to have for sure. I think you mean this right here. No, it’s not, but it could be. It could be. I’m trying to think how many people would need something like this. You know, like I guess it can be used for different kinds of scheduling.

0:11:17
Hmm. I don’t know if enough people want that we can we can make it available as a frame. All right. What else we got? We got two more announcements to get through and then we’ll jump into our main topic today. Question, what is class chaining? Why is it better without? Basically, what would happen is if let’s say you added a class to a section in Bricks, and it was like, you know, my section. And what Bricks would attach the styling to is the class my section dot BRXE section. And so your class was always chained with another Bricks default class, which increase, if you know anything about CSS specificity, and it just, it can create problems.

0:12:03
Then there’s no reason to do it. It has no value whatsoever. So they added a toggle to get rid of class chaining, which is what you want to do. Everybody should absolutely toggle that on. Get rid of class chaining 100%. But now ACSS 2.5 will work when you disable class chaining. It would not before because we had to create the integration with Brics based on Brics’ class chaining issue.

0:12:27
Okay, that’s just, that’s as much as I can explain it at this point, but you would have to know how to do or what CSS specificity means in order to really understand why it’s a problem, which by the way, that is the next lesson of PB 101. The next lesson of PB 101 comes out tomorrow. It covers media queries, breakpoints, CSS specificity and the cascade. So those four topics are all embedded in tomorrow’s lesson. And then here’s the next announcement, that’s a good segue into the next announcement, I guess.

0:13:02
Oh, two more things. Okay, so I won’t be live next Wednesday. Sad, I know, very sad. I’ll be traveling and I’ll be doing a closing. So I just won’t be it is gonna be insane. Next week’s gonna be insane. I’m banking two PB 101 lessons for next week. So Tuesday and Thursday you should see PB 101 lessons instead of a live stream. And then I’m hoping to have my equipment down there. Not all the it’s it’s gonna be a it’s gonna be like a minimal setup. We’re gonna go minimalist when I’m down in Florida. So minimalist set up for when I’m down in Florida, but I should still be able to live stream and all that.

0:13:43
So that’ll be the following week. We’ll be back in action. And yeah, I think that’s it for that update. Last update, last update. And this is such a fantastic update as well. I’ve been waiting on this. I requested this three months ago and it just arrived. Bev and Fred both finally submitted their new headshots over to me. As usual with clients like Bev and Fred, I made the request three months ago. They just now submitted their brand new headshots. But guys we have headshots now for Bev and Fred. If you guys have wondered what Bev and Fred look like, we now have headshots for them. So let me go ahead and find these on my, I got to go into their client folder here.

0:14:26
Let me go in here and all right, so I’ll bring, who do you guys want to see first? You want to see Bev first? Or do you want to see Fred first? Who do you want to see? I’ll answer questions in the meantime. Question, is this, can this map be adapted to use Google API to zoom into location? I don’t know, I’m sure it can, but I’m not sure. I don’t know a lot about Google Maps API, but you would need to ask a Google Maps API expert on that.

0:14:59
Question, the map, would it be compatible with grid builder and filtering? 100%. 100% you can filter the map, yes. Okay, let’s see. Yep. Okay, so people wanting the frame, that’s good. All right. You wanna see Bev? Okay, they wanna see, everybody wants to see Bev. Ladies first, okay.

0:15:24
All right, let’s get Bev up here. Bev, your headshot is here. All right, there’s Bev, guys. Of course, I just want you guys to know, Bev would not be caught dead at photo day without her floral blouse. But this is Bev guys, meet Bev. She’s got a lot of opinions. She works in the accounting department. None of her opinions are very good, but she has lots of them. And you know, she will not hesitate to give you feedback on the website.

0:15:56
Absolutely will not hesitate. So that’s Bev right there and let’s go ahead and bring Fred in. I know a lot of people have wondered what Fred looks like. Fred works as you know he is a middle management in operations and you know Fred, let me just show you, let’s get Fred’s head shot in here. Okay Fred is the kind of guy, Fred is the kind of guy that will show up to photo day in an unbuttoned flannel shirt. That kind of person, but still believes 100% that he is qualified to give feedback on the homepage. Always, always, always wants to focus on the homepage. So yeah, this is Ben and Fred. And I may actually put them on a website somewhere.

0:16:53
I don’t know yet. Are they, yeah, I don’t know, we’ll see. But it’s fantastic. And this, by the way, guys, is like how I view an actual good use of AI, right? Like this is, you know, AI should not be used for like real work, but for this, this is great. This is great, right? They look fantastic. Fred, Bev, thank you for finally submitting your headshots.

0:17:20
It took you three months, but you got them here. And I will make sure to get them on the website ASAP. And then, of course, I know you’re going to let me know something’s got to change after we put these on the website, I’m sure. There’s going to be some adjustments that have to be made. All right. What are the best resources to learn about accessibility and how to implement it other than you of course, clients pay more for accessibility. Yeah, I mean you can, there’s a lot of ways to monetize accessibility for sure.

0:17:53
You don’t want to know what AI prompts I used for Bev and Fred. It’s rather insulting. I was very insulting in my AI prompts and the AI processed it immaculately. It only took me two to three attempts to get a perfect Bev. It took four to five attempts to get a good Fred. Fred was a little bit tougher, but yeah. Okay, let’s go ahead and dive into our actual main topic today. All right, I’ve got to go over here.

0:18:22
Just hang on one second. I got to get this website pulled up all right let me get into I’ve got like 18 Google Drive accounts let me find the right one all right I will say this we need more submissions so if you want a website critiqued we need you to submit it there is a link down below in the description there have been many many many lots and lots and lots of websites submitted for critique, but I will say this, after today if your website hasn’t been chosen, I’m clearing the list out. There is like a minimum, we’ve got to, some of y’all, let me say, how can I sprinkle sugar on this? Some of y’all got to step your game up a little bit more.

0:19:09
If the website doesn’t give us a lot to work with, then it’s not worth doing a deep dive critique on. So it’s got to be up to at least a certain standard. So this is the last one of this submission group, I guess we can call it. I’m going to clear it out after this and I need more new submissions for us to choose from. Okay, let’s pull this up. So this is full river battery. We’re going to start with our no scroll test which I’m already being blinded by this slider that’s going by at warp speed and let’s just see if we can I mean obviously it’s a battery company and it looks to me like they sell batteries for vehicles. Yeah there’s another vehicle okay I can’t really read the copy because the copy won’t stop moving.

0:20:04
Let me see if I hover. Will it stop on hover? Okay, it stops on hover. So I don’t know what slide is first anymore though, and there’s no slide navigation that I can see. Oh, it’s over here. Oh, it is. Look at these tiny ass little arrows, right? Right over here and over here. I guarantee you most users would not see that.

0:20:25
They would completely miss that. But again, I don’t know what slide comes first. There’s no dot indicators. So let’s just stick with this one. These, oh, nope, well, we are sliding. Not on, Hover’s not stopping it anymore. There’s no slowing the slider down. All right, manufacturers of the highest quality batteries on the market, maybe it’s frozen now. Maybe it’s stopped now, okay.

0:20:47
All right, so I guess this is the main slide. I would guess that this is the main slide. So let’s talk about this slide first. Then we’re going to talk about the header up here. I want to see what this quick links thing is going on here. But I will say this, these are your products. Anytime you have your products, now on this side screen, let’s inspect here and see how this degrades. It’s all right. It’s all right.

0:21:14
Here you can’t see the readability of this text goes down the hill because now we’ve got white text on gray battery tops. So you are having some readability. We definitely have a height issue here. You do not need this much white space in a hero on mobile. So we need to tone that down. I’m also, okay, this happened with a client of mine recently because I was trying to figure out you know what what is this alignment here see how the? Content is aligned to the center on tablets and down it really should be aligned to the center everywhere like I it does not look Good to have content aligned to the top of a giant container like this But the reason it’s aligned to the top is so that it doesn’t overlay the product photo Which gets me back to my original comment of if you need to show a product, like the thing that’s in the image is very important, it can’t be a background image.

0:22:09
Don’t make it a background image. It needs to be a real image that flows around the other content on the screen, not getting covered up by it. So as you see here, it gets covered up by the content in the section and we get readability issues and all this stuff going on. So that needs to be a real, make all this other stuff, right? Let me go back. All of this back here, this flag, this texture, all you know those banners back there, that can all be background images. These batteries need to be a real image and they need to be positioned inside of this container properly and not have your text ever over on top of it. Okay good good good. So let’s get to the next slide. We see that this is the main slide it’s telling people oh my god stop it. This is why I hate sliders.

0:23:00
Absolutely hate sliders. Manufactures the highest quality batteries on the market. Very literal copy. It’s not as bad as having no copy or like irrelevant copy but it’s not it’s nothing exciting it’s nothing exciting I also want to point out let me pull up on my other monitor here I want to show you guys something because we talk about copy a lot on this stream and in WDD live obviously and copy as it seems to be an issue on almost every site that we review if you see it come up over and over and over and over again so I want to point out a training that’s very important for you that just came out a week or two ago. I’m gonna pull it up here. Okay, so inside the inner circle you’re gonna go to under agency training you’re gonna go into the discovery section and you’re gonna find the offer messaging master class. It’s an almost 90 minute training that goes over a offer messaging copy messaging workbook and it shows you exactly how to plan and develop copy for your clients based on a lot of really really important factors and I can guarantee that if you do that training and you start using the workbook with your clients Which by the way, you’re going to charge them to do so if you want to make an extra 1200 to 2000 to 3000 to 4000 to 5000 depends on the size of the client.

0:24:32
Depends on all that they’re paying for and so on and so forth. But if you want to make that just extra, just on top of what you already are charging them to do the website, then you need to do that master class. You need to do the other discovery trainings. You’ll make a lot more money on your projects and you’ll deliver better results because you won’t have boring ass copy like this. Okay, sorry. I gotta remember sometimes to just sprinkle a little sugar on these. No, I mean you submit your thing, you know, like I’m just gonna be real with you, I’m just gonna give you the honest feedback and honest doesn’t always have sugar all over it, so that’s just how we do things here.

0:25:09
But you will dramatically improve your copy by doing that master class and using that workbook with every single client. Just make sure you’re getting paid for it. Don’t take that workbook and go do all that extra work for free. Okay, you got it you got to charge for it. It’s very valuable. It’s going to make a huge difference to the success of your clients website and landing pages and offers and opt-ins and all of that. So it’s a it’s really good to do. But here’s the other reason I hate sliders. None of these other things are like, I don’t know, EGL series, DC series, full throttle series, full rev… I don’t, I’m not ready for all this. You’re overwhelming me. There’s too much going on here. And it’s just sliders are just not a fantastic way to display content. All right, what’s going on with quick links? Click to expand. Let’s try it. Okay, we get this thing FT series. So these go to your main. Oh God, see it. See, see what?

0:26:07
What is this? What is this? Watch this. So here I am. I’m just I’m just a you know, honest hard-working visitor to a website Trying to get myself some batteries You know, hold on. So here I am just hard-working visitor to a website going which one do I want to choose between. Oh it’s gone. Oh my god you better choose quick. You better choose quick. It’s like a game. It’s like we’re at a carnival. Alright I got it I got to click it before it disappears. Let’s get oh I clicked it and it went somewhere else. What oh god I don’t know what’s happening. These are the types of user experience nightmares that we can create with all of these lofty ideas that we have.

0:26:59
You know, instead of just saying, hey, why don’t we take the most important links and just stick them right here in this gigantic ass header that has nothing in it, right? What is all of, hold on, let me annotate this, just to give a full effect. Let me annotate that. What is the purpose of all of that blank space and then you took what should be there and you put it in this menu, I need to know. Somebody make it make sense. And not only is it in this menu, it’s in this menu that is now effectively a carnival game of how fast can you make a decision and click before we take it away from you.

0:27:38
This, something so simple, right? So simple of just let’s drop some links here, has turned into an absolute circus. Why? Somebody make it make sense, why? Then, if these quick links don’t appeal to me, I’ve got to deal with this situation right here. And as you guys can see on a very large, I’m still sharing my screen, right? Okay, we’re all good fantastic all right so look at this on a wide screen batteries batteries guys is 300 yards away do you know how much exercise my mouse has to do to get all the way over here to start clicking on stuff this is why I hate mega menus so two of the ingredients that I hate the most mega menus and sliders are right here.

0:28:31
On full display and I think you can see why I dislike. Now on a normal size screen I guess that’s fine, you know, but man this is a lot of real estate to travel. Okay and then it’s just, you know, here’s the other problem. In order to use this menu I got to know what the hell is going on here. I got to know what an EGL series AGM is. Do I know? Not a fucking clue. Zero clue. DC series AGM, full throttle series AGM, alright. Fancy names, I ain’t got no clue what I’m supposed to click on. Battery packs, power vault, no clue. Now, if somebody already knows what these things are and maybe they’re even searching for them or they’re looking for them specifically, this will serve those people.

0:29:24
The problem is it don’t serve anybody else. And you’ve got to remember that there are people coming to your website that know your products and services, especially if you’re a big brand, but there are people coming to your website who have no idea what you offer, why you’re better than anybody else, yada, yada, yada, and we’ve gotta find ways to make sure that these people who are new to you can still navigate your website, can still find what they need to find, can still understand what is going on.

0:29:55
And this is a huge problem in any website industry with proprietary jargon and proprietary names for things. You have to be very, very, very, very careful on how you design and lay out sites like this because it’s just so easy for people to get completely lost and feel like they have no idea what’s going on. So I’m gonna start scrolling and see if we can make any more sense of the products and services here. Full River Battery. Well, we see right here, you know, we’re just reiterating the brand name.

0:30:33
Like I already know I’m at Full River Battery. I had this slide right here that hopefully I saw before it left my screen. This says Full River Battery. So check this out. Full River Battery, Full River Battery, Full River Battery. battery, full river battery, full river battery. Don’t we see the same patterns over and over and over again of feedback? Don’t repeat yourself is a standard for coding. It’s also a standard for copywriting.

0:31:02
You’re wasting opportunities if you repeat yourself over and over and over again with mostly irrelevant content. I need to, I only need to know I’m at full river battery once. I got it. I’m at full river battery okay tell me something new tell me something I care about and we’re wasting opportunities not telling me things that I care about. Manufacturers of the highest quality batteries on the market. Now to be clear it’s okay to repeat yourself and copy you want to drive a point home but it needs to be an important point and what I would recommend is say it a different way when you repeat yourself.

0:31:37
So say it one way here, say it basically the same thing again over here, but just use different words. Say it in a different way because you’re trying to connect with different types of people. But just saying full river battery, full river battery, full river battery just as many times as we can, that’s what I’m talking about has no value to the user. Okay. Unlike many battery producers, we control the entire manufacturing process. The grid casting, plate pasting, and final assembly are all done at our award-winning manufacturing facility. Did you really win an award?

0:32:11
Okay, I don’t know. Oh, what’s down here? I don’t know. What are these badges back there? I don’t know. I see just award-winning all the time. It’s like what, you know, it’s like on the, you know, you’ll get like a buffalo sauce recipe. I’m a big wings per, I like wings, you know, I like buffalo wings to always see this award-winning buffalo sauce and you look into it it’s like you know they want a neighborhood award against like their three neighbors and it wasn’t really anything like you know fantastic it wasn’t any sort of crazy you know national buffalo sauce competition or anything like that so it’s just yeah I always get I’m a marketer I always just get a little wary of claims like that.

0:32:50
The importance of this cannot be overstated as it ensures total quality control. In fact, we’ve earned a number of quality assurance certifications, including ISO 9001, the, the, the, the, the, the, the, the, oh my God, you’re making my head spin, stop it. For quality production systems, our manufacturing facility produces a wide range of two, six, eight and 12 volt batteries in all BCI DIN.

0:33:11
Man, this is so much lingo. Lingo, lingo. Every full river battery series is designed to be charged and recharged hundreds of times with the sealed maintenance free aspect of all our. See I don’t, you know how you can say all of this without saying all of this? Show me like all you have to show me is a head to head comparison of your battery and three other leading industry batteries.

0:33:37
Just put it right here, just put it right here. If you wanna say all this shit front and center, I don’t want all the lingo. Be visual, show me your battery and it recharged 5,000 times where these other ones only recharge 3,000 times or something like that. Show me your battery lasted for two and a half years, this other battery lasted one and a half years. Show me plain language, your battery versus another battery. Some people care about ISO 9001, but most people don’t.

0:34:13
Most people don’t care about all this stuff right here. And even if you want to say this stuff, tuck it away. Drop some logos down here of like industry certifications or whatever that people can kind of glance over and stuff like that. But your actual copy has to really connect with people and has to be you know it has to have a bunch of different ingredients and I will tell you right now a bunch of industry lingo jargon stuff is not usually the key ingredient. Okay and and demonstration is always better than just telling people things. Okay let’s move on. Our product lineup batteries chargers battery packs, okay? So this is the first thing that’s been fairly clear and organized Because I can now see I if I’m looking for batteries here are my options if I’m looking for chargers Here are my options if I’m looking for battery packs here are my options. This is easy to navigate But easy to navigate for me does not mean easy to navigate for everybody.

0:35:15
I’m now using my keyboard and I cannot fucking navigate the tabs. Okay, so we are lacking some accessibility here. All right, so that’s not accessible in the slightest. So that needs to be improved for sure. But here’s another good thing, right? Now I’m under batteries, I can see DC series AGM and I can actually see a description of sorts. So now it’s giving me a little bit more information about what’s going on here. Premium quality AGM batteries for deep cycle applications. I don’t know what any of that means but at least it’s something. It’s something more to chew on than just DC series AGM and I can at least compare now because this one says for extreme deep cycle applications. So this is for deep cycle applications. This is for extreme deep cycle applications. I don’t know what takes you from normal deep cycle application to an extreme. I don’t know if there’s any sort of measurement stick for that.

0:36:12
But you know at least we’re getting some sort of comparison going on here. But I’m hinting you see what I’m hinting at I’m hinting at you got to explain this stuff better. Yeah, I’m not a battery expert, so you know tell me, tell me what’s going on here. Full throttle series AGM, high performance AGM batteries for starting applications. Okay so this is just a different, for a different application. I don’t know what kind of application, I don’t know what a starting application is, but you know some people do I guess. General purpose batteries, I’m guessing full force AGM is just the shitty version of this one over here. Because this is for premium quality and this is a general purpose. And then we have high-quality gel batteries for deep cycle applications. I don’t know why you would need gel or not need gel, but we can see that there are gels that exist. Now some people will say and clients will tell you this all the time.

0:37:08
Clients will say, but Kevin most of the people that come to our website know what these things are. That’s what they’ll say. Oh, most of our clients know what these things are. All right, but do you want to sell to the ones that don’t or do you not want to sell to the ones that don’t? Just because most of your clients know what these things are doesn’t mean you can’t appease them and get more sales from the people who don’t know what these things are.

0:37:31
Everybody can be happy when you write good copy. But if you write industry jargon copy, only the people who are on the inside can buy from you. Nobody else is gonna buy from you. So you’re cutting out anybody that doesn’t know what’s going on here. And there’s no reason to, because good copy can speak to both people at the exact same time. Okay, so let’s go down.

0:37:52
Got a little testimonial action here. Okay. What is, what’s all this right here? Oh, this is the, you’ve put the social icons. My gosh. Let’s click on. There’s Tick Tock. So Instagram action that’s going to take us to Lucas Bogosian fishing. Wow, you are there you guys are like a traffic charity now. Right? This is very generous of you. You spend all this money on SEO and Google ads and copywriting and product development and general brand strategy and marketing and you’re just giving away traffic. You’re just like hey, you know, you want to go to Lucas Boghossian Fishing, here you go.

0:38:46
Go right away. I would not do that personally. I would not recommend doing that necessarily, you know Yeah, I just I don’t see I don’t see the value to your to your prospects in sending them away to Somebody else’s brand and website that by the way, you know, they don’t sell batteries They don’t you know, I’m looking for batteries not fishing boats So I don’t know what I’m doing on this person’s website over here. I just put their review, you know there’s no need to be so, so generous with your traffic distribution. Okay, so we slide down here and we see finally applications. Now I can start putting products to real world applications in my head and try to understand what is going on here. So we’ve got mining, we’ve got water sports, we’ve got off road oil and get man, these are this is a very wide range of industries here.

0:39:40
Commercial trucking, RV, UTV, okay. Let’s just choose one, RV applications. All right, there’s a nice photo of an RV. Dealer locator, find your battery. We’ll check on these in just a second here. Home away from home. Choosing the right batteries are essential for any off-grid travel. We’re not gonna read all these, don’t worry. Choosing the right batteries are essential for any off-grid travel setup, be it an RV, travel trailer, fifth-wheeler, or camper, whether it’s a short weekend getaway or full-time lifestyle, Full River batteries provide the power and reliability for you to explore the world while still enjoying the comforts of home. All right, so this is much, it’s much better copy than we’ve seen elsewhere on the website. It kind of speaks to the owner of an RV, right? We’ve got some photos here to give us this nice lifestyle feel, but what I will say here is there’s no reason, we’re not looking at products now, like I’m not trying to buy this RV. Can we all agree? I’m not trying to buy this RV or this one for that matter. These These photos are here to provide a vibe, right?

0:40:54
We wanna create a vibe. There’s no reason to allow people to click in here and make them bigger and scroll through. This is just too fancy. So this is over, just leave the photos in this little grid right here for them to get the vibe and move on. You want them to scroll down, right? Now, let’s talk here. After they get the vibe, what should they see next?

0:41:16
What should they see next? To me, it’d be like, show me the fucking batteries, my guy. I’m that’s what I’m looking for, right? Where are the batteries? But I got to scroll past these photos, which are fine. It gives a little vibe. Okay, I understand it. But now I’m on to a testimonial. And then finally I get to the products. But I just, I want to see these quicker.

0:41:35
I want to see these sooner. That’s what I went here for. It’s what I asked for, right? And really it’s not even necessarily the order of the content. It’s the amount of space all the content takes up. So it’s like there’s this giant header, which by the way, uses, it’s got the title way up here again. And this headline is a waste of space, right?

0:41:58
This should say, why Full River Battery again? You got your logo right here So let me show you how to do this. This says let’s change this inspect. This is how it should be RV applications and then this says Let’s open that up. Okay. Oh my god. There’s a span and BRS and golly What’s what is going on up in here? All right. So instead of this we’re gonna say, you know, really catchy main headline goes here that speaks to the prospect. Okay, there you go.

0:42:38
So you put RV applications, which I don’t even think RV applications even makes any sense. How about RV batteries? See these little accent headlines give you, they give you an opportunity to be very literal. Okay so be very literal with this, let everybody know here’s where you are, you’re looking at RV batteries, but then give them a really catchy, I put catching, really catchy main headlines underneath that. And then I would, I need all this content centered. This does not need to be aligned to the top. It’s very odd that it’s way up here and then there’s all this blank space down here.

0:43:18
We just need to position that right in the center. And then I, you know, honestly, I don’t even know if I want to give them the vibe of the RV life, here’s what I would have done, honestly. And I know this is a template. And so what we would have to think about is would this be applicable to all the other types? I really think it would, honestly. Here’s what I think would be the best way to do this. Let me just do this.

0:43:42
Let’s, here you go, right here. Delete, delete. Where’s that section? Oh God, stop with the pop-ups. Delete, there we go. Okay, then, and obviously this spacing is now off, so we need to make this look more like a hero. Make this your H1 right here, make this your accident heading, here’s your lead, and then here’s your visual.

0:44:05
And don’t make these clickable, okay? And then get rid of this, or move that down at least. Just gonna demonstrate here. How to get people to the shit they’re looking for. Really quick. Give them their headlines, give them your lead paragraph, give them a vibe, get them right to the products. That’s what I would do. Then you could put, if they make it all the way down here, you put your testimonials down here. But it’s just, we don’t need all that, all that, man, there was so much going on.

0:44:33
So right here, I get to my RV batteries, get my nice headline, get my lead, get my vibe, get my products. And I believe you can do that with every single one of those categories that we just looked at. Same exact format, same exact template, just swap out the photos, swap out the copy, and this would all be more or less good to go now Honestly, what I would probably do with this is I would break it out, right? So and unfortunately, this is oxygen which makes this very very difficult I think I can probably do it right here. So section in a wrap. Let’s go with Yeah, I don’t I don’t this is going to be difficult in oxygen. In Brics this would be very, very simple because Brics gives you access to the inner container. You actually have to break this out of the oxygen inner container. Actually I just saw you’re using automatic CSS so this would actually, there is a trick for this in oxygen. Let’s do on this grid right here class, let’s do breakouts and you can probably do something like Excel.

0:45:36
Bam! There you go. But yeah you can make that wider. What I would actually also do is put an aspect ratio restriction on that entire container, so that this entire container is more like a 16 by 9. I don’t know if this is going to be possible like on the fly. You might have to do a little finagling with this. Aspect… I don’t even know the names of my own classes here. 16 by 9. I don’t think it’s aspect ratio. I think it’s just aspect 16 by 9 And actually it’s opposite. It would be 9 by 16. We want it to go the other way. I Think no. No, that would definitely be wrong. Okay, no, it would be 16 by 9 But 16 by 9 is seems to be already more or less what it is. I don’t think we have a preset for let’s do this Let’s just get rid of that. I don’t think we have a utility class that would work for this because it’s very custom Let’s just drop an aspect ratio in and you guys you can put in like any aspect ratios that you want Let’s do like 24 by 9 All right, so that’s going to create some spacing issues But see how it controls the height better and then all you got all you got to do is fill in this gap It depends on how this little you know grid was created. It seems like it’s maybe a flex box thing going on here Let’s see what’s going on oxy gallery grid nope it is using CSS grid but it’s it’s this min max probably going on here I don’t know there’s this has to be diagnosed further but you get the vibe that I’m going for which is make this wider doesn’t even have to be that wide honestly just wider than the the main content width will give it a little bit more of a you know flowy feel I guess I don’t really know how to describe it.

0:47:17
Then fix those spacing issues, and you’ve got more or less a brand new hero that’s more alive than that other hero with just a boring background image and a dark overlay like everybody else does. They’re heroes. I think this would be a better way to go. And especially because it gets people to the content much faster. You’ve also got some issues here where like, this has a white background on it.

0:47:39
I don’t know if you guys can see this because of the stream resolution but there’s like a background pattern but then this is like blocky because there’s for no reason a white oh that’s that’s actually a gradient background it goes from like a gray to white but then creates a hard edge right here. I don’t know if you guys can see this hard edge. I’m going to try to uh circle it. There’s a hard edge right there and it goes all the way across here and it’s mainly because there’s this background pattern back here which doesn’t extend up here properly. So you’ve got some you know UI issues going on here as well. Oh it’s on your products too. Check this out. Yeah I don’t know what the resolution if you guys can see this but there is a hard edge all around this card. These cards have white backgrounds and I guess I probably know why.

0:48:26
They gave you photos that have a white background in it. These are not PNGs, I would guess. Because I don’t think you put that white background there by yourself. Here’s how we can find out. Let’s just grab that container. Background, color, red, yep, there it is. So, yeah, so you can’t do some, you know when they give you product photos that have a static white background in it that you can’t really get rid of very easily, you can’t try to do all this background pattern stuff.

0:49:00
That’s out the window now. Because you’re creating all these ugly white boxes around your products. Not a good representation. This needs to be a white background. So yeah, it’s just, you know, the kind of images you use create limitations like this. Okay. Didn’t find the battery you were looking for? Try one of these options.

0:49:20
I can browse batteries, contact support, or battery finder. Okay. Let’s go with battery finder. All right. Whoa, you can choose the year of the battery? Oh, no, no, no. Make. Oh, oh my gosh Wow all right a lot of choices Thomas model golly yeah okay 22 let’s do a newer thing I can’t do model or engine that’s that’s the Thomas batteries okay yeah I guess I mean you got to do this kind of thing if you got a gazillion freaking products yeah I was just thinking about how to make that a little better but that would take an additional brainstorming that we’re not going to do right now. What does the browse batteries do? This just takes me back to the normal display here. Oh this answers the question about gel maybe. Is gel for marine stuff? Do you need gel batteries if you’re doing like water sports I don’t know okay so we’ve talked about a lot of ways to improve this kind of thing let’s go ahead and just take a pit stop into the chat and see what people got going on one thing about this website is it’s very underneath it’s very complicated you know so I will say it’s not easy to you know pull off a website like this There’s a lot of products clearly across lots of different categories And so you know it’s not like it’s not a situation where oh we got to scrap this whole site redo everything It’s not that kind of situation. It’s the kind of situation where we can just clean some stuff up restructure some things You know I’m not a big fan of this little divider action going on here. It takes up a lot of space and it’s just It’ll it looks a little messy because of the way that the image is showing through in these various parts that are just creating like little artifacts more or less It could just the heroes can be cleaned up a little bit and then same thing here This is just a lot of white space like a lot of white space. And I would hope that these have a class on them but they don’t. We’re using height. Hmm. Oh, height. Wait, hold on. Height full, but that’s not, that doesn’t look full height to me. I guess it is. And if I bring it in here. Yeah, I don’t know.

0:52:01
I would just use padding in these. I don’t, I try to stay away from height, like as much as possible. Especially full height. You’re just asking to take up a lot of real estate. And there’s just no, look at all of this like, value here that is lost. This is a lot of real estate to just give the person nothing to do with, right? And then these dividers take up even more real estate. Mobility yeah see then there’s you know there’s image choices it like I would just ask right off the bat like is this the best electric scooter thing we could find you know is this the best in let me let me look at the back of the school oh I know it was Bev and Fred, guys I’ll tell you exactly why this shit happened.

0:52:52
This is not an appealing photo, right? It doesn’t, here’s what a marketer would put here. A marketer would put a happy older gentleman in a scooter living his best fucking life, powered by a full river battery. That’s what like Apple would show you, that’s what all these great marketing companies would show you. But Bev and Fred, I know this. It’s the person who made this in the chat.

0:53:20
Maybe you chose a different photo for this. But Bev came along. Where’s Bev at? Let’s get Bev up on the screen here. Bev, where are you? Bev, I need to talk to you. Come here, Bev. All right, so Bev is here. There’s Bev. And Bev was like, you know what, we need to show the product in our photo.

0:53:45
And what the product shows is the back of a thing, we can’t see the person in it, we can’t see them living their best life, we got dirty ass wheels, but why? Why do they want this photo? They wanted this photo precisely because of this. You gotta show the battery. Bev’s like, you gotta show the battery. No, Bev, we fucking don’t. We don’t have to show the battery, Bev.

0:54:08
Everybody knows these things are powered by batteries. We need to show somebody who’s gonna use this product living their best life. That’s what we need to show, okay? They’re gonna get that there is a battery involved in this. Okay? It doesn’t have to be this literal with your visuals. Can we all agree? I think we most of us should be able to agree, right? The scooter image shows the battery.

0:54:33
Yeah, that’s what he’s saying, see, see, I know, I know. You gotta fight for these things though. Nobody’s gonna be like, look at that fucking battery. I gotta get me one of those. But you know what people will say? I want to live my best life like that good-looking older gentleman in the scooter. With a smile on his face. Look this man’s on the side of the road. I don’t know this isn’t even a good scene that he’s in. Show me a man down in sunny Florida you know living his best life and the reason, the reason he’s able to scooter The beach is because of Full River Battery, right? You can’t sacrifice the story to show the product.

0:55:13
The story is what sells. Nothing in this photo sells me on a battery. Even though I can see it, what part of this is selling me anything? It’s not impressive. There’s nothing impressive about that. It’s a fucking black box. They all look like this. Don’t they all look like this? What is this selling me? Nothing! Bev!

0:55:48
Zip it! Zip it, Bev! We’re going with the other photo. We’re going with a happy man in a scooter. Happy in his ass across the beach, you know, in sunshine, and he’s loving it he’s absolutely loving it that’s what’s gonna that’s you got to sell with stories your boring ass black box product is not going to sell people on these batteries I will tell you that right now Apple knows that everybody knows this the story is more important than the product okay all right yeah and there’s no name on the battery as Marco said we can’t even tell it’s a full river battery. Can’t even tell. Okay. That’s my rant.

0:56:30
My product photo rant. All right. I think we’re pretty much done here. Most of this is for entertainment value, okay? But there’s… I’m knocking shit off my desk again. But there’s a lot of value. We can be entertaining and valuable at the exact same time right so you get the idea I want you to get the idea this is why Apple spends a gazillion dollars showing us a happy ass college student you know walk into class and then they pop out their Macbook and like 90% of the video is the best-looking college student you’ve ever seen in your life by the way right hand-picked hand-picked best-looking college student you’ve ever seen in your life and you know 90% of it is them living their college student life and 10% of it is the MacBook they want you to associate the MacBook with a lifestyle they’re selling you a lifestyle and the MacBook just happens to be associated with it they’re not showing you in inside the MacBook and all this other stuff in these kinds of videos They’re showing you the lifestyle Now there are videos where you they’re going to show you the internal parts and they’re gonna sell you on the technology But that’s a completely different video completely different presentation. That’s once the person is like I’m in I’m in I want to live this life Then they’re gonna show you the rest of it. Okay Okay All right, let’s do Q&A. Let’s get let’s get this out of the way. Let’s go back to cam We did enough. We got enough value on that. It’s 12 o’clock. We did our 45 minutes to 60 minute deep dive There’s enough there to chew on All right Q&A time Right question in all caps and then you can ask your question and I will be able to find it. Let me scroll up and see if we’ve missed it. Let’s just start now. So I don’t have to do a bunch of scrolling. I’m just going to go back and see what people are saying. All right.

0:58:38
To be fair, it does say quick links. That is a fantastic joke and observation. I love it. Very well done, Admiral. Well done. Looks like a PowerPoint slide show. Yep, it absolutely did. All right, literally Kevin’s dream, a slider, a moving menu, a mega menu, and not contextual, top right.

0:59:03
It had all the ingredients right there. Okay. Original build had a static image with the quick links menu. Boss wanted a slider. I gave a slider and removed the quick links. Got in trouble for removing the quick links. I had to put it back. Hard to do the right things when you’re dealing with a person who is unreasonable and signs your checks.

0:59:27
This is it. Hey, listen, I understand. This is why. Let me pull them back on. Let me pull them. When I do these critiques, you know, some people are like these these things are harsh, but you know a lot of times It’s this person’s fault right here, and let’s not forget Fred middle manager in operations These are the people responsible for most of these decisions And by the way it might be that oh, it’s the know the owner wanted it But the owner knows as much as Bev does and the owner knows as much as Fred They all know the exact same amount, which is absolutely fucking nothing.

1:00:03
That’s how much they know about this stuff. But, you know, like Eric said, they sign the checks, right? Now, this is why also I teach in sales to position yourself as a consultant and not a pixel pusher. Now, you might be in a situation where it’s not even an agency, it’s not even a freelancer. You are just, you’re hired, like you’re the actual employee of the company building the website.

1:00:29
Sometimes that is the relationship. And in that situation, you’re gonna be relegated to a pixel pusher, right? It’s just do what the boss says to do, do what Bev says to do, do what Fred says to do. But if you are an agency or a freelancer, you need to be seen by all of your clients as a consultant, and you need to be able to put your foot down in these kinds of situations say no we’re not doing the slider Bev no no Fred we’re not showing the back of the fucking wheelchair with dirty ass wheels that is not going to sell the batteries so we’re going to do something different that’s actually going to sell batteries and best believe all let’s take five battery brands five battery brands and We look at all their websites and they’re all technical jargon They’re all the pictures of a back of a electric scooter with a black box battery. It looks all they all look the same Okay, if you can find a way To tell a story and have good visuals and have it compelling copy. You’re going to fucking win easily like fucking win easily like you know I hear this all the time like well they all look like this then stop then don’t do that yeah no marketer has no good marketer has ever come into an industry and be like you know our plan is to be like everybody else that’s what our plan is let’s do it that’s not a good strategy that’s a failed strategy right out of the gate.

1:02:02
But clients will tell you this, oh, our competitor Z uses industry jargon and they’re doing just fine. Oh, competitor Z, they use that image, they’re doing just fine. I’m like, do you wanna do just fine or do you wanna fucking beat them? It’s not a reason to not do things better. Just because your competitor who’s doing fine sucks, doesn’t mean you have to suck too.

1:02:24
That’s never been a rule, okay? You could still be better than them, and it doesn’t take a lot of extra effort. Find better photos, tell better stories, write better copy, publish. We’re done, okay? Just requires a little bit of homework. All right. Yeah, so Ruben says, the lingo is overwhelming.

1:02:44
I just want a battery for my solar panel or ATV. All right. Eric says they hired me eight years ago to rebrand the company and the experts turned this company from 11 million to 50 million company at that time. But your owner overrides things we do all of the time. We try to talk reason, but sometimes we just have to give in. All right. People talking back and forth. Review. Okay.

1:03:17
Fourth, review, okay. I personally value when people tell me about my mistakes in a straightforward manner. Yeah, I mean, let’s be honest, right? Sugarcoating stuff doesn’t give, it doesn’t help people, it doesn’t help people. All right, it hurts at first, but you have to give it one-to-one and you can start fixing stuff. Yes, yes, yes, yes, yes.

1:03:38
Okay. I see 30 options and still more confused. All right, so there’s a lot of good feedback, a lot of good feedback on the site. Okay, let’s find some questions. And even if it’s B2B, Marco said this looks more like B2B, which it could be 100% possible, right? But B2B can still be interesting. I don’t know why B2B companies like almost refuse to be interesting, but you can still absolutely be interesting in B2B.

1:04:08
For the battery finder, I would swap the order of the filters. I wouldn’t put the year first, but the make first. The year is something the potential buyer might not know. That’s true. Also, the years need to go away when they choose the make, right? If you choose what kind of battery you want or what kind of vehicle you have or whatever, if you don’t have batteries in stock for certain years, get rid of the years after they select the make.

1:04:35
You know what the make is, now tell me if you have the years available. I don’t need to go any further if you don’t have the year. Same with everything else, right? But if I choose a year, you know, it depends. Okay, the divider reminds me of a battery leakage and accident spill of hazardous substances. All right, questions, questions, questions. I’m still seeing comments about the website. All right. 99% of batteries are in a box under a hood. Hard as fuck to show the product in an application.

1:05:12
Good, that’s why you shouldn’t do it. That’s why you shouldn’t show the battery. That’s why you should show… Like I said, if you show a nice old gentleman with a smile on his face in a scooter living his best life, people can make the connection. Oh, it’s a battery-powered scooter. We all know that. The guy ain’t putting gas in his scooter, okay? So we know it’s a battery, right?

1:05:36
And they make… it’s easy to make that connection. Now you’re telling a story. So this is especially true. It’s like we can’t even show the product that’s in a box. They don’t definitely don’t show me the box. Definitely don’t show me the box. Show me, just show me a story. That’s it. Decision made. All right, all right, all right, Q&A.

1:05:56
Okay. Next question, how do you redesign a production site that has to be synced with live data during the dev process? Really, really, really good questions. Which one reason I don’t do e-commerce sites. There’s different ways to tackle it and I’m not the best person to ask that question because when that kind of shit happens I hire somebody or You know if somebody on our team already knows how to do it and already has a plan in place I’ll tell you it’s a massive problem with automatic CSS and you know using Edd easy digital downloads, which is not easy and Is most mostly a trash can It’s problem there right because we have to sync licenses.

1:06:49
And if we’re over here on a staging site doing redesign and people are buying licenses, well that shit’s not getting synced up in the database, is it? So it’s really a question of the tech you’re using because some plugins may allow you to re-sync, some plugins may not allow you to re-sync, depends on how they did the database structure and all of that. Then there’s products like SureCart.

1:07:12
SureCart stores everything off of website off of you know WordPress anyway So it wouldn’t be a problem if I was using something like sure cart So that’s where the text that kind of helps you out right so it’s going to depend on a lot of different factors But you know even even if I knew the exact details I’m not the best person to ask I would just hire somebody to handle it and to manage it. Question, Kevin, should someone hire team from the very start of an agency? Because I’m not skilled at SEO. Let me put these up on the screen. I forgot to do this last time.

1:07:47
I’m not skilled at SEO, copy, et cetera. Or should I start with cheaper projects like templates before I scale to a team? Oh, I put Fred and Bev up and I don’t even think I showed them. There they were in case you were. Let’s talk about these people. Yes, I need to remember to share screen when screen sharing is needed. So this is basically like chicken or egg kind of thing, you know, or like, should I just do everything I can myself until I get enough business and get enough money to then hire somebody and bring them in?

1:08:20
And who should I bring in first? And what order should I hire in? And how do I know when I’m ready to hire? And how do I know when I’m ready to hire the next person after that? And these are the questions I get all of the time. Very, very common agency slash freelance questions. So the first thing I would ask you DJ is, let me put this back up, is what is your wheelhouse?

1:08:49
What are you the best at doing? Is it dev? Is it design? Are you one of the unicorns that can do design and dev? That would help answer the question. Now, I can’t sit around and wait for everybody’s answers to these questions, so I just have to make assumptions and I just kind of create a scenario and talk about the scenario. And it mostly applies to everybody.

1:09:10
You’ve just got to plug yourself into the scenario wherever you fit. So let’s say that you are great at dev. Most of us who use page builders, there are people that come from the design world and they’re learning to use a page builder. That’s very common. But there’s a lot of people who use page builders. They learn how to assemble websites with page builders more or less.

1:09:34
But they still don’t really know a lot about design. I would say that’s more common. Can we agree that’s probably more common? It’s more common that somebody learns how to do dev and they’re not really that talented at design. I think that’s more common. Now there’s a huge design industry and designers are coming over to dev all the time and that may flip-flop at some point, I don’t know. But to me it feels like there’s more people who do dev that aren’t as talented at design.

1:09:59
So let’s just say that’s the scenario. So what you need to do first is hire a designer. Now you don’t have to actually hire a designer, that’s the thing. You can just use a contractor for design work. And so you go out and sell projects. And you’re just gonna sell website projects, that’s it. You’re not gonna sell SEO, because you just said you’re not skilled at SEO. You’re not gonna sell PPC yet.

1:10:25
And all these things are yet okay. You’re not going to sell PPC because you probably aren’t skilled at PPC either. What you’re skilled at is dev and then if you pair design with dev we can have a website. Now the copy is not going to be that great on the website probably but that we can talk about that in a minute. But the two main ingredients there are design and dev. You have dev you need someone for design.

1:10:52
So you sell the project. You know how much design is going to cost you because you talked to a contractor first. Hey, how much would you charge me for XYZ? Okay, you’re working up a proposal for a website. It’s going to be an eight page website. Let’s say you need three UI pages done in order to do the work that you need to do. Reach out to the designer. Hey, got a project.

1:11:14
I need these three pages done How much is it gonna cost me right and they’re gonna give you a ballpark and then you mark it up from there And then that’s the amount you put in your proposal you hired a designer You didn’t hire them to be an employee. You don’t have to worry about legalities of Employee right life taxes all that stuff that comes along with it. You’re not obligated to this person They’re not obligated to you, but you just solved the problem. You got a designer for this project that you sold. And so now you have a professional design and you get to handle the development and then all is well in the world. You ship the project, now it’s on to the next one.

1:11:52
And so you’re doing this process to gain experience, you’re doing this process to get your processes in place. What does this need to go through. Like you’re, I assume, doing, hopefully doing wireframes. You’re able to do that in some sort of tool. If you’re not able to do that, then that’s another kind of sticking point. Now everybody can do that with frames because you can do frames inside of Brics and you’re already in the environment that you’re used to working in. Doing wireframes in Figma is a different story. That would take additional skills and additional know-how until, by the way, the frames add-on for Figma is released, which is coming very, very soon. Then you’ll anybody can be able to wireframe inside of Figma, which is going to be fantastic. Um, but you need to, you need to do wireframing, you need to do design, you need to do depth.

1:12:36
Those are like the main key ingredients. Okay. And you just rinse and repeat this process until you have enough experience and enough money in the bank to then say, and enough, I don’t know if work coming in to say, you know what, I really need to replace myself doing dev so I can do other things because there is going to be a tipping point and this is the hardest tipping point or line in building an agency and guys when I say building an agency I’m not talking about 50 people under your command and millions of dollars in revenue. It could be three of you. There’s no size that like, it’s just more than one.

1:13:20
Honestly, there’s more than one. Okay, we’re an agency. You’re not a singular freelancer anymore. So don’t, when I say agency, don’t think you need to get really big or anything like that. And have a bunch of people to manage. You can be as big or as small as you wanna be. That’s up to you. You get to choose. But you need to be in a situation where you have enough money to have one or two or three other people or whatever coming in. And this is why pricing is so absolutely important. We talk about these $500 websites that people are selling, these $1,000 websites, these $1,500 websites. And people are like, well, you know, I can sell those all day and I’m able to pay my bills for the most part. Now most people are living project to project which is the equivalent of paycheck to paycheck in a job world right.

1:14:08
You’re living project to project if you get sick and you can’t work you’re broke because you can’t bring in money right. A lot of times if you’re spending is not 100% under control you run out of money on a project and then what you have to do is go get another project but now you have two projects and you’re always chasing the next project in the next dollar because you’re always broke. That’s what happens to these like low-level freelancer type rates and all of this stems from when you are pricing a project. What freelance, the biggest mistake freelancers make and I’ll tell you what the hardest transition is. The biggest mistake freelancers make is they price the project to support their bills.

1:14:52
That’s it, right? It’s like, what is my time worth? What do my bills add up to? All right, if I charge this amount, I’ll be able to pay my bills and I won’t have to get a real job. And that’s kind of like the, I feel it feels like that’s the situation most people start out in. Because a lot of them are coming from like, you know, the job world, it’s like, well, I’d much rather build websites for people than flip burgers or something.

1:15:16
So I just need to make enough to not have to flip burgers. And that’s how they price their projects. And I think we can all agree that this is not a good pricing strategy. This is not good logic for how to price valuable business services, okay? So what we need to do when we’re pricing is think of all the things that need to go into the price. Your cost to produce the item, which is your labor in web design, that is a factor.

1:15:43
It can’t be the only factor. Okay, newsflash, that can’t be the only factor. If you’re charging $500 for a website, that’s the only factor that you’ve considered. I’ll tell you that right now. That is the only factor that you’ve, probably you didn’t even factor enough in that situation. $500 is nothing, peanuts. $1,500, you’re probably still only factoring in labor. And we can prove this by like just tell me how many hours the project took and let’s divide by 1150 and let’s see what your time is worth per hour. And if it’s very low then you know you’re screwing yourself over and you’re not pricing appropriately. So what goes in besides labor?

1:16:21
Well value comes next, right? Let’s just talk about value. And these aren’t even in any specific order. But we need to talk about value as quickly as possible. How much value does this product have to the person you’re giving it to? I tell people this all the time. And people ask me, how can you sell a website for $50,000, I don’t understand. Well, the website’s going to make them three million. So if it makes that company $3 million, you think they’re gonna have a problem paying fifty thousand dollars to make three million dollars? Probably not. So it depends on who you’re selling to, right? Now if the project is only going to make them fifty thousand dollars this year, well they’re not going to pay fifty thousand dollars for the website. They shouldn’t, right? And you shouldn’t build them a fifty thousand dollar website or propose a fifty thousand dollar website.

1:17:10
And really when I say fifty thousand, it’s usually a collection of services. It’s the website, it’s copy, it’s strategy, it’s discovery, it’s PPC strategy, it’s then we’re going to be doing SEO work, it all adds up, okay? But a company that’s not going to make $50,000 this year should not be proposed $50,000 worth of services. So it’s got to be to scale, right? But you do factor in the value that this has to the company. So that’s important. What else do we have to factor in? Growth, profitability, marketing budget. Look, you can’t pay me and then I do the work and I’ve paid all my bills and I have nothing left to go get the next client.

1:17:52
I have to be able to go get the next client. To continue serving you, by the way, we’re gonna have an ongoing relationship. I need to make sure I don’t go out of business. I need to make sure that my business is healthy. And so you look at this all the time and like the corporate world understands this, they need to make a profit. They price to make a profit, not just to cover their expenses, right? So you have to have money that you’re going to be setting aside for marketing. You have to have money that you’re just setting aside for pure profit rainy day. If you’re in the inner circle you know the profit first strategy, right? It’s a great book. You don’t even have to join the inner circle to learn profit first. Just go get the book. It’s called profit first. It’s a way of bookkeeping and accounting to force your company to be profitable. It forces profitability just simply by the way that you think about and manage money in your agency, in your business. Not even created for agencies, it’s just for business in general. But I do have a training on it in the inner circle. So if you’re in the inner circle, I have a whole profit first training.

1:18:53
But you have to think about profitability for your business. So you have to think about taxes. You got to think about all these things that go in. You got to think about training. They can’t just pay you to build them a website because what they’re paying for is expertise. But the expertise didn’t come out of thin air. Expertise, especially in our industry where it’s a fast-moving, ever-changing industry. How much time do I have to spend learning about new CSS things, new HTML things, accessibility, new marketing trends, new this, new that?

1:19:28
I gotta spend time, energy, labor, brainpower keeping up with all this stuff. That has to be baked into my pricing. I can’t take a loss on that. If I decide, you know what, I need to do an eight-hour course on accessibility. Well, what am I doing that for free? Is this a charity that I’m just going to get way better and not charge my clients for that? No, they have to pay for the ongoing training as well.

1:19:55
All of this gets wrapped up into your pricing. What does it take to deliver these products and services? It takes a lot more than the obvious hour by hour labor of putting a website together. It goes way beyond that and you have to price for all of these things. That’s why our price has to continue going up. This is why lawyers are expensive. This is why doctors are expensive. Don’t you think that they charge according to all of the licenses that they have to keep up with all of the ongoing training that they have to do the value that they’re providing you in Saving your life or performing surgeries or whatever, right? Just making your quality of life better treating you for whatever you ailment you may have A lot of that is baked into the price now. There’s a lot of bullshit baked into the price, too Which we could talk about we don’t need to we just need we obviously we want to be fair don’t bake a bunch of bullshit into your pricing but it’s not serving you to not bake the real things in to your pricing and that’s what so many people are missing if you’re at $500 for a website $1,500 for website $2,500 for a website you’re not baking in all the things you should be baking to the price and it brings our industry down as a whole now the legit clients aren’t going to care, they’re not like no legit client is going to is going to you know choose somebody to do a $500 website for them. The same way I wouldn’t go to a used car lot and pay $500 for a 2019 BMW.

1:21:30
The first thing that pops into my mind is what the fuck is wrong with it? Why is it 500? You You wouldn’t call you know, there’s no way I’m giving you $500 for this 2019 BMW Cuz something gonna go wrong with it. I already know because it shouldn’t be $500 right now if you charge me $25,000 I’m gonna buy it if that’s what the car that I wanted Because now it makes sense in my brain right? That’s what that car is supposed to be worth So you see like, you know, your low prices can hurt you very much as well. A legit client sees a very low price and they’re like, nah, red flags, red flags, I got to go find somebody else. You’re only getting the unlegit clients at those prices. That’s another hard fact that you have to, you know, get into your head.

1:22:21
That you’re not serving yourself and you’re not serving like legit clients because the legit clients are scared of those prices. So now let’s talk about the line like what’s the hardest transition to make the hardest transition to make an agency business is removing yourself from the labor that is the hardest transition that you need to make and it is the most important transition to make? Because an agency or any business really can’t grow if the leader is flipping the burgers. Right? McDonald’s, Burger King, Chick-fil-A, well all these major companies right? Or take Apple. Let’s just go into the tech, you know, doing every latest feature of WordPress, there’s going to be a massive cap on what the, on what Automatic as a company can accomplish, right? Mullenweg has to be out, I don’t even know if I’m pronouncing his name right, but he doesn’t deserve it because Gutenberg is trash. So, you know, a little mispronunciation here and there is okay.

1:23:36
He deserves it. He’s earned it. So Mullenweg needs to be out at conferences speaking Mullenweg needs to be out talking to you know big sponsor whatever I don’t know how their company works but he’s got way more important stuff that he needs to be doing and that is true in every single business so you can’t be out doing sales presentations with clients if you’re busy in the back end of Bev’s website, right? You can’t be writing content marketing articles that are gonna get you more traffic and more leads down the pipe. You can’t be creating videos, right, to ask content marketing to bring in new people if you’re constantly working on Bev’s website.

1:24:19
You can’t be at meet and greets. You can’t be holding free seminars in your local area if you’re constantly wrapped up in Bev’s code right there’s things that you can’t do when you’re flipping the burgers that you need to be doing to make the business grow and so the faster you can get out of flipping burgers and start shaking hands right that’s when your business is going to grow more the question is how do you get out of that mode because especially if you’re not pricing accordingly. You’re not gonna have money to plug somebody into that space in order for you to go do these other things.

1:24:58
So there is like a tipping point, right? It’s a hard to navigate thing. It’s like, all right, I gotta have some sort of leap of faith that I’m gonna be able to go over here and make the business grow in order to afford these people that I’m putting in to these positions. That’s a hard, it’s a very hard transition to make. So I’m not gonna say that that’s easy. It is a hard transition to make, but it’s a transition that you have to make as soon as possible.

1:25:20
You’ve got to stop flipping burgers, sweating over the whatever that thing is called, that they flip burgers on. You understand? Okay. All right, let’s go. I think that question was answered with a long enough answer. You had explained in the last 101 CSS that there was a difference between a flexchild.class let me put this up on the screen. It’s a little hard to read.

1:25:48
It’s hard to read because your words are blending together. I don’t know what’s a what’s a what and what’s a what what’s a what. I think what you mean is, okay, this is all explained in the next lesson. Let me get Bev and Fred off the screen here. Let me pull up CodePen, and let’s remember to share the screen. Okay, good. So let’s go into here. So basically, I think what you’re asking is, we can turn all this stuff off.

1:26:26
We don’t need all that. This was part of the next lesson that’s coming out tomorrow in PB 101. Okay. So what we have here on the screen is, well, we don’t have it anymore. Let’s get rid of, let’s see, my box, dark. Okay. And we actually need this one as well. Save. Maybe our box will come back now. Good. All right. So we have a my box element and it has an ID of my box that has a class of my box dark and my box and we’re just going to focus on this class right here. Okay. And I think what you’re asking is what is the difference between Okay, and let’s do, we’ve got a background color red.

1:27:14
Let’s just do this, take that off for just a second. Body, my box. Do I have another instruction in here somewhere? Oh, I do. Oh my gosh, okay, too much CSS in here. All right, so here’s my box. It’s got a background color of black. And I think what you’re asking is what is there in between body space class my box and body no space my box. And as you see the box is gone. It’s gone. So I’ll just answer really quick. Let me zoom in a little bit. This means find a body element with a my box that is a child.

1:28:07
So a my box inside a body. So here is a body element with a my box inside of it. There’s the class my box right there. Therefore, I’m getting an actual background color instruction. Now, I’m styling the my box element, but there’s no background color anymore. I can put a background color of red, right? And so it’s not gonna be red. Why is it not gonna be red? Because this instruction overrides this instruction.

1:28:34
Now I’m going to join these again. So it’s, remember, it’s trying to find a body with a class of my box to set the background color to black, and it cannot find that. That thing does not actually exist because the body has no class. If it had a class of my box and we hit save Then we’ll see what will happen the entire body turns black Why because I’m instructing it to if there is a body with a class of my box set its background color to black Well, there’s the body with a class of my box now Everything is black, but if I say find a body that contains a my box, set the background color of my box to black, you see a black box.

1:29:20
Hopefully that answers your question. All right, we can go back to camera. We don’t have to continue sharing that screen. All right, getting here a bit late, so sorry if this was already addressed. Is it better to choose stock photos over shitty custom photos? That really depends. So if it’s a product photo you got to go with what you were given. And I’ll tell this story again because it’s so very very very important. I had a client who wanted to start an e-commerce brand and we it was it was referred to me by a friend.

1:30:00
That’s why I took it because I don’t do e-commerce sites. But my friend, Sweet, talked to me and I got this whole story about this person had been struggling and they got this up-and-coming idea. Okay, all right, all right, okay, whatever. We’re going to do it. We’re going to do it. So we designed this great e-commerce site, had a great little design going and we started to build out the functionality with all these placeholders, right? And what we were told is there is a photo shoot planned, it was a clothing brand, there’s a photo shoot planned.

1:30:38
And I said to them, I was like, all right, I know you guys don’t have a very big budget, but make sure the photographer knows what they’re doing and make sure you have good models. Because these product photos have to be good because you know you go to you go to you know American Eagle you go to Victoria’s Secret you go to anywhere it’s no secret they pay a lot of people a lot of money for really good models and really good photographers why do you think they do this because it’s required to sell clothes you can’t have a bad looking model and a bad photo and have people come to the conclusion that they really need that blouse, right?

1:31:22
It’s just not the conclusion that they’re going to come to. Once again we have to tell a story and so typically it works better when it’s great photos of beautiful people. It’s just a fact, all right? And so I said, I told them, because I knew their budget was low, and when you have a low budget, what do we get? We get low-rate photographers, and we get low-rate models, typically. And I was told, oh, no, no, we have some good-looking friends, you know? We don’t have to spend a lot of money.

1:31:56
And, oh, okay, whatever, whatever. So we do all this stuff, and then one day comes along, and I get the photos back and my head sucks. I’m like, oh, God. Oh, how do I tell them? How do I tell them? How much sugar can I sprinkle on this? And I just tried to tell them, I’m like, you know, this is not what we needed. We needed better than this.

1:32:21
And they were like, we don’t have any budget left. This is all we have. Okay, all right, all right. So we’ll throw up the product photos, put them in there, hit publish on the site. Then their marketing campaign starts, which is also, you know, low budget marketing campaign. And I was just along for the ride. I knew from the, you know, the first minute, I was like, this train that we’re on probably will get derailed very soon.

1:32:46
And it will, you know, be a flaming disaster bodies laying everywhere this is probably exactly what’s going to happen and so we publish it we do their you know little marketing get a little traffic to the site guys that website still life I think they’ve gotten yeah zero sales zero pretty sure they haven’t sold a damn thing even with coupon codes and this and that I’m pretty sure they haven’t sold a single piece, maybe one, maybe one, I don’t know.

1:33:21
They’ve made dozens of dollars. Yeah, I don’t think they’re doing well. And it’s kind of abandoned. It’s just been abandoned at this point. They saw their dream die. Now why did their dream die? Did their dream die because the website wasn’t good enough? I don’t think it was that. Did their dream die because there wasn’t good copy on the website? I don’t think it was that. Did their dream die because they couldn’t represent their product well with really good photography and really good models because that is a critical piece of selling clothing on the internet?

1:33:58
Yes, yes, my friends. That is why their vision died. And did their vision die because they didn’t have enough funding to make their vision a reality? Yes, that is also why their vision died. And this gets me back to why would somebody pay $20,000 for a website and copy and strategy and discovery and SEO because they don’t want their fucking dream to die.

1:34:24
You can’t take $2,500 and make an amazing company out of it. Very few people can do that. What it requires is pay the branding guy for an actual good brand style, right? Pay the photographer for actually good photography. Pay the models so they can stand there and look beautiful. That’s what their job is. Get good products on them. Get good clothing on them. Now pay for the good website.

1:34:51
Now pay, you understand? Like it requires an investment. And so you get these, I wouldn’t even call them companies. You get these owners, usually it’s like a single entrepreneur, you know, solopreneur, whatever you want to call them. They come along, oh well, you know, I don’t want to spend a bunch of money. Ugh, ugh, I don’t have a lot of money to put into this. Well then you’re not going to be successful my guy. Because you have to spend money to make money. You have to put the people, the right people in the right seats on the bus. If this bus won’t go anywhere. You can spend very very minimal. It does not require a lot of money to create an Amtrak disaster. Right? If you want your train to get derailed and there’s bodies everywhere and your vision goes up in smoke, that’s very easy to accomplish.

1:35:42
Get $2,500, hire all the wrong people, do everything the wrong way and hit publish and that’s what you’ll witness. Very easy to accomplish that. So to the client, it’s like worth spending a lot of money. Invest in the right people and the right things and you might get some success out of it on the back end. It’s worth paying for or you can hire all the wrong people and watch your dream go up in smoke and that happens all the time. The failure rate of small businesses who don’t have a lot of money or don’t want to spend to make money it is not a short list let me tell you. Okay that’s enough of that.

1:36:26
Questions, questions, questions. We’ve got a lot. Let’s see. One side is man enjoying scooter. Okay. People are still talking about that website. I’ve had people quoting me everywhere from 50,000 to 240,000, which is well over what I charged the client for a beta, 6,000. You must be talking to somebody else. I don’t know.

1:36:47
Okay. Question. Okay, question, for an events website, do I need JavaScript to make past events disappear after the event ends using WordPress and a page builder? And could that be a dynamic feature perhaps using ACSS? Well, well, share screen, there we go. Let’s go over to, we got really good, still got really good viewership this is fantastic like we’re growing every single week let’s go to inner circle slash roadmap and do I have it on here let’s see mmm I need to add it on here we have it’s in our back end we have a in our base camp we have a one it’s one planned on how to create an entire events management system we’re going to be doing it with bricks and metabox and the answer is no you don’t need as far as I as far as I can tell so far you do not need JavaScript to make that happen but nonetheless we will show you start to finish how to build an entire event management system inside of WordPress with custom fields and dynamic data and that’s pretty much all you need. And that way for projects where you need event management you can have your own little proprietary system. You don’t need to rely on a third-party event management tool. Now depending on how many features are needed you might decide well you know a third-party tool would be better suited for this.

1:38:25
But if you just have simple event stuff that a lot of little small businesses need, you have your own little proprietary tool set up in your blueprint, or have a separate blueprint for that kind of need, and bam, one click, you got that at your fingertips, and it’s easy to manage and easy to implement, and it’s all native. It’s a little fantastic little thing. Okay.

1:38:45
Can you show a quick demo on how you would set up a dark website in ACSS plus frames? Having trouble whenever I use frames to create a dark site well Here’s one right here right my own site is a dark site created with ACSS we go into the back end Let’s go down, automatic CSS. See how this is the new version of automatic CSS, right? Why is this? Because I take automatic CSS, this is how much I try to trust my own product. And I’m like, you know what, before we let everybody else install this on their websites, let’s see if it blows up my website.

1:39:16
And yeah, I put it on my own live websites. And then, you know, thankfully, because we have a good team, nothing blew up and here we are but I just want to let you know it goes on to my own sites before it goes on anybody else’s sites. Alright so you are under viewport right here see this right here body website backgrounds color just drop in your dark color which is usually your base color and that’s instantly going to make the entire base of your website every page every section automatically is this color. And then you’re gonna set your normal body font color to light.

1:40:10
And from that point forward, it just depends on other design decisions that you are gonna make. But you see right here under text, default text color is my base ultra light. So my default automatically now, every page I added, every section I add, it’s got a dark background and it’s got light text. And then I have all of the shades at my disposal. Like if I want to create divisions between sections, I’ve got var base dark, var base ultra dark, var base medium, right?

1:40:38
And then with my lights, I have ultra light, light, medium on those. You can create your own. I believe for this site, I had to create a specific variable just for text and so in fact let’s just see what variables I’ve created on this website that were custom. Oh right here okay so look at all look at all these well this was before I had to do this before why did I add contextual colors to ACSS because I needed them I ran into a use case where I was like I really need some contextual colors here well I made them myself but now they’re in ACSS natively but let’s look at this people ask like they’re like oh there’s not enough shades, there’s not enough this, there’s not enough that.

1:41:18
But the ACSS color system is infinitely expandable. You can do whatever you want with it. So I needed to make a base medium light. Well, I just use an HSL string and look, color partials from ACSS to make any color, any shade, any transparency you might ever want or need. Look at this one, 17%, man, that’s very specific. I was able to make it with variable partials from ACSS. Here’s a base light trans five. Do you know we don’t have a 5% transparency of your base color? Why?

1:41:49
Because we don’t want an insanely bloated framework for stuff that hardly anybody needs, but I happen to need it on this site right here, but I was able to make it in like two seconds with variable partials. And then I just changed the lightness value and the percentage. Here’s an Action Trans 15, didn’t exist in ACSS. Oh, look at this. There’s a partial for the entire HSL string, which makes it easy to just change transparency on the fly. My God, who thought of all of this?

1:42:20
I don’t know. Look, so, you know, here were some very specific things that I needed that ACSS didn’t provide. But in reality, ACSS does provide these things. Because of the partials, I can do anything that I want. There is no limitation to color management in automatic CSS. You just got to tap into some of the other things that we give you. It’s not all sitting there in the pretty UI dashboard. Because honestly, if you could do everything, the UI dashboard wouldn’t, it would start to not be so pretty.

1:42:50
There would be toggles everywhere and settings everywhere and buttons everywhere. And that’s part of the design of like, all right, the framework, we said from day one, the framework should do what you need it to do. It shouldn’t do too little and it shouldn’t do too much. And too much can, you can hit that line very quickly, right? Where a framework just really starts to try to do too much. And now it’s like, you’re just busy managing the framework and like, man, I don’t know.

1:43:19
Let’s let the framework do what it’s supposed to do. Make all these things automatic for me, make my life very, very fantastic. And then if I run into a limitation, can you just make it easy for me to get around that limitation? And that’s what this does right here. We make it easy to get around the limitation. We don’t create, you know, an infinite thing in the UI dashboard that now makes it all more confusing and harder to manage and yada, yada, yada.

1:43:45
All right, so that gives you a little insight into, I mean, there’s a real site, right? This is code in WP CodeBox, a lot of custom stuff that had to get done. We have some other custom stuff in actual bricks. These are things that happen on a real website. Okay, but that’s it. That’s all you have to do to answer your question for dark base It’s two settings and automatic CSS you go into here. Yes, let’s leave We don’t want to save any of that that we just did viewport website background color of our base hop over to typography Default text color base light you have a dark theme Okay We can stop sharing that now I’m still dealing with congestion from having strep like a month and a half ago.

1:44:27
How do you accurately price when you haven’t done the research yet? Thus, you don’t know how many pages need to be UXed, that’s wireframed, and copywriting pages is required. This is, John, a fantastic question. This is why we’re here. We’re here for these fantastic questions. So you’re going to deal with two types of clients. This is very important. Very good question, John. I’m impressed.

1:44:51
Very good question. So you have two types of clients mainly. You have clients that are going to fit into the, I pretty much know what you need boat. Okay. This is small businesses, very simple, maybe in an industry that you have done work in in the past. You’ve done other clients, you have experience in this industry, and so you’re looking at the client, you’re also looking at, you know, the size of their business and you’re like, I pretty much know what they can afford here. And so when you, let’s say the site’s going to be 10 grand, you’re like, it’s going to be a $10,000 website. There’s only so much that can go into a $10,000 website, right? This can’t be a 30 page website, this can’t have all this stuff going on and all this custom function it’s just it’s kind of a simple project and so you and now by the way maybe they need more in the future we don’t know but this is where a phase based approach comes in and so there’s gonna be two different approaches for this kind of client where I pretty much know what they need right now even if they need more things in the future I’m proposing a phase one.

1:46:02
And phase one is going to have the key, I do everything in the service-based industry for the most part. It’s going to have your key services, pages. It’s going to have a homepage, it’s going to have an about page. Do you want a blog? Well, I just ask them a very simple question. Are you going to write it? Or do you have money for us to write it?

1:46:21
Very expensive, right? We’re talking like $1,250 per article, right? So do you have that kind of money to spend on content marketing over the course of let’s say six months? Like four articles a month for six months? Is that what we’re, no, okay, didn’t think so. So we’re not gonna have a blog. We’re not gonna, no, Bev is not gonna blog for you. No, Bev’s not gonna blog.

1:46:45
Neither is Fred, okay. I get it, they wrote in college one day. They’re not gonna blog for you, okay. All right, that’s wrapped up so you’re not going to have a blog you’re going to have about contact us you’re going to have five service pages that’s phase one and I could just propose that we don’t need to do we’re still going to do discovery but we don’t need to do discovery to figure out what we’re going to build for you right we only need to do discovery to figure out what are the things going to be called what keywords are they going to target what is the copy going to look like yada yada yada that’s what discovery is for we can do that after you’ve signed the contract for the project okay that’s bucket one and that’s gonna be a lot of your clients then there’s bucket two bucket two is here’s a good example client came to me they’re in the medical industry okay and they need a website redone they already have a website and I go to it and I look around and this is easy because a Lot of people that come to you are gonna have an existing website, right?

1:47:44
So you just kind of look at what they have and what they’re gonna need in terms of a rebuild what was done Right what was done wrong? What’s missing? What’s not missing? Yada. Yada. Yada you look at all this the scope and Then but then they come along and like they tell you the story of like why they’re doing this redesign They have a brand new medical device coming out and they actually don’t have an existing page for this. They don’t have the photography for it. They don’t have any copy or content for it. They don’t have all that. There’s a lot of unanswered questions now. Suddenly they’re also starting to say things like we want to start exploring content marketing.

1:48:16
We want to start, and we don’t even know what our opportunity is with content marketing. We don’t know if blogging would be a good route to go. We don’t know if creating videos would be a good route to go. We’re really relying on your expertise to kind of guide this and let us know what would be good to invest our money in and what would be a waste of time. And so I’m starting to hear these things. And immediately in my mind, I realize you can’t scope this out. Based on the information that we have available to us, there is no possible way to accurately scope this project.

1:48:53
So what do we do now? That’s the question, right? Well, the question is not like, sorry, I don’t really know how to scope. I mean, maybe if you don’t know how to do it, you should probably tell them that. But what the real strategy is at this point, and you also start to realize this is, you know, a $60,000 project, an $80,000 project, a $100,000 project. You know, it’s very large. And some people, you know, I think I’ve told this story before, but I’ll tell it again, because you have to hit home, and you’ve got to hear things many, many times for you to realize.

1:49:22
When I say a number like $80,000, people, some people lose their mind. They’re like, I have no idea what that would even look like. What, how would it ever even get to that? I haven’t even done $8,000. How are you getting to $80,000? Let me go back to the BMW analogy. You go to the BMW lot or it’s really just a used car lot. The BMW is $500. All right, well, what’s wrong with it? I get on a call and I will tell you a real story. And this was actually a different medical company. Different medical company I get on and this was a referral to me from a medical company website that I did previously. So they were in the industry talking back and forth, who did your website? Oh, this agency did the website, Digital Gravy, you need to go talk to them.

1:49:46
Cool. I get on the phone. Who am I on the phone with? First of all, I’m on the phone with a marketing director. Not an owner, not of this, not of that. What does that tell you? It’s a larger company, right? So they have a marketing. Not only do they have a marketing director, they have a marketing team.

1:50:02
Oh, OK. This is getting more interesting. Anyway, I look at their big website. Oh, and I realized, oh, they have nine locations across the world, okay? Well, that’s interesting. What is this letting you know in your head? Kind of larger scale, yeah? And you start to see how many pages are on this website. So I get on the call, and I’m talking to this marketing director, and we’re going through all the normal, like, sales call discovery stuff, outlining process, yada, yada, yada.

1:50:31
Again, in the inner circle, there’s a whole checkpoint training on how to run a sales call. Every checkpoint that you need to hit to have a successful sales call. And one of those checkpoints is price. Now with very small clients you need to talk about price as quickly as you possibly can. So as soon as possible start talking about price. Like ring ring hey Bob got your you know your your inquiry to our website. Love to hear about your project. Just wanted to let you know that our project started $5,000 and go up from there. Is that, you know, about what you expected?

1:51:24
Oh, yeah, yeah, yeah. We’re good with that. Okay. And now let’s continue the conversation. I don’t know if Bob has fucking $500 to his name. I can’t go through an hour long sales call with a guy that doesn’t have $500 in his pocket. It’s never going to be. It doesn’t serve Bob to waste his time. So Completely the opposite with a company that can obviously afford it. Don’t talk price to them early You talk price to them toward the end Don’t make them ask for the price either. Okay, and you’re not going to give them a price You do what’s called price bracketing you give them a bracket your project based on the other work that I’ve done for other companies like yours and the size of this project it’s going to be anywhere between and then you throw out two numbers and I just want to tell this because people are listening going I can’t fathom $80,000 I can’t fathom telling somebody $80,000 here is what these kinds of companies think about these numbers just so that you’re on the inside for five minutes okay so we got to the part where I had to tell her what the price was and I I used the same line that I use for every single client like this I said so just want to let you know based on projects we’ve done like this in the past especially with other medical device customers in this industry and based on the size of your current website and what you’re telling me about this new product that you guys are launching and some of the direction that’s gonna be needed on that, this is gonna be anywhere between 50 and 125.

1:53:01
And it depends on how big we wanna go with it or how tidy you wanna make it, right? What bells and whistles you wanna throw into this project. It could be somewhere around 50, but it could also be up to 125 somewhere in that neighborhood. And she, you know what her response was oh Well, we were we were we were projected to spend 80 so that’s you know perfectly fine That was it. This is now do you think when I send the proposal and the proposal is for 85? That there’s going to be any sort of price objection like they’ve already let you know now And this is in their mindset keep in mind This isn’t the person’s money the person you’re talking to this isn’t even their money.

1:53:41
They don’t care a lick. They were given a number on a budget, right? And now they just need to make sure that lines up. And that the person doing the work knows what they’re doing. So there’s literally people who would sweat bullets about to tell them that this is a 50 to 125 or whatever the bracket is. And this person right here doesn’t care a lick that you just said 50 to 125. In fact, they were expecting it. Just like somebody who wants to buy a 2019 BMW is walking onto the lot going, I’m probably gonna drop 40 grand on this.

1:54:18
And so if you tell them it’s $42,000, you think they’re gonna get a shocked face immediately? They already know they were about to spend that much. So you gotta know who you’re talking to, right? I don’t even know what question I was answering now, but oh, oh, there we go. Okay, I’m back. I’m back. Sorry. ADD. All right. Now I’m back. I know what question I was answering. So how do you approach this? Well, you tell them 50 to 125 or 75 to 125 or whatever. And then their response is, oh, okay. Well, we were thinking about spending out it so that’s fine but where do we begin right well we don’t begin with a giant proposal for $85,000 even though we could go that route there’s too many unanswered questions also I gotta let you know something they are almost always obligated to get at least three quotes so if you’re dealing with a company that’s larger or a larger project there is they’re either obligated to get more than one quote or they just want to.

1:55:18
So it doesn’t even matter, it could be a $15,000 project, a smart owner of any company, even if it’s a smaller project, $10,000, $15,000, whatever. Now even in the $10,000, $15,000 range, you’re probably just creating a proposal for this, let’s say $25,000. Okay, so $25,000 and they’re like, that is a lot of money, you know, so let me poke around. Let me just see who else, you know, can give me a quote as well. Okay, so they’re going to be looking at other people. So there are ways to get your foot in the door before these other people come into the mix. And I guarantee you a lot of these other agencies are going to be like, well, we’ll submit a proposal and that proposal is going to be $25,000.

1:55:55
Agency C submits a proposal. That proposal will be $30,000. Agency D submits a proposal that’s $18,000. So they’ve got all these numbers in front of them. Your proposal is going to be for discovery only. And what you’re gonna explain to them is, look, there’s too many unanswered questions. You’ve got this new medical device that you’re coming out with that you don’t have photos for, you don’t have any content for, you need some strategy direction on your marketing.

1:56:26
You need this and that. And so really we don’t know what all is entailed on this project. So what we’re going to do is a discovery phase. It’s going to cost $5,000. At the end of the discovery phase, you’re going to have a full site architecture. You’re going to have the SEO keyword research that you need. I’m going to pick a channel for you guys to do your marketing in based on the research that I do. And I’m going to tell you exactly how many pages your website needs. You’re gonna have a full SOW, yada, yada, yada.

1:56:55
And we’re also gonna do some copy and messaging work so that we can make sure that this copy and messaging is really dialed in on this new website. And at the end of the discovery phase, you’re gonna have all these deliverables that are key to knowing what needs to happen with this project. And if you wanna use us, if it’s been a great experience for you, then we will give you a proposal at that point for the rest of the work to make this happen. If you want to just take the work that we’ve done in discovery to some other agency and put it on their desk and say you do it, that’s perfectly fine as well.

1:57:23
But it’s five thousand dollars that’s all you need to pay to get started we’re gonna do this six-week discovery phase for you or two-week discovery phase or three, it doesn’t matter, doesn’t matter, you pick how long is this gonna take what are they comfortable with, alright, what kind of deliverables? Every discovery package is different. So you talk to the client, figure out what they need, you design a discovery package for them, you just sell the discovery.

1:57:47
And here’s what they do. Remember, agency B, they’re submitting a proposal for 25. Agency C, 28. Agency D, 18, whatever it was. You put a proposal on their desk for five. And your shit makes logical sense like how do these other people know everything that you need it that’s kind of what they’re thinking right now like it makes sense to them you don’t really know exactly what I need so it makes sense that we need to figure it out and I think I’m going to pay you to figure it out and then we’ll go from there and it gives them a $5,000 opportunity to see what it’s like working with you and if you really know your shit versus I got to pay 25 to this guy out of the blue and just hope he knows what he’s doing and hope that this is not an Amtrak disaster with bodies laying everywhere at the end.

1:58:35
So from a risk perspective on a larger project, it’s way less risky to put up a little money and do discovery than it is to commit to an entire project. And so now they’re not faced with your proposal versus these other proposals, they’re faced with your discovery versus these other big proposals. And so what they say is let’s do the discovery. And now they’re going to keep those proposals in their back pocket. But if you build a relationship with them, you now have your foot in the door. You have $5,000, you have your foot in the door, and you’re doing the research and work that you should be doing to knock this project out of the park anyway. You’re just doing it as a like a pre phase to their real project you’re building the relationship with them they’re seeing you as the consultant they like working with you they see that you know what you’re talking about these other companies they were considering are out of the picture a thousand percent they only want to work with you now they want a proposal now for the rest of the work and now it you have no competition it’s like all right here’s the $85,000 proposal that we initially discussed was in that bracket, right?

1:59:42
And they’re like, cool, let’s do it, let’s move. And you automatically land the project. So that’s what I recommend for those types of projects. You don’t sell a full proposal, you just sell discovery. It’s a smaller commitment, it’s less risky for them, it lets them see that you know what you’re doing and know what you’re talking about, and it makes them comfortable signing your bigger proposal five weeks from now or however long it is. Hope that helps.

2:00:07
All right, let’s see. And that answers Gavin’s question too. Here’s Gavin’s question. Is there a way of determining an appropriate budget without asking them what their budget is? I know there’s a general percentage of profit marketers suggest. Okay, so rule number one in my sales training, you never ask the person what their budget is. Ever, ever, ever, that is felonious behavior. You immediately go, that is, yes, prison time, rehabilitation, you never ask them what their budget is. Rule number two, you never make them ask what the price is.

2:00:47
Okay, those are the two rules. You follow those two rules in your sales conversations. Why? One is, first of all, you don’t want them really, like you wanna drive the sales call. So if they’re having to ask key questions, it’s like you missed a step, right? You should have been willingly giving them that information. And you’re controlling the flow of the conversation, which means, and by the way, if you have anxiety about talking about money, they do too.

2:01:16
A lot of clients having as much anxiety talking about money as you do. And they have their own nonsense in their head. You have nonsense like, am I good enough? Am I, should I, can I really do this? All that nonsense baggage is in your head. You know what’s in their head? I don’t want to look like I can’t afford this. I want, here’s the thing about Mercedes, people that buy Mercedes and BMWs and Porsches and all of that, they want you to know they have the fucking money. They want you to know they have it, right?

2:01:47
You can actually, if you have a person that buys like Mercedes and Porsches and BMWs and you’re in a sales call with them and you say it’s $15,000 and they’re like, you guys don’t have that much. And that kind of person will be like, fuck, you bet we do, right? Like this is the kind of person like they want to pay 25 just because they need you to know they got 25. Right. So don’t think that everybody’s like, oh, I don’t want to spend any money. Some people love it. They love they love for people to know that they have it. Right. So, you know, this is why people don’t have any problems selling Mercedes and BMW. Most of those people walk onto the lot going, I want people to know, hey, do you guys know I’m spending $80,000 on this right here?

2:02:35
Now that’s not me, I hate doing that, I don’t even like buying stuff in general. But there are people like that. Don’t think that everybody has the same types of anxieties as you do, right? Some people are worried about spending money, some people are worried about not spending enough money. Okay, so everybody’s different. You gotta kind of gauge where people are at. But you don’t make them ask about the price.

2:02:58
But the technique is bracketing. So I already kind of introduced the technique. Let’s say I’m talking to somebody and I realize their budget is a little lower. So let’s get out of the high end talk, let’s get low end now. So I’m dealing with somebody who maybe they can afford $7,500 but I’m not sure. Maybe I’m gonna have to work hard to get them up from five. $3,500 I’m confident I can just sell them on right? But I don’t want to do a $3,500 website. It’s not even my minimum. My minimum is $5,000. So I got to get them to $7,500 if I can get 10 or 12 that’d be fantastic and now you might be hearing me talk about these numbers going what do you mean get them to 7500, what do you mean get them to 10?

2:03:49
Like are you selling a $5,000 website for $10,000? Is that what’s going on here? No that’s not what’s going on here and I’ll phrase it exactly how I phrase it So I, again, it would benefit me and my agency if we can land this as a $12,000 project. It would actually benefit the client if we could land it as a $12,000 project. Why? Because I can do more things with more money. Understand? So I can go make their website flashier, or I can write better copy, or I can do more SEO.

2:04:24
I’m limited as to how much we can do to make the site successful by their budget let’s go back to the conversation about shitty models wearing clothes and shitty photos very hard to sell those products okay we can do more with a bigger budget we can hire a better photographer we can hire better models okay you see how this conversation is going. So that explains the logic behind if I can get them to spend more it’ll be better for all of us. So I want to say five that’s my minimum we can’t do it for less than five but I want to get them to like 12.

2:05:06
Ok so here’s how this goes and I but I don’t know what they can spend I don’t know what they can afford and so it comes time to talk about the price. Guys you repeat the line again. The line is the same regardless of who you’re talking to. So based on projects that we’ve done like this in the past, based on the scope, what you’re trying to accomplish, the goals that you’ve told me about, this project is going to be anywhere from $5,000 to $15,000. Is that what you expected to invest? I always use the line, is that what you expected to invest? I just I want to see what the reaction is so we have a bracket that’s been stated it’s five is the minimum up to $15,000 and then a lot of times what I tack on is especially depending on their reaction like if they’re like you know if it’s that kind of reaction then I immediately jump in with because here’s the thing if we get get closer to the 15, we can do so much more for you.

2:06:04
And I’ll rattle off, we can do this, this, this, this, this. But if it’s closer to five, we’re really limited in the bells and whistles that we can bake in here and what we can do with your marketing and SEO. So I’m just trying to figure out how much we’re able to do for you. That’s kind of like the, and then they recognize, oh yeah, if I spend more, I get more. If I spend less, I get less. Okay, that makes sense.

2:06:27
Right, so it gets them back on track. They get out of this like, ooh, just price tags. All right, so they’re making these connections. These are very important connections for them to make. And so then what they do, they get their shit together and they actually give me an answer. And they’re like, well, it would probably be more towards five. So I gave them five or 15 and they’re like, it’d probably be more towards five.

2:06:49
And I might even just flat out, remember, what did I want to get them to at least $7,500 right I didn’t want to do a $5,000 project I want to get them at least $7,500 so I can give them $7,500 in value I you know 10 would be great 15 would be great but they are now I just see they’re tacked at the low end of this bracket I can still get them to $7,500 so the simple question is this there is rule number three by the way in sales conversations you never send a proposal with a price that you haven’t already gotten agreement for ok so like if you know if you don’t know what they’re willing to pay don’t ever send them a proposal they can’t have a number on don’t ever send them a number ok so in this is so easy in the price bracketing strategy 515 I’m on the low closer to 5 ok so if I send you a proposal what I’m going to do is I’m going to go back I’m going to put a whole statement of work together.

2:07:41
It’s gonna have every single deliverable that we are going to do for you. I’m gonna put a proposal together with the SOW. It’s gonna explain our process again, just like we talked about on the phone. If I put a number like $7,500 on here, and I make sure to get you $7,500 worth of value, remember, I wanna do these other things for you that we talked about, but I can’t do it for five. For $7,500, is that going to be okay?

2:08:04
And then they’re going to be like, all right, we can swing $7,500. So you just got an agreement, right? So you started with a bracket. You found that they were on the low end. Then you eke out a little bit more, but you’re going to give them more value for that. And now when I send the proposal, they’re going to see the number that they already agreed to.

2:08:22
There is no more thinking, okay? There’s no more thinking. They just they just sign it. It’s done. And there’s no price objection that has to be overcome. Now. There’s no sticker shock that everybody’s worried about because you already got them to agree. And they already know why they’re paying $7,500. And they see a whole S.O.W. full of deliverables that add up to that. So it’s that. That’s all you have to do. All right. I’m putting you all on game. How did we got, we dropped down to 89, 87. How are you leaving right now with this, with this kind of game being, being put out here? This is why people join the inner circle.

2:09:03
All this stuff is in the inner circle, right? And all the trainings in the inner circle. All right, it is one o’clock. I’ve got five more minutes. I’m gonna answer two more questions. Okay, can heading size in my bricks template be manipulated via dropdown? Heading size in my bricks template be manipulated via dropdown custom field, custom field. I don’t know why you would ever wanna do that because your custom field maps, is your custom field mapping to different locations in the template?

2:09:41
Because if it only maps to one location in the template, you know what the heading size for that should be. This would only come into play if this custom, I don’t even know how that would work. I would need to see an example. Sometimes people ask me, can this be done? And like, yeah, it could probably be done. Well, I don’t even know. You would need JavaScript in that situation. But even if it could be done, the question is, is it a good idea?

2:10:03
And a lot of times it’s not a good idea. Should you have a price? Oh, I can rattle off some quick ones. Should you have a price list for your services on your website? I would not recommend it, no. I advocate for putting the minimum on your website. So when somebody is filling out a lead form or whatever, just let them know, hey, our project minimum is $5,000. And then at least, you’re starting off with your bracketing on low-end clients There’s not there. They’re saying okay like I’m opting in right so at least you know they’re comfortable with five, so I just put a minimum If you put a price list they don’t know what they need right you’re like Everybody needs a different thing so Like what are they going to symbol their own?

2:10:44
SOW and try to come up with a price, no. And by the way, my prices, even though I have a price list which is available in the inner circle, I share the whole price list. It’s just references. It’s like that, then the price can go up and down based on various things on the fly, like depending on what a client needs versus, it’s just a starting point. So yeah, I’m just not, I’m not big on that.

2:11:07
Busy being in Bev’s back end. Hey, hey, hey, hey, Antoine, get out of the gutter, my friend, get out of the gutter nobody nobody wants to be a best back end in any in any scenario any scenario all right Gavin was somebody complaining about the length of my rants sorry it’s Okay. I wasn’t missing a period on my box because my box was an HTML element called my box. I was just targeting the element by itself. Hey, Kevin, can you demonstrate the difference between unchained classes and chain classes in the latest drop of ACSS?

2:11:54
I just did that before you got here, Tyree. You will have to rewind and see. Okay, okay, okay. All right. I’m looking for one more good question. You got some fingerprints on your hat. Might want to wipe that with a damn towel. Listen, I know. You know what this is? I wore this hat to my daughter’s softball game because I am also the coach of my daughter’s softball team.

2:12:18
This is softball dirt that you see on this hat. This is, see my hats are practical hats. They’re not just worn for fashion purposes. They are worn for utility. And so, and I’m not afraid to be like, you know what, I do coach my daughter’s softball team This is a dirty-ass hat, but that’s what we’re rocking and roll with on the stream So if it was fashion, then I would agree with you then I need to clean my hat But this hat’s gonna get dirty again In fact tonight and then tomorrow night and the next night and that’s just how life is as a softball coach Okay, let’s see here.

2:13:12
WP CodeBox 2 finally released. Absolutely, that is fantastic. Can you talk about HSL, RGBA, hex? Why do you use HSL? I currently use RGBA for transparency. Very good question. Another fantastic question. Okay, well, this is easily answered. This is not a long one. This is a very, very short.

2:13:32
Let’s go to CodePen. Okay. And let’s screen share. Got to screen share. All right, let’s go to pen. Here we are. All right, let’s just come down here. Let’s zoom in for you guys. I don’t even need to make any HTML. None of this matters. So we’re just going to go with my class. And we’ll go with backgrounds color. Okay, I’m going to put in an HSL string. Now let’s go with, let’s go with um let’s go with a Color picker. Let’s just go to a Google color picker and let’s just grab something nice Yes, let’s just do that. Okay. Here’s this HSL string right here. So I’m gonna pop this in 283 degrees 41% 60% I guess it would help if we could see something right? So let’s go. Oh, let me just explain what I did a second ago Here is my box if you’re not in PB 101 My box like this my I cannot type and look to the side at the same time All right, so we’re gonna go with my box Perfect. All right, and here’s my box. So we have to have a display set to it let’s just do flex and then let’s do a hmm let’s use logical properties shall we? So we can’t do width anymore you see this kind of stuff no no no that’s not how things go anymore. It’s called inline size. Okay we got to start stepping our game up all of us collectively have to start stepping our game up. I’m gonna go with 5 rim and then we have a block size, that’s height of five rim.

2:15:16
And then I’m gonna go ahead and save. And then let’s see, auto save enable, get out of my screen, my guy. Okay, background color probably needs a semi-colon on there. So display flex, inline size, five rim, block size. Did I, have I misspelled something here? My box, my box. I’m gonna put something in here just so we can see something on the screen, literally see something on the screen.

2:15:42
Okay. Okay, well, background color. Is it something wrong with this HSL string? What has happened? Oh, there was something wrong with it. Okay, HSL, is it because of the degrees that I pasted in? So let’s take out this 283. What is going on here? 41% is that not a real color? Background color, let’s go back and do.

2:16:02
2341% 60% should not be a problem. This should not be an issue. That is the wrong code pen. Alright 283, let’s get rid of these. You don’t even need the commas anymore in HSL strings. Why is this breaking to a second line? So if I see anything invalid with this HSL string That I’m not witnessing here I’m wait. I’ve got to wait the 10-second prison sentence to get an actual response in the chat. I do need an ACSS hat. You’re 100% correct.

2:16:54
I need a ACSS hat, I need a frames hat. A bricks builder hat would be nice, I don’t know. Okay, because nobody spot the problem here. It literally works. Oh, why did all this duplicate? Oh my God, what is going on here? Get rid of all of that. There it is. My God, dude, what? Is it when I pasted?

2:17:24
I didn’t see all that before. Okay, we’re good. So here’s this. So here’s your HSL string. By the way, like I was saying, you can use commas, you can not use commas. It’s very liberal now. You don’t have to do a lot so here’s your HSL string and by the way if you want to do a transparency now you can do a forward slash and then like 0.5 is going to give you 50% transparency of this here’s why we don’t use now let me get the same color in RGB now that we’re actually rocking and rolling here so I’m going to go background color RGB you also don’t need the HSLA anymore you just need HSL all right let’s put this in okay there you go see this instruction will override this instruction now I want to make that color let me get rid of this right here so they both have the exact same output I want to make this color slightly less saturation.

2:18:28
So I want to drop the saturation and I want to create a lighter version of it for a new shade. Okay. All right. So let’s see how we can do this. Let’s see. I want to make it even fancier. Let’s go var BG. Okay, let’s just make this a little fancier than it currently is. Let’s come up here and do root. Okay, and let’s do bg. Okay, so that’s my rgb string.

2:19:00
Perfect. All right, and you see we have our color back. All right, so there’s var bg. Now I’m going to override that there. So this is a locally scoped variable. This is the difference, just real quick on it. This is a globally scoped variable. This is a locally scoped variable. So you have your globally scoped variables, which you can then override with locally scoped variables. And so now what we’re going to do is put in our HSL here again. And I want to see if this copy paste Screws it up or doesn’t screw it up this time It is it’s it’s the with copying and pasting Okay, it doesn’t like that little degree indicator I you used to be able to use that I think but maybe maybe I’m pacing some weird symbol Okay. So now let’s go back to what we were trying to accomplish. I want to change the saturation of this and I want to Change the lightness of it. What are you going to do to this function right here to make that happen? Which one of these numbers drops the saturation?

2:20:13
Which one of these numbers changes the lightness of this color? For that matter, which one of these numbers you know changes the hue to something that you you know might be able to visualize. None, you’re gone here. Nothing, nothing here works. You can’t, you can’t just change this number on the fly. But watch this. Do I want to cut the opacity in half? I just cut, I’m sorry, the saturation? Just cut the saturation in half. Do I want to increase the lightness?

2:20:42
Look at this. I just increased the lightness. Now, I can even do this. Where were we? 41, 60, somewhere along that line. All right. I can even do this. I wanna drop the, I wanna take this color exactly as it is, and I want to cut the saturation in half.

2:21:01
Times 0.5, thank you. Type, type, type. Okay. There it is So no matter and then by the way This is how partials work in automatic CSS, right? So let’s call this base Let’s call this Base, let’s get rid of this Okay, so now we have our base color. We’re referencing our base color now I can do something like base light, right?

2:21:41
And I can actually give, well, let’s do this. Let’s do base H, and then we’re gonna put in 283, bam, just like this. And let’s do base S, and I’m gonna put in our saturation, which was 41%. And then I’m gonna do my gosh with the keyboard today base L and I’m gonna put in 60% Okay, so these are partials right? They represent the H value the S value the L value So now I’m just going to come replace these in the string So this is base H and I’m doing this for anybody who uses automatic CSS You can learn you don’t have to make the variables, but it helps to know how to use the variables. So here’s your base h.

2:22:27
Here’s your base s. And then here’s your base l. And we’re going to get the exact same outcome. But now I have a lot of additional power at my fingertips. So let’s say I want to create a version of this where, and I could actually put this string in there now. OK. Var base, var base, all good. Okay, so now let’s say I want to drop the saturation on a color here.

2:22:59
Actually, I want to get that back. Would be good to have this back. I don’t want to make it too complicated. Okay, so I can do an HSL string here for our background color. And I can basically use exactly what I’m doing with the partials up here. So base H, hue, var, base S, and base L.

2:23:23
Okay? Now I just take this and I say, in this situation, in this my box, is always gonna be a desaturated version of this base color. So I’m gonna immediately go calc, and you can calc with your variables Okay So take base s and multiply by 0.5 or divide by 2 or whatever you want to do and that’s going to desaturate this But now what happens if I come up here and change my base color?

2:23:52
So let’s just say our hue is changing to 385 It updates my base color, but keeps the the desaturated effect on this box right here. Because that desaturation is happening based off of my variable. So my whole color changed, but my desaturation effect did not. If you don’t know this about colors, every color that you choose is going to have a different saturation value. So putting a raw saturation value in here is not the way to go.

2:24:24
You can’t say, let’s assume that the saturation value was 75% on this particular color Okay, so we had base H at 75% and you were like, all right I want to I want to drop that to 50% Okay, so you drop it to 50% with a raw value the minute you change your color this 50% may be more vibrant More saturated in that new color and but you wanted a desaturated effect. So this raw value is a no go. You can’t be doing that. You have to calc it with a reference to your saturation value, which is base S, and then cut the saturation down from there.

2:25:04
And now it doesn’t matter what you change your colors to. And this actually should not be, well, you see the RGB string up here. I’m going to leave that there for you. You wouldn’t actually have this. We can comment it out. Okay. So now I can change this to whatever I want. Two 85 still desaturated one 85 still desaturated. Okay.

2:25:23
So it gives you an unbreakable situation with your colors, but you look. I’ll just ask the same question. What are you going to do to this RGB string to make these things happen? None of these things make any human readable sense. So RGB are only good if you’re using a generator to generate RGB strings that you’re just going to copy and paste. But you can’t do any of this sort of management or manipulation of colors or calcs on this kind of, you just can’t, you can’t do that with RGB.

2:25:53
Now, HSL has a few little, if you really get deep into HSL, it has a few little color limitations, okay? And HSLs don’t always compute to the same hex values, which is weird. Sometimes the exact same HSL string will compute to two different hex values. So there’s some weird stuff going on with HSL, but in the practical world, and if you go to like, you know, Kevin Powell uses HSL, for example.

2:26:21
In the practical world, it does not matter one single bit RGB. Nobody can tell what the human eye, let’s say. No client is going to come in and be like, I think you’re using HSL string. You know, and they’re just pointing out some minuscule difference in their brand color. It’s not detectable by the human eye. So it’s not a practical problem whatsoever. But in terms of color management, it opens the door amount of manipulation on the fly color generation. It’s just way better than RGB, way better than RGB. And then of course, there’s some other color systems as well. But HSL is yeah, Diego said you can use the degree but oh, yeah.

2:27:02
Okay, so you can use D EG instead of the actual symbol. I never use either one. So yeah, that’s good to know But yeah, all right. So hopefully that answers your HSL question And then by the way, if you’re trying to use these eight custom HTML elements watch this so if this was a div Well, I’ll just show you in a second. Let me delete this that box is going to disappear But if this was a div That box would not disappear so if you’re using custom HTML elements, a div does have a display of block by default.

2:27:44
It has a display. It usually needs some sort of display property, right, to get a box to show up on the page. A custom element does not have a default display. Thus, you will not see it. So you must give your custom element. Let me go to my, just to prove this, there’s my box right there. Because it has no display set, you will not see anything. You have to explicitly display it.

2:28:12
You can do a flex, block, doesn’t really matter because I’ve put a fixed width on it. Display flex obviously gives you gap and a bunch of other stuff. So if you’re trying to, if you’re, I’ve had people create custom elements before and they’re like, it won’t show up. I’m like, well, you have to have a display property on it. Okay, I think that’s it for today. We got to call it, I got a bunch of stuff to do.

2:28:36
Thank you everybody for tuning in. Hope you got good, valuable answers on the agency and business side of things today. Some of those questions were really, really, really good. Really common scenarios that people run into and struggle with. And that’s that tomorrow PB 101 lesson 11 comes out all about specificity the cascade breakpoints and responsive design and then remember I will not be here next week on Wednesday Tuesday and Thursday I’m banking PB 101 episodes for next week and then I’ll be back hopefully the following week I’ll have my stuff up and running again and I’ll be back with you so peace guys see I’ll be back with you. So peace guys. See you soon. Cheers