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
Drawing for Animation
Avatar for Mandalyn Teo lynteo
2
180
2026年の勢い / Momentum for 2026
Avatar for bebe bebe
0
340
CREATIVE CLASS受講課題｜無印良品を題材としたブランド再構築について
Avatar for satoshi kobayashi happy_ferret153
0
610
文化のデザイン - Soft Impact of Design
Avatar for Atsushi Homma atsushihomma
0
140
見栄えと使いやすさの先にある 特別感 をデザインする / Designing a Sense of Specialness Beyond Aesthetics and Usability
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
250
Shaolin_Showdown
Avatar for Sol Metts solmetts
0
280
ドルちゃん
Avatar for ドルちゃん design_dolphins
0
550
新規AIプロダクトで、事前に知るべきだった3つの壁 〜医療AIを1年間作って、従来の開発が通用しなかった話〜 / Three Walls in Building AI Products
Avatar for Takuya Shikichi shikichee
2
3.2k
Franks Myth
Avatar for George Frank Hayford-Taylor gfht1
1
410
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
Avatar for Aki spring_aki
1
290
はじめての演奏会フライヤーデザイン
Avatar for Kaito Kikuchi chorkaichan
1
220
Mandalyn_DT5001_FinalAssignment.pdf
Avatar for Mandalyn Teo lynteo
0
130

Featured

See All Featured
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
0
170
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
60
42k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
170
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.4k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
0
140
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
160
Fireside Chat
Avatar for paigeccino paigeccino
41
3.8k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
9
36k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
280
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
410

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