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
140
Your Reality Here
stopsatgreen
0
81
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
320
Growing Up, Getting Serious
stopsatgreen
0
72
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
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
940
昭和の職場からアジャイルの世界へ
kumagoro95
1
400
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
880
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
570
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
130
Domain-Driven Transformation
hschwentner
2
1.9k
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
1
200
SpringBoot3.4の構造化ログ #kanjava
irof
3
1k
楽しく向き合う例外対応
okutsu
0
510
ソフトウェアエンジニアの成長
masuda220
PRO
12
2k
Unity Android XR入門
sakutama_11
0
170
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
380
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Unsuck your backbone
ammeep
669
57k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Automating Front-end Workflow
addyosmani
1368
200k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
The Invisible Side of Design
smashingmag
299
50k
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.