Rendering on Smartphones

Symbian - Nokia S60 3rd edition

• Devices: N91, N80, N71, N73, E60, E50, E61, 3250...
• SymbianOS v9
• Our testing were mainly done using Safari on a Nokia N80

Browsers

To my knowledge 3 browsers are available on those smartphones; the names mentioned below are the applications icon name as they should show on your phone in English language:

• Services: this is the default web browser on those smartphones as I believe it is this one that is used when following links from SMS for instance. It also shows at the root of the application menu. AFAIK it was developed internally by Nokia since initial dedicated for WAP pages. Todays user experience with that browser is crap. It feels slow, looks ugly, ignore most CSS (if not all?), limited javascript support (if any?). Shipped with all Nokia's SymbianOS phones since 2001.
• Web: Nokia's Safari port. That's the one browser most user will use to go on the internet. Good user experience. Shipped with all S60 3rd edition phones (2006).
• Opera: Likely to be used by power users. For sell on www.opera.com.

User-agent samples

• Opera: Mozilla/4.0 (compatible; MSIE 6.0; Symbian OS; Nokia N80/; 9730) Opera 8.65 [en]
• Safari: Mozilla/5.0 (SymbianOS/9.1; U; en-us) AppleWebKit/413 (KHTML, like Gecko) Safari/413
• Services: NokiaN80-1/3.0 (4.0623.0.22) Series60/3.0  Profile/MIDP-2.0 Configuration/CLDC-1.1

PatternSkin

PatternSkin renders fine though it forces horizontal scrolling which make it rather inconvenient to use and read through. Horizontal scrolling is never a good idea even less on Smartphones.

• Can read the entire content
• sidebar is deferred until after the article
• Horizontal scrolling
• A lot of extra things (sidebar, header) to download

NatSkin

NatSkin renders just great when the side bar is off. With the side bar on however it takes most of the screen and the main topic content is ridiculously stretch vertically making it unreadable.

• No horizontal scrolling
• Topic content displays perfectly when side bar off
• Long line in verbatim block has a proper in-page horizontal scroll bar.
• Broken rendering when side bar is on.
• Top bar is messed up.
• Can't do cross web navigation without side bar.
• Large table in topic content overflow.

ClassicSkin

ClassicSkin is doing a very good job. Topic content is very readable. Certain topic content triggers horizontal scrolling though.

• No left bar.
• No horizontal scroll.
• Not much beside the content to download
• Long line in verbatim block triggers horizontal scrolling. (not a problem with #Opera)
• Can't do cross web Navigation. It only links to TWiki, Main and Sandbox Webs but I think this is not specific to the platform it's more a bug in the skin.

Improvement ideas

• Can we extend the Breadcrumb so that the left most link is the user's side bar topic. That would enable easy navigation without side bar.
• We need to be able to change the default skin and/or NatSkin configuration according to the user-agent. Can we do that through a plugin? Should not be too difficult to enhance NatSkinPlugin to do that. Or maybe just use #USER_AGENT_aware_topic.

Opera

Opera is a web browser specifically designed for hand-held devices and narrow screen. In some respect it does a better job that Nokia's Safari port. Basically rather than trying to display tables in rows it displays them one cell at a time like if it was a single column table. So when displaying a page using tables for layout like NatSkin does you end-up having your left bar at the top, your content below and your right bar at the bottom. That seems like a clever way to make sure most pages are readable. Yet table in the topic content also get rendered in one column; even those that fit the screen and actually display fine in Safari.

Overall though Opera does a better job at rendering pages than Nokia's Safari port. That makes things easier for the skin developer. Yet your average phone user probably won't bother downloading, installing and paying Opera - if he does browse the web at all on his phone ;). Mobile skin must display properly on Nokia's Safari port as it ships with the phone.

USER-AGENT aware topic

Here is the solution implemented on slion.net to guarantee page readability across browsers and platforms. Above all we needed to hide the side bar for proper rendering on smartphones. Note that slion.net is using NatSkin so the solution described here is somewhat NatSkin specific and notably uses IfDefinedPlugin. However a similar solution could easily be implemented for other skins.

We are basically making TWiki output different topic content according to the USER-AGENT. In our case we used the following topic structure on Main.TWikiWebSideBar to obtain the desired effect.

%IFDEFINEDTHEN{"%HTTP{"USER_AGENT"}%" as=".*(Symbian|Series60).*"}%

<!-- Hide side bar on SymbianOS -->

<style type="text/css">
.natSideBar { display:none; }
</style>

%ELSIFDEFINED{"%HTTP{"USER_AGENT"}%" as=".*MSIE 6.0.*"}%

<!-- You are using IE 6.0! -->
<!-- Standard NatSkin menu -->

%ELSEDEFINED%

<!-- Full blown fancy Javascript transparent pop-up menu  -->

%FIDEFINED%

This solution render just fine one all #Browsers.

Omissions

• A very limited set of topic content were tested.
• Mainly the view templates were tested.
• Did not test older Nokia web browser as I think they are planning to remove it from their ROM image in favour of the Safari port.
• Did not systematically test Opera.
• What about SymbianOS phones running UIQ.

Outstanding issues

• Test #USER_AGENT_aware_topic on S60 2nd edition devices
• Implement a solution for cross web navigation without the side bar:
  • MichaelDaum suggest switching on the WebButtons in NatSkin
  • Add a root item to the breadcrumbs to get something like: MyHome >> MyWeb >> MyTopic . MyHome linking to the side bar topic for instance.

Conclusions

Modern Smartphones web browsers appear to handle well most topic content. The main issue really is about hiding the side bar on narrow screen devices, this can be achieve by doing #USER_AGENT_aware_topic. However topic content itself should be implemented while keeping in mind the limitation of narrow screen devices.

NatSkin/clean without side bar seems to render just fine on Smartphones.

Links

• http://www.alistapart.com/articles/pocket/
• http://www.w3.org/TR/REC-CSS2/media.html

Notes

Could not get that Opera @import url(...) handheld trick to work.

-- Contributors: StephaneLenclud, KwangErnLiew - 31 Mar 2007

Discussion

Thanks for the report. Did you try the classic skin?

-- PeterThoeny - 13 Jan 2007

Good point! That was lacking.

-- StephaneLenclud - 15 Jan 2007

FYI, the ClassicSkin's weblist is controlled by TWikiPreferences' WIKIWEBLIST setting. For example, it can be replaced with a dynamically generated list (as documented), or with a picklist that uses very little space.

-- PeterThoeny - 15 Jan 2007

You can navigate across webs in NatSkin switching on the WebButtons. These are diplayed as tabs above the content area.

Anyway, it would help to have screenshots to illustrate rendering problems ... maybe taking another digital camera.

-- MichaelDaum - 16 Jan 2007

Interesting - PalmOS devices such as the Treo smartphones have various browsers including Blazer (built-in), and OperaBrowser (free download, Java based). OperaBrowser is quite widely available on a huge range of smartphones and even less complex featurephones, as long as they include Java support, which is very common these days.

To run a TWiki server on a smartphone, see also TWikiOnSymbian, TWikiOnPalm and other TWikiOn topics.

-- RichardDonkin - 20 Jan 2007

From forum Nokia:

• development for mobile web users
• Mobile Browsing iFrame Test Example

-- StephaneLenclud - 26 Jan 2007

What about having user-agent specific preferences and include those in the TWiki.TWikiVariables#Setting_Preferences_Variables priority chain? Probably not convenient to implement and not CPU friendly either. Was just a thought

-- StephaneLenclud - 05 Apr 2007