Maemo Browser

Maemo Browser Mikko Korpelainen Maemo Summit 2009 11.10.2009

Maemo Browser for power users

Full Internet what is it?

Technology

Full Flash support

Performance

Screen size

Interacting with the content

Shortcuts

How to optimize web-pages for N900

Maemo Browser – Technology

To have full Internet, one has to be able to render the latest web technologies

For Maemo, the best way to accomplish that is to use the Mozilla Gecko engine

about: for the current engine version

http://en.wikipedia.org/wiki/Comparison_of_layout_engines to find out the capabilities

Gecko 1.9.2a1pre in N900 PR1.0

Gecko 1.9.2 in N900 PR1.1

Maemo Browser – Full Flash

Most of the 100 most popular web pages use Adobe Flash to provide the full user experience

 to have full Internet, you need to have full Flash support in the browser

Full Adobe Flash 9.4 (Version string 9.0.246.0)

== Flash 9 + H.264 support + HE-AAC + security fixes

http://www.adobe.com/software/flash/about/

Maemo Browser - Performance

User experience is also about smoothness. There is no full Internet with poor performance.

Responsive UI

Kinetic panning fast and responsive

Transitions fast

Reacts to user input immediately

Page load times

Smooth frame rates

In video, animation etc

Maemo Browser – Big screen

It is important to show a familiar view of the page, similar to that on desktop to really talk about the full Internet.

800x480 pixels helps with the initial view

Zooming is an important aspect also

Default mode is the full screen mode to promote the content

Typical browsing session can be done in full screen only

Just start typing for a new URL in full screen

Use “Backspace” to go back one page and swipe from right to bring the visual history up

“ Ctrl+Backspace ” to go multitasking on the dashboard

Maemo Browser – Interaction

Not everything can be panned and clicked in the Internet, sometimes more advanced methods are needed

That is why we introduce the interaction modes:

Panning

Hover

Manipulation

Maemo Browser – Panning mode

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.

There are no visual clues when being in this mode

Special keys:

Space Scroll one screen-full down

Shift+Space Scroll one screen-full up

Shift+Long tap on screen Invoke content sensitive menu on content

Maemo Browser – Hover mode

Hover mode is used to activate mouse-over actions and to interact on a web-page.

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.

The mouse cursor is off-set from the point touching the screen to make it visible under your finger.

By using the Space/Shift to do the click actions, this mode pretty much equals to a mouse on a desktop

In addition to the big cursor there is an icon for entering the manipulation mode (an even bigger cursor!) on the screen.

Special keys:

Space or Shift Left click

Maemo Browser – Manipulation mode

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...

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).

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)

Special keys:

None

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

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

Maemo Browser – How to optimize web pages for N900?

Catch N900 by catching “N900” or “Maemo Browser” in the UA string

Screen size (800x480), but fast panning that should be taken into use

Big enough elements for fingers (70px height minimum for finger interactions on N900)

24px is the best font size to guarantee readability (row height and leading 30px). secondary font is 20px and 18px is the minimum

you have 800px to work with horizontally, so add padding (8px to look nice 16px to look even better)

Don’t use transparency in Flash or elsewhere, try to work around it

Sorenson Spark codec gives best frame rates for Flash video

We are going to release a more exhaustive document about the optimizations in the near future

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/