レスポンシブレイアウトはリキッドレイアウトの実現手法の１つです。CSS3 で導入された Media Queriesを使用して横幅を基準にレイアウトのルール定義によってスマードフォン、タブレット、ノートPC、デスクトップのブラウザの画面の横幅を基準にしてレイアウトを切り替えることで、マルチデバイスに最適なレイアウトを実現します。
- 利用環境にあわせた自動的なリフロー
タブレットやスマートフォンではデバイスの向きを変えることで自動的に新しい画面の横幅に合わせてリフローが行われ最適なレイアウトで表示されます。デスクトップではウインドサイズの変更で自動的なリフローが行われます。
メリット
レスポンシブレイアウトはモバイル専用サイトを作る場合と比較して次のようなメリットがあります。
- ワンソース・マルチデバイス対応
レスポンシブは一つのサイトですべてのデバイスをサポートすることが出来ます。デバイス間のユーザ体験の差を少なくします。レスポンシブではデバイスを厳密に検出するのではなく単純に実行環境のWEBブラウザの横幅だけを見てレイアウトを決めるので未知のデバイスも含めてサポートすることが出来ます。モバイル専用サイトへの誘導（リダイレクト）の判断が失敗することはありません。
モバイル専用サイトを作る場合に余分に発生する開発コスト、メンテナンスコストは必要ないので、トータルでコストを下げることが出来ます。一般的にスマートフォン普及以前にデザインされたWEBアプリケーションはそのままスマートフォンで使う事が実質できないものが多く、モバイル展開の為にモバイル専用サイトを付け足すという戦略を選択することが多かったのですが、この戦略では機能追加、維持管理のコストが二倍近くなっていました。モバイル展開を最初から考慮にいれる場合、どのようにデザインすれが良いかですがHTML5に対応したブラウザが普及した現在のところ「レスポンシブＷＥＢデザイン」が最も有力な解法です。デスクトップで提供される機能をそのままに、ＣＳＳのメディアクエリにより画面の横幅によって表示内容が読みやすい配置で表示されモバイルとデスクトップで同一のＵＲＬにアクセスする事ができます。モバイル向けのアプリケーションとインフラシステムを別に用意する必要がありません。ユーザにとってはモバイルとデスクトップを違和感なく使うことが出来、そして、運用する側にとっては開発コストと運用コストを下げる事が可能となっています。
- リソースに対してURLがユニーク
レスポンシブはすべてのデバイスでURLが統一されるのでRESTの原則に従います。URLのブックマークをデバイス間で共有する事が簡単になります。エンティティに対する被リンクが分散されないので検索エンジンからのファインダビリティが向上します。すべてのデバイスに対するレスポンスが同一になるのでキャッシュのメモリー空間効率が良くなります。
デメリット
レスポンシブレイアウトはモバイル専用サイトを作る場合と比較して次のようなデメリットがあります。
- インタフェース設計の難易度が高くなる
ページの設計をスマートフォン環境の性能にあわせる必要があります。レスポンシブでは基本的には同一のリソースをロードすることになるので、スマートフォンのネットワーク帯域、マシン性能にあわせる必要があります。１ページの情報量を統一すると大きな画面では情報の密度が下がり小さな画面では情報の密度が上がるので、スマートフォンに合わせるとデスクトップの大きな画面を活かせない。設計でバランス調整する場合には設計コストが比較的高くなります。
ソリューション
YOSBITSは新しいWebサイトの開発ではレスポンシブデザインを推奨しています。レスポンシブデザインの多くの制作でレスポンシブ手法のデメリットに対処してきました。次に挙げるパフォーマンスチューニングで一ページ内で扱えるサイズを増やすことでインタフェース設計の難易度を下げています。
- シンプルデザイン
無駄な装飾を一切行わないサイトデザインにより、無駄なリソースのロードや無駄に負荷の高いレンダリングを排除しています。シンプルデザインは適切な余白、グループ化、配色すべてのセンスが優れていなければチープの見た目となってしまいがちですが、YOSBITS の優れたインタフェースデザインセンスによって乗り越えています。
- JavaScriptの最適化
デファクトスタンダードとも言えるjQueryは今ではサポートが切れた古いブラウザまでもサポートしえおり不要なコードが多く効率が悪い状態となっています。YOSBITS では jQuery APIと互換の軽量ライブラリに対して独自のチューニングと互換性を向上のための修正を行ったライブラリを使用しています。純正のjQuery APIを使用するサイトよりスクリプトの初期化、実行処理が大高速になっています。
- 圧縮方法の最適化
YOSBITSではリソースの圧縮の効率化を徹底しています。例えば、画像ファイルのPNGの圧縮アルゴリムは DEFLATE を使用しますが、一般的に使用される zlib ライブラリのエンコーダを使用して圧縮せずに、DEFLATE互換のより効率の高いエンコーダーを使用することで品質を落とさずに限界まで圧縮を行っています。また、JPEGファイルでも品質を下げずにハフマンテーブルの最適化によってファイルサイズを小さくしています。圧縮効率の改善によりリソースのサイズをより小さくすることでネットワーク負荷をさげ、キャッシュのメモリの空間効率を改善しています。