Join Morten Rand-Hendriksen for an in-depth discussion in this video Designing menus, part of WordPress: Building Responsive Themes.
- View Offline
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…
- What is responsive design?
- Installing the Anaximander example theme
- Deciding what screen sizes to target
- Designing menus
- Adding responsive images and video
- Using CSS media queries to apply different styles
- Handling sidebars on mobile displays
- Dealing with footer widgets
- Installing jQuery Masonry