The Web Native Designer (August 2011)

When print design can lay claim to a history stretching as far back as the middle ages, perhaps it’s no surprise that we have taken its methods and applied them to the web. Yet as this relatively new medium reaches the same level of ubiquity as paper, and with it’s underlying technologies adapting to meet this need, so the design process needs to mature too. In this session Paul will review our existing methods, and investigate which aspects will require change if we are to design for the web as a medium in its own right.

Transcript

1. WEB NATIVE Paul Robert Lloyd DESIGNER Geek in the Park 13 August 2011 THE
2. WEB NATIVE v
3. WEB NATIVE NATIVE DEVICE v
4. WEB NATIVE NATIVE DEVICE &
5. WEB NATIVE
6. Happy 20th birthday! Photo by Robin Robokow http://flic.kr/p/AqLWt
7. What are the three core web technologies? QUESTION ? ? ?
8. HTML What are the three core web technologies? QUESTION ? ?
9. HTML HTTP What are the three core web technologies? QUESTION ?
10. HTML HTTP URI’s What are the three core web technologies? QUESTION
11. “ The primary design principle underlying the Web’s usefulness and growth is universality… it should be accessible from any kind of hardware that can connect to the Internet: stationary or mobile, small screen or large. TIM BERNERS-LEE Long Live the Web: A Call for Continued Open Standards and Neutrality
12. “ Want to know if your ‘HTML application’ is part of the web? Link me into it. Not just link me to it; link me into it. Not just to the black-box frontpage. Link me to a piece of content… That is the web: The beautiful interconnection of navigable content. BEN WARD Understand the web
13. Fully responsive!
14. BAD EXAMPLES
15. As of August 1st, we will discontinue support for the following browsers and their predecessors: Firefox 3.5, Internet Explorer 7, and Safari 3. In these older browsers you may have trouble using certain features and eventually these apps may stop working entirely. VENKET PANCHAPAKESAN (GOOGLE) Our plans to support modern browsers across Google Apps “
16. JS CSS HTML
17. HTML Content
20. CONTENT
21. In order to embrace designing native layouts for the web – whatever the device – we need to shed the notion that we create layouts from a canvas in. We need to flip it on its head, and create layouts from the content out. MARK BOULTON A Richer Canvas “
22. CONTENT FIRST
23. TIP Design with real content.
24. CSS Presentation
25. RESPONSIVE DESIGN
29. CONTEXT
30. Mobile users want to see our menu, hours and delivery number. Desktop users definitely want this 1Mb PNG of somebody smiling at a salad. MAT 'WILTO' MARQUIS Tweeted on 27 April 2011 “
31. NO SILVER BULLET
32. TIP Experiment and share your findings.
33. TIP Beware of fixed or device specific values. pt px PRINT SCREEN WEB % em
34. JavaScript Behaviour
35. THE MISBEHAVING BEHAVIOURAL LAYER
36. TIP Think of enhancements not fallbacks.
37. Erm... I thought this talk was about design?
38. DEVELOPERS = DESIGNERS
39. USER EXPERIENCE DESIGNER INTERACTION DESIGNER FRONT-END DEVELOPER ENTIRE TEAM
40. USER EXPERIENCE DESIGNER INTERACTION DESIGNER FRONT-END DEVELOPER ENTIRE TEAM
41. “ Being T-shaped means you can shift yourself and provide value at just about any stage or type of project—like sketching, wire-framing, visual design, and code. MARK OTTO Flatten those T’s
42. TIP Only use static images to aid collaboration.
43. (That’s what she said) This is hard!
44. paulrobertlloyd.com/archive/ @paulrobertlloyd Creative Commons Licensed Attribution, Non-Commercial, Share Alike cc Thank-you.