Should I place my menu on top of my mobile version of this showtimes website?

Question

I'm trying to design a simple website that will show movie showtimes in a few cities. It's going to be a french website but I translated the important content in the screenshots and the website to let you help me.

I'm using Bootstrap 2 which is a grid-based CSS framework that allows to "easily" use the same HTML for the mobile and desktop version of a website. This is what I have come up with so far:

As you can see, there's a menu on the right which allows to change the movies displayed on the left. I believe it's an easy way to change the city and the day. Inspiration comes from Google Movies.

However, problems arise when the website is viewed on a phone. If the menu is kept at the right, it will show at the bottom of the mobile version, and users will need to scroll down to discover the menu. If it's on the left, it will show up on top, and nothing says they should scroll down to see actual movie showtimes. Resizing the window is enough to test the "mobile version", but here are the relevant screenshots on my actual phone (a Galaxy S) with the default Android 2.3 browser:

This question on menu placement mentions that menus should be on top and that users expect it, but I don't think it applies to menus bigger than the screen. Am I wrong?

Anyway, my question is: Is one of my options the best solution? If not, is there a better alternative I didn't think about?

Answer 1

The answer is that you cannot simply use the same content on both. You will need to have rules which change or hide some of the desktop content on a mobile device.

Specifically, you could change that tall menu into a single clickable button that displays the menu when touched (or two of them, one labeled 'Where?', one labeled 'When?') This simple change... using nearly the same content, but not quite... will allow the mobile version to be far more user friendly.

Answer 2

Your reasoning is correct for both placing a menu that large at the top (which then hides the content) or at the bottom (hard to discover).

There's several possible solutions here:

1. Have a drawer w/ small button on the left or right that user taps to slide out the menu from the right side as-is.
2. Incorporate the menu into the little "menu" button/drawer at the top, this may be tricky if you're trying to avoid customizing Bootstrap.
3. Add a fixed footer to the bottom which the user can tap to reveal the menu and style the menu for a mobile experience.

In general, I would be less concerned with maintaining a consistent interface between the web and mobile browser, and instead focus on doing what makes for the best experience in each case.

My preference would be to go with #3, then #1 and finally #2.

Answer 3

An alternative suggestion to @JOG's option is to switch to dropdown menu for mobile if you want the menu to show first. See:

^{Image source: http://css-tricks.com/convert-menu-to-dropdown/}

Answer 4

Here are some quickly made design suggestions.

• Depicted to the left: Reside the selection in a dropdown or popup-like control instead.
• Depicted to the right: Keep the venue menu to the right if on a pc and add a jump link and put it below if on a small screen. I found that the layout depends on window size. So if you can hide/show the jump link depending on that, you're sorted. :)

If you can't, then I would not let the "easy" framework decide for you. In the end it is often actually easier to be able to control everything yourself.