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 full-size slide

  2. WEB NATIVE
    NATIVE
    DEVICE
    v

    View full-size slide

  3. WEB NATIVE
    NATIVE
    DEVICE
    &

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  9. 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 full-size slide


  10. 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 full-size slide

  11. Fully responsive!

    View full-size slide

  12. BAD EXAMPLES

    View full-size slide

  13. 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 full-size slide

  14. 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 full-size slide

  15. CONTENT FIRST

    View full-size slide

  16. TIP
    Design with real content.

    View full-size slide

  17. CSS
    Presentation

    View full-size slide

  18. RESPONSIVE DESIGN

    View full-size slide

  19. 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 full-size slide

  20. NO SILVER BULLET

    View full-size slide

  21. TIP
    Experiment and share
    your findings.

    View full-size slide

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

    View full-size slide

  23. JavaScript
    Behaviour

    View full-size slide

  24. THE MISBEHAVING
    BEHAVIOURAL LAYER

    View full-size slide

  25. TIP
    Think of enhancements
    not fallbacks.

    View full-size slide

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

    View full-size slide

  27. DEVELOPERS =
    DESIGNERS

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  30. 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 full-size slide

  31. TIP
    Only use static images to
    aid collaboration.

    View full-size slide

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

    View full-size slide

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

    View full-size slide