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
Responsive grids
Search
Sibylle Weber
May 02, 2013
Design
1
190
Responsive grids
A short talk I gave to my fellow students on the MA Web Design & Content Planning on 1 May 2013.
Sibylle Weber
May 02, 2013
Tweet
Share
Other Decks in Design
See All in Design
Designing UIs without a UI designer
strongeron
0
120
JBUG東京#22登壇資料_日頃クライアントワークを行っているディレクターが自社コーポレートサイトリニューアルを担当して学んだこと
webnaut
0
200
業務システムのUX/UI設計ノウハウを解説。デザイナー不在で失敗しないために身につけるべき基本とは?
ncdc
2
280
B/43プラスカードができるまで
putchomsmartbank
0
470
間違った「問い」を乗り越え ノベルティをプチバズりさせた話
takaikanako
0
1.2k
文化に寄りそうデザイン
recruitengineers
PRO
4
910
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
1
170
ユーザーのためなら 『デザイン』 以外にも手を伸ばせる
navitimejapan
PRO
2
750
不可分の民藝から可分の工業産業へ
creatorqsf
1
350
The Fight
euralisw
0
110
Métricas de UX - Reflexões sobre o uso de dados numéricos no contexto de UX
videlvequio
0
150
noteのアクセシビリティ これまでのプロダクト・組織へのアプローチとこれからのこと
tatsuyasawanobori
1
1k
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
289
19k
RailsConf 2023
tenderlove
4
540
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Rails Girls Zürich Keynote
gr2m
91
13k
Happy Clients
brianwarren
92
6.4k
Code Review Best Practice
trishagee
55
15k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
241
1.2M
What the flash - Photography Introduction
edds
64
11k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
A Philosophy of Restraint
colly
197
16k
Transcript
Responsive grids
1. Proportions • Typographic hierarchy • Horizontal measure • Aspect
ratio
• Define relationships from your content. If none exist, create
some. • Use ratios or relational measurements above fixed measurements. • Bind the content to the device. Mark Boulton’s ‘New Canon’:
None
Typographic hierarchy
Aspect ratio
1:1
4:3
golden ratio
Browser chrome changes the aspect ratio!
2. Content choreography (a term coined by Trent Walton)
1 2 3
1 2 3
1 2 3
1 2 3
3. Tools and techniques • CSS border-box • CSS flexible
box model • CSS grids (only IE10 for now) • Gridset
thank you