Image page mockup for mobile

I went ahead and did a quick mockup for some modified JavaScript and CSS for image pages on our mobile interface. Here’s a live demo:

http://toolserver.org/~brion/mockups/mobile-imagepage/


This is using the current existing File: page markup and modifying it with CSS and JavaScript:

  • the extra data sections are hidden by default except for the image, so they don’t get in the way
  • link bar at top is reformatted and links are used to show/hide each section instead of jumping around
  • the image itself is sized down to fit the screen, but using the same medium-resolution version that we started with

I also changed the viewport settings to allow zooming in, which we’ve been thinking about doing anyway.

Result is:

  • by default there’s less clutter on screen
  •  by default the image fits
  • auto-scales to fit when changing orientation
  • on high-resolution screens (iOS with Retina display, Android with 240dpi or 320dpi display) the picture appears much sharper
  • can zoom in for more detail with standard pinch-to-zoom

Confirmed that it works in at least iOS 5 Safari and Android 2.3.6 Browser, haven’t tested all other things.

Checked in with Phil & Patrick — we think this is a good direction to start with and should be easy to include in MobileFrontend extension (it’s a conservative change that doesn’t alter any HTML of the page itself, and just adds some CSS/JS that will be easy to keep and port in future).

Any comments, ideas? For instance the initial view could be made more ‘image viewer’-y by centering things, removing some extra links or reformatting them, etc

5 thoughts on “Image page mockup for mobile”

  1. Works nicely on Galaxy Nexus/ICS.

    Next: Organize the standard website file display as neatly :-)

  2. Some remarks:

    What happens when the filename is much longer, will it still be shown or just occupy all the screen space?

    Maybe consider making the ‘File:’ namespace smaller. Not sure we have a ‘span’ for the namespace part though so you will have to be creative with jQuery. Or use ‘marquee’ which is invalid in HTML5, IIRC?

    You might want to try out with on of the license boxes in use on commons.

    Could we change the 800×600 default resolution based on the phone model being used? iPhones up to v3 are 320px width, iPhone 4 640 width. So we could probably make them save up some bytes.

  3. I think filename will show like any long title; for further cleanup we’d probably want to move it out of the way.

    As for resolution; the 800px default gives some wiggle room for zooming so I think that’s OK for low-res devices too.

  4. Where does the license info go? In the “File” section?

    Also, linking to specific sections ([[:File:Example.jpg#filelinks]]) doesn’t work with this.

  5. License info is ad-hoc textual data in the description; currently this is bundled with the “File” section.

    Linking can be made to work — I’ll make a note to poke that.

Comments are closed.