Googleはクロスプラットフォームのレスポンシブウェブデザインに対応する、多数のガイドラインとボイラープレートコードを発表した。
既存の膨大な種類のデバイス、特にモバイル端末に対応するための開発者の課題を鑑み、Googleは最新のweb開発のための一連のガイドラインとベストプラクティスであるWeb Fundamentalsを公開した。Web Fundamentalsには下記分野のHTML、CSS、JavaScriptコードサンプルやアドバイスが含まれている。
- ツール: エディタの選択、開発ツールのセットアップ、ビルドプロセスのセットアップ、Chrome DevToolsでのデバッグ、エミュレータやクラウド上のデバイスによるテスト、等。
- レイアウト: 様々なスクリーンサイズに対応する複数のブレークポイントを使用したCSS3メディアクエリ、Fluid Layout、Column Drop、Layout Shifter、Off Canvas等のレスポンシブwebデザインパターン、アプリバー、タブバー、ボタンバー、ナビゲーションドロワー等多数のナビゲーションやアクションパターン等を使用したレスポンシブWebサイトデザインをGoogleは推奨している。
- フォームとユーザインプット: モバイル端末で動作するフォームの選択、リアルタイムバリデーション対応、タッチ対応やカスタムジェスチャーの実装、等。
- 画像、音声、映像:
<img>
の使用、CSSのbackground
プロパティ、アイコンへのSVG使用、画像のパフォーマンス問題、映像、レガシープラットフォーム、アクセシビリティ問題への対応、等へのアドバイス。 - パフォーマンス: 重要なレンダリングパスの最適化、PageSpeedの使用、不要なダウンロードを除外することによるコンテンツのパフォーマンスチューニング、エンコーディングや画像の最適化、HTTPキャッシュの使用、等。
- デバイスセンサと性能: ユーザの位置情報取得、デバイスオリエンテーション、デバイスモーション、通話に関するアドバイス。
ガイドラインの他に、Googleはマルチデバイスウェブサイトを構築するためのツールやボイラープレートコードのパッケージであるWeb Starter Kit(WSK)を提供している。Web Starter KitはMobile Boilerplateの影響を受け、モバイルHTMLページ、レスポンシブレイアウト、ビジュアルコンポーネントのスタイルガイド、gulp.jsのビルドツールオプション等が含まれている。
WSKは最新と1つ古いバージョンのChrome、Firefox、Safari、Opera、IE10と11、さらに、Android、iOS、Windows Phone、Blackberry用のモバイルブラウザにも対応している。
Web Fundamentalsの関連コードとWeb Started Kitのコードはどちらもオープンソースであり、GitHubにて公開されている。