Web Design for Dommies 004 – Live Web Design & Development Critiques

0:00:00
Yo, what’s up everybody? Welcome back. It is another Wednesday, another episode of Web Design for Dummies. Welcome, welcome, welcome. Drop some comments in the chat. Drop a like on the stream to help us out. Let’s see who’s already here with us. Callisthenics Ireland, thank God for YouTube notifications, almost missed this. Amanda Lucas is here. Yeah, you guys got to get those reminders set on YouTube. It, you know, we’re all busy, right? We’re all busy. And so it’s easy to forget that it’s 11 a.m. on a Wednesday and that Web Design for Dummies is here. But you don’t want to miss this value, right? You don’t want and you want you don’t want to miss your opportunity to participate in the live stream. That is one of the best things about Web Design for Dummies.

0:00:52
You know, as we’re going through these website critiques live, you guys in the comments get to put in your own thoughts and opinions. You get to ask questions about what we’re talking about. You get to help kind of steer the ship. Okay, so Stratos is here. Remy is here. John is here. Arnott is here. Excellent. So thank you guys for showing up live. Let’s go ahead and I don’t know why this has gone away. We need to get my, where did they go? Where did they go? Main window, interview chat, interview, comments and reactions. I don’t know. Oh, there we go. There’s our viewership. Okay. Just checking our viewership numbers. I haven’t been sending out as many reminder notifications. So we’re just going to keep rolling with this and we’re gonna make sure that we’re consistent with it and we’re gonna pick up more and more people as we go.

0:01:46
Of course, you can always watch the recording of Web Design for Dummies after the fact, but you don’t get to participate when you watch the recording. You only get to participate when we do this live. Link is down below in the description if you want to get one of your websites critiqued. And I’ll just go over this. How do I choose the websites? Well, I go through the list of all the submissions.

0:02:09
I see which websites are robust enough. I will say this, there have been some people who have submitted websites that were just like one pagers and there’s not a lot there. And so that isn’t gonna really provide a lot of value for people. So you’re probably gonna get passed up if that’s the kind of website that you submit. You want to submit a full website, okay? Something that gives us a chance to talk about copy, gives us a chance to talk about marketing strategy, gives us a chance to look at the DOM, gives us a chance to go into all of these different areas, SEO that I like to go into on these in-depth website critiques. So don’t go submit kind of like a bare bones kind of one page website and expect to get chosen that’s probably not going to be the case.

0:02:56
Second thing is I’m not going to do agency website after agency website after agency website. I will do like one agency website around okay or an episode I should say. The rest I want to choose other types of websites because that’s where we’re going to get the most value. We don’t want to see the same websites over and over and over and over again, or the same types of websites. So if you have client websites that you’re working on, uh, anything that is outside of the realm of the norm, you know, that would be a good place. Strata says new place, Kevin, I remember your setup different. Yeah, the setup is a little bit different.

0:03:32
I covered that in the first episode back. Uh, we’ve got the camera straight on now. We’ve got a better mic. We’ve got a better lens. We’ve got You know, it’s yeah, we changed some things same same room same office um Well, this is the office that i’ve been in for the last few months Uh, this is the new office. But yeah, that’s been that way for the last few months Okay Welcome. Welcome. Welcome. I think enough people have strolled in now We are going to go ahead and get started with our first review. So I’m gonna get that site pulled up and let’s go ahead and switch to the screen.

0:04:09
Let’s make sure we don’t want to open final cut. That is not what we want to do. Okay, I want to make sure that this is all good. What are we seeing over there? Oh, that’s Figma. Okay, let me pull that all the way over so we can have this full screen. Let’s get our notifications off the window. Okay, let’s act like we’ve done this before. All right, so we’ve got Joseph S. Steve or S. Dev, Joseph S. S. Dev, maybe. Okay, I don’t know, I guess it’s just a single person. This is a person, maybe like a personal brand kind of thing. But it’s High Mountain Guidance in the Pyrenees. This was Google translated, by the way.

0:04:47
So the normal website is in Spanish. I translated it to English. I will say this, you know, I do copy. I like to really focus on copy in these. But it’s harder to focus on copy when the site’s been translated because I don’t know if the translation is accurate or not. And I will say, I think we’re going to, we’re going to do the copy like the way that we normally would just to the person whose website this is if something didn’t get translated correctly and I’m critiquing it and I’m just like tearing it apart you’re like it didn’t translate I get it I get it I get it okay don’t take it personal but I think it’s still valuable you know to people to hear the copy critique so let’s take a look right off the bat high mountain guidance in the Pyrenees so we can tell within seconds of arriving on the website exactly what’s going on here.

0:05:41
We have a marketing headline that is choose your next adventure. And then we’ve got some icons down here which are hoverable but they’re not clickable. They’re not interactive, they don’t really do anything. I’m not sure why these are here. I mean, they give me an idea of like, oh, okay, you can climb, you can ski, you can do this thing. That’s a different kind of skiing, I guess.

0:06:06
Oh, this might be like mountain trekking with skis on. I don’t know. Don’t know what’s going on here. Maybe some sort of other climbing hike slash thing. But look, I’m not getting any, you see, I’m like, they’re just here. I don’t know. I don’t know why they’re just here. So this I would maybe rethink right here. But other than that, the hero is, you know, it’s not fantastic, it’s decent.

0:06:32
I think the hero’s a little bit small maybe. Of course, this is almost like a hero as well. It’s almost like we have a hero on top of a hero. So this says ski touring courses in the, ski touring courses in the Pyrenees. Let’s inspect this right here. So this is an H2. This is probably an H1. Okay. And then this is just a normal paragraph tag. Okay. So you’ve got this is your H1. Choose your next adventure. See, I actually would make this the H1. I would still style it like this. I would still style it like this, but make this the H1. If you care about SEO and all of that. Choose Your Next Adventure is not an H1 that helps you in the eyes of Google at all.

0:07:22
It doesn’t tell Google what’s going on here, right? But High Mountain Guidance in the Pyrenees, that does tell Google what’s going on here. That is effectively the title of this page or the most important headline on this page. Of course, it could also be ski touring courses in the Pyrenees, you know? That could be the H1 as well, just depending on what the research has told you. What keyword are you actively trying to rank for on this site?

0:07:47
That should be your H1. It’s not, I can guarantee, it’s not choose your next adventure. That I can guarantee. So you’re wasting your H1 right here by making it choose your next adventure. So that needs to be a little bit more, have a little bit more thought put into it. And at this point, I’m just thinking that this top hero could just be gone. You could just get rid of this and make this your hero.

0:08:11
Because now instead of looking at meaningless icons that I have to decipher, let’s just imagine that this is the first thing I see. You can get rid of this little angled divider. So I just see a nice background image with people in the actual context of what you do and what I would be doing if I was a customer or a client of this. That gives me more information than what’s going on right here. So look, I can see right off the bat ski touring courses in the Pyrenees, maybe that, let’s say that’s your H1, so now we’ve hit the SEO checkbox, we’ve hit the marketing checkbox because I still know instantly what’s going on on this website. I also have the context of this photo back here.

0:08:54
And then I have a lead paragraph that’s gonna give me more information. Do you defend yourself skiing on the slopes and do you wanna make the big leap? I can almost guarantee this is not translated properly. The big leap to ski mountaineering and discover what true freedom on two boards is. Have you practiced skiing? Okay. Ski touring courses in the Pyrenees is going to be a link to our actual courses.

0:09:11
The word courses I’m thinking is mistranslated here. This is, you know, some type of like, it’s obviously an in-person, I don’t know. I think that’s been mistranslated. The word in Spanish is probably better context than the word courses here. I’m just going to guesstimate that. What do you guys think? Oh yes, Stratos says I don’t like the white text on the white snow for sure. That’s there’s definitely a contrast issue here so this would have to be darkened up a bit or maybe colored like I get a color overlay going. If you darken it up a bit more you’re gonna start to lose a little bit of the the photo itself. I mean there’s a few different ways to handle this but ultimately Stratos is right in the sense that we have white text on what’s effectively a lot of white in the photo.

0:10:09
So there’s gonna be, you’re gonna have to revisit that and take a couple different types of actions to get that to be better there. Okay, but see my point here is that I think we can get rid of this top hero. I think you can just rock and roll with this as your hero. And then we’re gonna keep scrolling down. So it says, a mountain guide, Joseph Esteve. The mountains have been my home and my playground, now my workspace.

0:10:35
I like these photos over here. I like these circular photos. This is a good use of space. It’s not just like one boring photo there. It allows you to show multiple things going on without it being distracting. It’s visually pleasing with kind of the off-balanced approach, different sizes, different kind of, yeah, it’s good. It’s good. My name is Joseph Esteve and I was born 32 years ago in Andralo, Cay.

0:11:01
The mountains are a place that allows me to develop my vocation, guidance and training in high mountain activities. First memories of the mountains, okay. I imagine them from, okay, yeah, yeah, yeah, yeah, yeah. There’s a lot, this is good, it’s good to know about you, but like I’ve always said, whether it’s an about page or it’s an about section, you have to steer the about and the bio, the history of the company, whatever. You got to steer that into, but how does that benefit the client? Why should the client care? Why should the client be interested in what you’re saying right now? So you have to rewrite this in a way that really speaks to what the client is interested in because I can guarantee, at least not yet, this early on, I’ve read literally one section of your website. I’m not interested in you as a person. You’re pretending like I already know who you are and that I already know what you do and I already know how that serves me and I’m already really interested in hiring you.

0:12:09
Then at that point, if those things were true, let me fix this monitor right here, okay. If those things were true, then I would care about this other background information. I would care, maybe I would care about your favorite color and your cat’s name and all this, and your mom and all this other stuff. But I don’t care yet. You got to make me care. So what one thing I do know is I don’t want to go any further unless you’re an actual expert. Okay. And unless you’ve done this for a while, those are things you can hit on, but you got to tie them back to like what I care about.

0:12:39
And then later on, excuse me, I will care more about your personal details. Okay. So, um, I have an article I’ve got to, I’ve got to dig it up, that’s about about pages, right? And how to write and structure an about page to speak to the client versus just talking about yourself the entire time. So I would recommend going over that. All right, let’s keep going down here. All right, we’ve got a little slider.

0:13:06
I like the fact that we’ve got movement on the page, but I don’t like the fact that these images are not telling me anything visually right now, especially this one. Look at this one coming across the screen. I have I have zero clue what’s going on right there. Now, one thing I want to do is I want to see what happens to these on mobile. Like, oh, OK. See, I had an idea of like what there’s got to be something going on. Or maybe it’s just, well, now what’s what is going on? Let’s get rid of that.

0:13:40
Now suddenly we’ve got photos in there. Let me refresh the page. Maybe something, okay, this is what, I don’t know. There was a glitch or something. Okay, so it’s a little bit better. But you know what the problem is here? And maybe this is because you’re limited on the number of cards that are actually here. Did we lose our translation? My gosh, we’ve lost our translation.

0:14:02
Okay, let’s go back to English. Let’s go down now. Okay. All right. These are these are mountains, I guess. Yeah, these are mountain ranges. These cards need to not be so wide. These cards need to be narrower and and taller. Because right now you’re it’s so wide. The aspect ratio is so insane of these photos that I’m not getting any information visually. Oh, there’s that one again. I’m not getting any good visual information on these. So these need to be taller and they need to be less wide. So there’s more of them scrolling across the screen and that’s just going to look better from a visual standpoint period. Alright let’s go down. Actually I’m curious what happens when you click on these. Is there a… okay so it takes you to that range. Alright so we’re getting a little bit of information on that, maybe that, the events, we’ll call them events instead of like courses.

0:14:57
The events for that specific area. Okay, that makes sense. All right, the next section here is because with, all right, this is also mistranslated. My goal as a certified mountain guide is for you to get, to feel the bonds that are only forged up there with colleagues, the mountains themselves especially. Okay, so your content is speaking to the experience and the feelings that people are going to have when they go on an experience like this.

0:15:24
I know the translation is not coming through perfectly, but I will say that that’s on the right track, right? I would center this text right here because this is centered. It doesn’t make a ton of sense for this to be left aligned when this is centered. You could left align both of these over here or you could center both of them where they are but I would center the text there. This is another area where you know the the basic design of these cards so we’ll talk about UI for a second. The basic design of these cards is fine it’s great like I like the contrast I like the very light faint border I like that what I don’t like is the generic checkbox check icon and I don’t like the fact that there’s not a lot of There needs to be a little bit more visual hierarchy here, right?

0:16:10
So we inspect and I’m not really sure what’s going on with these so you have a paragraph tag and then there’s a font tag and a font tag embedded in that and You’re using bricks and bricks does not do this by default. So you’ve done something, I don’t know what you’ve done, but you’ve done something in these cards to create these two tags right here. I’m going to select this one and I’m just going to go over here. It looks like we’re using automatic CSS, so that makes things easy.

0:16:40
And if we just go text S instead of text M, we can get a little bit, you know, more hierarchy in our font sizes here. And then if we come over here and just do like color and then, so I can just come in and say, I don’t even have to know what colors is on this website. I just cause I know the language of automatic CSS. I know what they’re called and I know what shades are available and all of that. It just makes things a lot easier. So we could try like a base medium or a base light, something like that. That’s still a little bit too light.

0:17:16
So we could go, oops, oh gosh, I clicked on the actual variable. That’s a mistake. It’s gonna mess up that whole list. All right, let’s do var base light trans 60. Okay, something like this. So see now, we added a little hierarchy in the font size, and then we added a little hierarchy in the color scheme where it’s like big bold bright and then a little bit more muted and I’m not saying the best way to do this is with a transparent like color I would do it with an actual color but I’m just showing you the effect that I would recommend that you achieve and so it just looks a little bit more tidy and professional and then if you take this icon maybe down a notch, where is this?

0:18:04
So there’s font size right there. So let’s go to like 2M. It really depends on what kind of icon you use. If you have an icon that’s actually, you know, contextually appropriate. So there’s like a ski guide right here. And you know, I don’t know what fun is all about here, but you know, I actually, this is really hard because of the translation. I’m almost positive these aren’t translated properly.

0:18:31
But if you found an icon that fit each of these cards that was more of like a custom icon, then obviously that icon can be a little bit bigger. If it’s going to be a generic kind of icon, you can probably get away with making it small. Or you don’t even need an icon here. This is one of those things where it’s like, can you really find a custom icon from the same icon family so that they’re all consistent that actually match each of these talking points because if you can’t then the best bet may be just to get rid of the icon altogether and you can just get away with the heading and the text but then let’s talk about visual hierarchy again there needs to be proper balance there needs to be proper balance in the amount of text that you’re putting in each card. And I’ve talked about this before, where you’ve got a lot of characters here, if we did a character count, and not a lot of characters here.

0:19:25
So the way that you’ve written the copy for the cards is immediately going to mess with the balance of your design. And you have to put in the extra work and effort to say what you wanna say within the same number of characters in every card. That takes effort, it takes more work, and it takes more copywriting, you know, maybe prowess, but you have to make the attempt and the effort here. This is what clients don’t do.

0:19:52
This is what clients do wrong, I should say. Like, if you let clients edit copy, they’re notorious for this. They’ll put 78 characters over here and 10 characters over here, and you can’t achieve visual balance this way. So it’s always going to look, you’re gonna have all of this wasted space inside of your cards. Things are not gonna look tidy and balanced and consistent.

0:20:13
So I would work on this section for sure. Get rid of those icons, unless you can really find some icons that mean something, get rid of the icons altogether. Just have the nice clean cards, but then work on balance in the amount of copy that you have inside of each card. All right, we come down to this section here, which is another slider. Okay, I don’t have any problem with this section, other than the fact that I just don’t like sliders.

0:20:41
I just don’t like them. And they’re not good UX, they’re bad UX. I try to stay away from a carousel as I’m fine with sliders, not so much because most people don’t sit here and study the slider. Right? And so if you have important information, I assume this slide is important. Well, guess what? Right now I can’t even see it. Can’t interact with it. I, what you want me to go find it like by actually navigating through the slider. I’m only seeing one thing at a time. It’s just not a great experience. It’s always hiding your important content.

0:21:18
So find another way to display the content. All right. So choose a modat. There’s another translation problem there. I’m starting to, actually I saw this in the DOM. This page is actually designed with frames. I should say built with frames. It’s built with frames, it’s designed by the creator of the website, which is the great thing about frames. You would never know that this is a frame site, right? There is no layout like this available in frames as a single page.

0:21:50
This is, this person chose different frames, sections, and components, and put them together, and then designed them the way that they wanted to design them. And that’s what’s so fantastic about frames is that you can’t just pull up a website and be like, oh, that’s a frame site. You can’t know unless you inspect it. When I went in to inspect it and I was looking and we were changing those text sizes, I could see the classes for frames, right?

0:22:13
So FR content, section alpha, stuff like that. So that clued me in as to, hey, this is frames here. Now because I built frames, I also know that these cards, when I saw them, I was like, hmm, those look kind of familiar. Same thing down here. These are the same cards, right? But you see that this is, he made his own design, but was using frames to get all of the structure and outline and all of that down.

0:22:37
Okay, so we’ve got climbing courses. Let’s go ahead and click on this. All right, so this takes you to a page for that course. All right, let’s, yes, please translate. Okay, classic climbing. All right. So these are the modules I guess the course modules But this is I guess taught as a live event here. It’s not like an online course or something like that Okay Here’s an another again. These are the cards see we don’t have the one that I just edited But you can tell now again that you we’ve lost the hierarchy of our font size. We’ve lost the color kind of difference, the contrast differences.

0:23:19
We’ve got a lot of extra wasted space in here. I’m also not a fan of this. It looks like these were spaced betweens where you’ve got a big gap after your heading before your content to try to keep this content in alignment, the paragraph content in alignment. But you see here when you only have one line versus two lines in your heading you still lose the content alignment. This is not where you should be concerned about alignment. You should be concerned with icon alignment and heading line alignment and then these this gap right here is always standard and then your goal is to write the correct amount of copy to maintain the visual balance on these cards. This is a thing that I see and the reason I’m spending so much time on these cards is because out of all the websites I look at, this is the mistake that I see most often with design balance is it with cards because it’s, it’s difficult.

0:24:15
You’ve got often multi-line versus single line headings. Then you’ve got multiple like times content versus from one card to another. Um, I don’t know if I’m saying that clearly but like a lot more content versus a little bit of content. It’s just a mess. It becomes a mess. It’s hard to manage cards sometimes. So you’ve got to use the correct techniques. Don’t use space between. Use consistent even spacing and then make sure you have balance in the amount of content you’re putting in the card. Okay. Hopefully I’ve said that enough. All right. So we’ve got a good contact and footer down here. I would make this footer wider. In fact, I know for a fact that this frame for this footer is wider by default.

0:25:00
So I think you’ve done something here to change its width, but I would let that be, there’s your width right there. No, it’s not full width, but maybe it’s your website width in general. Let me come up here. Yeah, your website width in general is a little, it’s a little narrow. It’s a little squished. I would highly recommend you give yourself something like 1366 and things are gonna start to feel a lot looser, a lot easier to fit things in, especially when you’re doing grids.

0:25:29
You were a little bit narrow there. So now we come over in your footer, there’s a little bit more breathing room. Let’s go up here, because I’m not big on this right here. And then you’ve got to read more. But this read more is for no reason whatsoever. Did we really need to read more for one more sentence? Not really. I would get rid of this. And I’m not big on the design of this block quote right here, because you went from like, all right, we’ve got normal.

0:25:55
First of all, you’re yelling at me, right? The block quote is screaming at me. I don’t know why the block quote is screaming at me. Let’s get rid of the all caps here. What I would actually do is, like it’s good to italicize these. It’s good to mute the color of these, right? If we went back and we did that same technique that we did before, right? So we had base light trans 60.

0:26:23
All right, so we’re muting that. But of course I can’t do that to your bold without going in and restyling that. But you get the point. Imagine that it’s just this text right here, this kind of muted color. That’s a better way to do it. This thick line over here, it doesn’t fit, so I would get rid of that. I know that, I think Bricks supplies that blocks quote style by default, but go ahead and change that.

0:26:45
This just needs to be rethought out. It needs a little bit more spacing around it because it feels like it’s, you know, squeezed in to this larger paragraph. I don’t know. That just needs to be, you got to play with that a little bit more. And then the climbing course programs, this I don’t think needs to be here. This, you just get rid of this. The info is literally right here, okay? So it doesn’t also need to be right here. Let’s see what happens when we reserve. Okay, we got a little off canvas and our form This looks like it needs to be styled You’ve got to pop your you’re using automatic CSS So pop the form light class on here and you should be good to go if you have the form light styles turned on Okay Let’s look at this menu we haven’t looked at this yet This is interesting. This is this is different. It’s unique. This is definitely not the bricks native menu Let’s see what the accessibility. Okay. All right. We are we looks like we have some good accessibility here Yeah, I’m keyboard navigate these I like this menu this menu is probably Probably one of the highlights of your site here is this bricks extras. Maybe this could be bricks extras It all seems nice and organized.

0:27:57
Okay. Yeah, no problems here. This is a good implementation. I would do something different with this contact page for sure. I mean, this is, whew, a lot of wasted space. You could put, I mean, get a background image. Don’t make this 100 VH because I can already tell it’s like 100 VH. It’s made to be just the size of the screen. I would not. Yeah, that’s just a lot of wasted space.

0:28:30
And then you’ve got more contact info down here, but we have no design balance. I don’t know what happened to this page. Maybe you’re still working on this page. This is a nice frame down here. That’s a good frame from frames. Yeah, that’s good. But look here, you’ve got a giant gap down here and not so much gap up here, especially because these icons are here visually, you know, that space is taken up, but look at all of this gap down here that can be fixed.

0:29:00
And I just, I don’t know. I rethink this whole contact page, put a contact form to, um, unless you’re, yeah, you are asking to just get these email addresses just scraped up and spammed day in and day out. Uh, put a contact form here and call it a day. There’s some great contact form frames. Just drop a contact form frames in here and be done with it. That’ll button up that page. What I don’t see is a blog, I don’t see any articles or anything like that really. I think that’s something you should definitely consider. I don’t see any videos. I mean, this is one thing. Let’s talk about what I’m not seeing. What am I not seeing that I should be seeing? I’m not seeing videos, I’m not seeing testimonials. Where is my social proof?

0:29:46
Oh wait, here we go, here’s a couple. All right, I kind of, that was hard to see. It gets a little lost, especially it’s white on light photo, I don’t know, it gets a little lost here, it’s being overlapped, it doesn’t have its own dedicated section, it feels like. I would do better with your testimonials, and then you’ve got to do something to get some videos going on. Because we need to see the actual, if we can be in the experience, right?

0:30:15
If we can be in the experience, that’s really gonna help people. I get photos are fine, right? But at some point, we need something more interactive, more in-depth, something that really gives us the feeling of like, wow, this looks exciting. I mean, right now I’m looking at, okay, this is just a standard, like, all right, they’re ropes, got it, okay. Ropes, boulders, helmets, okay.

0:30:36
This is a little bit better. This is what I’m talking about. Now I see people, smiling in the scene. Mountains behind, look at that gorgeous view. Of course, this is way pixelated. This image right here is not high enough fidelity to be back there as a background image full width. Got to get some higher resolution here. All right I think we’ve done enough on this website we can probably move on to the next one but before we move on I want to check our chat I want to see what we’ve got going on and questions somebody already put a question put question in all caps then post your question so Anne Marie says did you change your notification process?

0:31:17
I didn’t receive an email with link to this live stream. I searched YouTube to find the link. I didn’t want to miss seeing you today. Well, one of the reasons we have less viewers today is because I had these events posted in the inner circle and automatic CSS when I was doing digital agency table talk and all of that. I cleared all of those out and I meant to put them back in, but I haven’t put them back in yet. So everybody in the inner circle, everybody in the automatic CSS community, there’s thousands of people, did not get notifications automatically for these events.

0:31:49
So right after this one, I’m gonna go back in, I’m gonna get all those events configured again, and then you’ll be able to RSVP inside the inner circle, RSVP inside of ACSS, and then you’ll get the standard notifications. Of course, I always recommend getting, like signing up for notifications on YouTube. That way you get the default YouTube notifications as well. Okay. Hey everyone, a little late to the party. All right. Welcome. Welcome. Welcome. Text in section needs paragraphs. Yeah. I mean, let’s, let’s view and see. Yeah, correct. Yeah, definitely correct.

0:32:25
And if this was a frame, I can guarantee that those were paragraphs at one point. So we need to see what’s going on there. Let’s look this one. It’s something and you see this one’s a paragraph. But look at this. I mean, what is going on with these nested font tags? What have you done, my friend? We need that meme. It’s like, oh, no, baby, what is you doing? I don’t know where these I don’t know where these font tags are coming from.

0:32:45
I’ve never seen this before on Bricks. I know Bricks doesn’t do this by default. All right, let’s see what else we’ve got. Ruben says, it’s always tempting to talk about ourselves or the company instead of the customer and their problem. Following the StoryBrand framework helped me with this problem. Now I see the problem everywhere. Yeah, Ruben, this is, you know, I said like with the UI of the cards, I see that problem over and over and over again. The me me me me me me I I I I I we we we we copy I that is the second biggest maybe it’s the maybe it’s actually the biggest problem a hundred percent and companies love talking about themselves solopreneurs love talking about themselves and they just don’t realize that nobody cares nobody cares they only care after you’ve made them care by telling them lots of other things about themselves, not you.

0:33:39
All right. We’ve got Dan here. We’ve got, uh, Pucktoon. Is that how you, is that how you pronounce it? Uh, Sylvia is here. What is because with me, what is because with me? I don’t know. I don’t know what you’re talking about. Um, oh, because with me means why me? Yeah, it could. Yeah. These are translation errors right here. Okay, yes, really like the menu on this website. I would not use a mobile menu on desktop. There’s enough space to put the menu items on the screen. It’s now an extra step for the user to find the menu items.

0:34:15
I tend to agree with this. I do tend to agree with this. It depends on your clientele. I would agree that on a site like this, you’re almost always better off with a traditional menu where the links are up top and it’s all good to go. If you have a very techie, cutting edge audience, then you can do something like this. But if you have just a standard generic audience that’s not particularly techie, then 100% I agree you should have a standard nav bar up here with the options plain as day, easy for people to scan and click on.

0:34:52
Okay. Seems like the logo is cut off. No, I don’t think the logo is cut off. I think that’s just how the logo is. Okay, let’s move on to the next one. So I did say we will do one marketing agency website per episode. We’re not gonna do more than that because we don’t wanna see these over and over and over again, but this will be our one.

0:35:12
I actually had this chosen for the last episode but we ran out of time we didn’t get to it so I wanted to make sure that we get it in on this one. So this is JTABdesign.com and we’re just going to take a look right off the bat. Let’s start with our header. Let’s start with our header because the first thing I’m noticing is this right here. This is the logo. It’s a J. Got it. It’s a J and a T. So it’s the T for tab it’s the J for J tab got it understand it’s also a fish by the way so I don’t know if that’s you know that’s the fish symbol but here’s what I noticed about it I noticed it has no text it has no it doesn’t any not telling me where I am where am I currently located on the internet I don’t know and I’m also not sure why it’s not over here because there’s an alignment issue right? Visually I want that to be aligned with everything else that’s going on on the page. It feels a little off to be just floating. It’s like floating in the center of everything else that’s going on here. Now I’m wondering if your page alignment is actually right here but this hero is wider than your page alignment.

0:36:28
So we’re gonna scroll down, keeping our mouse right there. Nope, because now this image is off to this side. So the logo is not aligned with this content. It’s not aligned with this content. It’s not aligned with this content. Ah, there is your alignment. So we’ve got some alignment issues going on here. This is what you would expect to see. This type of alignment right there, how that matches up.

0:36:57
So what that tells me is this section has a problem with alignment with this photo. You’re just wasting space right here on the left-hand side. Then this section right here has problems with the alignment. Like if we inspected this, there’s the div. You could see the line right there. The line is perfect. Why are the cards over into the center? Why are the cards, why did the cards have extra space on the left and right? And why do they have a giant gap in the middle? So our spacing in general, all of that is, is really being thrown off here. Why is this one? This is actually a, I would guess we’re just gonna see let’s inspect all right so this is oxygen this is oxygen yep is this the oxygen columns element that i’ve said i’ve told people don’t use don’t use the oxygen columns element why because of this kind of stuff this spacing these spacing issues that you’re going to constantly run into much better to use grid for things like this. You can make it happen correctly with Flexbox for sure, but this is extra work. It’s extra work to use Flexbox. Grid is so much easier and simpler and you get a much cleaner outcome. So this should be done with grid right here. Again this gap is far too big. This image needs to be all the way over to the left so it’s aligned with your content vertically here.

0:38:28
And then here’s another thing that I see. This would be another one of those super common issues. I’m just, maybe some people don’t see it as an issue, but I do, I don’t like it. I don’t like when you have a centered heading with left aligned text. And this is actually a left aligned heading, I would gather, but it’s centered, right? You’ve taken the left align heading and centered it in the section.

0:38:54
It just needs to be over here. With the rest of, like, I’ve got a, my eyes got to go from here all the way over to here. And it’s not a big jump, but it’s just structure, balance-wise, it’s like, it’s just kind of jarring. I don’t know. And really, I avoid sections like this in general. I mean, if this is all you have to say, find a visual way to say it. Find a way, like make it, you’ve got to find an interesting way to see it, to say it, sorry.

0:39:21
So that means like this can be over to the left, these, this can be cut here, and then you can have a visual over here, I don’t know. There’s different ways to lay this content out, but just like, hey, let’s just drop a paragraph of text in a section and move on and call it a day. It’s not visually interesting enough. Alright, let’s go back to our hero up here. New Phoenix-owned digital marketing agency helps your business become the go-to business in your local market.

0:39:49
This is like a journalism style headline thing going on here. But it feels a little bit, this is what the sleazy marketers used to do, right? There you always get this, the best thing, it’s like this, you know, they tried to steal like the, you know, shock, shock headline from journalism thing and use it for marketing. And it’s just always not felt that great. It feels like you’re trying too hard is what it feels like. So I would ditch this, right? Like what if this was just gone? Oh, that’s your H1.

0:40:29
That H1 is not doing anything for you like SEO wise. Let’s just get rid of that. Now look, it’s much cleaner. It’s like, hey, become the go-to. I’m just telling you what you wanna know, right? We don’t need all the flashy like Phoenix Marketing Agency. We just need to tell the people what we’re gonna do for them. Become the go-to business in your local market. All right, we’re a husband and wife digital marketing duo who provide local businesses like yours with the marketing tools you need to help your business thrive in the digital age.

0:40:59
Let’s think about this for a second. Is there a reason to tell people that you’re a husband and wife? Do I care that you’re, if you’re not a husband and wife, do I care about that? This is just, I think, another example of we’re having a hard time avoiding the we, we, we, me, me, me, I, I, I stuff, right? We feel like, what can we say other than talk about ourselves? But talking about yourself here does not provide the user with any additional value. Unless you’re in a market where people just love husband-and-wife teams. If that’s the case then it’s important to say that but I just know for a fact in digital marketing nobody cares. So find something else to say here that the person actually cares about is I guess what I would say. Alright I like the fact that there’s social proof inside of the header next to your call to action.

0:42:03
So that’s good. You’ve got a call to action with social proof next to it. I’m not big on this big stars here. Pushing this over to the right-hand side. If the stars were above the text, that might work. Stars could be below the text, that could work too. I would stack these two elements. I don’t think they need to be side by side. Cause it makes it hard to scan, right? If I’m, my eyes are coming straight down from this button into stars, right?

0:42:28
Not into anything relevant. I’d rather it come down into the relevant content here. All right, other than that, well, I will say this. The hero image doesn’t work. It probably works on the screen you designed it on, like that, see that? Okay, that you said, ooh, this works, right? Because we can see the husband and the wife now we come out here right suddenly not working so well anymore so that needs to be revisited but I do like the fact that this is not a generic stock photo because we should take a minute to acknowledge that though they’ve gone the done the extra work the extra effort hey let’s get a real photo of us you know in our office and let’s put that front and center that makes everything more personal that helps that’s good okay but the way that this image is positioned in this section is not working on larger screens all right let’s come down the good news is you’re not alone all right I would just get rid of this here sometimes when Sometimes when things are more wordy, they have less impact, right?

0:43:42
Now, the heading you’re not alone in and of itself is again, doesn’t tell anybody anything. Your business can still succeed, in fact it can thrive, you can become the go-to business in your local market. Okay, you’ve said that already up here. I already know this, okay? So you’re just repeating yourself at this point. So this section doesn’t need to exist because it’s not saying anything different. So you could keep it here, but we need to say something, right?

0:44:13
Right now we’re not saying anything. Peep the results. Cleaning companies getting more business, cleaning companies getting more business in a new town, creating an online presence for a coffee roasting startup, helping a microbiologist set off on his own. These are just some of the businesses we have helped become the GOAT. Okay, this is just hard to read because I didn’t understand the sentence structure till I got like three quarters of the way through the sentence.

0:44:37
So I would try to do that. And then we have another instance of left-aligned text with a centered heading. This is a good example. Just center your text right here. You can center a single paragraph, not a problem whatsoever right here let me show you this so let’s go to text align center and then let’s do max width of 20 characters oh that’s definitely needs to be bigger okay 40 40 something like that I don’t like how that’s actually stacking but you get the point right so it’s better than left aligning it with a centered heading.

0:45:15
What you can’t do is like there’s three paragraphs and you center them all. I hate when people do that. But if it’s a single paragraph, go ahead and center the text. It’s absolutely fine. This is more of a problem right here because you’ve got a giant gap right through the center and then you’re not using all the space of your website width either.

0:45:36
These just feel like they’re floating now. Oh and there’s another problem. So this would be a common, this is a common issue when people put the hover styling on the hover pseudo, right? So the transition I should say. Really it would it would have to do mostly with the transition. So where you put the transition determines how this transition behaves and the fact that it’s snapping off see that it doesn’t it doesn’t transition back to where it was Tells me your transition instruction is probably on your hover and not on the element itself And if it were on the element itself it would transition nicely back to where it was versus snapping So that would be something to fix there I’m not big on let’s just talk about another big part of the colors going on here.

0:46:30
Let me just say this, gold. Gold is very, very difficult to pull off. I’m not big on this gold color in particular. I’m trying to think 21st century, 21st century real estate, 21st century, their brand, I believe is gold. Let me see, let’s see how they did it. So 21st, is it 21st century real estate? Hold on, 21st real estate. Century 21, sorry, my brain doesn’t work. Century 21, century, yes, okay.

0:47:08
So gold, it’s like gold and dark, gold and like a charcoal. This is a much more muted gold, right? And I think this is, this feels classy. Okay. And, but again, gold is very difficult. They, Century 21 pulls off gold, but they did it with a very muted gold color. This is a very, yellowy, gold color, and I’m not big on it. It’s just hard to do, it’s hard to do. And you start putting it as borders on things and it just feels a little outdated, it feels a little chintzy.

0:47:49
So you may wanna, if you wanna stick with gold, try maybe a different, just different shades, different hues, different something. But this gold I’m not a big fan of. See this right here, especially when we got diamonds going on and it’s, it’s not, it’s not giving, I don’t know if you’re going for like an elegance vibe and that’s really what you would want to probably achieve with a gold color is like an elegance vibe, especially with like diamonds and stuff like that. But it’s not coming together for me in this particular design.

0:48:24
So I would continue to play around with, especially these, see these, this gold color is so in your face, right? It’s not subtle, but it’s also, it’s in your face in a way, to me at least, it’s not pleasing. I don’t know if anybody else agrees with that. I mean, go ahead and drop in the comments. Go ahead and drop in the comments. What do you guys think of this gold color?

0:48:47
Do you feel the same way or am I just crazy? Down here with the FAQs, this line right here needs to be on the bottom one but not the top one. So this is backwards. Let’s inspect this. Come up here. Is this a pseudo element? The only thing is the microphone blocks my seeing of oh yeah and you guys let me do this because you guys can’t see the inspector And I remember this problem from last time. How about this? I this was my solution I came up with we’ll put the inspector over here, which actually I think I kind of like better Alright, so let’s inspect this. Let’s figure out what’s going on here. There’s my div row and But I don’t see a pseudo element in there. Oh, maybe it’s this one this one. Wow. There’s a lot of divs divception okay maybe it’s this one but i still don’t do not see it’s probably is it a border then i don’t know it would take a while probably to find where that style is coming from because there’s so many different containers here you go oxalicordian border top color nope that’s not even it these are a different color so that’s not even it it would take a while because of so many oh there it is right there found it border top okay you this is not what you would want to this is not the way you would want to style these.

0:50:09
So you would want to use a pseudo element a pseudo before or pseudo after it doesn’t really matter. Pop that pseudo element in and then you can make sure that your last of type I mean technically you could do this with border if you wanted to but it makes things it makes things a little bit harder. It’s easier to do this with a pseudo element, but in any case, because you’re doing border top, you wanna exclude it from the first child. So the first child should not have a border top style. But then because you’re doing border top, you’re not getting one on the bottom of the last one. Now, some people don’t want a border on the bottom of the last one, so if that’s the case, it’s fine.

0:50:44
Some of this stuff is subjective, but for me, I like to have a border on the bottom of all of them. And then, I mean, if you’re using border, then you don’t even need pseudo elements because there’s nothing that has to be excluded. But for sure, you don’t want a border on the top of it. That really, it doesn’t really make any sense. So put the border style on the bottom at minimum. Okay, let’s look at digital marketing agency.

0:51:11
So let’s talk about, oh geez I closed it, sorry reopen close tab. Let’s go back. So this is your title tag, your SEO title tag right up here. I can guarantee you, I don’t care what city you’re in, unless it’s like some tiny city with like a population of eight, you’re probably not going to rank for digital marketing agency. So you know you may want to try something else here in terms of a title tag I mean, do you guys have a focus? Do you do service based businesses? Do you do? It seems like let’s go back down here. So yeah, it looks like you do service based businesses, of course Wastewater microbiome. I don’t know what they’re really doing Coffee roasters see this is like a product. This is maybe a products company We could take a look at the case study template while we’re here.

0:52:03
Yeah. There’s not a lot here. And I’m not getting a good idea. I can’t click on these to make them bigger. If this is all I can see, I’m gonna have a hard time hiring, right? Based on these examples. Like I can’t, but what I can see from this thumbnail here is that there’s a lot of wasted space in my hero that I don’t have Visual balance that this appears very crowded this logo appears to be touching the header top and bottom container So I see a lot of issues in these but I can’t I can’t expand them. I can’t make them any bigger I can’t see additional screens. Oh, I can’t even make these results images bigger. I really can’t read that I don’t know what’s going on in these photos.

0:52:52
Now if I study the photo, I could probably figure it out, okay? But why would I study the photo if I’m a client? I don’t want to study things when I’m a prospective client. You’ve got to give it to me straight. You’ve got to make it like so a 5th grader can understand what you’re wanting to communicate. And so I think some of this stuff needs to be rethought out here. What happens if I click a call to action? Book your 30 minute consulting call. So this takes me to app.sessions.us. Alright, okay, so that’s like a Calendly type deal. Let’s check some accessibility. Oh, oh, look at this. This is classic Oxygen, guys. I can focus on the logo and then immediately I lose. I don’t know where my cursor has gone.

0:53:41
It’s disappeared. And I’m hitting tab. I can see down here, watch the bottom left, that I’m actually tabbing through links, but there’s no visual indicator that I am tabbing through links right now. Your process page is misspelled, the slug by the way. Actually the whole thing is misspelled. It’s a one C. There’s blog, case study.

0:54:00
Now we get a visual indicator again when I finally get back to book a call I’m interested about those. Oh look at this. We’re focusing on the image, but not the text Okay, that that needs an inspection right here. Show me your Dom my friend show me your Dom here we go All right Let’s go. Here’s your section. Here’s your intro. Here’s your grid, but it’s not a grid. Yes, it is a grid. Grid to columns repeat to. Okay, here’s your issue with your cards. Min max 30, rim 1FR. Okay, column gap. Let’s see the actual card, because look at that card. Look how wide that card is in the DOM, but visually the card is not anywhere near that wide, right? So there’s definitely something going on there. Your image is probably not set to fill.

0:54:53
Okay. Your image doesn’t have a figure tag. It’s missing a figure tag. And your image is linked, but your heading is not. And this is going to have really, really drastic accessibility problems. What we can do here is we’ll go over to the accessibility tab and we will click on this link right here. What would this link be announced as with a screen reader? It would be announced as this. No such function oxygen custom metabox. Let’s go ahead and do this right now. I’m going to I’m going to prove this to you. Cover your ears. Oh, hold on. I gotta switch to all audio, all audio. I think this is right.

0:55:46
Can you guys hear this? Let me know. VoiceOver on Chrome. Digital marketing agency vertical line JTAB design LLC. It can live. It can live. Chrome. I think you guys should be able to see this. Or hear that. Digital marketing agency vertical line.

0:55:58
Entering digital marketing agency. J, link, image. No such function. Oxygen underscore, custom underscore, Meta box underscore, content, visited, link, image. No such function, oxygen underscore, custom underscore, meta box, voiceover off. Big problem, big problem right there, okay? So this is a perfect example of link the heading and then expand the link to make the entire card clickable and then you’re good to go.

0:56:19
Then it’s gonna announce this as Ron White Photography, Wastewater Microbiology, however you say that, coffee roasters, ACS building maintenance, okay? So, accessibility kind of disaster there in that section. Let’s continue going down. I wanted to see these. Yep, there we go again. I cannot get to the FAQs with my keyboard. Can’t even get to them, much less activate them or read them or anything else. And there’s another downside of oxygen here, right? These components in oxygen are not accessible.

0:56:54
So another kind of accessibility disaster. All right, let’s look at your process here. All right, how we help. Step one, identify the problem. We’ve got your process over here. Okay, step two, discovery. I don’t like the fact that before I can read step two, I have to read what step two is about. These need to be flip-flopped okay and I bet I want to see on mobile what what happens there on mobile does it literally put that text first it does look at this look at what’s going on here so you’re telling people what the step two process is before you tell them that this is step two. So we’ve got some structural problems there. Let’s keep going down SEO, branding, social media. Now we’ve got a heading that’s being enveloped by all of these other icon things. But watch what happens once again. I mean I can already pretty much guarantee it. Yep.

0:57:56
Look at that. Icon, icon, icon. So once again, we’ve got a structural issue there. And I get it, okay? Let’s just take a minute to point this out. We’re trying to be, you’re trying to be creative. That’s what I’m gathering, right? You’re trying to say, how can we make these sections more visually interesting versus just structure these layouts like everybody else structures these layouts?

0:58:28
Well, the reason there are common structures for layouts and the reason why frames is the way that frames is guys, when we, when we’re building frames and I, this site’s not built with frames because it’s built on oxygen. Oxygen isn’t for frames. Okay. I’m just using frames as an example. When we build frames, we design frames. What I do is I literally scour hundreds and hundreds and hundreds of websites, looking for somebody who’s doing something unique, doing something different, but in a way that benefits the user.

0:59:02
There are tons of creative applications that I come across, but the creativity was the point, right? The user was not the point. If you’re trying to win a design award, and you just wanna be, oh, I’m a 2023 web design artist, right? And you wanna be like Van Gogh, or I don’t know, art. Pick some artist that’s like abstract, and they just do things crazy, and everybody’s like, ooh, look at them, how so talented they are, right?

0:59:32
But like, we’re designing websites for businesses to sell things and make money. So winning a design award doesn’t do us any good, right? So when I’m doing frames and I’m like, all right, what kind of frame are we gonna build next? Well, we see these common layouts. I go to hundreds and hundreds of websites and I see the same layouts over and over and over again. And I’m just like, next, next, next. We’ve already built frames that cover all of those layouts, right?

1:00:00
Those layouts are important and it goes to show they’re important. That’s why they’re so widely used because they convey the information in a meaningful way. In a way that’s easy for the visitor to digest and understand and then the business makes money. That’s why they’re the way that they are. Now we can get a little bit more creative and I’m going to give you an example. So we’re going to go to getframes.io. Let’s just go into the whole thing. We’ll go to, or in fact, yeah, I don’t know, what’s the best way to show this?

1:00:34
Let’s go into the ACSS community, let’s go into frames real quick, updates area. Let’s go down and look for the frame that I’m talking about here. Of course, of course, just, hey, circle. Don’t load when we’re live. How about that? That’s just fantastic Okay, there we go. All right, so we’ll come down. I want to find The one I’m thinking right here, okay, let’s open this so Let me open this whole thing Come on, sir. Okay. Thank you. All right, so This week we came across this concept. This is not just so like ooh, you know We sat down as artists and we’re like, oh, what can we do next, right?

1:01:17
We’re looking at other sites that are effectively doing things. And then we put our own spin on it and we develop it the way it needs to be developed. Because a lot of these, even though they’re creative, no accessibility focus whatsoever, no HTML5 compliance whatsoever. So we go the extra mile to put in, all right, let’s take that concept, let’s make it better, let’s make it our own, let’s put in the HTML5 compliance, let’s put in the accessibility features, let’s make it scalable and maintainable.

1:01:47
And so we come up with something like this. So each one of these cards is actually a singular grid to protect this layout. And then we’ve used some fairly advanced infant-child styling to make the images different sizes. And what you end up with when you take five minutes to style it up is something like this which is very in my opinion very visually pleasing and impactful and gets people’s attention and is it creative yes it’s creative however it’s not creative in a way that detracts from our goal our goal is this content and this call to action this happens to aid the content and the call to action, in my opinion, right?

1:02:29
So there’s many, many times where creativity aids in the ultimate goal that you’re trying to accomplish, and then there are times when the creativity detracts from the ultimate goal that you’re trying to accomplish. So when we come across creativity, that’s the main question we ask ourselves. Is it helping to achieve the final goal, or is it going to detract from the final goal? And if it detracts we don’t do it. We don’t do it. We only put in creativity that helps achieve the final goal when we’re building frames. You are playing around with like, hey can I make it a little bit more creative? Okay here’s a section right? Let’s go back to this one right here. There’s probably a way you can pull this off.

1:03:12
Alright? I think what I was ultimately getting at is if you’re going to break the rules or you’re going to do something unique, you really have to have a lot of design talent to pull it off like a lot, a lot of design talent to pull it off. It’s hard enough to just execute the standard stuff really well. Right. But if you’re going to break the rules or go off the off the grid and do something completely different than what other people are doing, you really have to be super talented in order to do that. But then you also have to think about the structural implications. Because doing something like this, structurally becomes a disaster if you don’t think about the structural implications.

1:03:53
This is what I mean when I say it becomes a disaster. Where we go icon, icon, icon, then you tell people what the section is about, then icon, icon, icon. Here’s another one, we go to frames. This is another perfect example because this is a actually a common type of layout but it just gets executed super poorly. Let me go back. This type of section becomes an absolute disaster very commonly. Let’s go, yeah here it is right here. Let me do, okay so feature section grid November. So you’ve got this, let me go to the designed version. Here you go.

1:04:29
So you’ve got this image in the middle and then it’s surrounded by talking points. So the question is, do we still have visual balance here? Yes, okay? So there’s good design balance. And guys, I styled this in five minutes from the frame. Let me, sorry, clear my throat. So five minutes. It went from the frame that you saw, this, this is what the frame looks like.

1:04:57
And there were people like, oh, these frames don’t look good. They don’t look good because nobody’s styled it yet, buddy. Put some work into it, right? We did all the structural stuff for you. Guys, this is a complicated frame. It would take you to build this right, it would take you at least an hour, probably more, okay? And I explained what’s going on in this frame. But just to give you a little bit of a rundown, these have to be a list, okay?

1:05:24
An LI, so a UL with LIs. The image is not part of the list, but visually the image has to be in the middle of the list. Okay? And then you have to make this query loop compatible. You can’t have a list over here and a list over here that’s two separate lists. That’s what a lot of people would do. They would create a three-column grid, put a list on the left, put an image in the middle, put a list on the right. Can’t do that. It’s not semantically appropriate. This is one list of features. It has to be one unified list. You have to split the list with CSS. Then you have to inject the image into the middle of the list with CSS visually without the DOM showing that it’s two different lists or anything like that. So you actually get, what is this a feature section grid November?

1:06:09
So if we go to bricks, this, this is just a really important point to harp on, right? Because this is the kind of thought when you’re building a website, the right way, the, these are the things that you have to, when you’re a professional, these are the things you have to worry about. It’s not just about, Ooh, it looks that way let me do whatever I need to do to get it to look that way and not care about anything else under the hood or accessibility or HTML let’s not worry about anything else let’s get it do we get it visually looking like that then we’re done that’s amateur that’s not professional professional says I needed to look like that but structurally it needs to look like this and those are two very different things all right so I’m gonna go to bricks templates and hero what was that feature it was feature November, I think, something like that.

1:06:55
Feature section November, okay. So let’s view, then let’s inspect, okay. So again, show me your DOM. That entire grid, let’s get out of, notice that it puts the image first before the features, okay, you can also choose to have the image last, but it makes less sense that way. But let’s get out of mobile I hate it with the one bad part of this is that it made all my controls compact where there it is right there okay now let’s go back over here yeah I don’t I don’t know if I like it on the left okay this entire guys this is is just a container okay everything you’re seeing going on with this grid right here is contained inside of this one single unordered list and then the image is a figure tag okay with the image inside of it outside of the list you can see right here the image lives outside of the list the list is the grid right you can see the grid structure right there I open the UL look at this clean, L-I-L-I-L-I-L-I.

1:08:03
There’s all of your list items in one list. Now we use CSS to break the list apart, right? And you can see how they go back and forth, back and forth around the image. Okay, so this is all structurally very, this is as clean as you can possibly get from a structure using semantic HTML. And then CSS does the job of visually achieving what we wanted to achieve. Okay? But literally it’s a UL and a figure that makes this entire section right here. It’s not three-column grid and then a list over here and a list over here and an image in the middle and no no no no no. Okay? So what I’m getting at is we go back you try to be creative. This is an example of being creative. Now it’s this is this exists this layout exists on a lot of different websites, right?

1:08:50
So we have to include it in frames because people want these kinds of layouts. It needs to be available to them. But what we do is we take the disaster of an implementation that everybody else uses, and we implement it the right way and then give it to you as a frame, okay? So we’re doing that extra work for you. When you try to be creative, like with a section like this, you have to think about structure because the structure can easily become a disaster as you attempt to try to achieve something visually All right. I think we’ve covered that enough and It feels like I’m just harping on JTAB design, but I’m not I’m the reason I’m harping on this is because Like I said in the beginning I go through hundreds and hundreds of websites when I’m when I’m working on new frames concepts.

1:09:39
And I see this stuff over and over and over and over again. It’s not just JTAB design. It’s literally like the majority of websites do not execute things like this properly. So don’t feel bad, just get better. That’s it, you just gotta practice more. And I’ll also say, I used to do stuff like this, okay? So you’ve gotta do this kind of stuff to get to the next level. I like the fact that you’re trying to be creative. You’re playing around with it.

1:10:08
You’re trying to do different things. It’s all part of the process. Okay. But what I would say is some of this stuff needs to be done in a playground and then you need to stick to really the solid practices when you’re doing live websites for yourself or for clients. Because if clients see this, I’m just going to tell you right now, if clients see these structural issues, because they can see them, they don’t have to inspect the page to understand, they just know that these three things should have become before the heading.

1:10:38
Up here, they know that this paragraph shouldn’t come before this heading. They see that stuff and they’re like, I don’t want those problems on my website, so I’m not going to hire this person. So I’m harping on this because I want you to make money and you’re not going to make money with issues like this going on on your main agency site. All right let’s look at the blog here. Actually let’s we’re running out of time. I want to get to the last site. So let’s dip we’ve done enough here I think let’s go ahead and dip out. This is going to be our final website right here but I want to turn to the comments before we do this final website. Alright, so let’s scroll through. John Crumpton says, good point about the husband and wife team. I think boutique agency is better positioning and leaning to the, into the high customer service as you’re smaller.

1:11:26
Exactly, and boutique agency is better. Here’s another reason why you maybe would not want to use husband and wife team. You think that it’s that’s oh that’s great that’s personal that’s you know we’re awesome as a husband and wife team but if your client just got divorced six months ago and they’re like my I can never be a team like what husband and wife what what if what if what if they hit rocky times you know like what’s gonna happen to my website they’re thinking through their lens of what a husband and wife is and you don’t know what everybody’s lens of what a husband and wife is, right? So if they have a negative connotation to husband and wife situations and you’re saying we’re a husband and wife team, you’ve just excluded them basically. They don’t like that vibe you’re giving off and all they’re thinking about is all the disasters that could happen with husbands and wives and how that’s going to impact their business. So not only have you said something that doesn’t explicitly add value to them, you’ve said something that potentially has a negative connotation.

1:12:30
Whereas boutique agency, that feels like small and personal without the specificity of husband and wife or whatever else you might want to use. All right, so let’s see. Site gives me early 2000s vibes. Right, it’s a little bit outdated. And I think that has to do with the color scheme too. The like blues, that gold shade. Okay, so let’s see. Stars should go below the text because they’re too similar and the button and text blend in.

1:13:01
Yeah, definitely. I would agree with that. And I would make the stars smaller. We only need the context of the stars. We don’t need them in our face. All right, let’s keep going down. Purple and gold are generally too regal royal for my taste and aesthetic that I think doesn’t read as modern exactly. Okay. A darker blue and a more muted gold for a classier mood, I feel would look good.

1:13:26
Okay. Those graphs don’t show me results. Looks like you paid for some traffic and then stopped paying and traffic went back down. Just my thoughts. So again you see that you know because Jason’s here okay so he says I didn’t pay for the traffic that was the GMB but the fact that we can’t really decipher what’s happening in the images leads to misinterpretation of the data and so you really have to make stuff very very clear. Okay good good good good good let’s get on let’s let’s do the last one peace and harmony counseling services LLC All right. First of all, I like the I like the branding I Like the color I like the purple color I Think that this hero right here Needs a little bit more going on. Maybe a very very subtle background pattern here. I’m not really sold on the white text because it just looks kind of like it was popped in there and then the contrast between the text which is very light and then these buttons it’s a little jarring right? This is like all peace and harmony. This is not peace and harmony right here okay? So if we’re wanting to stick to our brand theme here, this is not giving me peace and harmony vibes.

1:14:56
Oh, okay, that’s interesting. Hmm. Hmm. How do we feel about this? How do we feel about our butterfly over here? I would like to see, I don’t like the fact that the butterfly turns upside down because it doesn’t make any sense. Butterflies don’t fly upside down. I get what you’re trying to do.

1:15:20
Here’s another, we’re trying to be creative, we’re trying to do something different, we’re trying to think outside of the box, but the implementation, one, does it do anything for the visitor? We got to ask that. And no, it brings attention to the form over here. You could argue that, all right? If we’re in a court right now, if we’re in a debate, you could argue that.

1:15:39
I get it. You could argue that it brings attention over here. But it also covers up what we’re doing over here. I mean, the antennas is like getting in the way of the text and swooping across my input fields here. It just doesn’t feel very clean. I would probably like to see maybe peace and harmony. It’s also not. Yeah, the Sylvia says the butterfly died. The butterfly dies as you go through the page.

1:16:07
Think about this, think about this as a potential. You’ve got a cute little butterfly, right? Peace and harmony. Putting that giant, making a giant GMO butterfly, not so much peace and harmony, okay? Think about if it was smaller and cuter and just peeking out from behind this card, it’s not overlapping the card, just was peeking out from behind this card. And maybe as I scroll down, it peeks out a little bit more, but it’s a very subtle, you know, animation type effect.

1:16:37
That would probably be more peace and harmony. That would probably be better. The GMO butterfly that dies as, sorry, we’re shredding this, but there’s gotta be some entertainment in web design for dummies, right? There has to be some entertainment. And the good thing is, if you feel bad about what we’re saying, I mean, you know where to get counseling. So we’re all good here. I would attempt to make the butterfly smaller, cuter, and peek out from behind this card. And then that, by the way, would allow you to bring this card higher up into the viewport here, maybe aligned right next to all of this content here.

1:17:19
Right now the butterfly is taking up all that space. I would make the form, which is more important, take up that space instead. This is an example of, let’s see what we’re doing here. All right, so we’ve got bricks. This is, guys, this is frames. This is not a frame right here, but this site is using frames. This might’ve been one of the basic hero frames and then they added this stuff over here.

1:17:42
But let’s just take a second to once again, recognize that like that other site we were looking at that was built with frames look completely different from this. And that’s what I love. It’s like, you can’t tell until you inspect. Would have no idea that this is built with frames. Okay. Let’s keep going. Let’s keep going.

1:18:03
This is a common problem I see with shape dividers. Is they swoop down in and we haven’t properly spaced out the content to account for them. So this heading is way too close to the shape divider. You gotta give me some breathing room. Cramming, feeling like things are crammed in is not giving me peace and harmony vibes. Okay, I want peace and harmony is design balance, it’s breathing room, it’s right. So let’s work on our spacing here.

1:18:36
You can make that shape divider. Let’s see where this whole section is. There’s our section. Yeah, so you’re gonna have to move down. What I would do, this is where you use a calc this is where you use a variable for the height of your divider very I’m about to do a whole video on variables okay but this is where variables really come in handy if you set a variable to the height of your divider okay so we have a token that represents the height of our divider you already have default section spacing here and you’re using automatic CSS which means that by default this is section space M. So if you want to take the same, have the same amount of padding while using a divider, with the top padding of this section, it’s section space M plus divider height. So you have two variables, right? Variable for section space M, the variable for divider height.

1:19:32
You add them together and it doesn’t matter how tall the divider gets or short the divider gets, the section space is automatically maintained by that calc function. So this is a really good implementation or would be of a variable for the divider height and a calc for the top padding in this section. You need to put the form light class on your form here so that you can style up this form because right now it’s just default WS form styling. I can just tell this by default basically. Let’s scroll down and see. All right, actually, let’s look at a copy. Let’s do copy before we get too far into the page. Your journey, our guidance. This is your H1, I’m guessing. Okay. SEO wise, this doesn’t do anything for you. So if you have SEO Implications here or you have SEO as a goal. You need a smaller Heading up here that is actually your h1, but it’s just visually smaller. This can be your marketing headline. That’s fine You need an SEO headline up here to help you. So it’d be like whatever city you’re in St. Cedar St. Holt.

1:20:52
Okay, I don’t think you have this, I don’t think you have the city in there. So whatever the city is in Michigan, you put that right here and then counseling services or whatever. You gotta do some research and figure out what the keyword needs to be. But put that right here. This now is your marketing heading as an H2. And then this is your normal content.

1:21:12
Helping individuals and families achieve and maintain peace and harmony through mental wellness and personal development. Helping individuals and families achieve and maintain peace and harmony through mental wellness and it’s a little wordy, it’s a little wordy. It’s a little wordy. I don’t know how to reword it right now, but it feels a little wordy. And I’m not sure it’s hitting the right keywords.

1:21:43
Maintain peace and harmony. If somebody had the type of problems that you work with on a daily basis, if you said what is the outcome you want to achieve, would they say I want peace and harmony? If they say that, then use it, then that’s good copy. But if they don’t say that, then you’re saying something that’s not gonna connect with them.

1:22:08
And I’m just not sure. I don’t know your clients, but I’m just not sure that, like I’ve gone to counselors before, right? Many, many times. I was never like, I wanna maintain or achieve peace and harmony from this. I had specific problems that I wanted to achieve solutions for or whatever. So do you work with specific types of people with specific issues?

1:22:33
Maybe get more specific here. This just feels maybe very just nebulous. Let’s say that we’ll use the word nebulous. It feels very nebulous. Where specificity may do you a lot better here. All right, our goal. Our goal is to provide Michiganders, I’ve never heard that before. Michiganders, with tools that they can use on their own to cope with intense emotional experience, stressful situations, tough interpersonal problems in the future.

1:22:58
Here you go, anxiety, depression, grief and loss, substance abuse, okay. Let’s say 80% of the people you work with have the same set of issues, right? You could talk about those up here, and then the outcome of what happens when they go to peace and harmony counseling. What is their life like after? You’ve got to paint us a picture, okay? I think this is too nebulous to paint that picture.

1:23:22
The more specific you can get, the better you are going to be at painting the picture for people. And then it’s going to connect with them better. And they’re like, oh, yes, I want that right there. All right, what do we do? Helping you address life’s most serious issues. Individual counseling, children, adolescent counseling, family counseling, couples counseling. Then I can view all.

1:23:43
Are there more than that? Oh, there are more than that. Okay. So there’s six total there. And there’s four total here. All right, we can come back to this. Meet our team, licensed professional counselors and clinical social workers. Okay, that’s the team. We have more therapists here. There’s six. All right We’ll keep looking at this stuff as we go. It’s all it’s it’s you know, the layout is fairly basic. It’s fine getting It’s getting the point across right? These are our services. These are our counselors Let me actually click on one here and see okay, we can get a little bit of a bio All right our blog the role of technology and improving access to mental health, okay, here’s a good example.

1:24:29
I’m talking more about SEO. Talk more about, and I’ve mentioned this in previous Web Design for Dom. You’re gonna start to hear a lot of the same stuff over and over again, which is important in my estimation. Like, we keep seeing the problems, so, or the potential problems. How many times do we have to see it before we can really start to not see it anymore? That would be what we wanna think about.

1:24:50
What does this do for SEO? Nothing. What does this do for the visitor? In my estimation, nothing. The headline of the article has two purposes. Purpose number one, if you’re SEO minded is to rank. UX minded is to connect with the visitor and make them want to read it. Right? to connect with the visitor and make them want to read it. So just ask yourself in a newspaper, in a magazine, would they ever just have an article that says mindfulness?

1:25:22
No, probably not. It’s gonna be like, and you don’t necessarily have to go, nine ways to use mindfulness. Okay, that’s one method you could go with. There’s a lot of methods that you can go, but just the word mindfulness by itself, I don’t think does anybody any good. Then what we’re doing with this blog is we’re presenting the person with a wall of text. There’s no bullets. There’s no block quotes. There’s no images. There’s no video. There’s no audio. There’s no nothing to make this blog interactive, to break up content, to make it scannable, to make it feel peace and harmony of interacting with it. So we’ve gotta do a better job on the execution of articles to make them, break them up.

1:26:12
Let’s go to, I don’t know, I haven’t done blogging in a while, but I did a couple for Get Frames. So I don’t even think I made them front and center and prominent, they were used in email marketing and stuff mostly So there’s how frames can add thousands of revenue to every project Let me go to how is frames different from other design sets, okay? So I really want people to read this right so we’ve got headings. We’ve got images these images are wider than the content So we scroll down the bow. We’ve got code examples. We’ve got stuff that people can interact with. They can scan by headings. There’s bullet lists put in here.

1:26:55
There’s more bullet lists, right? There’s links that they can click on. There’s a lot going on, right? So you’re really breaking things up. You’re really adding visual interest. You’re adding supporting content. Okay, that’s kind of how we need to be thinking when we’re writing. If you just present people with a wall of text, it’s like, oh God, do I want to read a book right now?

1:27:17
Do I want to read a whole news article right now? Probably not. It harms the UX, but it also of course harms the SEO. So this blog execution, I can also tell, you know, it’s just not, let me go to read all blogs here. So depression, the silent killer. Does anybody type in depression silent killer? That would be the only keyword that this could ever rank for. And I would probably say no, probably not.

1:27:48
They would put in symptoms of depression, they would put in consequences of depression, or there’s a bunch of different ways to word that. There’s a lot of things that they would type in, this is probably not one of them. Shining a spotlight on minority mental health month. Okay. It’s kind of a newsy type article maybe. Here’s an issue down here, the read more visually. It’s touching the bottom of the card.

1:28:11
I’m not big on that. We need some spacing in these cards. But mainly when I look at this page and this was on all of your pages, I did want to focus on this. I’m not big on this, what’s going on down here This is a frame most likely, but the image you’ve chosen as the background image does not work in this section You have light section Followed by a very light section and then what actually happens. I saw this on the home page when I was there because No, it’s not there It was maybe somewhere else where when you have a white section here, and there’s white in the image, you actually see these hard edges, but they’re like peeking out of nowhere.

1:28:54
And this light background does not call attention to this section, which you want to call attention to this section because it’s a CTA section. So I think if you took this bright kind of pinky color and I don’t even know what to call that and put it as the background color of this section, then maybe just a very light background pattern in there that would call people’s attention so as I’m scrolling down this page just like this calls attention this purple right here calls attention to this hero look nothing else calls attention here except the buttons and the headings a little bit okay which is fine but you want a whole section to call attention this does not get it done if this was a big vibrant purple or pink color that would get people’s attention then you can make the button white or whatever make the text white and now it’s gonna Really really really stand out So I would make that change 100% because that’s an important section and it’s not really doing its job right now All right, where else can we go on this site? We’ve talked a little bit about SEO We talked a little bit about copy we talked about this visual element right here Let’s go to about us This needs to be more than one paragraph Because it’s too it’s too. It’s too. That’s too thick too chunky, right?

1:30:09
It doesn’t make it accessible for me to read I don’t want to read it. Oh There’s our upside down butterfly again here’s some bullets, but these bullets are not executed properly because I Usually it’s very off-putting when the text of the line break goes below the bullet. All this should really be indented. Let’s take a look at this here. Inspect, div, yeah, it was just done. This is not even a list. So semantically this is a problem because you haven’t created a UL or an LI and you’ve just manually put in bullets and then you use BRs to break them. So semantically this is not executed properly. Let’s get a proper list element in there and that’ll take care of your visual issue there as well. Insurances we accept. This is kind of the lazy way. I’ll just say it this is kind of a lazy way to like say hey here’s the things we integrate with. Here’s the insurances we use. Let’s get the logos of all of these companies and make a nice little logo grid, right?

1:31:18
This is something visually pleasing. Yeah, extra effort, extra work. I get it, I get it. But yeah, we’re conveying the information, but it’s not visually pleasing. And then this commonly happens. You have a white background section with a white background section. When those two sections touch each other, you effectively double the white space between them which is not good right if this had a subtle background this would not happen right so let’s do base ultra what is going on base why did it start doing a new one ultra light okay there you go so now we have a separation between this section and this section and now our padding looks balanced right same padding here. That’s here if we take that off well suddenly we have what appears to be a doubling of the white space and That creates a problem with the visual balance, so you got to really be careful This is not a good practice if you are going to do a white section in a white section You have to remove the top padding of this section right here.

1:32:28
So this immediately would go to zero, which that’s long form, so that’s going to be a little bit hard to do. Yeah, that’s what I thought. Oh, and that’s on the whole, that’s on every section. Okay, so that doesn’t work. But you could easily go into Bricks and just say, hey, this section right here, zero padding on the top. Well, in fact, I could just do it. We could actually do it. Padding top zero, how about that? Let’s just do it the easy way. So now it’s fine. Now it looks like these two things flow together and that kind of fixes that.

1:33:02
Okay, so avoid issues like that. Our therapists, we already looked at this grid once. Our services, okay. Blog we looked at contact us Okay I’m not sure the layout of this form It’s very wide the forms very wide So I got to go a lot across And maybe it’s not so bad. It’s not a deal-breaker But look at the giant submit button that has to happen because of this form structure You could definitely just make this a left align button or a right aligned button over here. It’s just not great. It looks like a giant purple bar going across my screen, not peace and harmony vibes, right? And then this is the mortal sin of contact forms. Okay. This is not, you never want to do this. Your submit button should never say submit. Just never. Nobody wants to submit. That’s not the thing that they want to apply for counseling.

1:34:04
They want to contact you, send an email, get on a waiting list. These are things they want to do. They don’t want to submit to you, okay? So submit, this is the cardinal sin of form, submit button, text is the word submit. So let’s get that out of there, change that up. And there’s your kind of insurance as we accept just kind of boom pow right big list Let’s get this visually Designed up client portal. That’s okay. This is a third-party service. No big deal. All right I think we’ve done enough there we can go through you know, there’s some accessibility stuff We could look at looks like we can tab through all these things this is all fine. Let’s look at this card implementation before we go just to show me your DOM on this site one time. Okay these should be LIs and if you’re using frames these were LIs at one point I don’t know how they got switched over to being divs and then this is clickable parent. So that’s good. That is good Well, okay, so this this entire card is clickable inspect but what we do in frames is we make this the The a right you’ve made the entire what have you made the a class team member hrefs Okay team member, Ahrefs, okay.

1:35:37
All right, there’s the image. Where’d our heading go again? Hmm, nope. Okay, maybe that’s just how it’s looking. I don’t see anything in the A, the A looks empty. I don’t know, what card is this Bio card Bravo. Okay. Well, thankfully I’m in here so we can take a look at it bricks Sorry bio card Bravo No, we don’t even have a bio card Bravo. Hold on bio Bio card. Is this a really old frame or something?

1:36:19
What do we call bio cards, profile card. Profile card Bravo, is that it? Let’s take a look. Well, that’s the singular frame. Let’s go to, what section is this in? Profile, do we have profile section? Is it profile section Bravo? There we go, is this the one? All right, inspect. Div, okay, that’s the person’s title.

1:36:51
All right. Let’s edit with bricks. It might just be showing in the DOM weird because of the clickable element thing. Oh, we don’t have these linked up. Okay. We don’t have these linked up because we don’t know where you want them to go. Or if you want them to be linked, that’s probably why. So then you went and linked them by yourself, I’m guessing, which would require you to do this external URL and then I gotta remember not to, let’s do clickable parent on here.

1:37:23
There, okay, good. And then we would want to style those, but I just want to see the DOM real quick. So let’s make sure we have the link we have a link on there good good good. All right, let’s just go check it Good whole thing is clickable. Now we inspect Just want to see what the DOM looks like Okay, yeah, it’s not showing in There we go. Okay. I guess I wasn’t expanding it. We see the person’s name. That is the link of the card That is how it should be now. What happened with your implementation? Where did your site go? Here we go See your link is empty. That’s what I’m trying to figure out. What did you link? I would have to get into the install and see what’s going on there. And that’s what I see right there. The opening tag meets the closing tag. There’s nothing in there. It’s an empty link.

1:38:17
So that is, that’s, there’s something wrong with the implementation there. That needs to be investigated further. And you could go, you know, if you’re watching this and you’re like, oh, I don’t know what I did. I don’t know what I did wrong. Go into the ACSS community and post a link and you can also send us, you know, login credentials, but we can take a little bit more time to investigate this, but this link should not be empty. It should be the name of the person, okay? As you saw when I just did the implementation there, which now I need to remember to remove. Let’s or maybe yeah I did save it so let’s go ahead and remove it. So link to external URL let’s take that off let’s say clickable parent off let’s resave we don’t want to mess up anybody else’s stuff. Okay now let’s get out of there. All right I think that’s good enough. Let’s turn to the comments and get last thoughts final thoughts let me go back to camera here. Final thoughts on what we’ve done today. Last questions go ahead and get them in. Question in all caps followed by your question. All right we’ve got Amanda blogs done in Gutenberg. Yes yes yes yes I think you were asking about mine. Yes that is let me get let me show you. So let’s go to Get frames dot IO Maybe we can log in dashboard Because this is good. This is because this did take take some extra work. So let’s just take a look at the implementation Because this would be good for people because people struggle with you know, putting stuff in Gutenberg so visit Let’s go back to that article right here. All right so we can look at edit with Bricks. This is a frame by the way. This whole blog post template is available as a frame. So let’s go to edit blog single. We’re gonna take a look at that and then we’re also going to go into WP code box and we’re also going to go into the actual post itself. How is frames different from other design sets?

1:40:26
Okay, so here’s how it looks in Gutenberg. So you’ve got your list here. Here’s an image. Notice the image in Gutenberg does not extend past the content. It’s just a normal image in Gutenberg. All of these have the caption to go with them, okay? So I’m just going down the page. This is a bullet list that was added. That’s the standard Gutenberg bullet list Everything else is just an image. There’s another bullet list Okay, more image examples more bullet lists There’s a you know standard bullet list Links done in Gutenberg all all good. Okay, exactly what you would expect to see nothing fancy nothing crazy Now this is what it looks like on the template side of things.

1:41:15
So you have your hero, which is a, this is all modular in frames. So you can have a blog hero. There’s a bunch of blog heroes you can choose from. So you can mix and match. You can build your own blog template by mixing and matching different components. Like, here you go, a hero, and then there’s the body. So here’s the blog body, which controls this and then this author card right here.

1:41:37
And then all I did was edit it to make a fake overlap. This is not a real overlap. This is just a, uh, I believe like an inset box shadow to create an overlap effect. Um, or it could be a background gradient. I’m not sure. There’s a bunch of, Oh, I used to square shape divider. Look at that. There’s a lot of different ways to create fake overlaps. Um, but if I take away that square shape divider, now there’s no more overlap. I add the shape divider back and there’s an overlap. Okay, so a bunch of different ways to do that This is just where the dynamic content is inserted from Gutenberg. Everything else is here. Now. Let’s look at WP code box So we scroll down and we find our blog section, right? Here’s all of our blog styling so I’m targeting the post content element and Here we’re basically doing a figure breakout, right?

1:42:26
So if it’s 1366 pixels or above, because this is a min width, so 1366 or above, you’re gonna see that image get to 125% width and then there’s a margin correction to center it. That’s what creates, where is my front end? All right, edit post, preview, preview a new tab. So I scroll down, this effect, where that image extends beyond the bounds of the text around it.

1:42:59
That is created by this little snippet right here. And that only happens on desktop. So if you look at that on mobile, come down, come in, look at that. Look, it snaps right there, you can see it it’s like oh nope not that breakpoint anymore so I’m just gonna look normal now and all the images look normal okay so that’s good let’s go back to WP code box see what else was done so I have this heading counter thing I might I’ve been experimenting with this lately one of the things I’m concerned about with list posts which I don’t think most people do.

1:43:38
Most people have never worried about this and I’m going to be doing tests just to see if it matters but people just do this manually. This is a manual, see I can’t select number one. See I can’t select the number one because that number one is actually a pseudo element in a list. My headings count themselves. Okay, this is a technique that I’ve been working on and I’m also working on making it semantically a ULLI even with all of this other content in here but it’s a little bit complicated but but I want you to see this if I go down I think this should happen correctly notice that wrap-up does not get numbered so there’s another container in here and because Gutenberg is a trash can it’s not easy to find here it is is it this group it might be this group but let’s say I was going to add another heading in here.

1:44:26
So I choose heading. Look at that. You see it number it. It numbered the heading automatically. And it doesn’t matter if I move this heading. Can I move it with Gutenberg? Yeah, there’s these little stupid up arrows. Look at that. If I move it before the nine, it becomes the nine and the nine becomes the 10. You know, when you’re writing these list posts and you’re like you make one two three four and you’re like oh god I want to move that one up there now you gotta go reorder every heading in the article it’s a nightmare right so I built this auto counter okay so it just like wherever I put that heading it’s going to number it the right way if it goes before eight it turns into eight and then the other ones turn into nine and ten and it’s so it auto counts itself but it’s also going to allow me to semantically make these a real list which I’m wondering if it has you know good SEO implications or obviously I’ll have good HTML 5 implications because this should be a list it’s a list of things it’s literally a list post so it should be semantically a list but there’s a lot of other stuff we got to account for images in here and all this other stuff so yeah anyway that’s that’s that so let’s look at the code for that it’s literally just this it’s very it’s very simple but this is what creates the auto counter all right so that’s it any other questions does this site require HIPAA compliance because forms guys was I not I love it. I love live. I love this. This is fantastic. Did I just go like that had to be at least 15 minutes. That had to be at least 15 minutes. Oh my gosh. That’s a sign that it’s time to end. It’s time to end the live stream. Alright, here’s the this is the breakout code that I was talking about just a second ago. Let’s make sure we’re screen sharing now Okay, we are This is the automatic countering code right here. Okay, so it’s not a lot. It’s not hard. It’s not complicated In fact, I can share this I can do tutorials on it. I plan on doing tutorials on this kind of stuff And then I’ll just let’s just go again. Here’s Gutenberg. Okay guys Here’s Gutenberg. All right. It looks it looks normal. It looks like you would expect it to say I’ll just say all the same things again All right. Here’s what it looks like on the front end All right, you get this little poke out and then when we look at it on mobile Here we go. We’re gonna come down see notice it right there. It snaps. It’s like oh, okay We’re gonna go to normal again, and it’s all good. All right. Sorry about that 15 whole minutes of staring at my face. Well, I think You can see the screen and you can’t see the screen now I get to go down to the comments where people are all saying we can’t see the screen. This is fun. This is Absolutely fun Okay. All right. Good. Good. Good. Good. Good. I’m gonna go through and see This has been fantastic I’m gonna go ahead and get started.

1:47:37
I’m gonna go ahead and get started. I’m gonna go ahead and get started. I’m gonna go ahead and get started. I’m gonna go ahead and get started. I’m gonna go ahead and get started. I’m gonna go ahead and get started. I’m gonna go ahead and get started. I’m gonna go ahead and get started. I’m gonna go ahead and get started. I’m gonna go ahead and get started.

1:47:49
I’m gonna go ahead and get started. I’m gonna go ahead and get started. I’m gonna go ahead and get started. I’m gonna go ahead and get started. I’m gonna go ahead and get started. I’m gonna go ahead and get started. I’m gonna go ahead and get started. I’m gonna go ahead and get started. I’m gonna go ahead and get started. I’m gonna go ahead and get started.

1:48:02
I’m gonna go ahead and get started. I’m gonna go ahead and get started. I’m gonna go ahead and get started. some counseling and we will all be good after that. Okay. Let’s go back to the camera. I’m out. That’s it. Peace. Best way to end. One of these web design for dummies. We’ll be back next Wednesday, guys. If you like staring at my face, while I look at a screen that you can’t see, you have to join me next Wednesday at 11. We’ll be doing maybe some of that again. Go ahead and hit like, hit subscribe if you’re not subscribed to the channel, drop a comment down below and that’s it.

1:48:32
I’m out. Peace.