Méthodologie d’Intégration pour un site en Responsive Web Design

Cette méthodologie est un addendum à ma méthodologie d’intégration axée sur l’intégration d’un design responsive. Je pars sur le principe que ce design vous est fourni par un DA : PSD, etc, et que vous suivez les étapes de la méthodologie générale.

• Définir un layout de base qui déterminera le site visible par les vieux navigateurs, ainsi que l’ordre de travail (En gros : Mobile first ou Desktop First)
• Intégrer la structure (blocks contenant header, nav, content, footer, sans leur contenu) en premier, sous tous les modes, dans l’ordre défini.
• Ne pas oublier la meta viewport.
  <meta name="viewport" content="width=device-width" />
• Choisir puis mettre en place une solution de “Responsive Images” pour les images liées au contenu, celles liées à la présentation pouvant être gérées via les media-queries.
• Pour chaque block (Contenus du header, nav, footer, et sections du content)
  • Vérifier
    • que les blocks ne changent pas de block parent entre les DA.
    • quels sont les blocks disparaissant/apparaissant entre les versions.
  • Intégrer la version du layout de base
  • Intégrer les versions suivantes, dans l’ordre défini.
  • Intégrer les éventuels ajouts sur écran Retina.
  • Tester sous les navigateurs/devices ciblés, dans l’ordre défini. à cette étape, on peut se contenter d’émulateurs.
  • En cas de correctif sur une version, ne pas oublier de vérifier les effets de bords dans les autres versions.
• à la fin de l’intégration d’un template différent, tester sur des véritables devices. Eventuellement, faire manipuler par un collègue qui mettra en avant des erreurs.

Media Queries

Chaque feuille CSS ne devra idéalement contenir qu’une seule occurence de chaque media-query, située en bas de feuille. En intégrant de haut en bas, block après block, la media-query sera ainsi située juste en dessous du CSS en cours de rédaction. Une feuille séparée contenant les media-queries impliquera trop d’aller/retours à l’intégration. Un appel de media-query par block distinct fera inutilement grossir la feuille, et sera trop complexe pour la maintenance.

Tests de manipulation sur devices

Xcode sur Mac contient un émulateur fidèle de périphériques sous iOS. Mais rien ne remplacera la manipulation d’un site sur un écran tactile, nécessaire après l’intégration d’un template différent.

Firefox contient un simulateur de viewport, qui ne doit servir qu’à l’étape d’Intégration.

N’oubliez pas de tester le comportement du responsive à la rotation du device.

Attention également au responsive sournois, pratiqué principalement par les professionnels du web, consistant à redimensionner la fenêtre de manière maladive, pour voir si tout « répond bien ».

Développement

Attention aux scripts JS liés à des éléments qui disparaissent ou sont modifiés avec le responsive. Ne pas hésiter à rajouter des actions au « resize » pour vérifier si la fenêtre permet toujours l’execution du script.

Vitesse de chargement

Le “Network Link Conditioner”, également fourni avec Xcode (ou inclus dans OS X Lion), permet de simuler une connection défectueuse, comme par exemple “3G” en mauvaises conditions.

Les scripts externes en plein milieu de la page, les images chargées mais non affichées ainsi que les médias lourds seront les premiers défauts ressentis, plus vicieux qu’un commercial à 17h55.