Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive grids

Avatar for Sibylle Weber 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.

Avatar for Sibylle Weber

Sibylle Weber

May 02, 2013
Tweet

Other Decks in Design

See All in Design
ユーザー像を「みてね」らしく可視化する　家族アルバムみてねUXリサーチチームの取り組み
Avatar for MIXI DESIGN mixi_design
PRO
3
710
2026の目標「もっと定量的に事業、会社へ貢献する！」
Avatar for yuri ohashi yuri_ohashi
0
650
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
Avatar for Kasumi Morita mkasumi
0
1.1k
チームをデザイン対象にする / Design for your team
Avatar for 株式会社カミナシ kaminashi
1
510
デザイナーが主導権を握る、AI協業の本音と実践
Avatar for satosio satosio
7
2.7k
第18回サイゼミ
Avatar for LW lw
1
3.3k
アイデアを加速させる！Firefly ボードで発想の幅を広げよう
Avatar for コネクリ connecre
1
300
文化のデザイン - Soft Impact of Design
Avatar for Atsushi Homma atsushihomma
0
130
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
790
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
Avatar for Muture muture
PRO
0
420
hicard_credential_202601
Avatar for hicard hicard
0
140
結びながら、ひらく - にじむ境界のデザイン
Avatar for Hiroki Tani hilokifigma
3
1.3k

Featured

See All Featured
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
170
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
150
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.8k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
7.9k
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
79
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
250
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.1k
Designing Experiences People Love
Avatar for Jonathan Moore moore
144
24k

Transcript

  1. Responsive grids

  2. 1. Proportions • Typographic hierarchy • Horizontal measure • Aspect

    ratio

  3. • 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’:
  4. None

  5. Typographic hierarchy

  6. Aspect ratio

  7. 1:1

  8. 4:3

  9. golden ratio

  10. Browser chrome changes the aspect ratio!

  11. 2. Content choreography (a term coined by Trent Walton)

  12. 1 2 3

  13. 1 2 3

  14. 1 2 3

  15. 1 2 3

  16. 3. Tools and techniques • CSS border-box • CSS flexible

    box model • CSS grids (only IE10 for now) • Gridset

  17. thank you