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
Yumika Yamada Portfolio
Avatar for Yumii yumii
0
1.4k
CMS管理画面のアクセシビリティ
Avatar for Rikiya Ihara / magi magi1125
8
2.5k
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
Avatar for Yu Morita securecat
5
1.7k
Character Experience AI 〜 AIキャラクターのつくりかた 〜
Avatar for SmartBank smartbank
1
280
sachi_y_portfolio
Avatar for Sachi sachi337
0
520
Yahoo!フリマ：生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
460
デザイナー向けフライル説明資料
Avatar for Toshiaki Arai toshiblues
0
120
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
440
【最新】マズロー安達の弟子実績（1期-4期の26人分）
Avatar for マズロー安達 maslow_akkun
0
2.1k
ブランドパーソナリティ言語化における生成AI活用の実際
Avatar for Hiroki Hosaka h0sa
0
280
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
Avatar for Tomoya AZUMA t_east
1
1.3k
アクセシビリティに取り組むメリット
Avatar for Rikiya Ihara / magi magi1125
2
250

Featured

See All Featured
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
53
8.9k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.2k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
139
34k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.7k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
302
21k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
74
5k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
37
2.9k

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