 Okay, just a minute. Next year is going to be a reciting year for me. I'm not going to talk about it today, but this year has been the year that we've each called me Ricky Gervais. So just a minute. I'm not Ricky Gervais. Yeah, but then everybody sees my face. Okay, I'm a programmer most of the time. So it's nice to get the opportunity today to talk about something that's not all technical. It's more about how you can improve websites through very simple actions. It's kind of designed, it's usability, it's logic. It's using your own experience as a web user to improve the experience that you want to visit as well. One of my things I'd love to do, if you don't want to talk about it, is to go to very beautiful places like this. So I've spent a lot of time going up mountains and going to view my site here on that little map to take a look at the photos. And so the particular focus that I've got today is with a few tourist websites. What are you making the website? The first thing you need to do before you even start, and we're not talking technically just in general terms, is you need to have priority. That's the priority of the website that you're going to be making. The first priority that you have is that you need your visitors or you need to allow your visitors to get the information that they're looking for, or to complete your task as quickly as possible. Everybody is stressed. Everybody has no time. Everybody's using their phones while you're sitting in front of the CV. That's the first and primary priority. That's it. That is in fact the only priority when you're making the website. Because what else is a website for? To achieve that, to share information, or to allow people to complete tasks. That's it. It's not difficult to work out what you need to do. The technology is different, so nobody's going to be using WordPress or using something else. Obviously you're using all the back-up and technical problems. That's kind of a tool that you're going to use to achieve those things, but that is your priority. It's very fancy that people come to your website because they like what it looks like and they care what your website looks like. They care how well that they can use it and how they can understand it. You're confused. It doesn't matter that it looks in half a second. It doesn't matter that you've got a slide on the front page. It doesn't matter that you've got a video. It doesn't matter that it works on your mobile phone. What matters is, if you get the website, it's technically perfect. It's the fastest website you've ever seen. It doesn't matter if you can't use it, if you can't look at how to use it, because after a few seconds you'll be like, you know what? I'm just going to go and find another website that works more easily for me. When you're trying to achieve number one, think number four. Everybody here uses the internet aside from their data. What annoys you when you burn information? If you're trying to find out time tables or you want to know what time to shop, then you need to know how to get time. What's the thing that gets in the way of doing that? What's the thing that every day you go, that's so nice? Cookie bangers. Cookie bangers? What? Don't think there's a shit about cookies. What? Nobody cares about cookies. That's a fallacy. You're obliged to do it even more and more and more, but that doesn't mean that you need to have a bannier that's blocking you from doing stuff. That better works out for clients at the beginning of the year, and it looks really, really good. It's a really good design. It has lots of heavy videos, but it doesn't matter because their clients are sitting in offices wearing suits and ties. I'm a super fossil internet connection, coming to look at what offerings they have. Too much work. Too much work? No, too much work. What happened was you went on the site, really well designed, we had full topography, I had the gradients in colours and everything, and a cookie banner walked me in the entire head so you couldn't see my face. The cookie banner on it says, this website uses cookies. By using our website, you're accepting that you're going to use those. And the next word is a button that says, accept. What happens if you don't click on that? What happens if you click on little x, or what one of the buttons says, no I don't accept. You go to the next page, and you look in the browser console, there is a cookie set. It doesn't say anything. It's a bad solution. It's not about the technical side, I don't know what I'm talking about today. It gets in the way. So if you're thinking about designing a website, building a website, using a plugin or whatever, look at it and see if you go into that website with it, it doesn't get in the way. Everybody thinks that the cookie banner is a solution. No, it's not. You just need to have someone on the page visible to every user that cookies are being sent. If you don't agree to it, don't use my website. Be clear about what you're trying to communicate. But it doesn't mean that if you need to add things to your website for legal reasons, then it has to get in the way of everything else. Everybody, everybody hates pop-ups. If nobody wants to subscribe to a newsletter, that's the first time you go to a website. No. If you go to a website and you agree to the article, you go, this is really good, and then right inside there's a course of action that says, subscribe to my newsletter, then you fill out how you subscribe to it. That's great. But if you try, if you try and force people to subscribe to the newsletter, all that will achieve is they go to another website. Okay. It comes off some websites. Four websites, three local, one not local, the reason why we're playing together. I'm not a very fan of slides, so we're just going to switch straight into the browser now. And what I'm going to do is just look at these websites that I've got up here to say what works well on their website. What have they done? What have they solved correctly? What did they improve? They have here the website, the tourism website, the full-screen website. Now, I'm not going to go to, let's have a technical approach. I'm just going to go as an Indian user. Sorry, an Indian user. I'm wondering too. Okay. I searched with OBA. You don't know where it is. Don't know how to get there. Click on the link. My browser is set to English. And I see that. Okay. Who can tell me what's bad about that from number one? It's French and English. It's French and English. Yeah. I'm going to the website. I think you want all these other websites that I go to. They automatically switch into English more. Or they're all in French. I can't understand that. I've got somewhere else in the website. You can't always translate every website you make for a small group of people. Here, you've got the trendy thing in Switzerland. There's a little bit of English on your website. You can do it cool. One thing that really bothers me about the website is that very often you cannot, you just cannot find this switch for another language. And you have to search everywhere in the menu. Then you have to scroll all the way down. Yeah. Exactly. So, go. Where's the language that you want to take? In the photo. Scroll down. The problem with the menu is that it's not wide enough. You have things on the left. Okay, 10 seconds. You've lost your phone. You can't find it. You said, right, the menu's too wide. That's going to stay on the website. I think it's good. The browser was wider. The screen that I'm looking at. I don't know that one. I didn't see that. It was a complete page. Okay. Can you see it now? You've got a switch language. Well, I've seen it before. Yeah. What does that mean? French. Yeah. Have you heard of it? You know that as somebody who's involved in the Eastern industry. My mum would know that. What does that mean? French? She'd say, I don't know what it means. Done. Okay. So, I can't look and I can switch to English. Now, any business CMS allows that to happen automatically when you go on the website. It automatically says, this browser is English, so I'll show you the English page. It's not difficult. You don't have to program it. You just do it. It works. So there's no reason why they couldn't consider the amount of visitors that they're likely to receive on the website. It makes sense. Okay. So, I know, I've heard the name, it's all over the, in the press, in the press, there's a complex to go, skiing and everything. This is obviously the right season for skiing. I want to know about skiing for the coming season. How do I get, where is this, what's the point you're going? Okay. So, here on the left-hand side, very, very small as a little button, not even red, this sort of half-red, it says winter. So, we're going to this page, and now on to the page. Okay. I can go and get drunk. That's a good sign. So, this page here, you know, this, it's not bad, but it's kind of the problem with, I think the bootstrap starts with this idea, originally, with a jumbo trunk. It's a, that's three, and they think it's all important information, the first thing you see when you scroll. Now, everybody scrolls. There are lots and lots of reviews and reports and everything that people have analyzed this. They've done AB testing on this kind of stuff. And the simple thing is, when somebody goes on to that website, because every single website has that type of idea, now everybody knows you have to scroll down. But just by my actions scrolling down, that's one action I wouldn't need to do if I could see here a little bit more information rather than this great big image. I don't want to go skiing. I know I'm thinking about going to a vocation. So I don't need a massive photograph of somebody skiing. I know that this is beautiful. Most people will be looking for accommodation levels and prices and all this kind of stuff. Ticket prices is pretty good while it places us in the middle again. It's with that sort of transparency effect. It looks okay. It looks quite modern stuff. It just means it's a little bit more difficult to find when I click on it. That was a short content. I thought it was a little bit more significant than what we were told and not suddenly the searing t-shirt on the ceiling. So we'll go back to the previous page and we'll go down and see what there are. I'll get to know the results back to you every time. See you next time. Now I haven't prepared this. I haven't looked at this website before. I haven't looked at it briefly, but once before. So I'm not being very critical. I'm not saying this even published this first time. Just as an average website for a tourist place in Switzerland. So you've got 10, 15 seconds to load. And again, I've got a great big picture of somebody skiing. Thanks for that. Anybody here hands up who goes mountain biking in winter? Good luck. Once we get past the obvious kind of content problems, which isn't technically real, it's something that you must forget what people are actually looking for. Does that actually make sense? What would make more sense here is to optimise this area and make a priority in the winter because that's what you're looking for. You can have something on the side of the page that says, OK, by the way, there are in the summer in the spring as well. So all this information is further down at the end. So far, I've checked three times. I'm impressed. Oh, this looks nice here. Yeah, that's good. I've got a card. I don't know what that is. Web TV. Maybe. OK. Special offers. Any sign of any special offers here? This looks under our specials. We just take it out. I'm being rude that's not true. But I'm going down here. OK, let's have a look at the clock. I'm assuming that's some sort of discount card. OK, again, the spirit of the image. Tell me the people who have been there. Yeah, OK. That's the fourth time you've told me that. Register online. So when I look at that, we're now clicking. We've got this banner here on the English Web site. Why is it in French? Now, when I look at that, obviously, again, as I've just said, we can scroll down. We can find out more information about the spending space there on the screen to show you the prices. What is that? What is the cost? Best price guarantee. OK, good. Find out roughly in the right area. Different prices, I can choose what I want to go to. I don't have one because I don't see direct access as such. That for me is one of the first things you should see. Telling you, what should I buy and what makes it interesting for you. OK, there should be right at the top of the page. So now I'm going to click on the logo because I've got used to the idea that the logo is on Facebook. And what you suddenly notice is you're not even on the phobia website anymore. You're on a different website. So that is very, very confusing for people. And here again, you've got another navigational problem here. Firstly, you've got red on blue, which is incredibly bad. But the zero is almost invisible to my old middle-aged eyes. How many hands up do you hear German-speaking Swiss people who like the fact that you're using the German flag? To indicate the German, to indicate the French. I didn't think so. Any French Swiss here like the French or French French. What do you use? This Irish man isn't so happy, you know. Yeah. Sent it again. And it's always going to be back. If you want to take one second away from the stage. So ever, ever, ever, use the flags with nothing to do with language. OK. So we'll use the back a bit. We'll use the good old-fashioned back button on the main website. OK. So we'll try a different approach. We'll go back to the home page by clicking on the logo. Hopefully we get to the right place this time. Yes, we do. Resulting useful information. Wow. So much useful information. I'm going to sit down. I'm going to sit down and read all of that immediately. OK. Where is Serbia? destination, what might make one very well hidden. OK. Again, confusing. That's why is it something you want to start? OK. Scientific HTML file. Not bad for performance. Good hearing. Lots of text. Yeah, normal. Yeah. OK. This note now seems to be a video. Great. OK. How do you go by train? Do I have to fly? Do I have to get a bike down? I mean, this is all quite difficult. It's all quite difficult to find out this information. To find out the basic information, obviously, not on this website, but on another website in Germany, Switzerland. I did, I ran a quick test. I know where the place is. You find out how to get there by public transport. It took me 25 minutes. And I've been using the internet as a programmer and concept for 20, 20 years. And it took me half an hour to find out how to get to this place. OK. Imagine that you've never even heard of Switzerland and you just think, oh, people say it's nice, so I want to go and have a look at it. Have you got the patience to try and really say, you know, half an hour, half an hour, just to find out where the phones are? Not a bad idea because it means that you've got immediate links. So once you've been to the website a couple of times, they're very useful. These icons actually make sense. You can probably work out what they are. And if you want to get those icons to the top corner, what they are. Hi. Yeah. They can put tables with a lift. They can put tables with what they want. Yeah. So that's it. Do you make websites? Or less? So, why does it show me a very good place to be? Don't get me wrong, I'm not criticizing your opinion because you just said off the top of your head what that is. So I need one. I'm going to do that as a boss. So when I play I'm going to see something about a boss. I don't see bosses. I don't see bosses. I don't see bosses. Really annoying. You have to be a little optimistic. This is a kind of French or Swiss romantic way of expression. You want to use the know both the pictures are great. Beautiful. Yeah, that's it. I mean, Switzerland sells it. You don't have to have a reason to come. To spend twice or three times as much on theater as to go to France, which is just as beautiful. Advancing It doesn't cost you a lot, that's a good visiting from abroad. Scroll effect. This is like walking through a minefield, this website. Every time I move to now something else, oh, what's up, what's this? They look awesome. But if you were to use it for this website, it would be so annoying. It's annoying to me, I've kind of flipped this website a little bit, so I'm used to it. But even when I'm used to it, every single time I go anywhere near that menu, it says, here's 40 options of each, if you want to look at next. I don't have 40 options, I just want to know what time the bus is at. Just wait. You've got a webcam here, on the page, and it's telling me what time it is, thanks, but it's telling me it's on the top of it, on the top of it as well, what's the point? It's helpful to know how accurate that picture is. Because I can't count the amount of times I've gone to a webcam, looked at it in the Windsor, and seen a picture from the autumn there, and there's not much smell there. So, enough shooting, verbiage down in flames. The next one, Golden Pass. Who knows the Golden Pass? Nobody? Yes. Yes, or you will sleep? Yes. I've heard that the Golden Pass is a thing to do in Switzerland, I have to go and do that. For those people who don't know what Golden Pass is, anyway, here's the Golden Pass, without reading any details on that thing, watch this one over here on that page. Magic, because you've got the seconds, the second slide, not the first, the second, suddenly showing you a nice golden train. And all this information is within Pass's screen, it's saying for a few seconds and whatever, and I'm looking, they're going, oh, that looks nice. What's that going to, oh. Where did that go? I don't know, I'll put it on again. Okay, I'm going to set it up to do with trains. Now, I'm going to leave you, I realize that most people will work out, okay, that's one of the places you can go through with a train. What is it though? Go to Lines, and anybody who wants to see on that map that there's an engine that's like a monster. On my page, you have to wait for this website, and then suddenly it goes, that's where you have to come in. Okay. So, again, it's a bit confusing, the logic is that we need to understand. Yeah, exactly. Now, let's assume you don't want to improve the word, you want to see stuff, you want to have a nice slide, a nice new page, that's fine, that's no problem at all. But just think, next time you do it, think that you're using this website, looking at it on screen, that size, and you're trying to read the text, and then all of a sudden it goes, think about it, if you can't do an overlay effect, if you can't fade in and fade out. Because it's usually fine on a little laptop or on your phone, which as we've heard, is today more than 50% of people in sorts will use their phones more often than not. But if you're using a slightly bigger screen, if you're looking at the map or if you're looking at a video, that's constantly reeling in, if that thing suddenly shifts across your iMac screen in what, 300 to 600 milliseconds, that's going to hurt your eyes, especially if you keep doing it. And especially if there's no way of stopping. So if you're going to use one of these, think about princess, stop, pause, is there a way to do an overlay effect or actually make it short, so it won't stop in an hour. Okay? So, apart from that, this website's not bad at all. I would say it needs to say a little bit more than what you've asked. When you scroll down, you've got all these lovely great graphics. It tells you what they are. Chocolate, right? No, yeah, chocolate. Ah! There's no chocolate. Give me chocolate. I can't. I can't click on it. You've got to go somewhere else to search for it. So that's a bit of a shame that it's not my end for you. Okay? View our office. Now, for me, I think that's a little bit more important than that. Because that's just one destination that you could go to, but I'm traveling from Interlochen by train. So that doesn't really interest me that much. You get a lot more tourists that come across the country on the train than want to go up to that place. Because my French is negative, I'm not going to try and pronounce it. Okay? So down here, I've got these offers. That, I think, should be a little bit higher up. Again, why is it in French when I'm on the English website? If you're going to have a lot of English on the internet, it's going to be a little bit lower. But don't translate off to that because it's just normal. All it is, that's the logo again. Tell me about another place. Passage gallery. Anybody got any opinions on that? Is it 1996? What you've got here is a nice attempt to actually show you how nice it is. All of the train there, but you're looking at big gallery images which are showing how nice it is. It's very nice that they're using their customers' pictures. I'm showing you what we're doing open. We're not just showing our professionally done photos, we're showing real photos. But if you've got a lot you don't need to background it. It's just confusing because it's coming that way. It's just as a photographer that's just like, that's nice and that's dropped off. It's okay. But the fact that there's all this green stuff going on in the menu is really, really confusing. If you were to turn that website with perhaps your different colours, you've got no chance of it. So just think about what different types of people are going to be visiting inside and not think, okay, we're going to show how nice it is by putting a really beautiful picture and then covering this stuff so you can see it. It's a waste of time. Well, maybe on top of that, we'll open up with the network console. The image is caching is off. Don't worry about the JavaScript errors or something else altogether. Okay, that's on that page now, most websites these days have this kind of very heavy image content because they don't get people to come visiting them. Our menu between 10 and 20 megabytes are the ones that I've mentioned. There's no point. You've got two techniques. One, there's so many pictures on the front page, put one on the nice gallery page, put one on the page which is more appropriate to this restaurant or mountain station. Lazy open. So the first one's there. You've got your page up. Half a second, less than half a second if you've got a good caching system. And then maybe a few seconds before it's ready to go to the next slide, then on the picture, when the image is loaded, then change to slide. So you've got massive performance improvement. We'll go to another page quickly. Deals. Again, there's not so much on that page. Sorry, too quick. If I look at this, you've got deals you can interact with it. That's all fine. You've got one, two, three, five, 15, 18, 19 teasers. We'll call them teasers because it's supposed to be a little lighting to come for something else, but that's why they're off the long page. See how heavy that page is? 10 and a half megabytes of images. Just images. The entire page, not much more. So that's not so bad. Now let's try four times slow down. So say we're on a three-G network or a slow, you know, seven seconds are surprisingly not bad, but that's something you need to pay attention to. Now if you're not developing your foot-making and design or if you're making content to this page, that's something you need to perhaps have a good look at as a control. Look at how it's opening on browser data. See, you've got that in Chrome, you've got that in Firefox. Just see what the effect is and how long it takes. Anything as we go down this day, here anything more in one or two seconds is too long. So you need to figure out what's the information back at all to one page. That means that the average side-width of what I see is about ten percent probably ten percent of everything on the page. So it's just too much information. Okay, again, language switch. They use the flag, but we can't play the mic. What's the point? Perhaps the show is in Switzerland? Maybe. Language. Oh, okay. China. China is simply for you. Isn't that great? Anybody else speak Chinese? Should that all be Chinese? Okay. Right, so just as an example now, that's it. I'll just let it iterate before I go into the next bit. This is not, this is not, it is not. This is a website in Germany speaking Switzerland, here where I live. That's their website as it was about a year and a half ago. That's their website as it was sort of three days ago. So not much has changed. At the top, the important things at the top. So if they design again, you don't need to have a background. What's the point in showing two percent of the place. Back then, their idea was all about the summer season, showing how beautiful it is. That's all fine. No problem. You can see that. So some information about a new paper cost system that the people in that region knows things since it's last break. I thought we could go off this page, still the same thing, summer season, and now they're proud of their new paper cost. That's what we thought. Now, again, when I go onto this website, I want to find out, this is just a screen job, by the way, I want to find out information about tickets, find out, I want to buy a voucher as a gift for something I can work out about what's going on in the winter and find out how much it costs and all the different things. So from that point of view, the front page is very well-organized so that you can actually, again, what would make more sense is surely if you go to that page, you can see the information without doing anything. That's better, isn't it? Saves you a click. Saves you this two or three seconds again. You have to wait. You've got two or three seconds to wait in this life. That's not redesigned. It's just moved stuff around from the website and put it there so that when I go to the home page, I've got all the information that impresses me. Oh, that's nice. It's a really lovely view. That's a really lovely view. So yes, we've got more to go there. Where can I go there at the moment? The last game calls are quarter to six this evening, so maybe I'll wait till tomorrow. It also shows me that there are two paper calls, one from each side of that bridge. I'll just go hiking today. Yeah. The two calls are open. I'm going to click on the link and then I can see more information about parking calls. Events that are coming up which are going to say, again, this is free found. That's really cool. I'm going to check to find out more information. As soon as there's upcoming events, which again says come and visit, come and visit. Navigation, again, for the back. I can't remember if that's a drop-down menu or if that's in time. But it's quite limited. Although, we're just moving stuff around. You can pack quite a lot of space into that scenario if you do it properly. Think about it. If you wanted to go there, what would you want to know if we knew about anything else? If you want to go to for example, what's the first thing you want to find out? Is there anything special going on? Can I go on the boat, on the lake? What's the weather like? And all of these most important things are up in the top corner in the navigation. Now, these drop-down menus are very useful for people who like designing menus. That's about the many people that have it. Most people, it's just too much information. They want something simple, tickets, order a ticket. You can use the personal web app. You can do all the reviews so that you don't even have to leave the page to all your tickets and entire process runs on one page. And also, if I look at that page, somebody says, oh, you must look at Mannequin. Why? Yeah, it looks nice. But what about it? You don't just need a picture. You need that. You need to get a text to explain why. What is it? Where is it? How do I get there? And that is literally what three sentences which says, what is it? How do I get there? You're trying to do that with icons and a drop down menu and a lovely, very good map. You just confuse people more. You just use a text. It doesn't really not use text. You'll have to write text. Okay? And again, the thing I said about the live count is, here, without even doing anything, I can see it always a bit greater. I don't need any more updates today. I'll leave it for another day. And I can also see lots of letters today at 10 o'clock. Now, that's a screen. On my laptop, I don't have to touch this. There's only off those very, very small thumbnail images on my sloppy larger image. The circle size of that page is probably about 120 kilo writes if you're optimizing images. So that's between 10 and 50 times smaller than an average but you see what exactly what you need to do. Okay? Mobile version I've run out of time pretty much, I think, so that's just kind of the same idea. Mobile is the same website, but through it because of the design, the structure is different. If I want my phone to be able to see what's going on, quickly expand and close information directly to the navigation to the other information I need. So that's the kind of that's the main thing. Give the people what they're looking for now. Don't wait 10 seconds. Give them what they want now. And then if they need to want no more information, there's few bits as possible. If people have to get more than twice to go and find other information, it's not a good website. It doesn't matter how beautiful it is, it's not working out as intense as it is. That's all for that topic. The WordPress community is very, very strong so I'm very excited to see how many people are on this today. There's all these exciting conversations and discussions going on. We have those kind of things all the time in Slack. WPCH.Stack.com in England because we're English, German, French, Italian, but rather a much worthy life. It doesn't matter. It doesn't matter how much sense it's going to give you an answer. So go by, sign up with your WordPress all-wheel address and if you don't know what it is, go by. It's a great project to have some journey. Thank you. The presentation, I really liked it. I would like to come back to the first website, please follow together. I think you'll agree that you always struggle to find the menu of the languages. You said that it's nice. Bad idea. Drop down this bad idea. Yeah, it's the best. From a user point of view. It's a great project. It's out of the wish for people. Everybody speaks German. The German website now. Writing text. Or at least as a denim if you haven't got much space, then right, Deutsch, France, there's no need to abbreviate. You don't need to abbreviate. Thank you. The presentation, would you have any best practices around the use of menus on websites? I'm going to keep this very short because I have a very strong meaning on this. Most websites don't have menus. Now that sounds quite strange, but that if I'm considering a new website for something like a place like this, I don't think that this website needs more than eight to ten pages in a little previous. If you've got a great big drop down, I'm going to be on the Verbia website. There's too much. Who's going to look through that menu? Nobody. I can see the work. I can see the website with the menu. Who's going to read that? Nobody. If you've got something here, you come on the front page and you say, oh my god, I can click. Here's the path. Here's a little map. Here's a PDF. You don't need the menus for that. You just click on the teaser. And there's a website on there. If you want to force your clients to go in a certain direction, then you can do that by placing on other pages very targeted path. Then on the side here, on the side path, I've got a little teaser saying, here's how to buy a ticket to go hiking. Here's a special office for hiking. So you can choose in terms of content what you put on your pages without having an automatic menu, which is the same on every on every single page. All you need is that if you use to spend 15 minutes on your work, some kids have been lost, they don't know how to get back to the these great, great dropdown. And you used to be on your own pages. We used to go on side map pages. Never used it to mean why everyone wants to sign up on every single page. Never used those. Everybody's confused because I'm really convinced of that fact. So the smaller than any the better is my best practice on a single page. Thank you. You are waiting for us. And then to the audience. Thank you. Thank you. Thank you.