294
edits
Fennec/NativeUI/UserExperience/Readability: Difference between revisions
Fennec/NativeUI/UserExperience/Readability (view source)
Revision as of 20:31, 1 December 2011
, 1 December 2011no edit summary
No edit summary |
mNo edit summary |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 4: | Line 4: | ||
<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. | <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. | ||
<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 | <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 ~4pt vs the ~1-2pt it currently renders at. | ||
We would want to inflate the following elements.<br> | We would want to inflate the following elements.<br> | ||
Title: 6pt<br> | Title (the header of the article): 6pt<br> | ||
Content: 8pt<br> | Content (body text of the article): 8pt<br> | ||
Caption: 4pt<br> | Caption (label underneath pictures): 4pt<br><br> | ||
<i>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 <nowiki><p> and <div></nowiki> 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. | |||
</i> | |||
<br> | |||
See examples:<br> | See examples:<br> | ||
[http://www.flickr.com/photos/patrykdesign/6426532563/in/set-72157628209207387 Medium Resolution devices such as the Google Nexus S (480x800 px @ 233ppi)] | [http://www.flickr.com/photos/patrykdesign/6426532563/in/set-72157628209207387 Medium Resolution devices such as the Google Nexus S (480x800 px @ 233ppi)]<br> | ||
[http://www.flickr.com/photos/patrykdesign/6426531853/in/set-72157628209207387 High Resolution devices such as the Google Galaxy Nexus (720x1280 px @ 316ppi)] | [http://www.flickr.com/photos/patrykdesign/6426531853/in/set-72157628209207387 High Resolution devices such as the Google Galaxy Nexus (720x1280 px @ 316ppi)] | ||
<br><br> | <br><br> | ||
| Line 22: | Line 25: | ||
<b>Solution:</b> We should allow the user to specify the reading font size within the browser’s options. | <b>Solution:</b> We should allow the user to specify the reading font size within the browser’s options. | ||
See an [http://www.flickr.com/photos/patrykdesign/6427428933/in/set-72157628209207387 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 not alienate users of the older OS version. | See an [http://www.flickr.com/photos/patrykdesign/6427428933/in/set-72157628209207387 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: | 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: | ||