Video: Designing menus

Menus have always been a hot button issue in web design and web development circles, and the heat has just increased for the introduction of responsive design. The challenge has always been how to create menus that look good, are accessible, and are functional all at the same time. You can usually only get two of those three. When it comes to responsive design, there's the added complication that we now have to create menus that work both for regular, old-fashioned mouse-based point- and-click behaviors and for new touch behaviors.

Designing menus

Menus have always been a hot button issue in web design and webdevelopment circles, and the heat has just increased for the introductionof responsive design.The challenge has always been how to create menus that look good, are accessible,and are functional all at the same time.You can usually only get two of those three.When it comes to responsive design, there's the added complication that we nowhave to create menus that work both for regular, old-fashioned mouse-based point-and-click behaviors and for new touch behaviors.

This means making menus that have items that are easy to click on with clumsythumbs and also dealing with the issue that in touch-based devices there is nosuch thing as a hover state, so regular dropdown menus don't work exactly asthey're supposed to.In the Anaximander theme I've tried to address both the concerns ofaccessibility and also the concerns of mobile devices.What I've done is create menu styles that change depending on the size of the screen.So by default, on a large screen you get the standard menu, which has fairlysmall buttons that you have to touch exactly to get them to activate.

But if you reduce the size of the screen down to a size that probably is on amobile device, you get much larger buttons that are much easier to click on withyour thumbs and have much larger active areas.At the same time, they are more distinct from the remainder of the design tomake it more clear that these are menu items.In addition, as I alluded earlier, I made this menu accessible, even with a keyboard.So if you tab through this page, you'll see that as you get to the menu, you canactually go through each of the menu items by navigating with your keyboard.

This is an important extra feature, because it means that the markup is reallyclear, both for search engines and for people who access this web site using someother device than a regular screen.This was achieved by adding a JavaScript library called Superfish.The Superfish Library allows you to create accessible menus that are easy tonavigate with multiple different types of devices, including with a keyboard.Superfish was created by Joel Birch, and if you're ever going to create a themethat has a dropdown menu in it, I highly recommend including this JavaScriptlibrary so that you get properly accessible menus in your site.

That's said, I'm going to give you my two cents on the matter.In my opinion, dropdown menus are a bad idea and should be avoided at all costs.There are many reasons for this, but the two main ones is A, dropdown menus arequite difficult to deal with on cell phones, primarily because the differenttypes of cell phone browsers handle dropdown menus differently.So in many cases, even if you build the menu specifically to handle cell phones,it still will not work properly, and the result is you'll often see thesecustom-built menus to only appear on phones that add tons of extra code to yoursite and don't really do anything except make a different user experience for the phone users.

That's not ideal.The other reason is, if you put up a dropdown menu, you are effectively hidingcontent on the page.What happens is you're making an assumption that everyone who visits yoursites automatically will go and hover over all of your menu items just to seeif there's something underneath.And yes, you could add an arrow next to the menu if you wanted to to indicatethere is something underneath there,but you're still making a quite elaborate assumption about the personvisiting your site.If you're putting links in a dropdown menu, you're basically hiding it fromthe person who visits.

And I know what you are going to ask:So if you don't use a dropdown menu, what am I going to do with all these extra menu items?The answer is instead of making a dropdown menu, like the one you see here, goto that page that the first menu item links to and put the list of other items in the page.This is far more obvious, and it's also far more effective, because in a scenariowhere a person lands on this page first and doesn't use the menu, that personwould have no idea that there were other pages related to this page, if thosepages were only linked on the menu.

Why on earth would they go and click on the menu when they're already on the page.So if instead you put the links inside the page or if you make a landing pagefor all these other pages that you are linking to, it becomes far easier forsomeone who visits to actually get to the content they are looking for.Unfortunately, I don't have a cure-all for the menu disease.What I can say though, is that by trying to reduce a number of menu items youuse and focusing on information architecture to create navigation that is simpleand intuitive, you should be able to use one of, or a combination of, the methodsI've shown you to create responsive menus that work for all devices.

There are currently no FAQs about WordPress: Building Responsive Themes.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.