SlideShare a Scribd company logo
1 of 54
Download to read offline
Mobile is Mainstream
WDC / 13-12-11 / Hamburg
@rolandguelle

1
Welcome to #Neuland!

2
How the Web has Changed Us

http://www.flickr.com/photos/72645106@N00/58054501
3
Shopping

http://www.flickr.com/photos/labormikro/2786878184
4
News

http://www.flickr.com/photos/lemonpixel/5337356098
5
Knowledge

http://www.flickr.com/photos/mecklenburg/4430608826
6
"Ich glaube an das Pferd.
Das Automobil ist nur
eine vorübergehende
Erscheinung."
- Kaiser Wilhelm II.
(1859-1941)

7
Mobile is Mainstream

8
Ferdinand Georg Waldmüller
„Die Erwartete“
(1850 oder 1860)

9
Digital Cigaret

http://www.flickr.com/photos/theeerin/7065570887/
10
http://www.dailymail.co.uk/sciencetech/article-2478328/One-kids-use-mobile-phone-tablet-speak-sentences.html

„One in three kids use a mobile phone
or tablet before they can talk.“

http://www.flickr.com/photos/intelfreepress/8433147083
11
http://www.digitalstrategyconsulting.com/intelligence/2013/10/india_internet_use_over_50_web_users_are_mobileonly.php

„India internet use: Over 50%
web users are ‘mobile-only’“

http://www.flickr.com/photos/67682919@N05/7589102268
12
http://blogs.worldbank.org/africacan/more-cell-phones-than-toilets

„...more people today have access to a
cell phone than to a clean toilet.“

http://www.flickr.com/photos/gtzecosan/2957888216
13
http://www.engadget.com/2013/08/14/lenovo-posts-q1-2014-earnings/

„Lenovo posts Q1 earnings, reveals that
its mobile sales have overtaken PCs“

http://www.flickr.com/photos/49968232@N00/3473028040
14
Mobile Usage

15
Smartphones

http://www.flickr.com/photos/jakecaptive/419257766
16
Sensors

http://www.flickr.com/photos/kubapinkwiner/5374484075/
17
Superpower!

digital becomes physical
physical becomes digital

http://www.flickr.com/photos/greenog/5458540501
18
Frontend Technologies

http://www.flickr.com/photos/grunge/4809128956
19
Design Principles

http://www.flickr.com/photos/adactio/5818096043
20
Progressive Enhancement

http://www.flickr.com/photos/garethr/449616792
21
Party On!

http://www.flickr.com/photos/lorenjavier/6734736977
22
...but we do it wrong :(

http://www.flickr.com/photos/gerardstolk/4989786533
23
History...

http://www.flickr.com/photos/ericbvd/6174512852
24
http://wtfmobileweb.com

...Repeats?

25
http://www.guypo.com/mobile/what-are-responsive-websites-made-of/

Shrink & Hide

Test of 500 responsive websites with different resolutions
26
http://httparchive.org/trends.php#numurls

Sites are Growing
1617kB

27
http://press.1and1.co.uk/xml/article?article_id=1123

„The extent of consumer annoyance is hardly surprising
when we consider the average Briton estimates that they
waste 9 minutes every day, or 2 days a year, waiting
for slow websites to load.“

http://www.flickr.com/photos/donkeyhotey/5679642883/
28
Experience

An experience is only as strong as its weakest link.
The browser is the known unknown.

http://adactio.com/extras/slides/thereisnomobileweb.pdf
29
Exclusive vs. Mainstream

http://www.ijailbreak.com/applications/over-400000-apps-in-apple-app-store-have-zero-downloads/
30
The Future Will Save Us

31
HTML, CSS, JavaScript, Sublime Text, PHP, Python, Ruby,
Rails, Django, bash, Grunt, Git, Photoshop, Fabric, XPath,
Drowning and paper, BDD, Sharpies, Textmate, IE,
GPU, CPU, pen
Composer, jank, Ice Cream Sandwich, Node, XP, Marionette,
Cake, npm, Transmit, e-mail, flexbox, Firefox, a11y, Yeoman,
Brunch, zsh, MVC, angular, Ghostlab, Illustrator, Backbone,
dotfiles, Express, A/B testing, Chrome, stand-ups, semver,
analytics, bizdev, Fireworks, .gitkeep, TDD, Silex, URIs, HTTP,
URIs, rebase, jQuery, Jekyll, Travis, Charles, Critical Render
Path, JSON, Hammer, i10n, Bower, Capybara, Capistrano,
Watir, Buster, Mocha, Puppet, Chef, Virtualbox, CoffeeScript,
Firefox, Adobe Edge, Jellybean, Webdriver, LightTable,
Cucumber, Batman, ARIA, Web Components, Flight, AdWords,
SPDY, Agile, shadow DOM, uglify, svn, clojure, RWD, SPDY,
webGL, x-tags, progressive enhancement, Bricks, tree.js,
blink, ...
... and you will have missed something.
http://thatemil.com/blog/2013/05/22/drowning
32
http://owened.co.nz/the-web-isnt-as-easy-as-it-used-to-be-for-new-developers

„The web isn’t as
easy as it used
to be for new
developers.“

http://www.flickr.com/photos/mar00ned/229903286
33
The Expectation GAP

http://www.flickr.com/photos/russwalker/7509439306
34
Software gets worse over Time

35
http://www.computerwoche.de/a/it-mit-zwei-geschwindigkeiten,1235936

Speed vs. Stability

Fron
Dev tend
elop
er

Bac
Dev kend
elop
er

36
Front-end Development

37
Zombie Sites

http://www.flickr.com/photos/laszy/3168779952
38
NO.

39
Prepare Yourself

http://www.flickr.com/photos/matthileo/3753385131
40
http://www.sarahlay.com/2013/07/me-first-is-responsive-design-a-distraction-from-good-content

“Use mobile as a Trojan horse, as a catalyst to fix
what’s wrong with your website and process.”
Karen McGrane

http://www.flickr.com/photos/mac9001/7074325187
41
https://speakerdeck.com/addyosmani/automating-front-end-workflow

Toolchain

Costs of a Deployment?
Costs of Change Requests?

http://www.flickr.com/photos/jm3/355207892
42
Embed the Server

http://www.flickr.com/photos/coffeegeek/3201175260
43
http://tripleodeon.com/2010/10/modernizr-on-the-server-side/
44
http://www.netmagazine.com/tutorials/getting-started-ress
http://slideshare.net/4nd3rsen/ress-responsive-design-server-side-components-10084972

45
https://github.com/igrigorik/http-client-hints
46
Just Imagine...

http://www.flickr.com/photos/imaginecup/5607890599
47
Integra
ted Fro
DevToo nt-end
ls

http://remotedebug.org/
48
Headle
ss Bro
Runtim wser
e

/
p://casperjs.org
htt
/
/phantomjs.org
http:/

tp://slimerjs.org
ht
g/
http://triflejs.or

49
A Serv
er for F
Develo ront-end
pers

http://www.nczonline.net/blog/2013/10/07/node-js-and-the-new-web-front-end/
50
Flexibl
e Back
e
Fronte
nd Dev nds for
eloper
s

http://nobackend.org/
51
http://blog.hood.ie/2013/11/say-hello-to-offline-first/

Offline
F
as Min irst!
dset

http://offlinefirst.org/
52
Imagine The Impossible
Welcome to #Neuland!

53
Let‘s talk!

Thank Yo
u!

@rolandguelle
54

More Related Content

Similar to Mobile is mainstream

Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
Therese Kokot
 

Similar to Mobile is mainstream (20)

Device Agnostic Design - UCD2014, London 25 Oct 2014
Device Agnostic Design - UCD2014, London 25 Oct 2014Device Agnostic Design - UCD2014, London 25 Oct 2014
Device Agnostic Design - UCD2014, London 25 Oct 2014
 
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...
UCD14 Talk - Anna Dahlstrom - Device Agnostic Design: How to get your content...
 
Developing for Mobile
Developing for MobileDeveloping for Mobile
Developing for Mobile
 
What's next? J and beyond keynote 2015
What's next? J and beyond keynote 2015What's next? J and beyond keynote 2015
What's next? J and beyond keynote 2015
 
Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014
Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014
Beyond the hamburger menu - Digital Doughnut, London 25 Nov 2014
 
Cloud Distribution Forecast: Unsettled
Cloud Distribution Forecast: UnsettledCloud Distribution Forecast: Unsettled
Cloud Distribution Forecast: Unsettled
 
Finding harmony in web development
Finding harmony in web developmentFinding harmony in web development
Finding harmony in web development
 
AssetTouchAndTry-20180322
AssetTouchAndTry-20180322AssetTouchAndTry-20180322
AssetTouchAndTry-20180322
 
Technology Careers v2.0 SP1 Ultimate Edition
Technology Careers v2.0 SP1 Ultimate EditionTechnology Careers v2.0 SP1 Ultimate Edition
Technology Careers v2.0 SP1 Ultimate Edition
 
Papaya webinar: leveraging lifecycle
Papaya webinar: leveraging lifecyclePapaya webinar: leveraging lifecycle
Papaya webinar: leveraging lifecycle
 
Beyond The Mobile Web By Yiibu
Beyond The Mobile Web By YiibuBeyond The Mobile Web By Yiibu
Beyond The Mobile Web By Yiibu
 
Beyond the mobile web by yiibu
Beyond the mobile web by yiibuBeyond the mobile web by yiibu
Beyond the mobile web by yiibu
 
Beyond the mobile web
Beyond the mobile webBeyond the mobile web
Beyond the mobile web
 
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
Beyond The Mobile Web By Yiibu 110412113255 Phpapp01
 
Flourish2011
Flourish2011Flourish2011
Flourish2011
 
Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013
 
Mobile Trends 2012
Mobile Trends 2012Mobile Trends 2012
Mobile Trends 2012
 
The Case for HTTP/2 - Internetdagarna 2015 - Stockholm
The Case for HTTP/2  - Internetdagarna 2015 - StockholmThe Case for HTTP/2  - Internetdagarna 2015 - Stockholm
The Case for HTTP/2 - Internetdagarna 2015 - Stockholm
 
Looking for a place to hang my helmet
Looking for a place to hang my helmetLooking for a place to hang my helmet
Looking for a place to hang my helmet
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
 

Recently uploaded

TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc
 
CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)
Wonjun Hwang
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
panagenda
 

Recently uploaded (20)

Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
Navigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi DaparthiNavigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi Daparthi
 
How to Check GPS Location with a Live Tracker in Pakistan
How to Check GPS Location with a Live Tracker in PakistanHow to Check GPS Location with a Live Tracker in Pakistan
How to Check GPS Location with a Live Tracker in Pakistan
 
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdf
 
CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 

Mobile is mainstream