Your SlideShare is downloading. ×
0
Mobile is Mainstream
WDC / 13-12-11 / Hamburg
@rolandguelle

1
Welcome to #Neuland!

2
How the Web has Changed Us

http://www.flickr.com/photos/72645106@N00/58054501
3
Shopping

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

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

http://www.flickr.com/photos/mecklenburg/4430608826
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
Digital Cigaret

http://www.flickr.com/photos/theeerin/7065570887/
10
http://www.dailymail.co.uk/sciencetech/article-2478328/One-kids-use-mobile-phone-tablet-speak-sentences.html

„One in thre...
http://www.digitalstrategyconsulting.com/intelligence/2013/10/india_internet_use_over_50_web_users_are_mobileonly.php

„In...
http://blogs.worldbank.org/africacan/more-cell-phones-than-toilets

„...more people today have access to a
cell phone than...
http://www.engadget.com/2013/08/14/lenovo-posts-q1-2014-earnings/

„Lenovo posts Q1 earnings, reveals that
its mobile sale...
Mobile Usage

15
Smartphones

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

http://www.flickr.com/photos/kubapinkwiner/5374484075/
17
Superpower!

digital becomes physical
physical becomes digital

http://www.flickr.com/photos/greenog/5458540501
18
Frontend Technologies

http://www.flickr.com/photos/grunge/4809128956
19
Design Principles

http://www.flickr.com/photos/adactio/5818096043
20
Progressive Enhancement

http://www.flickr.com/photos/garethr/449616792
21
Party On!

http://www.flickr.com/photos/lorenjavier/6734736977
22
...but we do it wrong :(

http://www.flickr.com/photos/gerardstolk/4989786533
23
History...

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

...Repeats?

25
http://www.guypo.com/mobile/what-are-responsive-websites-made-of/

Shrink & Hide

Test of 500 responsive websites with dif...
http://httparchive.org/trends.php#numurls

Sites are Growing
1617kB

27
http://press.1and1.co.uk/xml/article?article_id=1123

„The extent of consumer annoyance is hardly surprising
when we consi...
Experience

An experience is only as strong as its weakest link.
The browser is the known unknown.

http://adactio.com/ext...
Exclusive vs. Mainstream

http://www.ijailbreak.com/applications/over-400000-apps-in-apple-app-store-have-zero-downloads/
...
The Future Will Save Us

31
HTML, CSS, JavaScript, Sublime Text, PHP, Python, Ruby,
Rails, Django, bash, Grunt, Git, Photoshop, Fabric, XPath,
Drownin...
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 ...
The Expectation GAP

http://www.flickr.com/photos/russwalker/7509439306
34
Software gets worse over Time

35
http://www.computerwoche.de/a/it-mit-zwei-geschwindigkeiten,1235936

Speed vs. Stability

Fron
Dev tend
elop
er

Bac
Dev k...
Front-end Development

37
Zombie Sites

http://www.flickr.com/photos/laszy/3168779952
38
NO.

39
Prepare Yourself

http://www.flickr.com/photos/matthileo/3753385131
40
http://www.sarahlay.com/2013/07/me-first-is-responsive-design-a-distraction-from-good-content

“Use mobile as a Trojan hor...
https://speakerdeck.com/addyosmani/automating-front-end-workflow

Toolchain

Costs of a Deployment?
Costs of Change Reques...
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-sid...
https://github.com/igrigorik/http-client-hints
46
Just Imagine...

http://www.flickr.com/photos/imaginecup/5607890599
47
Integra
ted Fro
DevToo nt-end
ls

http://remotedebug.org/
48
Headle
ss Bro
Runtim wser
e

/
p://casperjs.org
htt
/
/phantomjs.org
http:/

tp://slimerjs.org
ht
g/
http://triflejs.or

4...
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
Flexibl
e Back
e
Fronte
nd Dev nds for
eloper
s

http://nobackend.org/
51
http://blog.hood.ie/2013/11/say-hello-to-offline-first/

Offline
F
as Min irst!
dset

http://offlinefirst.org/
52
Imagine The Impossible
Welcome to #Neuland!

53
Let‘s talk!

Thank Yo
u!

@rolandguelle
54
Upcoming SlideShare
Loading in...5
×

Mobile is mainstream

1,117

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,117
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Mobile is mainstream"

  1. 1. Mobile is Mainstream WDC / 13-12-11 / Hamburg @rolandguelle 1
  2. 2. Welcome to #Neuland! 2
  3. 3. How the Web has Changed Us http://www.flickr.com/photos/72645106@N00/58054501 3
  4. 4. Shopping http://www.flickr.com/photos/labormikro/2786878184 4
  5. 5. News http://www.flickr.com/photos/lemonpixel/5337356098 5
  6. 6. Knowledge http://www.flickr.com/photos/mecklenburg/4430608826 6
  7. 7. "Ich glaube an das Pferd. Das Automobil ist nur eine vorübergehende Erscheinung." - Kaiser Wilhelm II. (1859-1941) 7
  8. 8. Mobile is Mainstream 8
  9. 9. Ferdinand Georg Waldmüller „Die Erwartete“ (1850 oder 1860) 9
  10. 10. Digital Cigaret http://www.flickr.com/photos/theeerin/7065570887/ 10
  11. 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. 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. 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. 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. 15. Mobile Usage 15
  16. 16. Smartphones http://www.flickr.com/photos/jakecaptive/419257766 16
  17. 17. Sensors http://www.flickr.com/photos/kubapinkwiner/5374484075/ 17
  18. 18. Superpower! digital becomes physical physical becomes digital http://www.flickr.com/photos/greenog/5458540501 18
  19. 19. Frontend Technologies http://www.flickr.com/photos/grunge/4809128956 19
  20. 20. Design Principles http://www.flickr.com/photos/adactio/5818096043 20
  21. 21. Progressive Enhancement http://www.flickr.com/photos/garethr/449616792 21
  22. 22. Party On! http://www.flickr.com/photos/lorenjavier/6734736977 22
  23. 23. ...but we do it wrong :( http://www.flickr.com/photos/gerardstolk/4989786533 23
  24. 24. History... http://www.flickr.com/photos/ericbvd/6174512852 24
  25. 25. http://wtfmobileweb.com ...Repeats? 25
  26. 26. http://www.guypo.com/mobile/what-are-responsive-websites-made-of/ Shrink & Hide Test of 500 responsive websites with different resolutions 26
  27. 27. http://httparchive.org/trends.php#numurls Sites are Growing 1617kB 27
  28. 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. 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. 30. Exclusive vs. Mainstream http://www.ijailbreak.com/applications/over-400000-apps-in-apple-app-store-have-zero-downloads/ 30
  31. 31. The Future Will Save Us 31
  32. 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. 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. 34. The Expectation GAP http://www.flickr.com/photos/russwalker/7509439306 34
  35. 35. Software gets worse over Time 35
  36. 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. 37. Front-end Development 37
  38. 38. Zombie Sites http://www.flickr.com/photos/laszy/3168779952 38
  39. 39. NO. 39
  40. 40. Prepare Yourself http://www.flickr.com/photos/matthileo/3753385131 40
  41. 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. 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. 43. Embed the Server http://www.flickr.com/photos/coffeegeek/3201175260 43
  44. 44. http://tripleodeon.com/2010/10/modernizr-on-the-server-side/ 44
  45. 45. http://www.netmagazine.com/tutorials/getting-started-ress http://slideshare.net/4nd3rsen/ress-responsive-design-server-side-components-10084972 45
  46. 46. https://github.com/igrigorik/http-client-hints 46
  47. 47. Just Imagine... http://www.flickr.com/photos/imaginecup/5607890599 47
  48. 48. Integra ted Fro DevToo nt-end ls http://remotedebug.org/ 48
  49. 49. Headle ss Bro Runtim wser e / p://casperjs.org htt / /phantomjs.org http:/ tp://slimerjs.org ht g/ http://triflejs.or 49
  50. 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. 51. Flexibl e Back e Fronte nd Dev nds for eloper s http://nobackend.org/ 51
  52. 52. http://blog.hood.ie/2013/11/say-hello-to-offline-first/ Offline F as Min irst! dset http://offlinefirst.org/ 52
  53. 53. Imagine The Impossible Welcome to #Neuland! 53
  54. 54. Let‘s talk! Thank Yo u! @rolandguelle 54
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×