Responsive Theming for Drupal

Chapter 7. Some Common Gotchas and Tips

It’s not all roses and meadows in the world of responsive web design—there are some common issues that throw a wrench into things from time to time, so it’s good to be aware of these before they hit so that you can save yourself some frantic Googling.

The basic gist of RWD is that you’re trying to reuse as much markup as possible between different resolutions by just styling things differently. However, there are a few cases where that doesn’t cut it, and you need to customize things a bit.

Different Resolution-Specific Navigations

Probably the most common area for this to happen is in the site navigation. For example, pretend that Riley’s turnip sauce site has a horizontal navigation with hierarchical, multilevel hover-based dropdown menus on desktop resolutions. How would you represent that for mobile resolutions and touch-based interfaces?

For one thing, touch interfaces have no idea when you’re hovering or not because there’s no mouse pointer to do the hovering. You can always use “touch” to replace “hover” (in fact, browsers on touch interfaces report a hover when you touchdown anyway so that’s not hard) but then that presents the problem of “hovering” and “clicking” being the same action. So hover-based dropdown menus in general are out.

So your options are to either display all of the menu options in one giant indented list that takes up three screens worth of scrolling, or figure out some other way to handle the “hover” action.

Select Dropdown ...