Mobile is Mainstream

Mobile is Mainstream WDC / 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/7589102268 12

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/3473028040 14

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/6734736977 22

http://www.flickr.com/photos/gerardstolk/4989786533 ...but we do it wrong :( 23

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

...Repeats? http://wtfmobileweb.com 25

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/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

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 Impossible Welcome to #Neuland! 53

@rolandguelle Let‘s talk! Thank You! 54

Mobile is Mainstream

Mobile is Mainstream

Other Decks in Technology

Featured

Transcript