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

Responsive grids

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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 Iori67 yoriss67
0
130
decksh object reference
Avatar for Anthony Starks ajstarks
2
1.5k
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
Avatar for インクルーシブデザインスタジオCULUMU culumu
1
570
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
Avatar for ぽん designer_no_pon
0
1.1k
TWCP#21 UXデザインと哲学のはなし
Avatar for MAMIYA Shinsuke shinn
0
260
【Designship 2025｜10.11】デザイン組織と事業貢献、その挑戦と結果。
Avatar for payatsun payatsusan213
1
910
チームをデザイン対象にする / Design for your team
Avatar for 株式会社カミナシ kaminashi
1
520
AI業務アプリケーションの体験デザイン
Avatar for kim kazuhirokimura
0
250
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
Avatar for Hiromi Morikawa hiromitsuuuuu
1
1.3k
公開スライド）熊本市様-電子申請中級編
Avatar for @Garyuten garyuten
0
820
CREATIVE CLASS受講課題｜無印良品を題材としたブランド再構築について
Avatar for satoshi kobayashi happy_ferret153
0
610
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
Avatar for Kasumi Morita mkasumi
0
1.1k

Featured

See All Featured
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
110
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.3k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
2
2.4k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
130
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
110
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
110
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
64
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
160
HDC tutorial
Avatar for Michiel Stock michielstock
1
370

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