Slide 1
Slide 1 text
Paul Robert Lloyd
LBi Denmark: We Do Our Own Stunts
16 May 2012
WEB
DESIGN
NATIVE
Slide 2
Slide 2 text
WEB NATIVE
Slide 3
Slide 3 text
WEB v
NATIVE
Slide 4
Slide 4 text
WEB
APPLICATIONS
NATIVE
Slide 5
Slide 5 text
WEB
APPLICATIONS
NATIVE
NATIVE
Slide 6
Slide 6 text
EMBRACING
A NEW MEDIUM
Slide 7
Slide 7 text
ministryoftype.co.uk/words/article/constructing_the_grid/
Constraint of the page guides the design
Slide 8
Slide 8 text
Websites designed to fit within common screen resolutions
640 × 480
800 × 600
1024 × 768
Slide 9
Slide 9 text
Separate mobile sites
guardian.co.uk / m.guardian.co.uk
Slide 10
Slide 10 text
Title of this slide
flickr.com/photos/adactio/6153481666
Slide 11
Slide 11 text
Title of this slide
Slide 12
Slide 12 text
Title of this slide
Slide 13
Slide 13 text
The medium isn’t broken.
Our understanding of it is.
Slide 14
Slide 14 text
“
alistapart.com/articles/dao/
A Dao of Web Design
— JOHN ALLSOPP
It’s time to throw out the rituals of the
printed page, and to engage with the
medium of the web and its own
nature.
Slide 15
Slide 15 text
THE NATURE
OF THE WEB
Slide 16
Slide 16 text
1. Open
THE NATURE OF THE WEB
Slide 17
Slide 17 text
Apps using Dropbox rejected from App Store
thenextweb.com/apple/2012/05/02/apps-using-dropbox-are-being-rejected-because-apple-is-playing-hardball/
Slide 18
Slide 18 text
Anyone can build a website, and plenty of services will help you do it.
virb.com
Slide 19
Slide 19 text
2. Addressable
THE NATURE OF THE WEB
Slide 20
Slide 20 text
Using web technologies doesn’t make something part of the web
openwebosproject.org
Slide 21
Slide 21 text
Facebook’s anti-web behaviour
facebook.com
Slide 22
Slide 22 text
GitHub provides deep linking, right down to each commit
github.com
Slide 23
Slide 23 text
“
benward.me/blog/understand-the-web
Understand the Web
— BEN WARD
Want to know if your application is
part of the web? Link me into it. Not just
link me to it; link me into it. Not the
front page. Link me to a piece of
content… That is the web: the beautiful
interconnection of navigable content.
Slide 24
Slide 24 text
3. Universal
THE NATURE OF THE WEB
Slide 25
Slide 25 text
Blogger’s Dynamic Views
buzz.blogger.com/2011/09/dynamic-views-seven-new-ways-to-share.html
Slide 26
Slide 26 text
Blogger’s Dynamic Views - without JavaScript
buzz.blogger.com/2011/09/dynamic-views-seven-new-ways-to-share.html
Slide 27
Slide 27 text
The very first website
w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
Slide 28
Slide 28 text
“
scientificamerican.com/article.cfm?id=long-live-the-web
Long Live the Web: A Call for Continued Open Standards and Neutrality
—TIM BERNERS-LEE
The primary design principle
underlying the Web is universality… it
should be accessible from any kind of
hardware that can connect to the
Internet: stationary or mobile, small
screen or large.
Slide 29
Slide 29 text
Progressive enhancement
Slide 30
Slide 30 text
RESPONSIVE
WEB DESIGN
Slide 31
Slide 31 text
Title of this slide
abookapart.com/products/responsive-web-design
Slide 32
Slide 32 text
Ethan Marcotte
ethanmarcotte.com
Slide 33
Slide 33 text
My Website
paulrobertlloyd.com
Slide 34
Slide 34 text
Kiwibank
kiwibank.co.nz
Slide 35
Slide 35 text
Responsive Web Design is
not a silver bullet.
But it’s a step in the right
direction.
Slide 36
Slide 36 text
“
venturebeat.com/2012/05/02/linkedin-ipad-app-engineering
You’ll never believe how LinkedIn built its new iPad app
—KERIN PRASAD, LINKEDIN
A lot of responsive design is building
one site that works everywhere, and
that works for websites. But it’s bad
for apps.
Slide 37
Slide 37 text
Typography Panel in Mac OS X
Slide 38
Slide 38 text
Typography Panel in Mac OS X
Slide 39
Slide 39 text
Typography Panel in Mac OS X
Slide 40
Slide 40 text
blogs.msdn.com/b/b8/archive/2012/03/21/scaling-to-different-screens.aspx
Building Windows 8: Scaling to different screens
Slide 41
Slide 41 text
Rdio is a web application that resizes just like a desktop app
rdio.com
Slide 42
Slide 42 text
Rdio is a web application that resizes just like a desktop app
rdio.com
Slide 43
Slide 43 text
THE WEB APP
EXCEPTION
Slide 44
Slide 44 text
Website Web application
Consumption? Curation?
Slide 45
Slide 45 text
Wikipedia is a website, as it hosts content…
wikipedia.org
Slide 46
Slide 46 text
…but it also allows you to edit articles and perform other tasks.
wikipedia.org
Slide 47
Slide 47 text
What is a web app without content?
icloud.com
Slide 48
Slide 48 text
Website Web App
Open ✔ ✘
Addressable ✔ ✘
Universal ✔ ✘
Excuse my web app
Slide 49
Slide 49 text
Website Web application
Consumption Curation Curation Consumption
Slide 50
Slide 50 text
Web apps meet content
Slide 51
Slide 51 text
Section page on the New York Times website…
nytimes.com/pages/world/index.html
Slide 52
Slide 52 text
…versus the same page on the New York Times ‘skimmer’ app.
nytimes.com/skimmer/#/World
Slide 53
Slide 53 text
Recipe page on the BBC Good Food website…
bbcgoodfood.com
Slide 54
Slide 54 text
…versus the same recipe in the Google Chrome web app.
chrome.google.com/webstore/detail/jnkffnoliaheoidfeejcmnidkkgilkja
Slide 55
Slide 55 text
Inspiration not imitation.
Slide 56
Slide 56 text
Let’s build for the web.
Slide 57
Slide 57 text
Thank you
Tak
paulrobertlloyd.com/archive
@paulrobertlloyd
Creative Commons Licensed
Attribution, Non-Commercial, Share Alike
cc