On Thu, Dec 8, 2011 at 4:57 PM, Brion Vibber <bvibber(a)wikimedia.org> wrote:
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/
Awesome. Live demos are the best.
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
Much nicer on a small screen.
* 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
Nice
I also changed the viewport settings to allow zooming
in, which we've been
thinking about doing anyway.
About time we did this.
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
Great start!
I'm going to take the long term view here. When a user taps an Image
on Wikipedia I'm going bet that they want to see the image in whatever
size is right for their phone. Scalable of course. Without much else.
Were showing them way too much by default.
But we want to make the extra data available if a user asks for it. So
why don't we surface it when a user taps on the image as a set of
icons/text that floats at the top and the image description at the
bottom. And a black background behind everything to make the image
pop.
We could also get rid of the following but not limited to as they
don't serve the needs of someone browsing an image description page on
a mobile
* Different resolutions
* IW links
* Home, Random
* Search
* Full resolution link on every page
--tomasz