Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
"Design for the Web" course
Search
Peter Gasston
February 14, 2013
Programming
3
2.9k
"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
Share
More Decks by Peter Gasston
See All by Peter Gasston
People Don’t Change
stopsatgreen
0
130
Your Reality Here
stopsatgreen
0
80
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
320
Growing Up, Getting Serious
stopsatgreen
0
71
Surveying the Landscape — November 2016
stopsatgreen
1
140
Surveying the Landscape - Fronteers
stopsatgreen
2
450
The Web vs. The Browser
stopsatgreen
0
160
Surveying the Landscape Sept. 2016
stopsatgreen
1
290
Surveying the Landscape
stopsatgreen
4
750
Other Decks in Programming
See All in Programming
Honoとフロントエンドの 型安全性について
yodaka
5
330
Spring gRPC について / About Spring gRPC
mackey0225
0
220
チームリードになって変わったこと
isaka1022
0
190
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
4
1.3k
SpringBoot3.4の構造化ログ #kanjava
irof
2
980
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
Linux && Docker 研修/Linux && Docker training
forrep
24
4.5k
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
190
もう僕は OpenAPI を書きたくない
sgash708
3
990
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Why Our Code Smells
bkeepers
PRO
336
57k
Bash Introduction
62gerente
610
210k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
We Have a Design System, Now What?
morganepeng
51
7.4k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
RailsConf 2023
tenderlove
29
1k
Statistics for Hackers
jakevdp
797
220k
Transcript
Design for the Web Poplar, Feb '13
Peter Gasston @stopsatgreen
Creative Technologist rehabstudio.com (almost)
1. HTML5 Forms 2. 3 Good Reasons 3. Advice
HTML5 Forms
HTML5 Forms
None
None
HTML5 Forms
Forms are the focal point of most of the user's
interaction with your website.
1. Relationship 2. Conversation 3. Appearance http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/ Form Usability
<input type="text"> Text inputs <input type="url"> <input type="email"> <input type="search">
<input type="tel">
Number inputs <input type="number"> <input type="range">
Date inputs <input type="date"> <input type="datetime"> <input type="datetime-local"> <input type="month">
<input type="week"> <input type="time">
Outputs <progress></progress> <meter></meter> <output></output>
Constraint Validation
Required fields <input type="text"> <input type="text" required>
Pattern Matching
Pattern matching <input type="url"> <input type="text" pattern="[0-9]*"> <input type="text" pattern="[0-9]*"
title="Numbers only!!!">
Limit Matching
Limit matching <input type="number" max="10">
CSS for Form Validation
UI State Pseudo-classes :required || :optional :valid || :invalid :in-range
|| :out-of-range
JavaScript for Form Validation
Constraint Validation API el.willValidate el.checkValidity() el.validity
Constraint Validation Events el.addEventListener('invalid',foo); el.setCustomValidity('PLOP');
Enough about bloody forms
Working on the Web
It is your It is your patriotic patriotic duty duty
Sharing = innovation
The adjacent possible
The fruits of hard-earned experience
Be empathetic and subjective
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
Be an idealistic pragmatist
Never try to discourage thinking, for you are sure to
succeed. - Bertrand Russell
Be confident in your knowledge
http://xkcd.com/386/
Be willing to learn
Be unsatisfied
None
Be involved in everything
Be a communicator
Be an archivist
Be professional
Fin.