Pendant longtemps la norme en développement web a été la création de sites "pixel perfect", identiques sur tous les navigateurs. Cette façon de procéder est très rassurante pour les commanditaires du projet puisqu'ils peuvent valider le rendu final en se basant exclusivement sur les visuels réalisés par les graphistes.

Charge ensuite à l'équipe de développement de réaliser un site conforme à la maquette sur tous les navigateurs.

Cela implique, derrière les portes closes, l'utilisation d'un certain nombre d'astuces plus ou moins élégantes voire l'exploitation de bogues connus dans certains navigateurs pour arriver à un rendu final satisfaisant. Mais là encore, il ne s’agit pas d’un résultat parfait mais bel et bien seulement d’un résultat satisfaisant, car certains problèmes de rendu seront impossibles à compenser, telles que les polices de caractères qui seront toujours légèrement différentes entre les navigateurs et surtout par rapport au rendu Photoshop.

Au final tout cela entraîne de la déception chez les responsables du projet ayant validé les rendus Photoshop et surtout, cela génère un surcoût non négligeable des développements.

Pourquoi dès lors s'obstiner dans cette voie ? 

La première raison déjà évoquée un peu plus haut, est le côté rassurant de la démarche ; la maquette faisant office de référence absolue pour tous les acteurs du projet, en cas de problème, il suffit de comparer le rendu à l'image prédéfini et s'il y a une différence, c'est alors un bogue à corriger.

L'autre raison est liée au fait que les différents intervenants testent le site sur différents navigateurs et dans un intervalle de temps très court. Ils connaissent donc parfaitement le rendu et repèrent très facilement les éventuelles divergences. Reste que vos utilisateurs eux, ne s’amuseront pas à comparer le rendu de votre site web sur tous les navigateurs du marché. S'il y a une différence, vous serez donc le seul à la connaître.

Accepter la différence est une nécessité dans le web actuel

Admettre la possibilité que son site puisse être potentiellement différent selon l'environnement dans lequel il est consulté, demande un certain effort car il vous faudra  perdre l'habitude de comparer et d'exiger le même rendu aux différentes étapes du projet. Et si vous souhaitez développer un site grand public aujourd'hui, vous aurez peu d'alternatives disponibles.

Obtenir un rendu identique était déjà très difficile lorsque seuls trois ou quatre navigateurs captaient la quasi-totalité des parts de marché. Or dans le contexte actuel, le nombre de navigateurs à supporter, a augmenté de manière exponentielle.

Le fer de lance de cette explosion est bien évidemment le développement du web mobile sur smartphones et tablettes. Aux environnements existants, il faut donc en ajouter au moins quatre nouveaux, disposant chacun de leurs propres navigateurs et spécificités. Sur Android, il faut même gérer plusieurs navigateurs possibles et un nombre de versions gigantesque en raison des surcouches imposées par les constructeurs et les opérateurs de Telecom.

Chaque écosystème et chaque surcouche ayant ses propres cycles de mise à jour, il est donc désormais impossible de prévoir avec précision l’affichage de votre site sur un périphérique donné.

Sans compter que cette démultiplication risque de s’accroître avec l'arrivée des objets connectés : les téléviseurs, montres, lunettes, automobiles, réfrigérateurs, etc. seront bientôt connectés à internet et disposeront potentiellement d’un navigateur pour consulter vos sites web.

Un site qui change et s'adapte en fonction du contexte : le RWD

Cette évolution des usages nous oblige à penser nos sites différemment, et ce faisant, à les concevoir différemment.

Vous pouvez décider de développer des sites spécifiques pour chaque type de périphérique, multipliant les coûts de développement et de maintenance, ou bien faire en sorte que votre site s'adapte en fonction du contexte dans lequel il s’affiche, mutualisant ainsi le travail effectué.

C'est l'idée que l'on retrouve derrière le Responsive Web design : concevoir des sites flexibles tirant parti de l'environnement dans lequel ils s'exécutent. Souvent abordé d'un point de vue technique, cette façon de réaliser des sites web implique également des changements de process et de méthodes de travail au sein des équipes impliquées dans le projet. Mais il s’agit ici d’un autre et vaste sujet qui fera l’objet d’un prochain article.

Reste que le premier changement à opérer, est d'accepter que son site soit différent en fonction des navigateurs. Pour autant, « différent » ne signifie pas méconnaissable.

Un décalage d'alignement est, et restera toujours, un bogue qu'il faut corriger. En revanche, si les bords ne sont pas arrondis ou si l'entête n'est pas fixe sur tous les navigateurs, est-ce vraiment grave ? Probablement pas.

De la même manière, si le navigateur ne supporte pas la géolocalisation, votre site doit continuer à fonctionner normalement et doit offrir à l'utilisateur la possibilité de saisir son adresse manuellement. Peut-être alors que le formulaire de saisie d'adresse sera replié par défaut si la géolocalisation est disponible, ou bien déplié si celle-ci est absente.

Chaque changement possible doit donc être identifié et accepté, en gardant en tête que  l’expérience utilisateur doit avant tout primer. Aussi plus un changement est radical, plus ses conséquences doivent être étudiées attentivement. C’est notamment le cas, si vous devez masquer une fonctionnalité ou un contenu.

Si ces contenus peuvent être retirés, c'est qu'ils ne sont pas essentiels alors pourquoi les développer ? S'ils sont essentiels, alors il faudra bien évaluer ce que cela implique de ne pas les fournir à l’utilisateur.

Car si l’utilisateur ne voit pas forcément la différence lorsque votre espacement change entre la version mobile et desktop de votre site, il aura en revanche du mal à passer à côté d'une fonctionnalité présente sur une version mais pas l'autre. Et cela peut entraîner beaucoup de frustration.

Apprivoiser et conduire le changement

Il y a globalement deux stratégies possibles pour mettre en place un site qui s'adapte à son environnement : l'amélioration progressive et la dégradation élégante.

Ces approches sont opposées mais ont pour objectif d'aboutir au même résultat. La différence ne tient qu’aux compromis effectués.

L'amélioration progressive se focalise sur le contenu et part du site le plus basique possible pour l'améliorer ensuite. Votre site de base sera minimaliste mais fonctionnera partout. Selon les possibilités offertes par les navigateurs, il s'enrichira graphiquement, ergonomiquement et fonctionnellement.

La dégradation élégante est l'approche inverse ; vous développez le meilleur site possible dès le début, en essayant de prévoir la manière dont il se dégradera si le navigateur ne supporte pas ce que vous avez mis en place.

En théorie, ces deux approches doivent fournir le même résultat : un site fonctionnant partout quelles que soient les capacités du navigateur utilisé.

Malheureusement, dans la réalité, les budgets et les délais sont souvent serrés et il faut faire des compromis, quand l’échéance approche et la pression monte. Or selon la méthode que vous aurez utilisée, vous devrez faire des compromis entre la compatibilité et le fameux effet "woahou".

Reprenons l'exemple de notre géolocalisation. Si vous développez en suivant l'amélioration progressive, la première étape est de faire le formulaire de saisie d'adresse puis d'ajouter la géolocalisation lorsque le navigateur la supporte.

A l'inverse, avec la dégradation élégante, vous allez d'abord mettre en place la géolocalisation puis ajouter le formulaire de saisie d'adresse.

L'approche la plus logique ici, si la fonctionnalité ne peut être terminée, semble être l'amélioration progressive puisqu'elle fonctionnera partout.

Cependant si vous cherchez à vous démarquer de vos concurrents, il peut être plus pertinent d'implémenter la géolocalisation pour profiter d'un buzz au lancement en captant les utilisateurs high-tech et en capitalisant sur cette innovation, quitte à ajouter plus tard le formulaire pour les autres. Là encore, tout dépend de votre stratégie numérique, de votre cible, de votre offre et de vos objectifs mobiles.

Pour suivre l'évolution des usages du web, il faudra donc surtout apprendre à accepter qu'un même site puisse être différent en fonction du contexte dans lequel il est consulté.

Mais accepter cela ne signifie pas pour autant tout laisser au hasard. Il va falloir penser les différentes facettes de votre site en terme d'importance qu'elles soient graphiques, ergonomiques ou fonctionnelles. L'objectif étant de faire les bons choix, en cas de difficulté technique lors du développement.

C'est ainsi que vous réaliserez les meilleurs sites pour vos utilisateurs, sans vous ruiner en développement et en maintenance.