Fennec/NativeUI/UserExperience/Readability: Difference between revisions
m (Created page with "For Firefox Mobile 11 We are aiming for two readability features. 1. Optimized text size for reading. Problem: Text heavy (non mobile versions of) websites such as nytimes.com h...") |
mNo edit summary |
||
| Line 1: | Line 1: | ||
For Firefox Mobile 11 | <b>For Firefox Mobile 11</b><br> | ||
We are aiming for two readability features. | We are aiming for two readability features.<br><br> | ||
1. Optimized text size for reading. | <b>1. Optimized text size for reading.</b><br> | ||
Problem: Text heavy (non mobile versions of) websites such as nytimes.com have content which appears far too small at page load since the page is originally optimized for desktop monitors 5x+ the mobile screen’s size. | <b>Problem:</b> Text heavy (non mobile versions of) websites such as nytimes.com have content which appears far too small at page load since the page is originally optimized for desktop monitors 5x+ the mobile screen’s size. | ||
Solution: Inflate the text programmatically at page load, so when the user pinches to zoom or double taps the content to isolate the article for reading, the content font is set to a size optimized for reading, we are proposing that size to be 8pt. This inflation would also enable the text to be more readable at page load when the entire website is zoomed out as it should translate to about 4pt vs the 1-2pt it currently renders at. | <b>Solution:</b> Inflate the text programmatically at page load, so when the user pinches to zoom or double taps the content to isolate the article for reading, the content font is set to a size optimized for reading, we are proposing that size to be 8pt. This inflation would also enable the text to be more readable at page load when the entire website is zoomed out as it should translate to about 4pt vs the 1-2pt it currently renders at. | ||
We would want to inflate the following elements. | We would want to inflate the following elements.<br> | ||
Title: 6pt | Title: 6pt<br> | ||
Content: 8pt | Content: 8pt<br> | ||
Caption: 4pt | Caption: 4pt<br> | ||
See examples: | See examples: | ||
| Line 15: | Line 15: | ||
High Resolution devices such as the Google Galaxy Nexus (720x1280 px @ 316ppi) | High Resolution devices such as the Google Galaxy Nexus (720x1280 px @ 316ppi) | ||
<br><br> | |||
<b>2.Ability to modify the optimal text size for reading within Browser options</b><br> | |||
<b>Problem:</b> 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. | |||
<b>Solution:</b> We should allow the user to specify the reading font size within the browser’s options. | |||
Solution: We should allow the user to specify the reading font size within the browser’s options. | |||
See example of the option controls on Google Galaxy Nexus running Android 4.0.X but the controls are designed to be compatible with the interaction paradigm of Android 2.2/2.3 not alienate users of the older OS version. | See example of the option controls on Google Galaxy Nexus running Android 4.0.X but the controls are designed to be compatible with the interaction paradigm of Android 2.2/2.3 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: | 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% | User Defined Size > Content = 100% > Title = ~75% > Caption = 50%<br> | ||
6pt > Content = 6pt | <tt> | ||
7pt > Content = 7pt > Title = 5pt > Caption = 3pt | 6pt > Content = 6pt > Title = 5pt > Caption = 3pt<br> | ||
8pt > Content = 8pt | 7pt > Content = 7pt > Title = 5pt > Caption = 3pt<br> | ||
9pt > Content = 9pt | 8pt > Content = 8pt > Title = 6pt > Caption = 4pt<br> | ||
10pt > Content = 10pt > Title = 7pt > Caption = 5pt | 9pt > Content = 9pt > Title = 6pt > Caption = 4pt<br> | ||
11pt > Content = 11pt | 10pt > Content = 10pt > Title = 7pt > Caption = 5pt<br> | ||
12pt > Content = 12pt > Title = 8pt > Caption = 6pt | 11pt > Content = 11pt > Title = 7pt > Caption = 5pt<br> | ||
13pt > Content = 13pt > Title = 8pt > Caption = 6pt | 12pt > Content = 12pt > Title = 8pt > Caption = 6pt<br> | ||
14pt > Content = 14pt > Title = 9pt > Caption = 7pt | 13pt > Content = 13pt > Title = 8pt > Caption = 6pt<br> | ||
14pt > Content = 14pt > Title = 9pt > Caption = 7pt<br> | |||
</tt> | |||
Revision as of 15:55, 30 November 2011
For Firefox Mobile 11
We are aiming for two readability features.
1. Optimized text size for reading.
Problem: Text heavy (non mobile versions of) websites such as nytimes.com have content which appears far too small at page load since the page is originally optimized for desktop monitors 5x+ the mobile screen’s size.
Solution: Inflate the text programmatically at page load, so when the user pinches to zoom or double taps the content to isolate the article for reading, the content font is set to a size optimized for reading, we are proposing that size to be 8pt. This inflation would also enable the text to be more readable at page load when the entire website is zoomed out as it should translate to about 4pt vs the 1-2pt it currently renders at.
We would want to inflate the following elements.
Title: 6pt
Content: 8pt
Caption: 4pt
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 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 example of the option controls on Google Galaxy Nexus running Android 4.0.X but the controls are designed to be compatible with the interaction paradigm of Android 2.2/2.3 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