$30 off During Our Annual Pro Sale. View Details »

"Design for the Web" course

Peter Gasston
February 14, 2013

"Design for the Web" course

A presentation for the students at the "Design for the Web" course at Tower Hamlets College.

Peter Gasston

February 14, 2013
Tweet

More Decks by Peter Gasston

Other Decks in Programming

Transcript

  1. Design for
    the Web
    Poplar, Feb '13

    View Slide

  2. Peter Gasston
    @stopsatgreen

    View Slide

  3. Creative Technologist
    rehabstudio.com
    (almost)

    View Slide

  4. 1. HTML5 Forms
    2. 3 Good Reasons
    3. Advice

    View Slide

  5. HTML5 Forms

    View Slide

  6. HTML5 Forms

    View Slide

  7. View Slide

  8. View Slide

  9. HTML5 Forms

    View Slide

  10. Forms are the focal
    point of most of the
    user's interaction
    with your website.

    View Slide

  11. 1. Relationship
    2. Conversation
    3. Appearance
    http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/
    Form Usability

    View Slide


  12. Text inputs




    View Slide

  13. Number inputs


    View Slide

  14. Date inputs






    View Slide

  15. Outputs



    View Slide

  16. Constraint
    Validation

    View Slide

  17. Required fields


    View Slide

  18. Pattern
    Matching

    View Slide

  19. Pattern matching


    title="Numbers only!!!">

    View Slide

  20. Limit
    Matching

    View Slide

  21. Limit matching

    View Slide

  22. CSS for Form
    Validation

    View Slide

  23. UI State Pseudo-classes
    :required || :optional
    :valid || :invalid
    :in-range || :out-of-range

    View Slide

  24. JavaScript
    for Form
    Validation

    View Slide

  25. Constraint Validation API
    el.willValidate
    el.checkValidity()
    el.validity

    View Slide

  26. Constraint Validation Events
    el.addEventListener('invalid',foo);
    el.setCustomValidity('PLOP');

    View Slide

  27. Enough about
    bloody forms

    View Slide

  28. Working on
    the Web

    View Slide

  29. It is your
    It is your
    patriotic
    patriotic duty
    duty

    View Slide

  30. Sharing =
    innovation

    View Slide

  31. The adjacent
    possible

    View Slide

  32. The fruits of
    hard-earned
    experience

    View Slide

  33. Be empathetic
    and subjective

    View Slide

  34. Neither your opinion of
    what users should think,
    nor my opinion of what
    users should think, matters
    as much as what users
    actually do think. Be a
    scientist, not a priest.
    - Mark Shuttleworth

    View Slide

  35. Be an
    idealistic
    pragmatist

    View Slide

  36. Never try to discourage
    thinking, for you are sure
    to succeed.
    - Bertrand Russell

    View Slide

  37. Be confident in
    your knowledge

    View Slide

  38. http://xkcd.com/386/

    View Slide

  39. Be willing
    to learn

    View Slide

  40. Be unsatisfied

    View Slide

  41. View Slide

  42. Be involved
    in everything

    View Slide

  43. Be a
    communicator

    View Slide

  44. Be an
    archivist

    View Slide

  45. Be professional

    View Slide

  46. Fin.

    View Slide