[WikimediaMobile] Mockup for mobile image page

[Brion Vibber]

I went ahead and did a quick mockup for some modified JavaScript and CSS
for image pages. 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

-- brion
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.wikimedia.org/pipermail/mobile-l/attachments/20111208/53fe37b2/attachment.htm