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