mobile is mainstream
DESCRIPTION
TRANSCRIPT
Mobile is MainstreamWDC / 13-12-11 / Hamburg
@rolandguelle
1
Welcome to #Neuland!
2
http://www.flickr.com/photos/72645106@N00/58054501
How the Web has Changed Us
3
http://www.flickr.com/photos/labormikro/2786878184
Shopping
4
http://www.flickr.com/photos/lemonpixel/5337356098
News
5
http://www.flickr.com/photos/mecklenburg/4430608826
Knowledge
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
http://www.flickr.com/photos/theeerin/7065570887/
Digital Cigaret
10
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
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
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
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
Mobile Usage
15
http://www.flickr.com/photos/jakecaptive/419257766
Smartphones
16
http://www.flickr.com/photos/kubapinkwiner/5374484075/
Sensors
17
http://www.flickr.com/photos/greenog/5458540501
digital becomes physical
physical becomes digital
Superpower!
18
Frontend Technologies
http://www.flickr.com/photos/grunge/4809128956
19
http://www.flickr.com/photos/adactio/5818096043
Design Principles
20
Progressive Enhancement
http://www.flickr.com/photos/garethr/449616792
21
Party On!
http://www.flickr.com/photos/lorenjavier/673473697722
http://www.flickr.com/photos/gerardstolk/4989786533
...but we do it wrong :(
23
http://www.flickr.com/photos/ericbvd/6174512852
History...
24
http://www.guypo.com/mobile/what-are-responsive-websites-made-of/
Test of 500 responsive websites with different resolutions
Shrink & Hide
26
http://httparchive.org/trends.php#numurls
1617kB
Sites are Growing
27
„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
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
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
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
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
http://www.flickr.com/photos/russwalker/7509439306
The Expectation GAP
34
Software gets worse over Time
35
Backend Developer
Speed vs. Stability
http://www.computerwoche.de/a/it-mit-zwei-geschwindigkeiten,1235936
Frontend Developer
36
Front-end Development
37
http://www.flickr.com/photos/laszy/3168779952
Zombie Sites
38
NO.
39
http://www.flickr.com/photos/matthileo/3753385131
Prepare Yourself
40
“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
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
Embed the Server
http://www.flickr.com/photos/coffeegeek/320117526043
http://tripleodeon.com/2010/10/modernizr-on-the-server-side/44
http://www.netmagazine.com/tutorials/getting-started-resshttp://slideshare.net/4nd3rsen/ress-responsive-design-server-side-components-10084972
45
https://github.com/igrigorik/http-client-hints46
http://www.flickr.com/photos/imaginecup/5607890599
Just Imagine...
47
Integrated Front-end DevTools
http://remotedebug.org/48
http://casperjs.org/
http://phantomjs.org/
http://slimerjs.org
http://triflejs.org/
Headless Browser Runtime
49
http://www.nczonline.net/blog/2013/10/07/node-js-and-the-new-web-front-end/
A Server for Front-end Developers
50
http://nobackend.org/
Flexible Backends for Frontend Developers
51
http://blog.hood.ie/2013/11/say-hello-to-offline-first/
http://offlinefirst.org/
Offline First!as Mindset
52
Imagine The ImpossibleWelcome to #Neuland!
53
@rolandguelle
Let‘s talk!Thank You!
54