234 - 'M' is for Menus

‘A-Z of WordPress’ with Nathan Wrigley and David Waumsley

Hello… It’s another A-Z of WordPress. The series where we attempt to cover all the major aspects of building and maintaining sites with WP. Today is for M for Menus…

If you listen to the podcast, this is broadly the aspects that we touch upon. And David came up with a clever way of creating nice sounding sub-menus for this this one!

(Aperitif) Preamble 

Funny, only yesterday I (David) had an issue with an update messing up the navigation on a site and was reminded of how important it is and how we probably should keep things as simple as possible.

I am sure no one would be listening to this if it was not for well organized links. Good navigation is probably at the top of the list of things we should care about on a website.

(Starter course) Regardless of WordPress, what we should know about menus?

Jakob Nielsen “the guru of Web page usability” and Don Norman (nngroup), are both good places to look at:
https://www.nngroup.com/people/jakob-nielsen/

Usability

• Making Menu visible (relative size for the device, familiar position, space, look clickable)
• Number of items – magic number is apparently… 7!
• Standard order – home / about / service / blog / contact / CTA button / search (possibly). Is this too generic for SEO though? https://www.nngroup.com/articles/short-term-memory-and-web-usability/
• Dropdowns are bad (challenge to lazy overuse in design)
• Mega menus are good (Usability expert Jakob Nielsen https://www.nngroup.com/articles/mega-menus-work-well/)
• Links to home still good, especially in the logo?
• Links to non-site page stuff (.pdf downloads, external sites) without warning are bad 
• There is no html icon for external linking
• Hamburgers can still be an issue (on desktop). Do people yet understand them universally?
• Why do with even make mobile users click to see a menu?
• More internal links better for SEO
• Are menus bad for conversion (landing pages don’t use them often)?

Accessibility (screen readers)

• How do screen readers see menus (landing on a new page to hear how to get to the page – annoying)?
• Aria hidden icons
• Tab indexing
• Seeing flyout menus can be accessed with the keyboard

(Main course) What you can do with WordPress menus…

• Make as many as you like
• Set so all new pages are added or no
• Add CSS selectors to each 
• Split menus
• Mega menus
• Sticky menus
• Scrolling links to ID (on page / off page with custom links)
• Mobile menus – overlays, left or right slide in, dropdowns, plain text… https://pixelfridge.digital/8-amazing-examples-of-mobile-first-responsive-navigation/

(Pudding – can’t call this sweet) What about the Navigation Block?

• It’s been delayed. The Navigation block was a priority project for 2019. It was also planned for the WordPress 5.4 release. 
• Due out in 5.8, perhaps? https://wordpress.com/support/wordpress-editor/blocks/navigation-block/
• Controversial because you can add the spacer block (not good mark-up to break up
• ’s this way).
• You can also add search and social icons (plus list custom links)
• It will need refining if FSE is to be a success more generally
• Can’t add CSS selector, but we have CSS tricks
• Responsive nav menus are a work in progress

(Retire for brandy and cigars) – Final thoughts

David:
This has got me thinking about building a collection of menu templates. I have not sorted out my best mobile menu set up yet. Still too much of an afterthought in these mobile first days.

Nathan:
I’m really lazy and basically rely on the options that the theme that I’m using presents to me. I’m only just switching on to the fact that accessibility is a really important thing here. I’m also curious about how we get more into the menus on mobile with such a small area of screen estate to play with – the future here will be worth watching.

Mentioned in this episode…

Relevanssi