Fennec/NativeUI/UserExperience/ReaderMode

Below is the proposed first version of a reader mode for mobile Firefox. All the mockups (some old) can found in this flickr folder.

1. How to Access Reader Mode from the Browser?
Problem: The new browser design is heading towards a chromeless / buttonless aesthetic, how do we introduce the reader mode?
Solution: The reader mode can hidden the the menu invoked by pressing the hardware/software menu button or with an icon which appears in the URL bar.


Proposed Visual Design Mock Up

2. Proposed Interactions
Problem: Add functionality to the reader mode while still maintaining a chromeless, reading focused layout.
Solution: Introduce off screen menus rendered visible with swiping gestures.


Sample Interaction Flow


Proposed Visual Design Mock Up


Examples of Article Navigation (Potentially for a future release)

3. The Toolbar
Problem: How do we access / display the various options without intruding on the reading experience
Solution: On tapping of the screen a translucent tool bar appears, further options can be invoked by pressing the menu icon in the bar, or the hardware menu key.


Proposed Visual Design Mock Up

4. Visual Variations
Various Examples:


Overall Layout & Typography, Sans Serifs will likely be Open Sans as seen in the later mock ups


Colour Themes


Image Treatement, ideally if we could aim for the right example, flush layout

5. Scalability
Typography size scaling ratio pairs
Handheld vs Tablet

[:Image:]