"Design for the Web" course

Slide 1

Slide 1 text

Design for the Web Poplar, Feb '13

Slide 2

Slide 2 text

Peter Gasston @stopsatgreen

Slide 3

Slide 3 text

Creative Technologist rehabstudio.com (almost)

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

HTML5 Forms

Slide 6

Slide 6 text

HTML5 Forms

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

HTML5 Forms

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Text inputs

Slide 13

Slide 13 text

Number inputs

Slide 14

Slide 14 text

Date inputs

Slide 15

Slide 15 text

Outputs

Slide 16

Slide 16 text

Constraint Validation

Slide 17

Slide 17 text

Required fields

Slide 18

Slide 18 text

Pattern Matching

Slide 19

Slide 19 text

Pattern matching

Slide 20

Slide 20 text

Limit Matching

Slide 21

Slide 21 text

Limit matching

Slide 22

Slide 22 text

CSS for Form Validation

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

JavaScript for Form Validation

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Enough about bloody forms

Slide 28

Slide 28 text

Working on the Web

Slide 29

Slide 29 text

It is your It is your patriotic patriotic duty duty

Slide 30

Slide 30 text

Sharing = innovation

Slide 31

Slide 31 text

The adjacent possible

Slide 32

Slide 32 text

The fruits of hard-earned experience

Slide 33

Slide 33 text

Be empathetic and subjective

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Be an idealistic pragmatist

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Be confident in your knowledge

Slide 38

Slide 38 text

http://xkcd.com/386/

Slide 39

Slide 39 text

Be willing to learn

Slide 40

Slide 40 text

Be unsatisfied

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

Be involved in everything

Slide 43

Slide 43 text

Be a communicator

Slide 44

Slide 44 text

Be an archivist

Slide 45

Slide 45 text

Be professional

Slide 46

Slide 46 text

Fin.