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
Memory Man v3 (WIP)
Avatar for Chad Welson storybychad
PRO
0
2.6k
佐藤千晶｜ポートフォリオ
Avatar for 佐藤千晶 chimi_chia
0
170
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
260
AI時代に、僕たちデザイナーはどう歩むか
Avatar for kim kazuhirokimura
0
400
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
550
そのUIコンポーネント、これから先も使えますか？―Headless UI,Open UI,グローバルデザインシステム
Avatar for sakito sakito
2
1.9k
文字コントラストを改めて考える / Reevaluating Text Contrast
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
550
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
Avatar for ため tame
0
270
「UXとUIの違い」v2
Avatar for Shirasu3 shirasu3
0
250
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
Avatar for Tomoya AZUMA t_east
1
1.4k
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
240
mento Design Team Portfolio
Avatar for mento _official mento0fficial
1
860

Featured

See All Featured
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
51k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.5k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.8k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
9
580
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.6k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
How GitHub (no longer) Works
Avatar for Zach Holman holman
315
140k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.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