Web Native Design

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

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

Want more?

0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
2
1.1k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
6
560
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
4
370
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
4
240
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
1
110
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
97
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
5
200
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
5
180
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
2
240
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
3
470
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
120
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
210

Transcript

  1. 1.

    Paul Robert Lloyd LBi Denmark: We Do Our Own Stunts

    16 May 2012 WEB DESIGN NATIVE
  2. 2.

    WEB NATIVE

  3. 3.

    WEB v NATIVE

  4. 4.

    WEB APPLICATIONS NATIVE

  5. 5.

    WEB APPLICATIONS NATIVE NATIVE

  6. 6.

    EMBRACING A NEW MEDIUM

  7. 7.

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

  8. 8.

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

    1024 × 768
  9. 9.

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

  10. 10.

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

  11. 11.

    Title of this slide

  12. 12.

    Title of this slide

  13. 13.

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

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

    THE NATURE OF THE WEB

  16. 16.

    1. Open THE NATURE OF THE WEB

  17. 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. 18.

    Anyone can build a website, and plenty of services will

    help you do it. virb.com
  19. 19.

    2. Addressable THE NATURE OF THE WEB

  20. 20.

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

    openwebosproject.org
  21. 21.

    Facebook’s anti-web behaviour facebook.com

  22. 22.

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

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

    3. Universal THE NATURE OF THE WEB

  25. 25.

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

  26. 26.

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

  27. 27.

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

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

    Progressive enhancement

  30. 30.

    RESPONSIVE WEB DESIGN

  31. 31.

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

  32. 32.

    Ethan Marcotte ethanmarcotte.com

  33. 33.

    My Website paulrobertlloyd.com

  34. 34.

    Kiwibank kiwibank.co.nz

  35. 35.

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

    a step in the right direction.
  36. 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. 37.

    Typography Panel in Mac OS X

  38. 38.

    Typography Panel in Mac OS X

  39. 39.

    Typography Panel in Mac OS X

  40. 40.

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

  41. 41.

    Rdio is a web application that resizes just like a

    desktop app rdio.com
  42. 42.

    Rdio is a web application that resizes just like a

    desktop app rdio.com
  43. 43.

    THE WEB APP EXCEPTION

  44. 44.

    Website Web application Consumption? Curation?

  45. 45.

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

  46. 46.

    …but it also allows you to edit articles and perform

    other tasks. wikipedia.org
  47. 47.

    What is a web app without content? icloud.com

  48. 48.

    Website Web App Open ✔ ✘ Addressable ✔ ✘ Universal

    ✔ ✘ Excuse my web app
  49. 49.

    Website Web application Consumption Curation Curation Consumption

  50. 50.

    Web apps meet content

  51. 51.

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

  52. 52.

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

    app. nytimes.com/skimmer/#/World
  53. 53.

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

  54. 54.

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

    chrome.google.com/webstore/detail/jnkffnoliaheoidfeejcmnidkkgilkja
  55. 55.

    Inspiration not imitation.

  56. 56.

    Let’s build for the web.

  57. 57.

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

    Share Alike cc