Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
The many ways visitors access web sites, via mobile devices, tablets, and desktops, now requires sites to incorporate responsive design elements that adapt to different screen sizes and browsers. In this course, Morten Rand-Hendriksen demonstrates design strategies, best practices, and actual code examples for creating a responsive web site. The course covers layout, navigation, responsive video embedding, and content sliders. The final chapter shows how to create an index page with jQuery Masonry, a jQuery plugin that helps you create dynamic grid layouts.
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.
This means making menus that have items that are easy to click on with clumsy thumbs and also dealing with the issue that in touch-based devices there is no such thing as a hover state, so regular dropdown menus don't work exactly as they're supposed to. In the Anaximander theme I've tried to address both the concerns of accessibility 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 fairly small 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 a mobile device, you get much larger buttons that are much easier to click on with your thumbs and have much larger active areas. At the same time, they are more distinct from the remainder of the design to make 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 can actually go through each of the menu items by navigating with your keyboard.
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 are quite difficult to deal with on cell phones, primarily because the different types 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 these custom-built menus to only appear on phones that add tons of extra code to your site 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 hiding content on the page. What happens is you're making an assumption that everyone who visits your sites automatically will go and hover over all of your menu items just to see if there's something underneath. And yes, you could add an arrow next to the menu if you wanted to to indicate there is something underneath there, but you're still making a quite elaborate assumption about the person visiting your site. If you're putting links in a dropdown menu, you're basically hiding it from the 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, go to 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 scenario where a person lands on this page first and doesn't use the menu, that person would have no idea that there were other pages related to this page, if those pages 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 page for all these other pages that you are linking to, it becomes far easier for someone 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 you use and focusing on information architecture to create navigation that is simple and intuitive, you should be able to use one of, or a combination of, the methods I've shown you to create responsive menus that work for all devices.
There are currently no FAQs about WordPress: Building Responsive Themes.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.