Précisons d’abord qu’ il ne s’agit pas ici d’un manuel technique mais d’un livre de préconisations pour la conduite de projet responsive web design, notamment sur le plan humain . En utile rappel, il est indiqué que le web est un environnement de travail particulièrement hostile avec des contraintes constamment en évolution et des pratiques, des outils, qui doivent s’adapter. Ce livre, s’adresse aux intégrateurs, designers, en bref à tous ceux qui interviennent sur un projet web et dont le défi consiste à s’adapter à toutes les plateformes, les tailles d’écrans, les débits et les terminaux mobiles, smartphones et tablettes. Un projet responsive web design demande à ce que l’on cible entre 4 et 6 plateformes pour la recette (2 à3 versions desktop, 1 tablette et 1 à 2 smartphones).
Au fil des pages, il est souvent indiqué qu’un projet Responsive web Design, passe par le lâcher-prise, à savoir la nécessité de ne pas à tout prix répondre à tous les cas de figure sus-nommés. La difficulté d’un projet Responsive Design est de faire les bons choix en fonction de l’utilisation. Les auteurs ne partagent pas l’approche « Responsive pour tous » qui considère que tous les sites web peuvent s’adapter à toutes les tailles d’écran alors que Twitter, Facebook ou Google proposent un site différent pour les mobiles.
L’approche « Mobile First » ( les mobiles d’abord) en préalable à la conception web pour les ordinateurs de bureau est préconisée, qui concentre la pré-conception sur les contenus et les fonctions les plus importantes. Les résultats pourront ensuite être extrapolés pour des plateformes fixes et les débit d’accès plus importants.
Des rappels basiques, valables pour tous les projets web sont évoqués: sans limites fermes, le projet peut d’engluer au point de ne plus être capable d’avancer. De même, la phase de conception ne doit pas être négligée pour éviter les problèmes lors de la livraison du projet. Par ailleurs , il est rappelé des conseils graphiques intangibles, ainsi, une ligne doit toujours faire entre 60 et 80 caractères et la hauteur du texte courant, jamais moins de 12 pixels. Autre évidence, la nécessité de documenter le code et le projet pour une reprise ou une mise à jour ultérieure . Tout le monde trouve cela ennuyeux, mais les mêmes sont heureux de trouver la documentation quand ils en ont besoin. La forme peut être une page wiki, un fichier au format markdown, des commentaires dans le pages html/css/javascript.
En lisant ce livre, le lecteur découvre que de nombreux arbitrages doivent être faits, tout au long de la vie du projet responsive web. A proscrire, le masquage de certains contenu pour les appareils mobiles, arguant du fait qu’il ne seront pas indispensables à l’utilisateur. C’est, disent les auteurs, contrevenir aux règles de base de l’accessibilité du web. Et de citer le site pour les mobiles d’une compagnie aérienne qui ne propose que la recherche et l’achat des vols alors que vous souhaitez connaître le poids autorisé des bagages en soute. Il existe des solutions comme l’affichage d’une section masquée, en javascript ou l’attribution d’une page spécifique aux mobiles.
Utile précision: tout est faisable mais attention, développer des centaines de ko de Javascrit pour répondre à tous les besoins, ce n’est ni facile, ni gratuit. D’autant que le code Javascript peut interférer avec d’autres portions de code ou des extensions du navigateur.
Le rôle central de l’intégrateur est mis en évidence dans le livre et concerne l’accessibilité, les performances ou le référencement naturel.
Autres éléments soulignés ici, les problèmeq liés à l’affichage de la pub dans un site responsive web design. Et de citer l’exemple du Boston Globe qui a adapté la grille du site pour qu’elle soit fixe pour les colonnes de publicité et fluide pour les colonnes des autres contenus.
Les auteurs préviennent en conclusion que le livre n’est pas exhaustif et qu’il faut, ici plus qu’ailleurs, expérimenter, l’erreur faisant partie intégrante du projet.
Aller plus loin:
- Traduction d’un article de John Allsopp. Une réflexion intéressante sur le design web qui incite les designers à abandonner l’idée du contrôle et explorer un nouveau mode relationnel avec la page.
- Ne pas confondre le « Responsive web design » et l’Adaptative web design ». Le premier désigne la capacité d’un site à gérer les différentes d’écran, le second s’applique plutôt aux sites dont le design fonctionnel et graphique change en fonction des possibilités du navigateur. Peut-il exécuter du Javascript? Peut-il représenter des blocs avec des dégradés CSS ? Etc.
Soyez le premier à commenter