この記事には、異なる画面サイズとフォームファクターのスケールのWebサイトへのガイドラインが含まれている。
QAのPrinciple TechnologistであるDavid Walker氏はQA TechWeek 2014の中でGoing Responsive with FoundationセッションにおいてレスポンシブWebサイトデザインを作成するときのガイドラインについてプレゼンした。 Walker氏は、既存のデスクトップからモバイルアプリケーション向けのWebサイトを作成するいくつかの方法について言及した: ネイティブアプリ – 各モバイルOSにひとつ、組み込みHTML5 – PhoneGapなどのシミュレーターを使用して、サーバーでフィルタリングする – デスクトップとモバイルデバイス向けの2つをリダイレクトしてWebサイトを分離する。
これらの方法のそれぞれについてのメリットとデメリットの後Walker氏は、レイアウト、フォーマットとコンテンツを持つ完全な単一のWebサイトを構築した後、HTML5とJavaScript、CSSを使って表示するデバイス向けにメモリ上で調整するレスポンシブWebサイトデザイン(RWD)を紹介した。RWDの主な利点は、コンテンツの重複を減らし、将来のものを含めてすべてのデバイスサイズのためのWebサイトを準備できることである。短所は: 優れたCSSとJavaScriptスキルが必要、いくつかのリソースはモバイルネットワークには大きいかもしれない、古いブラウザーにはpolyfillsが必要。
レスポンシブデザインを作成できるようにWalker氏は、以下のいくつかのガイドラインを提案した:
- フルードレイアウト(fluid layout)で作成する。 すべてのコンテナ幅は、ブラウザーのviewportのパーセントで定義する必要がある。
- CSS3メディアクエリー(Media Queries)を使用する。 異なるメディアタイプでは異なるスタイルが適用される –画面、印刷、TVなど- そしてメディアパラメータ –width, height, 色, 解像度など
- フルードイメージ(fluid images)を使用する。画像サイズは、ディスプレイの最大幅よりも大きくならないように調整するべきである。
メディアタイプに必要なスタイルを適用するために、スタイルに必要な表示幅を確立する。たとえばwww.time.comでは、40以上のスタイルがメディアクエリーに関連づけられている。 それらはChrome拡張のResponsive Inspectorで見ることができる。それらすべてのスタイルを使うことによって、time.comのコンテンツはブラウザーレベルで再配置されるため、異なる解像度のデバイスで表示してもページを水平スクロールすることがない。
Walker氏によるとRWDではまた、以下の考慮が必要である:
- デバイスと接続速度に適した画像
- モバイルUI/UXに合わせたナビゲーションパターンの変化
- タッチに適したリンクやボタンのスタイル変更
- 異なる解像度でうまく表示されるように動的なフォントサイズの変更
- 画面上の必要なコンテンツの読み込み
- retinaバージョンの画像を提供
Walker氏はまた、レスポンシブ フロントエンド フレームワークであるFoundationを使ったレスポンシブWebサイトの構築の仕方についてデモした。その他の同様のソリューションには、もともとはTwitter社が開発したBootstrapがある。