The Web Native Designer (August 2011)

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.

0bce06bd06ee7a2c4f5500f25dcf7f18?s=128

Paul Robert Lloyd

August 13, 2011
Tweet

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.