Web Native Design

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

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