Construire un site mobile, responsive ou adaptatif n’est pas une option. Pour répondre correctement aux exigences techniques du web, les webmestres doivent adapter de façon optimale l’affichage de leur site sur l’ensemble des appareils (téléphone intelligent, pc, écran, tablette numérique). Le web adaptatif n’est rien d’autre qu’une technique proposant à l’internaute une lecture confortable du site sans barre de défilement et zoom pour lire le texte.
Lorsque l’on voit le taux important de rebond sur la page accueil d’un site non-web-adaptatif, on comprend que cette technique doit être une priorité pour tous les webmestres.
Qu’est-ce que le web adaptatif ?
Il s’agit de règles CSS bien précises permettant de faire un site adaptatif. Un site construit en web adaptatif s’affiche correctement sur écran de 1024px, une tablette de 600px ou un téléphone intelligent de 320px.
Pour indiquer au navigateur de l’appareil, les règles de CSS à charger, on utilise les media-queries en spécifiant les tailles d’écran maximales et leurs règles associées. En parallèle, il faut indiquer dans votre balise <head> le « viewport ».
Dans les règles CSS, le web adaptatif prend soin de redéfinir la taille des blocs en fonction des appareils.
Typologie des valeurs d’écran
Il est utile de connaitre la typologie des tailles d’écran avant de se lancer dans l’écriture du CSS.
- A : Le téléphone intelligent a une largeur d’écran compris entre 320 et 480 pixels dans ce cas il faut utiliser la condition (max-width : 480 px)
- B : Du téléphone intelligent à la tablette numérique : cette classe comprend les écrans d’une largeur de 481 à 767 pixels. Il faut alors utiliser la condition max-width : 767px.
- C : De tablettes au laptop. Écran compris entre 768 et 979 px. On utilise les conditions min-width : 768px et max-width : 979px)
- D : Ordinateur de bureau. Écran compris entre 980 et 1199 px. Max-width correspondant aux tailles maximales correspondantes
- E : écran large de 1200 px et plus. Conditions : min-width : 1200px.
En prenant connaissance de ces 4 classes typologiques de taille d’écran, vous êtes en mesure de créer des règles CSS pour chaque appareil.
Le web adaptatif permet d’adapter le design aux écrans de petite taille. Lorsque vous codez un site adaptatif, il est intéressant de le tester sur les différents appareils. Visuellement, vous déterminez en un coup d’œil les éléments qui posent problème qui dépassent la taille maximale autorisée. Les images et les tableaux ne doivent jamais dépasser la taille maximale de l’écran. Pour cela, une déclaration CSS comme suit est suffisante :
img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
max-width : 100 % ;
}
Coder un site adaptatif influence votre positionnement dans le moteur de recherche Google. D’ailleurs, Google envoie des messages d’avertissement régulièrement aux webmestres pour conseiller d’adapter le site pour qu’il soit adaptatif.
Les boutiques en ligne ont intérêt pour gagner en rentabilité de posséder un site adaptatif. La tendance des internautes est une utilisation de plus en plus importante des téléphones intelligents pour se rendre sur un site. Négliger ce comportement est plus qu’une erreur technique, c’est une faute marketing.