responsive webdesign adaptivewebdesign · 2014. 12. 12. · adaptive responsive ... ⇒responsive...

Responsive Web Design Adaptive Web Design

マルチ環境対応の考え⽅方

考え⽅方は？違いは？

Responsive Web Design.content {! position: absolute;!}!@media screen and (min-width: 768px) {! .content {! position: relative;! }!}!@media screen and (min-width: 1024px) {! .content {! position: static;! }!}

ブレイクポイントを設定して画⾯面サイズの対象範囲ごとに レイアウトを変更更する。

Responsive Web Design

✓ワンソースマルチユースの考え⽅方により⼀一つのHTMLファイルを共通利利⽤用する。

Smartphone Tablet (portrait)

Small Display Meddium Display Large DisplayTablet (landscape) / Laptop


✓レイアウトを画⾯面やウィンドウサイズの変化に追従して柔軟に変更更できる。

Break Point

Break Point


コンテンツを⾮非表⽰示にできても ソースから消すことはできない

! !!! !!! !!! !

! !!! !!! !!! !

非表示表示


画像などのリソースは 共通で利利⽤用される

! !!! !!! !!! !

! !!! !!! !!! !

※将来的にはHTML5が解決予定（picture要素 / imgsrc属性）

Adaptive Web Design

ブラウザやデバイスを判定してファイル読み込みを振り分ける

! ! !

!if((navigator.userAgent.indexOf('iPhone') > 0 && !! navigator.userAgent.indexOf('iPad') == -1) || ! ! navigator.userAgent.indexOf('iPod') > 0 || ! ! navigator.userAgent.indexOf('Android') > 0) {! ! location.href = '/sp/';! }!

✓対象ごとに専⽤用コンテンツやレイアウトを個別に⽤用意する。

Adaptive Web Design



Break Point

Break Point

✓画⾯面やウィンドウサイズの変化に伴った柔軟なレイアウト変更更はできない。

Adaptive Web Design



Break Point

Break Point

Contents

Adaptive Web Design

HTMLやCSSなどが表⽰示対象専⽤用の設定となるため ⽬目的や⽅方法に合わせた個別のコンテンツを提供可能

A

C

A

B

CD

A

B

C

D

Smartphone

PC

A C ＋ E

専⽤用HTML

A+B+ ＋C+D

専⽤用HTML

E

E

対象外や想定外の環境では、操作や表⽰示に問題が起きたり、将来的に増えるかもしれない未知の端末への対応ができない。

Adaptive Web Design

A

BC

D

Smartphone

PC

対象外・想定外

A+B+ ＋C+D

専⽤用HTMLA

B

C

D

A C ＋ E

専⽤用HTML

E

A

CE

共通点と相違点

✓RWD： 同じファイルを全ての表⽰示環境で共通して利利⽤用する。

✓AWD： 表⽰示環境ごとに個別のレイアウトやコンテンツを利利⽤用する。

相違点

MediaQueries http://mediaqueri.es/

✓レイアウトは、特定の画⾯面サイズを持つ表⽰示環境や、画⾯面サイズの範囲を指定して変更更する。

✓特定の画⾯面サイズを持つ表⽰示環境や画⾯面サイズの範囲ごとに固有のレイアウトを提供する。

共通点


レイアウトに限ると...

✓RWDはワンソースマルチユースを前提とした、AWDに含まれる⼀一つの⽅方法。

AdaptiveResponsiveワンソースマルチユース

表⽰示環境に合わせたコンテンツやレイアウトを提供


•Responsive Web Design

⇒コンテンツは共通として画⾯面変化に柔軟に応じたレイアウト変更更が⽬目的。

•Adaptive Web Design

⇒画⾯面サイズあるいは環境ごとに専⽤用コンテンツを提供することが⽬目的。

目的の違い

•Responsive Web Design ⇒Responsive  　　　 Web Layout

•Adaptive Web Design ⇒Adaptive  　　　 Web Contents

...とすると

この方が正しいのでは？

さて、マルチ環境対応にはレイアウトとコンテンツ

どちらが重要なのか？

両⽅方とも重要AND※あくまで理理想ですが...

ADAPTIVE

RESPONSIVEVS

✓利利⽤用⽅方法が異異なれば必要なコンテンツも異異なる。

✓端末が異異なれば操作⽅方法も異異なる。

利利⽤用⽬目的や画⾯面サイズに適した コンテンツとレイアウトを提供

Adaptive Web Design

✓端末によって画⾯面サイズや解像度度は異異なる。

✓横・縦、どちらでユーザが利利⽤用するかわからない。

画⾯面サイズや画⾯面解像度度の変化に 柔軟に対応するレイアウトを提供


マルチ環境対応の問題

Meddium DisplayTablet (landscape) / Laptop

Large DisplayPC / SmartTV


Adaptive Web Design

Small DisplaySmartphone

Tablet (portrait) Break Point

Break Point

RWDは... #1

✓特定の環境に特化したサイトが必要ではない場合や、サーバ連携に制約がある場合。

✓デバイス判定結果を信頼できない状況や、ユーザーエージェントに依存しないサイト構築。


RWDは... #2

✓⼀一つのソースで複数環境に対応できるため、コストパフォーマンスは⾼高い。

✓ただし、構造と装飾の分離離が必要なため、HTMLが適切切に構造化されていることが重要となる。


AWDは...

✓デバイスやユーザーエージェント判定結果を信頼できる。

✓できる限り利利⽤用⽬目的や表⽰示環境に最適化したUXやUIを提供する。

✓コストパフォーマンスより最適化を重視する。


導⼊入にあたっては...

✓既存サイトのRWD化は、構造化が問題となるケースがある。

✓新規やリニューアルでは、AWDの⽅方が導⼊入しやすい。

✓AWDは専⽤用となるため、対象が増えるとコスト負担が⼤大きい。


汎⽤用＋専⽤用サイト構築

RESS

Responsive Design 　 + Server Side Components


LukeW IDEATION+DESIGN : 2011-‐‑‒9-‐‑‒12 http://www.lukew.com/ff/entry.asp?1392

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

Contents

RESS

A

C

A

B

CD

A

B

C

D

Smartphone

PC

A C ＋ E

専⽤用HTML

A+B+ ＋C+D

専⽤用HTML

E

E

端末やUAを判定して必要なコンテンツを配信表⽰示はRWDでUAに合わせて調整

Break Point

Break Point

画⾯面サイズや解像度度の違い


RWDで対応 RWDで対応

AWDで個別に対応


RWDで対応

Small Display Meddium Display Large DisplayTablet (landscape) / Laptop PC / SmartTV


利利⽤用⽬目的や操作⽅方法・機能に合わせたコンテンツの提供 RESS

RESS

特別な⽅方法ではなく...

✓コンテンツのコンポーネント化。

✓UAごとの配信コンテンツ管理理。 ⇒コンテントネゴシエーション

✓RWDによる表⽰示制御。 ⇒UA・デバイス判定とブレイクポイントの設定


RESSはこの体系化の提案です。

{{>header}}

[...document content...]

結論論...

✓RWD / AWD を利利⽤用したコンテンツ提供は必須。

✓マルチ環境への対応には、コンテンツをどのように管理理し、環境に合わせてどのように配信するかが重要となる。

変幻自在

responsive webdesign adaptivewebdesign · 2014. 12. 12. · adaptive responsive ... ⇒responsive...

Documents