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
310
Growing Up, Getting Serious
stopsatgreen
0
70
Surveying the Landscape — November 2016
stopsatgreen
1
140
Surveying the Landscape - Fronteers
stopsatgreen
2
450
The Web vs. The Browser
stopsatgreen
0
150
Surveying the Landscape Sept. 2016
stopsatgreen
1
280
Surveying the Landscape
stopsatgreen
4
740
Other Decks in Programming
See All in Programming
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
1
220
DMMオンラインサロンアプリのSwift化
hayatan
0
280
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
240
ESLintプラグインを使用してCDKのセオリーを適用する
yamanashi_ren01
2
450
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
140
WebDriver BiDiとは何なのか
yotahada3
1
120
Rubyでつくるパケットキャプチャツール
ydah
1
590
Immutable ActiveRecord
megane42
0
130
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
240
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
100
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
520
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
540
Featured
See All Featured
Building Adaptive Systems
keathley
39
2.4k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
RailsConf 2023
tenderlove
29
980
Side Projects
sachag
452
42k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Facilitating Awesome Meetings
lara
51
6.2k
A better future with KSS
kneath
238
17k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
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.