WDD LIVE 048: Two Web Design Critiques + Q&A

1
0:00:00
Hey, what’s up everybody? All right, see who we got in the house. Say hi when you arrive or if you’re already here. We were not here last week. I was on vacation. I was traveling, couldn’t make it. So let me know if audio is working, video, all that good stuff. Had to get the dust off everything, you know, before we get started again. Alexander in the house, Jeff in the house,

1
0:00:32
fuzzy, fussy, fussy, fussy. Sounds like a new person. Paul Messner is here. Welcome. Marcel, Manny, Cease. D123 in the house. Steve, Derek, good to see you. Mike, Daniel, Steven, Justin, David, digital algorithms. What is this? UI design, okay, nice, okay. Whose first time is it? Mark, good to see you. Ruben, good to see you.

3
0:01:01
Whose first time is it?

1
0:01:02
Is it anybody’s first time here at WDD Live? All right, Rob says first time live, new Inner Circle member, welcome Rob.

6
0:01:12
Suzanne in the house. All right, good to see everybody.

1
0:01:16
All right, so just to kick things off again, because we were out last week, and we always tend to have some new faces. Erica says she is brand new, so welcome Erica. Here’s what we’re doing here at WDD Live. It stands for Web Design for Dummies, not for dummies, for dummies, because we look at the DOM,

1
0:01:41
which is like the underlying code. And we look at everything that makes a website successful. So top down, looking at copy, looking at general design, obviously, looking at user experience, looking at offer, looking at conversion rate optimization, looking at SEO, looking at everything, everything that makes a website successful,

1
0:02:04
that’s what we look at, that’s what we scrutinize. And in doing that, the people whose websites we critique get a ton of value, obviously, but everybody watching also gets to learn what makes a website successful or unsuccessful. And if you are an agency or a freelancer, which most people here are, you’re able to take that information, that knowledge, those insights immediately

1
0:02:30
back to your own client projects and make your own work better and make results better for your clients as well. So a lot, a lot, a lot of people tune into these WDD lives because they want to get that value, they want to get that understanding so they can take that back to their client projects, but that’s not all we do here. That’s not all we do here. From time to time, we will be doing interviews. From time to time, we will be ranting and raving.

1
0:02:57
From time to time, we will be doing little mini tutorials, maybe some live builds. It’s like the web design variety show. You can kind of think of it like that. But again, always focused on best practices and accessibility and things like that as much as possible. We got a super chat from Reuben. He’s probably saying something about Breakdance. Oh, he is, look at that.

1
0:03:21
ACSS is now in Breakdance, he loves it. Yes, that is true. Automatic CSS 2.8 is out, is live. It’s great. And 3.0 is right around the corner. We’ve been playing with 3.0 again today. I’ve got some more work to do on it, but it is getting very, very, very close. Okay. Jamie Lynn says, hey, joining from my spin bike. Fantastic. Getting that exercise

1
0:03:54
while we, Kevin, can you explain the DOM, explain DOM, right? Just go Google it and read about it. It stands for document object model. But it’s the best way to explain it to a beginner is like when you hit inspect on a page and it brings up the actual HTML and CSS and such, that is what you are looking at. Okay, which by the way is a skill in itself. I would say when we work on automatic CSS and even in the inner circle people trying to get help with their sites the reason they’re asking for help 85% of the time is because they don’t really know how to inspect the page they don’t know how to go look at the HTML and CSS and figure out what’s wrong with it and really that’s all people are doing when they

1
0:04:50
help you investigate when you say hey my this thing’s broken on my page, why isn’t it working? Everybody is immediately gonna go to the DOM. They’re immediately gonna go look at the HTML and the CSS and try to decipher what’s happening. And so the person asking the question usually can do that on their own, but they’re asking because they’re not able to.

1
0:05:11
And that’s another thing that you will probably learn and pick up in Web Design for Dummies, because we often do inspect the page, and I will show you various things, and how to fix them, and how to diagnose them, and so on and so forth. But it’s probably one of the best skills

1
0:05:27
that you can have, is to work with the inspector a lot, and learn how to inspect what’s going on with a given site. And if there’s something you like on a website that you’re like, hey, how did they accomplish that? You should be able to inspect that and See what they did and then replicate that Really really really good skill to have Justin says I asked for help when I finished banging my head against the wall for 24 hours trying every known way I can to

1
0:05:53
Fix something and I’ve lost the will to go on am I doing it wrong? No, that’s actually that’s actually the best way to do it. That’s it. That’s a great time now. I wouldn’t say 24 hours That’s a lot. That’s very expensive. That’s a very expensive bug right time is money so I would bang your head against the wall for 30 to 60 minutes and If you haven’t figured it out after 30 to 60 minutes, then it’s fine to ask for help, right? What you don’t want to do is you don’t want to implement something and then it’s broken and you’re like, okay, I just go ask people like at least at least give it a college try, you know, like it could even be a a drunk college try, but give it a college try to inspect the page and try to figure out what’s going on before you ask other people to step in and and help

1
0:06:43
you. All right, we got the Hunzi in the house. Thomas, good to see everybody. Numbers are up over 100 already. That’s fantastic. You know, I’m sure more people will join as the algorithm spreads us out here. We’re known to break 200 at times. Of course, by the end of the year, with any luck, we’ll be breaking 350, 400, 500, who knows, who knows. We’ve been growing steadily and the more variety we add to WDD Live,

1
0:07:14
I think that helps the situation as well. You know, the in-depth critiques are fantastic, right? But, you know, week after week after week after week, it does get a little bit tedious. So I like to break it up. I like to add that little bit of variety in and see what we can do. The other thing you need to know

1
0:07:32
about this week announcements before we get started and dive into this first critique, we have ACSS live stream. I’m looking, I’m trying to fit it in, okay? I don’t know, like, the weeks are getting a little bit crazy. And softball is starting. Practice starts this week as well.

1
0:07:49
So that’s, that already, that eats up a lot of my time. I’m trying to fit in ACSS live at some point this week. Maybe, maybe Friday morning. We’re just gonna maybe do an off, like a day we don’t normally do, just to fit it in. Because I know there’s a lot of people clamoring for like, show me how these 2.8 features work, and they have questions about them.

1
0:08:14
So maybe let’s plan Friday morning for an ACSS live stream going over all of the new 2.8 features. And then I think that’s all we have for announcements. We do have an inner circle. I believe it’s next. No, it’s this week.

3
0:08:29
It’s this week.

1
0:08:29
Let me get the actual date. If you are an inner circle member, we are doing office hours on Thursday and we’re doing it at 8 PM Eastern office hours is your opportunity to come in. It is a live stream just like this, but it’s private to the inner circle and it is 100% focused on just like business and pricing and all of the stuff that makes an agency successful. And of course, inner circle is 95% agency owners and freelancers. And so it’s all about doing business better, getting leads, closing deals, pricing, strategy, marketing, all that stuff. Okay, anything related to agency.

1
0:09:16
So that’s Thursday evening at 8 p.m. Eastern. Okay, that’s all I have for announcements. Let’s go ahead and pull up our first website. Let’s share this screen here. And we will bring, which one do we wanna do first? Let’s do this one first.

3
0:09:30
Okay, first thing we do is a no scroll test,

1
0:09:34
which means we can’t scroll around we have to see if we’re able to figure out what’s going on on this website just by looking at what’s in the hero and the header and things like that everybody can see are we good I’m looking at the stream it looks good so I’m gonna assume we are ready to rock and roll first thing I’ll say right off the bat this is just a little mini rant These notices guys have destroyed the internet. I just, I hate them man. I have, it’s like every site I go to,

1
0:10:08
it’s like I gotta accept this policy and accept that policy and close this pop up. And it’s like can I just get to the website that I’m trying to get to? They, yeah, GDPR has destroyed the internet browsing experience. So yeah, I get it, you know, some of these sites have to try to comply, but it’s a terrible user experience.

1
0:10:33
Okay, FarmDroid. Automate your agriculture. With the world’s number one selling autonomous seeding and weeding robot. Get a quote, buy now. More than 400 customers worldwide seeding and weeding with 8 millimeter precision. Payback period as low as two years. Okay. All right.

1
0:10:54
So, well, and I see a photo of it. And I don’t know what that thing does. It looks mean. It looks aggressive. It looks like it gets the job done, whatever that job may be. I don’t know exactly what it is, though. So what I would say is, let’s see, seeding and weeding. Okay so it’s seeds and weeds and seeds and weeds. Does it actually go in and I’m not a farmer okay I’m a city boy so I

1
0:11:23
don’t know a lot about this type of thing. You know this is an area where now I need to go see how it actually works to know what we can say better in the hero section but what I do know is the hero section doesn’t have enough details. So on a no scroll test we’re still a little lost, right? I just I don’t know exactly what it’s supposed to say yet but I know it’s supposed to say more than it currently says. Let’s put it that way. Automate your agriculture is a it’s a nice bold headline. I’m not I’m not sold on the italics here. I think this would probably be better without italics. I get that it’s kind of matching the logo up here.

1
0:12:06
Maybe that’s what they were going for. I’m not sure the logo should be italicized either while we’re at it. I’m not sure any of this stuff should be italicized. What do you guys, this is where I go to, I should have mentioned this in the beginning. WDD Live is interactive, so you’re able to give your thoughts and opinions as I give my thoughts and opinions, and then the person whose site this is gets everybody’s thoughts and opinions.

1
0:12:30
What do you guys think about the italicized copy? It’s just, I don’t like when everything is leaning. It feels a little off-putting to me. I think it would be much cleaner and more modern if it was just normal, bold text. Yeah, good comments. We’re going to address some of these things in just a second like the social links and the header and stuff like that. Okay. Mmm. Yeah, against the italics, against italics, against italics.

1
0:13:02
It misses the exact problem that gets solved. Right, correct, correct. It’s what we call burying the lead, which we talk about a lot. Okay, so the kind of the lead, the like important part of all of this is buried in tiny text in feature number two, right? This check mark list number two. So this is the first time that it actually mentions what the thing does, seeding and weeding.

1
0:13:35
But again, if you’re not paying close attention and you don’t read every single word in this hero section, it’s very easy to miss that. The next thing I want to say that I picked up on immediately and this is a good example, let’s zoom in here, it’s not a good idea to give people a detail that they have no context of. So when you tell me that this seeds and weeds with eight millimeter precision, I mean, thankfully, the word precision is there, because that at least lets me know 8 millimeters, I guess, is good. But I have no reference point. I mean, what’s the competition do? What is hand farming do? I don’t know. What are we even

1
0:14:16
measuring? I don’t even know what the 8 millimeter is about. And I don’t know if 8 millimeters is good. I mean, what if the competition is all 4 millimeters, and that’s better. That’s twice as good, right? What, I don’t know, I don’t have any context here, right? So this is like inside baseball terminology. It’s like the person would have to know exactly what they’re looking at already in order for this copy to mean anything to them. And people say, well, yeah, I mean, yeah, you’re not my target market because you’re

1
0:14:47
not a farmer. But here’s the thing about good copy. Good copy is understandable by everybody. Good copy, that’s just what makes good copy good copy. So inside baseball copy, or it’s all technical terms and it’s all like, you got to be the utmost of the utmost in the farmer world to even start to even care about our product. No, no, that’s not how it should work. Good copy is like even a brand new farmer should be able to come in here and read this

1
0:15:14
and understand exactly what’s going on. And you can measure that by, there’s somebody not even in farming. Can they make sense of what’s going on here? And if they can, then you’re doing a really, really, really good job. Now, of course, there’s a sliding scale. It’s like, there’s a bunch of gray area in there

1
0:15:31
for how you would actually grade that sort of thing. But that’s the goal. The goal is almost like, I want somebody who’s not even in this industry to understand my copy. Okay, so at least get the gist of it. But like, eight millimeter precision is like, measured according to what and relative to what,

1
0:15:47
you know, it’s a data point that I can’t do anything with, and that I think a lot of people can’t do anything with. Okay, and we bury the lead, because that’s the thing, that’s the action this thing does, but it’s it’s the smallest text and it’s in a list with other things That should be the main point right can we put seating and weeding right here? That’d be a better thing to do right let’s put well. Oh, I’m sorry it does it says it right there autonomous seating and weeding Robot okay, I don’t know I guess I just skimmed over that Okay, it’s there. That’s fine

1
0:16:22
one thing I don’t like about this is reading this is a requirement to read both of these. Ok, so here’s what I’m saying. Automate your agriculture with the world’s number one. This is like one sentence where part of the sentence was extracted to be a heading and the rest of it was just left to be a normal sentence. That’s typically not how I like to see these headline lead paragraph pairs go because it’s disjointed for the user. You want your headings to be readable independently and

1
0:17:00
scannable. Okay so like if I’m a scanner kind of visitor I can go scan, scan, scan, scan and then if I like what I’m scanning here’s how scanner visitors work if they like what they what they’re hearing when they’re scanning they go back and read the rest but they’re scanning is kind of like do I care do I care is this saying the right things because they don’t want to invest all the time and reading all the copy so they scan the headings and if the head if the headings intrigue them they come back and read the rest and really digest what the page is saying but if you don’t get them with the headings, guess what? They gone, they’re leaving, they’re out of there,

1
0:17:42
they’re onto the next site, okay? And so we have to look at scannability and headings, and then with the lead paragraphs, we wanna use the lead paragraphs to say the next most important thing. But in this situation right here, you’re actually saying the same sentence with both things and it just visually has been broken into two,

1
0:18:06
which is kind of a waste of an opportunity, but it’s also a disjointed experience because if I want to scan this part right here, this sentence is not even a sentence, it’s a fragment that doesn’t make any sense unless I read this first, right? So it almost depends on what I’m trying to scan. And then, you know, we’re missing some punctuation.

1
0:18:26
And then that this doesn’t actually make sense for this to be capitalized because it’s a fragment of this up here. But visually, like in grammar world, it’s telling me this is the beginning of a sentence. So when I started to read it, I’m like, with the world’s number one selling autonomous seeding and weeding robot, like, what’s next? What can we do with it?

14
0:18:45
Right.

1
0:18:46
Which maybe it’s the disjointed nature of all this is why I even missed what the damn thing does in the first place. So I would say this situation needs to be reworked right here in terms of our copy. And then let’s just go ahead and check scannability of the headings. So partners and customers,

1
0:19:04
which I will tell you, on a product like this, I actually don’t care at all. Like put this at the bottom. This is not the next most important thing that I need to see for sure. You know, like, cause you’re introducing a whole new product concept here

1
0:19:23
that’s not like super standard. I think this is probably kind of new to the industry. I don’t know. I need to know features. I need to know selling points. I need to know like pain points that you’re solving. I need more value. I don’t care about partners and customers right now. I’ll care about partners and customers once I realize like, oh, this is a really interesting

1
0:19:48
idea that seems to solve a really important pain point. By the way, does anybody else use this? That’s when you introduce partners and customers. Now I’m starting to care who else might use this. But I’m still trying to figure this thing out. I don’t care who else uses it right now. That can come later. There’s more important things that need to take up this real estate right here. Okay, you know when it’s good to go partners and customers social proof right off the bat?

1
0:20:16
It’s when the product or service is already obvious and there’s a lot of other competitors and you’re like, hey, yeah, you already know there’s a lot of companies doing this right? But look who uses our thing. Like that that can be a good lead-off in a category like that. But I think with this kind of product you’re wasting real estate here that’s very valuable for other more important purposes. So if I’m scanning I see a product farm droid FD-20 doesn’t mean anything to me from a scanner perspective. Set up seed, weed, enjoy, okay. Little bit of value in

1
0:20:54
the scannability here. FarmDroid, again just the name of the product, brand, whatever doesn’t give me any value here. But I might start scanning these. Autonomous seeding and weeding, okay. That’s interesting. High precision seeding, that’s interesting. Minimal soil compaction, seed and weed 50 different crops, service and support on its own, scannability very low that doesn’t give me any value. So this one I would say to reword, okay, renewable energy that could be reworded make that sound more exciting, okay, high precision plant protection I would reword that, up to 24 hours daily operation, okay, that’s enticing.

1
0:21:40
Quick payback period, okay, that’s enticing. Tried, tested, and proven, okay. So these are good, right? These, this, the scannability of this section is relatively good. Somebody can come down here, as you see, when we’re just scanning, and get a better glimpse of features, benefits,

1
0:21:56
things like that, okay? Now, these are things that would make you want to read the rest of this text right here. This is a no-no, I would say. So this is a hover interaction on a non-clickable element. This is confusing to beginner visitors. It’s going to make them think that they can click on this and they just can’t. There’s just no reason really.

1
0:22:22
It’s like, I’m being cute. It’s really distracting more than anything. So I would say just stay nice and simple with this. We don’t need the hover effects, get rid of those. All right, let’s come down.

3
0:22:34
Scanning, we are ready to help.

1
0:22:36
Not exciting, not enticing, not nothing, okay? Rework this heading right here. Specifications, doesn’t do much for me. Hear it from our customers, okay? I at least know testimonials are going to be in that. Hey, award-winning field robot. Why? Hold on. Why are we 80 miles down the page before we, we tell anybody that this thing just won an award? I mean, it won the innovation awards for 2021. It won, it’s looks like it’s won multiple awards. I don’t know if these awards actually mean

1
0:23:12
mean anything but I mean wow you like if you win awards in a category you probably want to tell the person that that has happened before they get to mile marker 80 on your on your page so once again we’ve kind of buried a lead buried a selling point buried a point of interest way down the page I move this this this copy goes way up here somewhere okay like what like how about up here in the hero? All right, let’s keep going. Got our latest news, our blog. Okay, we’ll take a look at that stuff.

1
0:23:47
Let’s go back up to the header and see what’s going on with our general navigation here. So we have two products, FarmDroid FD20 and then the add-ons for FD20.

6
0:23:58
That’s interesting.

1
0:23:58
Let me, let’s go here for a second. I want to see if the add-ons are on this page. Specifications. I will say that this, and look at this on a big monitor guys. Sorry, I just randomly talk about things as I encounter them. This is a tremendous waste of real estate. And I get it if you want a big video, cool, that’s all fine and dandy, but this thumbnail is not getting the job done.

1
0:24:30
This is just a giant black hole. Like, I don’t even know what this thing that we’re looking at back here is. So the question is, does this entice me to click the play button? And I think the answer for almost everybody would be no. Like, you’re not making me care about watching this video. So that is something that can be immediately improved.

1
0:24:55
What our customers say, okay, what’s in it for you, okay. Images, images, images, okay, okay. I’m just looking for add-ons right now. And did not find them. So that’s what I was worried about immediately when I saw this in two different pages. What is this? Download our, oh, there’s a brochure

1
0:25:17
that we have to download, okay. Is there a reason why the add-ons are not, you know, in a grid or something, like available to see on the website? I would improve that as quickly as possible. And then what you ideally wanna do is you don’t wanna make somebody navigate from the product page to an add-on section

1
0:25:39
that’s somewhere else. You wanna just have, like, I don’t even think this products drop-down needs to be here, honestly. This should say FarmDroid FD20 right here. And I just click on FarmDroid FD20, clearly that’s the product. And really, I mean damn, do we even need a page

1
0:25:56
for FarmDroid FD20? We go back to the homepage now. Why isn’t this page is all about farm droid FD20? When you have another product, then it’s time to re-work and restructure some things. Unless it’s a situation where, no, our other products like right around the corner, like we need this kind of thing going on here. But my experience with these kind of companies is they have this like flagship product and that’s their thing.

1
0:26:21
For until they get traction and momentum and, you know, finance like a good customer base, revenue, they’re not just gonna be pumping out more products, right? You’ve got the one product and it’s got add-ons, okay? The whole homepage should just be selling this product right here. I don’t think there’s a need to have a products drop down with separate pages for this stuff. More seamless experience, I think,

1
0:26:44
just having all this done on the homepage is best. We have customer stories. I would swap these two. How it works, next most important thing. Before I go read about your customers, I need to know how this thing works. So I’d move this how it works over to be the next most important thing in the navigation.

1
0:27:06
Then customer stories is fine, next. Then resources is good. Then contact and get started, okay? Let’s look up here. We have news, blog, the team, our story, career. I’d say careers, probably. Immediately get rid of all of this. This is one of the number one no-no’s in web design

1
0:27:29
is no social links in the header. Hell, I almost never, I don’t hardly want social links on the site at all. Unless, unless, here’s where I put, you know where I put social links? You know where I hide them? You know where’s a great place to put them? Now, there’s a caveat to this, there’s a gray area, okay? If the brand is absolutely crushing it on social,

1
0:27:55
then you want the social links there. Not in the header, but in the footer for sure, okay? Because it doesn’t hurt to drive traffic away from the website to the social satellites, okay? Because they’re crushing it. You go off to a social account that’s crushing it, and you might be more inclined to buy the product. But that’s few and far between, guys.

1
0:28:20
Most brands are not crushing it on social, especially small business brands like this. Their social media accounts, I mean, kiss that visitor goodbye, okay? Like, they’re not coming back. So you don’t want to send them there, until they’ve already done the thing that you want them to do.

1
0:28:38
So if we had a lead magnet, for example, they opt in for the lead magnet, now I’m on a thank you page, that’s where I’m gonna tell them to go follow us on social. And I’m gonna use our website to start to flow people to the social media channels to boost those numbers and that engagement But I’m only doing that after they’ve already converted on the website Ain’t no way in hell. I’m sending great. I Everything is about the website. It’s how do we get people to the website? So when they arrive don’t immediately ship them away

1
0:29:08
Like we’re not doing the job. The job of the website is to convert them, not to get them to social media channels. So absolutely not in the header. You can put them in the footer if your social media channels are valuable. If the social media channels are legit black holes, don’t even put them on the website.

1
0:29:29
And tell your client, because your client’s going to be like, we need our social media. And I’m like, not until you stop fucking it up. Like, you got to do something relevant on your social media channels because we’re not just in the business of killing traffic here.

1
0:29:44
So that’s where you gotta break it to your client like you guys aren’t doing anything with your social media channels so we shouldn’t send anybody there. And then you can sell them a social media strategy and you can make more money. So and you can help them out because ideally they would be doing something relevant

1
0:30:01
on social media. So, but that’s up to you. Don’t just do what the client tells you to do. Like you are an advisor, you are a consultant, and you need to advise them and step in and say, sorry, your social channels are just not good, my friend. We need to improve that before we send people there. And they’ll appreciate that over time,

1
0:30:19
that you are not just a pixel pusher, that you are somebody that actually knows how to improve their business and their marketing. All right, before we move on to more pages and such, let’s go ahead and let’s look at the chat and see what people are saying here. Okay, my eyes, the low contrast, low contrast. I don’t see a lot of low contrast stuff going on.

1
0:30:44
I don’t know. I don’t see any obvious like contrast issues. I mean this logo, for sure this logo right here, looks like a little, a little gnat trying to come after me during my live stream. Not anymore he’s not.

6
0:30:59
Okay.

1
0:31:00
Yeah, I’m not, I’m not really seeing a bunch of contrast issues. It’s very hard to read. Which part are you talking about that’s hard to read? And why is it hard to read? Dude, there he is again.

6
0:31:14
Got him. He done.

1
0:31:16
Okay. This would be a video opportunity.

3
0:31:20
Yes.

9
0:31:21
Okay.

1
0:31:22
We’ll get to that in just a minute. That this is absolutely. Okay. Hero needs a looping video of it in action. Okay. Okay, I’m just going down, just reading some chat stuff here. May just be me, but I read the logo as Farm Druid.

3
0:31:43
Okay.

1
0:31:44
Yeah, maybe, maybe. Because that is kind of a you, you know. But that’s a power button, right?

6
0:31:51
You get it?

1
0:31:52
That’s a power button with the leaves coming off the top. Yeah. the top. Yeah, I just I just don’t like the fact that it’s more than anything. I don’t like the fact that it’s italicized. It just everything is like leaning. I just my OCD just wants to keep fixing it. I’m like, why are you? Why are you falling over dog like stand up straight? It’s some good posture. italics feel windy. Yes, that’s a that’s a good way

1
0:32:21
to describe it. White on light green is hard to read. I don’t know. I guess my eyes are fine. I don’t know. I don’t these aren’t I mean we could do a contrast check. I guess I don’t have my wave stuff installed and I don’t think I have polypane anymore on here Or we could test it Okay, font family is not very appealing and the uppercase is not helping. I do agree. What is this called? I see this font all the time and the name is escaping my mind. I was trying to,

1
0:32:54
I’m gonna inspect it in just a second, but I was trying to think of the name. It’s escaping my brain right now. It’s a very common Google font. Let’s go into Poppins, that’s it. Yep, Poppins. Yeah, I’m not a fan of Poppins. It’s super

1
0:33:14
Bulky it feels bulky and bubbly like really bulky and bubbly and then but also kind of janky in places I’m not a huge fan of Poppins Okay, does the does the thing balance on two wheels a really good question You know if we did have a video of it in action, which I think is on this page. If we go to the product, that’s probably what that really boring giant video was.

3
0:33:43
Let’s watch.

1
0:33:44
Hold on, let me switch the audio. Introducing the farm droid FT 20.

5
0:33:48
I don’t know if it’s letting me switch the audio.

1
0:33:50
Usually it lets me switch the audio, but it doesn’t appear to

13
0:33:53
be okay.

1
0:33:54
Well, you guys can’t hear it, but you can see it in action.

5
0:34:07
Connected to a battery bank, the FD20 is capable of up to 24 hours of CO2 neutral operation without any external charging. With its geo-coordinate seating system, the FD20…

1
0:34:21
Okay, so I’ll just tell you what it’s like a really first of all the video itself like the videography is really well done but the voiceover super boring and super like I mean it’s like I don’t even know how to describe it it’s just literally a dude talking and it’s just super corporate-y kind of sounding and I mean go watch it for yourself it’s It’s almost like I’m watching a boring nature documentary. So I think maybe we can liven that up a little bit, but at least now, I mean, look at the size of that thing. Dude, would you?

1
0:34:59
That’s way bigger than I imagined when I first saw it in the heroes. I thought it was this little thing that does like, I don’t know, maybe a row at a time or something.

12
0:35:07
That thing’s huge. That thing is huge.

1
0:35:11
I don’t know, it’s hard because there’s not a lot to put it against with scale out here. That’s pretty big. That looks like a pretty big thing. Yeah, I knew that was a solar panel from the image earlier. I agree this should be, this should have been the hero. Get this thing a 100%, 100% get this thing a thumbnail that actually makes you want to click on it and put this in the hero we don’t need that graphic in the hero. This thing right that’s not cutting it that’s not cutting it put that video right there.

1
0:35:50
Major improvement right off the bat. Okay let’s go back in the chat is it me or is the copy text size super tiny? Copy text size super tiny. Let me zoom out. This is normal. This is probably like 18 pixels, 20 pixels, somewhere in there. I think, yeah, it’s 18. Poppins is a larger font to begin with.

1
0:36:13
This is too small right here. And this is automatic CSS. So you can just come in here and override this side. They probably haven’t, yeah, wow, text XS. And that’s computing to 14 pixels. I tend to have my minimum font of actual copy like 16 pixels. I would say that’s kind of what I try to make the minimum.

1
0:36:36
And then I’ll go smaller sometimes if it’s like an alert note, like no spam on a pop-up, or like no spam ever. Those little lines, like maybe a little smaller with those, but anything that’s important copy I don’t really want it to go below 16 pixels if I can help it So yeah, I think like oh down here, too. Yeah, all this stuff needs to be is this excess as well. Let’s see how

1
0:37:03
Why are these spans to these really should be paragraphs of text And I know this is frames, almost certainly in frames this is paragraphs. I don’t know why this was changed to span tags, but those absolutely need to be and they were changed to that XS text size and that needs to be at least S. So you can come in here and and make it a little bit bigger by by just choosing S there instead of XS. You also need some spacing here which I know there’s spacing in these frames. I don’t know why it was removed. There’s a gap in here,

1
0:37:41
and it would be your content gap, or half of your content gap, or something like that. So there’s a lot of things that were altered that really shouldn’t have been altered. Like having no spacing between the heading and text here is making this feel really cramped, especially when you have spacing here. Like you have spacing between this and this and then none here

1
0:38:04
The overlay thing needs to be sorted out I’m not I’m not a big fan of the little dots on this button here It made me feel like this was going to be some sort of fly out or drop down or something like Because that’s where you you see this with like menus, right? It’s not a great like Navigational and none of the other buttons have it. So I’m not sure why this button has it There’s a lot of little details that really I think we can clean up here

3
0:38:32
Okay

1
0:38:34
All right, let’s go back. I don’t even know what we were doing we were doing the navigation earlier We’re kind of getting lost in like there’s so much going on here that I think can be can be improved I also want to monitor the time. We don’t want to go too long. We’re almost, we’re actually almost to time on here. I think copy wise, there’s a lot of little UI adjustments that can be made for sure. Moving the video into the hero section here. Set up seed, weed, and enjoy.

1
0:39:04
I think these could definitely benefit from little blurbs underneath them to give a little additional context here. We’re almost out of time, so I’m just gonna run through like just as many little things as we can possibly hit on. Specifications, okay. See, it’s kind of weird, right? There’s like things specific to the product,

1
0:39:26
but this isn’t the product page. And there’s this kind of like competing for my attention. The homepage versus the product page are kind of serving the same purpose but there’s two of them. So this just goes back to like I get rid of the product page straight up put all the stuff on the homepage get the add-ons listed on the website. Ok what is this story let’s look at our story here

1
0:39:58
ok we have videos this is good this is fantastic. We need to see all this. There’s some spacing issues going on here that need to be cleaned up. This is very boring. Use content grid. Get some of this stuff featured, featured max. Get some block quotes going in here. Get some bold. Get some clean. This looks like it’s just a wall of text that nobody wants to read. So we just need some basic text formatting, maybe a little, some headings in here something to make this little bit more exciting impressions I don’t know what this is these feel like stock photos they may be not maybe they’re not but they feel like it I

1
0:40:40
don’t know what the heading impressions means at all I don’t know what’s going on here exactly maybe this is a gallery to go along with this story but it needs to be implemented a little bit better there’s also a gigantic gaping hole between this content and this content that can be cleaned up. We’re just going rapid fire now. We’re in the rapid fire phase of this website. Let’s go look at their articles.

1
0:41:02
Okay. Feels like some spacing issues to clean up a little bit here. If you’re gonna have a lead paragraph like this maybe go you know like text L on it and space it out a little bit better. Like let me see if I can just pop this in here. I don’t even know if we can do it. Is that there’s the P right there. Okay oh my god let me edit it please. Class equals then we can do text L and then oh his L is very large though. It seems like these these texts are not following a scale or

1
0:41:43
the scale is very aggressive. I don’t know. Then line height you know 0.65 somewhere in there. Let’s calc this then. Just hijacking this real quick. Text M times 1.1 just make it like or 2 just make it a little bit bigger and just kind of start to see how this maybe changes changes the flow and layout maybe it needs to get a little bit bigger I don’t it’s I’m being thrown off by the fact that there’s an 8 mile long link inside of here that would be another thing too this is definitely not the way to do like an anchor text right here. You’re linking to World Ag Expo.com, right? This is the anchor text right here. You’re linking to worldagexpo.com, right?

1
0:42:58
This is the anchor text of that link. This is the text that needs to be the link. This all being linked is not is not correct. And it’s throwing off like there’s too much stuff going on in this in this little paragraph right here. There’s three lines of linkage that’s green, then there’s these random bolds and then this is a lot. It’s a lot to ask of a paragraph, right, in terms of formatting. So I would tone that down a little bit. This is where the kids say, you’re doing too much. You’re doing too much.

1
0:43:28
Okay. That’s, you know, that’s what the kids say. So yeah, you’re doing too much here. Okay. I think we’re gonna, we’re gonna call this a wrap. I mean overall like It’s a it’s a very very good start To this site and you’ve got a lot of the really important stuff and good stuff here It just needs some it needs some massaging right it needs

1
0:43:53
We now need to go into the massage phase of this website But it’s also a great start. I think you’ve got a lot of stuff that you just heard from me and then a lot of stuff that people have put in the chat you can make dramatic improvements to what’s going on here and Then you could resubmit. You know I one thing I wanted to say is I Love it when you know what I often see is a link to a site after they’ve made all the adjustments to WDD, but I see it in the inner circle, or I see it in the automatic CSS group, and nobody else ever really gets to see it again, like on stream. So what I want to start encouraging people to do is once you’ve made all the adjustments, resubmit the site and we’ll look at it again, and then we can find even more things to take it to the next level, but you can also see

1
0:44:46
the evolution of a site based on feedback, which I think is very important to see. It’s part of the learning process and everything that we do here. So that’s what I’m gonna encourage you to do. I’m gonna encourage you to make the adjustments that we discussed here and then resubmit the site once they’re done, and then we’ll go from there. Okay, let’s go ahead and get back to chat for a second.

1
0:45:09
Yeah, we didn’t really talk about the process of getting started and all of this, but we ran out of time. It is what it is. I’ve been telling myself and reminding myself, we’re avoiding three-hour streams. We got to make sure that we hit everything and we don’t want to drag on too much on a single site. Just give that site as much value as we can and then we move on. Everybody said they can hear the video.

1
0:45:30
I don’t know how because it wasn’t coming through my mixer. At least the meters weren’t jumping and dancing.

6
0:45:35
So I don’t know.

1
0:45:36
And I can hear it out of my computer speakers. So that’s never a good thing. Did I miss your accessibility test? We don’t really do accessibility stuff until, this is I guess a good thing to remind people of. We do the biggest, most important things first. The things that are really gonna make or break the site, and then if those things are accounted for already,

1
0:46:08
that’s when we get deeper in. We go start looking at SEO. We go start looking at the DOM. We go start looking at accessibility. We go start looking at on-page SEO. But here’s the thing, if your copy’s not good, or things are presented in the wrong order, or the offer’s not clear,

1
0:46:26
or like stuff that’s really gonna break the website and the user experience and the conversions and all of that, we gotta hit on all that stuff first. Okay, nice, we got 100, we’re over 160 now, that’s fantastic, Ruben says 162 watching and only 51 likes, make sure you like the stream, good reminder here in the middle as we take a little break before we get to site number 2.

1
0:46:52
And we only do two sites max, then we’re going to go into Q&A and all this other good stuff. Okay, this is an example of how you shouldn’t create a website. You know, I wouldn’t say that. I think this is just a standard part of the process depending on somebody’s experience level and all of that. Like I said, it’s got a lot of great ingredients for success. It just needs some massaging. Entity name should always be the link text. Yeah, okay.

8
0:47:23
Good, good, good.

1
0:47:24
It’s Chad GPT, that’s why, probably. Okay. Good. Light counter is broken. I see only 24. It may only, like, when you refresh the page, you’ll see a refreshed like count perhaps. I don’t know if it updates live Okay, we’re on to the next one. Let’s get out of here. We’re gonna go immediately into site number two We’re not wasting any time here

1
0:47:50
This is a non-profit diaper bank covered with love Inc.org This is a staging site, this is not live. And let’s go ahead and do our no scroll test. So I’m going to start off by reading the big bold headline, the only non-profit diaper bank in the Wabash Valley. Don’t know where that is, sounds pretty dope, honestly.

1
0:48:19
Diapers are essential to a baby’s healthy development. Keeping infants and toddlers clean, dry and healthy is key to building a solid foundation for children to reach their full potential. Babies can’t care for themselves. We are here to help you care for your child by providing diapers at no charge for families in need or crisis. Okay. I’m going to think about that copy for a little bit.

1
0:48:42
I’m going to let that marinate. I’m going to let that marinate and we’ll come back to it. First thing I see off the bat that I’m, that’s, it’s like I wish it was better is the logo. The text in the logo is very small. Very, very, very small. And the further you get away from that it’s just I’m not sure that that is and it’s also feels a bit off-balance. The alignment of the text, it’s centered but then it’s very close to the heart and this logo needs some love. This logo needs some love for sure. About, very simple navigation, get

1
0:49:35
help, get involved, events, FAQ, blog, contact, no drop downs, got a CTA of please donate. Okay, we’ll come back to this. Get diapers is our main CTA. That’s interesting, we’ve got please donate up here and we’ve got get diapers. Not sold on that decision. Presumably your main objective is to get diapers in the hands of people who need them. So to me, get diapers is the primary CTA. Primary CTA goes right here. Get diapers, get diapers here. Help others is good.

1
0:50:20
I wouldn’t say help others though. Let’s go, let’s click on this and see what actually we are signing up for. Get involved to reduce diaper need. You recognize the issues of need, okay. Getting involved, okay. This is Frames, by the way. I can tell. Some sites you can’t tell, some sites you can tell.

1
0:50:39
This is one of those sites I can tell. Okay, there’s ways to help. So you can fund the mission, you can volunteer locally, you can donate items.

3
0:50:49
Okay.

1
0:50:50
Help others, please donate. There’s too many, I think there’s too many different anchor text things going on here, right? I think there’s two actions you want people to take. It’s get diapers or get involved. Like get diapers or get involved. Because there’s multiple ways to get involved. Like donating is one way to get involved.

1
0:51:17
And then you’re like, helping others is like, if you get involved, you’re gonna help others. So I don’t know that that’s the best anchor text. I think we really just should provide two different options to people. It’s get diapers or get involved. Now maybe you wanna choose something better than get involved, that’s fine, whatever.

1
0:51:35
But use that text over and over and over and over. So people just are, you’re training people to know there’s two things you can do on this website. You can either get diapers or you can get involved. That’s it. And that simplifies everything tremendously.

3
0:51:52
Let me get my chat caught up here.

1
0:51:54
Okay, there we go. All right, let’s keep going down. Diaper need can result in many challenges. This is an example of where your accent heading and your heading are not helping each other, or really there’s no purpose for the accent heading here, because you’re saying the exact same thing in both places. So I think this needs a little bit more creativity

1
0:52:12
in the copy. Okay, let’s keep reading, because I feel like this is gonna be a very pivotal area of copy here. Diaper need impacts the physical, mental, and economic well-being of children and parents. If you are wondering why this is happening to you, don’t be alarmed. You’re not alone because one in three American families report experiencing diaper need. We buried the lead again, my friends.

1
0:52:44
We buried the… People love to do this. People love to do this, they take their best copy and they just hide it away in random paragraphs and such. Okay, so one in three American families can’t afford diapers. Shouldn’t that be our hero heading? Like, you know, like just hit start with impact. It’s like say something people care about right off the bat. You know, this says what the thing is, what the organization is, but it has no impact. It evokes no emotion.

1
0:53:25
It doesn’t make people care. And then of course paired with a, you know, standard stock photo, I don’t know, this is not, this can all be improved right here. And then so we say like, alright, you can write better copy, but like you don’t have to. You already wrote better copy. It’s just buried in here. Like you hit on a very important, impactful thing that gets people’s attention, which

1
0:53:51
is one in three American families can’t afford diapers. And don’t say like report experiencing diaper need. Like damn, that’s so corporate. It’s so corporate, it’s so boring, it’s so journalistic. It’s like not sales copy. Sales copy just tells it like it is. Sales copy is just like, oh, one in three American families can’t afford diapers.

1
0:54:13
Again, it’s just plain language. Everybody can understand it, right? Okay, so simplify the copy, make the copy more casual, take the most important impactful thing and make it the headline instead of burying it in the paragraphs. Okay, what happens when a baby does not have an adequate supply of clean fresh diapers? The child likely stays in soiled diapers longer than appropriate which frequently leads to

1
0:54:39
diaper rash and may cause staph infections or urinary tract infections. which is like probably the number one Like improvement point on people’s copy and I blame schools for this. Okay, I don’t blame the copywriter I blame the education system the education system I call it the school system because if you don’t know this school and Education are two very different things now. We don’t need to get off into a school system rant, but school systems teach you to write academic copy and then you go into

1
0:55:22
the business world and you realize academic copy does absolutely nothing for businesses and we actually want to write in the opposite of academic copy. But you know it takes time to learn that and it takes time to retrain your brain on how to write actual copy and get out of academic mode, right. But this is very academic copy. There are potential long term impacts and a range of negative outcomes in children, including problems with behavior, cognitive ability, language development, school adjustment, and overall well being. This is also if you notice it’s if I

1
0:55:57
couldn’t afford diapers. This is it doesn’t speak to me, it doesn’t like have any real, it doesn’t evoke any emotion because it’s so academic and it’s not even talking about me. It’s like there are potential long-term impacts in children, like any children, potential impacts, no specificity, in children, not my children, just maybe in children somewhere out there in the world. No, like copy has to, what have we talked about before? It’s got to stab the person in the chest. Like they got, damn, oh, I felt that, right?

1
0:56:37
It’s got to talk about them. You got to call them out. You got to hit on them. And I’m not saying that it has to be negative in this way. It just has to be in a way that they’re like, oh my God, thank you. Like, you’re right, I can’t afford diapers. You’re right, I don’t want these bad things

1
0:56:53
to happen to my kid. You’re right, I need to click that button right now. And if somebody who is in the position to donate is reading this, it’s gotta stab them in the chest, okay? So that they go, you know what I need to do? I need to donate. I need to get involved. I need to help.

1
0:57:10
So this academic copy isn’t helping either person, either target person who’s reading this, because it’s just like sanitized and like boring and it’s just, you know, it needs that dagger. There’s many ways to do that. Like the concepts you’re hitting on are good, it’s just how they’re worded and phrased and framed. It’s not uncommon for some parents to feel a sense of hopelessness,

1
0:57:41
experienced mental and emotional anguish, and sometimes feel like they are bad parents. If a parent must take time away from work and school and they can’t provide, it’s like, you know, if a parent like this random faceless, nameless person that nobody cares about, that’s the thing, man. Nobody cares about the general like there’s eight billion people in the world or whatever. This is why when you hear about some disaster in some far off country, you’re like, oh, that sucks. But it’s like it doesn’t actually usually evoke any actual emotion.

1
0:58:13
But when that shit happens down the street to your neighbor, then you’re like, oh, I care about that, right? It’s a fact of life, man. Humans can only process emotion for so many people. And like, so if they get a sense that you’re talking about some long lost, like nameless, faceless person, there’s nothing for them to connect to. That’s how you got to bring it back to like their world. This copy has to invade their world to get them to move.

1
0:58:40
Okay. Let’s come down here. Diaper need can occur anytime to anyone. See, it’s like, Hey, anytime to anybody, right? It’s like not not you necessarily just anybody maybe at some point in time very very nebulous very Uh, you know, it lacks specificity Um, okay, uh Items provided to you. I the biggest thing on a see We look at the site in general and it’s like, okay, it’s clean. I don’t like the gap between these images,

1
0:59:16
which in this frame, you can adjust this to make sure that these images always overlap. I won’t worry about it right now. But the reason I’m harping so much on the copy right now is because everything else is clean and it’s like well laid out. It’s well structured.

1
0:59:30
I mean, these are all frames. Like, you know, they just, they use the frames as is like it makes everything super clean and it’s good. It’s a good presentation, right? Aside from the logo. So what do we have to look at next? Now, what’s the next most important thing

1
0:59:45
that’s gonna make or break this site? And it’s the copy, it’s always the copy. So we always primarily start there, unless some other disaster has happened. And so that’s right now what’s gonna make or break the effectiveness of this site, is what this site says. Also the imagery, also the imagery, right? I don’t think black and white is a great choice here.

1
1:00:06
Black and white on like color just makes me feel like it’s lacking detail, it’s lacking impact. These are much more impactful photos down here because they’re in color. I don’t know that these, this feels like random stock though. We need to think of what can be better here in terms of imagery.

1
1:00:27
I feel like these need a little bit darker overlay, adjust that overlay color because it’s hard to tell that these are hoverable and it’s hard to read that white text. I would also make that white text smaller and maybe bold it. Okay, what our clients are saying, we’re here to help you if you need diapers for your child, okay. Even this headline would have been

1
1:00:53
like a better hero headline.

6
1:00:54
Yeah, I’m just gonna go and put my foot down

1
1:00:57
and say get rid of this headline right here and replace it with any of the other better pieces of copy that we’ve encountered throughout the site for sure. Okay, what happens if we hit get diapers? Get the help you need for your child, get diapers, wipes, and baby hygiene items to meet your baby’s needs. Items provided at no cost to you. This is all this was all available to me on the homepage.

1
1:01:19
I really was hoping to see something different. Okay. Okay, so I’ve got to physically go to a location. There’s no way I can daily schedule hours. Oh, okay. We need to think this through. We need to think this through. Because right now it’s difficult for people

1
1:01:44
to understand what’s going on here.

6
1:01:46
So look, if I’ve already raised my hand and said, yes, I want to get diapers, okay?

1
1:01:49
Without scrolling, if you do a no scroll test on this page that I was just taken to right here, none of this helps me get diapers, right?

3
1:01:58
This is just more copy and images.

1
1:02:01
That’s talking about getting diapers, but it’s not actually helping me get diapers. But I already raised my hand. I said I want diapers now. So you don’t have to talk to me about getting diapers. Now you just got to get me the diapers, right? So I say, delete all this, remove, gone. Okay. Then it’s, here’s the available items.

1
1:02:39
I wouldn’t put this on the slider anymore. I mean, if anything, put this in a grid. Um, but I still, I don’t need to even know this really on this page. I’ve already kind of opted into getting something. So I don’t need to know really what’s available. Get rid of that section. I think this whole page could start with this process right here, which definitely needs more, it needs more gap.

1
1:03:05
That’s bothering me. Let’s go here and go to grid gap. Okay, so let’s just do this for a second. Okay, breathing room. See, now you can like, you’re visually, it’s like, okay, there’s process over here and there’s a sidebar over here. It’s like more visual separation between these elements. Why is there an odd gap though in here?

1
1:03:29
And it’s because it’s way off balance in terms of the amount of copy that’s in here. So that needs to be, that needs to be shored up. I think you should style these process steps. These were left unstyled. If we can get that section cleaned up a little bit, at least that kind of gives a person an idea of what needs to happen next. But then, but then, see, I don’t even know, I don’t need to know about the team right

3
1:04:00
now.

1
1:04:01
I, this goes on an about page. You get rid of this. This is getting in the way of me getting diapers, right? So now I’m going to come down here. These are the locations. I would almost like to see a facet, like WP Grid Builder here, like an address search. I can put in my address and it’s going to filter this grid and show me the location closest to me. Because the idea that I’m gonna have to read the and then what manually go put in these addresses and see This is what initially bothered me when I when I just scrolled down and saw this the first time a minute ago Immediately I just felt like oh, this is gonna be a lot of work like And I can’t there’s no links to these

1
1:04:43
These actually should not be photos, they should be map embeds almost. Like at least that would give me context as to where this place is. Like if it’s in a town I’m familiar with. Plus the photos aren’t even that great. Like this one definitely needs some work. Damn, was that taken from like 9 Mike a sniper took that photo? Like where is this guy at? Could he just walk a little closer?

1
1:05:03
Okay, yeah, we’ve got to make this easier for people to find these locations, for sure. Right now, the person’s got to copy this and go to like maps and map it. Oh wait, hold on. Indiana, Indiana, Indiana, Indiana, Indiana, but one said Illinois, I think. Is that Illinois?

1
1:05:22
I-L? Is Indiana in Illinois? I went to public school, so I don’t know this. Is Indiana and Illinois right next to each other? They must be. They must be. I don’t have the map memorized. There’s a lot of states in the US, guys.

1
1:05:52
Okay. It doesn’t help that I haven’t been to either of those states.

3
1:05:57
Okay.

1
1:05:59
I think this whole page has to be re-imagined. It’s a term I like to use when it all needs to be scrapped. Yes, this page needs to be re-imagined and it needs to be re-imagined from the context of what is the easiest path to getting diapers in the hands of people who need them? Because right now there’s a lot of barriers to getting people diapers on this page.

1
1:06:22
A lot of scrolling, a lot of irrelevant content, and a lot of manual labor involved in figuring out where the hell I can go to get these coveted diapers. So I think definitely reimagine this page. Okay, get involved. Same thing here, right? I think this whole hero situation just uses up a lot of real estate to do not much of anything. And it’s fine on like an about page, because it’s like part of the presentation or whatever,

1
1:06:55
but when somebody is like raising their hand, like yeah, I want to get involved, well get them involved, like as quickly as possible, as easily as possible. And all this is just barrier to entry. Will you donate if you can? That needs a question mark. Why donate?

1
1:07:17
Donating is very easy.

3
1:07:18
It doesn’t look easy.

1
1:07:19
That’s a lot. Donating is very easy. Just read this giant wall of text. Write a check, make a recurring donation. I think you can make this interactive, right? I would say re-imagine, re-imagine how we can get people to volunteer more easily. Okay, and there’s a lot of stuff going on on this page. Like you’re talking about having people host a diaper drive up here, then there’s donate by check, there’s

1
1:07:51
donate online, there’s recurring donations, there’s honoring somebody, there’s I can leave a legacy, I can shop, I can network, I can go to Amazon, I can go to Kroger, oh my gosh, it’s like what we need to do is just get the person to say I want to help and then once they’ve opted in for helping, now let’s educate them on all the ways they can help. I don’t think we need to show them all the ways on this page. That actually creates, here’s the thing, like you want people to help, right? You absolutely cannot create a sense of overwhelm.

1
1:08:37
If you create a sense of overwhelm on the how to help us page, people won’t help. So you’ve gotta make it seem super, like this should all be emotion. This is all like emotional copy. The copy that stabs them in the chest, right? And they’re like, I gotta do this, I gotta do this. Whatever it takes, I gotta do this.

1
1:08:57
So then they sign up, then you hit them with all the details, okay? Because they already raised their hand. Now you got them. Plus you know where they live, you know their phone number, you know their email address, right? They can’t escape now. So that’s all you need to get them to do on that page,

1
1:09:11
is to raise their hand. Everything else, all the details, all the minutia, that happens behind the scenes, okay? So hit them in the feels on this page, get them to raise their hand, save all the details for later. That’s how I would reimagine this page right here. Okay, all right, all right, diaper drive. Let’s click on this. We telling the story. Okay,

1
1:09:46
got a little vent action here. Okay, all right, all pretty standard, pretty clean. FAQs. Okay, all right. Blog, we’re almost out of time on this, so we’re just going to roll through and finish it up. Articles and insights, okay, all pretty standard. Contact us, all right. Please donate, oh, then I’m off to a different site. Okay, but at least it seems easy. Okay, I think we’ve given enough.

1
1:10:25
We’ve given enough value here. Let’s go through and see what the people are saying. All right. Uh, let’s go up.

10
1:10:33
I got to scroll up.

1
1:10:34
I got to get to the start of our site here. Okay, here we go. Uh, we had over a hundred of our stream on Sunday ourselves.

3
1:10:39
Shooting for 250.

6
1:10:39
Okay.

1
1:10:40
Uh, like counter. Okay. We saw that. We saw that. We saw that.

11
1:10:43
Okay.

1
1:10:44
More space between text and image in Hero. Yes, 100% correct. Let’s go here.

8
1:10:56
It’s even hard to tell

1
1:10:57
because that image blends in with the background. But you have, first of all, your grid gap in automatic CSS just needs a bigger value to begin with, right? But then on these, you need to use your calcs, right? Instead of var grid gap, it’s calc var grid gap times two or whatever. And then you’re gonna get that extra space.

1
1:11:23
Then, because you have so much text here and this is such a big heading, you need to change the structure of that grid. So right now you’re using a two three, we just need like a grid two situation. And you see how easy this stuff is to like adjust and work with. But find that balance there. Okay, what else did somebody say?

1
1:11:47
I think I like the color scheme, but the baby in the logo makes me think of Matt Walsh’s logo for Sweet Baby Games. Okay, I’m not familiar with that logo. I just think the whole logo situation needs to be reimagined. Paige says the color palette is nice, which I do agree. I do agree. Yeah, I’ve I have zero issue with the color palette. It’s, it’s warm. It’s inviting.

1
1:12:12
It’s not distracting.

3
1:12:14
It’s good.

1
1:12:14
Like the colors. I think the colors is fine. Apparently the logo is of the CEO’s child. He has mentioned this within the inner circle, if I remember correctly. Yeah, that’s I mean, that’s fine. Sure. That’s I don’t really have a problem with that part. I have a problem with the text.

1
1:12:32
The size of the text, the location of the text, the structure of the text. I think that can be improved. In general, what should the primary CTA be for a non-profit get or give? It depends on what the website is for and who’s gonna be coming to the website. If it’s like a food bank, right? I mean, think about this for a second. If it’s a food bank, how many people who are starving

1
1:12:59
and need food are like, you know, surfing the internet? It’s like the primary visitor, if the primary visitor is people who can donate, then that’s what the main call to action can be. Now, people who can’t afford diapers, that might be a completely different situation. And again, this is why you would do market research, right? And it’s like, okay, well, you know,

1
1:13:24
80% of the people that come to our website are people who actually need diapers. Well, there you go, you got your answer. The main call to action is get the diapers. If 80% of the people who come to this website are people who are in a position to donate or get involved, then that gives you the answer there. It is to get involved, right?

1
1:13:42
And we make the whole site, because again, it’s a question of what is the nonprofit doing to get in the eyes of people they serve? If it’s like, well, we just go out into the community and we find all the people in need, they’re not coming to our website. What we need with the website is just way more volunteers and way more money. That’s your answer right there.

1
1:14:06
But it really is going to depend on the non-profit and it’s going to depend on who actually uses the website. Okay, let’s see. There’s a lot of back and forth banter between people. One in three is the best copy. Yeah, yeah, I agree. Like to start out with, because it has the impact and the emotion

1
1:14:33
and it has kind of everything wrapped into one. Kind of starts to tell people exactly what we’re doing here, but it also has the emotion and the impact.

3
1:14:42
I don’t like sad photos.

11
1:14:44
It’s depressing.

1
1:14:45
I want to see happy people. Yeah, you know, there’s always a juxtaposition of like, do we show the people in need? I would much prefer to show the people in need after they’ve been helped, right? That that’s the photos that you want to show is like, look at the impact we’re having, not look at the people who are in a state of depression prior to us helping them. And same thing with a baby, like, you know, sad babies, neglected babies. You can use all of the imagery to show the impact that you’re actually having versus

1
1:15:26
the impact you want to have. Kevin, my two year old is locked in on this live stream. They should be. I mean, we’re talking about their market right here. I mean this is they’re like damn divers. I mean this is this is it right up my alley. Yeah that’s fantastic. Okay let’s see. Oh yeah see Ruben says I would show happy families that have gotten help showing the end result versus depressing photo. Yeah exactly we’re on the same page. We’re on the same page. Okay is it better to use four different icons there and make more spacing between elements?

1
1:16:02
Maybe you’re talking about here or here. Ah, you’re probably talking about here. Yeah, I mean, I don’t know. I would make the decision honestly on the icon after I rewrite the copy. Once I know what the copy actually, like once I know I have impactful copy, I’m probably gonna find an icon

1
1:16:19
to pair with that impactful copy versus like picking out an icon and then trying to map copy to it but I could definitely see four different icons here it really depends on what the copy says okay let’s see I wonder if success stories could be incorporated yeah for sure they could nonprofits have to do a good job of storytelling, 100%. And storytelling in lots of different formats. Video storytelling, case study storytelling, absolutely.

1
1:16:58
They have to do a good job of that. Need a map of the locations and a one-click way for them to get directions. Yes, I agree, 100%. Needs an appointment setting tool on the Get Help page. Agree, agree, absolutely. Anything that makes this website more interactive, anything that makes this website easier

1
1:17:17
for the person to raise their hand, absolutely. Because that’s ultimately what people want, right? Okay, thanks for those comments, wanted you to review this to get this type of feedback. Good, good, good. Glad you’re getting value. Okay, I think we’re good. We’re gonna go into the Q&A portion of our stream.

1
1:17:34
We got a solid 40 minutes left, which is fantastic. Any questions are applicable. It could be on copy, be on pricing, strategy. We can do agency stuff, freelance stuff, automatic CSS, frames. This is a free-for-all at this point. 100% free-for-all. You can ask whatever you would like.

1
1:17:54
You can ask whatever you would like. You can even, even if it’s not a question, if it’s a topic you want to hear discussed, you could just say, hey, here’s a topic, talk about it.

6
1:18:08
Okay.

1
1:18:09
All right. Let me get a sip of water and then we will dive into the chat. If you were just kind of letting the stream play in the background while you work, which some people do, hop back into the stream now and engage a little bit. Let’s get the chat going again. We’ve got 153 people here. Hit some likes on the stream while we’re in break mode and then we’re going to go right into Q&A. I can also show some new frames that we’ve just released. We can do whatever we want to do. Okay, SK has a question. How to tell the referrals from my current clients

1
1:18:53
that my previous prices have changed and they can’t get the same price as the client? How to tell the client to stop mentioning the price? Well, I mean, you can just contact the client and basically say, hey, when you refer people, can you just tell them that it’s price per project? Like, you can tell them what you paid, but also maybe just mention that,

1
1:19:16
but he’s raised his price a few times since he did work for me. So expect a higher price, basically. I think you can work with them on how best to do those referrals. Now, as far as communicating with the actual referral, I mean, the price is the price. It’s like that project was that project

1
1:19:34
and that was at a previous date and things change. We’ve gotten a lot better since then. We have gotten a lot more high-profile clients since then. We’re more booked up since then. So you know the scarcity right it’s like you know supply and demand. There’s more demand here you are and there’s less supply. Prices change. People understand this. You just have to put your foot down and communicate it. And when you’re communicating it, you’re communicating the facts as they are currently. It’s not like, oh, well, you know, I wish I could do it for this, right?

1
1:20:12
Don’t be all, you know, sappy about it and not confident about it. Just be like, oh, I’m sorry. Yeah, we did their site two years ago and that was the price back then. And this is the price now.

3
1:20:22
That’s it.

1
1:20:23
This is the fact. Like it’s, hey, just telling you what you need to know. Okay, let’s see, show us 3.0. That’s not happening, that’s one thing that’s not happening. But people will start to see it very soon. Do you have any suggestions on learning local SEO? There’s a lot of good local SEO content in the inner circle. It’s foundational SEO content and training.

1
1:20:54
There’s not a lot of secrets to local SEO. And I’ve talked about local versus national SEO on the stream in the past, so we don’t need to rehash that necessarily. But there’s just some slight adjustments to make in terms of local. And then if things like, you know, building a local service area network, for example, or a location network on the website,

1
1:21:12
and all that stuff is covered in the inner circle. So I would say those trainings are going to get you to where you need to be. Can you show off the new frame? Which specific frame? Because there’s a few new ones. We tried an online appointment system prior with an online application, application it didn’t work out the person the personnel didn’t follow the process ok yeah I mean this this is stuff like if you’ve tried certain things and and there was a breakdown in in follow-through I would definitely these are the kinds of things you can present in the inner circle and like this is a

1
1:21:51
perfect use case of the inner circle like you know leveraging the actual community not just sitting around waiting for a training to fall in your lap, like some people do. I’m not saying you do that, but some people just, they’re like, sit around, where’s the next training? It’s like, you’re not really getting the value of the inner circle.

1
1:22:09
Like, yeah, the trainings are fantastic, but there is so many people here that can help you with very specific challenges. That’s where tremendous value is. So this is, I bring that up because this is a good example. So you try to implement something, there’s a breakdown, and for some reason it’s not working or playing out the way that you wanted,

1
1:22:27
explain that to the inner circle and then be like, what should I do differently? Or how can I fix the breakpoints in this? And a lot of people can jump in and give you many more ideas. And when I say something like re-imagine this page right here, this page should be re-imagined. Okay, take that immediately into the inner circle and say, Kevin said that this get help page, there’s too much real estate being used

1
1:22:54
by stuff that doesn’t really matter. There’s too much getting in the way of somebody actually getting diapers. So how can we reimagine this? Help me out, give me specifics. And like 30 people will jump in and tell you things, ideas that you can start to execute on. And then you can bring it back

1
1:23:13
after you’ve done that first round of iteration and then say, okay, now here’s the next version of it. Do you see anything else that’s missing or could be improved? And literally the inner circle will help you shape the direction of these concepts. And if you’re not in the inner circle, you can go to giri.co slash inner circle or giri.co on the homepage and click on inner circle. And you can get, it’s very affordable. Everybody pretty much can afford it.

1
1:23:37
You can get right in instantly. Okay, let’s see. Okay, question, question, question. Sorry, it’s starting to scroll now. Faster. Let’s see. Do you have any…okay. You watching me work, Kevin? Yes. See, I know. I know how some people do this stream. Kevin, question, apologies to keep bringing this up. In December, you mentioned that we would get a little WS Forum present you were working on. Are there any updates? Oh yeah, yeah, yeah.

1
1:24:10
I probably just need to release that. I think it’s mostly done. What I’ll probably do is do a little bit of cleanup slash explanation of how it works in a work with Kevin session in the inner circle, and then I can just go ahead and release it. And it’s something that everybody’s probably going to want to use as a starting point and then build on for themselves.

1
1:24:28
But I’m at least giving you like the starting point and the concept for it. But yeah, let me, I’ll make a note of that. And we’ll do that in a work with Kevin session, co-working with Kevin session. Okay.

6
1:24:41
For events, how can I make the tickets button disappear

1
1:24:44
after the event date has passed? The event page will live on the past date on our curve. Okay, so that is actually answered by a event training in the inner circle. I show you how to conditionally show and hide both events, as well as individual elements of an event based on a past date. So that is covered by an actual training

1
1:25:11
in the inner circle. If we go into the inner circle here, we can see probably, it’s probably in,

9
1:25:16
here you go.

6
1:25:17
Creating a custom event management system.

1
1:25:19
I can’t remember if it’s in part one or part two.

3
1:25:22
Oh, there you go, right there. Automatically hide past events

1
1:25:25
in the key features of this training. So automatically hide past events is also going to show you how to hide elements of a past event. You can apply it to either the whole event or to an element of that event. So that’s the training you wanna watch right there, creating a custom event management system part one. Okay, what is the best way to begin a complete rebuild of a live website e-commerce and lms and then roll it out?

1
1:26:06
Yes staging, but what things to consider? Um, I I start from scratch. I I don’t tend to I will I will bring in specific things so like blog posts, okay I’m gonna go export those posts and then import them into the staging site Uh cpts i’m gonna go export the CPT infrastructure via ACF and I’m going to import that and then I’m going to import the individual posts and things like that. But for the most part I want a clean database to start from. I only want to import what I need, what I want, what I’m bringing over and I just do it

1
1:26:45
that way. The other thing that is just super important is all URLs have to be exactly the same on the new site or you need to be prepared to create a redirect file and implement those 301 redirects for changes in URL structure or URL slugs. There’s going to be like one thing that people forget all the time because it’s kind of hidden is title tags, meta descriptions, things like that. All those need to be brought over. There’s kind of a whole list of like, you’re doing a rebuild. I don’t know if I published that list

1
1:27:23
in the inner circle or not. We’ve got it in our base camp. I’ll look and see if it’s published. There’s some stuff I published like years ago that I just, I forgot about by now, but I think it’s there. But if for some reason it’s not there, it’s probably something we should definitely publish

3
1:27:39
in the inner circle.

1
1:27:40
There are some resources about targeting the classes and editing the HTML. I’m not quite sure what you’re asking exactly. Can you clarify your question? Dev site WooCommerce, clickable parent on product H3, focus parent on card. Still tapping through, takes two taps per product card.

3
1:28:06
Hmm.

10
1:28:07
Do you have a link, Carlo?

1
1:28:09
Now, you can’t drop a link in the chat. It’ll make you think you can drop a link in the chat, but nobody will see it. So you might want to do something clever, like my site, and then spell out the word dot, and then spell out the word com like so we can get the gist of the URL but it’s not an actual URL if you can give us a URL I’ll pull it up and look at it. Are there cheat sheets available for frames and

1
1:28:39
automatic CSS classes as a guide? Automatic CSS yes. Frames is not super necessary. There’s only like four or five now. It’s like, you know, FR card, and they’re all related to cards, which by the way is all gonna get reworked when the card system comes out, the card framework comes out. And then there will be a cheat sheet, for sure.

1
1:29:01
There’ll be full documentation on the new card framework. So, I would say hang tight on that. But also the contextual menus give you, they’re all right there in the contextual menus. So that makes it easy too. Okay, sometimes I’m lucky but I really need some education. I think what you might be talking about Johnny is the inspector, like using the inspector, which I did do a training on. It’s actually part of PB 101 I believe. There’s a part of PB 101 that covers inspecting a page. Definitely start there.

1
1:29:36
I’ve had all my business from cold calling. Do you see a problem with continuing cold calling until I can rely more on other tactics you laid out in the inner circle? I would go immediately to this training right here. It’s probably, is it sales and closing, foundation maybe, yeah, right here. Top three places to get web design clients fast.

1
1:30:06
Absolutely see I don’t use cold here’s a whole list of things I don’t do. I don’t do cold calling, I don’t do cold email outreach, I don’t do LinkedIn, I don’t do Upwork, I don’t do Facebook group mining or local networking events, direct response marketing, door knocking, social media. I tell you the top three places to get clients fast. I would go implement all three of those immediately. Immediately. And you never want to rely on one channel.

1
1:30:39
You never want to rely on one channel. So that’s why I would do this immediately. And then you’ll have four channels that you’re getting people from. And that’s plenty, that’s plenty. So yeah, go do that immediately. What’s your thoughts on query, sort, filter,

3
1:30:55
and live search in Bricks?

1
1:30:56
I like the direction it’s going, it needs to be more robust, but it’s promising because it allows us, right now we can’t do any faceting inside of frames because we can’t rely on people using WP Grid Builder, right? So, and then some people use facet WP with native we can actually start including facets and frames which is exciting all right can I add the class clickable parent to feature card India I’m currently trying to and probably

1
1:31:33
doing it incorrectly can I add the class clickable parent to feature card India? Well, we can find out. Feature card India. Okay, let’s wrap this in a let’s just bring in the whole section. Actually, I don’t need the card by itself. Feature India. Feature section India.

3
1:32:15
There we go.

1
1:32:16
Okay, there’s our section. There’s our carbs. Okay, so this is the, hold on, they’re already, they’re already fully clickable. I don’t know what you’re talking about. Look, that’s already fully clickable. I’ve, it probably already has clickable parent on it mr. Derek okay I don’t know you got it is there something you’re missing is it not working what’s going on with it okay let’s move on then is there a slider for full width images in frames probably not because I think you just add it to bricks right can’t you know like a one-click like full width slider

3
1:33:16
You don’t even need the nestable one, I don’t think Yeah you do Because you need to be able to control what’s in it

1
1:33:23
Slider nestable okay, so you can I mean we you could just use the frame slider too. I mean, like, here’s the frame slider. So there you go, there’s a full screen image slider. It depends on if you want it to be like a carousel or if you want it to be like a single slide at a time, which this slider works both for both. But it’s like, that’s as easy as it gets. You take out the headings and you put in images

1
1:33:59
and then you have a full width image slider. So this is kind of why there’s not a frame for certain things. It’s like, cause it’s adding the thing is actually just as easy as adding a frame for the thing. We only do a frame when it’s like, there’s more work involved, right?

1
1:34:16
So that’s kind of the premise. So if it’s something that you could just easily add with an element or a module or whatever you want to call these things on the left hand side, then it’s probably not like a dedicated frame. Could you please do an overview on feature card Yankee? It’s a new concept for me. Yeah, feature card Yankee.

1
1:34:40
This is a whole section. We’ll just get, wait, are we on Bricks? Yeah, okay. Yankee, there we go. Feature section Yankee, so it was just released. There’s a lot going on in this frame. The main point here is that you’re able to have, and by the way, there’s documentation on this frame,

1
1:35:02
so getframes.io slash frames. And if we look here is Yankee, okay? So we pull this up. You’re definitely going to want to read the overview. You’re absolutely going to want to read the accessibility notes. There’s a lot going on here in terms of accessibility, but I will show you the basics, okay, of what you need to know, kind of to customize this. It’s also query loop compatible, so this is going to depend on whether you’re using a query loop

1
1:35:31
or not using a query loop. But if you notice the thing that’s not probably intuitive out of the box is that if you go here, you’re gonna see all these locally scoped variables, right? And you’re gonna see this thing called featured position three. And if I change this, nothing is gonna change. And this is because all these cards in their current state are already having their featured position set manually.

1
1:36:01
And that’s because I’m not using a query loop. Even with a query loop, you’re gonna kind of do this in a similar fashion. But if I wasn’t setting this, I’m gonna turn this class off and look at the ID level. That value is actually being set at the ID level. Now, if I wasn’t setting this at the ID level on all of these, then three is the default position.

1
1:36:22
So it has a default position, right? Like that. So that’s the default. Now, okay, good. I’m not, I just, I had PTSD for a minute. I was like, oh my God, is this the actual source site? No, this is not. This is just a local site.

1
1:36:38
Okay, so we’re good. So this is how that frame looks out of the box. Now, if you open up one of the cards, you’re going to notice that the featured row is actually first in the DOM. That’s because all these other rows are fake, okay? When somebody with assistive technology, a screen reader, is reading these,

1
1:36:54
this would actually read them the undesirable items as if they were desirable things. And I’ve actually seen this on many websites. People don’t account for this. That when they do like, you know, like no, we don’t have this feature, no, we don’t have this feature, no, we don’t have this feature, or whatever, they don’t think about accessibility.

1
1:37:16
And when somebody with a screen reader reads those, it reads them as if they’re included. It’s like, you don’t want that, that’s bad, right? So what we do is we have used aria-hidden equals true on all these undesirable rows. So literally a screen reader will only read the selling point, and then it will read the rest of this. That’s the ideal state of a frame like this, okay? So that’s one aspect of this that needs to be accounted for. Like if you add additional rows, now if you duplicate one, it’s fine,

1
1:37:49
it’s gonna have the ARIA hidden on it by default or whatever. But just to kind of give you the structure of what’s going on here. So the featured row is first, but it’s not visually first, it’s visually in the middle by default, and that is what is controlled by that initial property, featured position. Now, what I do for visual purposes,

1
1:38:11
because I wanted that little staggered look, because the staggered look kind of helps add more visual interest to what’s going on here. And I had the foresight to be like, well, people are going to want to move that featured thing around. And so you can just come and set it on the ID level and I can say 2 and it’s going to jump to position number 2 right and so now I can come to this one leave that on 3 that’s fine come to this one go to the

1
1:38:39
ID and I can set it to be like 4 and so I can just maneuver that around without changing the DOM structure however I want to with this little locally scope variable and if you’re using a query loop you can actually choose in a custom field the position of these if you wanted to or you can programmatically do it with inf child right you could say hey I want every even one to be in this position and every odd one to be in this position so this gives you a lot of flexibility that’s probably the most like technical aspect of this frame though if you just want to leave it like it is it’ll work like that out of the box so that’s nice is there any

1
1:39:23
other question you had about this frame I guess would be the next thing to do and who asked that by the way halal so halal if you can give me if there’s anything I didn’t just cover there, let me know. Now these badges up here are a separate frame. This is badge group alpha. Oh, we should show this. We should show this. Actually, let’s show the whole thing. Let’s show the whole thing.

1
1:39:51
We can just show the experience right now of what I mean. Right? Okay, so we’re gonna come here. These badges just got reworked to be way more accessible. They weren’t accessible before. And this is another thing when people make these kinds of badges that they do wrong. They do these incorrectly, right?

1
1:40:07
And this is one of the, this was a very early on frame, I think, relatively early. So some T’s didn’t get crossed, some I’s didn’t get dotted. So I went back when I was actually creating this one, because I was like, I want to check on that and see if that was done properly. Oh, it turns out it wasn’t. So I made the improvements to it, but let’s use the, oh, can you guys hear this?

9
1:40:27
Hold on.

3
1:40:27
Let me see, hold on. Is it? Muting. Web content.

1
1:40:31
To click this link, press Control, Option, Space.

3
1:40:33
To exit this web area, press Control, Option, Shift,

2
1:40:36
Up arrow. Let me pull up, hold on, Command-F. Voiceover off. Could y’all hear that or not hear that?

1
1:40:42
I don’t, I’m not seeing any meters move on my mixer over here which tells me you guys can’t hear it but earlier you said you could hear it. Let me go in here to I don’t know why that’s not working. Let me go to sound output oh it’s on the wrong output okay let me change this output. Let me see now what we get.

2
1:41:14
VoiceOver on Chrome. Feature card India. Blueprint. Google Chrome. Kevin. Window. Link. Skip to main content. Has keyboard focus. You are currently on a link. Inside of web content. To click this link,

1
1:41:26
press voiceover off.

6
1:41:28
Alright, can y’all hear that now?

1
1:41:30
Is that better? Can you hear it now? According to my mixer, you can hear that real good. Okay, good. Now I can hear it in my headphones. When you guys were saying you could hear it, I could not hear it in my headphones. All right, I think it’s sorted now.

1
1:41:47
So let’s see how these announce.

2
1:41:49
Link, skip to main content. Link, main, heading level two. This is just a placeholder headline. We were 4.8 out of five stars on Google. Image, 4.8 out of five stars on Yelp. 4.8 out of five stars on Google. Image, voiceover off.

1
1:42:01
Okay, it was not announcing like that before, right? And if you don’t do some special things, it will not announce like that. Because it’s not just reading the DOM, it’s actually reading special ARIA tags that we’ve given it. So if we go look at this, the general consensus here is that the badge itself, because there’s multiple elements inside the badge.

1
1:42:25
There’s a wrapper, there’s an icon, there’s a label. And these are very disjointed from each other when a screen reader tries to interpret what’s going on. Not to mention, the actual rating is not even real. The rating is a pseudo element produced by a data attribute. That’s what makes these query loop compatible so you can dynamically have ratings on various looped items. And so it doesn’t work

1
1:42:50
unless you make the adjustment that we just made. The adjustment we just made is on badge alpha. If we look at attributes, number one, the role has to be set to image. And so what this does is it says, oh, there’s a bunch of things in here. And if you read the documentation on role equals image, it talks about it. It can be text. It can be icons. It can be a lot of different things.

1
1:43:13
So it’s kind of weird that it’s named role equals image, but role equals image basically says all those children are one thing, right? So now we’re gonna focus on one thing. Then what we have to say is, and now here with an ARIA label, here’s how you’re going to announce that one thing. And so the rating actually gets announced in full

1
1:43:35
inside of this ARIA label, and basically everything inside that’s an individual element gets ignored. So it’s all announced as one thing according to this announcement right here. And then if you’re using this dynamically, you replace the static value with dynamic data, and that’s how you’re gonna continue

1
1:43:52
to make this query loop compatible. Okay, so that was a big change that we made. Now let’s go down to the actual cards.

2
1:43:58
Link, skip to main content, link. Main, heading level 4.8 out of list three items. 4.8 out of list three items. See how it announces. You are currently in a list.

1
1:44:08
See how it announces as a list, right? That’s because we use ULLI structure. And this gives tremendous context to someone with a screen reader. Like, oh, we’re about to encounter a list. You could actually name the list. You could say features. So it’s gonna say feature list three items, right?

1
1:44:23
So they know they’re about to encounter a feature list. Remember, people with screen readers cannot see the screen. They’re just, what they hear is all the context available to them. Okay, so then we go to-

2
1:44:36
Key selling point, one of three. Heading level three, feature heading. This is just placeholder text. Key selling point, two of three. Heading level three, feature heading. This is just placeholder text. End of list. Link, call to action, voiceover off.

2
1:44:49
Okay, so see how it skipped all the undesirable items. They don’t even know it’s there.

1
1:44:54
They just hear the key selling point and they hear the rest of the content, right? And it told them it’s a list. It told them how many items are in the list. It told them when they got to the end of the list. These are the details, right? This is not, nobody else doing layout kits is doing this. Okay. Nobody’s paying attention to these details. Um,

1
1:45:20
this is the extra added value you get when you’re using frames. Um, now if there’s any other questions on, on this frame, I’ll, I’ll hit on them. Otherwise I think we can move on. Oh, the other thing I guess to show, okay, the fade effect, right? How is this fading out? Because if you actually come in here and change the background of like feature card Yankee So let’s let’s make these dark as an example, okay? So now that fade effect is like wow this is all fugglified, but it’s actually very very easy to fix That’s why we have these locally scope variables. You don’t know these are pseudo elements, okay?

1
1:45:53
You don’t need to know any of that, okay? All you need to know is I made this background BG dark. So what I’m gonna do is I’m gonna come into the card and I’m gonna go find all the helpful locally scoped variables. And look at this gradient background is right there. You just change it from white to BG dark and the gradient is now going to match the background.

1
1:46:27
See, I don’t have to go find the pseudo elements and all that stuff. And now we’re going to have to come in here and obviously you would change all this content to text light content. See how my undesirables are starting to show up there and all that. So I got to continue making this a dark frame now because it started as a light frame. But almost everything, look at how much control, let me go back to my card Feature card Yankee look how much control I have the gradient height the height of that gradient if you’re like Oh, I want to I want the gradient to cover a little bit more of the text or a little bit less of the text Well, there’s a locally so variable for that the icon size the icon color the row inline padding

1
1:47:07
Why the row inline padding let me go backwards here Let me see if undo works in bricks these days. Okay, there it goes. Look at how the text right here, guys, that’s why I’m talking about details, okay? Is in perfect alignment with the left edge of these undesirable icons, and then the featured row actually sticks out a little bit.

1
1:47:29
Okay, but how is that happening? Well, if we go here and we look at feature card Yankee row, we see this variable is actually set to row inline padding. That is a locally scope variable that only applies to this frame. And if we go down to the content wrapper, we see it’s using the same variable. So no matter what happens with the inline padding of these rows, the content will always stay in perfect alignment with them. The keys to victory are in these locally scope variables and a lot of these frames,

1
1:48:02
especially when there’s advanced stuff going on, because we abstract away the complexity into these locally scope variables, so anybody can maneuver them without knowing what’s going on or how it works, right? Again, this is something nobody else is doing. And it’s fantastic. I even I know what’s going on with these frames.

1
1:48:23
And when I open one and edit it, I love the fact that this stuff is available to me okay you got the featured icon color the featured background color the featured border color like if I just wanted to go warning warning warning on all this warning look at that I just I just swapped the color of the text the icon and the background of that row just bang bang bang don’t even need to go click on the elements it’s all controlled from the parent so it’s just it’s really, really, really fantastic. Okay, let’s save that. All right, let me I

1
1:48:59
gotta scroll way back up and find out where I was. Because I scrolled back down. Okay. I think I found us. Let’s see. What are the demographic? Okay, okay. Okay. That’s old. Okay, that’s old. That’s old. That’s all I went too far.

6
1:49:17
All right. You know what I forgot to tell you guys

1
1:49:19
that we did last time that was super helpful? Hashtag Q, or hashtag question, because then I can actually sort just by questions. Okay. Nope, still went too far. In ACSS, is it a fixed 62.5% for base font size or can one set it to 100%? Great question.

1
1:49:44
We’re gonna go over to ACSS. Super easy to do. Typography, root font size. This side I have it at 100%, but this is where you set it right here. And the great thing is all the rim values for every all your typography all your spacing all your everything anything that uses a rim value the minute you change that root font size everything recalculates and nothing breaks so you can even change

1
1:50:15
that on a live site now if you’ve used static rim values places those will those will break but anything within the ACSS system will automatically recalculate.

3
1:50:26
So good question, good question.

8
1:50:28
Okay.

1
1:50:29
Oh, let’s see. Given the high price of Ahrefs, what could be used for SEO analysis that is cheaper? I know they’ve changed their prices a lot, but I’ll just tell you the truth of the matter. Let me, I don’t want to sign in. Let’s go to their pricing. So you need the standard probably 199 bucks a month. If you’re serious about doing SEO for people, the average SEO retainer, let’s say a minimum, one

1
1:51:05
client minimum SEO retainer that I would even entertain is a thousand dollars a month. So the idea that, and then of course, if I’m serious about SEO, I want multiple clients on retainers, right? So the idea that I can’t afford Ahrefs is just, it’s not, it’s another thing where the price is relative to what it does for you. Now, if it’s like your little hobby site, like, okay, I get it.

1
1:51:30
But if you’re doing serious SEO work for people, it’s a drop in the bucket. So it’s yet another app where I would say, just don’t complain about the price, pay it. The tools inside of it are tremendous and it’s the best system currently available. So pony up, pony up and charge accordingly and you will be just fine. Okay, what do you think about niching down to a specific industry as a web design beginner?

1
1:52:04
I would not niche down to a specific industry. I would niche down to a specific type of business. If you said like SaaS, I’m gonna do SaaS, or I’m gonna do service-based businesses. Now service-based is very big, so you can find different ways to scale that down even further, but you can niche down in other ways.

1
1:52:20
You could say, I’m gonna do service-based businesses only doing a million plus in revenue or something, or five million plus in revenue, or whatever it may be. That’s another way to niche down. Or service-based businesses with these specific challenges, or I’m gonna do non-profits, or I’m gonna, something like that. But if you’re gonna be like, I’m just gonna do plumbers,

1
1:52:40
like, I don’t like that. I am not a fan of that kind of niching down. And I’ve gone into detail on why that is in the past. We don’t need to rehash it, but I’m just, I’m not a fan of that kind of niching down.

3
1:52:54
Jamie says, I love to fall down rabbit holes with the inner circle.

1
1:52:57
Yes, it’s fun. Okay.

4
1:53:00
How would you go about creating a glossary page in Bricks, say for a finance site?

1
1:53:05
We actually had a frame started on that. I don’t know, is Tobias here? He can tell me what the name of it is. He was working on it. And we just decided, we were like, I don’t know if we should pursue this right now. It’s quite complicated, it’s quite complex, and then there’s a huge issue with accessibility.

1
1:53:24
It’s very challenging to make it accessible. I don’t even know. Let me go into drafts. I don’t even know what it would be called. See, there’s a lot of stuff cooking in the kitchen right now. You know, it’s this is all marinating on the back burner. Let’s see some off canvas stuff now squeeze page feature section slider glossary.

6
1:54:00
Found it.

3
1:54:02
Yeah, yeah, we got quite far with it.

1
1:54:05
And then I think, yeah, we were gonna do this, got a sticky, it’s got a sticky nav up here. And then of course, all these are, this is all generated by a loop. But I think, if I remember correctly, we were looking at different accessibility related stuff. Like you can go through here, If I remember correctly, we were looking at different accessibility related stuff.

1
1:54:24
Like you can go through here. Then you’re, but then once you filter, oh yeah, that’s why we couldn’t filter. Okay, that, if I go to M and then hit tab, okay, so focus indication is fine. It’s following the anchors. I can look at this again. Do you guys want this? I can investigate and see if there was any other issues. Something’s going on here. Let me know if you want this. I can release that as a frame. I just got to make sure there’s no deal-breaking issues. I’ll talk to Tobias about it. Okay.

1
1:55:14
Okay, I did an event schema via Rank Math SEO, but the event is not populating in Google Events box. Is there an extra step I’m missing? Event schema, but the event is not populating

3
1:55:25
in Google Events.

1
1:55:26
Did you do a schema check on it? You can do a schema analysis on the page and see if there’s any broken schema or see if it validates, just Google schema validator. And obviously if it validates, then we’re gonna have to look further. Again, that is a perfect question for the Inner Circle. You post that in the Inner Circle,

1
1:55:50
you’re gonna get people helping you out.

3
1:55:52
Okay.

1
1:55:52
Inner Circle has been great. My questions have been answered in minutes. That’s fantastic to hear

3
1:56:04
Let’s see

1
1:56:06
Bricks just released a security patch. Yeah, I saw that. I actually had a heads up on that last week But obviously I could can’t say anything because it can become exploitable like the minute people know. So it’s a little, it was a little hush hush. Okay. I had no idea Rank Math did schema

7
1:56:35
until I installed it yesterday.

3
1:56:36
Yeah, it does a lot with schema actually.

1
1:56:38
Gen, generate press, global colors, SU to use ACSS VARs to enable color management with ACSS console 2.8 broke it, VAR still there but colors gone, any pointers are greatly appreciated. Sorry, what is the SU mean again? My brain’s not computing this. It’s a little time saver. Use ACSS VARs to enable color management with ACSS console.

3
1:57:10
I don’t, that whole,

1
1:57:12
I’m struggling with that entire question.

3
1:57:14
Currently having frames and thinking of, what are we doing on time?

1
1:57:17
Oh, we got, we got two minutes. Okay, let me rapid fire these. Thinking of purchasing BricksMaven and Bricksies as compliment, how is your take on BricksMaven and Bricksies regarding code? I have not looked at Bricksies closely yet, so I can’t comment on that. BricksMaven, I haven’t inspected all the frames

1
1:57:55
or kept up with their latest updates, but I do know that EdAware is fantastic and he watches these streams and he’s in the inner circle and he’s in the ACSS community and he is committed to putting to practice a lot of the stuff that I teach. So that’s about as good as you can get with a third party design set that’s not named frames. So yeah.

3
1:58:21
I just went through your Page Builder 101 course,

1
1:58:23
it helped me tremendously, so thank you. I wanna start offering my services to clients now. Where would you start? Absolutely go to the inner circle. All the foundational, fundamental, build a successful agency stuff is in the inner circle. But as far as getting started, real clients, it depends on if you have any prospects or not.

1
1:58:42
If you have a few prospects, then sell them a site and get it done and learn from it. I mean, you’re not gonna, it’s like anything, starting somewhere. It’s like you’re gonna make mistakes, it’s gonna be messy, there’s gonna be stuff you miss, but you gotta get started, you gotta do it. If you don’t have any prospects, that’s a different story.

1
1:59:01
I would go and watch the how to get client, three ways to get clients fast, absolutely go watch that. You need a sample portfolio, I would start doing spec work, I’d put that spec work in a portfolio. I mean, there’s a lot of things you can do. We’ve talked about them on the stream before as well. So I don’t want to rehash too much, but the inner circle, like I said,

1
1:59:20
will help you tremendously. How to fix squeeze background shapes on narrow screens and hero mic video embed. That might be a question for the next stream. Are there badges in alpha intended to dynamically pull those ratings you were showing? Yes. We worked with an accessibility agency for one year to update a fortune 500 company people testing so only use JAWS or NVIDIA depending on OS should. But that is kind of double-a accessible, okay.

1
1:59:51
Let’s see so far for Ally you shouldn’t not announce something that’s visible. Most folks aren’t fully blind, so they’ll be able to see something is there and they may get confused that it’s not being announced. Yeah, it’s debatable. It’s debatable. How the question is, how are you going to announce it accurately? Right? Because, like I said, by default, it is not critical information. It is almost, I would say, decorative information. It’s not actually important information for the person to know, but for people who can see it and read it, it adds additional context, right? So there’s a question about the critical nature of it.

1
2:00:44
Then there’s a question of accurate announcement versus no announcement. So I think there’s a gray area in a lot of this stuff. And that those are the decisions that we weigh. The good news is if you want to announce it, it’s very easy to make it announce. So you can add the frame and force it to announce it. But I would say you need to find a way to announce it accurately, because by default out of the box, it is not going to announce as it’s going to announce it as is. And because there’s an X next to the thing visually, see somebody who can see it,

1
2:01:16
sees the X and they’re like, oh, that’s these are things that are not included. Getting that to announce accurately is a different story. Let’s see. Regarding ARIA, when you have a heading for which a word is wrapped in a span and text, it often reads out two elements, element one, et cetera. Would it be good practice to use ARIA?

3
2:01:45
Let me see,

1
2:01:46
as an example here.

3
2:01:47
That should not affect it at all,

1
2:01:49
like bolding, stuff like that.

3
2:01:51
Let me go in and do a span. Span,

1
2:01:54
span. Span, span. Okay, so placeholder is in a span,

3
2:02:05
that’s on the first placeholder.

1
2:02:07
Link, get to main link, for list three, key cell, this is just placeholder text,

3
2:02:11
don’t be alarmed, this is just here

2
2:02:12
to fill up space, temporary voiceover off. So you saw there, it didn’t have any impact on how that was read,

1
2:02:19
and that’s my experience for the most part. I don’t just having a span around stuff should not affect how it’s announced. Okay. Ahrefs versus SEMrush, that’s fine. Simrush has, no, HREFs has a broader keyword database. Oh, you said for Finnish keywords, okay. I don’t, yeah, I don’t know anything about Finland’s SEO, but if that is the case with Simrush,

1
2:03:03
then that’s a definite, like, you need to consider that. That would be, yeah. The number one thing is if you can’t do proper keyword research, then it’s not a great tool. So if SEMrush has a much broader database for Finland and that’s where you’re doing your SEL, I think you have to go SEMrush. You have to at that point.

1
2:03:28
Okay, just trying to rapid fire some of these. Absolutely in favor of glossaries. Oh, SU equals setup.

3
2:03:50
Colors gone in front end.

1
2:03:52
Okay, well, let’s see. Generate, generate, generate, generate, generate, where’s generate? Okay, here’s generate. Automatic CSS 2.8.1, refresh. This will be the last thing then we’ll get out of here. Um, where are the colors now showing up?

3
2:04:16
Who was that? D123? Okay.

1
2:04:18
Global colors. Oh, let me update generate press too.

3
2:04:21
It looks like we’re out of whack here. Okay.

6
2:04:23
Updated.

1
2:04:24
Um, what else?

3
2:04:51
That doesn’t matter.

1
2:04:52
Generate, generate, generate, generate appearance themes. I don’t even, I forget, let me update WordPress while we’re here. I always forget where the generate press global styles are. Are they in the customizer?

3
2:05:04
Right here, right?

1
2:05:05
Are they in the customizer? Right here. Now, I think they’re in the customizer. I rebuilt the admin bar with generate press. Customize, colors, colors, colors. That’s promising. Choose color, backgrounds. Well, I mean, the good news about this is, well, see here’s, oh yeah, I just cleared all these out. That’s what you should be doing.

1
2:05:49
Okay, yeah, well, yeah, I don’t, I think, did we do documentation on this? I don’t think we did documentation on this. Maybe we did in the group. ACSS, generate,

6
2:06:06
alpha test integration.

1
2:06:08
Maybe I never did setup docs. So if you look at my setup, these are all empty. You should empty these out. Automatic CSS sets your website background. It sets your default text color. It sets your default link color. It sets your default heading colors, headers, top, all that, all that, this should all just be zeroed out.

1
2:06:31
Nothing should be going on in here. Let Automatic CSS do all of this for you. I think that’s your answer.

3
2:06:38
Okay.

1
2:06:39
Okay, all right, that’ll be the end of it.

6
2:06:47
D123, if you need additional help or insight on that, ping me inside of the ACSS community

1
2:06:53
and we’ll continue working on that for you. I got to thank everybody for being here today on the stream. Great viewership, great questions. We had two great sites that I think we learned a lot from and I think people got a lot of value from. We’ll be here again next week, every Tuesday, 11 a.m. Eastern Time. We’ll be here again next week, every Tuesday, 11 a.m. Eastern Time. Come join me, come have fun with me, come hang out with me and until next time, peace.