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.8k
"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
120
Your Reality Here
stopsatgreen
0
70
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
300
Growing Up, Getting Serious
stopsatgreen
0
54
Surveying the Landscape — November 2016
stopsatgreen
1
120
Surveying the Landscape - Fronteers
stopsatgreen
2
430
The Web vs. The Browser
stopsatgreen
0
130
Surveying the Landscape Sept. 2016
stopsatgreen
1
230
Surveying the Landscape
stopsatgreen
4
650
Other Decks in Programming
See All in Programming
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
160
CSC307 Lecture 09
javiergs
PRO
1
500
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
Temporalを取り巻く仕様を整理する
sajikix
0
110
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
Async Await: Mastering Python's Time-Bending Tricks - EuroPython2024
yanbo
1
290
Product Management LT会_クアンド新家
shinshin
0
210
入社1ヶ月でここまでやった!Findy Toolsインフラ支援の最適化
rvirus0817
6
1.4k
実用的かつリーズナブルな 「Azure × Gemini × LINE」~キャラクターBot 実装ライブデモ~
tomodo_ysys
1
170
リハビリmruby
kishima
1
160
Terraformテスト入門
msato
0
530
継続的な活動で築く地方エンジニアの道
myamashii
2
350
Featured
See All Featured
Being A Developer After 40
akosma
72
580k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Bash Introduction
62gerente
607
210k
Making Projects Easy
brettharned
111
5.7k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Teambox: Starting and Learning
jrom
130
8.6k
Done Done
chrislema
179
15k
Ruby is Unlike a Banana
tanoku
96
10k
BBQ
matthewcrist
82
9k
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.