3

I'm currently using a slide-out navigation on a website for handheld devices and tablets. Some of the stakeholders on the project are concerned that using the slide-out for landscape orientation is going to be awkward.

They're suggesting we use the regular navigation (standard group of horizontal links) if the tablet is in landscape and reserve the slide-out for portrait only. The standard horizontal nav works fine, but my gut is telling me users shouldn't experience such a major shift in approach to navigation on the same device should they decide to rotate it.

Thoughts?

|improve this question
1

Native apps on the iPad make that change in navigation as well, when you look at the Apple mail app on the iPad: That changes the navigation from in portrait opening it with a button to in landscape having it always open. This was also the easiest to implement on iPad so I think more apps followed Apples lead. They do however keep the same navigation, only to save space they hide it behind a button in portrait.

This layout has the advantage that your main content always has approximately the same width.

You could also keep the navigation consistent between both orientations when you always use your horizontal navigation.

Both cases keep the navigation itself consistent, to prevent the users having to learn two sets of navigation.

|improve this answer
  • This makes a lot more sense to me than changing convention, though. It still uses the same navigation; it just happens to change how you access it. What do you think about changing the actual navigation on rotation, and not just the mechanism that's used to access it? – joeyfigaro Jul 19 '13 at 14:27
  • @joeyfigaro I assume that that could confuse people, what stops you from using the horizontal navigation also in portrait mode? – Pesikar Jul 19 '13 at 14:34
  • We've got a number of semi-unusual requirements that give us less control over the header of our document than usual. There isn't space to fit the whole nav horizontally so we'd either have to remove some links (which would likely be a political battle) or do something like break up the nav into more than one bar. That'd be fine, but due to those unusual requirements we have to follow, we'd have to do the rearranging with javascript. – joeyfigaro Jul 19 '13 at 14:39
  • The split-view controller in iOS for iPad does follow this pattern but it has a vertical nav along the side that displays on swipe when in portrait or displays all the time in landscape. In this case with a horizontal nav, it's not a 1:1 comparison as landscape actually has LESS vertical space than portrait, so if anything, the behavior should be reversed. The horizontal nav could display in portrait when there is more vertical space for it. Or, convert the nav to vertical for mobile. – Charles Wesley Jul 19 '13 at 16:18
  • 1
    Thanks, @CharlesWesley. Exactly the answer I was looking for. – joeyfigaro Jul 22 '13 at 12:36
0

The best solution, if the website is not too complex, is to use a responsive layout. With just one layout you can grant usability for all screen dimension (from smartphone to tv screen).

I prefer Groundworks css, it's really complete and configurable. It's possible hide or show element by type of device.

http://groundwork.sidereel.com/?url=home#

Click on the top centred menu to simulate different screen (you can also rotate).

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.