canmove, Confirmed users
1,126
edits
Fennec/NativeUI/UserExperience/ReaderMode: Difference between revisions
Jump to navigation
Jump to search
m
Fennec/NativeUI/UserExperience/ReaderMode (view source)
Revision as of 11:01, 29 April 2012
, 29 April 2012s/http/https/ for embedded external images to stop mixed content security warnings
No edit summary |
m (s/http/https/ for embedded external images to stop mixed content security warnings) |
||
| Line 3: | Line 3: | ||
<b>Problem:</b> The new browser design is heading towards a chromeless / buttonless aesthetic, how do we introduce the reader mode?<br> | <b>Problem:</b> The new browser design is heading towards a chromeless / buttonless aesthetic, how do we introduce the reader mode?<br> | ||
<b>Solution:</b> 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. In tablets there is another possible interaction: it would be interesting to have a feature (perhaps ON by default) where when you rotate the device from landscape to portrait the page would automatically enter reader mode.<br><br> | <b>Solution:</b> 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. In tablets there is another possible interaction: it would be interesting to have a feature (perhaps ON by default) where when you rotate the device from landscape to portrait the page would automatically enter reader mode.<br><br> | ||
https://farm8.staticflickr.com/7017/6560941471_5153493ffa_b.jpg<br> | |||
[http://www.flickr.com/photos/patrykdesign/6560941471/in/set-72157628389027877/ Proposed Visual Design Mock Up] | [http://www.flickr.com/photos/patrykdesign/6560941471/in/set-72157628389027877/ Proposed Visual Design Mock Up] | ||
<br><br> | <br><br> | ||
| Line 10: | Line 10: | ||
<b>Problem:</b> Add functionality to the reader mode while still maintaining a chromeless, reading focused layout.<br> | <b>Problem:</b> Add functionality to the reader mode while still maintaining a chromeless, reading focused layout.<br> | ||
<b>Solution:</b> Introduce off screen menus rendered visible with swiping gestures.<br><br> | <b>Solution:</b> Introduce off screen menus rendered visible with swiping gestures.<br><br> | ||
https://farm8.staticflickr.com/7008/6517216455_d480da0ea1_b.jpg<br> | |||
[http://www.flickr.com/photos/patrykdesign/6517216455/in/set-72157628389027877 Sample Interaction Flow]<br><br> | [http://www.flickr.com/photos/patrykdesign/6517216455/in/set-72157628389027877 Sample Interaction Flow]<br><br> | ||
https://farm8.staticflickr.com/7166/6560945787_f996192027_b.jpg<br> | |||
[http://www.flickr.com/photos/patrykdesign/6560945787/in/set-72157628389027877 Proposed Visual Design Mock Up]<br><br> | [http://www.flickr.com/photos/patrykdesign/6560945787/in/set-72157628389027877 Proposed Visual Design Mock Up]<br><br> | ||
https://farm8.staticflickr.com/7015/6589809399_8a96004c7d_b.jpg<br> | |||
[http://www.flickr.com/photos/patrykdesign/6589809399/in/photostream Examples of Article Navigation (Potentially for a future release)] | [http://www.flickr.com/photos/patrykdesign/6589809399/in/photostream Examples of Article Navigation (Potentially for a future release)] | ||
<br><br> | <br><br> | ||
| Line 21: | Line 21: | ||
<b>Problem:</b> How do we access / display the various options without intruding on the reading experience<br> | <b>Problem:</b> How do we access / display the various options without intruding on the reading experience<br> | ||
<b>Solution:</b> 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.<br><br> | <b>Solution:</b> 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.<br><br> | ||
https://farm8.staticflickr.com/7202/6964642207_bdcff2b041_b.jpg<br> | |||
[http://www.flickr.com/photos/patrykdesign/6964642207/in/photostream Proposed Visual Design Mock Up] | [http://www.flickr.com/photos/patrykdesign/6964642207/in/photostream Proposed Visual Design Mock Up] | ||
<br><br> | <br><br> | ||
| Line 27: | Line 27: | ||
<b>4. Visual Variations</b><br> | <b>4. Visual Variations</b><br> | ||
Various Examples:<br><br> | Various Examples:<br><br> | ||
https://farm8.staticflickr.com/7149/6560944301_67bccaaee8_b.jpg<br> | |||
[http://www.flickr.com/photos/patrykdesign/6560944301/in/photostream/ Overall Layout & Typography, Sans Serifs will likely be Open Sans as seen in the later mock ups]<br><br> | [http://www.flickr.com/photos/patrykdesign/6560944301/in/photostream/ Overall Layout & Typography, Sans Serifs will likely be Open Sans as seen in the later mock ups]<br><br> | ||
https://farm8.staticflickr.com/7147/6560942271_dd0e2d08fe_b.jpg<br> | |||
[http://www.flickr.com/photos/patrykdesign/6560942271/in/photostream/ Colour Themes]<br><br> | [http://www.flickr.com/photos/patrykdesign/6560942271/in/photostream/ Colour Themes]<br><br> | ||
https://farm8.staticflickr.com/7145/6560945017_c71c0b0b7b_b.jpg<br> | |||
[http://www.flickr.com/photos/patrykdesign/6560945017/in/photostream/ Image Treatement, ideally if we could aim for the left example, flush layout.] | [http://www.flickr.com/photos/patrykdesign/6560945017/in/photostream/ Image Treatement, ideally if we could aim for the left example, flush layout.] | ||
<br><br> | <br><br> | ||
| Line 37: | Line 37: | ||
<b>5. Scalability</b><br><br> | <b>5. Scalability</b><br><br> | ||
https://farm8.staticflickr.com/7051/6964643319_6224330a9b_b.jpg<br> | |||
[http://www.flickr.com/photos/patrykdesign/6560940929/in/photostream/ Typography size scaling ratio pairs, we will need to create different ones for 7" and 10" tablets]<br><br> | [http://www.flickr.com/photos/patrykdesign/6560940929/in/photostream/ Typography size scaling ratio pairs, we will need to create different ones for 7" and 10" tablets]<br><br> | ||
https://farm8.staticflickr.com/7194/6821932828_7aeda656c3_b.jpg<br> | |||
[http://www.flickr.com/photos/patrykdesign/6821932828/in/photostream Phone to Tablet scaling, notice titles and picture location is different, we will need custom settings for various form factors]<br><br> | [http://www.flickr.com/photos/patrykdesign/6821932828/in/photostream Phone to Tablet scaling, notice titles and picture location is different, we will need custom settings for various form factors]<br><br> | ||
https://farm8.staticflickr.com/7195/6964642677_73c976d66f_b.jpg<Br> | |||
10.1" Tablet, looks great in portrait<br><br> | 10.1" Tablet, looks great in portrait<br><br> | ||
https://farm8.staticflickr.com/7180/6964642743_71b50a0794_b.jpg<br> | |||
A bit awkward in landscape, but ok for v.1<br><br> | A bit awkward in landscape, but ok for v.1<br><br> | ||
https://farm8.staticflickr.com/7197/6964642807_a12551d989_b.jpg<br><br> | |||
Perhaps we can add images or article scroll menu in landscape to maximize the space? v.1 would be nice, but if not v.2?<br> | Perhaps we can add images or article scroll menu in landscape to maximize the space? v.1 would be nice, but if not v.2?<br> | ||