Updated: Added link to slides from presentation by Taptu’s Stefan Butlin – 13-Nov-2008.

This is the second part of my wrap up from yesterday’s Mobile Web 2.0 event.  The first part covered the morning business track.  The business track continued in the afternoon but I chose to attend the afternoon developer or “Builder” Track.

Caroline Lewko started things off with a welcome and some tips on marketing applications. Caroline urged developers to sell through as many channels as possibe and to not discount carrier partnerships,  pointing out that 75% of mobile applications are sold on deck.

The first panel on “Mobile Web vs. Applications vs. Widgets” was chaired by C. Enrique Ortiz and featured Tim Haysom (OMTP), Phong Vu (Nokia), Charles Wiles (Google), Fabrizio Capobianco (Funambol) and Jeff Sonstein (Rochester Institute of Technology)

Enrique started by saying that the number of web runtimes has exploded in the last year and asked the panel for their take on that.  Google’s Wiles argued for the browser as a  platform and saw no need for web runtimes. Nokia’s Vu disagreed and was supported by Funambol’s Capobianco who felt that there will always need to be  applications outside the browser and that web runtimes could provide a stable platform for them. RIT’s Sonstein countered that the browser was a web runtime and that what mobile needed most were standards for low level access to device data and wondered if BONDI would supply them.

Enrigue next set the panel to work on defining the killer application in mobile. Fabrizio nominated “un-sexy” messaging.  Other panelists mentioned voice, NFC and barcodes as possible “killers”. Nokia’s Vu feels that NFC will eventually replace Bluetooth for phone to phone sharing.  In response to a question, OMTP’s Haysom said that NFC and barcodes are not part of the initial BONDI specification but are on the radar for future inclusion.

—

Next up, Brian Fling chaired a panel on the Mobile User Experience. Participants included Barbara Ballard (Little Springs Design), Christian Lindholm (Fjord) and Thomas Fellger (Iconmobile).

The session was a wide ranging discussion on mobile trends as much as design. One major trend that Barbara Ballard sees is the entry of web developers and designers into the mobile space bringing “web thinking” into mobile, which is both good and bad.  The web folks bring innovation but also have a tendency to force web design patterns on mobile, degrading usability.

Iconmobile’s Thomas sees the emergence of new tools and platforms like widget runtimes making it easier to create mobile services and applications, most of which aren’t very good. These quick and dirty apps sometimes demonstrate innovative concepts which can then be built upon to to create something of real value.

Brian Fling pointed to the Amazon Kindle as the tip of the iceberg of ubiquitous computing.

Thomas sees the phone becoming a “remote control for your life” where the handset is your wallet and performs functions like opening doors.  Audi is already bundling a phone that acts as a “smart key” with their cars in some markets.  In Japan eWallet use has caused a significant drop in the number of coins in circulation.  Most Japanese iPhone users carry a second handset because the Apple phone lacks a wallet function.

—

Next up was a series of lightning fast 20 minute development “tutorials”

First was Taptu‘s Stefan Butlin on “Building, dynamic, compelling, ad-funded, off-deck mobile web content” or “What’s hard about mobile web” Stefan identified five challenges:

Handset Diversity – Taptu sees 3000 unique UserAgents a day, all with different attributes and quirks. Sony Ericsson’s tend to oversize text, some Nokia’s struggle with CSS floats, Many Motorolas including the ubiquitous RAZR V3
have a very small page size limit.

What can mobile web developers do? There are three basic approaches:

• Take the Least Common Denominator approach and build a minimalist site that works on most devices but doesn’t really look great on any.
• Tough Love – Target the most popular devices and let the others break.
• Adaptation- detect the browser and optimize for it. The approach Taptu takes. They use the Open Source WURFL library to detect the device and browser version.  Using WURFL’s data augmented with a database of handset quirks, Taptu groups handsets into five device classes
  1. The iPhone
  2. The HiPhones – recent S60 and Windows Mobiles devices
  3. The LoPhones – Motorolas and other phones with basic xhtml-mp browsers
  4. BlackBerries – The BB browser has ready bad CSS support and lots of quirks
  5. WML-only phones – not supported = Tough Love.

Each class is handled by it’s own adaptation code which further optimizes markup for each handset and resizes images to a percentage of WURFL screen width.

Transcoders – they break device detection and can really destroy a nicely designed mobile page. Defend against them every possible way: get whitelisted with every carrier, use the no-transform and link meta tags, check the x-Device-User-Agent for the real user agent.

User Identification – cookie support on mobiles is hit or miss and it’s hard to detect whether cookies are really persistent or if they disappear when the user closes the browser. On Openwave browsers session cookies work on 3 part domains like m.taptu.com but not taptu.com!

You can also use Bango which has agreements with most carriers to pass a unique user id. On course this doesn’t work if the phone is using WiFi.

Testing – You really need to test every phone on every network, but that’s impossible. Besides having a library of popular phones you can use:

• Feedback forms – let users tell you what is broken
• Local retailers – test phones in mobile phone shops
• DeviceAnywhere

Build quality by giving your users a voice:

• Host a feedback forum. Warning: Brace yourself for honesty.
• Cultivate advocates on the forums.
• Conduct simple surveys on your mobile sites, just a few multiple choice questions.

Stefan’s slides on Slideshare.

—

Brian Fling next demonstrated building an iPhone web app. He prefaced his tutorial by saying that iPhone traffic was doubling every three months and that he projects 10% of all web traffic will be from mobiles by end of 2009.  Reason enough to build for the mobile web.

Brian’s web app was an online schedule for the Mobile 2.0 conference. He started with a page (generated from a PHP script) holding an unordered list. Brian used the SimplePie PHP library to populate the list elements from an RSS feed. CSS transforms were used to provide rollover effects.

Brian showed a neat trick to make the page degrade gracefully in Opera Mobile and other mobile browsers that support handheld stylesheets. The iPhone CSS is linked as media=”screen, projection”. There is also a handheld stylesheet with a smaller logo image and a title that Opera loads and the iPhone ignores.

You can try out Brian’s web app at mobile20.mobiledesign.org. The source code can be downloaded at mobile20.mobiledesign.org/code.zip.

—

Next, Barbara Ballard presented a Mobile Design Case Study demonstrating how mobile optimized design can improve usability, save time, reduce support costs and enhance your brand’s image.

Barbara’s use case was to add a single item to an existing expense report.

• First run was using a typical full web online expense reporting application and a good full web mobile browser- the task took 13 minutes and 93 clicks.
• A typical mobile web app designed by an engineer was better – 7 min 51 clicks
• Using Barbara’s highly optimized “Intelligent design” the task took only 2 minutes, 25 clicks – which is about as good as can be achieved with today’s technology.
• In a year or two using a home screen widget and receipt scanning software linked to the phone’s camera it will be possible to eliminate data entry and further reduce the time to 1.5 minutes and clicks to only six.

Pretty impressive, Barbara’s slides are available on Slideshare

—

Markus Spiering from Yahoo next demonstrated using Yahoo! Blueprint to build widgets, standalone applications and mobile web sites.

Markus described Blueprint as an  X-Forms as based XML markup language that is purely declarative, there is no scripting or procedural code. Developers use a serverside application written in PHP, Java or any other langage to create Blueprint XML, a process very similar to building HTML.

Blueprint is quite powerful thanks to controls like a Location Chooser which uses GPS if it is available or else prompts the user for their location. Another control makes it possible to add driving directions or an interactive map three lines of code.

The same Blueprint markup can run as a Widget in the Yahoo Go 3.0 carousel, as a standalone application or as a mobile web site.

Yahoo is using Blueprint internally to built their latest mobile applications including oneConnect and a search engine for the AT&T mobile portal. The same technology is available for free to all developers at mobile.yahoo.com/developers.

—

Nokia’s Phong Vu next demonstrated building widgets with the S60 Web Runtime.
Nokia Web Widgets are based on xhtml, DOM level 2, Ajax, CSS and JavaScript.

A great feature of Nokia’s widgets is that they are fully integrated into the S60 user experience, they run, act and feel like native applications and are launched from standard S60 menu icons. Access to device functions including power level, signal, memory, storage, lights, vibration and beeps are available through a SAPI framework extension

The next release of WRT, 1.1 will be supported on S60 5th edition (nokia 5800) and will add further integration with the S60 GUI, JQuery support and will give signed widgets access to additional platform capabilities including calendar, contacts and location. The WRT roadmap includes eventual support for offline storage.

Phongs slides are on slideshare. To get started developing widgets with WRT visit this page on Forum Nokia

—

Google’s Charles Wiles presented the last tutorial covering Gears on Android.
Charles dissected the Running Man application,  which is one of the demos that is included in the Gears distribution. Key points:

• Gears includes an API that makes it easy for an application to add a desktop shortcut on Android or Windows mobile.
• SQL Lite database support is included for offline storage and synchronization.
• A geolocation API that can use GPS, cell ID or WiFi to locate the user.
• The Google Maps API allows embedding maps in a web page with a JavaScript call.

Currently Gears runs on Windows Mobile 5 and 6 and Android. A version for Opera is in QA now and additional platforms are coming soon. Get started with Gears at code.google.com/apis/gears/

Related Posts:
2008 Mobile 2.0 Event San Francisco – Part 1
Mobile 2.0 Event (2007)