レスポンシブルなテーマの作り方

2012-06-03 @ WordBench Kobe

by @HissyNC

レスポンシブルなテーマとは

「レスポンシブルなテーマの作り方を話して」

と依頼されましたけども

それってレスポンシブ・ウェブデザインに

対応したテーマってことですよね?

(みんな用語がまだあいまいだよね)

レスポンシブ・ウェブデザインとは

画像解像度をベースに表示を切り替える手法

モバイル最適化?

色んな画像サイズの人が来ている。1ソースで対応しよう。

→ PCをモバイルに変換、という手法ではない(対応してないPCブラウザがある以上そうなるが)

レスポンシブ・ウェブデザインの利点

制作コストの削減

UIで切り替えてそれぞれ作りこんでいくのは大変。

カスタム投稿タイプにテンプレートで対応する作業、基本テーマとWPtouchのテーマで2回やりたいですか?

各デバイスに適した見せ方ができる

一応、そういう建前になってます。

コンテンツの管理が楽

更新者はモバイルで確認したりしない。

レスポンシブ・ウェブデザインの問題

マークアップエンジニアのスキルが必要

当たり前ですが

場合によってはデザインへの差し戻しも

レスポンシブで行くということが、プロジェクト関係者全体で共有されていることが必要

完璧ではない

非対応ブラウザ、そもそも流動的な発想

レスポンシブ・ウェブデザインの問題

個別対応よりユーザーがダウンロードする

データ量が増える

CSSの記述量が増える

画像サイズは結局同じもの

iPhoneがキレイすぎる功罪

PCと等倍だと画像が荒く見えてしまう…

レスポンシブ・ウェブデザインの確認

1. 実機

2. エミュレータ

3. ウェブサービス(便利!)

responsive.is

viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

表示幅をデバイス領域と一致

初期拡大率を等倍

最小拡大率を等倍

最大拡大率を等倍

→ モバイルブラウザの調整機能をオフ

Media Queries

ブラウザ幅によるCSSの条件分岐

最大幅 @media (max-width: 900px) { ... }

最小幅 @media (min-width: 600px) { ... }

幅の範囲 @media (min-width: 600px) and (max-width: 900px) { ... }

Media Queriesの分割ポイント

iPhone縦

320px

iPhone横

768px

iPad縦

960px

iPad横、PC

Media Queriesの分割ポイント

github.com/twitter/bootstrap

// Phones only

@media (max-width: 767px) { ... }

// Tablets & small desktops only

@media (min-width: 768px) and (max-width: 979px) { ... }

Media Queriesの分割ポイント

github.com/murtaugh/HTML5-Reset

/* Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */

@media screen and (max-device-width: 480px) { ... }

@media all and (orientation: portrait) { ... }

@media all and (orientation: landscape) { ... }

Media Queriesの分割ポイント

Twenty Eleven

@media (max-width: 800px) { ... }

@media (max-width: 650px) { ... }

@media (max-width: 450px) { ... }

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { ... }

Media QueriesをIE6-8でも動作させる

Respond.js

https://github.com/scottjehl/Respond

しかしこれ…、要る?

レスポンシブ・レイアウトのパターン

1. Mostly Fluid 可変レイアウト

2. Column Drop カラム落とし
3. Layout Shifter レイアウト組み換え
4. Tiny Tweaks 微調整で済ます
5. Off Canvas 画面外に出す

http://www.lukew.com/ff/entry.asp?1514

→ 2. の事例2つ

ナビゲーションの問題

1. はじめから可変にしておく

2. 無理くり調整する

→ これも事例で

3. そもそも2パターン用意しようぜ

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/a-simple-responsive-mobile-first-navigation/

http://css-tricks.com/convert-menu-to-dropdown/

画像の問題

// 最大幅の設定が基本

img {

max-width: 100%;

}

// Google Mapに不具合を起こすことも

#map_canvas img {

max-width: none;

}

iframeの問題

iframe { max-width: 100%; } はイマイチ

div で囲めばきちんと表示されるテクニックはあるようだが、WordPressのYouTube埋め込みはdivで囲んでくれない。困った。

http://amobil.se/2011/11/responsive-embeds/

↑ WPTouchはこれをやっている。さすが。

レスポンシブ対応しているCSSライブラリを選ぶ

Bootstrap, from Twitter

レスポンシブ対応のお手本
http://twitter.github.com/bootstrap/
→ WordPressで使うにはちょっとクセがある

Less Framework 4

http://lessframework.com/

→ LESSはちょっとハードル高いっすね…

レスポンシブ対応しているjQueryライブラリを選ぶ

レスポンシブなWordPressテーマ

レスポンシブなWordPressテーマ

既存のレスポンシブテーマの問題

有料機能に誘導するものが多い。

→ 機能が豊富すぎて親テーマとして・

カスタマイズ用途では使いにくい

だれかレスポンシブな親テーマを

作ってくれないかなー

|д゚)チラッ

レスポンシブルなテーマの作り方 - Google Slides