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

Responsive grids

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
見栄えと使いやすさの先にある 特別感 をデザインする / Designing a Sense of Specialness Beyond Aesthetics and Usability
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
250
2026年、デザイナーはなにに賭ける？
Avatar for Kazuhiro Tobita 0b1tk
0
470
デザイナーがAIを使い倒して爆速プロダクト開発！社内ハッカソンでの取り組み紹介
Avatar for 都村　美帆 abokadotyann
9
3k
2026年の勢い / Momentum for 2026
Avatar for bebe bebe
0
340
デザイナーとエンジニアで 同じ山に登ろう
Avatar for moco moco1013
0
130
mount_company_profile
Avatar for mount inc. mount_inc
0
4.9k
コムデマネージャーがプロダクトデザインに挑戦した。むずかしくて楽しかった。
Avatar for payatsun payatsusan213
0
200
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
Avatar for Hiromi Morikawa hiromitsuuuuu
1
1.3k
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
Avatar for ぽん designer_no_pon
0
1.1k
プロダクトデザイナーに学ぶ、『見る気が起きる』ダッシュボードの作り方 / Creating Engaging Dashboards: Lessons from Product Designers
Avatar for yamamoto-yuta yamamotoyuta
2
470
Figmaレクチャー会Part2 もっと使いこなす編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
1
220
Storyboard Exercise: Chase Sequence
Avatar for Mandalyn Teo lynteo
1
200

Featured

See All Featured
Code Reviewing Like a Champion
Avatar for maltzj maltzj
527
40k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
90
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
160
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
350
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.3k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
650
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
130
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k

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