Atmosphere 2014: The mobile web challenges - Maximiliano Firtman
116
Picture from Simon Howden freedigitalphotos.net Warsaw, May 19 2014 the mobile web CHALLENGES maximiliano @firtman
-
Upload
proidea -
Category
Presentations & Public Speaking
-
view
233 -
download
2
description
While the battle between apps and websites is still going on, we need to understand the challenges that mobile devices bring to the web world. In this talk we will cover the status of the ecosystem, the type of apps and websites we need to support today, browsers available and all the challenges for debugging, testing and measure performance. We will see techniques, such as Responsive Web Design and how they are affecting performance on lot of websites around the world We will cover the biggest mistakes that companies are doing on the mobile side and how they affect the success of the mobile strategy. Maximiliano Firtman - I'm a mobile+web developer, trainer, speaker and writer. I'm founder of ITMaster Professional Training. I wrote many books, including "Programming the Mobile Web" and "jQuery Mobile: Up and Running" published by O'Reilly Media. I have a blog about mobile web development at mobilexweb.com and maintain the website mobilehtml5.org. I'm a frequent speaker at conferences, including QCon, OSCON, Breaking Development, Velocity Conference, Fluent, Google Developer Day and many other events around the world. I've been doing professional training for small and big companies, including LinkedIn, Cisco, Intel and HP. I've received different recognitions, including Nokia Developer Champion yearly since 2006; Adobe Community Champion since 2011, BlackBerry Elite since 2013 and Internet Explorer User Agent since 2013 . Specialties: Mobile HTML5, Objective-C, Android, Google Glass development, Web Performance
Transcript of Atmosphere 2014: The mobile web challenges - Maximiliano Firtman
Picture from Simon Howden freedigitalphotos.net!
Warsaw, May 19 2014
the mobile web!CHALLENGES
maximiliano @firtman
Agenda
AgendaMobile Web Challenges !
1. Mobile Today
2. Challenges
3. Performance
4. Tools
5. Future-friendly
!
!
!
!
QA
Let’s start
1- mobile today
by Luke Jones (flickr)
mobile
1- websites 2- apps
mobile
1- websites 2- apps
mobile
1- websites 2- apps
on mobile we can create...
we can create
1- websites
Using the browser
URL
Web Server
1- websiteswe can create
we can create
2- webapps
Browser to install
Full-screen
Icon on home screen
Web Server
2- webappswe can create
full screen webapps
home screen webapps
webapps are also known as(
)
we can create
3- native webapps
Package, compile, sign
Icon on home screen
App Store
No web server
3- native webappswe can create
hybrid apps
packaged webapps
native webapps are also known as
(
)
Package, compile, sign
App Store
Native development
Different languages
4- native appswe can create
mobile
1- websites 2- apps
a- native b- webapps c- native webapps
mobile
1- websites 2- apps
How many browsers do you know on desktop?
5?
How many browsers do you know on mobile?
...
Android Browser 2.34.0-4.34.4Samsung
Google Chrome Android iOS
Safari on iOS
Opera MobileMiniClassic
Firefox
Firefox OS
Internet Explorer
Nokia Browser Asha X …
Amazon Silk
UC Web
should I continue?
(
)
Cloud-based browsers
web platforms
And it’s not just browsers!
web platforms
Web View
web platforms
we just care about…
40% not Safari / Chrome
97% not Safari / Chrome
48% not Safari / Chrome
75% not Safari / Chrome
Android Browser 48% Chrome 25%
Opera 15% Nokia 5%
Windows Phone 2% Safari iOS 1%
Separate site m.*
Separate site same URL
Responsive Web Design
Do nothing
mobile website strategies
mobile viewport
Separate site m.*
Separate site same URL
Responsive Web Design
Do nothing
mobile website strategies
mobile viewport
signalvnoise.com
signalvnoise.com
We were simply orders of magnitude more
productive by using the web and HTML
signalvnoise.com
The app has a 4/5-star rating
signalvnoise.com
I think every software shop today should take
another look at the hybrid approach
1- </mobile today>
- Don’t underestimate mobile - Platforms, browsers - Understand the ecosystem - Different approaches available
2- challenges
cross *
embrace diversity
too many platforms
QQVGA QVGA WQVGA FWQVGA LQVGA HVGA nHD !
!
FWXGA Sq.HD XGA WXGA WUXGA QXGA WQXGA
WVGA FWVGA VGA DVGA WDVGA QHD WSVGA HD
QQVGA QVGA WQVGA FWQVGA LQVGA HVGA nHD !
!
FWXGA Sq.HD XGA WXGA WUXGA QXGA WQXGA
WVGA FWVGA VGA DVGA WDVGA QHD WSVGA HD
user identification
2- </challenges>
- Don’t frustrate your users - Multi-* - Usability - Performance
3- performance
We have 4G! We don't need to worry about performance...
(
)
SuperBowl 2014 advertisers
http://blogs.keynote.com/
http://blogs.keynote.com/
Bandwidth (Mbps)
cellular networks
2G 0.1-0.43G 0.7-54G 1-50
mobify.com
Latency (ms)
cellular networks
2G 300 - 10003G 150 - 4504G 100 - 180
Most important
Not just load time
Perception
performance & mobile
Redirections
aa.com -> www.aa.com -> www.aa.com/homePage.do -> mobile.aa.com -> www.aa.com/mt -> www.aa.com/mt/homePage.do
Download my app
idontwantyourfuckingapp.tumblr.com
Responsive Web Design
“RWD is harming performance by default”
Remember your goal
Don’t penalize your users
3- </performance>
- It’s your primary goal on mobile- Don’t penalize your users - Careful about responsive web design - Don’t redirect, don’t stop your user
Workshop on Wednesday
Practical training on mobile performance !
See you there!
4- tools
Simulator
Emulator
Real device
Open Device Lab
Virtual Lab
Your own Lab
Remote inspectors
Proxies, sniffers
Testing tools
Connection simulators
4- </tools>
- Understand how to measure, debug and test - Create your mobile test lab
5- future-friendly
“change is the only constant“Heraclitus
compatibilityFeature Detection >
Progressive Enhancement
APIs Notifications Sync Native Apps Websites Webapps
RESS
Speeding up RWD
Server-Side components Detection libraries Feature and Device detection
Server
Client Frontend engineer !
!
Backend engineer !
!
Maybe it’s time to rethink the server architecture
Server
Client Frontend engineer !
!
Backend engineer - API - Push notifications !
!
Frontend server
Maybe it’s time to rethink the server architecture
“your goal is not to create an app for X platform, but to support a multi device user“
</presentation>
- Don’t underestimate mobile - Performance is priority - Use new tools - Embrace change to be happy
you can reach a good experience
Pictures)from)freedigitalphotos.net)
dziękuję!
[email protected] @firt See you this Wed’s Workshop
Blog: mobilexweb.com
firt.mobi/pmw
![[Code Camp 2009] Business Inteligence en SQL Server 2008 (Maximiliano Stibel)](https://static.fdocuments.us/doc/165x107/5591d1da1a28abbe658b45ad/code-camp-2009-business-inteligence-en-sql-server-2008-maximiliano-stibel.jpg)
