Over The Air 2011: Exploding the Gap Between Web and Native

James Hugman - Engineer at Future Platforms @jhugman

• Web vs Native is a false dilemma
  
  • the answer is: it depends, or it’s both
• often a lot of display in UI
• story of the glastonbury app
  
  • Orange app for iPhone, Android and Nokia
• three/four phases of content:
  
  • before (and before embargo)
  • during
  • after
• lots of data
  
  • 3000 bands, 65 stages – timings could change

experimentation & research

• assumed offline and native UI
• but native was too expensive for three platforms
• how do you make native in web technologies?
  
  • every phone has a different web view
  • Android users don’t like seeing iPhone UX
  • and Android back button can exit app if you’re not careful
  • there is no release cycle of WebKit
    
    • manufacturers just take the trunk and fix bugs
  • dev and cpu time spent getting UI just right
• Titanium: write your UI in Javascript, render natively
  
  • ListViews either don’t look right, or leak memory
  • doesn’t always deal with latest design patterns – can’t override platform-specific behaviours
• Impact for iOS: javascript talks to OpenGL
  
  • experimental & proprietary
  • morphed into appMobi’s DirectCanvas
• game{closure}
  
  • pre-alpha – HTML5
  • also node.js
  • debug your mobile app and your browser app all in the same browser
• but Game UI is not platform UI
  
  • easier to make cross-platform game UI as the UI is brand-specific, not platform specific
• important to get events passing between rendering and UI logic
  
  • all frameworks bundle their own Javascript engine
  • Android users don’t like big apps – Titanium hello world is 6Mb!

new platform

• Kirin requirements:
  
  • native, platform appropriate UIs
  • minimal download
• design:
  
  • native UI
  • JS application logic
  • native platform
• advantages:
  
  • raw events processed natively
  • only app-specific events passed through to app
• “the keyhole”
  
  • instantiate an invisible web-view
  • build proxies for objects
  • javascript calls into native and the other way
• modular javascript using CommonJS
  
  • each screen has its own module (one file each)
• threading using asynchronous APIs, inspired by node.js
• native-specific features available as services
  
  • e.g. Location, SQL, Network access
  • same Javascript to native bridge
  • JS just uses a require(...)

releasing as open source

• available now on github
• as a 0.5 release
• apache license
• looking for feedback
• iOS and Android only at the moment (Qt coming later)
• Windows Phone 7 might come later

Q&A

• testing & debugging:
  
  • build script runs node.js
    
    • so can include unit tests at build time with assert
    • have console access
    • no actual debugger
• why port model code – isn’t it simple?
  
  • but if using database on device, then model not so portable (Core Data doesn’t port well)
• porting pain? scaling to iPad?
  
  • most of pain was electronic programme guide
  • download & syncing

MomoLondon: Demo Night

I’m catching up on blog posts slowly. This one’s the Mobile Monday London Demo Night from 13th September… Together with Ewan and Sergio (manfully representing FuturePlatforms), I was presenting my Over The Air hack from the weekend (see previous post) and I was consequently suffering from a lack of sleep. Here’s a quick run down of the other presentations:

psonar

http://www.psonar.com/

• upload music to psonar
• get at music on any HTML5 connected device by streaming or downloading

roulette cricket

http://www.roulettecricket.com/

• great idea
• impressive implementation by FuturePlatforms, as usual…
• £2.50/month to play for prizes, or a revenue share from bets

HipSnip

http://hipsnip.com/

• mobile notepad for the things you want
• enhanced with smart searches & geolocation:
  • wine.com, cnet, imdb, yelp
• mobile design a little too small for hands… need to follow Apple HIG on Android too :-)
• user research: found that people take photos, or save a draft SMS but then forget
  • wanted to have a way to remind people

The logo is an aleph. Is that for infinity or for hebrew? The letter carved into the head of the golem…?

Toshl

http://toshl.com/

• personal expense record
• quite secure
• have apps for android, iphone & maemo
• sync to web
• on web, can analyze, export
• currently 45,000 users, 1/3 active
• iPhone downloads in 3 weeks almost surpassed Android’s 6 months
• are in negotiation with banks for auto-download
• currently have a freemium model, looking for investment from banks for rebranding
• some great observations:
  • RIM apps generally look ugly
  • front end and usability on mobile apps takes 50% of development time
  • cross platform development is nose bleeding expensive!

Collinson Group

http://twitter.com/mtjmelody

• Columbus Insurance is one of their brands
• a mobile trip planner
  • but with a surprisingly comprehensive offline database of airports, flight plans, hotels and car hire
• had a desktop version for quite a few years, just brought across to Apple platform

Appmarks

Adrian Cuthbert

http://www.myappmarks.com

• bookmarks in that point to specific places within apps
• want to add Android version too
• if app not available, offers to download it from store
• would like apps to supply relevant info

Milestone Planner

Benjamin Ellis

http://milestoneplanner.com/

• need a plan, but things change very fast
• wanted a plan on a page that everyone could update
• webapp written with HTML5 and javascript
• server keeps a full history of all changes
  • can view as list in webapp, RSS, export to twitter
• facilitating a discussion around the plan
• automatically generate weekly reports in PDF
• most planners are based on TODOs, this is based on outcomes and people instead, larger scale

Qootia

tomaz@qootia.com

• big screens that people can interact with by making voice phone calls
• good demo, with great timing from the presenter

Liquid Air Lab

http://twitter.com/spodtronic

• 480 apps developed on most popular smartphone platforms
• 7.8 million users
• 33,000 downloads per day
• Android users are little more techie
• BlackBerry users especially in the US
• Nokia user… is catching up fast… !?!?
• Ovi store has overtaken iPhone share
  • (since they have a special category for Radio apps…)
• iPhone is going down in share compared to the others
• started on Symbian and moved on to iPhone, etc
• now have 7 platforms…

MomoLondon: Living in a Multi-Platform World

Another Mobile Monday on fragmentation of platforms, but this time hosted by a big company just about to launch yet another platform… The Microsoft reps seemed to come on a little strong tonight. So much so that I started to tune out when it was their turn to talk.

Nick Lansley from Tesco.com was a new face at Mobile Monday — and had some good things to say. He seems to have his head screwed on right about where to take Tesco.com in the face of multiple platforms and a wide spread of consumers (it’s the API, stoopid).

Tom Hume of Future Platforms also gave some interesting insights — I like his idea of using an AdWords campaign to figure out the target platforms for a new product. It’s always better to measure than to guess — and the internet lets you measure everything.

Alex Reeve - Director of Mobile Business Group, MSFT UK

• it’s fair to say that MS have had their challenges in the mobile industry
• they’re fully aware of that and they’re aware that “a new dawn is coming”
• mobile is enormously important to MS
• Windows 7 coming this side of Xmas
  • integrating contact details & social connections
  • options to show thing separately or together
  • keeping pictures together (including Facebook, etc)
  • “people want Internet Explorer on their phone”
  • do they really? don’t they just want Facebook/Yahoo/BBC, etc
  • fully-editable Word documents
  • email works the same as Outlook
  • I hope not… that would be horrible
  • “Zune is mainly a product in the US only”

Panel session

Panel (and their phones):

• Chair: Marek Pawlowski
  • this is no longer just about mobile — platforms to support now extend to TVs, games consoles, etc…
  • nearly all devices can do voice
  • most can do SMS, and a lot have browsers and Java
  • Q1 this year about 18% of mobile sales were smartphones
  • 11% of market by end of this year will be smartphones
  • 3/4 of developers use an Android or an iPhone as their primary device…
• Oded Ran - Windows Phone in the UK
  • Windows Phone - HDT HD2
• Tom Hume - MD of Future Platforms
  • Nexus One
• Nick Lansley - Head of R&D at Tesco.com
  • iPhone, Nexus One (which crashes 3 times a day)
• Jerry Ennis: CEO at Flirtomatic
  • #1 mobile social network in UK, if not in Europe, according to Comscore
  • though I guess it’s dwarfed by Facebook & twitter, which are social networks that people access on mobile…
  • iPhone
• Ilio Uvarov - lead UX practice at RG/A London
  • clients such as Nike, Nokia
  • iPhone

Which mobile platform would you develop for first and why?

• NL: probably give a different answer every couple of months
  • would like to choose most common in Tesco customer base, but that would mean a phone that’s incapable
  • started with iPhone “because I had one”
  • iPhone is a “hero device” — you get much more marketing for your buck
  • but need to balance with what devices customers are using
• JE: started believing they could use downloadable Java apps
  • but wasn’t really possible
  • target market are not using Java apps, even if their phone is capable
  • have instead gone to mobile web
  • also seeing some startling usage growth from iPhone (Flirtomatic have an iPhone app that wraps a browser)
• TH: would probably cheat and spend £50 on an Adwords marketing campaign to see who was interested…
• IU: depends on target
  • business people in NYC — Blackberry
  • teenagers in middle east — Blackberry
  • hipsters in London — iPhone

What can platform providers provide to developers to attract them?

• OR: don’t want to write once, debug across multiple hardware
  • want to make money
  • choose to piggyback on a platform launching (someone else’s marketing muscle)
• NL: iPhone and Android offer push update notifications
  • really important — bug fixes are v. important to customer experience
  • Ovi falling down massively here
  • Apple also making things difficult by making updates take up to two weeks
• JE: Flirtomatic app is just a wrapper around mobile web app
  • can’t take advantage of native aspects
  • but changes can be deployed very quickly without going through Apple

Who in the audience had a bad experience of starting out on a mobile platform?

• TouchNote: went for Nokia 3rd edition (Symbian) & Ovi store
  • just not a lucid, easy experience for customers, even in comparison to Blackberry, let alone iPhone & Android

Who’s had a good experience?

• No one put up their hands!!

Do customers really take updates?

• TH: 60-70% take updates for android
  • would imagine iPhones are about the same
  • Java apps are almost impossible to get customers to update
• NL: always offer new features with bug fixes
  • every time Tesco update the Tesco Finder app, they see 99.9% of new version by the end of that day!
• IU: have about 100 pending updates on his iPhone
  • end up not using 90% of apps that you’ve downloaded
• MP: 70% of mobile web users went to 10 major brands

MS have developer lock-in for tools, will they lock-in legally like Apple?

• Silverlight & XNA plus mobile web are main ways to market on Windows Phone 7
• Haven’t finished Ts&Cs yet

Is it sustainable to support so many platforms, or will we see consolidation?

• TH: we are seeing consolidation around the web
  • don’t feel intimidated by number of platforms, as only have to deal with those that provide an audience
  • feel locked in to Apple not by legal language, but by the audience that they provide

What can platform providers do to make a new platform attractive?

• don’t make us write the app in Silverlight — let us write it in C#
• reveal the number of apps in the store — no hype
• charge less than Android & Apple (30%)
• make it easy for customers to buy cheap things with enough money going to developers

Which platform gives the best ROI? How does mobile web compare?

• JE: make money with virtual currency (80% revenues), rest from advertising
  • how do we bill people to buy virtual currency?
  • operator billing (reverse SMS), credit card, paypal
  • still 60/40, 70/30 — not so good
  • credit card still cheapest for business
  • Apple don’t let you use in-app purchases for virtual currency…
• TH: not sure that there’s a link
  • look to introduce customers with operator billing and then convert repeat customers to credit card later
• JE: operator billing is a terrible UX — sometimes a 12-step process
  • not as bad in UK, but US can be really bad

What about emerging markets? What are platforms doing?

• OR: active in two sides, services (Hotmail, etc) & devices
  • phone becomes 1st screen
  • exploring new ways of getting hold of the phone, since Windows Phone is not targeted at emerging markets
• NL: when Tesco arrives in a market, it could be said to have “emerged” already…
  • “Tesco in a box” — all systems for a new country shipped out
• MP: discussing India with major internet brand, responsible for UX
  • because device is becoming primary, there are increasing number of smartphones
  • also multiple SIM cards for each user (up to 12!!)
  • Italians have 1.77 SIM cards per subscriber, cf. 1.4 UK & 1.3 in US

Multiple platforms outside of mobile

• IU: depends on the use-case
  • things that work nicely across channels: e.g. instapaper
  • boxee: combining web, mobile & TV (can use mobile as remote)
• NL: did ethnographic research in people’s homes as to how they shop
  • calling on phones, SMS, writing messages on paper
  • wanting to allow people to add things little and often throughout the week
  • have cheated by building an API to get other people to create apps
  • e.g. Yahoo widgets on TV: watch cooking show, and add ingredients while you watch
• TH: big fan of opening up API, but how does that work as a provider? are you worried about the customer contact being mediated via a third party?
• NL: grocery shopping is not really exciting to customers
  • would rather get great ideas in front of customers
  • customers still have to login and checkout on Tesco site

What about voice as a platform?

• TH: Google introduced voice search and changed his behaviour
• MP: need to be very careful about experience:
  • experience was significantly enhanced when interacting with an avatar
• JE: tried out a voice part of app a year or two ago
  • watched my teenage daughter who never talks to people, but uses text & facebook instead
• MP: is that an opportunity? getting people to use their unused minutes!

How do you handle that your app is living on a phone with others?

• NL: Nexus One had an app using up all his minutes when in US
  • data hogging apps rapidly become unpopular
• TH: it’s one of the important things that makes the difference between mobile and desktop
  • number one feature on the iPad is battery life

What about upcoming standards: JIL, BONDI?

• NL: if you don’t make your app the best it can possibly be for that device then don’t bother
• MP: customers have one device — they’re not bothered by fragmentation

Brief summary

• IU: kept going back to UX
  • do you want to be good enough or delightfully different
• JE: all about UX — the best possible UX is using the latest features of any platform, rather than going cross-platform
  • payment is crucial, runs across different platforms
  • needs to be improved, simplified and cheaper for business
• NL: has to be relentlessly good design for every make and model of handset
  • gives you brand consistency
• TH: root causes of fragmentation are a good thing
  • mass market (2/3rds of world’s population) and extremely fast rate of change
  • developers have to get used to it
• OR: successful developers are embracing the fact that fragmentation is here to stay
• MP: “can economise on plumbing but make sure your bathroom is pretty bling”

Announcements

• Microsoft BizSparkCamp: June 22nd 9.30-5.30
  • “they want to give you things…”
• July - MomoLondon: Marketing your mobile app
• August - MomoLondon break
• September 10th & 11th - OverTheAir 2010

MomoLondon: Mobile Java

I was delighted to be invited to be part of the panel this evening — and at only a few hours notice too (I only checked my email in the afternoon after getting back from holiday the previous evening). A flurry of tweets confirmed my place — thanks to Alex Craxton for thinking of me!

Consequently, the notes for this evening are briefer than normal, though the evening felt like it went fairly well. The topic was more technical than most Mobile Mondays and the suit percentage in the audience was very low. I hope we pitched the discussion at the right level. Thanks also to my fellow panellists: Simon Nicholson from Sun, Sergio Falleti from Future Platforms, Kieran Gutteridge from intohand and Andy Milloy from SurfKitchen.

There were a few new points raised (I’ll cover some below), but the most controversy in the room came when we got around to discussing app stores and the iPhone. There was the usual discussion around why the JavaME industry hadn’t advertised downloading apps until Apple showed the way — as Dan Appelquist put it previously, it would have been a documentary rather than a 30 second advert…

@fj questioned what Sun would be doing to catch up with Apple’s speed of development on the iPhone, but there isn’t really an answer — JavaME improvements come slowly as they involve multiple (often competing) companies working together through the often cumbersome JCP process. Apple can make changes daily. However, the JCP process eventually results in a large number of companies putting out lots of devices into multiple markets. This will inevitably cover a larger market than Apple ever wants to reach — @edent’s oft repeated point that there are many more low-level phones worldwide than there are smartphones will still be true for quite a few years yet.

As an audience member pointed out, not many of these low-level phones are used to download apps — it’s a big market but with no way of reaching it. I think this will gradually change, and we’ll start to see even the low-level phones having a reasonable JavaME capability over the next few years (this is definitely in Sony Ericsson’s plans). We’ll have to wait quite a while, though, as phones last a long time in some markets…

In other news…

Surfkitchen have recently developed a home screen app for Sony Ericsson phones on Telstra in Australia (called Telstra One). This plugged into a new API only available on those phones. I wonder how the new app affects battery life — and if it copes well, when this new API will be released. Sony Ericsson seem to be moving forward in JavaME in the way that the JSR community process cannot, but still creating an effective platform based on the JSR standards. I like their approach and I hope they do well.

Device databases

Sergio from Future Platforms said that they use the Java Verified list of device families and lead devices as a basis to categorise their builds. I wonder how often this list gets updated and how FP deal with newly released phones. This device grouping is something that should be part of a device database — something that’s sorely needed to enable developers to choose which builds to make in order to cover an appropriate range of devices. If you choose effectively you can massively reduce the testing required. Most development agencies have built their own databases, but aren’t that willing to share it as it’s part of their competitive advantage. The JavaME 3.0 SDK has a database included, but it’s not detailed enough and doesn’t get updated very often. J2MEPolish have an open source device database, but again it’s not updated that frequently and it also contains mistakes. WURFL and dotMobi have more up-to-date device databases, but they’re focussed on mobile web and don’t have the information required by Java developers. And developers need to be able to slice and dice the data to pick out appropriate pieces. Anyone for putting it all into a DabbleDB database?

New attack on fragmentation

One of the reasons that we need a comprehensive device database is that manufacturers implement their mobile Java VMs in slightly different ways. The existing official tests that mean they can put the Java name on their product seem pretty low-level and certainly don’t cover a lot of the user interface behaviour. Several manufacturers also seem to have a lower level of quality control for their Java implementations and bugs get through to devices with alarming regularity.

Orange, Sony Ericsson, Sun and Vodafone have got together to create a new set of tests, this time created by ordinary developers rather than JCP members. The aim of JATAF (you really don’t want to know what that acronym stands for) is to collect anti-fragmentation tests and release them as suite that can be run by manufacturers, operators and developers. I’m not sure whether anybody will be enforcing devices to pass the JATAF suite, but the participation of Orange and Vodafone is a good start.

Upcoming events

• Ecomo September 11th & 12th — there will be netbooks as prizes
• OverTheAir September 25th & 26th — still looking for more sponsors

Future of Mobile 08: Tradeoffs, Strengths & Weaknesses in Platforms

Tom Hume — Future Platforms

Full slides now available from slideshare. My notes follow...

Strengths, Weakness and Trade-offs of Mobile Platforms

View SlideShare presentation or Upload your own. (tags: iphone j2me)

• Fragmentation got worse in 2008
  • Not that we’re short on standards — we’ve got loads and loads of them!
  • good summary graph of effort, coverage & capability:
• Distribution is linked to platform
  • Vital for getting apps
  • Just as complicated and tricky as making the build
  • e.g. advertising of SMS shortcodes in national press — get lots of responses, but very unqualified — not so many actual downloads
  • billing also adds complexity
    • PayForIt — fairly grotty user experience
    • Credit Cards on mobile — scary issues on security but makes billing easier the second time round
• Why is choice a problem?
  • Got used to making lots of versions for different devices
    • Doesn’t mean that you should do it…
  • Trutap v1 has 30 versions (SKUs)
    • High load on QA
    • Changes are difficult
  • Trutap v2 has just one version (apart from icon assets)
    • FP’s new framework makes use of UI scaling:
    • When app is installed it works out how much screen it has
    • Had to think differently when designing it
    • Explicitly designed to scale up — fluid layouts, percentage widths, etc.
• Work out where the seams are and make them more fluid
  • Switching between app & browser
  • Google Search for Symbian
    • immediate launch app that then launches browser
    • keep the user’s attention while they type in their search term
  • Using web for what it’s good at, native apps for what they’re good at
  • Can stitch together different platforms
  • On desktop, widgets are closest to this idea
• Take design seriously
  • Think about how interface will scale
  • More than pixels

Future of Mobile 08: Reaching the whole world

Doug Richard — Trutap

Doug gave a very good talk on how we should change our thinking about the upcoming mobile markets in developing countries. “It’s not just farmers sharing crop prices.”

Tom Hume has written a good summary of Doug’s talk, with extra perspectives coming from his company’s involvement in the development of Trutap.

My notes are a little shorter as I was helping Simon Maddox with some regular expressions…

• 500m - 1 billion people in aspiring middle classes around the world
  • and see Opera’s report on the usage of Opera Mini esp. in South East Asia — it’s not just cheap phones making voice calls
• Comparing LA to Mumbai:
  • Mumbai user wants to do all the social networking stuff that LA user does on his PC
    • Wants to have friends, know friends & meet girls :-)
  • If he visits an Internet cafe, he has to pay 10-100 times as much for data as on his phone, and he will have someone looking over his shoulder
  • Mumbai user’s primary device is the phone
  • Phone is not extension of your web life, it is your only internet access device
• Social networks on a PC are a temporary phenomenon
  • They should have started on the phone
• Launching new Trutap today
  • support all of the world’s IM transports (about 16)
  • live feed
  • support full profiles
    • In Japan, dating sites never split from social networking
    • Trutap v2 adds detailed profiles and profile search to put the dating back in

MomoLondon: Mobile User Experience

Last night’s Mobile Monday London was themed on the Mobile User Experience.

Taptu — Steve Ives (CEO & Founder)

• Live since last October — preparation since April
• Aim to get mobile search used several times a day rather than
• Company expertise: mobile user experience (ex-Trigenix) + search algorithms (with experience from Cambridge Computer Lab)

UI design process

12 months, 14 user studies (2 day sessions with 10 users spending an hour each)

1. concepts
2. paper prototypes
3. device prototypes (static pages)
   • used for user studies
4. two other steps… (can anyone fill them in here)

Main tenets:

• don’t assume
• listen to users
• iterate often

Personas

Built up a fair amount of detail about 4 personas.

• 20, iPod generation
• 32, careerist power user
• 23, unwired social (not a lot of access to the internet during the day or evening)
  • mobile internet is primary access to internet
  • particularly large in Asia
• 27, digerati — bloggers, influencers
  • 10% size of others but very influential

Prototypes

Paper prototypes done by photocopying framework with title, options and back then annotated.

Device prototypes — high fidelity, device-specific, pixel perfect (no software engineering required)

Design

Three core families, each with different user experience design

1. low: 176x220
2. mid: QVGA
3. high: iPhone

Graphic design comes from within company — authentic and fast turnaround

UE Testing

They set up a portable user-experience lab, since testing users in London (and they’re based in Cambridge). This consisted of a laptop, a portable mixing desk, two video cameras and a microphone. They could take this to any meeting room and hold user testing.

Two cameras: one aimed at user’s face, other mounted on handset; both mixed & recorded together with a separate microphone. Results in movie showing user reaction in a picture in picture format.

Totally regular event to run a user study — expensive and time-consuming, but have committed to do this.

Human Factors International — Scott Weiss

He wrote a book: “Handheld Useability” in 2002

Moving to “persuasive design”: are your users going to come back?

A good way to determine persuasive design is eye tracking, but this doesn’t work on mobile as the eye trackers require a stationary device.

“The minimum number of design & feedback cycles is 3”

If user testing a phone, don’t sit right next to them and breathe down their neck. Instead, sit opposite them and make them show you the phone if they need to.

Moving from design-time to runtime: Future Platforms — Bryan Rieger

Bryan was addressing the disconnect between designers and developers during and towards the end of the design process. The designers come up with something that looks wonderful and flows beautifully, but if the developers just take the assets directly from these mockups, then the application would run like a dog on mobile. The assets would be too large to load quickly and the device would run out of memory.

• Think about assets, custom fonts, icons for different states.
• Specify paddings, margins and use native drawing capabilities.
• Use composite images — combine resources in device rather than beforehand.
  • e.g. transparency overlay, shading for selection, etc

For example, FP reduced the resources in the Locomatrix app from 12K to 2.87K — massively improved performance and could now work on a lower-memory device such as a Motorola PEBL.

Control Java design based on constants provided in a resource file.

The designers and the developers must work together.

Some of this can be used in mobile web as well, especially if the device has CSS2 & CSS3 capabilities.

Panel session notes

“Institutionalizing useability” — book on Amazon for getting user testing introduced into a company

WebX — sharing presentations for remote teams

Design for the mass market if you want to be successful — this means that the interface will need to work on constrained devices (e.g. pepperoniti — most widely used mobile social networking tool, has very primitive UI)

How do you design for location-based interactions? Or RFID or other? FuturePlatforms are trying but are struggling — the tools don’t help, so they’re using sketches and notes on the walls.

In Apple, the chief designer reports to the CEO — that doesn’t happen very often in other companies.

What’s your good (and bad) UI experiences?

• Marek: N95 Google Reader
  • simple, one graphic, making best use of browser, loads very quickly
• Scott Weiss: bad user experience — RAZR, almost destroyed a company
  • four soft keys
  • took off menu soft key too late
  • industrial design was spectacular, but user experience was terrible
• Taptu:
  • BMW idrive — terrible
  • Phillippe Starck video on TED: simplifying product design
• Bryan Rieger: love the iPhone
  • some of the worst user experiences coming out of Korea to try and copy it (LG & Samsung)
  • touch screen, but some of the screen isn’t touch sensitive and the buttons change under your fingers

OverTheAir: Hacking Competition & Presentations

Lots of people stayed up overnight to hack mobile applications and there were some very cool results.

I tried out building a mobile widget using the Nokia Web Runtime. This is an application environment on recent Nokia Series 60 devices that uses the WebKit browser with various extensions. You write widgets for it using JavaScript, XHTML and CSS (just like any other widget, but, as always, slightly different to the other formats). In fact, I started off building the widget using Apple’s DashCode — a web application builder for the iPhone. This comes with an interface builder that allows you to drag and drop controls onto the screen and wire them together.

Getting the control logic to work took a bit of getting used to — as with all interface frameworks, there’s a learning curve where you build up understanding of how the pieces are supposed to fit together. In the DashCode case, this isn’t helped by the lack of any documentation for the interface controls. However, the development environment more than made up for this — there’s a very capable Javascript debugger, complete with an interactive console, and it’s very easy to start and stop your widget in the iPhone emulator.

I used prototype to power up the Javascript side — making the Ajax calls to our server much easier and enabling some mucking around with the results to provide some pretty formatting.

Once I’d got the basic application working in DashCode, I took it across to the Nokia Web Runtime environment. This provided some extra features such as storing preferences between invocations so that the widget could start up straight into showing you the departures that you’d chosen previously.

I found the Web Runtime very effective, and it fills a very useful niche for simple, web-connected apps on recent S60 phones. Development time is fast and you have access to a reasonable amount of the phone features, though nothing quite as useful as location or the address book (as yet).

My hack won special mention in the “Most practical / ready for market” category — runner-up to the SNOB address book picture enricher. I’ve included a movie of the widget in action (within an iPhone environment) below.

Some other hacks were:

• PimPam — social BBC programmes
• 21st Century Fridge Door — text & MMS to a shared web space
• Location-based games w/J2ME — e.g. capture the flag
• Social Tracker — basically just captures where you are to a database…
  • seems to use Google Maps in a browser to capture the current location
• Flat Music Player UX design — zoomed out user experience — see the album art very small and in specific places on the screen
  • uses sense of physical location rather than words
• Twitter client for Windows Mobile today screen
• Browser Sync while ActiveSync’d — nice!
• YourLocal - displays the local transport stops around Imperial College
• FuturePlatforms — Octobastard robot — you have to see it to believe it :-)
• SNOB: Social Network Open Butler — add pictures to your address book from social network avatars (web service outputs XML independent from social network)
• Autowigificationizor (Owen Griffin) — click a firefox button and get a web runtime widget generated for you based on the RSS feeds for that web page
• MixItUp — cocktails in Flash
• Bluetooth + FOAF — unique ID from hash of bluetooth ID & device bluetooth name; can revoke it by changing your device bluetooth name; get a list of all the people you came into contact with at a conference
• Update FireEagle location from command line, then display it on blog
• LastMinute Labs — PhonePhight with motion detection & bluetooth — very cool!
• Torchwood Sweded — again, I think you just had to be there…

OverTheAir: Case Study: PrimeSky -- Bringing Web 2.0 to Mobile (Tom Hume & Bryan Rieger -- FuturePlatforms)

A webservice to let people find out what’s in the sky that night… oh, and it has to work on mobile too! How do you fit Space onto a mobile phone? And we want to open source it at the end of the project.

How do you orientate people? How do you display constellations on a small screen?

design process:

• put stuff on paper first — it’s easy to change
• iterate with real people
• get it on a handset as soon as possible
  • initially simple PNG files (look like a simple web page) to check expectations on single pages
  • then some simple HTML to check out navigation, with SVG images showing constellations and context

development process:

• went through at least 3 iterations of the database schema
  • avoid database-driven design
• needed to present images in a house style, easy for creation and working at different scales
• technologies: Symfony PHP, WURLF+WALL4PHP, ImageMagick all on a LAMP stack
• subjective scaling: manipulating SVG files to keep captions and stars large but overall image small
• rendering SVG to appropriate format for mobile using ImageMagick
  • then cache pre-created images for a while
• added in microformats:
  • events for days — every page on the site has a little API in it
  • transformed to vCal on mobile devices — allows you to bring something direct into your phone calendar
• also provide JSON, YAML, XML, serialized PHP feeds by just adding ?api=xxx on the end of the RESTful URLs (search API is also exposed)

Development took about 7 weeks for one developer.

conclusions and questions

• look for design solutions first (over and above technical solutions)
  • e.g. orientation
• you don’t get a choice of which version you want — it’s always the one for your device
  • e.g. iPhone gets a widescreen mobile version, not a zoomable full web page
  • Tom: “the iPhone has a kind of split personality — it’s billed as full web on a phone, but the big sites all have iPhone-specific versions”

There’s also an SMS and email alerting service for interesting events.

Launch date: soon...

See the whole presentation:

| View | Upload your own