Kevin Geary
0:00:00
Yo, what is up everybody? Hold on, hold on. I got to get my, got to get my windows up. I have been gone for two and a half weeks. I think we haven’t done a WDD live in three weeks. This is the longest that I haven’t really worked at all ever. Uh, probably since the day I got my first job at like age 15, which I was doing even stuff before that. That was like my first legal job at age 15. Yeah, I’ve never taken this amount of work off. Before we get too deep into stuff, let me get the chat window up. Where’s the chat window? Man, I’m so lost. Let’s see. We’ve got, there’s too many windows in here. Comments and reactions, that’s what it’s called. Okay. If this is your first time here, if this is your first time here, if this is your first time here, definitely let us know where you are tuning in from and say hi. I see a lot of familiar faces. We got Derek, we got Ruben, we got Tony, we’ve got Dan, and Ross, Julia, Stripe Goat is here. Child Design is here. Ted is here. Lot of familiar faces, lot of familiar faces. But if this is your first time, drop a comment and let us know where you’re watching from. Let us know it’s your first time here. I’ll tell you what we’re doing here in just a second, but first, is everything working? Oh, hold on. I got the wrong, look at this. I got, I got, we’re screen sharing already. I mean, this is out of control. Absolutely out of control. As you can see, two and a half weeks off, things are, you get a little rusty. You get a little rusty after two and a half weeks. Is the audio working? Is the camera working? These are the things that I really need to know. Because the first thing I got back, I fired up the computer, and first thing is, Ecamm’s like, oh, we got an update that you should do. And the Mac’s like, hey, we got an update you should do. I don’t know if the keyboard’s hooked, I don’t know what’s going on in here. I just turned things on, and I got in late last night, I didn’t have a lot of prep time, hadn’t shaved in three weeks, I did you know take care of the face and all that kind of stuff before we go live. I don’t know what’s going to happen with the tech you know I’m just I’m relying on the tech to do its thing and hopefully these updates didn’t didn’t blow things up. Okay, everything loud and clear let’s make sure Kevin Hart is in attendance. All right, Kevin Hart is here that’s working fantastic good good good good good okay we’ve got one we’ve got one live critique to do today and that’s primarily what WDD was all about right so it’s a web design for dummies and what we do a web design for dummies is we deep dive critique websites that are submitted by anybody there’s a link down below in the description. You can submit a website for live critique. We don’t sugar coat the critiques, okay? We don’t coddle the critiques. We give it to you straight, just as you should want it, because that’s how you get better. We talk about best practices, we talk about SEO, we talk about copywriting, we talk about UX, we talk about UI, we deep dive the critique and we look at the DOM, right? We see how is the underlying structure of this website? Is it built to, you know, modern standards as we say? Because standards are very important. And so that’s what we look at. We don’t do like rapid fire critiques where we’re just looking at surface level stuff. We look at everything that goes into making a website successful or unsuccessful. And that’s why these streams are so valuable. You are going to learn a tremendous amount about web design, marketing, copywriting, every like I said every topic that is important that’s what we cover and then what we do is we do Q&A. So after the after the critique we go into Q&A you can ask anything about any of those topics but you can also ask questions about marketing, you can also ask questions about your own agency and project management and pricing and sales and you can get a ton of value on the technical side of things then you can get a ton of value on the business side of things. It’s a perfect combination I think and that’s why WDD Live is the place to be. You don’t have to pay, don’t worry about what else is going on in the WordPress world or the agency world. When a WDD live stream is active, that’s where you should be. That’s where you’re gonna get the most value by far. So here we are, and I’m glad you are here with me, which is absolutely fantastic. We have 62 viewers live so far, it looks like. And that number usually continues to grow as those YouTube notifications go out and grab some additional people from here and there. Let’s talk about, oh, let’s see, Akil is here saying, I have nightmares about Kevin critiquing my website. Hey, you don’t have to have nightmares. It’s okay. You don’t have to have nightmares. It is perfectly fine. We all, everybody survives. That’s, we’ve had no deaths so far in WDD Live, which is absolutely fantastic. Yeah, let’s see. The man has color. Yeah, I do have a little color. I was down in Florida, as you may know. And Florida, my second favorite, no, that is my favorite state. It is my favorite state. And I did get a little color. So color for me, my arms get it more than anything else. I did have a lot of beard, so I don’t know. Am I whiter here than up here? I don’t know. I’m very red on the nose area. The nose does not get tan, just gets red. I go from the color change in Kevin is from Northern Ireland to like Mid-Ireland, right? That’s the difference right there. It’s not a big difference, it’s not a big difference, but it is a difference to me. And you might be able to see it, you might be able to see it, but I’m not going to get much more tan than that. Okay, we need to jump into the first live critique. I wanna make sure I didn’t have any actual, oh, I did have one announcement. So PB101, Page Building 101, you Page Building 101 fanatics are probably like, where is the PB101 episodes? Well, I really couldn’t work. I was very limited in what I was able to do. I could have probably gotten an episode or two out. I didn’t want to half-ass it though. I wanted to everything to be consistent, production consistent, all that stuff. I was just like, alright, they’re just gonna have to wait. But I have two episodes scheduled and outlined and ready to be recorded and released. They’ll be released next week. So next week should be two PB 101 episodes and then we’ll be back to WDD live on Wednesday of next week We’re just doing it on Friday because we got it. We just got to fit one in that’s what we’re doing right here We’re fitting one in All right Today’s site is mine made in pro. Oh, I think you meant today’s site is mine. Let’s get Manny up here. Is this Manny? Made in pro and hosted in site grounds. I know almost nothing about Ally do not sugarcoat anything I can take it. Okay, he already saw it up on the screen, I guess, a minute ago when the live stream started. All right, I don’t know what pro is. What is this, a builder, I assume, pro? I don’t know. Is this, there’s a lot of, I was looking here, I just inspected, and everything’s got an X prefix. I didn’t know if that meant X theme. I don’t know what’s going on with it. I’ve never seen this before. So this would be good to take a look at All right, Amanda’s here Matthias is here says he’s back. Yes. I am back Good to be back to I had it. This is what I was itching to do. I was itching to do a WDD live Okay, let’s go and get right into this is what a lot of you have come for so let’s make it happen Alright, we’ve got we’re gonna do our no scroll test. That’s how we start. We don’t scroll around. We have to see what information can we glean from not scrolling. Just what is on the screen when we arrive, that’s what we’re stuck with. So I see Riverwalk Ranch and obviously the headline front and center, drug and alcohol addiction treatment. Your recovery is a most important personal journey, your recovery environment must be as equally important. Accepting new patients.
4
0:08:32
Okay.
Kevin Geary
0:08:33
We’ve got a phone number up top, 877-2-DETOX. We can verify our insurance. Admissions. Okay. Oh, we’ve got a mega menu. You know how I feel about the mega menus, right? We’re going to see. And really it’s not because, you know, I don’t know. This is a typical mega menu right but the question immediately pops into my mind is is this going to be keyboard accessible is this going to be you know so we’re going to find out just a second but obviously we are at a drug and alcohol addiction treatment center I like this photo in the background so just to get started off with a little you know, low-hanging fruit of UI. Just take a look at the UI here. It gives a sense of we’re like floating above this roadway. Very nice leading line here into what I assume is the actual treatment center here. I assume this is not just some random mansion in the woods. This is the treatment center. And it looks good. It looks like, you know, it’s nice and you know peaceful great place to do some some recovery work nice lawn nice trees it’s it gives that you know peaceful vibe which I think is a good vibe to start out with I’m not quite sure if the vibe should be like you screaming at me with the large all-caps text but I don’t know that’s what we’ll figure that out as we as we go through the website. Okay, so no scroll test, I would say, pretty much passes here. Now, could we have a more captivating headline? For sure, yeah, I mean, we could probably test out a few different headlines and see, can we come up with anything that’s better than just the obvious? This is like the obvious headline of, okay, well, let’s just call it what it is.
5
0:10:26
That’s it.
Kevin Geary
0:10:27
Let’s just, let’s make sure people know they’re in the right spot. Just call it exactly what it is. It’s drug and alcohol addiction treatment. Okay. Which you can’t really go wrong with, right? You could, you could outperform this headline. It’s not a bad headline. You could probably outperform it with something a little bit more captivating. Right. But it’s not bad to just go with this state. The obvious is not bad because at least we take care of the primary thing, which is, do they know they’re in the right spot? Like if I don’t need drug and alcohol addiction, I can leave now, right? I know exactly what’s going on here. I can make a good decision. And then the vibes that I get from the rest of it are good enough to make me want to scroll, which is the primary purpose of this hero section, is to get me to come up here and do something else, or to get me to scroll down the page. If I’m lost and confused immediately upon arrival, a lot of people just hit the back button. They don’t stick around to try to figure it out. They just hit the back button. So you’ve got to do something in this hero section that makes them want to go navigate or makes them want to scroll. And I think this passes the no scroll test. Okay, so let’s just do that. Let’s just start scrolling. Start your recovery journey in comfort. That’s a higher volume here, in comfort. Alright, start your recovery journey in comfort. Yep, there is the picture of the treatment center. So this is good. It’s not the same photo. It’s just a slightly different angle. Now we’re up close. We’re being brought in a little bit closer to what’s happening here, which is pretty good. Pretty good. I like it. It’s a good layout, nice and clean. Making a commitment to sobriety shouldn’t mean having to sacrifice a comfortable lifestyle. Riverwalk Ranch, we’re gonna do a little copy now. So we passed the basic UI test, right? There’s nothing crazy going on with the UI here, so we can jump immediately into, well, what’s the copy say? Riverwalk Ranch is located in Northern Texas. Okay, now I know where we’re at. That’s good. Now the question could be like should we tell them that like maybe a little sooner? And especially for SEO purposes, right? Probably would be good to, is this an H1? Let’s see what we’ve got going on here. H1, okay. I mean just to me it’s like drug and alcohol addiction treatment in Texas or the city in Texas right? Now maybe people travel from all over to come here. So you maybe you don’t wanna highlight a specific city, you just wanna say in Texas, maybe that’s the thing you’re going for. I don’t know, we’d have to have a discussion about what the SEO strategy actually is. But I think putting the location, I assume that that is an important part of the strategy. Maybe putting a location in the H1 is the way to go here. And it doesn’t cost you anything extra. It just gives the person a little bit more information and it gives the page a little bit more SEO juice, okay? So maybe consider doing that. Our secluded and picturesque ranch is nestled on 27 acres of land. Man, I feel like Airbnb wrote this. Offering the ideal treatment environment to establish the foundation for long-lasting recovery, we provide medically supported inpatient care, behavioral therapies and post-treatment aftercare support. If you are ready to take part in a top treatment program and prefer a quiet, beautiful ranch setting, it’s time to consider Riverwalk Ranch. Okay. Call now to speak confidently with an admission counselor, 877-863-OK. And this is a okay fires off a little call link. All right, all is all is fairly well so far Nothing is standing out as just needing we don’t need to dive into anything as far as a critique goes quite yet We’re just gonna keep scrolling and see what’s going. Wow. We’re brought even closer now. We’re at the front door We started out very far away. We got a little closer and now we’re right at the front door. I don’t know if this was, is this, did they want this effect to happen? By the way, if you’re new here, you can comment whatever you want. Drop whatever comments you want in the chat. People wanna hear what other people have to say as well. This is kind of a participatory thing that we do here. So don’t be afraid to drop your own comments in the chat. But I kinda like the vibe. I like the, I don’t know if it was planned, but I like the, here’s the aerial, here’s a little bit closer, now you’re at the front door because you’re getting, you’re getting closer to converting almost, is like the pathway here. Transformational treatment. I’m just going to resist the urge to yell these headlines out. Riverwalk Ranch is their recovery center of choice. We will help you address addictive behaviors and heal the damage caused by substance abuse. Take the first step. I like it because it’s not too aggressive. It’s kind of like, hey, you know, we got a nice quiet ranch here. If you want to recover, you can come here. You don’t have to, it’s up to you. That’s kind of the vibe that I’m getting, which is good. The Riverwalk Ranch difference, okay. At Riverwalk Ranch, your treatment plan is specifically designed for you or your loved one. Our team will provide attention and compassion while working alongside every client during the recovery process. The individualized approach distinguishes Riverwalk Ranch as one of the premier addiction treatment centers in the Dallas-Fort Worth area. Okay, I want this to be expanded on. At Riverwalk Ranch, your treatment plan is specifically designed for you or your loved one. I just get the vibe that like every treatment center is going to say that, right? Oh, don’t worry, we’re going to go check out the nav in just a minute. I’m highlighting maybe the better parts here. We’re going to go after that navigation, don’t worry. Yeah, I just feel like everybody’s going to say this. Our team will provide attention and compassion while working alongside every client during the recovery process. Okay, that’s everybody’s gonna say that. This individualized approach, I think everybody’s gonna say that too. So, you know, it’s how much distinguishing is there if they all say this and maybe even all do this? What I really need to know is brass tacks.
3
0:16:47
Is this different?
Kevin Geary
0:16:48
Are you doing something that is legitimately different from what these other treatment centers do? And if that’s the case, we have to highlight it with specifics. Like give me, here’s what’s gonna happen in another treatment center. Here’s what’s gonna happen at our treatment center. See the clear difference? I need it to be that clear because right now I’m getting the vibe that they will just all say this, that every treatment center I go look at is gonna say something like what I’m reading right here. So we need to make that a little bit more clear. All right, we got some more photos. I like the 100% wide full screen effect here. It’s not a gallery that I have to click on or navigate through, which is a little bit refreshing. You know, we could maybe do that on a different page. On the homepage, we’re just getting kind of a more of a vibe check, right? It’s just here, here, here’s a little bit more of the experience right here. But you don’t have to go too deep into let’s look at 37 photos and zoom in and all this other stuff. You don’t have to carousel me across the page. It’s kind of refreshing that it’s just nice and simple. Give me a few more shots to look at. Okay, our programs. We offer a full continuum of care. We got a medical detox. We’ve got residential inpatient, partial hospitalization and intensive outpatient. Our medically monitored withdrawal management program provides 24 nursing care with a physician on site to handle significant problems. Counseling is also available 16 hours a day. Okay. I don’t think we have to read all of these. I wanna read this long one. Our partial hospitalization program typically provides 20 hours or more of service a week for multidimensional instability that, man, this is very wordy now. The PHP program does still offer on-site housing and access to 24 hours a day generally. I wouldn’t go into detail like this in these cards. These cards are like, you know, help me choose what I’m supposed to be doing and then when I get to the page about that thing, then you can give me all the details you want. But in these cards, make it very plain language, make me understand who is each one of these for. That’s all I need to know. I don’t need to know any other details. 24 hour, 20 hours, PHP, this, the, the, the, the, I don’t need to know all that. I just need to know who are these things for. And then when I realize, oh, this one’s for me, okay, then I click on it, and it’s gonna take me to a page where you have the entire page to give me all the details. So I don’t need any specifics really inside of these cards. I just need plain language, help me understand which one of these is for me so I can click on the right thing, get to the right place, get the additional information. All right, our commitment to you. We know that recovery is dependent upon adopting a new way of life. Here you’ll be provided with an individualized collaborative treatment plan accompanied by a full continuum of care and support. Our treatment facilities are designed to give clients the best opportunity to grow and succeed while at the same time offering the support that, okay, okay.
3
0:19:45
I don’t think, like we get down here,
Kevin Geary
0:19:48
you’re not really telling me anything different here, right?
7
0:19:51
The headline’s different,
Kevin Geary
0:19:52
it’s obviously a different section of content, you’re kind of talking about the same things maybe in a slightly different way. I feel like this we accept most insurances like these insurance logo this section probably could be a little bit higher up maybe right underneath these our program so it’s like our programs here’s the insurance we take our programs here’s the insurance we take right now they’re separated by this continuance of like just kind of a little bit generic feeling copy so we can maybe there’s an opportunity to, don’t you love these, yeah, and the sticky header so that, you know, we have to make sure that the mega menu I hate follows me all the way down the page, right? Very important. I think we can move this up a little bit and that gives that important information a little bit sooner on the page, maybe something to experiment with. And then we have read our blog, okay, we’ll take a look at the blog in just a minute. I think what you’re missing here is what I talk about often is the sandwich effect. So we have the top piece of bread, which is your header, and it’s got a CTA in it. Which, let’s see what this does. Okay. Oh, oh, okay. This took me to a separate page and it took me to an anchor on the page. Okay, I don’t know if that’s the best call to action to put up here.
3
0:21:17
What is this whole page got?
Kevin Geary
0:21:18
Payment and insurance, okay. All right, all right. We’re gonna have to talk about this flow in just a second. I’m not sure that this is the best page to dump people onto from the header. Okay, but back to the sandwich. Top piece of bread, you have a call to action in your header. Then you have the meat, here’s all the meat. And by the way, in the meat, you got some calls to action, which is good. You wanna litter some calls to action throughout the meat of the sandwich right here. Then you get down and it’s like, where’s the bottom piece of bread? The bottom piece of bread should be a final call to action. There’s really no call to action in this footer. Yeah, there’s a phone link. Yeah, there’s an address. Yeah, there’s probably a contact page. That’s not what I’m talking about. I’m talking about a call to action with specific CTA copy and a specific thing that you want the person to do. That needs to be right here above the footer. Because right now they go into blog and then generic footer, right? There’s no bottom piece of bread to sandwich the person in and really maximize those conversions. Because remember what we’re doing with this copy. And somebody asked me the other day, like long pages, are they better than short pages? Let’s get into that right now. There are times when a short page is really, really good for conversions. You know when that case is? When it’s, you can think of it like an impulse purchase. So I don’t need, or it doesn’t even have to be a purchase, just an impulse conversion. Like it just, hey, this sounds really good. I don’t need to know any more. Just give it to me, right? That a short page will work very, very well for that. If it’s a true, like I got to sell someone on something, then a short page doesn’t work very well. You need a long page. And I ask clients this all the time because clients will often reject. They’ll be like, we don’t want people to scroll that much. We don’t want, we don’t want, that page is too long. You show them like an outline and they’re like, why is the page so long? Okay, here’s exactly how you handle this. So we’re trying to sell something with this website, obviously. Now, we’re selling many things. That’s why we have many different service pages, and each service page is kind of like a sales page in itself. The home page is selling the person on the company in general, or the services that you offer in general, making sure that they understand that you can provide for the needs that they have and so on and so forth. But I always ask people, I’m like, so when you have a salesperson and they go out into the field or they take a call from a prospect, how long is that phone conversation? Are they typically selling the person in five minutes or are they typically selling the person in 25 minutes? And they’ll be like, oh, you know, they start stuttering and they’re like well you know it’s you know maybe 20-25 minutes a phone call. Okay, okay, but why isn’t it five minutes? Why don’t you limit every call to five minutes? Right? You know just short and sweet. They don’t have to do a lot of talking. Just five minutes. Well five minutes isn’t long enough. You know they have questions, they got objections. Exactly. Thank you. Exactly. So when you’re selling something on the internet and you don’t have a salesperson to sit here and have a conversation with somebody, you have to think about what are all the things they need to know? What are all the things they’re gonna ask? What are the objections that they’re gonna have? And we have to use the page to address all of those things so that the person feels confident enough to actually take the next step and convert. Thus, pages on the internet are longer, effective sales pages are longer because they have to have I mean think of how many words would be in a 25-minute sales conversation probably gonna be a lot of words right so we have to put those words onto a sales page that’s why they get longer and longer depending on how hard the thing is to sell ok so that’s that’s the answer that you give people so going going back to the point that I was making right I’m not sold here right I’m not just going to come arrive and be like, oh, I read the hero. Oh, let’s sign up for this multi thousand dollar addiction treatment thing. I kind of want to make sure that it’s actually the right place for me. So I start scrolling down. I learn a little bit more. I scroll down. I like what I see. But I’m not ready. I’m not ready yet. So I’m I’m control. I’m continuing to read, scrolling down the page. Okay, that sounds good. That sounds, oh, oh, more pictures. Oh, this is nice. This is nice. Okay, getting into programs. Maybe I click on a program. Maybe I’m reading about the program. No calls to action here. Look, no, no calls to action. What if I don’t have insurance? That call to action doesn’t matter to me. What if I’m paying out of pocket, right? Keep scrolling, keep scrolling. Oh, I’m learning more. I’m learning, oh, I sound like I was, I’m like, I really, really, really, really, really want to do this. Now we have a footer CTA. We have a bottom piece of bread, but that was not existing here on the homepage. And I’m a big fan of just make it almost like a global thing. Now you can change the copy on different service pages and things like that, but we need a bottom piece of bread because if the person gets to the end and this is the point at which they kind of decide, I actually do want to do this. You don’t want to rely on them scrolling back up to find a CTA. You don’t want to rely on this one particular CTA being enough. You don’t want to rely on them picking up the phone and calling. A lot of people won’t call. A lot of people don’t want to call. They don’t want to talk to anybody on the phone yet. They just want to do a typical, like let me fill out a form, let me submit my application, do whatever I want to do. That’s what they want to do. So give them that number one option right down here. Okay, so that is the gist of why you should have the sandwich approach top piece of bread, then the meat, make sure you have a bottom piece of bread on your sandwich or it’s kind of awkward, right? Okay, let’s take a look at this navigation now. So we have admissions, take your first step admissions, payment and insurance, what to expect professional referrals, contact, okay, wow, treatments, all right, here’s all of our services, options, here’s all the types of things you can be addicted to. Let’s just see what they’ve got going on here. Very, very good for SEO, alcoholism treatment, alcohol addiction and treatment guide. I really don’t like the yelling. I really feel like I’m being yelled at now because there isn’t enough space in this hero section. It feels cramped. It feels aggressive. I’m not sure I’m not really sure this background image is working especially because it’s pixelated on my screen let’s take a look at why this is so cramped because this should not be cramped right so it tells me right off the bat we’ve got to inspect the DOM show me your DOM that’s what we’re doing here right web design for dummies we have to take a look at the DOM so we’re going to inspect and we are going to see exactly what’s going on here. All right so we have a section. All right let’s open that section up. We’ve got a div inside the set. We’ve got two divs inside the section. Okay let’s go ahead and grab this one. All right this is what’s establishing the page width right here. It looks like what is this one doing here? Oh that’s the backgrounds. Yep okay that’s the background. Is that a real image then in the background? Div class, a lot of divs, a lot of divs, a little bit of divs-ception here. Now, okay, see, I don’t understand this. Don’t understand this whatsoever. This is, I don’t know what theme this is. They said it was called pro or something. Why did this need to happen? Let’s take a look at this. Why did this need to happen? So we have our section right here. If you’re gonna use a background image, then just put the background image on the section. Like this should have the background image instruction right here. But instead, we have a div inside of the section, which is the size of the section, and it’s positioned absolutely. And then inside of that, we have another div. We have another two divs, actually. When they both have, they both have a background image on them. All right, I don’t know what’s going on. I would have to inspect even further, but this just feels totally unnecessary. We’ve got extra DOM elements for no reason. We got, there’s really no reason we couldn’t have, even if, I don’t even know why you would need to here. Layer upper image, layer lower image.
10
0:29:28
What?
Kevin Geary
0:29:30
Okay, that is that photo, right? You can see it there in the screenshot. Okay, what is this? Oh, what is that? What is this? What is this thing? I don’t even know. What, what is that? Hero overlay short blue.png. Is that a repeating background pattern? Oh no. Hold on. No, no, no, no, no, no, no, no, no, no, no, no, no, my friend, my friend, what have you done? What have you done? Are you telling me that this blue haze is a PNG repeating background image overlaid on top? We don’t need to do all that. Manny says pro is from the same guys that did theme X. That’s why everything has an X in front of it. Got it, okay. Got it, got it, got it. We don’t need to do this. I mean, this is, this fade right here, you could absolutely just do with a pseudo element and CSS and no PNGs, no repeating backgrounds, no, just very easily could have done this with opacity and CSS. Done, don’t need all the extra divs, don’t need, certainly don’t need a repeating PNG, that by the way, you can’t change the color of. I mean, let’s talk about that for a second, right? And so I’ve said, if we go back to first principles, there are a lot of first principles in web design, which is why I feel like it’s just absolute comedy when people just kind of have the idea, oh, just do whatever you want, do whatever makes you feel good. There’s really no standards, there’s really no process. It’s just hilarious to me. Because it’s an objective reality. Some people don’t want to live in objective reality, but this is objective reality. You created a PNG with a blue transparency that repeats across this image. If the brand colors ever need to change, or the client comes along and they’re like, you know what, we don’t like the blue, can you just make it dark, but don’t use the blue, it’s a little too blue for us, whatever, you gotta go swap out that PNG. You gotta make a whole new PNG, fade effect thing going on here, and then swap that out. Plus, you’re just loading an image file that doesn’t we don’t need to be loading image files here. But just from you know main maintainability iteration purposes that’s a lot of work. If you just use CSS and a blue gradient then you could just swap the color on the fly. Anytime you swap the color page to page if you want to. You can do a lot of different stuff very easy and you’re not loading image files. So yeah this is just I see this a lot, you know, where it’s like, oh, first principle, what was the first principle I was gonna talk about? If you can avoid Photoshop or any design tool, absolutely avoid the design tool. If you can do it with pure CSS, 99.9% of the time, it’s better to do it with pure CSS. Okay, let’s see, a little bit of history. We created this site several years ago. The client decided to go with a big company for SEO and they did a lot of changes for the worst. Okay, all right, anyway, I was back to inspecting. We found that issue, but oh, that’s interesting. Look at that jump, look at that jump in text size. Okay, let’s go back to figuring out why this is, what I’m guessing is there is a height on this section. That’s what I’m guessing. And I covered this in PB 101, where you don’t wanna use min height, you don’t wanna use height, you don’t wanna use any of these height things. You wanna use padding inside of the section. Because padding allows the hero to grow if there’s more text, or in this case, very, very large text, while keeping the same white space ratio. Whereas if you use min-height, which Elementor encourages you to do, which a lot of developers encourage you to do, you end up eating into your white space when you have extra text. And you don’t want to do that because it looks out of balance. And then you have to go in and adjust your min-height or your height or whatever you’re using and it’s just a dance that you don’t want to be partaking in. Let’s go see where is the height though. What is going on? So this is, nope, that’s position absolute. So that is not doing a damn thing. With 88%, okay, this is interesting. X row transition. Okay, it’s not this one. Something is, maybe it was on this. Maybe I’ll scroll further down. Something be controlling the height. Well let’s just do this then. We can’t can’t figure it out that way. Inspect. Oh my gosh stop. Get out of… Thank you. Why is it… where’s this jump happening? Is that scaling text? Okay anyway let’s just check it like this. All right we’re going to copy, paste.
3
0:34:31
Okay, no, no, no.
Kevin Geary
0:34:32
So it is, yeah, there is like a, it’s got to be min height somewhere, somewhere min height is set. Look at how I’m basically left with like no white space whatsoever.
13
0:34:41
Right.
Kevin Geary
0:34:41
But if you use padding inside of this, then it’s a much, much, much different story.
5
0:34:46
Right.
Kevin Geary
0:34:46
Let’s do padding block and let’s just do 6M, something like that. See how if you just used padding, the hero would continue to grow with the text, but that amount of white space would always be preserved. Always, every hero section would have the same exact amount of white space, regardless of the amount of content that’s in here. But when you use min height, and you’re not really relying on padding, you end up with, let me get out of the inspector, you end up with this kind of thing going on where it’s like you’ve taken up all the space and there’s really no white space left to help you out. Okay, I’m not a big fan of these pages, it’s just like walls and walls and walls of text which maybe this is what the SEO company did that you were referring to. SEO companies are kind of notorious for this. It’s like, hey, let’s stop caring about UI and UX on this website and let’s just put a shitload of content on it, because that’s what they need for ranking purposes. So you gotta be very careful, you know, you gotta make sure that you want a lot of content, but you really still have to care about UI and UX as you add that, and that’s where sites get expensive. See, it’s cheap to just throw walls of text onto a page and not care a lick about design, but if you have to design all of that content into unique layouts, that’s where things get expensive. So, and that’s why people ask me, like, oh, how do you go from a $5,000 site to a $10,000 site? Well, I don’t know, just care about design. It takes a lot more time and effort to put this stuff in a good layout than it does to slap text on a page. Obviously, a site can be very cheap if you just wanna slap text on a page, but you know this doesn’t do a lot for the user. And then look at this, I mean we’re just, we care nothing about readability now. We just get all the way down the page, you guys know how big my monitor is? I’m going to get, I’m going to need treatment, I’m going to become an alcoholic and then need treatment having to deal with this text going left to right five miles across my screen. We talk all the time about, and I’ve gone over this in automatic CSS because you can do this automatically, the readability of line lengths. You don’t want to do this to people. They’re going to need a chiropractor and alcohol treatment after dealing with this kind of thing. So you’ve got to make sure that you’re limiting these line lengths, that you cannot make people go that far across the screen reading this. And I can tell, this is like, this is classic SEO agent. Whoa, we need facts. Okay, drop them in. Or this is what happens when you let clients edit the website, they do nonsense like this. This is out of control, right? We saw where a actual kind of designer, we can see this and like, look, there’s overlaps going on breaking up the, you know, this is an actual designer, it feels like, got their hands on this. And then the minute we got to another page, an internal page, like where did the designer go? Did y’all fire them after the homepage? Like what happened? This situation is what’s happening now. And you don’t wanna give that vibe, right? You wanna continue making sure that every page is professional. Okay, let’s go after this nav right here. I’m gonna start by tab navigating and we’re gonna see where our cursor goes. Okay we’re on the phone, we’re on the verify insurance, admissions, treatments, addiction, resources, about, contact. Now if I’m only using the keyboard to navigate this I don’t I don’t have any indication that these are that this is a mega menu right. Now I’m gonna hit enter or space bar and I’m gonna see if we can trigger the mega menu. I can, which is good. However, I didn’t know I needed to do that. I only knew that was a mega menu because I used my mouse to do it earlier. But if I was on strict keyboard, there is no indication that these, like where’s my little arrow? You know how there’s a little arrow indicator typically next to a dropdown? Those need to be here. Those are very important, right? Because it’s a visual indicator, hey, there’s other stuff here that you may want to interact with. Now we’re gonna check out the actual announcement of these links in just a second, because you can actually announce that there is a drop-down or additional things, right? So we’re gonna see if that happens. But as it stands right now, nothing. No indication that there is a mega menu there. Now, I am going to open the mega menu. We’re oh no hold on I got a phone call is that Bev? Is that Bev calling? Can’t talk right now Bev. I am sorry. Okay do you guys see the womp womp? Look at this. So question, question why allow me to trigger the mega menu with the keyboard if I can’t then navigate the mega menu with the keyboard I that nothing works I cannot get into that mega menu with the keyboard that is a no-go womp womp right okay that’s a hundred percent total absolute navigation failure in terms of accessibility all right let’s see how this is announced cover your ears. Let’s see.
2
0:40:03
VoiceOver on Chrome. Drug and alcohol rehab center vertical line Riverwalk Ranch. Google Chrome. Hold on. Window. There we go. Drug and alcohol rehab center vertical line Riverwalk Ranch. Selected tab.
4
0:40:13
Group.
2
0:40:14
You are currently on a selected tab. Group. Entering. Toggle dropdown content. Visited. Toggle dropdown content. Menu pop-up.
4
0:40:21
Group.
2
0:40:22
You are current. VoiceOver off.
Kevin Geary
0:40:24
Do you see how it announced that I can toggle the dropdown? The accessibility announcement is actually correct. The problem is I can’t do what it’s telling me I should be able to do. I can trigger it, but I cannot then navigate it. And that’s where your massive failure is in the accessibility of this menu right here. And you know, this is a common thing, right? It’s a common thing where everybody’s like, give me mega menus, let me build the mega menus, but like they don’t know what they’re supposed to be looking out for, and they build a mega menu, and then it’s 100% not accessible, and it’s just a disaster. And you know what, a normal sub menu right here would have probably been naturally accessible. But because it’s a mega menu, you gotta take some extra steps, and those extra steps did not get accounted for, and thus we have a failure in terms of accessibility. Okay, let’s go ahead and look at maintainability, scalability here. 100% had a client who got actually destroyed with a redesign from an SEO agency. More traffic, yes. More conversions, no. Yeah, that’s very, very common. Kevin, what tool do you use to listen to the website? If you have a Mac, it’s built in, and you hit Command F5, the little microphone symbol up there on top Command F5 will do Apple voiceover How does the mega menu look on mobile good question George let’s go take a look I Also don’t like necessarily how those menus stack like that I to me it’s like just go to the mobile menu Right don’t don’t be giving me extra lines to deal with just go to the mobile menu Alright, there’s our mobile menu, and I’m going to go ahead and click on that and that Okay back Treatments this is what this is the effect that you’re getting here At least now I have arrow indicators now these arrow indicators to me could mean we’re going to go to that page It doesn’t necessarily mean that there’s going to be additional links there But I guess it doesn’t really matter all that much either way. Okay let’s see if we can navigate that it’s not going to matter nearly as much you know on mobile but a screen reader still needs to be able to tackle this stuff. I don’t know if this is a completely separate menu or if we took the main menu and switched up how it’s being presented that would have to be looked at. But it’s decent here. Okay, so let’s jump out. I wanted to look at scalability, maintainability type stuff. I’m looking for a element that we would 100% use globally throughout the website, like these cards right here. I don’t know if they’ve actually been used on other pages. Let’s go to the about page real quick. Oh, I can’t, I’m sitting here clicking about, I’m like, oh, well, can we go there sometime today? It’s not a link. Okay, so all you can do is come down here and choose, which is, oh my gosh, hold on, you know what that means? Let’s go back with the keyboard. You know what that means? The story just got even worse. The story just got even worse. So, if I wanna go to the about page with the keyboard I cannot get there because this forces you to open the mega menu which I then can’t navigate and I can’t go to the actual link I am stuck I cannot navigate this website with the keyboard whatsoever I would have to go down to the footer which there’s no skip link okay so we’re also missing yep so there’s no skip link so I can’t skip to the footer. I gotta tab myself all the way down like a chump to get down to the bottom of this page, go through everything, and now, now I can get to the about page, woo!
4
0:44:16
Okay, all right, let’s keep going.
Kevin Geary
0:44:18
About us, our vision. See, look at this, look at this. Neck breaking copy right here with the page width.
3
0:44:30
All right, all right, all right, all right, all right.
Kevin Geary
0:44:31
Okay, let’s just go look at the one on the homepage. Let’s just assume these cards were gonna be used elsewhere on the websites. We’re gonna open, inspect. Do we find BIM? Do we find classes? Do we find ID level styling? What do we uncover? What is the gift in the box today? So we have a link. All right, as you guys know, I like to see unordered lists here with list items. We have a div, no, no, no, no, no, no, no, no. Oh no, no, no, no, no, no, no, no.
6
0:45:02
Guys, what’s supposed to be here right now?
8
0:45:04
What is supposed to be here right now?
Kevin Geary
0:45:05
Is this a div or is this a heading? Or is this a span? Or is this a paragraph? Or is this a something? It’s got to be something with now the fact that your SEO, the SEO agency comes in and they want to take over and they turn key text. This is critical text into divs. Or maybe they didn’t spot this, right? Maybe it was a div to start out with and they just didn’t catch it. But what you’re telling Google is this text and this text mean exactly the same thing. They have the same relevance level, which is nothing because a div has no relevance. You know, Google’s crawlers, they just look at a div as a div as a div as a div as a div. It doesn’t mean anything. So you’ve taken key text and you’ve basically said, this is not really that important. So if you made this in H3, now you’re telling Google, hey, this text right here is kind of important. If you take this text right here and you say, hey, this is a P, it’s a paragraph. Now it knows, oh, okay, this is body copy of this page, we should probably pay close attention to it. But as a div, it has no semantic value whatsoever. These semantic tags are very, very, very important. What’s going on with this link here? Is this a link or a dummy link? It’s not real? Because the whole card is clickable. Let’s see what’s going on. We have a span, but I’m noticing there’s no text in the span, right? What we have in the span is a div. Oh, okay, let’s open the div. Oh, we have another span, and it’s got something inside of it. What’s it got inside of it? Oh, an icon. And then there’s another div with something, with a span inside of it. Oh my gosh, I’m in Inception right now. Divs and divs and spans and divs and spans. So this is a good example of the div-ception of builders that are not fantastic, the elementors of the world, the pro builder of the world. I love how it’s called pro right they were just I mean imagine the confidence that you need To come out of the gate and just say we’re the pro builder but we give you divception and we give you inaccessible mega menus and All sorts of fun goodies right that are not really they’re not really pro Okay, so yeah a lot going on there. Let’s close all of those up All right, so we can click on these cards. Can we can we navigate these cards? Okay, we can how are these announced? I wonder so let’s go back to our announcements. We’re diving into more accessibility here
2
0:47:46
Banner visited it took me back to the top Link link link image image link image image. Oh I mean, let’s just go through the whole thing heading love voice. Oh, let’s just go through the whole thing and just tell me
Kevin Geary
0:47:57
for a screen reader user, how good of an experience is this? Now, in all fairness, he said, I don’t know anything about accessibility, right? And this is what happens, right, on a normal website, that people just don’t know about accessibility, don’t care about accessibility whatsoever. This is the kind of experience that a screen reader user gets, okay? Now, let’s just go through it and see. We’re not gonna start with the nav. We know the nav is a unmitigated disaster. We’re going to keep going and we’re going to see what the rest of the page presents us with.
6
0:48:30
Here we go.
2
0:48:31
Banner. Visited. Link. COVID-19 advised. Visited. Link. Image. Link. Heading level one. Drug and alcohol addiction treatment. You are currently on a link. To click the link. Accepting new patients. Link. Image. Image. Article. Drug and alcohol rehab center one. You are. Link. Heading level two. 877-863-link image, image. Drug and alcohol rehab center two. Link image, image. Drug and alcohol rehab center three.
Kevin Geary
0:49:01
Why are these links, by the way?
2
0:49:02
To click this link.
Kevin Geary
0:49:03
First of all, let’s just talk about, let’s just talk about the fact that I didn’t know these are links. There is no, first of all, I wouldn’t expect it to be a link, right? Would anybody expect this image to be a link? I would not expect this image to be a link. But there’s also no hover indication that this is a link other than the hand. And I don’t know why it’s a link. Where is it going? And it doesn’t tell the user where they’re going to go when they click on it. I referred to the navigation as an unmitigated disaster a minute ago, this continues the unmitigated disaster of navigation on this website. I can see down in the very low left-hand corner that this goes to the admissions. That does not need to be a link. Don’t link these random images. And as you can see on a screen reader, it puts all these obstacles in place to like, where am I? What am I? Oh, good, I’m hovering over image, image, link. Oh, that’s fantastic. Glad to know that. They have no idea where they’re at. They’re 100% lost. Keyboard user, no idea where they’re at on this page. So, you know, that’s a problem there.
2
0:50:11
Let’s keep going. You are currently, link, read more, link, heading level two, visited, link. Medical detox, our medically monitored patrol management program provides 24 hour nursing care with a physician on site to handle significant problems. Counseling is also available 16 hours a day. Read, link, read, visited, link. Partial hospitalization, our partial hospitalization program,
Kevin Geary
0:50:29
They don’t want to hear all that. They don’t want to hear all that. You know what they want to hear? Our programs, medical detox, residential inpatient services. And give them a little additional like, don’t make the screen reader read this entire card.
12
0:50:53
And that’s why you don’t, we’ve talked about the clickable parent technique before.
Kevin Geary
0:50:53
We’ve talked about making the heading of the card the actual link, because that’s the relevant information. And don’t make the entire card literally a link, which is what’s happening here, right? So if we inspect this, we can see the card itself is an A, it’s a link, right? So the screen reader is going to announce every piece of text inside of that link. And that’s not what they want. That’s not a good experience, right? So what we really want is let’s let them know This is a list of our programs and let’s give them the headline of each program and hopefully the headline is Written in such a way that it gives them the information that they need to be able to click on that heading and continue Navigating the website, but you know page builders encourage you to do this kind of stuff. So if you don’t know what the standards are, if you don’t really know what you’re doing, you’re just page building with a page builder. This is the common thing that we end up with all the time. And this is not as bad as it could be. Because what I’ll often see is the card is a link, the heading is a link, the read more is a link. They all go to the same place. Now there’s three links, there’s nested links it’s an absolute disaster this is only a disaster in the sense that it’s reading all of and if you had 15 paragraphs inside of this card which I get it you wouldn’t have but in some situations you might be in a situation like that it would read every single freaking word of that link right because that whole thing should not be a link okay I’ve done plenty of stuff on Clickable Parent. I show you exactly how to do it. You can do it with one class in automatic CSS. That’s the way to go. Okay, let’s take a look at the blog, a little bit of SEO stuff. We’ve done copy, we’ve done UI, we’ve done UX, we’ve talked about some of the problems, we’ve looked at accessibility, we’ve looked at the mega menu situation. Let’s now look at just SEO, because an SEO company did come in, right, and did some work on this website. Let’s see how they’ve done. What have they done and how have they done? Let’s take a look at what is the difference between binge drinking and chronic drinking. So obviously this is targeting a very specific term. People are looking for this, that’s why this article was written. So let’s just see what we’ve got going on here. So binge drinking versus chronic drinking, risks of binge drinking, risks of chronic drinking, which is worse, spend drinking or chronic drinking. Okay, so very, very classic content marketing piece from an SEO agency. Let’s just do a little quick check here. Let’s see how many words we got here. 675 words. Just absolute classic SEO agency selling content marketing. They’re gonna give you around 600, 700 words. It’s gonna be generic copy. It’s gonna have no personality. It’s gonna have no real work put into it, right? So we have a, is this an internal link? Riverwalk Ranch, that’s an internal link. Is this an internal link? Internal link. Is this an internal link? Internal link. What a fucking recipe, dude. Oh, we’re going to give you 600 words of content, three internal links, they’re just checking boxes. Fucking AI wrote this shit, probably, almost certainly written by AI, or AI assisted copy, whatever you want to call it. No other images to speak of. One stock photo, right? Okay, so this is not, I guarantee you, they’re not really gonna get much out of this. Okay, if we did, let’s just do this. So let’s go to riverwalkranch.com. We’re just gonna go deep here. We’re going all in on what the fuck did this SEO company do? Because this is the like $3,000 a month,
3
0:54:46
this is what you get.
Kevin Geary
0:54:47
All right, it’s all the same generic recipe type SEO nonsense. Please don’t make me do this, Ahrefs. Okay, all right, let me go over here to my other screen. We gotta do confirmation links. All right, which one was it? Because I hit it a second time. Okay, refresh, now I’m in, thank you. Okay, great, Site Explorer, let’s go, let’s have fun. Riverwalkranch.com, let’s see what’s going on here. Holy shit, zero keywords, zero traffic.
11
0:55:17
Woo!
Kevin Geary
0:55:18
They’re making dozens of dollars off their SEO. Okay. Let’s go down here. Organic keywords. No, wait, I don’t know what, what is HRS talking about right here? Oh, that’s paid search. Okay. So 2.9 thousand keywords, one thousand visitors a month. This is all estimations. It’s not, you just use these to compare relative traffic from one site to another site. It’s not really meant to be like accurate statistics. Let’s go to organic keywords and see. So brand search query number one. They’re in position two for Riverwalk Ranch. Seroquai withdrawal symptoms, okay. So this is a, let’s see what section of the website this is in. I wonder if this is Right here Maybe in like this section here Let me see if the blog articles have a blog Slug let’s go down here click on this Okay, they don’t so this is gonna be hard to decipher What is Sarah Quill, okay, so this does not appear to be a blog article This was just an informational page that was put on here. Notice it has other images within it. And then any SEO company knows too, they see there’s your like three internal link recipe again going on here. They threw some references down here. There’s some external links. You’ve gotta have external links. If you want good SEO, you’ve gotta have good external linking. And a lot of SEO agencies that don’t know what they’re doing and a lot of just general websites that are like, why, I don’t want to link out, I don’t want to link out to anybody else. Good SEO combines internal links and external links. You have to be willing to link externally to have good SEO. So, you know, when I see an article and it’s got three internal links and nothing else going on, that lets me know we’re not doing the best possible job here. But look, they’re in position eight for that. It’s not like they’re on position one or two or three or anything like that. But we have how to wean off Seroquil. Okay, so we’ve got some good rankings in here. And it’s for specific drugs, it looks like. Okay, yeah, a lot of stuff about withdrawal on certain drugs. Okay, this is good. Okay, I don’t see any of the real blog articles in here though. And something like this, let’s go to, here we go. Binge drinking and chronic drinking. So let’s go in and let’s do, man, it’s been a while since I’ve done some HRF stuff. Let’s go to, come on, they changed a lot of stuff too. All right, let’s go to organic search top pages. See what their top pages are. I wish that there was everything collected within like a blog slug. I’ve been a fan of that lately because it really helps you narrow down in your analytics as to how are our blog articles doing? Right, we can easily see them because they’re in like a subfolder. All right. I’m just gonna do a quick search on here. Binge, nothing, okay. No rankings for binge, binge, okay, here we are right here. Okay, what is there between binge drinking and chronic drinking? And we’re just not ranking much at all, okay. So let’s talk about what should be done here, right? I don’t know when this was published. We might be able to find a publish date in the DOM somewhere, but I’m not gonna go that deep into it. The base copy is good. There isn’t enough copy here, number one. Let’s do binge drinking versus chronic drinking. And let’s just see what we get from Google. Okay, so the good thing that we see is there’s not like a WebMD or you know big corporate monstrosity of a website ranking for this it’s another recovery type website and so they’re ranking number one let’s go in and see here all right and they actually don’t have a lot of content they do have their external references right here let’s see what’s going on with number two okay well that now we do have a big government organization ranking number two but it’s the national helpline. It’s not for that specific term. So, and that’s binge drinking versus alcoholism. So let’s just do binge drinking verse. What were they going for here? Keywords, explore binge drinking verse. And then what we’re going to do is do matching terms and we can see binge drinking versus alcoholism. Well, that’s, that’s why that exists right there. We can see like an SEO agency, obviously identified that keyword. They wrote content for that keyword. Hey, they’re ranking number one for that keyword. Imagine that. Nobody else is, well, this health line is kind of targeting it. Did you just, okay. These two have the exact same title. That’s funny. See this a lot. Health line should be dominating here. I don’t know why health line is not in position number one. Let’s go down here. They actually have a better article, honestly, for it. So this is just an example of like Google’s algorithm not really working the way that it’s supposed to. It could be a backlinking thing. They could be gaming. This is, let’s go, I just like, let’s just nerd out on this real quick. Let’s go to Site Explorer, figure out what’s going on with this article that makes it so great. 11 backlinks from seven referring domains. Now we’re gonna go to Healthline. Where did my, oh, okay. Let’s close that.
3
1:00:59
Let’s search for it again.
Kevin Geary
1:01:01
There you go, okay. So that’s that. Let’s go to Healthline. Let’s come in here. Let’s open another Site Explorer, compare these two together. Oh, there’s no reason, no reason, Google, see we need someone from Google on the line explain this shit to me. 54 backlinks from 31 referring domains is being outranked by 11 backlinks and 7 referring domains and objectively worse copy. Makes no sense. This is why the SEO game is a little bit frustrating because you, Healthline I mean they have the brand recognition, they did a better article and they’re being outranked by this nonsense, you know, 600 word article from Silvermist that nobody’s ever heard of. Kind of unexplainable stuff sometimes, but it is what it is. Anyway, let’s get back to what you should see. So if we were selling content market, let’s just go to gary.co. I wrote a new article recently, and this is not really for SEO. This is just for content marketing purposes, giving people really, really good, valuable information. So this is not even SEO. But if I was doing SEO, this is kind of what an article should look like. Okay, so number one, you’re gonna see that we have additional imagery throughout the article. Helps with user experience, gives you more opportunities for image ranking, things like that. We have a lot more, you’re gonna find more linking, you’re gonna find external linking when possible. You’re just gonna find more content in general. So we just grab all of this really quick, well I can actually just edit it. Let’s go edit. I’ll just tell you in Gutenberg what your word count is. But this is the kind of content that typically is going to do much better. There you go, 2,500 words, right? But the problem is 2,500 words is expensive to produce. And so a 600 word article that’s never gonna really do anything for anybody is easier to sell. And let’s just ignore the fact that it’s not really ever really gonna rank that well. And let’s just sell it to them anyway. And we check the box of, okay, we gave you your 600 words, we gave you your three internal links, and we did have blog page after blog page after blog page of that kind of content that doesn’t ever really do anything for the website. I’m gonna go to HubSpot real quick. We’re gonna go to their blog, resources, blog. Okay, and let’s just take a look. The HubSpot blogs 2023 marketing strategy and trends report. Let’s not do that, because it’s a little specific. The top types of AI generated content in marketing. So let’s go this, okay. What do we see? Oh, look, we’ve got a little overview of what’s going to be in here. We’ve got listed content, additional graphics. Hey, what’s this? All right. Internal link, internal link. Let’s see their social media calendar, internal link. More links, more links, more links. Let me see what this goes to. They have so much content that they can do just tons of internal linking. AI writing generators. They’re kind of failing here in the external linking strategy. Website bounce, they could have done some external linking here for this. But see the difference. This is like professional content marketing and SEO. Custom graphics have been put in here, which by the way, that right there is a link farm. Okay, like you know how many people will link just to this graphic? And so HubSpot is the king. I just go here because they’re an example of the king of SEO and content marketing. This is how it should be done. So if you want to know what should real content marketing look like, HubSpot actually absolutely dominates the web in terms of content marketing and a lot of people argue well you know a lot of its generic content sure right it’s for beginners but they link to other stuff it’s very comprehensive when you take into account all of their internal linking to other articles like if I’m reading this and I see this thing about a b testing and I’m like I don’t know what the hell AB testing is. What is that? I can click on that. And now I’m on a whole new article about AB testing. Look at the web of, and this is actually very in depth and look, more custom graphics, CTAs, tons and tons of additional internal linking. It just keeps going and going and going. You can learn so much stuff. This is what Google loves. Google loves this creation of like a web of authority-based content with clear internal linking. They want external linkings to see your sources. They want graphics in there for user experience, keep people on the page longer. This is professional SEO and content marketing. If we go back to what we were looking at earlier, and we’re gonna get to Q&A in just a second, so hang tight. This is generic checkerbox content marketing and SEO. That’s what this is. And it hardly ever gets any real results. They’re gonna crush all the low hanging fruit. They’re not really gonna get any results in any other areas with any sort of competition. So that’s what that’s gonna do. Just wanted to nerd out on that just a little bit there. All right, I think we’ve done enough on this website. I need to get over to the live chat, see if there’s any questions. Remember questions need to be, put question in all caps then do your question so I can find it easily But let’s just go through and see What are people saying performance or core web vitals are poor which is not helping SEO LCP is twelve point eight seconds on the home page. We can take a look at that real quick Page speed web dev drop that in analyze. Let’s do this real quick Mm-hmm Diagnosing performance issues. Taking a little bit longer than normal. See what it comes back with.
3
1:07:03
All right, we’ll let that sit there and run
Kevin Geary
1:07:05
while I read some additional comments here. I thought clickable cards are very common and generally beneficial UX, maybe not for accessibility though. No, yeah, you can still click the card with the clickable parent technique. The entire card is still clickable. It’s just the entire card is not a link. It’s a little bit of a trick. Ooh, ooh, yes. Wow, we didn’t even get, there’s a metric missing. I’ve never even seen that happen before. But we do have, yeah, 12 second LCP We’ve got 3,300 milliseconds of blocking time look at the first three slides of the loading are Blank you never want to see that reduce unused JavaScript Mmm You know a little bit. It just tells me optimization hasn’t been done like you could do optimization and get this score up dramatically but yeah, there’s a lot of a lot of red flags here. This is definitely harming SEO. Desktops even an 86. That’s that’s low for desktop. Desktop should be like 99, 100, 98 somewhere in there. Okay so good on pointing that out that we have some performance issues on the website as well. Alright, question, even if the website loads fast, should I care about the page speed result? Yes, yes, absolutely. Not as much as people think, right? It’s not like, oh, you’re not getting 100 on mobile, so this site sucks. And even if you’re in the 80s on mobile, if the experience on an actual device is good. The trick, or I guess the trap, the trap that people fall into is, they pull it up on their device, on their gigabit internet, and they’re like, loads fast, loads fast for me. It’s like, dog, you’re on fucking fiber, right? Not everybody’s on fiber, okay? So it’s kind of measuring this on like, if somebody’s stuck on 3G, on 4G, you know, what is their experience like? And it turns out, they ain’t having such a great experience, right? So you can’t just pull it up on your phone and be like, oh, it’s fine. That doesn’t mean it’s good for everybody. Then you also have people in other areas. Now, if somebody in China pulls up the site and they’re like, oh, loaded slow as heck, I don’t care because somebody in China is not coming to this ranch for alcohol treatment, right? People in Texas, the site needs to load fast for people in Texas. You know, you don’t need to put this on a worldwide CDN and anybody in Europe can check this and it’s a great experience for them to, doesn’t matter, right? Because we’re not trying to reach those people. So we need to make sure it loads good for people in Texas or maybe surrounding states who might want to travel here, whatever. Okay. Okay, how do you estimate the price per word subject for an article? There’s a lot of different ways to do content marketing pricing. I covered, well you can see exactly my pricing I think in my pricing guide in the inner circle. Which Kareem, I think you’re already in the inner circle, right, you should be, if you’re not, I think you are though. Just grab that, I outlined that inside the inner circle, Did I misunderstand what he said?
3
1:10:26
I think he suggested linking to the headings in the card.
Kevin Geary
1:10:28
Yeah, yes, that is correct. The heading of the card is the link, and then you take that link and you expand it to the entire card. So this is the only link in the card, but the entire card is actually clickable and selectable. Okay, let’s go up, up, up. Question, what are the best practices for internal and external linking? All right, great question. That allows us to dive deeper into this. Okay, so what is the difference between binge drinking and chronic drinking? First of all, this isn’t even targeting the relevant keyword, as we saw. So binge drinking versus outlook, it’s not even, there isn’t even a chronic drinking option here. There’s no indication that that’s what people search for. Bin shrinking versus alcoholism is what people search for. And the volume is not that much. So they’ve chosen a keyword. Now depending on where they’re at in the strategy, this can still be a viable thing. And I actually think even though a lot of people don’t search for it, it’s still good content to have because people probably wonder. And you can even use it for other types of marketing. So it’s still good content to create even though it’s not blowing us out of the water with like, you know, volume and traffic potential and things like that. But that’s clearly the term, right? You could do one on this for sure. You know, what’s the difference between 10 and zero to 10? You know, not much. So binge drinking versus alcoholism is what I would have written the article on. And now we open that article and we see the initial copy. Different ways of abusing substances each pose different risks. When it comes to alcohol abuse, binge drinking and chronic drinking are both common among adults. Though neither one is particularly healthy, is there one that is more damaging? Binge drinking versus chronic drinking. Okay, binge drinking is marked by, so what I would do is I would link, I would go here, binge drinking, okay? I would do this, and here you go, understanding binge drinking, look at this. So it’s a government institution, right? National Institute on, this is an authoritative website that talks about binge drinking. So I would close this, I would make this an external link to that page right there. And then I would find chronic drinking. So hey there’s the CDC but that’s not really about chronic drinking specifically. Okay here you go, health risks of chronic heavy drinking. I just grab this, come in here, external link my chronic drinking text to that. External links open in a new tab by the way. But now what I’m doing is I’m writing an authoritative article But because Riverwalk Ranch is not the authority on these topics and Google knows that Google needs to know that hey We’ve done our research and we are going to reference these other authoritative websites on the topics that we’re talking about Google wants to know where you got your information from when you wrote this article and so we need to tell them, hey, here’s where I pulled some information from on this topic and this topic and this topic, and that’s where the external links get placed. And so now Google sees, all right, content, which we’re going to digest, resources from where this content was pulled from, not just not pulled from, but this is kind of where the knowledge came from, right? And then we have internal links to other areas of our website that demonstrate to Google, hey, we talk about these topics elsewhere on the website, which gives Google an understanding of, okay, there’s a lot of good stuff going on on this website right here. They’ve got their sources. They’ve got all, they have an about page, which, you know, there should be an author profile. That’s something else that’s missing here. Who wrote this article? You realize that Google wants to know who writes articles? So the fact that an SEO agency came in here to do SEO and there’s no author bio? Like this is a major part of Google’s algorithm is who wrote this? We need to know. Are they a doctor? Are they a researcher? Are they an expert? Do they have a LinkedIn profile? Can we verify they even exist? Google cares about these kinds of things. So the fact that that doesn’t exist, there’s another red flag on what’s being done wrong with the SEO on this page. So we’re missing truly authoritative content. What we have is generic, 600 words of generic content, no external sources, no author page. No, I mean, how many boxes did we fail to check here? Hope you’re not paying too much for your SEO, right? Okay. Good question though. I think I answered the question, right? Yeah, yeah, yeah. Okay, so I do, yeah, that was on external linking versus internal linking and where to do it, how to do it, why to do it, whatever. We just covered that. So I would say, you know, for every, in an article like this, I might have more external links than internal links, honestly, and Google loves that, by the way. Google absolutely loves external links because that’s what creates the web. That’s what creates the web. Okay, let’s keep going with questions. All those blog posts and pages are being redone.
3
1:15:42
They created the blog articles.
Kevin Geary
1:15:44
We started testing with creating pages instead of posts. And all those with external references are made by us. Not pretty, but we’re doing other work for them. Well, these still need to be posts, right? There’s no difference between a page and a post to Google. Google has no distinction between page, post, they don’t care, they don’t care. They care about the content that’s on the page, the URL of the page, the H1 of the page, and so on and so forth. What are these? Are these H2s? Yeah. Is this an H1? Yeah. Does this have an alt tag? Yes, causes of binge drinking, okay. And the other thing that I will say, and it’s hard to do with clients, but it is that extra step. If you can avoid stock photos, avoid stock photos. Having proprietary photography in your articles is light years better than using stock photos. Google knows exactly what’s a stock photo and what’s not a stock photo. You can also, by the way, have a lot of additional metadata inside of your photos, such as location metadata that can help with localized SEO. So if you can use proprietary photos, that’s the way to go, but not all businesses can provide those or afford to have them done if they need to be done. And then in some cases like this where there’s like privacy concerns, you know, that can be a little bit tough as well. Okay, I Think we’ve done enough there. Let’s see if anybody has any other questions That we’re gonna hit on by the way, the questions are not relegated to just this website. In fact, I’m gonna go back to camera Quite the the Q&A session is open now and it’s on anything business SEO sales pricing UX UI automatic CSS, frames, literally anything. You can ask anything you need to know, wanna know now. Now is your chance to get additional extended value. How are we doing on time here? All right, we’re at 1218, this is good. All right, is it possible to display only first image of gallery using image gallery block in Bricks Builder after click on the image gallery will appear in lightbox as usual. There are ways to do that. I don’t know if you can do it out of the box. And I don’t know that I would do it necessarily because we get back to this situation. If somebody sees a single image like this, they don’t expect this to be clickable. I don’t expect that to be clickable. Again, there’s no indication that it’s clickable. I certainly wouldn’t expect it to open a whole gallery of photos. You’ve got to give context clues, okay? Where was that? Here it was, right here. See this? Now, I might see four photos and be like, I want to see more, and they’re looking to see if these are clickable, and these are not clickable. But any of these could open this photo bigger and then start a lightbox style gallery. That would make contextual sense, right? And I would also give an effect when they hover to demonstrate, hey, these are clickable. So for example, I hover and it zooms into the photo just slightly, right? That little slight zoom in lets me know, ooh, this is interactive. Can I click on that? Yes, I can click on it. Ooh, there’s a lightbox. Now I can see it bigger and I can flip through a bunch of photos. That’s the kind of situation where you want to present a lightbox, right? You don’t want a single image to present a lightbox because a single image doesn’t give the context clue of there’s additional images here. A row of images gives the context clue of, hey, there are more images that you may want to look at. So I would never do it off of a single image for sure. It’s just not good UX. That’s like a, you know, user experience fail. So yeah, could you do it? Yeah, you can probably find a way to do it. Should you do it? No, that’s often two very different things. There’s a lot of, if you look in Facebook groups, questions people ask, can I do this? Show me how. And half the time I’m like, but why would you want to? Don’t do that. Even if you find a way, even if somebody answers this question for you, please don’t do that. Not a good idea. And that happens all the time. So just because you can, doesn’t mean you should in web design.
4
1:20:14
All right, Eric says he wouldn’t agree.
Kevin Geary
1:20:16
All right, so let’s see what he’s not agreeing with. I wouldn’t agree with this. I usually expect the thumbs to be a link and I’d optimize the site for the majority of users. How many percent of users are using accessibility tools really I wouldn’t agree with this I usually expect the thumbs to be a link I think he’s talking about what would he be talking about you expect the thumbs to be a link these these images you expect me well that’s not a link right there like I could ask the question why is that not a link, but this image is a link? And we’re training users now that this is gonna be a link, but then they get down here and there isn’t one? But is that what you were talking about? Or were you talking about these blog articles? Let’s inspect this. What does the DOM look like here? So we have, where’s our card? Geez, there’s so many divs, I can’t even find the card. All right. There’s the card right here. There’s our row. There’s the card. Okay, so Card card card got it Now we open the card and that that is a link by the way that card is a link we open here We get a span. Why is the image in the span? Don’t know the image is a link So there’s now we have two links in the same card to the same place Well, first of all accessibility right away is you never link to the same place in the same area more than once. Because it just provides additional links that they have to focus on that, you know, do the exact same thing. Now we come here to a div. It’s got a div inside of it. It’s got a div inside of it. It’s got a span inside of it. My gosh. But no link. Okay. So that’s good to see. But again, a span, no semantic value whatsoever. So that should be a paragraph, right? We get down here, here’s the read full article, okay? Open divception, icon, divception, span, okay. So there’s no additional link, but there are two links within that card, and let’s just see what we get for announcements.
2
1:22:18
You are current link, read full link, visited link, causes of binge drinking, what is the difference between binge drinking and chronic drinking? Read full article, read full article, group, you are currently on a group. Inside of a link. Link, read full article. Link, visit read full article. Group, voiceover off.
Kevin Geary
1:22:35
So it actually did not select the image. And let’s go in here. Okay, data, title, alt, okay. So it skipped announcing that link, but it announced this link twice. It’s just a mess, it’s kind of a mess. And so the people ask, well, and so like Eric is disagreeing with this, I would expect the thumbs to be a link. It doesn’t matter visually what the link is. Like I said, with the clickable parent technique, the entire card is clickable. So if that’s what you expect, that’s exactly the experience you’re going to get. It doesn’t matter what percent of users are using accessibility tools, like screen readers. It doesn’t matter because the visual reader is getting the experience they expect and the accessibility user is getting the experience they want and expect. Both people are winning. In this scenario one person’s winning, that’s the visual user, and the accessibility user is hung out to dry, right? It’s like a business is like somebody comes in and they say, hey, you should put a wheelchair ramp outside of your business. Let’s say your best buy. You’ve got this giant box store where people can come in and buy gazillions of dollars of electronics. And somebody comes in and they point out, they’re like, yeah, you don’t have a wheelchair ramp there. And they’re like, well, what percentage of our users are gonna, well, do you want the guy in the wheelchair who’s rich to not be able to come in and spend a lot of money? Does the wheelchair ramp like affect everybody else that they can’t come in? No, okay. So you can add this thing that allows more people to come by from you. Why wouldn’t you add that thing? That’s kind of the question. That’s just from a business standpoint, right? So it just doesn’t make sense from a business standpoint. I want more people to be able to come by from me. If somebody using a screen reader for whatever reason, and that’s not the only angle of accessibility, by the way, just think colorblind users. How many people are colorblind? I think the stat is 8% of everybody, 8% of the population has a significant disability that affects them using a website. 8% of users is kind of a lot. You know, when we talk about like conversion rate optimization, that’s a solid chunk of people doing a certain thing on a website, right? So 8% of users have some sort of disability that affects the use of a website. Some of it is color blindness. Some of it is I can’t see at all. I’m blind. I’ve got to use a screen reader. Some of it is my hands don’t work, so I’ve got to use this other type of navigation to use the website. Whatever it happens to be. 8% of users can’t use your website very well and they leave and don’t buy anything. That’s kind of a lot of money over time, right? So that’s kind of the business argument for accessibility. There are other arguments for accessibility as well, but that’s just the straight up business argument for accessibility. We want more people buying from us. So let’s not exclude a bunch of people that we don’t need to exclude. And if we just do a few different tweaks and adjustments, we can include them. And then all is well in the world, right? And again, it does not affect the visual user. So it doesn’t have any cons. It doesn’t have any negatives. All right, let’s go up, up, up.
4
1:26:06
Remember, question has to be in all caps
Kevin Geary
1:26:08
and then you can ask your question. I’m gonna scroll through here. Let’s see, 100% had a client who actually got destroyed from a redesign. Okay, I think we went over that before. They create a, oh, I noticed that is a rookie mistake for designers, they create a beautiful homepage and then throw the inner pages together. Yeah, and it’s, I think a lot of times it’s like, there’s gonna be so many internal pages that people wanna templatize it. And so you create a template for the internal page that’s super generic, and then they just start using Gutenberg to throw content together. It becomes like a Microsoft Word document, more or less. We stop using the builder. We stopped caring all that much. Uh, it’s just, it, yeah, it’s bad.
3
1:26:55
Okay. Um,
Kevin Geary
1:26:56
I found that focusing on user experience first and then SEO after the results for organic growth are better. Yeah. I mean, user experiences should be the number one thing, right? We want to convert the highest percent of visitors that we possibly can, and once we’re doing that, then we can focus on going to get more visitors. But if we just focus on bringing tons and tons and tons of people here, but we do a terrible job of converting them, that’s backwards. That’s not the way to go. And I tend to tell clients this, I use the bucket analogy, right? If you’re gonna fill up a bucket of water it helps to make sure that the bucket doesn’t have a bunch of holes in it First you have to pay a lot of money SEO is expensive PPC is expensive Facebook ads expensive social media expensive You don’t want to create all of that expense Bringing all these people in to a bucket that has a bunch of holes in it and all these people are just flooding out the Sides and they’re not actually converting. What good does that do you? Now an SEO company, see, they don’t have your back a lot of times. They don’t necessarily care. Because it’s all a I did my job mindset. So an SEO company will come in, see when I was doing heavy SEO for people, I would come in and the first thing I would say is, here are the 20 things we have to fix on this website before we do any SEO. Because I don’t wanna go get you a bunch of traffic. I don’t want to cash your checks. Okay. Do a bunch of content marketing, do a bunch of SEO work, get you a bunch of traffic and you still have no more money at the end of the day. You have no, cause we’re losing all this traffic. We’re not converting them. So your sales copy sucks. Your UI sucks. You got a lot of stuff that sucks. I need to fix these things. Then we’ll focus on getting you more people. Most SEO companies don’t do that. Most SEO companies come in, bunch of content, they do all their little SEO stuff. If they succeed, which most don’t, but if they succeed and get to a bunch of eyeballs, you have a bunch of vanity metrics. It’s like, oh, look at all this traffic that we’re getting now, why don’t we have more money in the bank? Why don’t we have more conversions, you know? Or we got more conversions, but why is our conversion rate suck so bad? Seems like we’re getting a lot of people, we should be getting a lot more business. Well, SEO and conversion and user experience, two very different things. But the SEO company, well, we did our job. Doesn’t matter, we did what we promised to do. But you’re still not winning. So you need to assemble a real team. Like a real team goes, hey, I’m doing my job, but I’m spotting over here that this job is not being done. And let’s go ahead and make sure that that is shored up so that we can actually get to the finish line here. That’s really what you need. Okay, question, what is the best practice in terms of SEO for multilingual websites? Let me get a sip of water here. Got a little bit of a tickle in the throat. Okay, best practice in terms of SEO for multi lingual websites, simple site with a multi lingual plugin or a multi site website different version for each site. Good, good, good, good, good, good, good question. I’ve seen both routes be used. And what I will say is I do not do a lot of multilingual websites. Just not, in our area, in Atlanta, it’s not a big thing. It’s not something that clients request very often. I think the last time I did multilingual was they had a location in Miami, and so they wanted a Spanish version of that website. That was the last one that I did. And for that, because it was only the service area page for Miami was the only one they really cared to translate all that much. We just did a plug-in route, we added translation to that page, whatever. I’ve seen people do a whole subdomain, like a Spanish dot whatever the website is, and the whole thing is translated into Spanish and put on that subdomain. I’ve seen that route. I’m not the guy to answer that because I don’t, my expertise is not in translated websites. So I’m going to punt on that question because I know of different routes you can go, but I’m not going to objectively say, oh, I know which one is the best in that regard. And it may be a case by case basis thing, where, you know, it just depends on the scope of the website and what the real goals are and how many languages are there. And do we really, really, really want to rank in these different languages, or do we just want people to be able to translate for user experience? There’s some unanswered questions there as well.
3
1:31:46
Okay.
Kevin Geary
1:31:47
Okay, question, can you share your screen? We saw none of the stuff from the last five-ish minutes. See, that’s the whole like, you’re rusty. I was talking about these articles right here. All I was, it was the same thing I pointed out earlier with the cards, right? Where you have a clickable card, you have multiple links inside the card, yada yada yada. So this was the card right here and it was the same thing you saw before. It was just a bunch of divception. This was a span, this was a span, this image was in a span, this image is a URL, this is not a URL, the whole card is a URL, so we had two different URLs going to the same different, it’s just kind of what I was showing earlier when I did this up here, which you already saw. So it was just a reiteration of some of those points. But the main thing I was showing is this experience of hovering and being able to click anywhere on this card is achievable with an accessible structure. So you don’t lose this in order to gain accessibility. Visual users can still do all of this right here. But accessibility users can also do their thing and their experience is equally as good. So both people can win was all I was trying to say.
3
1:33:06
Okay.
Kevin Geary
1:33:07
Meanwhile, I’m just wondering why there’s a chair right in front of a door. That’s my closet back there. It’s not a, it’s not, that’s not a door that goes anywhere. It’s just a closet. And this is just like a little extra seating. And we, I moved that chair around for various purposes and that’s where it just kind of gets stored when I’m streaming. So it’s not sitting awkwardly in the middle of the room. Great question though. Absolutely fantastic. Okay, let’s see. I’m trying to sell micro sites or business cards that basically are CPTs with templates. The key of the website is the domain, because of geography, how should I focus the storytelling of the business? I just, I need a concrete example. Can I get a concrete, what is an example of a topic for the micro site? I wouldn’t call it a business card. Like a business card and a micro site, nah, they’re two very different things.
7
1:34:06
And I don’t know what you mean
Kevin Geary
1:34:07
by the key of the website is the domain. Oh, okay, it’s probably one of those like chiropractorinatlanta.com. Like that kind of micro site, is that what you’re talking about? Give me an example, Darwin. I can go further and farther with an example. Okay. Yes, Lucas, this is what if I forget to screen share, use your imagination. Okay. All right. Let’s see. That’s a winning comment. Winning comment right there. I’m paying big money to watch this. Absolutely. Listen, it’s free. And so it is, it is, oh, I’ve been tagged 700 times. Fantastic.
3
1:34:55
All right.
Kevin Geary
1:34:56
Can I use clickable parent class hooked with ACSS via WP code box? There’s, I don’t think a mixin exists for it,
10
1:35:06
but we could create a mixin.
Kevin Geary
1:35:07
That might be a really good thing to create a mixin for. That might be a really good thing. Kareem, that might be a really good thing to create a mixin for. A clickable parent mixin. Now right now, you can just use a class clickable parent, but on a lot of different cards, that means a lot of different classes. It’d be better if we could BIMify that. To BIMify it, we would need a mixin. Yes, that is a good use case, Kareem. I’m adding that to the list right now. Okay, is Bricks ready for medium e-commerce websites in combination with frames and automatic CSS? We are releasing, right now we’re heavily focused on e-commerce frames for frames. That’s number one. That’s one part of your question. The second part of your question is, is Bricks ready for medium e-commerce websites? I don’t know because I’m not a big e-commerce guy. I would lean towards no, because I think there are some limitations with Bricks when it comes to e-commerce, just being honest with you. This is my honest assessment of what I know at the current time. I think there’s some limitations when it comes to e-commerce and Bricks. And so, a small e-commerce website yes medium to large on I don’t know how you’re gauging this but medium to large I would say hold off doing that in bricks but as more frames are released and maybe as we overcome some of these limitations and bricks with e-commerce I think absolutely we’re going to get there we’re going to get there and frames is going to make it a lot easier to get there but we’re still in the early stages of e-commerce with frames, and bricks I feel like is still in the early stages of e-commerce with bricks. So those are two things that are a yes in the future, but probably a no right now. How do you create a block that sticks in the sidebar during scroll, one section only? Very, very, very easy to do. Eric, are you using automatic CSS or do you want this to be I’ll do the tutorial right now or do you want the tutorial to be vanilla bricks so just tell me that answer in the comments or in the chat ACSS or no ACSS for that and then we will fire it up and see exactly how to do that. The most important thing is that you keep the URLs the same so inspect the site map make sure the new site matches. Okay, that was probably an answer to somebody doing some sort of migration. A site as big as this, what’s the best way? There’s the question right there. What is the best way to migrate to Bricks without affecting SEO? What I would say is this, don’t redesign anything. Build exactly what you see there on the existing website and map all of the URLs exactly. Then give the site two to four weeks to be reestablished. It’s gotta be recrawled, right? You are, even though it looks exactly the same, has the exact same content, has the exact same URLs, you have changed the underlying DOM structure of the website. It’s cleaner. You can build in more of the accessibility features when you do the rebuild. I would highly recommend you do that. So don’t build in the current accessibility disasters that exist. Fix those when you do the rebuild. Fix things like BIM, right? So right now, oh, we didn’t even look at that because I got caught up in the horrific HTML structure and accessibility. But look at this. There is no, we’re styling, you could say at the ID level more or less, because these are just random classes, which effectively work like IDs, but there’s no real global control over this. You’re probably doing a lot of copy paste styling, nonsense and dancing. So when you rebuild, rebuild with BIM, right? Rebuild with like, what are these? Let’s see what the font sizes are declared as here. So you’ve got colors declared as hex codes. Let’s get some tokenization of your colors going on here. What about with our actual text? And see I can’t even find the text because the text is a div. Alright font size 1M. Oh so you’re using M’s for font size. My gosh what a brave soul. What a brave soul. You can go watch my BB 101 on never use M’s for font sizes. I would transition that kind of stuff to using clamps, right? Tokenize that stuff as well. Get some standards going. Use that rebuild opportunity to get all of these standards going on the website, but design exactly the same content, exactly the same. URL is exactly the same. Then give it two to four weeks for Google at all to come through and re digest what’s going on in this website. You may see rankings drop a little bit and then go back up, they’ll recover. They may start to improve as well. And then what you can do is start to go in and tweak the designs, shore up some things, user experience, make it better, yada, yada, yada, yada, yada and that will be a lot easier of a job if everything is tokenized, right? So a lot of people are like, I don’t want to rebuild it like this because we want to do different things with the UI and it’s got a lot of work and then we’re gonna have to go back and do that. No, no, no, no, no, you don’t have to go back and redo anything if you tokenize everything. If you build it the right way with processes and standards, it’s very easy to go in and iterate on the design after the fact. But you want to make sure all of the actual SEO things, content, design, and URLs is all exactly the same. Except, with the exception of, like these are not H3s, make them H3s. These are not paragraphs, make them paragraphs. Clean up that kind of stuff. That stuff’s obvious, low-hanging fruit that can be improved in the rebuild. And as long as you do that, you get all the redirects, all the URLs exactly the same, this site is in no danger whatsoever during this rebuild. Then you can start to iterate and improve from there. Question I want to build a Divi site with the ability to switch to Bricks in the future. Should I create pages in WordPress’s default editor or Divi’s visual? Well my first question that pops into my mind Derek is why the hell would you want to do that? Why not just build it if you know you want to build it in Bricks? Then build it in Divi first? I need an answer to that question before I can give you the real answer. Will you be attending WordCamp Europe? No, I am too insanely busy to do WordCamp Europe. However, I’m planning on doing WordCamp US. So raise your hand if you’re going to WordCamp US. And maybe what we should do is get a little inner circle night together there. Should we do that? Should we get get a little inner circle night together? Might be a good idea might be a good idea. Okay? What about linking for CPT pages for internal external linking? These things let’s talk about pages versus posts and this time I’m going to remember to share my screen. There’s my screen right there. So So obviously blog articles, posts, all day long posts, not custom posts, just regular WordPress posts, 100%. Okay, then we go up and we see this, addiction, substance abuse. These are pages in a custom post type, okay? And I think these are all the same CPT basically, right? I just called it addiction items, right? So we have substance abuse, then these are taxonomies. Okay, you can categorize these pages. WordPress did not do good with the naming conventions. Okay, a post is a blog post. A custom post type in my mind is a page of the website. It’s just a dedicated type of page. Now, why did WordPress limit the functionality of actual literal pages, whereas custom post types have this additional functionality, like taxonomization as an example? I don’t know. The same reason why I don’t know why they built Gutenberg the way that they did. They’ve made some bad decisions along the way. In terms of a database content management everything is a CPT. Okay like a page there should be specific types of pages and specific types of but they’re really all entries in the database. They should all literally be the same thing. Okay so you should think of them like that. CPTs just give you the ability to put content over here instead of over here. And content isolated instead of all combined together. That’s what CPTs allow you to do. Doesn’t matter what we call them. So you need a blog post, you need a addiction page, which has its own taxonomy. And by the way, these could be a shared taxonomy because you’re going to write blog posts on alcoholism you’re going to write blog posts on withdrawal and detox you’re going to write blog posts on substance abuse it seems to me that this is really a shared taxonomy between these pages and these articles down here that’s probably the best way to handle that from an architectural standpoint but all of these are really pages right even though you are going to use CPT is for most of them in fact I don’t even like admissions pages I put that in a CPT now about us like that’s an actual page on the website but again I don’t even know why pages exist it should just all be CPT driven almost but the way WordPress is structured it like asks you to use pages for certain things and then of course you’ve got like archive templates, which is like that doesn’t even seem like a page or a post really, but really it is. It’s just another entry in the database, just behaves differently in a loop. This is why people get confused, right? WordPress could absolutely simplify all of this.
3
1:45:31
Okay. Yeah, so Manny says on this kind of business,
Kevin Geary
1:45:34
we can’t use proprietary, right. So yeah, I alluded to that, right? There are some industries where you really can’t do that. Why did the program cards have different title text colors?
3
1:45:44
Asked Charlie.
Kevin Geary
1:45:45
Hmm, great question. I was too focused on DOM and accessibility and all that. Oh, it’s not It’s not a visited link color. That’s for sure Can we get an answer on that Manny? Why are we doing a little carnival of colors here on on our content? I’ll let Manny answer that question Okay, you said external links open in a new tab. I thought for accessibility links should not open in a new tab Well external links. It’s not in internal links should never open in a new tab. But external links, we actually had this debate in the admin bar the other day, and I am firmly in the camp of, don’t ever open an external link in the same tab. One, because I want as a user, right? If it’s an external link, let’s go into, there weren’t any in here, where were they? Addiction, let’s do alcohol. I think there were resources at the bottom. Okay, they don’t, they don’t seem to be in here. Yeah, these are all internal links. I can’t find an external link. Okay, addiction, alcoholism treatment, was it this page? Oh, I can’t find one. But if I, if there was one, like, let’s just say that this was an external link and I click on it because I want to know about it But I don’t want to necessarily go to it right now right as a user I want it to be sitting in a different I don’t want to interrupt the experience that I’m having and for sure I don’t want to have to go to a different site and then remember to hit the back button Right you’re sending people away from your website rather than just showing them the purpose of the external link Which is this is a reference to other content. This isn’t like I want to navigate to that other content and get lost in that other content and make it hard to find my way back. That’s not the experience a user wants. A user wants to be able to open referenced content without it destroying the experience they’re currently having on the website they wanted to be on in the first place, right? So yeah, you open external links in a new tab. You always open internal links in the same tab. Because you don’t ever want multiple instances of the same website open that the person has to then like manage their tabs in order to manage your website experience. So that’s kind of the explanation on that. How much are you currently charging for maintenance plans? The bottom plan is $79 a month. We have a $199 a month plan. And then typically after that we just do retainers for various things. It’s usually those two plans are being chosen. And then that doesn’t mean that’s all the work that we offer on an ongoing basis. But anything beyond that is retainer based. And by the way, it’s a separate retainer because you don’t want to mix your website management with other things. Because if they want to cancel the other things, that doesn’t mean they want to cancel website management. So I keep those two things separate. This is all laid out in the inner circle in my pricing guide. So go to giri.co and click on the inner circle and you can get all of that in there.
3
1:49:04
Okay, there was Manny’s question from earlier,
Kevin Geary
1:49:06
poster pages, which one’s better for ranking? Does not matter whatsoever. To Google, it is HTML. They are scanning the HTML, and they are scanning the internal links to figure out your underlying site architecture. There is no distinction of post versus page. With the only exception, I think, would be in a post, the date the post was published is entered in like a typical post, like a blog post.
3
1:49:40
How do you estimate that?
Kevin Geary
1:49:41
Okay, we already saw that question. Let’s go down and get the, I did all the backlogged questions. So let’s get the new questions. Okay. Yes, I am going to show you the sticky sidebar block. And he says no ACSS. Let’s do that right now to get that out of the way. So I’m gonna open up a local install. We’re going to go here, we’re going to go here, add new, and we’re going to go sticky, and we’re going to go publish. Let’s crack the fingers. I haven’t touched a website in three weeks. Let’s see if we can get this done. So we’re going to add a section in this container right here. I’m just going to go ahead and make this my grid. So I’m going to go to display of grid. I’m going to go to grid template columns. We’re going to do a min max of, I want to create a sidebar situation, right? So we’re going to do a min max of 0, 2FR. That’s going to be my first column. My second column is going to be a 1FR. There’s your sidebar situation right there. So we’ve got a main column of content and we’ve got a sidebar. I’m going to go ahead and throw a gap in here of 3M. Okay. All right. Now I’m going to throw two blocks in this grid block block. I’m going to go ahead and name this grid for you. And then this is going to be our main content. This is going to be our sidebar. Got it. Got it all good. Right? Okay. Next thing I’m going to do is I’m going to go get some lorem ipsum. Let’s go. Let’s just go to website. If some shout out to the admin bar, shout out to Kyle. He made the site right here Okay, so I’m gonna grab that and I’m gonna throw this in a rich Text block. Okay. Here we go paste. There you go. Now notice on this grid I actually want to stretch all of this content. I want I need both columns to be equal height This will not work If this column over here does not grow to match the columns that is next to it. The way you get both of these columns to be equal height is you stretch them, okay? You can actually stretch both of the align items and align content. And we’re gonna go ahead and hit save there. Now what we’re gonna do is we’re going to put a block inside of this sidebar. I wanna group some content here, okay? So I’m going to put a block to group the content. You could put a div, you could put a blog, doesn’t matter, all right? It’s just a container. There’s my block right there. I’m gonna group two things. Let’s say it’s a heading and text. So this will be a typical like CTA card right here, like buy my shit, okay? And then we’re gonna go back to website Ipsum. I thought I still had it open, but I guess I closed it. And let’s just grab a little bit of text to put into our CTA. So I’m gonna put that in there. We’re going to make that a paragraph tag, cross your t’s, dot your i’s. Okay, let’s drop a class on here. So we’re going to call this sidebar CTA. How about that? Sidebar CTA. Let’s go into layout. Let’s drop a little padding in here. We’re not using ACSS. We’re just going straight up, straight up vanilla. Let’s go ahead and give this a gap. So we’re going to go a row gap of 1M. Okay, let’s go give this a little bit of a background color. So we’re going to go backgrounds and we’re not using ACSS. So we’re just going to choose some shitty color here. All right, save. So we’ve got a little bit of a CTA card here. Maybe that needs a button.
9
1:53:08
Perfect.
Kevin Geary
1:53:09
What color are we going to make our button? I don’t even know. Let’s go sidebar, CTA, double underscore, button. And then I’m going to go sidebar, CTA. And what I typically do, we’ll just do a little double underscore, copy that. This is going to be our text. And then now I can just paste, paste, make this a heading. Perfect. Now I’ve BIMified this card. So I’ve BIMified it. I’ve given it a terrible design. Let’s say call to action right here. And now what you asked is how do we make this sticky? So it goes up and down. We’re going to do that right now. I want to make this a little longer so we can really see it go down the page here. Okay, save. Let’s see what we’ve got on the front end. There we go. Oh, I can’t scroll yet. So let me let’s get even more content in here. Bam. I want to really be able to scroll up and down here. So you can see, clearly, we do not have a sticky element. This is very, very, very easy to do. So here’s my block, which I’ll call sidebar card. And I want you to notice that the card is separate from the sidebar. The mistake I see a lot of times is people try to make the sidebar sticky. You don’t want to make the sidebar sticky. You want to make an element in the sidebar sticky. Notice the sidebar is like a channel. Look at it, you can see it outlined. It’s like a channel for your content. Your content is the sidebar cart and it’s gonna move up and down inside of this channel right here. So now I need to come over to layout on the sidebar CTA and I need to position this as sticky. So we go position sticky. Now I’m gonna save this and this item will not be sticky. Watch this, I just told it to be sticky. Oh my God, it’s not sticky. And this is where everybody gets confused. They’re like, what has happened? I told it to be sticky. It’s not sticky. Well, there is one additional thing that you have to do in order for the element to be sticky. You have to give it a top position from the top of the browser window. So this can be zero, right? If you don’t have a, a header that’s sticky as well. Now, if you have a header that’s sticky, we run into another issue that we’ll talk about in just a second, but I can just put zero because I don’t think I have a sticky header. I don’t. So I’m going to refresh. Hey, now we have sticky content. It is as easy as that. Now what I’m going to do is I am going to present you with a different thing. I’m going to take this sidebar and I’m going to put it over here first. OK, and now I’m going to swap my grid structure. So I’m going to bring this out. I’m going to delete, put it over here. So now I’ve got the sidebar on the left. And if you don’t structure this the way that I’ve shown here, you will see a very, very common problem.
7
1:55:56
OK.
Kevin Geary
1:55:56
Now, the way that I structured it, it’s not going to be a problem.
8
1:56:00
All right.
Kevin Geary
1:56:00
So we’re going to inspect this on mobile. So here we go. Oh I didn’t even make the first let’s make the grid responsive. So there’s my min max zero one fr let me grab that we’re going to say right about there we want this to be one column bam just like that. Now on if you if you don’t structure this properly this sticky element will cover this content right here but if you follow my structure, hey, this does not happen, right? Why doesn’t it happen? Because it’s in a channel, it’s in its own container, and that container is now only the height of the CTA card. The sticky element has nowhere to go. I don’t have to turn off the sticky. The sticky element is just trapped. It’s trapped in that column, and that column is only long when the content next to it is long. When the content stacks, that container has nowhere, it has no other thing instructing it to be taller, so it’s only as tall as this card, therefore the sticky item is trapped, and you don’t get any overlapping issues that you will see on some people’s sites when they do sticky the wrong way. So that’s another question that a lot of people have, is how do I turn off the sticky on mobile? And the answer is, if you structure the structure properly, you don’t have to turn it off, it just traps itself and there’s no problems. Okay, does that answer your question? Hopefully that answers the question.
4
1:57:28
All right, let’s see.
Kevin Geary
1:57:29
Question, can you explain the functionality of the isolation isolate class? A few days ago, I asked you on Discord about a site with boxed layout. Yes, fantastic question. See, this is why we do what we do on WDD Live. We’ve got to have these sorts of fantastic questions. Now, I technically only have two more minutes, and then I gotta get off, but I’m gonna go a little bit longer because we were out for a little while, so we’ll go a little bit longer and we still have a good decent viewership here We’ve lost a few people now, but it’s okay. It’s alright They are missing the sauce and if you want to miss the sauce that is up to you Okay, let’s let’s see if we can come up with a scenario where this is needed. I think I can I think I can get one Let’s let’s delete this. Let’s delete everything that we’ve got going on here. All right, let’s add a section to the page Let’s use an image. I’m wondering if an image is gonna present any additional complications. I don’t think it is. I don’t think it is. Okay. Let’s put an image in here. Is there an image on the site?
3
1:58:35
Okay, there is, good.
Kevin Geary
1:58:36
Let’s use this beach. Okay, insert beach. There we go. Okay, next thing I’m gonna do, I’m gonna set this container right here. I’m trying to figure out a scenario where this would be relevant. Okay, so on this container, I’m gonna set this to position relative. So layout position is relative, perfect. Then I can do absolute with this image right here. So we’re gonna go layout position, absolute, perfect. And why did that disappear? Maybe because it doesn’t have any dimensions. Let’s give it some dimensions just to make sure everything is working. I was thinking an image might actually complicate this. Yes, okay. Let’s just do a normal element. Let’s do a block. Okay, inside of this block I want some text. This is gonna have to be a pseudo element situation probably. This is where we use this most often. Let me get my image back and I’m going to do it with the pseudo element. I think that’s going to be the way to do it. Okay, let’s get the image back. Now, I also want to use this to demonstrate another thing that people run into that’s a challenge. So images do not support pseudo elements. However, if you change the tag to figure, the figure wrapper actually does support pseudo elements. So now we can do a pseudo element type of thing. And here’s where we’re gonna see the isolation isolate issue often come into play, I think. Okay, let’s go to style, CSS. We’re gonna go root before, okay? I’m gonna zoom in on this so that you guys can see what we’re doing here. We’re gonna do a content of blank. We’re gonna do a width of, let’s just say 500 pixels for now, height of 500. We’re just trying to get something on the page 500 pixels background color of red fire engine red okay save perfect so we’ve got content let’s do a display of flex there is our pseudo element right there and let’s do a position of absolute perfect awesome okay notice that my big red blob is on top of my image. Now I’m actually going to Go to root up here and set this to relative So now my figure wrapper is actually going to be the container for this pseudo element. So we’re gonna go position relative here Awesome, and then if I do top of like minus 2m It’s gonna offset it and I’ll do left of minus 2m as well. That way when it goes behind the image, you’ll still be able to see that something is there. And so the question now is like I do Z index of zero, that does not get me behind that element, does it? It doesn’t, it’s still on top of that element. But at Z index of negative one, we’ll actually get that behind the image. I am screen sharing, right? Yes, okay, okay, good. Okay, great, fantastic. Alright, so you see where our pseudo element is and you might stop here and you might be like, see I accomplished what I was trying to accomplish. I gave this thing a pseudo element and it’s behind it, it’s accenting it like I wanted it to. Hey, we’re all good in the world and here’s where I think we’re gonna run into the problem. So you go over to this section or it could be even the container but we’ll do the section right here and we’ll give this section a background color and so I’m just going to choose a random color like this lime green right here and we got a lime green little background let’s go see this on the front end refresh okay I’m going to zoom back out where has our pseudo element gone my friends it has just vanished on us but wait a minute I didn’t I didn’t do anything to my pseudo element I told the pseudo element to be behind the image I even did position relative on the image which means the pseudo element is behaving relative to that image not relative to this background or anything like what is going on here well really what negative one on the Z index has done is it has put that pseudo element behind the entire canvas. Now, you didn’t know that until you added this background color. Because when there’s no background color, there is nothing on the canvas. And so you can actually see the pseudo element right there. But the minute you put a background color or any other type of content here, your pseudo element is going to disappear. Thus, we need a technique to say, you know what? I want control over what that negative one means right now. Negative one means behind everything.
7
2:03:25
Okay.
Kevin Geary
2:03:26
Well, I want to establish a new, uh, everything, right. I want to say, okay, behind everything, except for this, like this is where everything is going to start right now. Everything starts at the canvas level the body level, right? But if I come to this section right here, remember it’s the section that’s actually covering up the negative one Okay, so I’m gonna come down here to CSS We’ll zoom back in and I’ll do root and this is kind of hard to think about in the brain I think I’m thinking about this correctly Isolate. Okay. So what we’ve done is we’ve said now, we’re not putting this behind the canvas anymore, we’re actually establishing a new count for the layers. So we’re gonna start at the section. This section is as far as you can go, you can’t go behind this section. Nothing is allowed to go behind this section. So we’re isolating this section in our Z index, in our layers, right? And so now this section is the starting point. Things can only go up from here. So that pseudo element that was going behind the section is no longer allowed to go behind the section, right? It has to be above the section at all times, but it can still go behind everything else. It can still go behind the image. It can still go behind anything else that exists in this section, but it’s not allowed to go behind the section. That’s the best way on the fly that I can explain isolation of isolate. Hopefully that makes sense. Kevin, I think if you give the figure a Z index of one, it will recover the pseudo element. It absolutely will. But then you’ve elevated the image above potentially other things because the default Z index is zero. And now you’re telling the image, hey, image and pseudo element, you’re allowed to be on top of other things. And so if there’s other elements that are sticky or fixed or whatever, that’s where you’re going to find that you’re now creating overlaps where you didn’t want to create overlaps. So there’s a danger in elevating things with a positive z-index. There is no danger in placing things with a negative z-index if you use isolation isolate. It’s only dangerous if you forget the isolation isolate step. So this is the best way that I advocate for this is the best method, because now I haven’t told the image that it’s allowed to be on top of other things. Right, so it’s only gonna exist in its natural stacking context. Have you ever seen like mega menus where the sub menu goes behind images that are in the hero? You might have seen that before. That happens because those images have a higher Z index because they use positive Z index to elevate them above other things, forgetting that their menu might then go behind that. Right? So you’re not going to create those types of situations when you use the index. It’s just a cleaner approach, a safer approach in my estimation.
6
2:06:19
Okay.
Kevin Geary
2:06:20
I have detailed the example of the microsite business I previously stated up in the chat. Okay. Darwin, we’re going to rush up there. We’re going to see.
3
2:06:30
Okay.
5
2:06:31
Okay. You iterated on that again.
3
2:06:34
Let me find your other comments here. I haven’t found the X,
Kevin Geary
2:06:37
I haven’t found a specific industry or something that you’re talking about. I’m not seeing it. Okay, let’s do two more questions. Can you edit together all your Fisher Price builder rants as a 10-hour video and drop that on YouTube? I could. I don’t know if I will. Okay, let’s see. Golden nugget there. Sticky tutorial especially because I haven’t explained the potential problem with mobile view. Thanks for, yep, absolutely.
3
2:07:19
All right, you said you detailed the example, but I’m not, for some reason,
4
2:07:22
I’m not seeing the detailed example.
Kevin Geary
2:07:25
Any suggestions for dynamic cards in a grid to make them look good? For example, some pages will have three cards some will have two some will have five To me you just use a grid and it’s you know you’re gonna have you’re gonna have orphans in the grid sometimes It’s not a big deal It’s just people make it out to be such a bigger deal than it actually is Okay Diego said for sticky, you can use the CSS property position fixed and make sure the parent element has position relative. You actually can’t do that. Because fixed is not sticky. Fixed affixes itself to the browser outside of the context of any other containers. So it’ll actually be sticky all the way down the page. It’ll never stop. Whereas an actual sticky element will stop when it reaches the end of its container. So fixed is not a replacement for sticky. All right, do you use ConvertKit and Drip or both for email marketing? I only use ConvertKit now. I switched away from Drip because Drip left me. Drip abandoned me. Back when I used Drip, they were not industry specific. They were not niche specific. And it’s a fantastic tool very very very powerful but one of their CEOs or genius marketing people got the idea that they should just focus on e-commerce and that was going to be their their bread and butter and so they transitioned everything over to e-commerce and like I didn’t I don’t do e-commerce and I didn’t need it for e-commerce and they like left me behind so I canceled and I went to ConvertKit. Back to ConvertKit. I was initially… I’ve been with all of them. Okay, last question.
3
2:09:18
Fine, one more question.
Kevin Geary
2:09:19
Then we got to get out of here. What Gutenberg blocks do you use for tabs, accordions, etc?
3
2:09:25
I don’t use Gutenberg for those things.
Kevin Geary
2:09:27
So I really don’t. It’s just that’s the way that it is. However, what I will say is, ACSS is going to be Gutenberg compatible, like fully Gutenberg compatible with ACSS blocks and frames. And then I will be using Gutenberg for a lot of a lot of things. And it’ll just all be native ACSS and frames. Best way to offset content while retaining fluid responsiveness? This is a it’s a question where you have to have a specific example because depending on what’s being achieved we could go a number of different routes. There is no answer that works in all scenarios. So we could use negative margin in certain scenarios, we could do absolute positioning in certain scenarios, we could use CSS grid in certain scenarios. And I don’t even know what you mean by offset content. Are we offsetting? Are we overlapping? Are we, what are we doing? Right? So that would be, we’ve just got to see what the use case is in order to be able to answer the question. Yes, frames for Gutenberg is going to absolutely be a thing. And I want to say guys, if you want to use frames in Gutenberg, this is one of those areas where there would be like an add-on type situation. You know, oh, I got to, I got to pay for another license if I want to use frames in Gutenberg, but because we are the way that we are, you don’t have to do those sorts of things. You are just going to be when frames for Gutenberg is available, you’re just going to be able to start using it if you have an existing frames license. And there’s an LTD for frames right now, which is unheard of. So in my estimation, with the tremendous value you already get in frames and the fact that it’s coming to Gutenberg, included in the current licensing structure, I would go snag that LTD. That’s just me, though. I would go snag that LTD. Frames are gonna take over. I don’t know if people understand the vision for frames. The fact that it’s gonna have all these accessible components I mean we’ve got an accordion, we’ve got tabs beta, we’ve got the table of contents, we’ve got the modal, the carousel, the slider, all these things are currently, and there’s just gonna be more and more and more and they’re gonna get better and better and better. And then you’re going to have frames inside of Gutenberg and the modal inside of Gutenberg, the accordion inside of Gutenberg, all these things come into Gutenberg. And not have to pay extra for add-ons, it’s just all included in one ecosystem. I would snag that LTD before that’s not available anymore. Do you know how many people wished they had snagged the LTD for automatic CSS and it’s just no longer available and it’s just a very sad story. It’s a very sad story that these people cannot get an LTD for automatic CSS. And my biggest fear is that the same thing is gonna happen to these frames people that are just, you know, oh, I didn’t pull the trigger on it and I wish I would have, that’s just, these sob stories are just gonna continue happening down the line. So don’t let that be you. That’s basically what I’m saying. Don’t let that be you. Okay, that’s it for me today. I got to get some water. I got to get some lunch. I got to work on some PB101 videos because those are coming in hot next week. Two PB101 videos coming in. Another WDD live next Wednesday at 11 a.m. Set your calendar. Set your reminders. Will the headers adapt to the new Bricks 1.8 menus? Yes. Alright, I’m out. Peace guys. out. Peace guys.
3
2:13:17
menus. Yes. Alright, I’m out. Peace guys.
