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
Light My Fire/ハートに火をつけるコミュニティ
Avatar for kgsi kgsi
1
150
1920*1080pxに設定したケース / Google Slide Size Test
Avatar for Arthur arthur1
0
3.3k
sachi_y_portfolio
Avatar for Sachi sachi337
0
520
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
8
4.5k
生成AIを活用した組み込みSW設計書検索システム開発
Avatar for matsukada licux
7
1.4k
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない？というお話
Avatar for なつ iflection
6
2.3k
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
Avatar for 北見海貴 kitami
1
330
FigmaのFigmaファイルから学ぶTips & Tricks
Avatar for Hiroki Tani hilokifigma
0
660
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
520
CursorでAI活用のナレッジベースを構築する
Avatar for 神崎 kanzaki
0
670
サービスデザインにおける、 映像活用の可能性（Spectrum Tokyo Meetup #18）
Avatar for Akihide Kanai ka71
0
160
地理院地図をもっと楽しく！れきちず新機能のご紹介
Avatar for Hajime Kato hjmkth
1
130

Featured

See All Featured
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
279
23k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
328
39k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.5k
How GitHub (no longer) Works
Avatar for Zach Holman holman
315
140k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
The Language of Interfaces
Avatar for Des Traynor destraynor
161
25k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
83
9.2k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
131
19k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
188
55k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
64
7.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