1. Mobile is Mainstream
WDC / 13-12-11 / Hamburg
@rolandguelle
1

2. Welcome to #Neuland!
2

3. How the Web has Changed Us
http://www.flickr.com/photos/72645106@N00/58054501
3

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

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

6. Knowledge
http://www.flickr.com/photos/mecklenburg/4430608826
6

7. "Ich glaube an das Pferd.
Das Automobil ist nur
eine vorübergehende
Erscheinung."
- Kaiser Wilhelm II.
(1859-1941)
7

8. Mobile is Mainstream
8

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

10. Digital Cigaret
http://www.flickr.com/photos/theeerin/7065570887/
10

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

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

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

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

15. Mobile Usage
15

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

17. Sensors
http://www.flickr.com/photos/kubapinkwiner/5374484075/
17

18. Superpower!
digital becomes physical
physical becomes digital
http://www.flickr.com/photos/greenog/5458540501
18

19. Frontend Technologies
http://www.flickr.com/photos/grunge/4809128956
19

20. Design Principles
http://www.flickr.com/photos/adactio/5818096043
20

21. Progressive Enhancement
http://www.flickr.com/photos/garethr/449616792
21

22. Party On!
http://www.flickr.com/photos/lorenjavier/6734736977
22

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

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

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

26. http://www.guypo.com/mobile/what-are-responsive-websites-made-of/
Shrink & Hide
Test of 500 responsive websites with different resolutions
26

27. http://httparchive.org/trends.php#numurls
Sites are Growing
1617kB
27

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

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

30. Exclusive vs. Mainstream
http://www.ijailbreak.com/applications/over-400000-apps-in-apple-app-store-have-zero-downloads/
30

31. The Future Will Save Us
31

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

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

34. The Expectation GAP
http://www.flickr.com/photos/russwalker/7509439306
34

35. Software gets worse over Time
35

36. http://www.computerwoche.de/a/it-mit-zwei-geschwindigkeiten,1235936
Speed vs. Stability
Fron
Dev tend
elop
er
Bac
Dev kend
elop
er
36

37. Front-end Development
37

38. Zombie Sites
http://www.flickr.com/photos/laszy/3168779952
38

39. NO.
39

40. Prepare Yourself
http://www.flickr.com/photos/matthileo/3753385131
40

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

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

43. Embed the Server
http://www.flickr.com/photos/coffeegeek/3201175260
43

44. http://tripleodeon.com/2010/10/modernizr-on-the-server-side/
44

45. http://www.netmagazine.com/tutorials/getting-started-ress
http://slideshare.net/4nd3rsen/ress-responsive-design-server-side-components-10084972
45

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

47. Just Imagine...
http://www.flickr.com/photos/imaginecup/5607890599
47

48. Integra
ted Fro
DevToo nt-end
ls
http://remotedebug.org/
48

49. Headle
ss Bro
Runtim wser
e
/
p://casperjs.org
htt
/
/phantomjs.org
http:/
tp://slimerjs.org
ht
g/
http://triflejs.or
49

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

51. Flexibl
e Back
e
Fronte
nd Dev nds for
eloper
s
http://nobackend.org/
51

52. http://blog.hood.ie/2013/11/say-hello-to-offline-first/
Offline
F
as Min irst!
dset
http://offlinefirst.org/
52

53. Imagine The Impossible
Welcome to #Neuland!
53

54. Let‘s talk!
Thank Yo
u!
@rolandguelle
54