On Thu, Dec 8, 2011 at 4:57 PM, Brion Vibber bvibber@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:
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