Dreamweaver CS6で作るレスポンシブWebデザイン

2012/05/19ADC MEETUP ROUND 05

Toru Yoshikawa ( @yoshikawa_t )

Who?吉川 徹/Toru Yoshikawa

html5j.org/HTML5とか勉強会スタッフ

Google API Expert ( Chrome API )

Chrome API Developers JP

allWebクリエイター塾/jQuery Mobile担当講師

Twitter: @yoshikawa_t

Blog: http://d.hatena.ne.jp/pikotea/

Agenda

レスポンシブWebデザインとは？

グリッドレイアウトとは？

Dreamweaver CS6の使い方とデモ

まとめ

レスポンシブWebデザインとは?

A List Apart: Responsive Web Design by Ethan Marcotte

http://www.alistapart.com/articles/responsive-web-design/

レスポンシブWebデザイン

http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html

レスポンシブWebデザインの特徴

ワンソース、マルチスクリーン

メンテナンスが容易

CSSのみで構築可能（振り分けによる分断とサーバー実装がない）

新しいデバイスのスクリーンサイズにもすぐに対応できる

レスポンシブWebデザインの注意点

設計が難しい

コンテンツをモジュール化する必要がある

必ずしもモバイルに最適なパフォーマンスが出るわけではない

レスポンシブWebデザインのテクニック

Flexible grid-based layout

Flexible images and media

Media Queries

A Book Apart: Responsive Web Design

http://www.abookapart.com/products/responsive-web-design

グリッドレイアウトとは？

Golden Grid System

http://goldengridsystem.com/

960 Grid System

http://960.gs/

Grid Layout

Column

Gutter

Demoサンプルファイル

http://dl.dropbox.com/u/18090951/adcjp5_rwd_sample.zip

まとめ

なぜ、レスポンシブWebデザインなのか？

http://bradfrostweb.com/blog/notes/this-is-the-web/

Thank you!!( @yoshikawa_t )

Resources「可変グリッドレイアウト」機能の使い方 (http://www.adobe.com/jp/devnet/dreamweaver/articles/dwcs6_fluid_grid_layout.html)

HTML5 Boilerplate (http://jp.html5boilerplate.com/)

A List Apart: Responsive Web Design (http://www.alistapart.com/articles/responsive-web-design/)

A Book Apart: Responsive Web Design (http://www.abookapart.com/products/responsive-web-design)

960 Grid System (http://960.gs/)

Golden Grid System (http://goldengridsystem.com/)

Brad Frost Web: this is the web (http://bradfrostweb.com/blog/notes/this-is-the-web/)