Mobility Presentation January 2013

SIMON PRICKETT

About MeStarted building WAP sites in 1999

Started building native applications in 2000

Experience with: media (USA Today, MTV, ABC, CBS), multi-brands (Coca-Cola, P&G) logistics and government

Side Interests: Robotics, connected devices, dogs, travel, hockey, motorsports

Mobile Web: Nokia 7110 to iPhone 5

Native Apps: Palm OS, Pocket PC, Blackberry, iOS, Android, Windows Phone

Voice XML, Text to Speech

Barcode scanning, image recognition, vehicle telematics

Mobile Experience

History: Mobile Markup Fragmentation

WML (Nokia, Ericsson)

HDML (Unwired Planet, Phone.com)

CHTML(NTT DoCoMo iMode)

xHTML (BlackBerry, Motorola, others)

Historically: You Needed a Platform

Developer uses proprietary BiscuitML markup as an abstraction

Platform translates this into device’s required markup

1:many mapping BiscuitML -> WML, HDML, cHTML, xHTM, HTML

Markup Standardizing Over Time

Many markup “standards” fell by the wayside

Proprietary platforms (Flash etc) failed to gain traction

Mobile browsers adopted more and more standard HTML, JavaScript, CSS and better rendering engines

HTML5 - One Markup to Rule Them All?

Faster JavaScript Execution on mobile

Faster DOM performance on mobile

Faster CSS Performance on mobile

Data attributes: useful for progressive enhancement

Scrolling and hardware accelerated effects

Still not quite a standard but easily good enough

What About Apps?

Still a lot of fragmentation

Different languages for each platform e.g. Objective C for iOS, Java for Android

Do you worry about niche platforms (BlackBerry, Windows Phone)?

Use of an abstraction platform makes sense

The web may replace many apps in future (Firefox OS, BlackBerry 6+)

Tools & Methods Available (Browser)

Responsive DesignResponsive Design with Server Side Enhancement

Progressive Enhancement

Device Capability Detection

Tools & Methods Available (Apps)

Skillset Required Can be Simplified

Browser: HTML(5), CSS(3), JavaScript

Apps: HTML(5), CSS(3), JavaScript (LuaScript for Service2Media)

Server Side: JavaScript (node.js, backbone.js), Java, .NET

Unless you’re writing games there is probably no reason to build apps in Objective C / platform specific SDKs

So We Just Needed Better Tools?

Better / standard tools help us produce product faster and cheaper, and hire and train developers more easily

But what about design?

And what about content?

And context?

Thought leadership is also required

Yesterday: Tablet or Phone?

Now: What’s your Talking Rabbit Plan?

The Internet of Things Takes Many Forms...

Device Explosion is Here Now

And it’s not all bigger, better, faster, more...

Device Explosion: Vehicles

"Cars are becoming mobile communication platforms... they are a great untapped

opportunity" – Bill Ford

Ford Sync

Device Explosion: Retail & Digital Signs

Vending Machines go beyond simple touch interaction:

Social

Face Recognition

Interaction with other mobile devices

Interaction with loyalty schemes and other channels

Still Need to Consider User Experience

Even just on mobile phones we’re still not doing it right

Users expect to be able to do almost anything from almost any device

We should always take into account the extra contextual data we receive about the mobile user

Examples: Doing it Wrong...

"This website is optimized for landscape view, please rotate

your tablet"

"Dammit, @FastCompany! Stop trying to make your mobile site an app! I just

want to read text. #youredoingitwrong"

wtfmobileweb.com

Examples: Doing it Wrong...

Users arrive at your content in different ways (e.g. social)

Remember this when designing for the browser experience

Examples: Doing it Wrong...

Where’s my nearest toilet / drive thru / play place? So tell my screaming kids more about your ethically sourced beef...

Examples: Users Demand More

Text

"Dear websites, every time you redirect me to your “mobile” site and just cut off

the path of my URL, a kitten dies."

Examples: Users Demand More

"A way I like to think about content on mobile: paperbacks don’t arbitrarily strip out chapters just because the pages are

small." -- Josh Clark

"Thought of the day: we’ll know the mobile web is “ready” when links to the desktop version are understood to be

unnecessary." - Jason Grigsby

"This is not a watered down version of the internet… Or the ‘mobile’-version of the internet… Or the kind of ‘looks like the

internet’-internet… It’s just the internet… On your phone” -Apple iPhone ad 2007"

How to Support Connected Device Explosion?

Often referred to as “the coming zombie apocalypse”

Presentation technologies aren’t the core problem (standards are helping here)

Having a good, flexible content model is key

Design for the use case that hasn’t been invented yet

Think capabilities not access method or product

Expect your content to be used in ways you did not plan for

Structure Your Content

Image

Logo

Supporting Text

Call to Action

Link to web page

Click to call

Terms and Conditions

#fail

Free the Content, Offer APIs

Live video feeds

Website

Mobile Site

Apps

Raw Data JSON API

{"BlockedTwitterUsers":[],"Configuration":{"IsClockVisible":false,"IsMissionStatusTextFlashing":false,"IsVideoVisible":true,"LastPublishedOn":"\/Date(1350351358000-0500)\/","LiveStreamDataVisibility":0,"LiveStreamDataVisibilityValue":"NoData","MissionStatusText":"Mission Complete","Name":"Mission Complete","NodeId":1899,"VideoFooterLeftImageUrl":"\/media\/48916-decent-left.png","VideoFooterText":"Well done Felix!","VideoFooterTitle":"Mission Complete","VideoFooterTitleIconImageUrl":"\/media\/64111-dash.png","VideoOverlayText":"\u000d\u000a<p>Austria's Felix Baumgartner earned his place in the history\u000d\u000abooks on Sunday Oct 14 after overcoming concerns with the power for\u000d\u000ahis visor heater that impaired his vision and nearly jeopardized\u000d\u000athe mission.<\/p>\u000d\u000a\u000d\u000a<p>Baumgartner reached an estimated speed of 1,342.8 km\/h (Mach\u000d\u000a1.24) jumping from the stratosphere, which when certified will make\u000d\u000ahim the first man to break the speed of sound in freefall and set\u000d\u000aseveral other records* while delivering valuable data for future\u000d\u000aspace exploration.<\/p>\u000d\u000a"},"CountdownInfo":{"EventStartsOn":"\/Date(1359907788529)\/","IsClockStopped":true,"IsCountdown":false,"IsValid":false,"StoppedTimeRemaining":"\/Date(-62135575200000-0600)\/","Updated":"\/Date(-62135575200000-0600)\/"},"CurrentWeather":{"ConditionCode":1,"ForecastDate":"\/Date(1359994188544-0600)\/","ImageUrl":"\/assets\/images\/weather-images\/icons\/ww_1.png","Latitude":33.38,"Longitude":-104.52,"Temperature":3.97628,"Updated":"\/Date(1359994188544-0600)\/","Visibility":24135,"WindDirection":13.1315,"WindSpeed":2.9676925},"Delay":80,"HideLiveData":true,"Message":"","Success":true,"Telemetry":[],"TweetBoxIsVisible":true,"TwitterFilters":["#ASKSTRATOS","#livejump"],"YouTubeEmbedCode":"<iframe width=\"640\" height=\"360\" src=\"http:\/\/www.youtube.com\/embed\/dOoHArAzdug?autoplay=1&wmode=transparent\" frameborder=\"0\"allowfullscreen wmode=\"transparent\"><\/iframe>","YouTubeEmbedCodeMobile":"http:\/\/m.youtube.com\/watch?v=dOoHArAzdug"}

Example: Red Bull Stratos Jump

Others: NPR, USA Today

References / Recommended Reading

wtfmobileweb.com - collection of #fail, reminders what not to do

futurefriend.ly - Brad Frost (particularly “For a Future Friendly Web” presentation, Chicago 2012)

abookapart.com - Recommended Reading

Thanks for Listening

@simon_prickett