Avez-vous remarqué que les sites internet ne s’affichaient pas toujours de la même manière selon le navigateur ou l’ordinateur que vous utilisez ? Souvent, il ne s’agit que d’insignifiants détails : une police qui va paraître légèrement différente chez l’un, une marge un peu plus grande chez un autre, un espace plus étroit ici, une animation plus lente là…
Pourquoi ?
Un seul code source,
différentes interprétations
Il y a une chose qui est commune à tous les navigateurs, c’est le code source du site. Vous pouvez même le faire apparaître, pour la plupart des navigateurs, il suffit de faire un clic droit sur le fond du site de n’importe quelle page web et choisir afficher le code source ou code source de la page). Le code HTML apparaît, c’est le code des données textuelles et images de la page. À ce code est relié la feuille de style, c’est-à-dire le code CSS, qui met en page les données.
Mais voilà, les navigateurs n’interprètent pas de la même façon ces même codes.
Ces navigateurs (c’est-à-dire Chrome, Safari, Internet Explorer, Mozilla…) sont eux-mêmes composés de lignes de codes qui sont lues pour être affichées par votre système d’exploitation (Windows, MacOS, Linux)…
Que ce soient les codes des navigateurs ou les codes des sites internet, tous ont été écrits par des humains. Avec leurs propres langages, leurs propres interprétations.
Lors d’un échange de messages, avez-vous déjà pris des points de suspension finissant une phrase pour une menace ? Ou vous est-il déjà arrivé de prendre une affirmation pour une question ? Tout est question d’interprétation.
N’oublions pas que derrière le code, il y a des humains, et derrière le navigateur, d’autres humains.
Ce qui explique certainement pourquoi les navigateurs se comportent différemment les uns des autres, comme des humains se comportent différemment les uns des autres.
Quand l’un ignore une tâche qui lui est attribuée, l’autre comprend l’inverse de ce que vous avez demandé. Et quand deux ordres contradictoires vous sont donnés, lequel suivez-vous ? Et votre collègue ?
S’adapter aux différences
Les développeurs sont conscients que leurs codes seront interprétés différemment selon les navigateurs, et ils leurs attribuent donc en général des codes personnels, pour que le message soit compris et que le site s’affiche et fonctionne de la même manière sur chaque navigateur, tel qu’il a été dessiné.
Prendre en compte les différents supports
Un écran d’ordinateur n’a rien à voir avec un écran de smartphone. L’un a un format horizontal, l’autre un format vertical. Sur l’un on navigue via la souris, sur l’autre directement avec le doigt…
Un site internet uniquement conçu pour écran d’ordinateur sera inconfortable à utiliser sur smartphone, et vice-versa.
C’est là qu’intervient la notion de responsive. Ce mot anglais pourrait se traduire par qui réagit bien.
Un site responsive c’est un site qui réagit bien avec le support de l’utilisateur. Il prend en compte la taille de l’écran pour s’afficher adéquatement.
Concevoir une interface de site internet qui soit accessible et facile à utiliser quelque soit le support, c’est le rôle de l’UX designer.
De la même manière qu’un développeur peut s’adresser à un navigateur particulier, il s’adressera aux différentes tailles d’écran, pour que le site puisse s’adapter en conséquence.
Ainsi, un site responsive s’affichera toujours correctement, et permettra une navigation intuitive, quelque soit le support, ce qui est primordial quand on sait que son site peut aussi bien être vu sur smartphone que sur ordinateur !
Vous êtes curieux ? Si vous êtes sur votre smartphone, vous pouvez afficher la version ordinateur (depuis le menu de votre navigateur, cochez afficher la version ordinateur), vous verrez apparaître des différences !
Vous nous lisez sur ordinateur ? Réduisez au minimum la fenêtre de votre navigateur, vous verrez des changements !
Et pour finir, sachez que les moteurs de recherche récompensent les sites responsive en améliorant leur référencement. 😉
