Google a publié un certain nombre de lignes directrices et de fragments de code réutilisable pour la conception de sites responsive multi-plateformes.
Conscient des défis rencontrés par les développeurs à cause de la grande diversité des appareils, en particulier les mobiles, Google a publié Les Fondamentaux du Web, un ensemble de lignes directrices et de meilleures pratiques pour le développement moderne web. Les Fondamentaux du Web incluent des conseils avec des fragments de HTML, de CSS et de JavaScript dans les domaines suivants :
- Outils. Sélection d'un éditeur, mise en place des outils pour développeurs, mise en place d'un processus de build, débogage avec les DevTools de Chrome, test sur appareil, sur émulateur et dans le cloud, etc.
- Mise en page. Google recommande la Conception Responsive de Site Web en utilisant des Requêtes Média CSS3 avec de multiples points d'arrêt pour les différentes tailles d'écran, des modèles web responsive - Mise en Page Fluide, Suppression de Colonne, Décalage de Mise en Page, Hors Canvas, plus un certain nombre de modèles de navigation et d'actions - App, Barre d'Onglets et du Bas, Navigation Tiroir.
- Formulaires & Entrée Utilisateur. Sélection de formulaires qui fonctionnent sur les appareils mobiles, traitement de validation en temps réel, traitement du contact et implémentation des mouvements propriétaires.
- Images, Audio, Vidéo. Conseils sur l'utilisation d'
<img>, debackgroundCSS, de SVG pour les icônes, problématiques de performance d'image, traitement des vidéos, anciennes plateformes, problématiques d'accessibilité, etc. - Performance. Optimisation du Chemin de Rendu Critique, utilisation de PageSpeed, réglage de la performance du contenu par l'élimination des téléchargements inutiles, optimisation de l'encodage et des images, utilisation du caching HTTP, etc.
- Capteurs d'Appareil et Capacités. Conseil pour l'accès à l'emplacement de l'utilisateur, orientation et mouvement de l'appareil, passage d'appels.
En sus des lignes directrices, Google fournit le Kit de Démarrage Web (Web Starter Kit ou WSK), un paquetage comprenant du code réutilisable et des outils pour la création de sites web multi-appareils. Inspiré par Mobile Boilerplate, le Kit de Démarrage Web comprend du code pour les pages HTML mobile, la mise en page responsive, un guide pour la conception visuelle de composants, et l'outil de build optionnel gulp.js.
WSK cible les deux dernières versions de Chrome, de Firefox, de Safari, d'Opera, IE 10 et 11 mais également les navigateurs mobiles pour Android, iOS, Windows Phone et Blackberry.
Le code relatif aux Fondamentaux du Web et le code du Kit de Démarrage Web sont tous deux open source et disponibles sur GitHub.