レスポンシブウェブデザイン(RWD)


○×クイズで、レスポンシブウェブデザイン(RWD)。

【1】
レスポンシブウェブデザイン(RWD)を考えるときにはまず、
・要件定義
・設計
・実装 の3段階で考える必要があるので、要件定義段階では営業が、設計ではディレクターが、実装ではデザイナー、コーダーが特に意識すべきである。

【2】
レスポンシブウェブデザイン(RWD)はとは「1HTMLファイルのコンテンツをCSS(メディアクエリ)を用いてブレイクポイントで分けた画面幅ごとにレイアウトを制御する方法である。

【3】
レスポンシブウェブデザイン(RWD)のメリット ・1コンテンツ1URLなので、検索エンジンにインデックス化されやすくSEO対策にいい。 ・アクセス解析をしやすい
デメリットは ・ワンソースで再現可能な範囲という制約がある。 ・古いブラウザでは表示されない

【4】設計段階では8つ項目がある。
・HTML ・CSS ・対応ブラウザ ・ブレークポイント ・高解像度ディスプレイ ・レイアウト設計 ・ワイヤフレーム ・システム連携 である。

【5】ブラウザに関しては、IE8以下は完全アウトで見れません。あと、スマホの場合、iOS4~iOS8まで、Android2~4までも完全対応です。
過去のブラウザの場合でも「文字はきちんと読める」という最低限度のサイトの役割を果たすように、XHTMLを用いたりする「プログレッシブエンハンスメント」の考え方を用います。

【6】iphoneに搭載さえている、レティーナディスプレイのように、高解像度ディスプレイの場合には、画像サイズは通常表示する画像の2倍サイズにしてボヤけの解消を行います。

【7】レスポンシブウェブデザイン(RWD)ではフォーム設定の際に、スマホでの設定を意識して、セレクトボックスにするほうが使いやすい。

【8】レスポンシブウェブデザイン(RWD)自体は便利だが、後での修正が入ると大幅に工数増加になる場合がある。切り替えるレイアウト毎にデザインを用意したり、HTMLコーディングの構築が複雑だったり、チェックが増えたりなど、営業サイドや制作サイドでの手直しが入るおそれもある。

【9】レスポンシブウェブデザイン(RWD)では、切り替えの要であるCSS(スタイルシート)上は、480pxの時だけ「display:none;(非表示)」と書いたとします。でもHTML上は、「img src=”xxx.jpg”」という記述自体が非表示になるわけではありません。HTMLソース上に存在するのは変わらないので、ユーザが使用しているブラウザはその画像を当然読み込もうとするので、サイズが重い画像を使用していたら、スマホサイトの表示速度は著しく落ちます。

【10】ブレークポイントの数字はそれぞれ、480px、640px、768pxである。

ちょっと内容は刻一刻と変化しますが、こんな感じ、全部○。
「テーマつかったら一発やん!?」とか言われるとそういうのもあるんですが、一発でいけないような仕様設定が入ってくるからこれはこれでややこしいんです。
完全問屋のように、メーカーからOO%オンして提案する、が慣習になっていればそれはそれでまたちがうんですが、結局全部仕様をみつつ考慮しないといけないので、全部一緒のようにみえて全部普通に異なるもの、だから面白いけど工数オーバー赤字にもなる、全ては『要件定義段階では営業が、設計ではディレクターが』このへん。

関連しているブログ記事一覧