View
16.883
Download
0
Category
Preview:
DESCRIPTION
ADC MEETUP ROUND05 HTML5 Design Tools (http://www.adobe.com/jp/joc/adc/meetup/round05/)の「Dreamweaver CS6で作るレスポインシブWebデザイン」のセッション資料です。
Citation preview
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/
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/)
Recommended