Fennec/NativeUI/UserExperience/ReaderMode
Firefox Mobile 11 or Beyond
Below are some concepts for the a potential reader mode for the Firefox Mobile browser. All the mockups can found in this flickr folder.
1. 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. Examples:
Sample Interaction Flow
Proposed Visual Design Mock Up
We would want to inflate the following elements.
Title (the header of the article): 6pt
Content (body text of the article): 8pt
Caption (label underneath pictures): 4pt
These sections will be difficult to isolate as they are not universally identified within HTML, so special rules need to be created around tags such as <p> and <div> containing heavy text. These rules would apply to most news paper websites view in desktop/"full" mode such as nytimes.com or thestar.com or most blogs.
See examples:
Medium Resolution devices such as the Google Nexus S (480x800 px @ 233ppi)
High Resolution devices such as the Google Galaxy Nexus (720x1280 px @ 316ppi)
2. Ability to modify the optimal text size for reading within the browser options
Problem: 8pt font size for the reading content is a great compromise in size for most users. However our older audience with vision loss will find it too smaller and our younger audience will likely find it too large.
Solution: We should allow the user to specify the reading font size within the browser’s options.
See an example of the proposed of the option controls on Google Galaxy Nexus running Android 4.0.X, the controls are designed to be compatible with the interaction paradigm of Android 2.2/2.3 to not alienate users of the older OS version.
The user will be able able to specify any font size between 6pt and 14pt. We would want to maintain the following ratios for content vs title vs captions:
User Defined Size → Content = 100% → Title = ~75% → Caption = 50%
6pt → Content = 6pt → Title = 5pt → Caption = 3pt
7pt → Content = 7pt → Title = 5pt → Caption = 3pt
8pt → Content = 8pt → Title = 6pt → Caption = 4pt
9pt → Content = 9pt → Title = 6pt → Caption = 4pt
10pt → Content = 10pt → Title = 7pt → Caption = 5pt
11pt → Content = 11pt → Title = 7pt → Caption = 5pt
12pt → Content = 12pt → Title = 8pt → Caption = 6pt
13pt → Content = 13pt → Title = 8pt → Caption = 6pt
14pt → Content = 14pt → Title = 9pt → Caption = 7pt