Responsive Web Design - CSS Nite公式サイトcssnite.jp/lp/lp27/CSSNiteLP27-s4-komori.pdfResponsive Web Design 2013. 05. 25 こもりまさあき CSS Nite LP Disk 27...

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/

rootshttp://roots.cx/

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

本日のまとめ

•できないのではなく、実装方法はいくらでもある

•使える技術を知って、組み合わせながらどんどん使う

•プロジェクトにあったワークフローを作るとカンタン

本日はありがとうございました