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

Small but Stretchy - Responsive Content

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for front front
September 27, 2011
Design
5
360

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
AIエージェントが対話的なUIを返す！MCP−UIで変わるユーザ体験
Avatar for daitasu daitasu
1
170
絵や写真から学ぶ、要素がもたらす副作用
Avatar for keigo kspace
0
190
CULTURE DECK／Frontend Engineer
Avatar for M-HAND,Inc. mhand01
0
900
Drawing for Animation
Avatar for Mandalyn Teo lynteo
2
220
Diverse Design Team Deck
Avatar for Diverse diverse
0
910
ドルちゃん
Avatar for ドルちゃん design_dolphins
0
580
保育現場にAIを 〜人と技術に橋を架けるデザインで考えてきたこと〜 uiuxcamp2026-hoiku-ai-design
Avatar for Takahiro Yamaguchi hiro93n
1
110
研修担当者が一番伸びた　熊本市役所✕AI『泥臭いAI研修』のワークショップ設計について
Avatar for @Garyuten garyuten
2
290
【pmconf2025】PdMの頭の中を見える化する体験構造図
Avatar for Shigeyuki Kameda kamechi7222222
1
2k
越境するデザイン人材：デザイナーが社会資本となる世界へ
Avatar for Goodpatch Inc. goodpatch
2
540
maki setoguchi
Avatar for Maki / Web Designer maki_setoguchi
0
710
「余白」と「欲望」を味方につける ——AI時代のデザインエンジニアリングと「越境」の作法 #KNOTS2026
Avatar for koyaman koyaman
1
1.5k

Featured

See All Featured
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.1k
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.1k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
780
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
250
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
190
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
470
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.6k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
2.4k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k

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