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

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