I am looking to get into a discussion to share ideas about responsive navigation. What way do you tackle it?
I am pretty confident with creating responsive layouts. One area that’s still a big hurdle for me personally is tackling large, extensive menus when making a site responsive.
I have, on previous projects, used a simple jump menu thats display is turned off on the 960px + layout and activated on the small mobile sites.
So, I guess the point of my question is what way do you make your extensive menus responsive ?
Responsive design sort of falls apart here considering each menu level should likely be a separate page. If you have ever used an actual native application that is the pattern that is well known for handling hierarchical navigation.
If it’s a small dropdown I’ll have the full menu hanging out, but I do mean small. The point of dropdowns is to let a single page have a lot of stuff in it, without the visual clutter. For mobiles that would mean, don’t even stuff all that content in there.
What many sites with a dedicated mobile site (rather than a single responsive site) do is actually remove non-essential junk from the main site. Sometimes this pissed mobile users off who feel they’re missing out from the “real” site; sometimes developers cheer that they now have a Good Reason to remove a bunch of cruft that’s gotten onto the page because of management wars or what someone’s wife thought was a good idea.
Compare funda.nl and m.funda.nl. The mobile version assumes you’re searching for houses, or possibly standing in front of a house right now and want to look up stuff about it with your phone. The main site offers all sorts of non-house-searching things that are related and belong on the site, but would get in the way of the type of mobile user they figured they have. Of course, if they have a mobile user who wants the “real” site, there’s a “force desktop” option right near the top. Handy.
A responsive site without assistance from the server might have to display: none a lot of stuff, which is certainly not optimal (tho display: noneing a bunch of text isn’t really so bad compared to display: noneing large images, who really cost bandwith. Text is cheap).
I don’t know if this technique is of any help here. I’ve not used it myself (and can’t remember how I came across it - it might have been on another thread in the forums). My main concern about it is that I don’t know whether non-touch-screen devices can handle that kind of select list.
(Off Topic: I love your new avatar, Stomme Poes - although my favourite was the short-lived “Talk like a Pirate”.)
I have a touch screen that can handle that list. You basically get a pop-up window and you can scroll to see the selections. I thought about that solution but I am wonderif Zapppa is talking about a drop down window where on the desktop version, you roll over the main link and get a dropdown of sub pages to select. While the form option element works to compress the global navigation, I am not sure of a way to use the option element to provide both links and sublinks.