Save 37% off PRO during our Black Friday Sale! »

Web Native Design

0bce06bd06ee7a2c4f5500f25dcf7f18?s=47 Paul Robert Lloyd
May 16, 2012
Design
27
2.4k

Web Native Design

Having embraced the true nature of the medium, it's now time to reframe how we design products for the web.

0bce06bd06ee7a2c4f5500f25dcf7f18?s=128

Paul Robert Lloyd

May 16, 2012
Tweet

More Decks by Paul Robert Lloyd

See All by Paul Robert Lloyd
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
2
1.2k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
6
620
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
4
440
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
12
4k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
0
610
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
7
6.7k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
0
430
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
5
600
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
3
460

Other Decks in Design

See All in Design
6fffdd34b95991b0b2847a8a3b663e3f?s=48 adrianfindsnemo
0
230
Ca63f6ee64787c337d905b069085324c?s=48 juliannaromero
0
1.5k
7eca3e06edc3c69004aaf57de51900c2?s=48 ajstarks
0
100
7b784468f7657f5d33785a16e76ab95e?s=48 morishigeyuta
0
110
070d33664df274636dad3da21c9b21fc?s=48 rockname
4
610
7eca3e06edc3c69004aaf57de51900c2?s=48 ajstarks
4
1.7k
B703da7cc05ce9718d63f9b2c6028ff7?s=48 visional_design
0
1.2k
Cb42953bfedcd81daf5b1330d98712c3?s=48 448jp
2
390
37228dc025342eeadeb18bf1c2976a7a?s=48 fixel_admin
0
330
Bd2cd58cea35f0c4d8965329b8a9d252?s=48 mtym27
5
4.6k
9105b00a46e39490dceece1a02593cbb?s=48 pointedge
1
1.6k
90143fe200ba565ad20f79c42b62c66f?s=48 olmdrd
PRO
0
340

Featured

See All Featured
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
61
7.3k
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
29
5.2k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
335
17k
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
106
5.4k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
35
3.9k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
149
12k
A9704266587836f7e784235e5073b93e?s=48 jmmastey
21
5.1k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
129
22k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
37
2.9k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
238
10k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
449
36k
78b475797a14c84799063c7cd073962f?s=48 holman
295
140k

Transcript

  1. Paul Robert Lloyd LBi Denmark: We Do Our Own Stunts

    16 May 2012 WEB DESIGN NATIVE

  2. WEB NATIVE

  3. WEB v NATIVE

  4. WEB APPLICATIONS NATIVE

  5. WEB APPLICATIONS NATIVE NATIVE

  6. EMBRACING A NEW MEDIUM

  7. ministryoftype.co.uk/words/article/constructing_the_grid/ Constraint of the page guides the design

  8. Websites designed to fit within common screen resolutions 640 × 480 800 × 600

    1024 × 768

  9. Separate mobile sites guardian.co.uk / m.guardian.co.uk

  10. Title of this slide flickr.com/photos/adactio/6153481666

  11. Title of this slide

  12. Title of this slide

  13. The medium isn’t broken. Our understanding of it is.

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

  15. THE NATURE OF THE WEB

  16. 1. Open THE NATURE OF THE WEB

  17. Apps using Dropbox rejected from App Store thenextweb.com/apple/2012/05/02/apps-using-dropbox-are-being-rejected-because-apple-is-playing-hardball/

  18. Anyone can build a website, and plenty of services will

    help you do it. virb.com

  19. 2. Addressable THE NATURE OF THE WEB

  20. Using web technologies doesn’t make something part of the web

    openwebosproject.org

  21. Facebook’s anti-web behaviour facebook.com

  22. GitHub provides deep linking, right down to each commit github.com

  23. “ 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.

  24. 3. Universal THE NATURE OF THE WEB

  25. Blogger’s Dynamic Views buzz.blogger.com/2011/09/dynamic-views-seven-new-ways-to-share.html

  26. Blogger’s Dynamic Views - without JavaScript buzz.blogger.com/2011/09/dynamic-views-seven-new-ways-to-share.html

  27. The very first website w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

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

  29. Progressive enhancement

  30. RESPONSIVE WEB DESIGN

  31. Title of this slide abookapart.com/products/responsive-web-design

  32. Ethan Marcotte ethanmarcotte.com

  33. My Website paulrobertlloyd.com

  34. Kiwibank kiwibank.co.nz

  35. Responsive Web Design is not a silver bullet. But it’s

    a step in the right direction.

  36. “ 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.

  37. Typography Panel in Mac OS X

  38. Typography Panel in Mac OS X

  39. Typography Panel in Mac OS X

  40. blogs.msdn.com/b/b8/archive/2012/03/21/scaling-to-different-screens.aspx Building Windows 8: Scaling to different screens

  41. Rdio is a web application that resizes just like a

    desktop app rdio.com

  42. Rdio is a web application that resizes just like a

    desktop app rdio.com

  43. THE WEB APP EXCEPTION

  44. Website Web application Consumption? Curation?

  45. Wikipedia is a website, as it hosts content… wikipedia.org

  46. …but it also allows you to edit articles and perform

    other tasks. wikipedia.org

  47. What is a web app without content? icloud.com

  48. Website Web App Open ✔ ✘ Addressable ✔ ✘ Universal

    ✔ ✘ Excuse my web app

  49. Website Web application Consumption Curation Curation Consumption

  50. Web apps meet content

  51. Section page on the New York Times website… nytimes.com/pages/world/index.html

  52. …versus the same page on the New York Times ‘skimmer’

    app. nytimes.com/skimmer/#/World

  53. Recipe page on the BBC Good Food website… bbcgoodfood.com

  54. …versus the same recipe in the Google Chrome web app.

    chrome.google.com/webstore/detail/jnkffnoliaheoidfeejcmnidkkgilkja

  55. Inspiration not imitation.

  56. Let’s build for the web.

  57. Thank you Tak paulrobertlloyd.com/archive @paulrobertlloyd Creative Commons Licensed Attribution, Non-Commercial,

    Share Alike cc