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?

4 Answers
4

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.

Thanks for your answer! It's very cool, which is why I upvoted it. Unfortunately, it feels a bit more complicated than the other answers, which is why I didn't accept it.
–
Quentin PradetMay 28 '12 at 18:43

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.

Thanks for your answer! Sure, I can hide/show the jump link depending on window size. The framework only provides the basic functionality, but it's easy to override everything if needed. Using Bootstrap defaults simply makes my life easier. So yes, it's easy to add another media query saying "display this link when the screen is small".
–
Quentin PradetMay 28 '12 at 18:42

Great! In that case I think it is motivated to show the jump link as soon as the screen gets so small that the venue menu goes out of frame.
–
JOGMay 29 '12 at 8:40