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

Small but Stretchy - Responsive Content

Avatar for front front
September 27, 2011
Design
5
350

Small but Stretchy - Responsive Content

Slides for @hishellywilson's talk at #csforum2011. Watch the video at http://vimeo.com/28642885

Avatar for front

front

September 27, 2011
Tweet

More Decks by front

See All by front
Voice of Type Test
Avatar for front front
1
19k
Typecast - What you need to know
Avatar for front front
4
12k

Other Decks in Design

See All in Design
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
370
【Designship 2025｜10.11】デザイン組織と事業貢献、その挑戦と結果。
Avatar for payatsun payatsusan213
1
910
【pmconf2025】PdMの頭の中を見える化する体験構造図
Avatar for Shigeyuki Kameda kamechi7222222
1
1.9k
越境するデザイン人材：デザイナーが社会資本となる世界へ
Avatar for Goodpatch Inc. goodpatch
1
500
UI/UX & Web Design Portfolio 2025｜Madoka Kumagai
Avatar for Madoka madoka_portfolio
2
120
見栄えと使いやすさの先にある 特別感 をデザインする / Designing a Sense of Specialness Beyond Aesthetics and Usability
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
250
2026の目標「もっと定量的に事業、会社へ貢献する！」
Avatar for yuri ohashi yuri_ohashi
0
670
TWCP#21 UXデザインと哲学のはなし
Avatar for MAMIYA Shinsuke shinn
0
260
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
2
26k
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
Avatar for Kasumi Morita mkasumi
0
1.1k
プラットフォームに馴染むモバイルアプリデザイン / Mobile App UI Design Lunch LT
Avatar for Hiroki Nagasawa pixyzehn
0
130
OSO2025-マサカリと太陽：伝え方の情報デザイン
Avatar for majimasachi majimasachi
0
670

Featured

See All Featured
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
430
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
273
21k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
240
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.2k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
0
430
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
0
51
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
320
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
410
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k

Transcript

  1. Small but Stretchy RESPONSIVE CONTENT @designbyfront

  2. sasquatchfestival.com CANVAS SIZE

  3. REPOSITIONED RESIZED CUT BACK TURNED OFF /HIDDEN

  4. google.com/trends Jan 2011 Apr 2011 Jul 2011 RESPONSIVE DESIGN CONTENT

    STRATEGY

  5. “Whatever the device – we need to create layouts from

    the content out.” - Mark Boulton, A Richer Canvas, 24 March 2011 ..

  6. Content Choreography by Trent Walton, July 14th 2011

  7. CONTENT CREATION DESIGN DEVELOPMENT

  8. GET INVOLVED or SUFFER THE CONSEQUENCES

  9. MULTIPLE VERSIONS = BAD

  10. MARKED UP CONTENT?

  11. WE NEED TO: Own it Think small Edit 1 2

    3

  12. CONTENT CREATION DESIGN DEVELOPMENT

  13. STARTING WITH MEANS LESS AND

  14. Photo by Kim Smith

  15. LESS IS MORE

  16. None

  17. GROW vs TRIM Photo by Pink Sherbet Photography

  18. “If I’d had more time, I would have written a

    shorter letter” - Blaise Pascal, 16th Century

  19. WRITING EDITING

  20. Google: Responsive web design Mobile rst design Media Queries Follow

    me @hishellywilson