際際滷

際際滷Share a Scribd company logo
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 three kids use a mobile phone
or tablet before they can talk.

http://www.flickr.com/photos/intelfreepress/8433147083
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://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
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
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 different resolutions
26
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 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
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
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
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
http://owened.co.nz/the-web-isnt-as-easy-as-it-used-to-be-for-new-developers

The web isnt as
easy as it used
to be for new
developers.

http://www.flickr.com/photos/mar00ned/229903286
33
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 kend
elop
er

36
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 horse, as a catalyst to fix
whats wrong with your website and process.
Karen McGrane

http://www.flickr.com/photos/mac9001/7074325187
41
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
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
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

49
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
Lets talk!

Thank Yo
u!

@rolandguelle
54

More Related Content

Mobile is mainstream