S60 5th Edition: The touch devices
In 2008, Nokia released their first touch device, the 5800 XpressMusic, and with it browser 7.0, the first touch enabled browser. Within two years, versions 7.1 and 7.2 had been released. These browsers were a bit different. Not only were they based on the newer WebKit 525, but they also supported non-touch manipulation. Entirely non-touch versions were also produced for S60 3rd Edition FP 2 devices, along with multi-manipulation versions for hybrid devices such as the QWERTY and touch based N97.
|S60 5th Edition||3||
||Touch||5800 Xpress Music, 5230, 5530|
|S60 3rd Edition FP2||10||
||240 x 320 multi-orientation||Non-touch||6710 Navigator, 6730 classic, N86, E52, E55, E72, 6700 slide, N86 MP|
|S60 5th Edition touch||2||
||360 x 640||Touch QWERTY||N97, N97 Mini|
|S60 3rd Edition FP2||>5||
||240 x 320 multi-orientation||Non-touch||X5-01, C5-00, E5-00|
|S60 5th Edition Symbian^3||2 (5th)
||360 x 640 multi-orientation||Touch||5228, C6-00, N8|
- CSS and HTML rendering are quite similar across all 7.n browsers. If something works on one device, it will likely work on all of them, with the exception of the 5800 XpressMusic which initially shipped with WebKit 413.
- These are also the first browsers to support media queries, however only color and device-width values are available.
- CSS 3 properties support is enhanced to include background-origin, background-clip, webkit-background size, webkit-box-sizing, HSL colour and multiple backgrounds. Additional CSS selectors include the element state pseudo classes and most remaining CSS 2.1 bugs have been resolved.
- See Peter Paul Koch’s Mobile Compatibility tests for additional information on events, DOM and overall browser performance.
↑ back to top
- The touch browsers have a small default font size. An increase of 20-25% is recommended.
- These browsers have no formal touch events. Mouse events will (to a certain extent) reflect touch behaviour however there are differences in the interpretation of a mousedown, up, out and click across browsers.
- On browsers 7.0 and 7.2, a mouseover is triggered on the initial tap. A second tap triggers mousedown, mouseup and click events simultaneously, once the finger is released from the screen. Any :hover styles are also triggered at this time.
- On browser 7.1, a mouseover?? And mousedown event is triggered when a finger is pressed onscreen. No subsequent events occur on release.
- On all browsers, mouseout is triggered on subsequent tap, outside of the original tapped element. At this time, any :hover style is also disabled. Note as well that mouseover is only triggered on the initial tap. Repeated taps of the same element, with no tap outside to trigger a mouseout, will not trigger subsequent mouseovers.
- Depending on the browser implementation, the CSS hover style (:hover) may be triggered on mousedown.
- SVG-T 1.2 is supported however the practical implementation is poor. Users can download an SVG-T file and play it within a standalone player, however embedded SVG-T (i.e. using <embed>) displays in a small scrollable frame element. Displaying SVG via an <img> or <object> element is not supported. This makes SVG-T unusable from a practical point of view on web pages.
Recommended test devices
- Nokia 5800 XpressMusic: First touch device, browser 7.0 (WebKit 413)
- Nokia N97: Browser 7.1 multi-manipulation
- Nokia 6710 Navigator: Browser 7.1 non-touch
- Nokia N8: Browser 7.2 touch
- Nokia E5-00: Browser 7.2 non-touch
↑ back to top
Stephanie is a designer and closet anthropologist with a passion for the many ways people interact with technology. With a diverse background, Stephanie's expertise lies in marrying design, technology and business goals to craft simple, elegant experiences. A compulsive researcher, Stephanie is always keen to discover and share insights on the mobile web and mobility trends in emerging economies.