Maemo Browser

1. Maemo Browser Mikko Korpelainen Maemo Summit 2009 11.10.2009

2. Maemo Browser for power users <ul><li>Full Internet what is it? </li></ul><ul><ul><li>Technology </li></ul></ul><ul><ul><li>Full Flash support </li></ul></ul><ul><ul><li>Performance </li></ul></ul><ul><ul><li>Screen size </li></ul></ul><ul><ul><li>Interacting with the content </li></ul></ul><ul><li>Shortcuts </li></ul><ul><li>How to optimize web-pages for N900 </li></ul>

3. Maemo Browser – Technology <ul><li>To have full Internet, one has to be able to render the latest web technologies </li></ul><ul><li>For Maemo, the best way to accomplish that is to use the Mozilla Gecko engine </li></ul><ul><ul><li>about: for the current engine version </li></ul></ul><ul><ul><li>http://en.wikipedia.org/wiki/Comparison_of_layout_engines to find out the capabilities </li></ul></ul><ul><li>Gecko 1.9.2a1pre in N900 PR1.0 </li></ul><ul><li>Gecko 1.9.2 in N900 PR1.1 </li></ul>

4. Maemo Browser – Full Flash <ul><li>Most of the 100 most popular web pages use Adobe Flash to provide the full user experience </li></ul><ul><li> to have full Internet, you need to have full Flash support in the browser </li></ul><ul><li>Full Adobe Flash 9.4 (Version string 9.0.246.0) </li></ul><ul><ul><li>== Flash 9 + H.264 support + HE-AAC + security fixes </li></ul></ul><ul><ul><li>http://www.adobe.com/software/flash/about/ </li></ul></ul>

5. Maemo Browser - Performance <ul><li>User experience is also about smoothness. There is no full Internet with poor performance. </li></ul><ul><li>Responsive UI </li></ul><ul><ul><li>Kinetic panning fast and responsive </li></ul></ul><ul><ul><li>Transitions fast </li></ul></ul><ul><ul><li>Reacts to user input immediately </li></ul></ul><ul><li>Page load times </li></ul><ul><li>Smooth frame rates </li></ul><ul><ul><li>In video, animation etc </li></ul></ul>

6. Maemo Browser – Big screen <ul><li>It is important to show a familiar view of the page, similar to that on desktop to really talk about the full Internet. </li></ul><ul><li>800x480 pixels helps with the initial view </li></ul><ul><li>Zooming is an important aspect also </li></ul><ul><li>Default mode is the full screen mode to promote the content </li></ul><ul><ul><li>Typical browsing session can be done in full screen only </li></ul></ul><ul><ul><li>Just start typing for a new URL in full screen </li></ul></ul><ul><ul><li>Use “Backspace” to go back one page and swipe from right to bring the visual history up </li></ul></ul><ul><ul><li>“ Ctrl+Backspace ” to go multitasking on the dashboard </li></ul></ul>

7. Maemo Browser – Interaction <ul><li>Not everything can be panned and clicked in the Internet, sometimes more advanced methods are needed </li></ul><ul><li>That is why we introduce the interaction modes: </li></ul><ul><ul><li>Panning </li></ul></ul><ul><ul><li>Hover </li></ul></ul><ul><ul><li>Manipulation </li></ul></ul>

8. Maemo Browser – Panning mode <ul><li>This is the predominant, default mode for the browser. In this mode, whenever you move the finger on the screen the web page underneath is panned. </li></ul><ul><li>There are no visual clues when being in this mode </li></ul><ul><li>Special keys: </li></ul><ul><ul><li>Space Scroll one screen-full down </li></ul></ul><ul><ul><li>Shift+Space Scroll one screen-full up </li></ul></ul><ul><ul><li>Shift+Long tap on screen Invoke content sensitive menu on content </li></ul></ul>

9. Maemo Browser – Hover mode <ul><li>Hover mode is used to activate mouse-over actions and to interact on a web-page. </li></ul><ul><li>Hover mode can be entered from the panning mode by dragging your finger from outside the screen on the left side to the screen. There is a big cursor above you finger once it enters the screen. Hover mode is exited by releasing the finger. </li></ul><ul><li>The mouse cursor is off-set from the point touching the screen to make it visible under your finger. </li></ul><ul><li>By using the Space/Shift to do the click actions, this mode pretty much equals to a mouse on a desktop </li></ul><ul><li>In addition to the big cursor there is an icon for entering the manipulation mode (an even bigger cursor!) on the screen. </li></ul><ul><li>Special keys: </li></ul><ul><ul><li>Space or Shift Left click </li></ul></ul>

10. Maemo Browser – Manipulation mode <ul><li>Manipulation mode is used to interact with the content on a web-page. For example to select text or to interact with Flash content or to pan Google Maps or edit the route in Google Maps or, you'll get the idea... </li></ul><ul><li>Manipulation mode can be entered from the hover mode by clicking the cursor icon on the screen. Upon click the icon changes to represent "exit from manipulation mode" (huge cursor with red stripe). </li></ul><ul><li>In manipulation mode, there is no off-set in the interaction so the interaction happens at the point of touch (as opposed to the hover mode) </li></ul><ul><li>Special keys: </li></ul><ul><ul><li>None </li></ul></ul>

11. Maemo Browser – Keyboard shortcuts 1/2 1.0 Ctrl+Backspace Go to dashboard 1.0 Backspace Go back one page 1.0 Ctrl+R Reload 1.0 Enter When focus in single line editor, this shortcut should submit the form 1.0 Ctrl+O Open file 1.0 Ctrl+S Save as 1.0 Ctrl+N New window 1.0 Ctrl+F Find on the page 1.0 Ctrl+Right/Left Move the insertion point to the end (beginning) of the current word in the editor 1.0 Ctrl+A Select all 1.0 Ctrl+X Cut 1.0 Ctrl+V Paste 1.0 Ctrl+C Copy Release Shortcut Functionality

12. Maemo Browser – Keyboard shortcuts 2/2 Release Shortcut Functionality 1.1 Shift+Up Jumps to top of page 1.1 Shift+Down Jumps to bottom of page 1.1 Ctrl+L Sets auto-focus to URL bar on or off 1.0 Ctrl+Left Cycles thru browser engine text field widgets in reversed order 1.0 Ctrl+D Deletes a download in download dialog 1.0 Ctrl+R Resumes download in download dialog 1.0 Ctrl+P Pauses download in download dialog 1.0 Ctrl+Right Cycles thru browser engine text field widgets 1.0 Shift+Space Scroll one screen height up 1.0 Space Scroll one screen height down 1.0 Ctrl+D Add bookmark 1.0 Ctrl+B Open bookmark list

13. Maemo Browser – How to optimize web pages for N900? <ul><li>Catch N900 by catching “N900” or “Maemo Browser” in the UA string </li></ul><ul><li>Screen size (800x480), but fast panning that should be taken into use </li></ul><ul><li>Big enough elements for fingers (70px height minimum for finger interactions on N900) </li></ul><ul><li>24px is the best font size to guarantee readability (row height and leading 30px). secondary font is 20px and 18px is the minimum </li></ul><ul><li>you have 800px to work with horizontally, so add padding (8px to look nice 16px to look even better) </li></ul><ul><li>Don’t use transparency in Flash or elsewhere, try to work around it </li></ul><ul><li>Sorenson Spark codec gives best frame rates for Flash video </li></ul><ul><li>We are going to release a more exhaustive document about the optimizations in the near future </li></ul><ul><li>If you would like to develop or optimize Flash content for the N900, you can apply for funding from the Open Screen Project Fund: learn more at http://openscreen.forum.nokia.com/ </li></ul><ul><ul><li>As with Flash Lite apps, Adobe and Nokia are looking for ideas that are innovative and especially push some device-specific enhancement </li></ul></ul>

14. Thank you ! Mikko Korpelainen Maemo Summit 2009 11.10.2009

15. Extra content

16. Maemo Browser – How to send key events to the content (non-Flash)? <ul><li>Full Screen browsing needs a quick way to enter URLs, otherwise people go to normal screen to type the address. </li></ul><ul><ul><li>That is why typing goes to URL bar by default </li></ul></ul><ul><li>If the focus is on Flash content, the key events go to Flash always </li></ul><ul><li>However some content expects key events (Google Reader for example), so </li></ul><ul><li>In 1.0 : </li></ul><ul><ul><li>Enter the manipulation mode </li></ul></ul><ul><li>In 1.1 : </li></ul><ul><ul><li>Toggle between sending text to URL or to content by pressing Ctrl+L , or by adjusting the setting “Auto-focus on URL” </li></ul></ul>