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
AIでデザインをつくる：基礎編
Avatar for 太田賢一 kenichiota0711
2
2.3k
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
Avatar for Goodpatch Inc. goodpatch
3
3.1k
生成AIの不確実性を価値に変える、「ビズリーチ」の体験設計 / KNOTS2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
4
660
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
Avatar for Kasumi Morita mkasumi
0
1.1k
2026年の勢い / Momentum for 2026
Avatar for bebe bebe
0
340
Drawing for Animation
Avatar for Mandalyn Teo lynteo
2
180
デザインを信じていますか
Avatar for sekig(ojiee) sekiguchiy
1
940
Emmy's Artwork
Avatar for McKenna mcksmith
0
190
ドルちゃん
Avatar for ドルちゃん design_dolphins
0
550
Crisp Code inc.｜ブランドガイドライン - Brand guidelines
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
300
hicard_credential_202601
Avatar for hicard hicard
0
140
これからの「Webデザイン」の話をしよう～デザイナーの私が考えるブロックテーマへの対応で変わりゆくデザインの価値～
Avatar for ミヤケアツシ ds35mm
0
540

Featured

See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.8k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
100
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
46
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
110
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
96
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
1.9k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
0
49
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
520
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.7k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.4k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
360
エンジニアに許された特別な時間の終わり
Avatar for watany watany
106
230k

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