Building web apps for a multiscreen world
-
Upload
aussie -
Category
Technology
-
view
405 -
download
0
description
Transcript of Building web apps for a multiscreen world
![Page 1: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/1.jpg)
Lunch & LearnAustralian sessions 2012
Creating applications for the “multiscreen world”
![Page 2: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/2.jpg)
It’s a mobile world ...
... but it’s a multiscreen journey!
![Page 3: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/3.jpg)
Gone for a
walkabout!
Where has our customer gone?
![Page 4: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/4.jpg)
With 3 core belongings ...
He has gone mobile, into the wild
![Page 5: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/5.jpg)
He has gone mobile, into the wild
Mobile will be first in numbers by 2014
![Page 6: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/6.jpg)
Australia rules! (the mobile world)
A digital nation downunder
Source: Nielsen Online RatingsJanuary 2012
![Page 7: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/7.jpg)
Australia rules! (the mobile world)
5th highest internet penetration in the world
Source: Nielsen Online RatingsJanuary 2012
![Page 8: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/8.jpg)
Australia rules! (the mobile world)
1st highest smartphones penetration in the world
Source: Nielsen Online RatingsJanuary 2012
![Page 9: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/9.jpg)
Citius, Altius, Fortius
We engage higher, better and longer on mobile
“The introduc.on of BILD mobil has been a sensa.onal success for us (...) The mobile user has a more intensive rela.onship with contents and services than the sta.onary Internet surfer. Consulta.ons of 60 sec. per site and more than 8 minutes per visit surprised us in a posi.ve way in the beginning. ”
Tanja Hackner, project leader of BILD mobil, Axel Springer
![Page 10: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/10.jpg)
U.X.?
Do it on Mobile First!
Put it otherwise ...
![Page 12: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/12.jpg)
It’s a multi-screen journey
![Page 13: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/13.jpg)
It’s a multi-screen journey
Seamless User Experience prevails on 4P rule
1 - Hooked by an email in the bus
2 - Browses on laptop at work
3 - Looks for reviews during lunch break
4 - Sends shortlist to home PC mailbox
5 - Refines search on the couch with tablet
6 - Watches video trailer on TV
Bingo: Buys on tablet with Paypal at 10:35PM!
![Page 14: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/14.jpg)
From 6:00AM
In a hyperconnected world ...
Customers can show up anytime, anywhere!
![Page 15: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/15.jpg)
At 11:00AM ...
They want it right here ...
![Page 16: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/16.jpg)
OR 11:00PM
And they want it right now!
![Page 17: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/17.jpg)
Take away #1
There’s 100% chances you are going to
your customers on Mobile First
ENGAGE
![Page 18: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/18.jpg)
What is Mobile? (as in mobility)
![Page 19: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/19.jpg)
Multi-screen, multi-channel, cross-device, cross-screen, multi-tasking, simultasking ...
Is that mobile?
![Page 20: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/20.jpg)
Network access?
Stationary but in transit ...
![Page 21: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/21.jpg)
Device orientation?
Portable but stationary ...
![Page 22: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/22.jpg)
Social connectivity?
Small screen and on the move ...
![Page 23: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/23.jpg)
Haptic capabilities?
Small screen but stationary ...
![Page 24: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/24.jpg)
Geolocation and LBS?
Is mobile just being portable?
![Page 25: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/25.jpg)
We are in the grey area!
And if so, is this mobile?
![Page 26: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/26.jpg)
You need a responsive approach to deliver the best context-aware user experience
Take away #2: Mobile users are wild and unpredictable!
![Page 27: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/27.jpg)
What is Mobile? (as in hardware)
![Page 28: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/28.jpg)
What is Mobile? (as in hardware)
X X
Platforms
Browsers CarriersManufacturers
Call it device fragmentation or nightmare!
![Page 29: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/29.jpg)
The many faces of the green robot
Over 4000 different Android flavours
![Page 30: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/30.jpg)
The many faces of the green robot
Concurrent OS versions, countless screen sizes
![Page 31: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/31.jpg)
And it’s just the beginning ...
![Page 32: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/32.jpg)
And it’s just the beginning ...
http://youtu.be/eA6XzbAr50k
![Page 33: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/33.jpg)
And it’s just a starter ...
Tomorrow begins today with Smart TVs!
Gesture Enabled
Web capable
![Page 34: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/34.jpg)
Who knows what comes next?
Google announces HUD with Project Glass
![Page 35: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/35.jpg)
Who knows what comes next?
The rise of the Machines Smart surfaces
![Page 36: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/36.jpg)
You need a device agnostic publishing technology.
Take away #3: Nobody can stop innovation and competition
![Page 37: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/37.jpg)
Life used to be simple in the 90’s
So ... where do we start?
![Page 38: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/38.jpg)
The “legacy thing”
![Page 39: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/39.jpg)
CMS DB DAM CRM ERP e-Com BI eLearning ...
Key concerns: Cost, consistency, Sustainability
The “legacy thing”
Mobile plugin
Mobile plugin
Mobile plugin
Mobile plugin
Mobile plugin
Mobile plugin
Mobile plugin
Mobile plugin
Mobile plugin
![Page 40: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/40.jpg)
Simple housekeeping rules:
![Page 41: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/41.jpg)
CMS DB DAM CRM ERP e-Com BI eLearning ...
Separate content and layout: Go SOA
Simple housekeeping rules:
Service Layer (APIs, ESB, ...)
Device detection + Presentation engine
![Page 42: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/42.jpg)
One standard to rule them all?
![Page 43: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/43.jpg)
rng.io
We can leverage HTML5 only as far as devices can!
One standard to rule them all?
html5test.com
![Page 44: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/44.jpg)
We need framework to bridge the gap!
Reality Check: 3 Learnings
1. CSS and Javascript do not work uniformly in all browsers = software fragmentation
2. HTML markup cannot cope with massive hardware fragmentation in terms of screen sizes, graphic capabilities, memory and processor speeds
3. This usually results in increased cost for development, testing and maintenance (TCO)
![Page 45: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/45.jpg)
Beware of digital sirens in open seas
![Page 46: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/46.jpg)
Hidden costs of Open Source can 10-fold your TCO!
Beware of digital sirens in open seas
•Analysts: Open Source is not covered by any traditional industry analysts. Netbiscuits is covered by all the main players like gartner, Forrester, Frost & Sullivan.
•Partner Network: Building a network of experienced integrators is not easy and Netbiscuits has been at it for many years. With well-developed skills and a traditional kick-back the partners have good reason to go with Netbiscuits.
•References: In both North America and Europe, you can easily find an existing Netbiscuits customer. This is very helpful to further increase adoption as it means that new customers have some experience they can tap into. In addition, Netbiscuits has many prominent retail references, starting with eBay.
•Financial stability: A quick look at the recent Netbiscuits annual reports shows Netbiscuits e are doing extremely well. Netbiscuits has demonstrated that they are capable of earning money in a competitive market and posted record-numbers.
•Global footprint: Netbiscuits is an established global player; much more so than any other competitor. Netbiscuits is in particular strong in the important and highly competitive US and UK markets.
•Complexity: Many customers have started to realize that they do indeed have complex requirements. Netbiscuits has targeted the higher end of the market for quite a few years now, which has made the product more complex and capable towards the demanding, global and national enterprises.
•TCO: There are a lot of white papers about the TCO and ROI with Open Source solutions. "Open" does not mean "free" or "cheap" on the long run. In website development projects, software costs typically comprise 5% of the total implementation costs. But by saving 5% in software costs by choosing an open source solution, you will most likely drive up the 95% of the ‘other’ costs significantly.
![Page 47: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/47.jpg)
Take away #5Pick the right race horse!
![Page 48: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/48.jpg)
Bet long with device-agnostic web
Take away #5Tools you need for a mobile-first experience
• Live Device Information Servicefor real time updates, no republish
• Device adaptive Layouts for seamless screen-size management
• Device adaptive InteractivityDeliver just the right code-optimised payload
• Media queries optimisation & storagefor image/video caching and streaming
![Page 49: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/49.jpg)
1 - Do Engage your customers on mobile first
Wrapping upYour recipe for Mobile First success
2 - Adopt a responsive and context aware strategy
3 - Choose a device agnostic publishing technology
4 - SOA for your DDP = Sustainability and ROI
5 - Scale and stay cutting-edge with the Cloud
![Page 50: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/50.jpg)
Be future friendly, be device-agnostic!
Conclusion: Mobile is your first step to success!
![Page 51: Building web apps for a multiscreen world](https://reader033.fdocuments.net/reader033/viewer/2022060111/5562a7b2d8b42a15548b4cda/html5/thumbnails/51.jpg)
Thank You!Lucas Challamel - ANZ Country ManagerT: 04 1014 1795 - E: [email protected]
@netbiscuitsAPAC
51