Date post: | 18-Jul-2015 |
Category: |
Mobile |
Upload: | simon-prickett |
View: | 58 times |
Download: | 1 times |
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
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
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