Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Paul Robert Lloyd

August 13, 2011
Tweet

More Decks by Paul Robert Lloyd

Other Decks in Design

Transcript

  1. WEB NATIVE
    Paul Robert Lloyd
    DESIGNER
    Geek in the Park
    13 August 2011
    THE

    View Slide

  2. WEB NATIVE
    v

    View Slide

  3. WEB NATIVE
    NATIVE
    DEVICE
    v

    View Slide

  4. WEB NATIVE
    NATIVE
    DEVICE
    &

    View Slide

  5. WEB
    NATIVE

    View Slide

  6. Happy 20th birthday!
    Photo by Robin Robokow
    http://flic.kr/p/AqLWt

    View Slide

  7. What are the three core
    web technologies?
    QUESTION
    ? ? ?

    View Slide

  8. HTML
    What are the three core
    web technologies?
    QUESTION
    ?
    ?

    View Slide

  9. HTML HTTP
    What are the three core
    web technologies?
    QUESTION
    ?

    View Slide

  10. HTML HTTP URI’s
    What are the three core
    web technologies?
    QUESTION

    View Slide


  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

    View Slide


  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

    View Slide

  13. Fully responsive!

    View Slide

  14. BAD EXAMPLES

    View Slide

  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

    View Slide

  16. JS
    CSS
    HTML

    View Slide

  17. HTML
    Content

    View Slide

  18. View Slide

  19. View Slide

  20. CONTENT

    View Slide

  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

    View Slide

  22. CONTENT FIRST

    View Slide

  23. TIP
    Design with real content.

    View Slide

  24. CSS
    Presentation

    View Slide

  25. RESPONSIVE DESIGN

    View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. CONTEXT

    View Slide

  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

    View Slide

  31. NO SILVER BULLET

    View Slide

  32. TIP
    Experiment and share
    your findings.

    View Slide

  33. TIP
    Beware of fixed or device
    specific values.
    pt px
    PRINT SCREEN WEB
    % em

    View Slide

  34. JavaScript
    Behaviour

    View Slide

  35. THE MISBEHAVING
    BEHAVIOURAL LAYER

    View Slide

  36. TIP
    Think of enhancements
    not fallbacks.

    View Slide

  37. Erm...
    I thought this talk was about design?

    View Slide

  38. DEVELOPERS =
    DESIGNERS

    View Slide

  39. USER EXPERIENCE
    DESIGNER
    INTERACTION
    DESIGNER
    FRONT-END
    DEVELOPER
    ENTIRE TEAM

    View Slide

  40. USER EXPERIENCE
    DESIGNER
    INTERACTION
    DESIGNER
    FRONT-END
    DEVELOPER
    ENTIRE TEAM

    View Slide


  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

    View Slide

  42. TIP
    Only use static images to
    aid collaboration.

    View Slide

  43. (That’s what she said)
    This is hard!

    View Slide

  44. paulrobertlloyd.com/archive/
    @paulrobertlloyd
    Creative Commons Licensed
    Attribution, Non-Commercial, Share Alike
    cc
    Thank-you.

    View Slide