Embed Size (px)
Citation preview
Responsive Web Design
2013. 05. 25 こもりまさあき
CSS Nite LP Disk 27「スマートフォン対応サイト制作（3）」
THEPRACTICE
OF
レスポンシブWebデザイン 実践編
自己紹介
1972年生まれのフリーランス。90年代前半から都内のDTP系デザイン会社にてアルバイトをはじめ、大学卒業後そのまま正社員に。入出力業務、デザイン業務、ネットワーク関連業務に並行して従事後、2001年会社を退職しフリーランスの道へ。業務内容や立ち位置が異なるので、職域的な肩書きはなし
近著に『基礎から覚える、深く理解できる。 Webデザインの新しい教科書』『レスポンシブ・ウェブデザイン標準ガイド』など
Twitter: @cipher / @proteanbmInstagram: @cipher
こもりまさあき
今日お話しすること
•レスポンシブWebデザインあるある
•いまどきのレスポンシブ、その実装方法
レスポンシブあるある
The Problems of Responsive Web Design
The Problems
•スマートデバイスの種類が多くて困っている
•表示・非表示を変えたいコンテンツがある
•PCとスマートフォンでコンテンツの表示順を変えたい
•複数サイズの画像を切り替える方法がわからない
•ラクをしたい
レスポンシブWebデザインの悩みを解決しましょう
その前に。ある海外のサイトで実際に使用されている技術
Requirejs
LESS
BowerNode.js
PhantomJS
Web Fonts
Grunt
Responsive Images
Style Guide
JShint
localStorage
Jasmine
Curljs
レスポンシブな実装って、Media Queriesだけじゃない
技術の組み合わせがポイント
いまどきのレスポンシブ、その実装方法
The Practice of Responsive Web Design
スマートデバイスの種類が多くて困っている
ブレイクポイント、増やせば増やすほど複雑化
ブレイクポイントを減らせるデザインを考える
ちなみに、いまどきは「px」ではなく「em」で切り替え
320px = 20em480px = 30em768px = 48em960px = 60em
johannaruiz/propotional-mqshttps://github.com/johannaruiz/propotional-mqs
表示・非表示を変えたいコンテンツがある
demo
“サイトにアクセスするユーザーのことを考えるとき、端末のことだけでなく、ユーザーが何を期待しているかを
考慮することが大切です。
タブレット端末ユーザーにはフルサイズのウェブを表示しましょうhttp://googlewebmastercentral-ja.blogspot.jp/2012/11/giving-tablet-users-full-sized-web.html
環境を想定して、柔軟にコンテンツをロードする
WordPressなら「wp_is_mobile()」で
<?php if ( !wp_is_mobile() ) :?><div class="sidebar-ad"><img src="<?php echo get_bloginfo( stylesheet_directory ) ?>/images/banner-sideA.png"></div>
<?php endif; ?>※デスクトップブラウザには、バナーコンテンツを表示する
Ajaxを使って、特定条件のみでコンテンツをロードする
filamentgroup/Ajax-Include-Patternhttps://github.com/filamentgroup/Ajax-Include-Pattern/
コンテンツのロード時間も大事な要素
PCとスマートフォンでコンテンツの表示順を変えたい
Content Choreography
Content Choreograpyhttp://trentwalton.com/2011/07/14/content-choreography/
Choreography: バレエやダンスの振り付け
設計時にコンテンツのブロックの振る舞いを決める
demo
Title
Navigation
Paging Navigation
Footer
Aside Contents
Main Contents 1
Main Contents 2
1
2
3
4
5
6
7
Title
Navigation
Paging Navigation
Main Contents 1
Main Contents 2
1
2
3
4
5
Title
Navigation
Paging Navigation
Main Contents 1
Main Contents 2
1
2
3
4
5
情報ブロックの表示順をコントロールするなら
CSS3の「Flexible Box Layout Module」で
@media screen and (max-width: 48em) { #container { display:box; display:-moz-box; display:-webkit-box; box-orient:vertical; -moz-box-orient:vertical; -webkit-box-orient:vertical; } #container .main, #container header, #container aside, #container footer, #container nav, #container .example_ad { box-ordinal-group: 1; -moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; }
#container .example_ad { box-ordinal-group: 4; -moz-box-ordinal-group: 4; -webkit-box-ordinal-group: 4; } #container nav { box-ordinal-group: 2; -moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; } #container footer { box-ordinal-group: 3; -moz-box-ordinal-group: 3; -webkit-box-ordinal-group: 3; }}
Content Choreography Mixins In LESShttp://www.alwaystwisted.com/post.php?s=2012-05-17-content-choreography-mixins-in-less
Content Choreography Mixinhttp://blog.woop.ie/post/23227066135/content-choreography-mixin
複数サイズの画像を切り替える方法がわからない
demo
W3Cでも、画像配信のことには議論が進んでいる
picture要素、srcset属性
The picture elementhttp://www.w3.org/TR/html-picture-element/
The srcset attributehttp://www.w3.org/html/wg/drafts/srcset/w3c-srcset/
似たようなカタチで先行実装するPicturefillを使ってみる
scottjehl/picturefillhttps://github.com/scottjehl/picturefill
<div data-picture data-alt="Alt Text"> <div data-src="small.jpg"></div><div data-src="medium.jpg" data-media="(min-width: 400px)"></div><div data-src="large.jpg" data-media="(min-width: 800px)"></div><div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div>
<!-- Fallback content for non-JS browsers. --><noscript><img src="external/imgs/small.jpg" alt="Alt Text">
</noscript></div>
ラクをしたい
demo
Frameworks や Static Site Generators を有効活用
fitgridhttp://www.fitgrd.com/
Susyhttp://susy.oddbird.net/
Bootstraphttp://twitter.github.io/bootstrap/
Foundation 4http://foundation.zurb.com/
Jekyllhttp://jekyllrb.com/
Servehttp://get-serve.com/
Bootstrapunch w/ Style Guidehttps://github.com/gaspanik
Deciding in The Browser
やってみないとわからない。だから、動くものを先に
デザインカンプは、むしろ作りながらでも
CasperJShttp://casperjs.org/
casperjs screenshot.js http://localhost/
Windows環境の方に朗報
Preproshttp://alphapixels.com/prepros/
プロジェクトに合わせたワークフローを作るべし
demo
本日のまとめ
•できないのではなく、実装方法はいくらでもある
•使える技術を知って、組み合わせながらどんどん使う
•プロジェクトにあったワークフローを作るとカンタン
本日はありがとうございました
