1 00:00:00,800 --> 00:00:04,400 You know when you're on a website and something just doesn't feel 2 00:00:04,400 --> 00:00:07,520 right, it feels a little bit niggly and 3 00:00:08,000 --> 00:00:11,720 you start to feel that no matter how great the product or 4 00:00:11,720 --> 00:00:15,440 the service is, that you're just not going to buy from this website 5 00:00:15,520 --> 00:00:18,720 because just something doesn't add up. Over 6 00:00:18,960 --> 00:00:22,400 animating everything. Oh my goodness. 7 00:00:22,960 --> 00:00:26,520 We've all had that experience. Whether that's landing on a 8 00:00:26,520 --> 00:00:30,310 client's website and they've clearly self built and 9 00:00:30,310 --> 00:00:33,950 it's time for a rebuild, or whether we've followed one of those 10 00:00:33,950 --> 00:00:37,750 meta ads and we go on the website and think, oh yeah, 11 00:00:37,750 --> 00:00:40,630 there's no great shakes here. You get about halfway down the page and you think, 12 00:00:40,630 --> 00:00:43,630 oh, this isn't the right one for me. Whatever it is. 13 00:00:44,350 --> 00:00:47,630 There's a consistency in 14 00:00:48,110 --> 00:00:51,390 bad practice amongst the website design community 15 00:00:52,110 --> 00:00:55,910 that I'm going to call out here because honestly, we 16 00:00:55,910 --> 00:00:59,390 can do so much better than this if people don't like it. Haters going to 17 00:00:59,390 --> 00:01:02,490 hate. Make any money from my personal blog. So it's a really nice. 18 00:01:07,370 --> 00:01:10,970 Hi and welcome to another episode of Websites Made 19 00:01:10,970 --> 00:01:14,170 simple with Holly Christie. That's me. I am a website 20 00:01:14,250 --> 00:01:18,090 designer, a website designer mentor and I 21 00:01:18,090 --> 00:01:21,930 am here to help you have a career that you absolutely love. 22 00:01:22,410 --> 00:01:25,850 All without losing your mind or dropping the ball. 23 00:01:26,760 --> 00:01:28,680 You ready? Let's get started. 24 00:01:33,480 --> 00:01:36,600 So today I particularly wanted to tackle 25 00:01:37,080 --> 00:01:40,840 these things I really, really wish we would stop doing on 26 00:01:40,840 --> 00:01:44,680 websites. And by we I mean you, because I stopped doing this a very long 27 00:01:44,680 --> 00:01:48,280 time ago and my website's got a heck of a lot better 28 00:01:48,360 --> 00:01:49,640 for it. So. 29 00:01:54,840 --> 00:01:58,620 Number one, and this be a tricky one 30 00:01:58,620 --> 00:02:02,260 because this could be a client directive but 31 00:02:03,140 --> 00:02:06,700 over animating everything. Oh my 32 00:02:06,700 --> 00:02:10,300 goodness. You know when you're scrolling on a website and the text 33 00:02:10,300 --> 00:02:13,660 appears and then the images fly in and then you have this and then you 34 00:02:13,660 --> 00:02:17,220 have that and then you scroll down the page and something else happens and every 35 00:02:17,460 --> 00:02:21,300 part of the website is animated. First 36 00:02:21,300 --> 00:02:24,940 of all, it's not a good end user experience. Now 37 00:02:24,940 --> 00:02:28,720 I'm sure that you probably know that people report that 38 00:02:28,720 --> 00:02:32,440 it can make them feel a little bit seasick as well. And it 39 00:02:32,440 --> 00:02:36,040 can be a frustrating experience because sometimes people just 40 00:02:36,040 --> 00:02:39,360 want to get to the information. In fact, I recently 41 00:02:39,600 --> 00:02:42,920 did a webinar with Jo Watson who is an 42 00:02:42,920 --> 00:02:46,680 incredible copywriter and we really talked about we 43 00:02:46,680 --> 00:02:49,920 don't need to see the thesis, we need to know, you know, the highlights of 44 00:02:49,920 --> 00:02:53,600 something and how we can buy it. And it's harder 45 00:02:53,600 --> 00:02:57,000 to navigate and get to that if things are 46 00:02:57,000 --> 00:03:00,360 swooping in and flying out. It just, it does not 47 00:03:00,680 --> 00:03:04,240 give a relaxing experience for people. So animate, 48 00:03:04,240 --> 00:03:07,880 occasionally animate small areas. 49 00:03:08,040 --> 00:03:11,400 Like sometimes if I have kind of a container with testimonials drop in, 50 00:03:11,560 --> 00:03:15,280 I might put them together so they're like puzzle pieces, so they drop 51 00:03:15,280 --> 00:03:18,600 in and out into the side and stuff. But it's an animation that happens once 52 00:03:18,920 --> 00:03:22,740 and once on a page as well. So if you do have to animate 53 00:03:22,740 --> 00:03:26,020 stuff, try and go for once per page. 54 00:03:26,420 --> 00:03:30,140 Trust me, the users who are going to be going on that website, they 55 00:03:30,140 --> 00:03:33,300 will thank you for it. If you have a lot of animation on your own 56 00:03:33,460 --> 00:03:36,580 website, turn it off. It is not something 57 00:03:37,220 --> 00:03:40,860 that people think, oh, I love the animation on that. You know, 58 00:03:40,860 --> 00:03:44,500 this is what's going to make me buy from that person. It just doesn't happen. 59 00:03:44,900 --> 00:03:48,630 And a positive side of it is that you will see 60 00:03:48,630 --> 00:03:51,830 your Google page speed scores go up as well, because animation 61 00:03:51,990 --> 00:03:53,190 slows things down. 62 00:04:00,470 --> 00:04:04,270 My second thing I absolutely would love to 63 00:04:04,270 --> 00:04:07,590 see the back of is really funky menus. And 64 00:04:07,750 --> 00:04:11,310 trust me, I am someone who loves experimenting, I love 65 00:04:11,310 --> 00:04:15,090 creating, I love playing around with these things. In fact, when 66 00:04:15,090 --> 00:04:18,850 I did my simply sites, when I first set them up, gosh, nearly four years 67 00:04:18,850 --> 00:04:22,610 ago now, I had really funky menus in them especially. I 68 00:04:22,610 --> 00:04:26,090 had particularly one that was a shop and it had like the 69 00:04:26,090 --> 00:04:29,010 logo kind of in the middle of this header image and it had a menu 70 00:04:29,010 --> 00:04:32,170 that kind of expanded and kind of looked a bit like an ice cream cone. 71 00:04:32,170 --> 00:04:35,970 It was perfection. Every single person who bought that template, and a 72 00:04:35,970 --> 00:04:39,530 lot of people bought it, were like, I can't really get the menu working. People 73 00:04:39,530 --> 00:04:42,290 don't know how to look at this and they can't get back to there or 74 00:04:42,290 --> 00:04:45,970 whatever else. And I went on to do some research and 75 00:04:46,050 --> 00:04:49,650 it was that people and Google and the other 76 00:04:49,650 --> 00:04:52,770 search engines want a menu that is 77 00:04:53,090 --> 00:04:56,770 predictable. This is at the top of the page which 78 00:04:56,770 --> 00:05:00,530 has proper names on them, like home, about 79 00:05:01,250 --> 00:05:04,330 services, contact, that sort of thing, 80 00:05:04,330 --> 00:05:07,970 testimonials, rather than things like praise or good thoughts 81 00:05:07,970 --> 00:05:11,490 or vibes or, you know, whatever people are putting out there. A 82 00:05:11,490 --> 00:05:15,330 traditional header menu will always, always do you 83 00:05:15,330 --> 00:05:19,090 really well on a desktop version of a website and 84 00:05:19,090 --> 00:05:22,890 actually even a tablet version of a website. These days with the 85 00:05:22,890 --> 00:05:26,530 resolution of tablet screens. When we were first designing for tablets, 86 00:05:26,530 --> 00:05:30,170 like a million years ago when they first came out, we would make 87 00:05:30,170 --> 00:05:33,970 the tablet menu very similar to the 88 00:05:33,970 --> 00:05:37,770 mobile menus and that's because the resolution on tablets were quite 89 00:05:37,770 --> 00:05:41,280 low. So it kind of worked better. But now you just get amazing 90 00:05:41,280 --> 00:05:44,960 tablets and they should have that expanded desktop menu as 91 00:05:44,960 --> 00:05:48,560 well, something really traditional. I mean, 92 00:05:48,800 --> 00:05:52,440 people are always going to have a difference of opinion on whether you 93 00:05:52,440 --> 00:05:56,240 have home about services, blah, blah, blah, contact or whether 94 00:05:56,240 --> 00:05:59,200 you have home services, blah, blah, blah, about contact. 95 00:05:59,840 --> 00:06:03,600 For me, I'm quite traditional. I like home and about. And we know 96 00:06:03,680 --> 00:06:07,410 regardless, that people do not navigate websites 97 00:06:07,410 --> 00:06:11,250 in a linear fashion. They don't start particularly in a kind of 98 00:06:11,250 --> 00:06:14,930 country where they read from left to right as well. They don't start with home 99 00:06:14,930 --> 00:06:18,730 on the left and work their way through clicking everything until they get to contact 100 00:06:18,810 --> 00:06:21,370 on the right. You know they're going to jump around. And actually, if you have 101 00:06:21,370 --> 00:06:24,970 a proper link structure, which I'm going to talk about in this episode as well, 102 00:06:25,130 --> 00:06:28,730 it particularly means that people won't be navigating in 103 00:06:28,730 --> 00:06:32,050 a linear fashion as well. Use your 104 00:06:32,050 --> 00:06:35,860 creativity to get creative in other places 105 00:06:36,260 --> 00:06:38,580 and leave that menu at the top of the page. 106 00:06:43,860 --> 00:06:46,740 Speaking of the top of the page, please. I 107 00:06:47,140 --> 00:06:50,740 personally, this is the hill that I will die on. Every 108 00:06:50,820 --> 00:06:54,260 website should have a sticky menu. No exceptions. 109 00:06:54,660 --> 00:06:58,460 There are so many websites out there like that I land 110 00:06:58,460 --> 00:07:02,170 on weekly that you go on the website, the menu looks 111 00:07:02,170 --> 00:07:06,010 great, you scroll down the page, the menu's gone. You get about halfway down the 112 00:07:06,010 --> 00:07:09,010 page and you think, oh, this isn't the right one for me. And you have 113 00:07:09,010 --> 00:07:11,770 to go all the way back up to the top to get the menu. No, 114 00:07:11,930 --> 00:07:15,690 you really, really need to make it sticky. It is a really small 115 00:07:15,849 --> 00:07:19,570 change. It's a massively quick win. It gives a 116 00:07:19,570 --> 00:07:23,290 better user experience and people are going to stay on the website for longer 117 00:07:23,290 --> 00:07:26,930 because of it, because they can easily navigate without having to put 118 00:07:26,930 --> 00:07:30,690 in extra work, extra scroll time of going up 119 00:07:30,690 --> 00:07:34,210 to the top there. I know it sounds like just such a small, 120 00:07:34,290 --> 00:07:37,970 kind of petty thing to really go on about, but it makes a massive 121 00:07:37,970 --> 00:07:41,330 difference in how long people actually stay on your website. So 122 00:07:41,490 --> 00:07:45,170 really do make it something that you go on to do. 123 00:07:55,570 --> 00:07:58,740 So now we come onto the proper link structure and I, I 124 00:07:59,300 --> 00:08:03,060 was so delighted to have Nikki Pilkington, who is an SEO 125 00:08:03,060 --> 00:08:06,820 specialist, on a webinar with me recently. And if you'd like the links 126 00:08:06,820 --> 00:08:09,220 to any of the webinars, do get in touch with me at 127 00:08:09,380 --> 00:08:13,100 helloebsitesmadesimple.co.uk. i will be delighted 128 00:08:13,100 --> 00:08:16,740 to share them with you. And Nikki is a really 129 00:08:16,820 --> 00:08:20,540 big player in the SEO industry and she was talking 130 00:08:20,540 --> 00:08:24,150 about one of the most important things that you can do for 131 00:08:24,150 --> 00:08:27,390 SEO purposes is to have a proper link structure on your website. 132 00:08:28,110 --> 00:08:31,590 And remember, when we look at links. We're looking at linking 133 00:08:31,590 --> 00:08:35,270 text from one page to another. We're looking at buttons. They're 134 00:08:35,270 --> 00:08:39,070 also links. We're looking at your navigation menu, your 135 00:08:39,070 --> 00:08:42,430 sticky navigation menu that's at the top there. Those are also 136 00:08:42,510 --> 00:08:46,190 links. Also, think carefully about 137 00:08:46,350 --> 00:08:50,110 whether you choose to have columns that link 138 00:08:50,110 --> 00:08:53,950 on clicks, whether you choose to have images or videos that take you 139 00:08:53,950 --> 00:08:57,770 somewhere else when you click, or whether you choose to have icons that take you 140 00:08:57,930 --> 00:09:00,810 somewhere else when you click. I am again 141 00:09:01,610 --> 00:09:05,050 going to be quite old school here. I've been in this industry a really long 142 00:09:05,050 --> 00:09:08,690 time and I am going to say for SEO, for 143 00:09:08,690 --> 00:09:12,490 accessibility, for search engines, but for your user experience 144 00:09:12,650 --> 00:09:16,330 on that website, you really need to make sure 145 00:09:16,490 --> 00:09:20,290 that what people click is very, very obvious. I was on a 146 00:09:20,290 --> 00:09:24,030 website the other day, someone had really nicely 147 00:09:24,030 --> 00:09:27,790 laid out icons, you know, a column with an icon in it and then the 148 00:09:27,790 --> 00:09:31,590 content. And you had to click the icon to get 149 00:09:31,590 --> 00:09:34,950 to the content, but it didn't tell you that you had to click the content. 150 00:09:35,270 --> 00:09:38,790 I only knew because I'd hovered over it and then of course, my 151 00:09:38,790 --> 00:09:42,110 cursor changed to tell me to do that. That's really bad for 152 00:09:42,110 --> 00:09:45,750 accessibility. It's really bad for your SEO. It's a really bad 153 00:09:45,750 --> 00:09:49,600 user experience as well. And I know it can feel frustrating to 154 00:09:49,840 --> 00:09:53,280 have to put a button or a link text or something like that, 155 00:09:53,600 --> 00:09:57,440 but if you think how many people go on websites who actually have 156 00:09:57,680 --> 00:10:01,040 issues, maybe with fine motor control or they have 157 00:10:01,200 --> 00:10:04,800 vision issues, something like that. We want to make sure our websites are as 158 00:10:04,800 --> 00:10:08,640 inclusive as possible. Not just because Google would 159 00:10:08,640 --> 00:10:11,920 like that, but because we have a moral responsibility to do so. 160 00:10:12,240 --> 00:10:16,040 So do make sure you have a proper link structure all 161 00:10:16,040 --> 00:10:19,620 across your website and your users will thank you for it. 162 00:10:19,780 --> 00:10:23,460 Google will reward you for it. And you will have a really good, 163 00:10:23,460 --> 00:10:27,180 robust website as well. You're just going to have to check those links regularly 164 00:10:27,180 --> 00:10:29,620 to make sure they all work all of the time as well. 165 00:10:38,020 --> 00:10:40,980 We are all guilty of this one. And I am going to throw my hands 166 00:10:40,980 --> 00:10:44,020 up and say, I am guilty of this too, particularly if I'm on a dev 167 00:10:44,020 --> 00:10:47,220 site. And I will go back and change it and go for consistency. 168 00:10:47,860 --> 00:10:51,500 Just chucking any old image into the website and you think, oh, I'll just 169 00:10:51,500 --> 00:10:55,180 try this here. And you don't label it and you 170 00:10:55,180 --> 00:10:58,540 don't reduce the size of it and you don't compress it, and it might not 171 00:10:58,540 --> 00:11:01,780 even be a relevant image either. And 172 00:11:01,940 --> 00:11:05,660 that's something that I've done myself. And then I have to Quickly 173 00:11:05,660 --> 00:11:09,380 kind of comb through and take out before I send the website live. 174 00:11:09,700 --> 00:11:13,300 And I'll often do it if I am testing 175 00:11:13,690 --> 00:11:17,410 an image or a concept or a design. But of course what happens is I'll 176 00:11:17,410 --> 00:11:21,250 put something in there to test it, and that's going into the database 177 00:11:21,250 --> 00:11:24,730 and the size with the labeling, with everything else it has in 178 00:11:24,970 --> 00:11:28,290 regardless as to whether I go and use it. And I don't want my database 179 00:11:28,290 --> 00:11:31,690 to have a lot of irrelevant images or a lot of really large images. 180 00:11:32,010 --> 00:11:35,690 What can often happen will be that a client will then 181 00:11:35,690 --> 00:11:39,370 say, oh, yeah, that's great. And they sign off that section. You think, oh, brilliant, 182 00:11:39,700 --> 00:11:43,340 I'll move on. That image gets completely forgotten 183 00:11:43,340 --> 00:11:46,460 about. All your website will be webp images and then you'll have a couple of 184 00:11:46,460 --> 00:11:50,020 JPEGs or PNG files that are just hogging all the space there, 185 00:11:50,260 --> 00:11:53,820 just providing that kind of inconsistency there as well. So make sure 186 00:11:53,820 --> 00:11:57,620 that the images that you use, that they're relevant, that they're 187 00:11:57,620 --> 00:12:01,260 the right size, that they're compressed, that they're the same right 188 00:12:01,260 --> 00:12:04,980 format, and that they have been labeled correctly as well. 189 00:12:10,600 --> 00:12:13,880 My final one, and it's a biggie, I'm gonna say that 190 00:12:14,280 --> 00:12:17,320 is inconsistent design. So 191 00:12:18,040 --> 00:12:21,559 we can, as creatives have a tendency 192 00:12:22,280 --> 00:12:25,960 to think, I want to try everything or 193 00:12:25,960 --> 00:12:29,800 this, oh, I read this bit in there about section and it would be so 194 00:12:29,800 --> 00:12:32,690 cool to do this thing here. I've been there. 195 00:12:33,410 --> 00:12:37,130 Luckily, I tend to go there with like my personal blog or 196 00:12:37,130 --> 00:12:40,850 something like that. And I think, well, you know, if. If people don't like 197 00:12:40,850 --> 00:12:43,890 it, haters gonna hate. I don't make any money from my personal blog, so it 198 00:12:43,890 --> 00:12:47,450 doesn't really matter. But when it comes to websites you are 199 00:12:47,450 --> 00:12:50,930 building for people to get work from and in the industry and 200 00:12:50,930 --> 00:12:54,370 stuff, you're gonna want to be really consistent with your design. 201 00:12:54,530 --> 00:12:58,380 I mean, obviously in an ideal world, we all work with 202 00:12:58,380 --> 00:13:02,180 a brand kit as well. So we all have direction of what we're doing 203 00:13:02,180 --> 00:13:05,980 with the design. The brand kit should be more 204 00:13:05,980 --> 00:13:09,420 than just the logo and the hex colors for the brand. 205 00:13:09,820 --> 00:13:13,220 The brand kit should have any icons you're going to use or 206 00:13:13,220 --> 00:13:17,060 suggestions for icons. It should have backgrounds if there's going 207 00:13:17,060 --> 00:13:20,700 to be things like gradient backgrounds and all different things like that. 208 00:13:21,260 --> 00:13:24,900 It should have a mood board in there for the style images 209 00:13:24,900 --> 00:13:28,190 and the vibe and the feel that you're going for. And of course, it should 210 00:13:28,190 --> 00:13:31,790 have the font files as well. So it should be 211 00:13:31,790 --> 00:13:35,630 this really robust document that you work off. And if 212 00:13:35,630 --> 00:13:38,950 you have clients who come or you might have your own 213 00:13:38,950 --> 00:13:42,590 websites and you think, I've done the branding myself, I don't 214 00:13:42,590 --> 00:13:46,350 have a whole brand kit per se. There is nothing stopping 215 00:13:46,350 --> 00:13:50,150 you from creating a brand kit for yourself. And if 216 00:13:50,150 --> 00:13:53,910 your client doesn't have one, it's really good to kind of get 217 00:13:53,910 --> 00:13:56,640 them on a call and just talk them through the concepts of, of some of 218 00:13:56,640 --> 00:13:59,840 this stuff and ask them to put a mood board together as well. 219 00:14:00,080 --> 00:14:03,840 Yeah, they can do that on Pinterest. They can add different kind of 220 00:14:03,840 --> 00:14:07,280 images and colors and blog posts and stuff like that on there. 221 00:14:07,600 --> 00:14:11,240 And it is going to make working on their website so 222 00:14:11,240 --> 00:14:15,040 much easier for you. It's going to give all of you a better experience 223 00:14:15,200 --> 00:14:18,760 as well, because you're all kind of working to the same vibe and it's going 224 00:14:18,760 --> 00:14:22,400 to provide that consistency that can sometimes wander off when we don't 225 00:14:22,400 --> 00:14:26,110 have these kind of really tight, controlled outcomes there as well. 226 00:14:26,430 --> 00:14:30,030 So make sure your design is super consistent as well, because 227 00:14:30,110 --> 00:14:33,910 it's one of the big things that Google, your search engines are 228 00:14:33,910 --> 00:14:37,710 looking for and they're looking for these based on. Yet 229 00:14:37,710 --> 00:14:41,510 they know how people are navigating websites, the websites 230 00:14:41,510 --> 00:14:44,910 people are clicking through, spending time on, the websites people are 231 00:14:44,910 --> 00:14:48,190 buying from, and they know that consistency 232 00:14:48,430 --> 00:14:52,260 is one what gets people staying on websites. And so it's one of their 233 00:14:52,260 --> 00:14:55,620 criteria for SEO is a really good consistent design. 234 00:14:56,100 --> 00:14:59,420 So that's all from me today. Feels like a bit of a grab and pee 235 00:14:59,420 --> 00:15:02,380 episode, actually. It feels a little bit like, ha. These are all the things I 236 00:15:02,380 --> 00:15:06,060 hate people doing on websites. I would love to hear 237 00:15:06,060 --> 00:15:09,900 from you about what you hate people doing on websites as well. What 238 00:15:09,900 --> 00:15:13,500 things really irritate you? I would love to know whether you 239 00:15:13,500 --> 00:15:16,510 agree with the stuff that we've talked about today. 240 00:15:17,150 --> 00:15:20,950 Which one's the one that you agree with the most? For 241 00:15:20,950 --> 00:15:24,390 me, it's always going to be the menus. Always, always make sure if you take 242 00:15:24,390 --> 00:15:27,870 anything away from this podcast, go and make those menus sticky. 243 00:15:28,190 --> 00:15:31,870 And until next time, have a great time in your website career.