Nathan Wrigley: [00:00:00] Welcome to the WP podcast, bringing you the latest news from the WordPress community. Welcome your hosts, david Waumsley, and Nathan Wrigley.
Hello there, and welcome to the WP Bill's podcast. Once again, it's episode number 234. Entitled M is for menus. It was published on Thursday, the 17th of June, 2021, my name's Nathan Wrigley. And as always a very small amount of housekeeping just before we begin head over to WP Builds.com. That's the website where we keep all of our content.
We do produce a bit of content. We produce the podcast, which you're listening to that comes out on a Thursday. And then we've also got the, this week in WordPress show, which I do with my good friend, Paul Lacey, that we do live 2:00 PM UK time. Every Monday, you can find [email protected] forward slash live or in our Facebook group.
And we put that out as a blog post and a audio podcast, and indeed on YouTube as a video that comes out the following day at 7:00 AM. So two things for you each and every week. If you'd like to be notified about those, the best way to do that is to go to WP Builds.com forward slash subscribe. I'd love it.
If you did that, join our newsletter. There's also links on that page to our Facebook group, Twitter handle and so on and so forth. So that's WP Builds.com forward slash subscribe, pause the podcast now and go and get yourself on that newsletter. Also, I'm trying out a bit of an experiment. I'm not exactly fed up with Facebook, but I'm just curious to see if a different alternative might be a bit of fun.
And so I've set up an open source bit of software, which is called Mastodon. You can find it a WP Builds.social, and indeed that is a URL. WP Builds.social. It behaves a bit like Twitter, but I was just wondering if it might be possible to get some of you guys in and have a dedicated WordPress conversation over there.
There's probably only about 25 or 30 of us at the moment, but if you want to join in WP Builds.social, what a strange URL that is. So WP Builds.social, and you can join us over there and see if it's something that you like. If you'd like to find a WordPress deal this week, head over to WP Builds.com forward slash deals.
It's a bit like black Friday, but every single day of the week, searchable filterable list of coupon codes for specific products that people have reached out to us provided coupon codes. Just for you. The WP Builds listeners. Should you wish to have your product or service put in front of a WordPress specific audience?
You can use WP Builds to advertise on and you can find out how to do [email protected] forward slash advertise a bit like AB split test of Tom. Do you want to set up your AB split test in record time, then you AB split plugin for WordPress. We'll have you up and running in a couple of minutes. Use your existing pages and you can test anything against anything else.
Buttons, images, headers, rows, anything. And the best part is that it works with element or beaver builder and the WordPress block editor. Now I can get a free demo AB split test.com. Oh, Kelly. episode 234. That's what you've come here for. M is for menus today. I'm chatting with my good friend, David Walmsley.
We're going through the list of the letters in the alphabet and we've arrived at em. And we've decided that this is going to be menus. There's actually more in this than I possibly suspected because once you dig into it, there's all sorts of things on offer here. Accessibility, whether or not you should think about things mobile.
First. What about the size? What about the way that you set it out? Should it be a fly in menu or some kind of drop down menu are mega menus. Besters absolutely loads we could have gone on for hours, but we didn't. You'll be pleased to know. So I hope that you enjoy this episode. If you did shout out to us on Twitter at WP Builds, or like I said, join our little master on installation, WP Builds.social, or just give us some comments at the bottom of the post.
I hope that you enjoy it.
David Waumsley: [00:04:14] Hello. It's another eight as ed of we're pressed the series where we attempt to cover all the major aspects of building and maintaining sites would WordPress today is the letter M for me.
Nathan Wrigley: [00:04:26] Oh, very nice. You snuck
David Waumsley: [00:04:27] up on. Yeah. Yeah. I got that from big bang theory. Become my dodgy joke section this isn't it.
Yeah, no more please.
Nathan Wrigley: [00:04:36] That's your you've had your ration of one rubbish joke for this episode.
David Waumsley: [00:04:42] When people said that I wanted to be a comedian, they laughed. Oh no, one's good now. Oh Bob Monkhouse is
Nathan Wrigley: [00:04:52] right, honestly,
David Waumsley: [00:04:53] no more. Yeah. Back to the subject. So menu, so we've got a format for this.
We're going with the menu format. So we're going to start off with a small aperitif, a preamble. But, uh, what we just need to say a few things about menus and what we're covered here. And that really is that menus are so important that we thought this needed a topic of its own because really no one gets anywhere on the web without well-organized links.
And I think it's key to all the websites that we build,
Nathan Wrigley: [00:05:22] the kind of thing that you never really think of. You've got to do it, but it doesn't really in my head at least have the importance of other parts of the site. Cause you concentrate on the bits that are right there in front of you, visually, the header and the footer and the fonts and the spacing and the white space and all of that kind of stuff.
And yet the bit that most people are going to interact with is the menu. And yet usually it's just some standard font, try to put the correct number of items in a set, some colors that might be a different harvest state and you're done, but really it's the bit, like you said, it's the most important bit of the site in terms of getting from a to Zed and it's.
Quite unlikely that they're going to get to your site and be in exactly the right place, certainly for you know, for a large website, they're probably just going to search for something, re arrive at a random page via a Google search, and you want them to go from there to get to where it is that you want them to go.
So it's terribly important. Yeah. And I
David Waumsley: [00:06:19] think there's a lack of research. We were talking earlier about the accessibility side of things getting menus, and we still not sure about certain things. And there isn't really the statistics. There is a great person out there. The guru of web page usability, Jacob Nielsen, who with Don Norman has the at end group where a lot of us refer to, which has a fair bit of data on menus.
And they're quite vocal on it. But even there, you can't find a great deal on certain things. So let's move on to our starter course, which is really usability. Shall we? So we were talking first about the number of items that would be. Ideal to have in your menu. And I think this is something that Jacob Nielsen's mentioned, but I've known it from psychology, that there is this magic number seven, which is the people are different, but it's the amount of information that you can chunk anything over seven is considered as a bit of an overload.
So the ideal of your menus is to get them below the number seven.
Nathan Wrigley: [00:07:25] So this has got nothing to do with the space on the page. This isn't that you could generally speaking fit seven different words on the top of your website, let's say next to a logo or something. This is literally to do with what typically the human brain can cope with.
So if you show them 15 things, they feel a bit bamboozled and are likely to just wander off and get a bit, a bit lost. But if you show them seven, that seems to be the sort of upper limit of what they can cope with and take in. And the, I can, the, I can suck in that information quickly and easily.
That's fascinating. Yeah, just information
David Waumsley: [00:08:00] overload, the idea that something is easy to navigate around if you keep it under that number. And of course it does vary from individuals and there's been experiments in psychology on the S. And so it, ideally you would want to be going to five or six if you can, but then we get into this and we were talking about this before about a standard order of items that we might have in our menus for pages.
And I've certainly gone with, we debated this, whether we have home as an actual link in your menu, as well as the logo or the icon being clickable to home.
Nathan Wrigley: [00:08:38] I don't have any research on this. I just have my own proclivity, which is that the logo is always home and I've had enough clients tell me that.
Okay. We've got limited space. Can we just use the logo and it's yeah, of course that makes perfect sense. But you could well be right. Maybe people are still searching about looking for the home icon and I guess as well, it depends maybe you reduced the size or the importance of the logo on certain views.
Perhaps if it's on mobile, your logo kind of almost shrinks to insignificance and the menu takes over and in those situations than the word home. Would be important. My feeling is that on a menu where let's say you've got a letterbox shaped logo and you've then got the menu items on the right.
And you've got seven of those. They're starting to crowd each other out a little bit and the logo is getting constrained by the actual, the structure of the menu. And in that situation, I think the first thing to be sacrificed is the word home. I've experimented with changing that out for a little house icon, the kind of icon where it's just know roof and on a door in the front of the house.
And so on that people have been generally happy with that. But I, I go for, don't put the home icon sorry, don't put a home icon and don't put the home text and just have the logo as the home bond, which you don't do it that way.
David Waumsley: [00:10:04] No, I'm still fearful of it. I think the last thing I read on this that was a bit of research still goes back to something like 2014, maybe even 2013, where they still predicted that up to 50% of peoples didn't know the tradition of being able to click on the icon.
And I can still see that happening amongst my in-laws on the web. They still don't go to that. They still don't know it. And even stranger, my old colleague who used to build websites with, and she still builds the occasional website doesn't seem to do it. Doesn't link her logo to home. So she needs it.
So it's still there. People are out there. Whether it's, that's going to be your audience is probably going to be the key thing when determining these things given there's no real research, but I play safe and put it there as a standard until. Until there's an argument,
Nathan Wrigley: [00:10:58] otherwise. Yeah. I would say that in the case of your colleague, she's definitely missing a trick.
Whether or not she has the word home or not is, you know, something you could debate but not putting a link in the icon for the logo or the image for the logo or whatever it might be. That just seems wasted because there's going to be a proportion of people who will expect that. So you might as well use it and no,
David Waumsley: [00:11:20] I use it as an example.
It's just that, she'd been building websites before I was back in 2000 and then she still uses the web a lot. And you would have thought something like that with the stock. Maybe she's just stuck in the past and that's why she doesn't do it. But I do see there are people who just don't know that convention, so they need
home.
Nathan Wrigley: [00:11:38] Yeah, yeah. And then the course there's the order. Of the items. Again, I don't know if this has come from research or if this is just the way that you've seen it a thousand times, so you just copy it. But typically I go for the home being the logo and then everything that the logo occupies top left in most cases, and then everything goes horizontally to the right.
So the usual items, and I'm not really that bothered about the list of items and what order they go in so long as contact comes at the end. So the far right is contact, although that could be replaced with a telephone number or something in a bottom or something else.
David Waumsley: [00:12:24] Yep. I've got the well I always think of about, is an important page.
I'm always convincing people. They should do it because it's, again, research suggested that it's the second most visited page after the homepage. Because it's where people find out whether they can trust the organization they're dealing with. So I think it's always a key thing to have, which a lot of people miss out, but so I go home about, and then it will be the service or the product.
And then if the blog is going in the header, which often these days, it seems to make more sense. Cause it's just for traffic to stick it in the footer. Because it might not be your main business, getting people to read your blog, but it might be a way of getting in traffic, but anyway that's the next thing.
And then it goes to contact and then it will be the. Call to action button, which you mentioned was the telephone. So it'd be the same thing. If it's a form that I want them to fill in, that may be, have a pop-up to a form to get people, to take some action. Yeah.
Nathan Wrigley: [00:13:22] Contact us or something like that, some clear invocation to do something and yeah, it could be a telephone number or something.
Do you use the word blog?
David Waumsley: [00:13:34] Yeah,
Nathan Wrigley: [00:13:35] I do. What do you do as well? And I'm just curious as, people like my parents' generation, I don't think they would know what a blog was. I think they'd probably just avoid that. Cause it's like some sort of mysterious technical word. Whereas if it said something like, I don't know, newsletter or posts or something, they might be a bit more inclined to understand what it is.
But certainly I think my generation and down, younger would totally get that. It's just curious, but I think you're right to put it there because it links to, to all of the content. And if you are spending time making your blog something useful to your business from an SEO point of view, just don't relegate it to the footer, have it there in the main menu.
David Waumsley: [00:14:13] Yeah. It just depends really. I think sometimes, if you're trying to, you don't want to distract people from your call to action, then encourage them to go to the blog. As part of your main menu is one item you could get rid of, because if your blog is only there to get picked up by Google and they will find that separately, then I want to out the main menu.
So it there's a decision I think, to be made dependent on what you're trying to get out of it. But yeah, but I don't like when people put news because it's soft and, people wanting to use the blog as a way of just giving you information about themselves, rather than in a good content marketing, right?
Nathan Wrigley: [00:14:52] Yeah. One thing we've missed off there, I guess if you've got a product. Then pricing would be quite an important one because certainly if I go to a, let's say it's a web app or something, and I'm, I'm assuming that this thing is going to have a a monthly component of paying attached to it.
That's more or less the first thing that I do actually, I'll just check out the homepage to see what the service does. And then I'm instantly going to go to the pricing page and fully expect that to be in the main menu. Probably the second item, along with pricing, I don't know, features, something like that.
David Waumsley: [00:15:27] Yeah, there'll be me with most of the stuff that we would buy. Um, so it'll be home to take a look at what basically is there and what it does, and then it will be probably pricing to see if I can afford it. And then over to the about page.
Nathan Wrigley: [00:15:40] Yeah. Yeah. Cause you'd like to check them out. So that's interesting.
Isn't it? Depending on what it is that you're doing, you're going to have a different permutation of those menus, but there is basically some kind of structure built up through history and it usually involves home about pricing service, blog, contact, call to action and so on. Yeah. Yeah.
David Waumsley: [00:15:59] Yeah. And I think we're right to use that.
Conventions just make it easier. If there's anything that's become a convention from other sites, use it because if the majority know that it's just gonna make navigation of your site easier. So I'm really big on trying to stick to anything that I think will
Nathan Wrigley: [00:16:14] help. And it would be totally possible to come up with a really wacky way of interacting with the menu.
We'll come up to that in a minute, drop-downs and so on. But the point being that why confuse people, don't make me think it goes back to that. And if, yeah, whatever is traditional and whatever is familiar whilst it might not be artistic and it might not have the kind of Ooh, that's curious, at least it's obvious.
And if you are hoping to, I don't know, sell things online or encourage people to read things that you're creating online, I guess it's better to just stick to something obvious. And the things that we've suggested so far are obvious we've missed off the possible. Becoming more important over time item, which is the search, which often looks at the end of them and you as well.
David Waumsley: [00:17:04] Yeah, that's a key one. I don't get to use it much because most of the sites I do are simple and WordPress's search. Isn't very helpful. So you need to do some work to make that work, but yeah. Yeah. It's a, yeah, a really important one. In fact, perhaps more important than the rest, if you've got a lot of content.
Nathan Wrigley: [00:17:24] Exactly. So if you've got a huge site, I don't know, it could just be content or it could be e-commerce or something like that. I think search is. Is probably the best item that you've got in the navigation, because, they might land at your website and see that you sell a thousand and thousand and one sofas, but they just want to get to the gray three seater warm then yeah, you could go through all the menus and figure out where all the sofas are and then click the color picker and decide which one you want.
And I want the three seats of variation and all that's possible. But if you could just type three seater, gray sofa into the search bar and you get right there that I just think search is such an important thing. Again, just like you. I don't really use it all that much. And my experience with WordPress searches that out the box, it doesn't deliver the most sensible things that, that I would have imagined it to just before we started recording this, we were coming up with all sorts of ways that we thought search could be improved in WordPress.
David Waumsley: [00:18:24] Yeah, God, I hope it's something. Now react is part of WordPress. It would be so great. If it can use that kind of technology to improve search down the line. That I'd be so happy if they did that. I have played with those other plugins that you've got relevancy and I think better better WordPress search, I think is the other big one out there.
But relevancy, I remember this is going back, so things may be different, but it was something that would really blow out your database. It would need to store a lot of information to, to deliver.
Nathan Wrigley: [00:18:56] Yeah. And of course you've then got to worry about the archives for search and things like that.
But hopefully you're doing that anyway, but yeah, it more important than ever. Usually I see that's just like some sort of microscope icon or a text field, which says search in it and you then click into it and so on. If you, if you click the icon, whatever, then often things go fade away into the background and the search box comes in and you start typing.
And whether that's Ajax or not, doesn't really matter, but that's increasingly, I think, going to be important, decent search in the main navigation.
David Waumsley: [00:19:33] So Jacob Neeson, he says drop downs the bat.
Oh,
Yeah. Well, I, I've never quite understood the, his viewpoint on this. This is going back way back in 2010, at least he was doing some research on that stuff, or maybe actually much earlier than that that they, we organize our information in kind of lazy ways with drop downs.
So there's always that difficulty, I think, with drop downs where people don't necessarily know where the top item is, the clickable one, or whether you just, when you hover over that, the down to the only ones you should consider. And so I think that's a first point of confusion with drop downs, mega menu.
You see which Jacob Nelson thinks is good. Doesn't have that. When you hover over a mega menu, that's never clickable, is it? I think
Nathan Wrigley: [00:20:25] that's the case. I'm curious as to what you do here. Cause I know what I do. And that is to, especially with the advent of the phone, I feel that the. Th there's a difficulty in engaging the dropdown if that's a link.
So yeah. If you're going to click on something and it reveals three or four items below it, you don't really want that to be clickable because the thing that, obviously on a computer, you can have the, the icon can change. It can go to a sort of finger. I can, the hand icon and it, that's more obvious, but on a mobile device, you've obviously got the concern that they would then click on an item.
Whereas in fact, they just wanted to open it. You can obviously have the little down icon to the far, but to me, that's just another level of confusion to me. That item is to open the other things, not as a clickable link, I'm going to get shot down for this. I'm sure.
David Waumsley: [00:21:21] I I'm the same. I am good to make it, but that's not the case with other people I see on the web and also my colleague as well, she would use the top menu as a link to a main page and the rest would be sub menu items of that main page.
For me, it was just a way of bringing up the dropdown. So you could make your choice. Is that, are you saying the same as me?
Nathan Wrigley: [00:21:45] Basically? It's not a link. It's just the link to open the items below it. That just seems to me to be the most sensible way to use it, because if it's trying to do two things, that's confusing but equally it's confusing if it's just trying to do, if it's, if it looks like it might be a link that's confusing as well.
You know, I guess you've just got to come up with you, you are any kind of ways to make it obvious that this is not going to do anything apart from open the menu, but the opening of the menu in my eyes should be enough to indicate, oh, that's what that did. Yeah. Yeah.
Sorry. Sorry to interrupt.
Why does he think they're bad?
David Waumsley: [00:22:24] I think it's mainly because it, wasn't a way of organizing content in a hierarchy that people could understand. So drop down menus generally get used to just dump information under this one category. And there's no hierarchy to it where with mega menus, they're usually sectioned off into categories of information, which a more ordered.
So I, to be honest, I've never fully understood his argument and some of the research, some of the write-ups that they do, even though they're experts in that I often feel they seem to be, it's not so much research led, but more opinion led. Oh, I
Nathan Wrigley: [00:23:03] see. I think I'd misunderstood. So drop down menus, bad mega menus.
Good.
David Waumsley: [00:23:09] Yeah, it's basically the it's the here is the Jacob Nielsen perspective for the NN group with Don Norman. That's tends to be what they find. I love that challenges. I wouldn't take everything they say literally. It's going to depend on the design, but I do see the point where dropdown menus generally are just dumping.
It's just because they can't think about how we might navigate how someone might take a journey. It's the easiest thing. Isn't it? Just to stick a whole bunch of links, do a general area. In fact, I've seen lots of people do this very badly, so they don't know where to stick something. So they may stick terms and conditions say under the homepage link or something or about it doesn't make any sense.
It's just sticking stuff in drop downs because you've got it. And it's easy to do in WordPress. Isn't it?
Nathan Wrigley: [00:23:57] Yeah, I guess the thing here is that mega menu as well, really well on desktop. In fact, I remember the first time I saw one and I can't actually remember the website that I saw it on, but I remember seeing one of these mega menu and it was just text it wasn't filled with anything.
Elaborate. Like you can do, videos and images and so on. Or there was virtually no color. It was just, I think it was like three or four horizontal menus. Sorry. Yeah, vertical menus arranged horizontally. And I remember thinking Ooh, that's nice. And then I remember trying to copy one in just pure CSS.
And I told you that when I actually finally did it, it was like, oh yes, I've actually achieved something, a value here. And I felt really proud of myself, but I guess with the advent of the mobile phone, trying to pack as much as you would get on a desktop into a mega menu makes that whole thing so difficult to manage.
If you've got 40 links. In front of you on a desktop, you can totally pass all of that. And you can figure out where you want the mouse to go, but on a mobile, that could be like four or five view ports with, of scrolling. So different use case. And as, as mobile has now taken over as the dominant platform for searching, the web feels like mega menus of well on mobile, especially have maybe had their day a bit.
Yeah.
David Waumsley: [00:25:22] Yeah. I, I find to keep the, I'd like to avoid mega menus as much as possible. There's a real trend now for stylized mega menus where you do put other media in that. And I just think he, I'm not, I'm just not sure about that kind of stuff. I don't think it's a good idea in the menu area,
Nathan Wrigley: [00:25:39] taking up, you want people to click on links, not watch a video necessarily.
I know, and some of it is just, it's just, oh, we can do this. So let's do it. But it feels to me like we have arrived at the notion that. Basically a menu is a tree of items, a tree of nested items, you've got the top level stuff and then everything below that. And I think WordPress does a really good job.
And I know that the WordPress menu system hasn't been updated for a long time. In fact, I arrived to WordPress when it was how it is now. I can't point to any change of any merits that's changed in the way that you organize the actual WordPress menus. Since I started using WordPress, you've got those little rectangular boxes, you search for something, you Chuck it in the menu at arrives at the bottom, you drag it into place, nest it, which can be quite awkward still.
And I've never tried that on mobile. How easy is that on mobile? No idea. And, and that's it. And you save it, give it, give that menu and name and then put that menu somewhere in your theme. And I still think it's pretty good. I've got no real gripes about it. The only thing that we were talking about that might be good is to be able in the menu item to be able to.
So to link menu items to search terms. So for example, in the case of my gray sofa that I mentioned a minute ago if you had a, I don't know, a sofa page that was specifically for particular things, would it be okay to say actually, do you know what, when searching for things that Google analytics tell me, people are searching for, can you just send them to this page please?
And I think having that in WordPress core would be quite nice.
David Waumsley: [00:27:24] Yeah. The only, I think the only thing that made it a little bit more confusing than WordPress, and of course it's, that's going to change again, is when they introduced the customizer. So you've got another route into changing your menus or creating your menus in WordPress to the traditional one through a parent's menu, which is the one I always go to.
So there was that. And then of course, as we're moving away from the customizer with full site editing, we've got another change coming up. But otherwise yeah.
Nathan Wrigley: [00:27:53] But yeah. Having multiple places to do the same job is a bit, it's a bit awkward, isn't it? I like you. I never use the customizer to change the menus.
I always just go to a parent's menus and fiddle with it there just because it's a richer space to do it and you can really see what you're doing and the options are fuller. You can just see what's going on a little bit more, but then of course you can also change. The location of the pages within the editor, you've got a choice of what the parent is and where it sits and so on.
And that's a good way to set it up, but I failed just doing it all in the one place. So I would never set the menu where it belongs in the menu and never teach to clients where to put something in the menu within the post itself. I always tell them to go to the menu, the appearance menu, after they've published it and set it up at that point, just because it's easier to see what's going on and you can obviously rank it.
I want that one first, second, third, whatever. It's just easier.
David Waumsley: [00:28:51] Yeah, absolutely. A few other usability things that I stumbled on, these are my bug bears, really. So when I see in the main menus, the links that will take me off the site, I hate that if I'm not given some kind of indication, some kind of icon that will give me some information that we're going to need a external link.
The interesting thing about the web, there is no HTML symbol for external link fate, odd thing.
Nathan Wrigley: [00:29:23] We've got the, we've got the one which is commonly in use, which looks like a little square with a little arrow going off to the right. And I infer now what that means, but I'm you know, I use the web a lot.
I think most people would just see that as it's an icon. I don't know what it is.
David Waumsley: [00:29:39] Yeah, but there isn't a standard. No out, no you're ready. You can use it. It's just, I always think why isn't it really created that, but yeah. Anyway um, w we'll just talk about some other things that were listed here.
Hamburgers, do people understand those,
Nathan Wrigley: [00:29:54] You mean the actual hamburger in the, the thing that you eat or not a great deal of understanding of actual hamburgers, they're just meat in between bread, but yeah, I do. I, it was curious cause we, we disagreed on this a bit as well in that I fully assume that everybody knows what the hamburger menu means.
And of course it means justify. Justify texts left and right. Is what it means.
David Waumsley: [00:30:24] In fact, I don't even, I'm not even sure I understand the hamburger. Cause most of the time it seems to be beef,
Nathan Wrigley: [00:30:29] right. So it's okay where we're really off. But I just assume that everybody now gets that if you see that little icon on a webpage buried in a menu, you understand that's the menu. But I would imagine that it's true.
The themes that are use, present you with the option on mobile, probably even on desktop, to be honest too, to have that icon, but also to have the word whatever words you choose, maybe you'll choose navigation or menu or something like that, but you could replace the icon with a word, but also you could mix and match.
You could have the word with the icon, but I'm just pretty sure that as time goes on, That the hamburger icon is going to mean menu and everybody will get it.
David Waumsley: [00:31:18] See, you're quiet. You don't quite out there. You're quite radical for me, UCI. There was something, but again, the research on this isn't up to date.
So when I read something on those that people didn't get the hamburger that started me using either a combination or just preferring they menu button that says menu because of, the worst certainly kind of research, I think about four or five years ago, which indicated that a lot of people still didn't get it.
Nathan Wrigley: [00:31:46] That's absolutely fascinating. Cause it's just, I really did assume, but I am not the typical person. And in Nora you were just live on the web. And so we probably see it dozens of times each week and it became, I don't know. I think probably it was driven by my mobile phone. Android uses it all over the place.
I'm sure iOS has something similar. Certainly Chrome use it as the waiter. They used to have a little wrench icon didn't they? That was their way of invoking the menu and then they replaced it for hamburger. It seems like the best bet. In that. Yeah. Let's not, let's not come up with something new.
Let's just push the hamburger menu as the one that we're going to use instead of coming up with something else. But yeah, if I see that top right on mobile, I know that's what it's for. Yeah.
I
David Waumsley: [00:32:29] think you're probably right. I think it's, everybody should know now. People are used to having a mobile, so I'm sure my research is that date, but I'm still very cautious with these things.
Something which I don't see built in, certainly not in BeaverBuilder has a default for their menus, which I used to use all the time before, when I went to a mobile or tablet view, I would still just believe in the links in. So if there's only under seven links there, I would just have those links underneath each other to click on.
So none of this extra stuff, none of this hamburger stuff, or it just links back
underneath.
Nathan Wrigley: [00:33:07] So what you would collapse. So when it collapsed a mobile view, the menu would just be open. You'd see all of those links.
David Waumsley: [00:33:15] Yeah, exactly. So the logo would be often go to center and then the links would just be there.
So maybe it would just be stacking as three and three, if there's only six of those and they would just that's it. So, um, and that was the way I did things with Genesis before, because I think that was the default behavior with that. Yeah. And it, you don't see that much these days. And I think I understand that.
Yes, you can still see your items, the names
Nathan Wrigley: [00:33:41] of them. I think it's, I'm seeing more and more these full screen mobile menus where you click yeah. In this case, the hamburger and, everything fades in the background up comes something and you've got your menu item. And either there's a little indication that this maybe it's swooped in from the left or the right.
And there's a little X and it will drag it away. Or there's a little bit of the actual website revealed in a bar on the left or the right hand side. And you click that and makes them a new go away. That's that seems to me the. The way it's going, that probably would be my favorite way of doing things.
Just some sort of fly out menu because you can pack a bunch in there and it's scrollable, but all the while that the website's living behind there somewhere as opposed to something which is sticky at the top, that you then deliberately have to, I don't know, you've just got limited size or it consumes the entire page.
I like the idea of being able to see that the website is nested somewhere behind it and you can make the menu go away. But I
David Waumsley: [00:34:45] still like the idea that those traditional links for me, I'm not, I don't use the mobile much. So in my experience is probably not to be trusted, but the idea that your page loads and then you see the logo suit and know where you are, and then you see the names of those links.
When I have to click another button to see what's on their site. Just what I mean. Yeah, I do. So what you mean? It's just links. It's just, it tells me what's there, so if I just want to know about products I see it straight away and I'd just go and click on that. I don't have to click on something then to find out what products
Nathan Wrigley: [00:35:16] is listed.
Yeah, I guess it just depends on the amount of links that you've got there, but it's curious. You showed me some nice examples of different ways of tackling menus on different device sizes. And the one thing that kind of stuck out was something that the BBC and other websites do in the, the, the narrower the menu becomes.
So in other words, that the narrower, the viewport. So if you're on desktop, you get the full experience with all the menu links and they're all there. And as you go down to tablet, some of them will obviously drop off, but the menu on the BBC website, They will rearrange the importance of the menu items.
So what was false might become second? So for example, I don't know about, or pricing might stay on the menu, but everything else will go to its own little dropdown. So the far right menu item is replaced by a dropdown. And then if you narrow it some more items just to pushed into the dropdown, I think that's a real really ingenious way of doing all of it.
Yeah. Without having to consume the whole screen with some kind of fly in menu, you just, but you've got to make really careful decisions about which items stay on the screen and which go into the menu. And then there's a button which only looks like a dropdown. And that just invokes that, that menu of all the hidden items.
David Waumsley: [00:36:39] Yeah. Yeah, no, I think there's some great work. All the big, this article features a bunch of top sites and how they've got that. So British heart foundation, BBC and the guardian newspaper the world wildlife fund, they've all got a very clever mobile first, you know, they expand, you get more items.
As you move out. So that's the way the article's gone and it's pretty clever, isn't it? That they put certain items under the more so the less, less needed.
Nathan Wrigley: [00:37:12] Yeah. And in some cases like in the guardian one, they really make that icon stand out. So the, so when you go on to desktop, there's all the items are there.
They're there for you to see, and you can click on any one of them when you get down to mobile. I think you've only got one or two little items, the most important ones. It's probably like news and sport. And then they've got this really contrasting bright yellow circle with the hamburger menu in it.
And you can't help, but see it, it really stands out. And I think that's quite an ingenious bit of, UI UX to make that work. And I'll presumably the guardian have kept it for many years. It's working for them. Cause I haven't seen change it recently. No
David Waumsley: [00:37:55] give.uk is probably the most interesting because whatever you've got, you've just got search bar.
Nathan Wrigley: [00:38:01] Yeah. That, that's interesting as well, because that site can you imagine, I've got, so in the UK we have gov.uk and it covers literally everything that you could interact with the government on. So I think a menu would be massively frustrating because you're bound to get it wrong.
Not only would you not use the right search term for the thing that they, sorry, not only would you miss understand where you're trying to get to, but you'll have to go through 14 layers to get there. So I think they're probably relying on Google quite a lot, but also rely on their own search capabilities.
If you need, I don't know, pensions advice, you just want to type in pensions and go. So yeah. Fascinating, no menu at all. Just search in. Interesting. Yeah.
David Waumsley: [00:38:47] Yeah. It's the, it's the only website that's ever won then the major prestigious design award. Uh, so it's, it's a real piece of work and it's nothing to look at.
It's just functional,
Nathan Wrigley: [00:39:01] really functional as well. Cause during during the recent COVID outbreak, we've had to use it to submit tests and it's brilliantly done. You know, the buttons that the fonts are clear, easy to read that there's loads of spacing between the items, the buttons that you need to click are clearly marked and they are massive and obvious.
And the, the check boxes that you've got to tick when you've ticked them. It's so obvious that you've ticked them and you really can't go wrong. It is a masterpiece actually. I remember filling out the first time we had to do that and getting to the end of it and thinking, I can't imagine a way of making that experience better.
They did it really well. It's brilliant. Yeah,
David Waumsley: [00:39:44] maybe they're leading the way. Maybe we're talking about menus and there isn't menus should be gone. It should be all search or what you mentioned to me about a voice activated. That might be the
Nathan Wrigley: [00:39:53] way of the future. I think so I think that, slowly but surely on my phone, obviously this is the mighty G the mighty Google.
There's so many things that you can do with that voice search. Now, obviously we really don't have those capabilities baked into our websites yet, but that will come. But the idea that you've got a mass again, using my gray sofa analogy, if you didn't have to go through menus and you just literally click the microphone icon when gray sofas and mop came, all the gray sofas, that's so good.
Obviously massive amounts of usability problems there. You know, you need ways for people to use the website that don't require voice, but it does strike me that in the future, those kinds of capabilities will become more and more used.
David Waumsley: [00:40:44] Let's just mention accessibility, shall we?
Because I think that's key. I played around, I don't know if you have, with those tools that you've got, which will take you with screen readers, I've downloaded some of those and, um, yeah, it's really frustrating going through menus if they don't allow you to skip the menu. So you land on you, you've moved to your page where it tells you how you can get to that page again.
Really annoying. If your theme doesn't do that, I think most do allow you, it's just built in, allow you to skip the menu section. But yeah, if that's, if you've used a screen reader you definitely want it. And
Nathan Wrigley: [00:41:21] it's, it just demonstrates immediately how incredibly frustrating it must be for people who are trying to use the web.
Who let's say, for example, they like struggle seeing things and that you're relying on it to read things out. So many problems with those kinds of things, just getting to the right item, knowing where you are, knowing what the current thing that you are on, he's intended to do. And I feel that this piece is getting talked about more and more.
Yeah. As the web has matured, we realized that this is something that we need to deal with because a lot of the things have been ironed out already. This is a real area for growth in the future. And unimportance, and people purchasing websites, I think will come and they'll have this as a, as an item on their, um, their laundry list, more and more, even down to the moms and pop stores, because, they're just going to start to know that this stuff matters and it's legal.
David Waumsley: [00:42:17] Yeah, exactly. There's more suing going on over these things. And it tends to be an afterthought, even with page builders, even with beaver builder, that some of the the icons that you can put in menus and stuff, they haven't got RV, a hidden or the option to be able to change it or say what the icon is about if it's meaningful.
So if you're using icons in your menus, you don't want the screen reader to have to read out what that icon is. You want to disguise that because it's only visual it's decorative. And if it's something that has meaning such as a link to social media, then you need it to read out and tell you what that icon does.
And, and it's often an afterthought. I think it still is with a lot of the prebuilt stuff for
Nathan Wrigley: [00:43:00] WordPress. Yeah. Yeah. But, I guess we can hope that in the future, as people are using the web more and more, this stuff will become more and more important. But I think you're right. An afterthought would be the right, the right word for it.
The state of play at the moment.
David Waumsley: [00:43:16] Yeah, I think we will get more of this. I read something today, actually about the fact that there is an organization which are submitting, what's the word for it? Complaints about cookie legislation. So mostly, GDPR came out and most people ignored it.
And I think the same thing is happening with accessibility. People are getting a much more active about websites these days. Uh, we have to do more of that kind of stuff, I think. Yeah, yeah, yeah. You're right. Tab index as well. That's another thing which always gets, that's another thing that can go wrong within WordPress content often with your forms
Nathan Wrigley: [00:43:56] and stuff.
I've got to say. Yeah, you're absolutely right. But from my point of view, I never invoked this myself. I always and again, it's accessibility. I just. From my perspective, I click on things, but imagine the frustration, if you were tabbing through and you're fully expecting to go to the next menu item and you just ended up somewhere utterly curious and yeah.
It's got nothing to do there and then you can't find your way back. Oh, it must be horrible.
David Waumsley: [00:44:28] Yeah. Certainly come across it. In fact, I've never really taken any notice because I click and I did, I put a couple of forms on a page and it all went horribly wrong. I had sorted out with gravity forms, but it was just, it's interesting different users out there, but the client, I did the workforce spotted it straight away going tap index is wrong.
They just that's what they do. They tap everywhere.
Nathan Wrigley: [00:44:49] Yep. Yeah, it was interesting. I think it's the new version of gravity forms 2.5. I believe it is where I don't know where we're at now, but. Anyway, they released it. Yeah. But they've, they've made that a big banner of their update is that everything is allegedly.
I can't speak to whether it's true or not is much more accessible. So tapping around the form would behave in the way that you would, you would wish it to behave. And I think, they put a little promotional video together about that and it would appear that they've done quite a lot of work as a way of differentiating themselves from the competition.
I can't speak for what the competition is doing, but I know that the gravity forms have done that.
David Waumsley: [00:45:27] Yeah, it's been a big thing for them because they're seen as the industry leader, they really need to take that kind of stuff seriously. Don't they? Which is what I like about them. Yeah. Security and accessibility of public.
There are two key things, not the busy stuff so much. Yeah. Okay. So, menu, we're supposed to be moving onto the main course, but we've covered much of this. What we can do with our WordPress menus.
Nathan Wrigley: [00:45:54] I have actually, I think the main course items on our little laundry list of things to talk about. There's about eight of them.
I think we've covered all of them. Haven't we?
David Waumsley: [00:46:02] Yeah, there are, mega menus we can do in this plugins that will allow you to do that. Some really complex ones we can sticky menus has become a thing. And the here's something again with conventions. So some sticky menus will stick while you scroll down.
Some will only stick when you scroll back up, some will stick. When you scroll up and down, we don't have a format.
Nathan Wrigley: [00:46:26] Which would you prefer? I fully don't get menus that only stick when you scroll down. I just don't see that as normal, common sense. Forgive me if this is something that you deploy all the time to me, if it's going to stick, make it stick, just have it at the top and have it slightly opaque.
And if you get to the top of the page, whatever was below, it comes below it. But if you just want to have a sticky menu, make it, I don't know, one line, hi, I'm thinking, yeah. On mobile here again, but the same applies to desktop. It's just your menu, but maybe it's narrower than it normally is.
But it stays in place. That's what I want. But when should
David Waumsley: [00:47:07] it disappear? So it's just falling down. So it should be that it should be there in place while you're moving down or up. Yeah.
Nathan Wrigley: [00:47:16] That's what I want to see because you've made the decision to have it there, but also it should be, it shouldn't be big.
It should be really narrow. You should make the point of making it narrower than the normal menu so that when it's in place, it's just, it's, it's almost out of the way. It's not consuming much of the screen real estate. Okay.
David Waumsley: [00:47:34] What about split menus then? That's something which is quite new. I think in design,
Nathan Wrigley: [00:47:39] you're going to have to explain how the split menu is.
David Waumsley: [00:47:42] Oh yeah. So you've got the logo. Usually the logo is in the center page on the top and the Mo yeah. And the menu is split either side of it. So you're using one WordPress menu and it uses some Java JavaScript to calculate how many items should go left or right. All of that. And they're very popular these
Nathan Wrigley: [00:48:01] days.
I think they look really nice. I think they've got the, I don't know why, but it feels to me that something with of heritage. Works well with that, something like an old stately home or something, it feels like it belongs in the middle. You want the logo to be right in the middle? I, I've never built one of those.
I've never deployed one of those, but I actually think they've got their place. The assumption I'm guessing though, is that once you collapse it down to mobile, that all changes and it becomes more of a conventional menu with logo left menu items. And so on. Yes,
David Waumsley: [00:48:35] exactly. Actually, it's interesting.
Again, Jacob Nielsen again, spoils it for us all saying that they don't work very well. In fact, when they did some actual research, this is a couple of years back, they were looking at where the logo position was on the menus, where on that. So apparently the centered splits don't work very well compared to the left align logo and the right line navigation.
That is the ideal.
Nathan Wrigley: [00:49:01] I think they look really nice, but when they bring anything. To the table in terms of conversions. I don't know, but I think they do look really nice.
David Waumsley: [00:49:10] Yeah. And this is likely the same. It almost looks like you make your logo, like a kind of Royal crest almost in the center kind of gives it some sort of,
Nathan Wrigley: [00:49:20] but it also feels like the logo needs symmetry.
Yes. So that, um, in what I'm imagining is bits of text with kind of like decorative scrolls underneath or something. And there's an equal amount on the left, as there is on the right. All of that feels like it works. And if you've got a logo, which is letterbox in dimensions, it feels like that would be great if it was symmetrical, but I don't use it.
I don't know why I just don't use it.
David Waumsley: [00:49:47] Yeah, it's interesting. Cause when I think about that, I can't think it's on any client site that I've done. In fact, I did do it on my own beaver junction of demo sites because I liked it so much, but I don't think I've actually ended up using it. So yeah. And
Nathan Wrigley: [00:50:01] does it appear as an option in any theme that you've ever used?
David Waumsley: [00:50:06] Yeah, no. I'm in beaver builder with me. That's in the beaver builder theme and they've just added it for the next release of beaver builder, the the navigation menu that it's going to be a split menu, option something.
Nathan Wrigley: [00:50:18] Oh, I see. You're responsible for that. And yeah, I was going to say you've made them do all that and you're never going to actually use it.
Yeah. I think it's got its place and I think it looks really nice when deployed correctly, but I, I won't be making use of it.
David Waumsley: [00:50:32] Yeah. Yeah, no, you'd probably be best to, I think it's always best to stick to the convention. So logo left navigation bright. Exactly. Yep. Yeah. Start from that point and then see what you don't what's required.
Should we move on to our last section, which is I've caught the Putin, but actually I'm calling it pudding because I don't want to call it sweet. Cause you know, I'm always griping about the Gutenberg
project. So I wonder ifNathan Wrigley: [00:50:57] anybody even knows what pudding is
David Waumsley: [00:51:01] probably now.
Nathan Wrigley: [00:51:02] Oh, come on.
I mean, if if you're from the UK puddings obvious, but if you're in a different part of the world, putting his desserts, basically.
David Waumsley: [00:51:09] Yeah, I think we've had enough down to now be going around the world.
Yeah. So navigation block, we've got, it's not out yet. Is it in WordPress? This is the future with the full site editing, but it's there in the Gutenberg plugin available. I've been playing around with the navigation block. So that's going to be how we're going to be delivering our menu. Should we go to the full site editing approach?
Nathan Wrigley: [00:51:35] I think it will become the way of doing it. I think it will, at some point override all of the other things that I'm going to be doing. So there'll be then B we'll have the customizer, we'll have the, the menu area. And we'll also have the full site editing navigation block, I think probably once it's mature and it does all of the things that I need it to do then.
The block will be where I want to go to do that because it'll just take care of all the stylings. So at the moment you know, you create your menus, your actual links in one place, and then you maybe go to the theme settings in the customizer to make it look a certain way. And the idea of handling all of this in one spot makes sense to me.
I like the idea, although obviously not fully baked yet. You see what I did there? Very good.
David Waumsley: [00:52:24] Yeah. I think there's a big argument to be had, I think generally anyway, gotten Guttenberg over this stuff, because if you have the styling added to it, then we move into the. Page builder territory, where you're styling kind of modules.
And where does that CSS go? Where presently with the module, you've got a theme takes care of that. And you can add in your CSS selectors that you want, if you want to put some individual style in, on individual menu items. So it's going to be interested to see how it goes, but at the moment I, the controversial part of it is the fact that the only way to get space in with it is to use the spacer block.
And that's not good
Nathan Wrigley: [00:53:02] to see that being anything other than a. A Kluge just to get through some point in time. It's got to, got to have padding, um, it's got to, it's going to have padding. It's just, nobody has it yet. And they just came up with some space away of doing it. So you add these individual little space of blocks in it.
I'm sure it won't stay that way, but yeah, the, the ability to put in little, I don't know, CSS on the last item, for example, or the first item so that it doesn't have left margin or right. Margin or whatever, it might be those kinds of things, again, I'm sure it'll come. I'm sure it will be fully mature at some point, but we're just watching it mature and yeah.
And so that's curious, when, when I'm guessing that when WordPress came out with its menu the, the way that they do menus now, all of that was probably done in the dark and they iterated on it probably over a number of. Maybe a year or so until finally they got it right. And then just pushed it.
And it was great. Those in the community that had no interest in watching it develop, probably had no idea. And when it came out there, it was, but we've got a different approach this time around everything's being done slowly and in public view and it's been chopped into the Gutenberg plugin. And so we're, we're seeing it happen and obviously the stages toward it.
But I think it will be a good thing to have everything in the full site, editing area and especially menus. It just makes total sense to have all of that so that you can see what's happening as you do it a little bit like in the customizer. But, change the view and the menu items and the structure of them all in one place.
That sounds good. Yeah. Yeah.
David Waumsley: [00:54:41] It sounds like, yeah, it shouldn't be there. It should have been there forever. It's always been tricky. Isn't it? This kind of headers and footers voice been difficult with WordPress and this is a step in the right direction. I do think though. And I think it shouldn't be under emphasize this space of block idea of being able to put dibs in between your list items code.
If it goes out with that, they're going to have to keep this forever because of backwards compatibility. Yeah. Because
Nathan Wrigley: [00:55:08] people are going to use that.
David Waumsley: [00:55:10] I think really this is one of the things that, before it shoved out there, they really need to pull that and just say, okay, so you can't have the pattern that you want easily, but tough because we cut all of this nonsense code in there and have to support this for the rest of WordPress's
life.
Nathan Wrigley: [00:55:25] You could, you could fully have. The, the padding that you just have to go into the CSS and yeah,
David Waumsley: [00:55:33] of course you can. Yeah, exactly the same as you could anyway. So I just don't think they should have that in. I think that's the real thing for me with this navigation block, it's yeah, I'm with it.
But then when I saw that, I just thought it's got to go, surely it's such a bad idea. And if you put it out and people start using it, you're stuck with it.
Nathan Wrigley: [00:55:54] Yeah. I'm more than a mold. And certain, I think that, that won't stick around. It's just a Kluge in the meantime, but a Kluge, which is is publicly visible.
And now that WordPress is used by so many people, there's so many eyeballs on it. We can all see the problems. Yeah.
David Waumsley: [00:56:11] Yeah. Oh, so I think we're probably, that's what we can say. Isn't it about the navigation, but we'll have to wait and see what's coming
out while I mean, we'veNathan Wrigley: [00:56:19] been going on now for what?
Probably about 50 minutes or so what more is there to say probably a whole boat load of things that we ought to say because cause we always miss things out. So if you've got anything you want to add, we always posted this stuff in our Facebook group and obviously it'll go onto the website, let us know.
David Waumsley: [00:56:37] Yeah. And next time in two weeks time, we're talking, I haven't asked you about this one. I thought we'd do end for numbers and surprises, statistics that are out there
Nathan Wrigley: [00:56:48] fully hoping it'd be N for Nathan. Because maybe it will be no, let's go for numbers. That sounds good to me, honestly. Can you imagine about that episode would be an explanation?
No. Okay. So yeah, we'll we'll be there in a couple of weeks time if you, like I say, if you've got any comments, let us know, but curious to hear what it is you've got to say, but thanks, David. Nice chat.
David Waumsley: [00:57:13] Yeah. Thank you.
Nathan Wrigley: [00:57:14] Cheers. I hope that you enjoyed that episode as always a pleasure chatting to David Wamsley in this case about menus.
If there's anything you think we missed out, or if we just plain got it wrong, head over to WP Builds.com. You can leave a comment there. Join our Facebook group, WP Builds.com forward slash Facebook. And you can leave a comment there. Or as I said at the top of the show, why not try out the new mustard on WP Builds.social?
Yes, that's a URL. WP Builds.social. Join us over there and see what you make of it. You could perhaps tell us something about that comment, go and search for it. It's episode number 234. The WP Bill's podcast was brought to you today by AB split test. Do you want to set up your AB split tests in record time, then you AB split test plugin for WordPress.
We'll have you up and running in a couple of minutes. Use your existing pages and you can test anything against anything else. Buttons, images, headers, rows, anything. And the best part is it works with element or beaver builder and the WordPress block editor. Check it out. Get a free [email protected].
Okay, we'll be back next week. Next Thursday, I'll have an interview for you. And on Monday, this week in WordPress live 2:00 PM UK time. And also we should put it out on our newsletter the following day, and as a post on a YouTube video as well. And you can find all of that. WP Builds.com forward slash subscribe.
Join the newsletter and keep updated. That's all I've got for you this week. I hope that you enjoyed it. Stay safe until next week. Bye bye for now and I'll feed in some
David Waumsley: [00:58:51] cheesy
Nathan Wrigley: [00:58:52] music. .
