Développement Web mobile : par quoi commencer ?
Avant de débuter un projet de site web mobile, vous aurez bien entendu un bon million de questions à vous poser, autant techniques qu'ergonomiques, sans oublier les aspects de performances navigateurs, de compatibilités, d'accessibilité à tous, etc.
En outre, selon l'existant du projet (la version "bureau" existe-t-elle déjà, ou tout est-il à construire à partir de zéro...), vos considérations ne seront pas les mêmes. De même que la procédure suivie. Il ne s'agira pas ici d'entrer dans tous les détails, mais d'aborder les principales étapes à parcourir.
Nous avons distingué deux méthodologies courantes, adaptées à deux cas de figure : l'adaptation d'un design existant (idéale pour "aller vite" mais pas forcément très optimisée), et la démarche "mobile first" (parfaite pour débuter de zéro, mais nécessitant une réflexion initiale plus poussée).
Méthodologie 1 : adapter un design existant
Votre site web "classique" est déjà en ligne mais inadapté aux smartphones et tablettes ?
En suivant une procédure simple en 10 points, il est relativement aisé et rapide d'adapter un design existant à différentes tailles d'écran. En contrepartie, sachez que gérer les écueils d'ergonomie et de performance web ne sera pas toujours une partie de plaisir.
Fixez le viewport du terminal (<meta name="viewport"?>),
Identifiez les points de rupture,
Faites un choix de navigation mobile (en haut, en bas, select, déroulant, masqué, etc.)
Appliquez des styles mobiles via media queries, soit intégrés dans les styles globaux soit dans une feuille CSS séparée,
Débutez vos styles mobiles par une feuille de styles mobile de base ("reset")
Traitez un par un tous les éléments possédant des largeurs problématiques (width, min-width, height, min-height, margin, padding) en annulant ces largeurs (width: auto, min-width: 0, par exemple),
Réintégrez les éléments dans le flux pour obtenir des blocs verticaux (écrasez les valeurs de float et position: absolute par float: none et position: static),
Adaptez les contenus et les médias pour éviter des débordements,
Optez pour des gabarits de largeur fluide,
Prenez en compte les écrans HD (Retina) et les performances web mobile.
Méthodologie 2 : la démarche "mobile-first"
Cette fois, changeons radicalement de stratégie : en pensant "à l'envers", nous évitons tous problèmes de ressources inadaptées, de temps de chargements inutiles, d'éléments superflus et non ergonomiques.
Etape longue et nécessaire : pensez dès le début du projet à l'ergonomie de votre site web dans différents types de terminaux (généralement smartphones, tablettes, écrans de portables, écrans de bureau). En conséquence, prévoyez un temps de conception graphique multiplié par 3 ou 4, mais c'est pour la bonne cause.
Les étapes sont parfois sensiblement identiques à la méthodologie précédente (à savoir : fixer le viewport, emploi des media queries, prise en compte des terminaux HD et de la performance web), avec quelques particularités à prendre en compte :
Le wireframing doit être initialement orienté pour les petits écrans (des outils tels que Codiqa sont dédiés aux mobiles),
Le design et l'ergonomie principalement adaptés aux petits écrans,
Les styles CSS de base sont dédiés aux smartphones (puis améliorés via respond.js ou des classes conditionnelles pour assurer la compatibilité aux anciens navigateurs de bureau),
Les ressources et medias sont très optimisés (puis remplacés si écrans plus larges), idem pour JS et scripts de "confort"
Pour en savoir plus sur cette méthode, je vous invite à consulter le très bon article publié sur WebdesignFriday: "CSS et Mobile First : procéder par amélioration progressive".
Cet article a été réalisé par Raphael (Alsacreations) sous licence Creative Commons.