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
110
Your Reality Here
stopsatgreen
0
68
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
300
Growing Up, Getting Serious
stopsatgreen
0
53
Surveying the Landscape — November 2016
stopsatgreen
1
120
Surveying the Landscape - Fronteers
stopsatgreen
2
430
The Web vs. The Browser
stopsatgreen
0
110
Surveying the Landscape Sept. 2016
stopsatgreen
1
190
Surveying the Landscape
stopsatgreen
4
590
Other Decks in Programming
See All in Programming
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
23
15k
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
810
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
4.1k
Polars入門
daikikatsuragawa
1
100
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
340
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
350
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
380
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.3k
Ruby GitHub Packages
bkuhlmann
0
630
ゆるい個人開発のススメ
kuroppe1819
10
990
2 週間で Twitter Bot を作ってみた
contour_gara
0
510
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
Building an army of robots
kneath
300
41k
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
Designing for Performance
lara
601
67k
4 Signs Your Business is Dying
shpigford
175
21k
Navigating Team Friction
lara
178
13k
Statistics for Hackers
jakevdp
789
220k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
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.