Web Native Design

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