5

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:

"Desktop version"

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:

enter image description here enter image description here

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

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.

5

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.

1
  • 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. May 28, 2012 at 18:43
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:

enter image description here

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

2

Here are some quickly made design suggestions.

enter image description here

  • 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.

3
  • 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". May 28, 2012 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.
    – JOG
    May 29, 2012 at 8:40
  • It turns out that Bootstrap has classes like "visible-phone" that make this easy. twitter.github.com/bootstrap/scaffolding.html#responsive May 30, 2012 at 12:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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