Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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
【MIXI MEETUP！ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏：デザイナーが語るプロダクト誕生秘話
Avatar for MIXI DESIGN mixi_design
PRO
0
170
Ana Cortes Visual Development Portfolio 2025
Avatar for Ana Belen Cortes Diaz haruanleb
0
140
Findyのプロデチームの 歩みとこれから
Avatar for Satty satty9556
0
350
“ことば”が苦手なデザイナーへの処方箋 「なんとなく」から「意図」へ、 デザインを動かす言葉の力
Avatar for MIXI DESIGN mixi_design
PRO
0
130
見栄えと使いやすさの先にある 特別感 をデザインする / Designing a Sense of Specialness Beyond Aesthetics and Usability
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
210
Memory Man v3 (WIP)
Avatar for Chad Welson storybychad
PRO
0
2.9k
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
Avatar for Takahiro Yamaguchi hiro93n
0
230
BXデザイン組織が挑んだスクラム 〜ブランドを育み、デザイナーを解放する変革の物語〜（Scrum Fest Mikawa 2025）
Avatar for Tadashi Inoue tadashiinoue
0
910
CursorでAI活用のナレッジベースを構築する
Avatar for 神崎 kanzaki
0
1k
これからの「Webデザイン」の話をしよう～デザイナーの私が考えるブロックテーマへの対応で変わりゆくデザインの価値～
Avatar for ミヤケアツシ ds35mm
0
420
「UXとUIの違い」v2
Avatar for Shirasu3 shirasu3
0
300
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
Avatar for ため tame
0
320

Featured

See All Featured
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
8
1.3k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.4k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
84
9.3k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.3k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.3k

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