The Web Native Designer (August 2011)

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

18. None
19. None

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

26. None
27. None
28. None

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.