Mobile browser wars: Nokia microB vs. Firefox Fennec

Begun, this mobile browser war, has. When mobile internet is growing 8x faster than desktop internet everyone wants to have a share of it. In the core of this fight is the mobile browser – the doorway to the mobile internet.

Usually phone comes with a browser from the phone manufacturer: Safari ships with iPhone, Android ships with WebKit based browser and Maemo comes with Nokia microB. Besides the default browser, open platforms have seen third party browsers created for them: Opera Mini has 30 million users and several browsers have been created for Symbian platforms. (Note that iPhone is not really open platform regarding this as Apple developer terms specifically forbid creating alternative  browser engines for their Safari – all iPhone “browsers” are just the same Safari with new toppings).

Now Mozilla foundation is releasing Firefox Fennec (RC1 version is available  for Nokia N900), touted as the most innovative mobile browser this far. New user interface ideas, desktop syncronization and vibrant add-on community are something yet to be seen for mobile browsers. Mozilla did an amazing thing with Firefox when it actually managed to push Internet experience forward and compete against Microsoft’s bundled Internet Explorer with sheer quality. Can Mozilla repeat the same thing it did for desktop browsing for mobile browsing too?

Is Fennec good? I installed the release candidate and conducted some tests by visiting on popular sites. It is especially fruitful to compare Fennec against Nokia’s own microB browser as they both are based on the same Gecko rendering engine beneath the hood.

The differences of the browsers are, actually surprisingly, not limited to branding and user interface shell. Fennec is portable browser – Mozilla hopes to run Fennec on other mobile platforms beside Maemo in the future. Fennec user interface is based on Mozilla’s XUL library and you can actually run Fennec on your desktop computer too. Nokia’s interest, on the other hand, is have an optimized browser for their own mobile phones: microB user interface is using native Maemo user interface components.

Below are some aspects of the browsers compared against each other.

Start up time

• microB: instant
• Fennec: About ten seconds (warm start-up is little bit faster, but it is still slooooow….)

This is a pain for Fennec. Loading all that XUL Javascript  needed to run Fennec is just too much. You really don’t want to start Fennec for a quick browsing session, unless you have the patience of a cow. I am not sure whether N900 keeps microB loaded on the background all the time or what’s causing the difference.

User interface

This is really where Fennec shines. Nokia enjoys some reputation of being a boring engineer house with little innovation left to stir. After learning the trick of left and right sweep, which is cleverly demostrated on the start page, Fennec user interface instantly feels intuitive. microB, on the other hand, uses somehow clumsy “bottom right corner full-screen button” to access buttons and left-right sweep is not very well thought. For example, switching a tab/browser window takes three “clicks” on microB (show menu – switch application – choose next browser window) when Fennec does it with one sweep and click. Also, backward navigation is much more intuitive on Fennec and takes too many gestures on microB.

Both browsers have search integrated to the navigation bar. Fennec start screen is more clever, showing the history and shortcuts, while microB shows only the bookmarks.  Fennec navigation bar also is a combination of title and navigation bar, saving the precious screen estate on small physical form factor. Fennec zooms to text fields automatically when you start to input text into them and also have soft “tab keys” to navigate to next and previous input field.

Page reading and speed

On sites with above average layout complexity, Fennec is unbearable slow compared to microB, up to the point the browser is next to unusable in its current incarnation. As they both use the same rendering engine, I have hard time to understand how microB manages even the heaviest dynamic pages (Facebook profile page) when Fennec becomes unusable even on a moderate complex page (slashdot.org).

The thing with Fennec is that for some of the the time it does not register your interaction and does not have any indicator showing if it is responding – it has grinded to halt, little bit like desktop computer when swapping.  And even when Fennec is responding the scrolling of the page refreshment is sluggish compared to microB. This makes the page reading experience unusable. A normal user won’t stand 1-3 second frequent responsivity pauses or page movement which cannot be controlled.

microB must do the rendering somehow different  - is it hardware acceleration on font rendering, smarter management of images or some other trick?. However, until Fennec reaches the smoothiness of microB, there is no way I would switch to Fennec over microB.

(Note: You can press CTRL-Backspace from N900 keyboard to force application switch if you cannot exit from halted Fennec otherwise)

Mobile browsing

Though N900 has 800 pixel wide screen, it is still a mobile phone. Small physical size, low bandwidth with high latency and  limited CPU power might make you to pick a mobile internet version of the site when it is available. However, since the screen has exceptional high Dots-Per-Inch value, this poses a problem for rendering sites with the default font sizes.

Fennec does not seem to have a shortcut for setting a large text size. This is something one would hope to see on such high DPI device as the most of the time default web site fonts are too small to be usable. Also, Fennec does not use the shoulder plus and minus volume buttons for zooming – microB does it and it is very natural place for this function.

Fennec seems to have some difficulties with mobile site rendering: for example touch.facebook.com and yle.mobi are not scaled to full width. Instead a narrow colum of 1/3 screen width is displayed.

Bugginess

microB is very solid piece of software. It crashes more rarely than Safari on iPhone (might this be because of more memory – low memory conditions seem to be a normal crashing condition for Safari?).  Fennec is still in its first version and have some issues.

(Note: I managed to get Fennec to zombie state – I had to go to terminal and type killall fennec command to make the browser become launchable again).

Sites tested

Slashdot.org

Geek discussion site

microB: no problems

Fennec: slow, frequent pauses, not smooth scrolling

slashdot.org/palm

Very simple mobile version of the above.

microB:  Font too small

Fennec: Scales correctly

Facebook.com

High profile social networking site

microB: Sometimes little slow, but seems to work perfectly

Fennec: Unusable slow

touch.facebook.com

microB: Perfect (at least when scaling font up a little)

Fennec: Does not scale correctly (default scale uses only 1/3 of screen width, double click zooming scales too much)

yle.fi

Finnish national broadcasting company site

microB: Ok. Readable and usable with text size large.

Fennec: Ok. The default view is navigable, but not readable. You need to double-click zoom to read the text (Fennec doesn’t seem to have text size large option)-

yle.mobi

The mobile version of above.

microB: Perfect with text size large, ok otherwise (need to double click to zoom and then click to choose a link to follow).

Fennec: Ok – font size too small

GMail HTML version

The default Javascript version of GMail is too heavy for both the browsers. GMail still provides “Basic HTML” view as the fallback for devices with less CPU power and network bandwidth.

microB: Ok – you can do some basic emailing

Fennec:  Ok. Does not seem to be affected by as much of “slugginess” as other sites are (might the slugginess be a Javascript issue?)

Youtube.com

The web version of flash based video sharing site.

microB: Plays Flash movies ok – smooth scrolling even whilst a Flash movie is playing

Fennec: Frequent grinds to halt, sluggish, unusable. Manages to open Flash video, though.

m.google.com/youtube

The mobile version of above.

microB: Youtube claims the browser is unsuppoted

Fennec: Cannot enter the site – shows only the page of Youtube Mobile instructions

twitter.com  (web site)

microB: Perfect

Fennec: Ok. Sluggish when opening new pages, but still usable. Fennec start view ships with Twitter button, so one might assume this site is well tested for Fennec.

m.twitter.com

The mobile site of above.

microB: Ok – the default font size too small, but when settings text size large works well

Fennec: Ok – the default font size too small. Double click zoom does not work well on the twit feed, making reading difficult.

plone.org

A community site with relatively simple layout.

microB: Ok – minor rendering errors

Fennec: Ok – minor rendering errors

iltalehti.fi

Finnish tabloid web site with lots of images.

microB:  Ok

Fennec: Grinds to halt, unusable slow

Summary

Though having nice promise of innovation, the advise for Fennec development team would be “back to the basics”. The slugginess and response times of Fennec are such an issue that one would not yet consider it as an real alternative for Nokia’s default microB browser.

With Fennec’s user interface and microB’s speed one could have a near perfect mobile browser. Depending what kind of future co-operation Nokia and Mozilla foundation will have, we might live to see it.

Nokia N900, sports tracking and geotagging

This blog contains some tips how to use your Nokia N900 smart phone as a “augmented reality” sports device.

Sports tracking

Sport tracking is about collecting your sports activity data using GPS and other equipment. After running/cycling/skiing/whatever you see where you have been, how much time it took and how fast you are. In same cases you are able to calculate burnt calories and estimated heart rate.

N900 has at least one sports tracking application out there, eCoach.  eCoach is also suitable for professionals as it has heart rate monitor integration.

eCoach allows you record and  store sport activities. During the activity it uses Open Street Map based map viewer to show your current location. At least Helsinki area has very detailed maps available there, showing even the smallest trails, so you can safely venture to unknown neighbourhoods.

eCoach exports its tracks as GPX gps data file format. eCoach does not have any service integration yet, but you can upload this file to Nokia Sports Tracker and Map My Tracks. The recommend the latter as it has better social media integration and seems to be under active development. On the otherhand I have been using Nokia Sportstracker since 2007 and it has not really development during the whole this time and seems to lack will to go forward. Also Nokia has disabled track profile for imported GPX files which gives a message “we really don’t care about this service”.

There is also a service called mapmyrun.com with various domain names like “maymysomething.com”. Steer away from this service as I tested it and it didn’t live up to my expections (too much advertising, horrible user interface).

Some sport tracks I have made

• Run in Map My Tracks
• Another run in Map My Tracks
• The same run in Nokia Sportstracker
• All my runs in Nokia Sporstracker

Geotagging

Geotagging is about having GPS  coordinates on your photos. This way photos can be put on the map autotically in photo sharing services like Yahoo Flick or Google Picasa. When you known location, capture time and sharing license of the photo, all kind of fantastic services can be created, like Microsoft Photosynth.

Technically geotagging works by embedded GPS coordiates into the EXIF metadata of JPEG files.

N900 has geotagging as out of the box feature – no additional software needed. Just turn on it on in Camera application settings.

Also, you can retrofit your photos with geotagging information afterwards. You can do this by hand using labels and drag and drop in the most of photo sharing applications, like Google Picasa. Also there exist automated tools if you have relates GPS records available as GPX or KML file: checkout GPicSync. This is handy if you record your sports in eCoach and forgot to turn on geotagging in N900 camera. GPicSync also has a Google Maps export feature if you want to create custom maps for your friends or customers.

• An example map created with N900, eCoach,  GPicSync and Google Maps from one of the runs above

Sports tracking + geotagging = ?

I am still trying to figure out how to combine sports tracking and geotagging to something cool. Maybe something along the lines of urban exploration.

But in any case here are some of cities I have “collected” from my travels

• Budapest
• London
• Copenhagen
• New York (GPS was not exactly working well…)
• Oulu

PhoneGap ported on N900 (Maemo)

We have ported PhoneGap mobile application framework to the new Nokia N900 smartphone and its Maemo operating system. PhoneGap is a framework to build mobile applications easily with HTML and Javascript. With the new Maemo port PhoneGap platform support covers iPhone, Android, Nokia Series 60, Blackberry, Windows Mobile and Maemo, making it one of the most portable mobile application development solution available.

The demo application currently supports only Device Info and Accelerometer APIs. The porting work is still in its early stages and we suggest novice developers steer away from it. We’ll develop and maintain the work as long as we have client cases for mobile applications. If you are looking forward to port your commercial PhoneGap application to N900, please contact us.

PhoneGap port was done using QT and QWebView controller. The native shell source code is in C++. Build and packaging scripts are standard Makefiles. More technical information on the release notes page.

Code is available on GitHub.

So what’s cool about Maemo (compared to other PhoneGap platforms)?

Shortly: The openess of Maemo platforms enables developer innovation never seen before. There are zero artificial limitations chaining your imagination.

• No code signing whatsoever required
• No approval process to get your application distributed
• Very robust development tools and development environment. Hey, it’s Linux! The phone ships with X terminal built in.
• You have root access to the device if needed
• QWebView WebKit control which itself is open source – you can recompile from scratch and stick in the needed features
• The phone itself is rock solid. It beats iPhone 100-0.
• Maemo has very active open source community. You actually might get help when stuck, unlike with NDAs and other madness from some other vendors.

So what’s cool about PhoneGap (compared to other mobile application technologies)?

• Use low entry level HTML, CSS and Javascript technologies – even PHp coder can build his/her own mobile application! This is the most cost effective way to develop non-CPU-intensive applications.
• PhoneGap has the widest mobile platform support – the best medicine against fragmented mobile application markets
• You can always break out from the sandbox and use the native capabilities of the phone. This is something you cannot do with Flash Lite or Java ME.
• Very active community
• WebKit rendering engine enables CSS3 goodies and much more
• Easily convert your existing mobile site to an application

Building a mobile site and applications with Django and Python

Recently we created a mobile site for an interactive bicycle tour. oulugo.mobi (you need to use mobile browser to access the site or you’ll get a redirect) is a multimedia enriched bicycle tour through the historic parts of the city of Oulu. All content is provided by OnGo.

The route, which you can bicycle through is drawn on Google Maps. There are nine  action points where the user can listen to streaming audio clips, with still images, in his/her mobile phone. This is sort of  augmented reality experience: The user sees the real world (where he/she is now bicycling) combined with the historic events (audio playback narrative). For example, at Linnansaari (a location on the route) you’ll see the actual 17th century castle ruins and the narrator tells how the castle exploded when fire, caused by a lighting, reached gunpowder warehouse… boom. The explosion caused stones fly over 400 meters.

Alternatively, the clips are available as podcasts from Oulu Tourism pages. You can download them into your iPod for offline listening and use in conjuction with a paper map. This demostrates interesting mix of multichannel publishing: paper, web, mobile and podcasts.

The tour is bilingual in Finnish and English.

There exists unreleased iPhone application, based on PhoneGap, which allows the user to track his/her location real-time on the web page. We didn’t see it worth of trouble to go through Apple iPhone application review process. When location based service support comes for the browser this feature is indended to be included as the standard HTML5 feature of the service.

There also exists Nokia Series 60 mobile application, based on PyS60 and Series 60 BrowserControl API, which allows the user to track his/her location in real-time. The application provides wrapper around Series 60 WebKit control and allows Javascript to access phone native functions (GPS) over localhost socket communication. Like with Apple, we didn’t see real-time tracking feature interesting enough to go through Symbian Signed process to get our application released. Also, BrowserControl had seriousquality problems and we didn’t consider it stable enough for the end users. Some work is available in PyS60 Community Edition repository.

The service is hosted on Python specific virtual server on Twinapex services server farm.

Features

• Premium content tailored for audio listening
• Dubbed in English and Finnish by a professional voice actor
• Bilingual: English/Finnish
• Adapts for smartphones (WebKit based browsers) and low end phones (XHTML mobile profile browsers)
• Streaming video and audio (RTSP / progressive HTTP download forv iPhone). Different audio quality is provided on depending on the handset features.
• Screen resolution detection based on user agent sniffing. Three different version of images are used.
• Custom Google Maps component for mobile is used. The component adapts for different mobile phones based on sniffing. Features include zoom, show action point, show the current location, search street address name. This component can be published on a request.
• Management interface features include video upload, video transcoding different mobile versions and editing bilingual content
• Apex Vertex handset database is used to detect the user’s mobile phone capabilities
• Apex Vertex logging and traffic analytics capabilities are used for the site statistics

Software stack

• Ubuntu 8.04 Hardy Heron virtual server
• Apache 2.2 / mod_python
• Python 2.5
• Django 1.0
• Django-CMS 1.0
• mobile.sniffer Python package to provide abstraction over different handset databases
• Apex Vertex streaming solution (RTSP based on Darwin streaming server by Apple)
• TinyMCE WYSIWYG editor
• Darwin streaming server
• ExtJS is extensively used in Apex Vertext management interface

Development effort

Development time: Around 100 hours. Three different developers where involved. Used development tools: Eclipse, PyDev, Subclipse, Subversion. There were around five meetings between the content provider and the technology provider. Few beta testing rounds using iPhone application were performed by bicycling in -10 celcius degrees weather (north and so on…). No polar bears were harmed during the creation of this mobile service.

The service is linked in from Oulu Tourism pages and thousands of paper brochures printed for Oulu summer season 2009.

About the author Mikko Ohtamaa

• LinkedIn
• Twitter

XHTML mobile profile transformer and cleaner for Python

Mobile phones, and especially mobile site validators, are very picky about the validy of XHTML. It must not be any XHTML, but special mobile profile XHTML. Also, search engines like Google, will punish you in the mobile search results if your site fails to conform to mobile profile.

This is especially troublesome if you display external content (RSS feeds, ATOM feeds) on your mobile site. Incoming HTML cannot be guaranteed to follow any specification.

To solve this problem, we have created gomobile.xhtmlmp Python library which helps you to transform any HTML to content to valid XHTML MP. The library is piloted on plonecommunity.mobi site which  uses aggregated content from varying sources. The library is based on lxml.html.Cleaner. The library is part of GoMobile project which aims to create world class Python mobile web development tools.

Highlights

• Turn any incoming HTML/XHTML to mobile profile compatible
• Enforce ALT text on images – especially useful for external tracking images (feedburner tracker). ALT texts are required by XHTML MP.
• Protect against Cross-Site Scripting Attacks (XSS) and other nastiness, as provided by lxml.xhtml.clean
• Unicode compliant – eats funky characters

As an example we integrated gomobile.xhtmlmp  to Feedfeeder Plone add-on product.

Enjoy.

How to optimize your mobile site visibility

SEOptimize has an interesting post containing lots of resources for mobile internet growth, mobile site search engine optimizations and mobile web design. Keep this under your pillow, mobile folks!

The state of mobile browsers

Very interesting presentation from Peter-Paul Koch of Quirksmode.

pygame goes mobile

Pygame, the easiest way to make computer games in the world, has just reached your pocket.

Check our announcement at

http://discussion.forum.nokia.com/forum/showthread.php?t=152969

Planetmobile.us updates

Removed Forum Nokia announcements, since there are too many of them nowadays and they were flooding the blog making it useless.

Added few more blogs

• David Wood
• Andrew Grill
• Androinica
• Mobile Internet As It Is
• Mobispray
• Symbian Freak

Now our planet starts to feel useful. I’d hope to see more non-Symbian content. Please suggest some!

planetmobile.us up and running

planetmobile.us is a blog aggregator focused on mobile software development.The purpose of the aggregator is to give all good blogs in one packet, without the need to hunt them individually.

planetmobile.us was managed by Christopher Schmidt until I resurrected it few weeks ago.

Please feel free to subscribe your feed to the planet!