Web Design For Dommies 001 – Live Web Design & Development Critiques

0:00:00
Yo, what is up everybody? Or I should say, what is up, Domies? We are trying something new today. Let’s go ahead and welcome everybody in the chat. We had over 100 people waiting for this stream. And I’ll tell you what’s going on here. We are doing something new today, something fun, something hopefully exciting, something very entertaining, hopefully, and educational as well. I mean, that’s what we’re always about. Providing value, getting better at our craft. Let’s welcome Justin. Let’s welcome Sam Dan. Silent Phil is here. Callison, ex-Island is here.

0:00:38
I love seeing the same dedicated people over and over and over again. It’s fantastic. People from all around the world. All right, so let’s make sure audio is good. If there’s any audio issues, let me know. There shouldn’t be. It’s all the same equipment. Same setup. Everything’s good. Let’s talk about what we’re doing today. This is web design for dummies. And some people didn’t get it. I don’t know. They didn’t get it.

0:01:03
If you’re international, you might not get it. I don’t know. But this is based on an international brand. There’s a book series. It’s a branded book series called For Dummies. For dummies, right? And there’s web design for dummies. There’s everything for dummies. And we are switching it up to For Dummies because the DOM, the DOM, the document object model, what we do. And there’s other cute plays on the word too. Are you a dummy? Let’s talk about what a dummy is. If you are a dummy, it doesn’t mean you’re a dummy.

0:01:37
If you’re a dummy, you’re somebody who cares about clean code. You care about accessibility. You care about best practices. That’s what a dummy is. So hopefully, all of you here are dummies. Now, you can also be a dumbass. If you have poor code quality. And by the way, we’re all dumbasses from time to time. Nobody’s perfect. We’re all dumbasses from time to time. If you put out some bad code, you’re a dumbass. In that moment. In that moment. You can always get better.

0:02:08
You can always improve. You can always fix things. But in that moment, you’re a dumbass. This is just how we’re going to roll. So basically, I’ve done two website critiques. And that’s not all we’re doing here. I put a whole list in the description. We do these website critiques. It’s not all about code quality. I just needed to brand the series somehow. And so this is what you guys got. And by the way, this all came together pretty much this morning. I was laying in bed, and I was like, all right, we got a digital table talk today, digital agency table talk. And I was like, but I really have been having fun with critiques lately.

0:02:46
And what happened is I’ve done two critique sessions. And one was in a digital agency table talk. And one was in the seven hour live stream. And after both of those, I got tons and tons of messages from people saying, this website critique thing needs to be a regular series. You need to dedicate time to this. We need to do this on a regular basis, because there’s so much value. And so I was laying in bed thinking, you know what, they’re right. Plus, it’s fun. So I like doing the critiques. There is a tremendous amount of value there. We can cover a lot of different stuff.

0:03:21
And in terms of learning and education, it’s like whenever you see the same things over and over and over and over and over again, that’s when they really click in your brain. That’s when they really become ingrained in you. And website critiques is one of the best ways to see core concepts over and over and over again, to see common mistakes over and over and over again. And this is really, I think, going to help elevate your game. Not just in terms of clean code output, but UX design, UI design, conversion strategy, on page SEO, technical SEO, I put the whole list in the thing. We’re going to cover as much of it as we possibly can. So I’m going to bring some websites up on the screen here.

0:04:06
If you want to submit your site for review, you can go to digitalambition.co slash critique. The link is down below in the description. Let’s see what people are saying so far before we get too far into it. Some of us are dumbasses all the time. Thank you. Yes. Well, hey, I mean, you’ve got to start somewhere. We all start as dumbasses. But if you were a dedicated dummy, you will get better and better and better. And that is the goal. All right. Mack, you says hello.

0:04:41
Want to be dummy here from Mark Peters? Yep, I’m a dummy. I change my LinkedIn right now, says Seas. All right. Yes, Otonaka says we have the usual suspects here. All right. We’ve got people all over. Can you, Kevin, can you touch on your recent post about turning off a client’s website for nonpayment? I think that’s a learning teachable moment for everybody. Yeah, I did post that in the inner circle. That’s the first time it’s ever happened. And it did happen. I recorded the story. I just haven’t posted it yet. I will publish that inside the inner circle.

0:05:18
That’s one of those things that the inner circle gets to have that. We don’t need to make it public. But the inner circle will get to enjoy that story. And learn from that story. Earth Crosser says I admit I am a dumbass. The Hunts is here. Nigerian dummy. Yes, yes, yes. All right. Are we ready to go? Are we ready to rock and roll? We understand what the terms are. We understand what we’re attempting to do here. I think now we just get the show on the road.

0:05:49
So I have already gotten a bunch of submissions from people. And I’ve got five websites lined up here. If we get through all these five, I don’t know if we will. Here’s one thing I do want to say before we really dive in. You guys have to help me craft this series to be like the format of it. You’ve got to help me craft it to be what is going to give you the most value. If you feel like I’m spending too much time on the same websites, like if I spend too much time on one, go ahead and let me know. Or if I’m not spending enough time on a website, if I do it too quick and I move on to the next one, let me know. We’ve got to kind of dial this in.

0:06:32
If I focus too much on one area of these things and you want to hear about other areas, then let me know. All right. Give and take. You’ve got to put your feedback in the chat. All right. Let’s go ahead and bring up site number one. All of these people, by the way, let me show you this. Just for, I don’t know, crossing tees and dotting eyes. This is the page where you go right here to submit your website. Oh, not inquiry. What am I doing? Critique. Let’s use the correct term.

0:07:05
So you’ll see this form. Submit your site for critique. You check these boxes right here. Two of them are required. See, I consent to having this site publicly critique. Don’t at me. All right. If you fill this form out, you’re ready to go. And it says, I have permission to submit this site. So you can submit your own website. You can submit a client’s website. But if you’re going to submit a client’s website, you better have permission to submit the website. Whatever website that you put in through this form for critique, you better have permission to do it.

0:07:39
And it’s on you. OK, it’s not on me. It’s on you if you don’t have permission to get that website critiqued. And then, of course, if you want to get me on my email list, you can do that as well. All right, so that’s a official form. I’m not just going to take links out of the chat or anything else or out of the inters… And this is open to everybody. This is not just the intercircle. So you, anybody can submit for critique, but you got to have permission and you got a consent to those things. Did I?

0:08:09
How about my screen share? That would help. We’re off to such a good start. Oh, gosh. All right, let’s go back and do that one more time. Critique. OK, now you guys should be able to see exactly. OK, here are your consents right here. So these little two check boxes, you’ve got a consent. It’s three fields, two consent boxes. And then, if you want to get on the email list, you have one more check box to do. All right, so that’s that. Wow. Fantastic.

0:08:35
All right, so, yes, I’m seeing all of the… Now I get the 15-second delay where we get a gazillion reminders after I’ve already done the thing. All right, we have the first one up. It is Nitro CRM. If you have questions about anything that I’m saying as we go, put in like all caps, kind of like we’ve done in the live stream, question in all caps, and then go ahead and post your question so I can easily filter those. Because then all I see is just maybe people talking back and forth or just saying random things. If you want me to actually acknowledge what you’re saying on the screen, then go ahead and, yeah, put question in all caps.

0:09:13
So Nitro CRM, this is interesting. All right, so this is a tool. And I’m looking at the nav up top. We’ve got features, pricing, contact. We’ve got get started, all in one business tool. All in one business tool. All right. Run your business and rank higher in Google. The first thing I do on every website, I try to make sure that right away, without strolling around, I can figure out what the heck is going on. What this company is about and what they’re trying to do for me. So I see run your business and rank higher in Google. I do want to rank higher in Google, running my business and ranking higher in Google at the same time.

0:09:57
That’s an interesting concept. Those two usually don’t go together, right? A CRM, if you don’t know, is a customer relationship management system. So usually CRM is more geared towards the back-end, sale funnel, prospects, all that good stuff. And then ranking higher in Google is some other thing over here. That’s SEO land. So it’s interesting. I want to know, what is Nitro doing that’s trying to combine my CRM and my ranking on Google? So harness the power of the Nitro CRM office automation suite to manage your customers track leads in, invoices, and engage with your Google and social media profiles, all in a single tool.

0:10:40
So I’m going to go out on a limb and guess that this is a CRM system that allows me to post to Google my business and some very social media profiles. OK. Hero section, right off the bat. Here’s what I do not like. This is all fairly clean. I do not like this image whatsoever. This girl right here screams stock photo to me. She’s just like stock all day, every day. This could be on every website. Yes. This is not personal to Nitro CRM. This has nothing to do with Nitro CRM.

0:11:21
It’s not helping me make decisions on Nitro. It’s not doing anything for me. This little icon right here is meaningless. This little floating thing is this is the style, all the rage right now. It’s like have an image, have some accent things floating around it. That’s like all the rage in terms of design land. But the things have to mean something for it to work as a concept. And this doesn’t work as a concept. Because this little icon is just chinchy. It’s like there’s no, it’s just so generic. It’s cliparty. All right.

0:11:52
Now I have a little screenshot over here of the actual Nitro CRM dashboard. But it’s too small for me to see. I can like squint what’s going on here. And it just kind of all feels a little bit out of place. So if it were me, I would take this, and I would drag it over to the trashcan. Pow. And just drop it right in the trashcan. And then replace it with something meaningful. All right. Maybe a video would be really good to put right here. An explainer video. Maybe some sort of single graphic of the dashboard would be fine.

0:12:27
But this got to go. All right. Then we’ve got to learn more, which is going to take us down here. OK. Before we get down there, let’s talk about these cards. So I’m a fan of calling out selling points. These are what effectively amounts to selling point cards. What I’m not a fan of is not having any context to go with them. So for example, these are just little headings. And I’m going to read them to you. And I spend a lot of time looking at copy, guys, because this is the copy is the most important part of a website. You can have an ugly-ass website, and it’ll make millions of dollars if it has really, really good copy on it.

0:13:03
You can have a gorgeous website with terrible copy. It’ll make zero dollars. So I do want to focus on copy heavily in these reviews. But we’re also going to focus on other things as well. So I’m just going to read these, stay organized, stay connected. Oh, by the way, I have a whole list of things that you should look for. When you’re creating a website, and I’m actually the video that I’m going to be creating is actually for my agency for potential clients. I want clients to know what we look for and what we think about when we put websites together. If you’re trying to create a website that’s successful at selling your thing and ranking and all this other stuff, here’s the thing.

0:13:44
The thing that we focus on here is the things that we worry about. And then thus, when you’re critiquing a website, or perhaps even looking at your own website, you can go down the list and just see, am I checking all of these boxes? And what I want you to see in these reviews is these things coming up over and over and over again. And that’s what’s going to get ingrained into your head. And that’s how you’re going to learn. And you’re going to master this. And you are going to be a pro-dummy. A pro-dummy. All right, but let’s read this. Stay organized. Stay connected. Reach more customers.

0:14:19
Engage in scale. Now, put yourself in the position of a prospect who knows nothing about this tool. Stay organized. OK, I do want to stay organized. But here’s the thing. Every CRM system out there can say, we’re going to help you stay organized. Let’s look at the next one. Stay connected. I don’t know what that means. I mean, the point of a CRM is to stay connected. OK, so you’re really calling out the obvious feature. And that’s the feature that every CRM has. Every CRM’s goal is to help you stay connected.

0:14:55
Now, I don’t know how Nitro CRM helps me stay connected differently from all these other CRMs. That would be meaningful thing to talk about. But just stay in connected not a meaningful thing, because that’s the whole point of me having a CRM. Of course, obviously, I want to stay connected to my prospect. But I need to know, in order for me to make a decision, how Nitro CRM helps me do that in a unique way. Reach more customers. I need to know how that’s going to happen. These other CRMs, they don’t claim to help me reach more customers. They help me nurture the leads that I already have and generate more sales from my pipeline. How does this help me reach more customers?

0:15:40
I need to know. And by the way, you might think, OK, well, Kevin, this has answered somewhere else on the page. But you’re giving visitors way too much credit and assuming they have way too much time on their hands. That’s not how visitors consume content on the web. They read things. And if it doesn’t make sense to them right away, they just leave. That’s it. They don’t poke around saying, man, I really hope that this website continues to explain things in detail until I figure it out. No, they need to get it right away. They need to understand at a glance exactly what this is going to do for them and how this is going to benefit them.

0:16:16
Engage and scale. All right, I get it. But everybody, every CRM is going to talk about engagement and scale. Because once again, that’s the point of a CRM. So if you look like everybody else and you sound like everybody else and you say the things everybody else says, nobody’s going to sign up for your CRM. You have to say something different. So we talk about, and this is classic marketing, right? Unique selling proposition. What is your unique position in this marketplace? It’s not say, organize. There’s nothing unique about being organized. There’s nothing unique about being connected.

0:16:49
There’s nothing unique about reaching more customers. There’s nothing unique about engage and scale. This whole section needs to exist, but it’s not executed properly. Thus, it’s not doing anything for the product. So this whole thing has to be re-imagined right here. We’re going to keep going down. Now we see client information. Now here’s what I’m looking for now as a critiquer. I’m looking now to see we’ve failed right here to create a unique selling proposition. We’ve failed right here to show how this is a different CRM with a different experience and different outcomes. And now what I’m looking for is, is this mentioned anywhere? Can I find any inkling of how this CRM is different from other CRMs?

0:17:34
And now we’re going to just scan. Manage all your customer and client information. Keep track of all your customer information and know where leads are coming from. Create groups, use tags and filters. OK. X. Every CRM does this. I’m going to continue. Communicate efficiently with customers and leads. Connect with leads and customers through texting, live chat, bulk messaging, Google My Business, and Facebook messages. Reach your customers from wherever they are within your app. Most of this, maybe not Google My Business, maybe not. I don’t know. I’m not a CRM expert.

0:18:07
But texting, live chat, they all do this. They all do this. So there’s nothing selling me on Nitro CRM right now. All right. So I’m going to keep coming down. Now I can see a graphic. This does look like a mockup, though. I don’t know if Nitro CRM actually exists or if this is a concept CRM platform. But this image right here, I mean, it gives me a glimpse. But again, it doesn’t show me a lot. There’s a lot of empty cards here. That’s kind of a waste of space in my estimation. All right.

0:18:44
We’re going to come down here. So here’s the integrations. All right. They all integrate with all these things. All right. Send invoices and receive credit card payments. They all do this. All right. Manage your Google listing. So this is the only thing that probably doesn’t exist in all these other CRM tools. I’m not saying that there isn’t another one that doesn’t do this, but or that does this. However you say that, I’m dyslexic. But this is the only thing I’ve seen so far.

0:19:15
It’s unique. I’m going to keep going just a little bit. Our software literally does it all, and we add new features constantly. OK. This may not be. This is not a selling point. Some people are scared of new features being constantly added. And I’m also scared of software that literally does it all. Even though this literally doesn’t do it all, like the word literally there doesn’t actually fit because I don’t think you literally do it all. But even if you did literally do it all, that would maybe even be a down, like that would be a red flag for me.

0:19:46
Because it’s like, I know that software that tries to literally do it all doesn’t do everything very well. It just does a lot of stuff for very mediocre. Usually, that’s my usual experience. So this is not convincing me really of anything. At worst it’s probably off-putting some people. And there’s no specificity in it, right? There’s not really any value in constantly adding new features. I mean, what if their features I don’t care about whatsoever? So there’s not really an inherent value proposition there. Let’s look at posts to all your social media accounts, automate your office, workflow, website chat widget, book appointments. Okay, so we’re coming down. We’re coming down.

0:20:30
Here’s our pricing 97 per month versus 197 per month. And we’ve got done for you management, which I don’t know what that entails. I don’t know what done for you. So there’s gonna have to be an explainer there. Let’s look at this, website chat widget unlimited staff users, email marketing SMS systems, unlimited contacts, funnels, reputation manager, okay. We have some FAQs. All right, we’re gonna get into the technical aspects of this in just a second. I feel like I’ve torn this to shreds in terms of copy and positioning, but I feel like this is something that has to happen because the worst thing that could possibly happen is I go, man, this is just looking clean.

0:21:18
And man, you’re saying the right things. And then you launch this CRM, because I assume it really hasn’t been fully launched yet. And it’s just like crickets. And you’re like, who comes in? How do you bring website? No, but the copy is the problem here, right? So what I would focus on, if this is really your only, maybe there are other unique things, right? But if this is your only one right here, what you have to do is build an entire narrative and marketing campaign around why this is so valuable as the unique thing that your CRM does that other CRMs don’t do.

0:21:57
What is the problem? The major problem that businesses have, that this unique feature solves, and position that way up here, right? Get rid of this and position that here’s the unique thing that all these other CRMs are fantastic, but they don’t do this. And this thing is really a big problem in your life as a XYZ, whatever. That’s where you insert what their niche is or whatever, okay? The whole thing, now the entire page has transformed to other CRMs are great, but they’re not this. And this does something very special, and you’re gonna wanna pay attention, because it’s a big problem you have, and we’re gonna solve it for you.

0:22:42
And this is gonna, we’re gonna make this so crystal clear as to why Nitro CRM is absolutely hands down 100% the option that you should choose in the sea of other CRMs. The entire page needs to be focused on that. It can’t be stock photos, it can’t be all the same things that every other CRM says. This is a recipe for, well Kevin, I get thousands of visitors and none of them are signing up. That’s the conversation we’re gonna have in three months if we don’t fix the positioning and the copy of this site, okay? Just foreshadowing for you. Saving you time, saving you money.

0:23:18
All right, technical, quality. I’m clicking up here, we’re gonna start. We can tab through. So that’s good. So all of these are focusable. Oh, okay, I can use Enter there. I cannot use Spacebar. Okay, let’s keep going. There’s a get started, get started. Get started. You know, I like, oh, I can’t do the, mmm, skip the pricing table. Mm-mm, want, want, hold on. Okay, so here I am on this little dot, if you guys can see that.

0:23:57
And when I tab through, oh, I do get down. I get to this one, but not this one. I think what’s happening is the focus color here is blending. That probably does have a focus ring. It’s just the same color as the background, because you can see that color right here. If this is automatic CSS, literally all you have to do is on this card right here, put focus double dash white class. Put the class focus white, and it will make this focus ring white, so that it does not blend into the background. Because that’s a problem, we’ve already solved. We’ve already thought ahead. So that would be the solution for that. All right, let’s keep going down.

0:24:36
You’ve got, oh, look at that. We did skip a big section here. I cannot tab focus V’s FAQs. I cannot get to those at all with the keyboard. So this is an area that you’re going to want to pay attention to and get that fixed up. Now I’m down here with, okay, here’s another thing right here. Let’s talk about this. Again, UX conversion strategy, not a single soul in the world in 2023, because that’s what we’re about to be. Care is about the latest news of Nitro CRM. Take this spot right here, this call to action, craft a really valuable freebie of some sort. It’s like they read about this freebie and they’re like, I got to get my hands on that.

0:25:23
And that’s going to be your opt-in. Nobody wants the latest news. There’s, we have too much latest news, okay? Nobody wants any more latest news whatsoever. So this needs to be completely crafted towards some sort of freebie offer. And I see down here, yeah, there’s a lot of placeholder stuff. Okay, so obviously we’re still working on this. So this is good, because this is going to save you. A tremendous, rethinking all the narrative of this page is going to save you so much time and so much money and so much frustration, absolutely needs to happen. But check on this section right here. Let’s go up, I notice another thing that I cannot drag this slider.

0:26:04
I can only interact with it on the dots. I can keyboard navigate to the dots. I also bet if I had to put money on it, that I cannot swipe even on mobile. I cannot, I cannot navigate these on mobile. I can still click these, but I already know just by experience number one, this is not, this does not count as accessible. And number two, you’re going to get a flag from Google Search Console on clickable items being too close together, because these are too small and too close together to touch with a finger. And yet that’s going to be, so that’s going to be a flag. So definitely need to make that dragable, so that it can easily be used on mobile devices.

0:26:53
And let’s just check on the creation of these cards, because this is an example right here. Now it’s time, the time you’ve all been waiting for to show me your DOM, okay? I will absolutely get T-shirts made, let’s say show me your DOM. I may get T-shirts made that say certified DOM-S. I may get T-shirts made that’s something around DOM-E, okay? There’s a whole look, we can do so much with this. I already have a monetization strategy for this entire series. I just woke up this morning and I was like, this has to happen, this absolutely has to happen. So the graphic you saw, the form that you saw, I literally whipped that shit up at like 9.30 AM, and then I posted it all and I was like, let’s do it.

0:27:39
Let’s roll with it. Sometimes you just have to throw shit at the wall and see if it sticks. And I already knew, I mean, we already had a lot of messages from people saying, your critiques, they have to be an ongoing thing, they have to be a regular thing, make it happen. All I had to do was kind of just put a little dash, an answer to of like, can we brand this somehow? Can we make it fun? And so we have what we have today. Thank my first cup of coffee for all of that. Okay, yes, inspect the dumb. Show me your dumb. And then I’m gonna head over to the chat and we’ll see what people are saying about this stuff.

0:28:15
Okay, first thing I see as a figure tag on our image, we’re off to a good start. All right, because the reason I’m asking, and yeah, this is the reason I’m asking is because this is a classic case of would you use utility classes to build these, or would you use custom classes? I’ve used utility classes in the past. When I use utility classes for these kinds of sections, I often kick myself because this is a kind of, especially for SAS, this like left, right, left, kind of thing, graphic content, content graphic. It’s used throughout the website, right? If you ever have a features page, well, you have one. Okay, but it’s not active.

0:28:57
But if you, when you do have a features page, I imagine this kind of same layout is gonna be happening. And you end up getting to a point where you’ve created maybe eight rows, highlighting each unique feature. And then you’re like, oh, I really wanna change up the gap in those. Oh, I really wanna change up the spacing between the content, or whatever it is. Or I really wanna make it an uneven grid. Like we have this graphic needs to be three parts, to two parts on the content side, so that it’s not equal columns. I mean, these are decisions that you try to make in the beginning, but then maybe you change your mind later on.

0:29:33
And when you’ve built them with utility classes, you end up in want-wamp lands, because you’re like, now I gotta go remove all those grid classes, and I gotta add new grid classes. And it’s just not fun at all. It’s really, really, really painful. If you build them with a custom class, then you can change them all from one card. And you can also do the auto-alternation when you do this. So, you know, if you’re right now, some people flip these manually, literally in the DOM, they flip them, instead of using CSS to flip them. You should absolutely use CSS to flip these, not actually change the order of content in the DOM. So, let’s see, we have utility class, pure utility classes being used to create these.

0:30:21
So, it’s not like it’s, you know, you’re not a total DOM-ass for doing this, but that’s fun, right? You’re not a total DOM-ass for doing this, but you would be way better off. You would be a legit DOM-E if you created custom classes for these feature cards, and actually in frames, these are created with custom classes. So, this is all done for you. Create your custom class on this whole, I treat this entire thing as a card, right? So, this entire row is actually a card, and it’s just a grid-based card, and you have the graphic on one side, and you have this on the other.

0:30:59
Now, let’s come back down to the DOM area. Now, technically, this is a list of features, and so, you know, you would probably want to be using a ULLI structure here, rather than just a generative structure. We go in here, I’m not liking the H6 in this regard. I’ve made this DOM-ass mistake before, where you use like an H5, H6, or whatever for these. It’s really not necessary. Google puts almost, in my estimation, my experience, my research, Google puts almost zero weight beyond like H4. H5, H6, it could care absolutely less about. Even H4 to a large degree, I feel like it’s ignored. I feel like H3s don’t even have all that much weight.

0:31:49
I mean, definitely more than just text, but like H1s, H2s, and obviously H1, you only want one of those on the page. H2s carry the vast majority of weight. I feel like a little bit is given to H3s, and the beyond H3, I think they don’t care in the slightest. And so, I make these paragraphs, right? Client information, and then you’ve got H2s in the card, but really, this section, okay, we’re talking semantic accuracy here, right? So, we have a section. This section actually has no heading, and that, to me, is a big problem. Now, you can actually, here’s a technique that you can do, because sometimes, this is this section right here.

0:32:32
Let’s look at this. These are very important questions, because these are sticking points, and when we’re creating things like frames, these are discussions we have all the time on the back end. It’s like, man, okay, because there’s many different ways you could go. So, what I’ve actually started doing, if you have a section like this, because every section needs a heading for accessibility purposes, it helps tremendously for non-sided users, right? Anybody using a screen reader, it helps tremendously when every section has a heading, because they can also easily, on a screen reader, navigate by headings, and you have two sections in a row that have no heading whatsoever.

0:33:11
So, that’s a problem. Now, visually, this section can’t really support a heading. If you put a heading in this section, it’s gonna look fugly. It’s gonna mess the whole flow of this section up of these kind of like floating cards over the background, right? Now, here, here you can argue that you need to say, like, feature, you’re missing an opportunity to have copywriting here, basically, and more SEO juice right here. But, even if you didn’t want a heading right here visually, here is the play. As far as I’m concerned, and all the research that I’ve done, and what I’ve started doing, the play, is you add an H2 to every section.

0:33:48
So, you add an H2 to this section right here that says, it can be, it can have some SEO juice in it, it can have whatever you want to do, copywriting wise that you think is gonna be legitimate, but also it needs to be geared towards people with screen readers, right? It’s gotta let them know that what content is in this section. And then, you visually hide it, right? So, in automatic CSS, you just slap a class on it that says visually hidden, and it hides it from sighted users. It retains the information for crawlers and for screen readers. And that way, every section can have a heading, even if you don’t visually want it to have a heading.

0:34:28
So, it’s still good for accessibility, it’s still good for SEO, but in terms of non-sighted users, they still get the context of what’s going on in these sections and what’s going on on the page. So, that’s what I would do, is I would slap an H2 into each one of these sections, and then I would just visually hide it if you don’t want it to show up. And then, what I would do is I would have these done as custom carts with custom classes. That way, they’re all controllable as I add more of these all throughout the website. Okay, let’s see if we need, and then see, there’s more down here, right?

0:35:01
So, now you’ve got four on this page alone. If you want to change the grid structure, you’re gonna go four rows and change it manually on all four rows, remove classes, add new classes. And then, imagine if these rows are existing on three other pages now. Okay, you see how you’re starting to hate your life. So, this is a situation where you want a custom class and you don’t want utility classes. All right, let’s look at these real quick. This is gonna be the last thing that we inspect. I think we’ve done enough with this website. So, this is another area, because it’s, again, it’s like more, it’s a list of features, cards. I want ULLI structure here, okay?

0:35:39
This is an inspect, H, so we’ve got an H2 in here, and then we’ve got, what is that? Inspect an H4. So, you’ve really jumped, and you’ve got these meaningless H6s up here. So, you’ve jumped from an H2 to an H4, and I’m not seeing any H3. So, where is our hierarchy? What happened to our hierarchy here, right? I’m a fan of like, almost all cards are H3s, because they go in sections, which are governed by H2s, which go on pages that are governed by H1s. So, you see a very clear hierarchy of the headings. You want to avoid going from, here’s my H2s, immediately to H4s.

0:36:21
Not only, like I mentioned a minute ago, Google’s starting to, they just, they don’t really care all that much about H4s, but you just created a gap in the semantic, like, hierarchy there. So, I would avoid that, so I would, I would bake in that ULLI structure on these. I’m gonna inspect this real quick, and we’re gonna see, okay, paragraph tag. So, you get, you get a thumbs up on that. I don’t, there we go, it’s that one. Okay, you get one of those. I don’t know, I still able these things. I don’t even set up these things, I’m just hitting buttons.

0:36:59
Okay, let’s see what else we want to have looked at here. All right, so, semantically, the in the DOM, the div for the content in your heading, should come before the asset, whatever the asset is. Image, icon, whatever. This puts the heading, and ideally, in the DOM right here, this H4 comes before the H6, like this. And then if you visually want these things to be in the right spot, you do things like that, which this must not be, I don’t know if that’s flexed, or what’s going on here. Now, it’s displayed block. Flex, flexed direction, column. All right, and then I don’t know why the order property is still not working on that, but you get the point.

0:37:50
You would use order to move that above here visually, but in the DOM, your heading is the first thing that is found inside of the card. And then of course, we look at our getting started. All right, this must just not be linked up yet. But when you do get to linking these cards, do not make this the link. This is naturally what people would make the link. This can stay here. This can stay here, but it can’t be the link, because semantically this means absolutely nothing. There’s no context to getting started. This is the context of the card. This is the feature you’re linking people to. This is what they’re going to know more about.

0:38:29
This becomes the link. You make this card a relative parent, position relative, and you put a clickable parent class on this that extends the clickable area of this link to the entire card. Makes the entire card clickable while retaining this as the actual link in the card. And then this visual asset here also gets the order property to send it back to this other side over here. So visually, you have everything the way that you want, but your DOM is structured in a much better way, where you’re prioritizing the heading first in the element, and everything else is just flowing around it visually. OK.

0:39:08
That’s all I’m going to do on this one. So I’m going to close this. Well, I’ll leave it here while we pull up the chat. Let’s answer some questions about this before we immediately pull up the next website. And just are you guys following? Am I going too fast? Am I going too slow? Am I going to give me that feedback? We’ve got to help dial this in. This is episode one. So I need some feedback there. I’m going to answer some questions real quick. Mackie says, question, how would you structure the cards using UL and LI tags?

0:39:39
So it’s very simple. And you can look at frames for doing this. OK. What is Jafri says? Yeah, wait, what question mark? OK. How would that get done? Is there a title on this in the IC? Yeah, yeah, yeah. I’ve done this on other tutorials before, 100%. Let’s go to, all right, let’s go to here. I don’t know if I can think of one off top of my head. OK, I don’t even know what this one is. All right, that’s feature section Charlie. Let me get feature.

0:40:17
And I actually wrote about this in, you can see it right here. You see how the UL structure, so the actual grid, because most people don’t realize this. An unordered list can still be displayed as everything is anything you want. It could be displayed as flex. It can be displayed as a grid. So you create your grid. Your grid becomes the unordered list, because it’s holding the cards. OK, so that’s the unordered list. And then every card is an LI. This is what your DOM should look like for these feature lists. OK, so now we actually have a list of features, like a true semantic list.

0:40:56
Every card is an LI inside the UL, which is the grid. You can see that display grid right here. And then these are just flex items. And that’s how you get GAP. And then that’s how you can use order property on different things. These are H3s, OK? Let’s see if, let’s go to a profile card as an example here, because those always have like avatars in them. Profile section delta, let’s see what’s going on here. So let’s see if I, this is one I actually created the other day. Let’s see if I was a DOMS on here, or if we did this correctly, OK? All right, you see this? So visually, you see an image followed by content.

0:41:39
DOM-wise, you see an H3 as the first element inside the card. It’s contained in a div, which is body, which is handling this little paragraph tag, and then the H3. But DOM-wise, this is the first element inside the card. The image is actually second in the DOM, right? So the heading is prioritized in the card. The image is shown second, and it’s got a figure tag on it, OK? Then there’s finally your image. And what we’re doing is we’re taking the media wrapper. You can see it right over here. And we’re ordering it to negative 1, which makes the media always come first visually. But DOM-wise, it does not come first visually, OK? That’s the proper structure right there.

0:42:26
It’s always great, like pulling up my own work going, was I a DOMS? And are we going to find out? Right now, we’re going to find out. But that’s what I’m talking about. So you guys see the structure of UL, LI, content heading first, whatever holds the heading comes first in the DOM, and then visual assets, and then you flip whatever you need visually to come in whatever order it needs to come in. But DOM-wise, it’s all nice and clean and prioritized. OK, hopefully that example makes sense. All right, and I’ve done two tutorials. I did how to structure cards properly in oxygen. I did how to build cards.

0:43:02
Then I did an update of how to build cards properly in bricks. And I believe I’ve even done another one. You can’t see the styles pane. Why not? Hold on. Let me go bring up. Oh, it’s because of me. OK, all right, hang on, hang on, hang on. OK, there you go. How about that? Now you can see it. All right, thank you, Mackie. OK, so here’s what I’m talking about. So I’m going to click on profile card delta media wrapper. There’s basically two wrappers inside the card.

0:43:35
You have a body wrapper that’s going to hold your content. You’re going to have a media wrapper that’s going to hold your media. We call it media in frames because we don’t know what the hell you’re going to put there. You can decide, oh, I want to be super. I want to reinvent the web. And all my profile cards are going to have little videos of the person in them. Whatever you want to do, chief, OK? So we call it a media wrapper instead of like an image wrapper. Because if it’s an image wrapper, you put a video in it, don’t make much sense. So we just call it a media wrapper because you’re going to put media there.

0:44:01
That’s what it’s for. So we take the media wrapper and we just flip it visually with the body by putting order minus 1 on it. And if I take away this order, this is what these cards look like, DOM-wise. So you can see they all have heading text asset. Now when I flip on the order property, this is what they look like visually. So that’s just the example. Right there. Hopefully you guys can see that. Hopefully it makes sense. I’m going to put myself back down in the corner here. OK, good. So now does that answer your question?

0:44:31
Are we clear on that? Jan says Z index. It’s actually not a Z index issue. You don’t have to use any Z index whatsoever. It’s simply the Flex order property. Z index is actually stacking on the Z axis, right? Putting things on top of other things, not just shifting their order around. All right. We would like slow explanation about the link card. OK, so here’s the link. Let’s do this. Let me edit this one since we were looking at this one. Now, if it’s a blog post card in frames, we link it. If it’s any other card with a call to action, we link it.

0:45:15
We do this for you. But a team card, a lot of people just they want to display their team. They don’t want to link it. We don’t want to have you do a bunch of work, like undoing things that we’ve done. So we leave these unlinked because they’re very easy if you want to link them to create links. And I’ll show you two different things about frames here in just a second. First one is, I want to make this a link. So what do I do? Well, the first thing is you click the card itself, FR profile card delta. And you do a quick little check.

0:45:46
You go to style, layout, and you position this relative. OK? Now, that is going to, whenever you position a parent relative, it’ll catch whatever absolute child is inside of it. So if you take a child and you position it absolute, it’s the parent that’s relative. It’s going to catch it. It’s not going to let it go outside of it. If you don’t have this card as relative, and I position this heading absolute, it would fly up here at the top of the screen, or to the inside of this section of this section as relative. It’s going to look for its relative parent, and it’s going to go attach itself to the relative parent.

0:46:23
I need it to attach itself to this card. So I want the card to be relative. By changing profile card delta to position relative, I have effectively changed every one of these cards to position relative, all at the same time. That’s the power of a custom class, right? So I don’t have to go card to card to card, changing all these to position relative. I changed it in one area. All of my cards now, all of my delta cards, my profile delta cards, are position relative. The clickable parent techniques uses absolute positioning. The reason I’m doing this, the clickable parent technique uses absolute positioning to cover the card with the clickable area of the link to special technique.

0:47:04
I’ve taught it manually, but in automatic CSS, you can just add a class in the dozen for you. So now what I do is I take this heading, and I make it a link. So I go to external URL, and then I put in my link, whatever it’s going to be. So I’m just going to put a pound sign. That’s going to make it an active link. Now, I need to expand the clickable area of this text to fill the entire card. So how do I do that? I add a class called clickable parent right there from automatic CSS. This does it. No other framework has this class.

0:47:34
There isn’t another framework on Earth that has this class that I know of. These are the things I’m talking about in automatic CSS. And just, oh, it’s another framework. Those frameworks are the same. No, they’re not all the same. So as far as I know, this doesn’t exist anywhere else. Make sure life tremendously easier. So now what I’m going to go, as I’m going to go safe, and depending on your site structure here, so here’s a, you’re going to notice something. And this is actually really good to cover, because people are going to run into this challenge. You see around this image, there’s kind of the edge of the card, and it is clickable.

0:48:10
You see the hand, right? You see the hand here. I’m obviously not hovering over the heading. The heading is the clickable object. I’m coming down here. Look at this. You see this? This is not the heading. I did not make the wrapper the link. I made the heading the link. So this is accurate as clickable parent. However, watch this. Watch this. Ready? Ready?

0:48:30
Ready? Got it. OK. Bricks. And this is, again, let me rant for a second. OK. This is when we’re building frameworks, when we’re putting these things together, when we’re trying to do all these techniques the right way. Builders try to do things for you. ACSS tries to do things for you. Our job as developers is like, let’s do enough, but let’s really try to not do too much. And this is an example where Bricks is trying to do too much. And Bricks by default sets all images to position relative.

0:49:06
Well, guess what? When you’re using the clickable parent technique, any object in that card that is positioned relative will actually elevate itself above the clickable area. So this image on the Z axis is actually above the clickable area. I cannot click on that link. So what I have to do to fix this is we have to make sure that this Delta card avatar is positioned static by default. And sometimes, let me see if this fixes. There you go. OK. Sometimes, if it’s like really egregious, you have to use important.

0:49:42
But in this case, you don’t. So that one is good there. Now, you’re going to see these are not clickable. So there is a little bit of a challenge with the clickable parent technique using a class. Obviously, you’re going to now need to go to every card and put clickable parent on these things. However, you actually don’t have to do this. OK. You only have to do this if you’re doing this the DOME way. The DOMAce way. If you do this section, the DOMAce way, then yes, you have to go to every heading and put clickable parent on every card. Here is the way you should do it if you’re a DOME.

0:50:18
You open this frame. You make this one the clickable parent. And then you come over here. You collapse these. You go down to profile grid Delta. Here’s all your profile cards. And you just delete all of these. And no, I’m not going to copy and paste this back. What I’m going to do is I’m going to save that. Oh, shit. All right. This is actually a real frame. I don’t want to do that. All right. Save.

0:50:40
Imagine that I just did that. OK. So I delete all the profile cards except for one. And then I go into the back end. I go over here in the WordPress. Because I’m not going to be a DOMAce. All right. I have to do this the right way. I’m going to be a legit DOME. And I’m going to go to Metabox. And I’m going to go to Post Types. And I’m going to create a Post Type called Team. And then I’m going to put all my team members in the Post Type. And then when I’m done doing that, I’m going to come back to this grid, which only has one card.

0:51:08
I’m going to turn that card right here into a query loop. And then I’m going to query my team members into this section. And because I’m querying off of one instance of this card, that clickable parent technique now extends to every card automatically in that grid. And I only have one card to manage all the other cards, manage themselves automatically. That’s how you build this section without being a DOMAce. If you’re new to the broadcast, we explained what a DOMAce is in the very beginning. It’s a lighthearted joke. Don’t at me. It’s just we’re all DOMAce from time to time. And our goal is to be DOME’s and to do things right in clean code and best practices and all of that stuff.

0:51:48
But that is how you, one, you saw me customize a frame. Two, you saw me best practice for creating a section like this. I need to turn off that or other people are going to now have query loops in their thing. So I’m going to save all of that. All right, we’re back to the way that we know. We’re not back to the way that we were. Hold on. I’ve got to get rid of this internal post page. OK, just get rid of that altogether. Thank you. Get rid of the clickable parent class. OK, now the frame is back to the way that it was. But hopefully that makes sense. So you’re making the link the thing, because who you’re linking to.

0:52:22
You’re linking to Jane Doe if you want to link to this. So this makes sense, right? You’re extending the clickable area to the entire card. And then so that you don’t have to do that on every card manually, you actually query all these team members with a custom post type. And then you’ve done everything the way that you’re supposed to do. All right, does that make sense? Let me get back to the chat. Oh, OK. I need one tool that sucks all this knowledge out of Tommy’s brain, what the fuck? OK, yes. Well, that’s why we’re here, Mark. That’s why we’re here.

0:52:54
All right, John, Jan says, but I used the technique many times as well. Nice. By the way, if you are in a situation with, I know, Andrea sweating bullets right now because I’m working on a live frame. And he’s like, no, because he’s going to get a ticket. He’s going to have to go fix whatever I just messed up. All right, so it’s fine, Andrea. I think I put it back the way that it was supposed to be. OK, is the image still not static? No, the image is static. That’s the point. If it’s position relative, it won’t be clickable. It’s got to be position static.

0:53:30
So now it is part of the clickable area. So that is correct. If I refresh this, now it’s back to the way it was. Nothing is clickable. So we’re good to go. OK, let’s go. Did you also make the profile pick static? That’s exactly what, yeah, I made the profile pick static. That’s what you need to do. Because bricks tries to make it relative by default. There’s an instruction in bricks that targets all images and sets them all to position relative. So if you’re using the clickable parent technique, you kind of have to undo that. Or you have to override that auto instruction.

0:54:04
All right. Oh, I was going to say, if you do find yourself in a section where you’ve got a bunch of cards and you have to use clickable parent on all of them, then what you need to do is learn the clickable parent technique how to write the code for clickable parent, which I caught in a separate tutorial. And then add that code to your custom heading class in that card. And now all of your cards will be clickable parent by default. And you won’t need a class on every single heading. OK. Good, good, good, good, good. Question. If you have CPT called team and want to show contact info like mail, telephone, social media, et cetera, how do you do it with bricks?

0:54:42
Is there a way to pick a dynamic icon? OK. You would do it with custom fields. You don’t need a way to pick an icon. You’re going to use logic. OK. So first of all, you decide what items of data you want. Do you want them to be able to put their Facebook profile? Do you want them to have a Twitter profile? Do you want them to have an Instagram profile? You create a custom field for all of those. OK. So you have a here’s your YouTube. Here’s your Twitter. These are all custom fields.

0:55:15
You can, and they’re all, I would probably make them all static in the back end. So it’s like this field is for YouTube. It’s not a generic field that they can duplicate and just put whatever they want. It’s literally, this is the YouTube field. There’s only so many social medias, right? And you’re only going to support a few of them. So YouTube, social, YouTube, Twitter, LinkedIn. Let’s just say those are our three. YouTube, Twitter, LinkedIn. So you create three custom fields for those. You then go into your card and you create, however it needs to be laid out, the icons for your, in fact, we probably have one.

0:55:49
Let me go to Bricks, Templates. I would show you how to do this. Profile. I just don’t know which one it is. It’s not, let’s go to Section. Let’s see. Profile, Section Delta. Let’s look at Delta real quick. That’s the one we’re just doing. All right. Profile, Section FoxTrot. It’s got to be one of these with social cards. Maybe it’s still submitted for approval. Profile, modal, bravo. Here you go.

0:56:19
This is a better example. So this frame is designed to be a modal. So ideally, let’s say you had Profile, Section FoxTrot right here. So, wow, that’s a good one. But I want the same one we were looking at just a second ago. Profile, Section, Delta, View. OK. So here we were. You want a decision you have to make. When people click on this, if you want this to be clickable, do we want it to go to a new page with this person’s profile? Or do we want to just open a modal and show their profile in a modal? I love the modal approach.

0:56:52
If there is some sort of SEO benefit to having its own page, or you’re going to have a lot of information, then do its own page. But if it’s just a little tiny thing, like a bio, some social links, modal all day, because putting that little bit of information on its own separate page is such a waste of space and time. So just make it in a modal. And so we made a frame for you. Here’s a modal frame. So you just get your Bricks Native modal element, or Bricks extras, or when frames has its own Native modal component. You drop this frame into the modal. Now you have a modal all built out ready to go.

0:57:27
And I want you to see this, guys. I want you to see this on the back end. I’m going to open this. There’s a lot more going on here than just social profiles. My gosh, what are these little A icons? Where did those come from? Why are they sitting next to? This is actually from Automatic CSS, indicating that there’s accessible text alongside of these icons. Because the way that you properly build these icons is not to just slap icons in a container. You cannot do that. This is not accessible. So we have this container called social icons.

0:58:00
Then we have, let me collapse this, make this easy for you guys. And it’ll put it up here. So it’s hopefully not behind my big head. All right, so you see social icons. The Facebook, Instagram, these are containers, guys. These are not icons. These are containers. I’m going to open a container. Inside the container, you have an icon. And then you have hidden accessible text. I want to, OK, these are links. Let’s go here for a second. Let me turn the volume down on this. Cover your ears. This might be a little loud.

0:58:30
Hang on. Voice over on Chrome. Link. Link. Follow me on Facebook. Make, link. Follow me on Instagram. Link. Follow me on TikTok. Link. Follow me on YouTube. OK. Voice over off. Do you guys see that? That’s very, very important.

0:58:45
Because if you put icons in a div and just link them, you know what it’s going to go? When somebody that’s accessible, when somebody’s using a screen reader and they select those icons, it’s going to go icon. Link, htts, facebook.com. And it’s just going to, like, all this meaningless nonsense, right? But when you do it in a frame, it says, link. Follow me on Facebook. Link. Follow me on Instagram. Link. Follow it. You get the point, right?

0:59:15
There’s a proper way to do things. There’s things that other people don’t care about. Don’t pay attention to. Don’t know about. It’s a lot of dumbasses in the world. It’s like, I feel bad when I say it. I feel bad when I say it. But we got to stick with the theme. OK. We got to stick with the brand. So if you want to be a dummy, this is how you build them. So you have, and the frames does all this for you. This is what I’m talking about, right? The tremendous amount of value that’s packed in here. So Facebook is a wrapper.

0:59:46
The wrapper is the link, OK? Because naturally, it’s going to announce whatever is inside the wrapper. But it can’t announce an icon. What it can’t announce is hidden accessible text. So we have Follow Me on Facebook is just a text field with this class hidden accessible, which is also from Automatic CSS, which basically just hides it from sighted users. And so you can put whatever in here that you want it to announce, and it’ll announce it, right? And but you can’t see it on the front end. See on the front end, it just looks like this. It looks nice and clean. So see, there’s a lot going on under the hood.

1:00:18
So back to your question. You have a custom field for your Facebook. If you are building this model right here, custom field for their Facebook URL, custom field for their Instagram URL, custom field for this, custom field for this. Got it? Then what you do is you have this card. Well, this card has all of them. Then you use conditional logic, right? So you click on this, and you go up to, let me click on my wrapper. Here’s my Facebook wrapper. And I go to conditions right here in Bricks. And I add a condition. I can’t go very far because I don’t want to screw up this frame.

1:00:48
But you add a condition that says, if the field is not empty, then you’re going to show this icon in link, right? So on the back end, if they leave their Facebook custom field empty, it won’t show the Facebook icon. Because the logic is checking to see does that field have data in it? If it doesn’t have data, I’m not going to display. If the next one has data, I’ll display that one. So you just use it with custom fields and a little conditional logic inside the modal BingBang Boom. You’re done. All this is dynamic. All of it’s scalable. All of it’s maintainable. It’s even easy for users to go in and adjust their own profile and their own social profile links.

1:01:28
You can even use WS form and a form on the front end. They don’t even have to go into admin. And they can actually adjust those custom field properties right from a front end form without ever touching the WordPress admin. So there’s so much that you can do with scalability and maintainability when you do this. And then obviously, frames has the semantic HTML. It’s got the accessibility all built in. I mean, the frame is that you could build a modal that would probably take you. If you’re doing all these things crossing all these C’s dotting all these eyes, even if you’ve done it before, at least 30 minutes. There’s at least 30 minutes to get to this point right here.

1:02:03
You can just open frames and drop this in and you’re off to the races. So save the tremendous amount of time. And this is like, that’s one element on the website that we’re talking about. All right, I feel like we went off into a huge tangent. Are you guys still with me? Oh, wow. We got plenty of users. We got our visitors or watchers. What are we? Dommies. OK, Dommies. We got plenty of dummies. Amanda says, I do think it’ll be native.

1:02:28
All right, 1.6. All right, you guys are talking amongst each other. Didn’t even think about conditional logic. I somehow tried to figure it out with repeater, with icon picker and text. Ah. Yes. Yes. That is the, that, I mean, I see where that attempt would come from. And I’m sure I’ve attempted it that way in the past. And just from personal experience of banging my head against my desk, I came to the use some simple conditional logic, and you’re done. I thought an are you label is there for screen readers?

1:02:59
Don’t understand why I would need that hidden text. Hey, Tobias, that is a, or Tobias. I don’t know how to pronounce your name. But great question. You can absolutely use an are you label? I say are you? I’m pretty sure it’s area, but they didn’t spell it right. So I say it are you because that’s how it’s spelled. So yes, you can. Hidden text is the best way, easiest way to do it. Are you label is good if you can’t use hidden text for whatever reason. Sometimes you can’t. Sometimes you’re in a position you can’t, you can’t use hidden text.

1:03:34
So I think the biggest downside to the are you labels is translation. So automatic translation is last time I checked cannot translate are you labels. But it can translate hidden text. So you have translatability when you use hidden text. That’s I think would be the biggest difference. Now if that’s changed as of late, then somebody can update me on that. But as far as I know, that’s the biggest difference. And hidden accessible text is easier to manage. So if you notice, if I want to change these messages, I just click on my a indicator right here for my hidden text and I change my text. Click, change, click, change, click, change.

1:04:19
Now this is like, you might be like, oh man, this is like nitpicking. But for me, if I have to click, click, click, click. OK, how many clicks does it take me to get to attributes? Because this is where I would add an arealabel. And now I have to add it like this, OK, area, dash, label. And then I’m going to follow me on Instagram. OK, great. Now I can do it to the next one. And the next one, the next one. That’s a lot. And then by the way, there’s no indicator that there is any area text on these. So when I’m looking, if I get out of that panel, here I am looking at this, right?

1:04:59
Zero indication that there’s an arealabel on any of those items. And so if I’m coming along after somebody else and I’m trying to maintain this thing, you know what I very may well do? Watch this. This is why we thought of this indicator for a hidden accessible text. Somebody else may come along. Or I talk about the three-month rule all the time. Three-month rule is you build it now. But if you make it, if you’re a dumbass, and you do something that’s really technical and hidden, and then you come back three months later, you’re not even going to remember what you did, OK? And then you’re going to do something like this.

1:05:30
You’re going to come in here, and you’re going to be like, oh, I need to change this icon to Twitter. And so you change this to whatever. I’m not going to change it because we’re working on it. This is an actual frame. But let’s say I change this to Twitter, and then I change the link. I grab this, and I change the link to my Twitter link. And then I go change this to Twitter. So now it’s a label Twitter, but I forgot. Oh, Barry, deep in this style tab in attributes, there’s an ARIA label. So actually people on screen readers, see everybody else sees a Twitter icon and goes to Twitter. But all the people on screen readers that says, follow me on Facebook, right?

1:06:05
Because you didn’t change the ARIA label. Because you forgot it was there. Because there’s no indication that it even has one. And so that’s a problem, right? And so hit an accessible text is everybody, especially when you use automatic CSS. You can see that it’s there. Hey, what’s that A hanging out next to my icon? What is that? Oh, yes, I remember now. We needed hit an accessible text for accessibility. I need to change that label. OK, you got it? Good. You can even make that dynamic.

1:06:34
And you could probably do this with the ARIA label. Dynamic is just an extra step. You could definitely, I think, make it dynamic. You have to, again, think about some different use cases and stuff like that. But that’s why. That’s the difference. OK, let’s see. Question, how do you dynamically create models? So like with Bricks extras, I know. I’ve stopped reviewing. I need to, we need, I’m answering questions to Hunsey. I don’t, should I be answering questions? Or should I just be reviewing? What should I be doing?

1:07:04
Should I do a little bit about how do I balance this? How do I balance this? I’ll stay for two hours today if you guys want to stay for two hours. I think we’ve done enough there. I think we’ve taught. OK, I’m taking to Hunsey’s point. We’re moving on. We’re doing another review. OK, let’s go to, here’s the original one we did. We’re going to bring on this one now. So we have Outstand Brand. I don’t know. Hopefully you guys are going to value out of that. You like that stuff.

1:07:37
I mean, it is called Web Design for Domies. And we’re talking about a lot of dummy stuff right there. That’s a lot of dummy content. OK, Outstand Brand. Let’s get our first glimpse. Let’s just sit here for a second and get our first glimpse. Your branding deserves to be outstanding. I agree. I agree. If your logo website or marketing isn’t growing, your business, growing your business and making you money, then we should chat. OK, OK. I can book a free call. I can see your work.

1:08:14
I see a testimonial. I see a video. You have something amazing to offer the world. But maybe you’re feeling a little stuck when it comes to your brand’s visuals, voice, or values. You know that you have to stand out from the mess of marketing and cluttered communication that people are sifting through all the time. My name is J. OK, I get the point. Well done. Production quality very high. Obviously, obviously has put thought and attention to detail into the messaging. Started out strong. OK, this is probably an example of I’m getting good vibes here.

1:08:58
This is an example of where we’re going to be doing reviews on web design for dummies. Where if you are knocking it out of the park, I mean, you’re just going to get free advertising. You know, probably some people are going to want to contact Outstand Brand here and work with them. But I’m getting, I’m liking everything that I see so far. I really like the logo. I like clearly you are your own client, too, because at some point along the way, you said to yourself, I need to make that logo bigger. And that’s, I mean, a project has not officially started until somebody has said that. So you definitely check the box there.

1:09:37
But I do like the branding. I like the clean navigation. We can go about. We can go work. We can see websites. I don’t really know the distinction here, though. That maybe needs to be rethought. I don’t know what the difference is. Just at a glance. I could click on them and find out. But at a glance, I don’t really know what the difference is between these two. Maybe this is the service. This is the portfolio. But they almost feel both like they would be portfolios.

1:10:04
Maybe this is branding. Maybe this is website design. I’m not sure. So the fact that I have questions probably means that needs to be rethought. I like the call to action. I have a standard call to action of book a free call. Let’s start scrolling now. What could outstand brand do for you? Beautiful branding, websites that work, web hosting without the hassle, marketing that doesn’t waste your money, authentic photo, video, and content creation. OK, I’m going to grade these. Beautiful branding, logo graphics print, et cetera. A, websites that work.

1:10:44
D, web hosting without the hassle. A, marketing that doesn’t waste your money. A plus, authentic photo, video, and content creation. A, OK. This is the one I would work on. I don’t know what work. I think people all feel like, what? Give me the context of work. I think what you mean is converts, you know, like attracts visitors. Like there’s some detail in there that’s not being communicated. This is the weakest of the five points, OK? If you made this strong, you’d have all A’s. All right, so just work on that one. I like the background.

1:11:23
I like everything that’s going on with the flow. Good accents. Always obsessed with your brand success. Maybe like me and have struggled in the past to get a website to work. Hey, empathy. Let’s connect with, hey, I know. This is not easy for you, right? I’ve been there done that before. All right, it’s classic, but it’s important. Got and stuck staring at awful options from a designer. Sat scratching your head over how to get results from your ads and marketing efforts. I’m sure everybody’s done this, right? OK, so we’re connecting image, imagine, having a clear process.

1:11:58
Imagine having a partner for the creative side of business. Somebody who wants to put more back in your pocket. OK, so clarify your brand messaging, help people remember you make back much more than your investment. These are all great things. 100 plus projects completed for clients. News OK, so some good call outs here. I see you. All right, so we already know now we’ve, well, we met you up here. We’ve met you again here. I like it’s like a good, friendly lifestyle-y photo. OK, I like all these things. I like the things that I’m seeing.

1:12:30
Our simple three-step process. Now we’re talking about processes. Very story-brand feeling, right? The story-brand framework is feels like it’s coming alive on this website. So now we’re talking about the process of discovery and design and delivery. OK, it’s all very clear. Here’s some of our favorite projects. OK, so we’re getting to our portfolio. We’re going to find out in a minute what the deal is up there in the navigation. Don’t worry, we’re going to find out. Game clarity, be remembered, make more. I like the little tagline.

1:13:01
I like, OK, I don’t know if this website is done or not. I think I feel like it’s still being worked on. The home page is pretty much solidified. But let’s see what’s going on here. OK, so this is a service page. Website hosting and management, custom websites designed to help you grow. I would change this to just say web design then. And here’s why. One, that’s what it is. It’s the service. OK, two, for SEO purposes, you’re getting zero value from the word websites. But if you had web design, and then you had web design right here, now you’re probably in the realm of ranking for web design.

1:13:44
OK, website building hosting maintenance. Here’s the thing about Google. Guys, Google is not going to be like, oh, it says website building. Now, Google’s algorithm can actually translate website building to website development. It really means that’s the same thing. Web development is used more, so it’s a better term to use. But semantically, Google knows that website building is website development. Now, what Google is not going to do is go, oh, you mentioned website development and hosting and maintenance, all in the same page. Therefore, this page can rank for all of those things. That’s not going to happen.

1:14:22
You have to have a page for website maintenance. You have to have a page for website hosting. You have to have a page for website development. You have to have a page for website design. Every individual term that you want to rank for, you’re going to need a page for it. If SEO is important to you. So this needs to say web design. Really, if you have all these services, you need four services pages. And then this should say services. It’s a drop down and you can choose. And it’s very explicit web design, web maintenance, web hosting. You get it.

1:14:51
So that’s what needs to be. If you care about SEO, if you don’t care about SEO, then you can ignore everything that I’m saying. But if you care about SEO, then that’s how I would recommend structuring it. So this is the service page. Just from a UX standpoint, this has to be reworded. Because I didn’t know exactly what that was going to be. OK, so now we’re going down. Good, good, good. Here’s the thing I don’t like this. I want first church of the resurrect. I want that under here. I want the labels underneath. The headings need to be underneath here.

1:15:28
Because at a glance, it just seems like random images. I’m going to see if these are keyboard. We’re going to go in through a little technical here. OK, so I can keyboard navigate this. But watch this. Watch. I already see the first problem. I just flew right past a book of recall. My keyboard will not focus on either, oh, wait, hold on. I know why. No? Wait. Yep. OK, let’s inspect. Show me your DOM, sir.

1:16:03
OK, this is an oxygen website. Let’s go with, there’s no link. OK, I don’t, yeah, there’s no. That’s why it’s not focusing on these. Because they’re not actually links. They’re just placeholders sitting there. OK, moving on. Those will be clickable once they’re actually turned into links. But these is what I wanted to check on. Oh, look at that. There is no. OK, guys, look at the bottom left corner of my browser. It is actually keyboard navigating selecting. But there’s no visual indicator that I’m on any of these items.

1:16:39
So it actually is hitting them, but it’s not visually indicating that it’s hitting them. So that is something that needs to be sorted out. And I can prove that by hitting Enter. And it takes me there. OK, so those are keyboard navigatable. It’s just nobody knows that they are. And I want to, let’s go a little F5. Voice over, visited, link, visited, link, heading level 2. Link, heading level 2. Brew passers, visited, link, heading level 2. First church of the resurrection. Voice over off. So the other reason why you want to make these lists. Just off of what we were doing right here, I can tell that these aren’t semantic lists, OK, because of how it’s announcing them.

1:17:21
Because for screen readers, it’ll announce these things as lists of items. It’ll say list, five items. It’ll count the number of items that the person is about to scroll through. It gives them so much more contextual information. And guys, if you don’t care about accessibility, I want to tell you something. When I say, show me your DOM. And everybody’s like, nobody cares about the code. Clients don’t care about the code. Google cares about the code. Google is going to care more and more and more about the code. So SEO, I can almost guarantee, especially as accessibility gets adopted worldwide.

1:17:59
It’s already mandatory almost in some countries. It’s recommended in the United States. It’s officially regulated through the ADA in the United States for government organizations, not public yet, but for government or not private yet, I should say, but for government, public, organizations, it is regulated through the ADA. I don’t know what they’re going to do in terms of private, OK? I’m not for regulations for this. I’m for everybody understanding the value and choosing to do it themselves and people prioritizing companies that do. And I’m all OK with Google prioritizing companies that pay attention to this stuff. But what I’m getting at is, especially as it becomes more widespread, especially as more and more people get privy to it.

1:18:46
And as that snowball continues to roll and get bigger, I can almost guarantee that Google will see accessibility as a ranking factor, OK? If they aren’t already, they may already be doing it. And this haven’t. It’s not public, OK? I can almost guarantee it will be a ranking factor. So you have an opportunity not to mention with all these policies and lawsuits. The other thing is, even though it’s not a policy to do it in the United States, you can get sued out your ass. There are, it’s like an ambulance chasing thing, right? There are people who are dedicated to going and finding websites that aren’t accessible. A big companies that have lots of money and they sue them, right?

1:19:29
So if you want to tell your clients, hey, look, one, you can get sued for not crossing these teas and dotting the eyes. Number two, it very well could get regulated in the future, right? And number three, it’s very possible that Google sees this as a ranking factor. And we’ll heavily wait it more and more and more as we go as a ranking factor. So you are incentivized as a company to make your website accessible. You are incentivized as a web designer to corner that niche as a value add to your clients, right? Clean DOM, accessible, semantic agency, all these things should be additional selling points.

1:20:10
It doesn’t matter if they don’t care about those things specifically, they care about ranking. They care about not getting sued. They care about policy adherence. OK, these are things that they care about, especially the bigger the business is. So if you don’t understand these things and know these things and pay attention to these things, you’re going to get left behind at some point. You’ve got to pay attention to this stuff now. It’s very, very important. And that’s why I said it’s so great that frames just does it for you, because you don’t even have to really be an expert. A lot of it’s going to get taken care of out of the box.

1:20:41
But that was all to say that this should be a ULLI structure right here for your portfolio cards. OK, let’s keep moving on. That was my little rant for that part of that, because there are a lot of people like, it doesn’t matter. Well, it actually does. And it’s going to matter more and more and more and more as we go. OK, so pricing, starting from the top, from $24.99. In the chat, I want you to tell me, do you put your pricing on your site or do you not put the pricing on your site? Or do you do a hybrid?

1:21:16
I feel like there’s a lot of half and half maybe. It’s like half due, half don’t. I just want to know. I think some of this needs to be cleaned up a little bit with the left aligned button text and such, breaking to two lines, that kind of thing. Here’s why I’m not a fan of it. Here’s why I’m not a fan just looking at this at a glance. So one hour content strategy session, and this is for web design, right? OK. So one hour content strategy session, I right now may not know how important content is. So thus, I don’t know how important a content strategy session is.

1:22:00
Five pages. I don’t know how many pages I need. I mean, I could probably guess, but really it’s up to you to tell me. Custom design, OK, I get that on page SEO, I get that analytics, I get that built on WordPress. Maybe that’s a selling point to some people. Maybe it’s not. Maybe it’s completely meaningless to some people. I don’t know your market. I don’t know who you work with typically, but I don’t know. This, this, I would need more, maybe, background data on to make decisions on this, but I just feel like we’re the experts, OK?

1:22:33
I don’t go to a doctor, right? I don’t go to a lawyer. Let me go to a lawyer’s page, and there’s like a pricing grid, and it’s like three briefs, three this, three that, and I’m like, man, I don’t know. I don’t know what any of that means. I don’t want to lose my case. Which one of these packages do I win my case with? That’s the kind of stuff people care about, right? They don’t really care about these list of features. They don’t really know how to choose. It’s like I got to go to a restaurant that I’ve never been to before, and it’s like, here’s all your menu item. I know it sounds good, right?

1:23:12
But I kind of just want somebody to, you know when a friend is like, dude, you’ve got to try this. It’s like, OK, that’s what I’m doing, then. You’re the expert. You’ve been here before? I’m taking your word for it. Let’s roll. If that is an easier relationship to have with people. So again, where position is experts? They should come to us and tell us what their goals are. We should give them the prescription, OK? We should not let them choose their prescription. That’s how I feel. All right. You got some FAQs, keyboard nav.

1:23:43
Yeah, kind of. This is technically not accessible. So it changes color when you keyboard nav it. But that cannot be the only indicator. So the reason why we have like outline focus, like on this button right here, is because that outline was not there, and now it’s there. It doesn’t really matter what color it is. Part of the accessibility rules is that you can’t have one indicator because really to a color blind person, this is not enough of a visual indication that this is being selected, that this is active focus. So something else needs to happen along with the color changing. The color can change.

1:24:26
That’s not a problem. Something else has to happen along with the color. It’s got to change size, font weight. It’s got to get an outline. Something’s got to happen to it visually to indicate to color blind users that something is being actively focused there. OK. Let’s go to your work page. All right. My thoughts on this is it gives me a little sense of a let down in terms of, I only see three items in a lot of space, a lot of space, like these three little things floating in all this space, which kind of communicates there’s not a lot here to look at.

1:25:07
And that would be a little bit of a let down if I really want to see examples of your work. Now, I only put three projects on my site. But if you look at how they are structured, so that you go to latest projects, right? It’s a lot of, there’s a lot of stuff that digest in those three projects. You get large images. You get a little mini write up. And then it’s scrolling us down the page. So it doesn’t give you the feeling that, there’s only three little things here like this does. This kind of, because of just how it’s designed and positioned, it gives you the feeling that there’s just not a lot here. And then it’s like here’s featured, this is really featured projects.

1:25:48
And this is really featured work, because these are projects. But they both say featured work. Featured work and more featured work. But there are actually two separate things, semantically. So I would clean that up just a little bit. If I go here, I see a nice gallery. OK, this is all good. I’m just looking at the work now. This is all fantastic. It’s fantastic work. So that really helps. If you suck and I come to this page, then this page is also going to be a big let down. But you don’t suck. That’s the good news.

1:26:26
OK, so book a free call. What happens? OK, we have this. So the one thing I will say here is some people may not want to use the calendar. And if they don’t want to use the calendar, what are their other options? The answer to that question is there are none. OK, because all these buttons do the same thing. There’s no phone number. There’s no nothing. So I would say, let’s give the person one extra way to contact you. Here’s how you do it. Book a free call, little text right underneath here.

1:27:01
So you put that button in a container, little bit of text right underneath here. It says, or text me at. Or call me at. Or whatever. Whatever the alternate option is, OK? Give them a little alternate. Put the alternate down here in the footer. Just give them one extra way, because I don’t want you to lose leads. If somebody comes in there like, man, the hell is this thing? I don’t know. Because also when I pull it up, OK, let’s talk about user experience.

1:27:28
This is a conversion optimization discussion. I can just already know what you would find if you ran an AB test. We don’t have to run an AB test here. I can literally just tell you what will happen. People open this, and they don’t see any appointments on November 2022. And they don’t see these tiny little fucking arrows right here. And so they don’t click and go here and find an appointment day. Instead, they go, oh, this guy’s fully booked. Or what do I go to December? I don’t know. A lot of unanswered questions. So they do that.

1:28:04
And then they do that. And they close. And then they’re off to somewhere else. They just, oh, I’ll get to it later, whatever. If you had an alternate booking method, you would convert more people. We don’t have to run an AB test to know this. I just already know this. So just give them the option right out of the gate. Give them a second option in case something goes wrong with this. Maybe they’ve got a pop-up blocker, or an ad blocker, or something. And this little modal doesn’t even appear when they click on it.

1:28:34
There are any number of things could go wrong. I don’t know. Give them a second way to get in touch with you. And you’ll get more leads. It’s as simple as that. All right. I think we’ve done enough there. We’ve got 30 minutes left. I can get to one more. I want to hit the comments here. Let’s see what we’re doing. Review and answer questions. So Jason likes the answering the questions. Sasha likes the answering the questions. Chris wants me to review but hold questions till the end.

1:29:06
That website is amazing. Outstanding brand. So you’re getting some love from the other Domies on the stream. I like that you answer as you go. Can definitely mix doing reviews. Break to answer a slew of questions. OK. Check responsive. Somebody says check responsive. Let’s check responsive. We didn’t do a lot of DOM. We didn’t do a lot of show me your DOM in this one. I did a little bit of it. But it all looks good. I mean, guys, what did you expect?

1:29:36
I mean, everything else that he did was pretty buttoned up for the most part. What did you expect here? Disaster? No. No, no, no. He’s not a DOM-ass. He’s got his stuff together. OK. Copy is definitely clear. Definitely a good read. I like that the site is nice and clean. Very nice, very clean. Can we send in sites for review? Yeah, absolutely, Michael.

1:29:59
Look, if you don’t get your site reviewed on this one, you’re in the queue. So everybody that’s submitted is officially in the queue. So the next time we do this, I’m going right back to the queue. I’ll just shuffle them up. It’s just we’ll make it random. I already have a mod. There’s already a monetization strategy. I mean, we’re not DOM here. I’m not a DOM-ass. And I’m not a DOM-ass. So here’s what we’re going to do. Eventually. I mean, we needed to check. Like, what is the, we got a lot of people here.

1:30:28
There’s a lot of people are going to want to review their sites. There’s going to be a lot of people like this man right here who he knows. He knows that he has a good looking site. OK? He’s not DOM. But he’s like, hey, I’ll put myself out there. I want to see what Kevin says. But it also gives you free exposure. I mean, when we’ve got hundreds and hundreds and hundreds of people watching, and you have the opportunity to get in front of them, that’s kind of valuable, right? So there’s going to be a, there’s probably what I would imagine might happen is we have a standard queue that we pull from.

1:31:03
And we have a priority queue. And you could probably, I would imagine, like, pay to be in the priority queue. I don’t know, right? It’s just, you understand, right? Because it’s also a situation where, I mean, there’s going to be people that are like, I just really want mine reviewed. I don’t want to like play the lottery, OK? And wait for, maybe you’ll come around to the 5,000 submissions that you’ve sent in. I just want to know I’m going to get my site reviewed, dude. OK? So I’ll pay you, and let’s get it up there. And let’s make it happen.

1:31:34
And then so there’s a priority queue. We’ll still pull out of the main queue, but there could be a priority queue. We might do it with the YouTube thing, where it’s, I don’t even know how it works. How does the YouTube work? Is it a super chat or something? I got to look it up. I don’t even know what a super chat is. I think it’s like, you can give money in the chat, and then that can make your comments stand out. But the only thing is, I don’t know if you can submit a link with that. There’s a lot of logistics, but you understand how this might play out.

1:32:00
And then everybody just gets tremendous free value as we dig deep into all of these websites. So everybody wins. It’s win, win, win, win. All right. I took a position as a web developer for a government group. Guess the first thing I’m fixing on their sites. I would guess accessibility, Chris. Ding, ding, ding. OK. So look, it’s a selling point. I said to, I believe it was the Hunsey, right, asked, how do I sell myself to other agencies? How do I get hired to work for other agencies?

1:32:31
And I said, don’t just come in and say, hey, I can design websites like everybody else. Have a unique selling point. Guys, back to the same thing we talked about on the very first website, we reviewed. What is your unique selling point? Accessibility gives you a unique selling point. Analytics gives you a unique selling point. SEO used to give you a unique selling point. I mean, it’s very competitive. Look at the, you guys can go read. I haven’t even read the book, but I understand the title, right? Blue Ocean strategy. You go to the blue ocean. The red ocean is where the sharks are tearing everything to pieces.

1:33:05
There’s a gazillion sharks. They’ve been there for a long time. There’s blood in the water, my friends. So it’s a hard thing, right? So you go to the blue ocean. The blue ocean is accessibility. The blue ocean is proper semantic HTML and a world of page builders that have deception and bullshit going on under the hood. The blue ocean is scalability and maintainability. All the things that I talk about are blue oceans for you. If you adopt them, if you pretend they don’t matter, then you’re going to go fine. Go into the red ocean and compete with all the other sharks. But I’m giving you blue ocean stuff, waters, to go frolic around in with basically nobody else.

1:33:46
And your clients are going to be like, oh, that’s interesting. Or you go to another agency to work with them. He just said, hey, I got hired on to do websites for the government. Guess what I’m fixing first? Probably because I’m the only one that knows how to do it. Probably because that’s why they hired me, right? Or one of the reasons. So these are blue ocean tactics for you guys. All right. I love how you’re educating people about accessibility is not enough influencers who do. And a lot of them and plug-in developers actually don’t even care.

1:34:14
Exactly, blue ocean, red ocean, perfect example. All right. Dance has no for pricing. Pricing with a custom package with no price. All right. Good, good, good, good. OK. I’m pulling up the third website here. Gotta go a great valuable session, Thanksgiving. All right. Thank you, Mark, for stopping by. 10, 72 says yes, priority paid queue. Intercircle could be the priority queue. It could be. It could be.

1:34:48
We’ll see. I don’t know how it’s going to play out yet. I really want it to be. The thing with the intercircle is it’ll want it’ll be naturally limited to a smaller group. Number two, it’ll be naturally limited to mostly freelancers and agency owners who are probably submitting their own websites, which isn’t a big deal. But as you see in a second, I want to find some diversity in the sites that we’re going to be looking at. The one I’m going to pull up now has nothing to do with what we do. And I think there’s extra value here because I don’t want you to just learn how to make your own site better.

1:35:23
I want you to learn how to make your client’s sites better. Guys, what we’re talking about here, there’s so much value that you can sell to clients from what you learn here. You learn about what I’m talking about with copywriting. You learn about what I’m talking about with UX design and conversion optimization. Now you go sell those things to your clients. You present yourself as an expert by learning these things and now you’re making more money on every project. That’s what I want to have happen here. And so in order to really do that, we have to pull up sites that would look like clients that you’re going to be working with. We can’t just review every agency site on the planet.

1:36:01
We’ve got to come in and we’ve got to start reviewing some of this. That’s our segue. We’re going to look at honeymoonplanar.co.uk. We’re going to do what we always do. We’re going to pause right here and we’re going to see if we can figure out what is going on. So honeymoon planner, honeymoon planning made simple. All right, get a feel for that. I want you to get a feel yourself for this. I’m going to read while you get a feel. I’m going to read the text. When you get engaged and begin the wedding planning process, thinking about a honeymoon is not typically the highest priority for couples.

1:36:38
There are so many other things to consider during the planning process, such as hiring a wedding planner, deciding on a location, choosing a venue. Hey, yeah, yeah, yeah, yeah, yeah, yeah, get it. If you’re not careful, planning honeymoon can get lost in the mix. All honeymoon planners listed across this site are independent travel agents in their own right. Each one is standing by to help you with the planning and selection process of each component. OK, it’s a little bit wordy. But we’re getting through it. I want to know how this works, because in my mind, there’s two scenarios going on. And the fact that I’m confused is a problem.

1:37:15
I just need to click on something. Hold on. I need to figure out what is the end game here. OK, you see how I’m on page three now? I don’t have an answer to my question yet. Right here is the answer to my question. Contact your honeymoon planner. OK, hold on. I still don’t have an answer to my question. OK, kind of got an answer in the opening paragraph, but I wasn’t quite sure. So this is a directory. Here are the two scenarios that we’re playing out of my mind. Scenario one is this is a directory of honeymoon packages that I can book directly on this website.

1:38:00
Scenario two was this is a directory of travel agents and ideas about packages that I might be able to book if I select that travel agent. It appears to me that this is scenario two, not really scenario one. So this is not an Airbnb for honeymoon. That was like the concept in my mind. This is more of a, this is literally a directory for. Now, the thing is, I’m searching by property here. I can actually go to the directory. There’s only one person in the, there’s only one person. OK, I would imagine that this is going to expand out. If that’s not, if you’re not going to expand out, Michael, I know that I know who you are. OK, so we got Michael Carter here.

1:38:46
If you’re not going to have other travel agents, then this all needs to be rethought out. But I assume I’m going to give you the benefit of the doubt that you’re going to have more travel agents. So this directory concept probably makes sense in that regard. Other thoughts right off the bat. I’m jumping around a bit here. We’re going to get to the copy in just a second. Because now, now things need to be rethought out. Now that I know what’s happening here, we’ve got to put a little bit more thinking into this. But right off the bat, I would get here. I would, I would do this. Shit, what is the name?

1:39:21
Where were we just a second ago? Out, out, brand, what was it? Out, brand, what was the last website we were on? Somebody hit me up in the chat. I think it was out brand or something like that. I’m looking through the chat. Let me ban these bots while I’m here. Ban, ban, ban. All right. Out was it out, out, there it is. Out, outstandbrand.com. OK, Michael, contact outstandbrand.com and get this redone right here. This is not serving you well. This is not, this is, there’s no trust being conveyed here.

1:40:01
It’s not wowing anybody, OK? Get outstand brand to do this for you right here. That’s number one. Number two, I’m not sold on the color scheme. I would get outstand brand to rework your color scheme as well. It’s not feeling honeymoon-y. I would imagine that you’re going to get a lot of female visitors to this website. And we need to think about demographics, OK? And if we’re going to get female visitors to the website, I don’t want to get canceled, OK? But I believe that females have different preferences for the most part than males do. I would like to see some more elegant text, right?

1:40:47
A more elegant font, perhaps. Not crazy, but just, you know, this is a little, modern-y, thick, OK? Like, I’m not sure that this is going to hit the mark. It’s what I’m trying to say. So I’m not sure the colors are going to hit the mark with the intended audience. I’m not sure the font is going to hit the mark with the intended audience. I’m not sure that logo is going to hit the mark with the intended audience. So there’s my thoughts on that right off the bat. You can see that we can, but here’s our problem, right? You ready for this? Let’s see what a screen reader user would experience here.

1:41:31
VoiceOverffic.. Link AnspleortonPRfte Link Ans сказалur Lean Link See? Okay? So if you don’t build the cards, right? Like the way that I showed, this is the experience people end up with. Oh, guys, by the way, when you’re selling accessibility, sell conversions, okay? Because people, there are a lot of visually disabled people. There’s other disabilities that prevent them from using websites the way we normally do. Guys, these people book honeymoon, they want to book honeymoon, but if they can’t, you will not get them as clients. You have to sell accessibility as it relates to conversion as well. This is, it doesn’t have to be rocket scientists, right? It’s just come in and show the person. Do exactly what I did. If I was on a redesign sales call and I was explaining accessibility to somebody, I would just show them. I’d be like, here’s a question. People come to your website and they don’t use it like you and me. They don’t have a mouse, they have what’s called a screen reader, and they want to book with you. Here’s what they’re going to experience.

1:42:56
Voice link, link, link, explore property, link, explore property, link, explore property, voice overall. I literally let them see it. First hand, and be like, if you want more people to book with you, that has to be fixed. That kind of stuff has to be paid attention to. If you want all the bookings that you can possibly squeak out of this website, that’s that has to be paid attention to. That’s it. You’re done. Point made and you move on. It doesn’t have to be crazy technical talk. It shouldn’t be. Give them something they can relate to and usually they can relate to leads and dollars being lost out of their pocket because people that can’t use the site just leave and they don’t end up booking. All right, hopefully that makes the point there. So this has to be restructured, redone. I’m the same thing is going to be happening up here. Okay. Let’s look at an actual property. Actually, no, let’s go back and look at this text right here. Okay. So now we talk about I’m reading, this is a general rule of thumb. You can write this down until the day you die when you’re doing copywriting. Don’t say the same thing twice on the same page. Okay. Especially one time right after the other time. So I read the words honeymoon planner right here, giant logo and I’m like, hey, what’s the site about? And I come down here and I read the exact same two words. Okay. So you’re missing an opportunity here. This has got to be a value driven headline and intriguing headline. You’ve got to capture our attention right now. You’ve got to in one sentence tell us what the money is, right? Why should I pay attention here? Why should I continue reading anything on this website? And by the way, I’m not a huge fan at all of the first interactive thing being the product because I don’t know if I’m supposed to be here yet. I don’t know what you’re trying to offer me. I don’t want to just start looking through products. And if we look at this on mobile, okay, well one wrong one. Okay. So one, we have some mobile issues here. But I arrive and I don’t know, I’m probably seeing something like this depending on the screen I’m on. And it’s like, I’m just, what is this thing that I’ve just arrived at? I have no context of what’s going on here. I don’t know what is. So I got to start scrolling and I’m like honeymoon planner. But really also, also the site is a honeymoon planner. But this is a directory of planners. And so that needs to be made like right off the bat. This whole headline situation 100% has to be redone. I wouldn’t put a paragraph of text here so we need to work this layout a little bit better to break up this content and messaging. I need some features to look at. Go back to, you know, the first site that we did. I don’t think I have it pulled up still. But you know, those feature cards, you know, give me some selling points. I need some selling points off right off the bat. Why am I paying attention to this? Okay. So we’ve dissected that enough. Now I want to know if I look at Dennis private island, what am I looking at here? All right. So brand independence, force our rating, private islands. Okay. Very, it’s a basic outline. Right of what I get. I’m not liking the image gallery presentation. So first of all, let’s go to, let’s go to Royal Caribbean. Okay.

1:46:42
This is directory website. Yeah. It’s a directory of cruises. So I want you to pay attention to how they’ve laid out information in cards. Okay. So we can see what we’ve got going on, which is if we compare to you, and I’m not saying you have to do it like this. I’m just showing you an example, right? At a glance, I get more information than just the photo. With yours, I only get the photo. Okay. You follow? So now I’m getting more information here. I’m getting a price. Ooh, ooh. If price matters to me, and I’m scanning this website, one, I can’t, I, if I have a budget in mind, none of this has anything for me. Okay. And then at a glance, I have no idea. One could be a gazillion dollars and one could be eight hundred dollars. How do I tell the difference at a glance to help me use this website better and have a better experience? Right? These are things. I mean, if you look to a giant corporate website, typically they’ve thought through these things. And obviously, you know, that’s why they structure things differently. But now I click on something that I’m interested in. I’m going to hit explore this itinerary. Look at the visual nature. Yes, we’ve got the information, right? But it’s like, it’s like engrossed in trying to show me the experience as much as possible right off the bat. So I get a giant photo of like where we’re going to be going. This looks very nice. Now this particular page leaves a little, oh, I can explore. Okay. This, they don’t always get the UX right. Okay. But in general, look at the visuals that I’m being introduced with, right? And now I come down. I’m like reading this as a narrative. Not this page they did better. Okay. They’re not, they’re not doing great on every page, but they’re doing better than this. Okay. So we need more of a narrative driven approach here. We need more visuals. You got to really sell me on. I don’t, I’m not getting anything out of this little photo right here. So there’s a lot of thing to be done here to sell these things better. And obviously if you sell them better, your, this whole model is going to be, can you get enough traffic? Can you get enough traffic to sign up to contact your agent? And then can you get enough agents? Well, you can’t get agents without traffic and conversions. All right. And you can’t get traffic and conversions without agents. So that’s going to be a chicken or egg situation that you’re really going to have to fight to solve as quickly as possible. But what I will tell you is if you design a beautiful website that engrosses people in the experience and really sells every single one of these, the goal for me would be that everyone they click on, they’re like, oh my God, I want that one. Oh, I want that one too. And then what you’re going to see happen is they pick one. And then I don’t know. These are for honeymoon.

1:49:37
Okay. But let’s think about the model here. Do you really want to sell a person one trip? Immediately now I’m thinking long term. I’m thinking that you need a plan in place for what, what concept do I sell them next year? Because they go on a honeymoon trip with me and they love it. And I’ve connected them with the travel. And maybe this is up to the travel agent that they connect with now. And I don’t know if it were my model. I would be, you know, actually really doesn’t even matter. Because they don’t even, maybe the same travel agent doesn’t even serve the area they want to go. So it is really up to you as the directorie site. You’ve got these people captured. They’ve had one great experience. Now next year, what’s the experience you’re going to sell them? What are you going to sell them on their fifth anniversary? What are you going to sell them on their tenth anniversary? You need all this data in the back end. You need more than we just send you on your first trip kind of situation going on here. So that’s the kind of level of thought that I think I would put into this. And the more you sell these trips and the more they’re like, God, I want every one of them. Good. I want you to want every single one of them. Because guess what? You can go on a honeymoon once. But I can still serve you next year in the year after that and then five and ten and fifteen. Okay. And I know when your anniversary is because I’m collecting that information when you sign up. And so I’m going to wish you a happy tenth. And hopefully you’re not divorced by them. But you can unsubscribe, I guess, if that’s the case. All right. You see what I’m getting at. And this is what I would lead clients through. If this were my client, this is how I put, I don’t know, hundreds of thousands of dollars potentially in their pocket, things that they may not have ever thought about, things that they can take advantage of. This is what I’m trying to give them. And when I talk through these things and I paint, what I’m doing is painting a picture. And this is, if you go watch my sales training in inner circle, painting a picture is one of the pillars of the sales conversation. Process is one of the pillars.

1:51:37
Painting a picture is one of the pillars. I’m painting a picture of what this can become. And if you like these ideas, guess what you’re hiring? You’re not hiring Joe because these 500 fucking dollars off of whatever website you found, like freelancer Joe, okay? You’re hiring the guy with the vision and the ideas and the team to put it in place. And you’re going to pay for that. You’re willing to pay that because you see the value on the back end. All right. So for all of you saying, oh, I can’t compete with, with upwork. I can’t compete with these freelancers on upwork. Right. You can’t. But I can. Now you can get in the position where you can. And that’s what we’re learning here. But don’t just say blatantly, oh, the upwork people are going to ruin our industry. No, they’re not because they don’t have any ideas. All they have is pixel pushing. They push it around a screen in element or whatever. They don’t have any ideas though. The ideas are what make you the money and the organization and the strategy and the experience. All of that is what makes you the money. So let’s look at SEO now. standpoint SEO. We’ve got to come in and do a discovery for this and figure out anybody that’s planning a honeymoon related vacation and an anniversary related vacation. And I would almost be tempted if you have not launched this yet to rebrand this one. All thing. I like the niche of focusing on couples, right.

1:53:10
And so you’ve got honeymoon, but you’ve got anniversaries. You’ve got birthdays. I don’t know, but you have a little focus niche there. It can’t just be relegated to honeymoon’s because it’s too limited. So I would almost just consider redoing that. And then you want to figure out, okay, anybody going on a honeymoon, anybody going on an anniversary trip, what are they search for? What are they certain? And I need to come up for all those things. And then we need pages for each of those things. We need to start, you know, transitioning this text towards targeting those things with our headlines. And then on our actual properties, I want to know, I guarantee if Dennis Private Island is something people in this area know about or people traveling to this area know about, they’re going to be looking up Dennis Private Island reviews. Dennis Private Island this. Dennis Private Island that gets who needs to be creating content for all of those searches. You do, my friend. They need to arrive on your site to find out how Dennis Private Island is as an experience. They learn about the experience from you. You sell them on getting that experience and you say, oh, by the way, have you not booked yet? Have you not booked? Go ahead and book with our travel agent right here. We’ve got, you know, select the travel agent you want on this little form down here. And now you’ve taken content marketing and you’ve turned it into a sale, which you then turn into a five year anniversary sale and a 10 year anniversary sale, right? You understand how this works, okay? So that’s my, I know that’s a lot. It might not, it might be too much to chew on. I don’t know. If you contact Alstan Brand, maybe he can help you with some of this stuff. I’m just, you know, show, show some love. Alstan Brands looked good today. Let’s see, let’s see if we can get them a little bit of business. Okay. That’s my review for that. We are five minutes left. I’m going to go ahead and answer some questions. All right.

1:55:07
Website critique turn into business lessons. Wow. Well, that’s what it always turns into. It’s because we’re just, we’re talking about businesses here. The website is just a tool. And if we’re going to have the website do its job as a tool, these are all the things we need to be thinking about. And that’s what I really want. That’s what we need clients to understand too, right? Okay. Oh, let’s, let’s ban the spam. BAN, spam. Okay. First thing I notice with the honeymoon site is that the large block of text seems really small. That would be on this page right here, like that. I’m not quite sure what you’re getting at with that, but maybe you can clarify. Okay. Okay. Okay. Access to be any, any recommendations for accessibility test tools? If you’re on a Mac, just hold Command F5 and that turns on voiceover and that’s kind of the, I’m reading Mateo’s. That facial expression has to be used for memes, which one was it? I don’t even know what face I was making. Kevin, one big, big thumb up for your accessibility focus. Yeah. Command F5 is your voiceover. And that’s kind of the easiest, like quick accessibility tool. Kevin, love your content, but I can’t play it in front of my crew when there is cussing. It brings the brand down because we try to keep it PG-13. I mean, I try to keep it PG-13 as much as possible, but let me put it this way. Any, any curse words you hear on this stream? It’s like, it’s like one fifth of what I would normally do. I’m, I try to keep it as PG-13 is like, sometimes it just comes out. The, the, the, the, the really good to see how things are read when not adding the right label structure. The look on your face was a picture, Kevin.

1:56:59
Alright, I gotta go back and watch. I don’t, I don’t know. Uh, the, the, the, the, the, the, okay. Good focus group. Yes, everybody said Alstan Brands. Okay. Any questions before we roll out of here? Remember, question in all caps. Any final thoughts? Um, because guys, I don’t really see the chat much after I end the stream. It kind of just goes away. And then it’s really hard to go back and review it. So let’s just do a quick couple of minutes. Final thoughts, final questions. Did you get value out of this session? Would be number one. I mean, we got a ton of people here. So give me final thoughts. I try to learn something new every day. And today’s lesson was accessibility. Drop a like before the stream is over says Jason. Alright, Gerson just put in a list of accessibility test tools. Now, I will say that the main test tools like wave, um, some of the others, they don’t really do a full accessibility, you know, kind of audit. They, they’ll hit some of the top level stuff. But really, if you want to do accessibility checks, you have to inspect. You got to show me your DOM. Okay, you got to look at the DOM. You got to actually use a accessibility tool, not just a scanner, but an actual tool to go through and try to use the website and see what the experience is. It’s a very manual process. And guys, if you are really, really good at accessibility, my nose is itching. If you’re really good at accessibility, you can sell accessibility audits for a pretty good penny. For most websites that are serious, most of you could be making more money on accessibility audits than you make building websites for people. Like those of you in the $1,500, $1,500 website range, that’s like we’re an accessibility audit starts on a lot of big websites, a lot of major websites. So this is like, you know, you have revenue opportunity. If you start paying attention to this stuff, you obviously have value add opportunity. Thoughts, I like the way you drop snippets in all your streams. Reviews are quite deep and great. Scares me to submit. Don’t be scared. We’re all DOMasses sometimes. And our goal here is to become a DOM. Gerson says right, no automated checker can check for 100% of issues. Most find 20 to 30% of issues. And some find false positives, which is also true. Okay. All right, guys, it’s 1 o’clock, two hour mark. I’m out. I love you. Thank you so much for tuning in.

1:59:45
I will try to tone down. I will try to not cuss. I will try to make this PG 13 going forwards. Digital agency table talk. I can’t guarantee. You know, when I’m in conversations, when I’m ranting, okay, it’s a little bit harder. When I’m doing website reviews, I’m very confident we can be PG 13. So we’ll go PG 13 on this series. That’ll be my commitment to you. Okay. And I will see you guys not next Wednesday, because this is going to be an every other week thing. It’ll be digital agency table talk. Then it’ll be web design for DOM. East then digital agency table talk. Then web design for DOM. East. Okay. All right, I’m out. I love you guys. Peace. I’ll be back soon.