mobile is mainstream
DESCRIPTION
TRANSCRIPT
![Page 1: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/1.jpg)
Mobile is MainstreamWDC / 13-12-11 / Hamburg
@rolandguelle
1
![Page 2: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/2.jpg)
Welcome to #Neuland!
2
![Page 3: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/3.jpg)
http://www.flickr.com/photos/72645106@N00/58054501
How the Web has Changed Us
3
![Page 4: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/4.jpg)
http://www.flickr.com/photos/labormikro/2786878184
Shopping
4
![Page 5: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/5.jpg)
http://www.flickr.com/photos/lemonpixel/5337356098
News
5
![Page 6: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/6.jpg)
http://www.flickr.com/photos/mecklenburg/4430608826
Knowledge
6
![Page 7: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/7.jpg)
"Ich glaube an das Pferd.Das Automobil ist nur eine vorübergehende Erscheinung."- Kaiser Wilhelm II. (1859-1941)
7
![Page 8: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/8.jpg)
Mobile is Mainstream
8
![Page 9: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/9.jpg)
Ferdinand Georg Waldmüller„Die Erwartete“
(1850 oder 1860)
9
![Page 10: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/10.jpg)
http://www.flickr.com/photos/theeerin/7065570887/
Digital Cigaret
10
![Page 11: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/11.jpg)
http://www.flickr.com/photos/intelfreepress/8433147083
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.“
11
![Page 12: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/12.jpg)
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/758910226812
![Page 13: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/13.jpg)
http://www.flickr.com/photos/gtzecosan/2957888216
http://blogs.worldbank.org/africacan/more-cell-phones-than-toilets
„...more people today have access to a cell phone than to a clean toilet.“
13
![Page 14: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/14.jpg)
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/347302804014
![Page 15: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/15.jpg)
Mobile Usage
15
![Page 16: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/16.jpg)
http://www.flickr.com/photos/jakecaptive/419257766
Smartphones
16
![Page 17: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/17.jpg)
http://www.flickr.com/photos/kubapinkwiner/5374484075/
Sensors
17
![Page 18: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/18.jpg)
http://www.flickr.com/photos/greenog/5458540501
digital becomes physical
physical becomes digital
Superpower!
18
![Page 19: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/19.jpg)
Frontend Technologies
http://www.flickr.com/photos/grunge/4809128956
19
![Page 20: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/20.jpg)
http://www.flickr.com/photos/adactio/5818096043
Design Principles
20
![Page 21: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/21.jpg)
Progressive Enhancement
http://www.flickr.com/photos/garethr/449616792
21
![Page 22: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/22.jpg)
Party On!
http://www.flickr.com/photos/lorenjavier/673473697722
![Page 23: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/23.jpg)
http://www.flickr.com/photos/gerardstolk/4989786533
...but we do it wrong :(
23
![Page 24: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/24.jpg)
http://www.flickr.com/photos/ericbvd/6174512852
History...
24
![Page 26: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/26.jpg)
http://www.guypo.com/mobile/what-are-responsive-websites-made-of/
Test of 500 responsive websites with different resolutions
Shrink & Hide
26
![Page 27: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/27.jpg)
http://httparchive.org/trends.php#numurls
1617kB
Sites are Growing
27
![Page 28: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/28.jpg)
„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://press.1and1.co.uk/xml/article?article_id=1123
http://www.flickr.com/photos/donkeyhotey/5679642883/28
![Page 29: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/29.jpg)
An experience is only as strong as its weakest link.
The browser is the known unknown.
http://adactio.com/extras/slides/thereisnomobileweb.pdf
Experience
29
![Page 30: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/30.jpg)
Exclusive vs. Mainstream
http://www.ijailbreak.com/applications/over-400000-apps-in-apple-app-store-have-zero-downloads/30
![Page 31: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/31.jpg)
The Future Will Save Us
31
![Page 32: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/32.jpg)
http://thatemil.com/blog/2013/05/22/drowning
HTML, CSS, JavaScript, Sublime Text, PHP, Python, Ruby, Rails, Django, bash, Grunt, Git, Photoshop, Fabric, XPath, GPU, CPU, pen and paper, BDD, Sharpies, Textmate, IE, 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.
Drowning
32
![Page 33: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/33.jpg)
http://www.flickr.com/photos/mar00ned/229903286
„The web isn’t as easy as it used to be for new developers.“
http://owened.co.nz/the-web-isnt-as-easy-as-it-used-to-be-for-new-developers
33
![Page 34: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/34.jpg)
http://www.flickr.com/photos/russwalker/7509439306
The Expectation GAP
34
![Page 35: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/35.jpg)
Software gets worse over Time
35
![Page 36: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/36.jpg)
Backend Developer
Speed vs. Stability
http://www.computerwoche.de/a/it-mit-zwei-geschwindigkeiten,1235936
Frontend Developer
36
![Page 37: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/37.jpg)
Front-end Development
37
![Page 38: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/38.jpg)
http://www.flickr.com/photos/laszy/3168779952
Zombie Sites
38
![Page 39: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/39.jpg)
NO.
39
![Page 40: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/40.jpg)
http://www.flickr.com/photos/matthileo/3753385131
Prepare Yourself
40
![Page 41: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/41.jpg)
“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
http://www.sarahlay.com/2013/07/me-first-is-responsive-design-a-distraction-from-good-content
41
![Page 42: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/42.jpg)
http://www.flickr.com/photos/jm3/355207892
Costs of a Deployment?
Costs of Change Requests?
https://speakerdeck.com/addyosmani/automating-front-end-workflow
Toolchain
42
![Page 43: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/43.jpg)
Embed the Server
http://www.flickr.com/photos/coffeegeek/320117526043
![Page 44: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/44.jpg)
http://tripleodeon.com/2010/10/modernizr-on-the-server-side/44
![Page 45: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/45.jpg)
http://www.netmagazine.com/tutorials/getting-started-resshttp://slideshare.net/4nd3rsen/ress-responsive-design-server-side-components-10084972
45
![Page 46: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/46.jpg)
https://github.com/igrigorik/http-client-hints46
![Page 47: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/47.jpg)
http://www.flickr.com/photos/imaginecup/5607890599
Just Imagine...
47
![Page 48: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/48.jpg)
Integrated Front-end DevTools
http://remotedebug.org/48
![Page 49: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/49.jpg)
http://casperjs.org/
http://phantomjs.org/
http://slimerjs.org
http://triflejs.org/
Headless Browser Runtime
49
![Page 50: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/50.jpg)
http://www.nczonline.net/blog/2013/10/07/node-js-and-the-new-web-front-end/
A Server for Front-end Developers
50
![Page 51: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/51.jpg)
http://nobackend.org/
Flexible Backends for Frontend Developers
51
![Page 52: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/52.jpg)
http://blog.hood.ie/2013/11/say-hello-to-offline-first/
http://offlinefirst.org/
Offline First!as Mindset
52
![Page 53: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/53.jpg)
Imagine The ImpossibleWelcome to #Neuland!
53
![Page 54: Mobile is mainstream](https://reader038.vdocuments.us/reader038/viewer/2022102710/54c750234a7959d41a8b4587/html5/thumbnails/54.jpg)
@rolandguelle
Let‘s talk!Thank You!
54