Transformer un site web en adaptatif/responsive : la méthode simple en HTML et CSS

Découvrez dans cet article comment rendre votre site responsive/adaptatif en utilisant uniquement de l’HTML et du CSS. La méthode rapide et simple.

Alors tout d’abord, qu’est-ce qu’un site adaptatif ou responsive ? Il s’agit d’un site internet dans lequel les éléments (les images, les blocs de texte par exemple) changent de taille au fur et à mesure que la page rétrécit. Ceci est tout particulièrement conçu pour offrir une visite agréable aux visiteurs de smartphone. Mon site par exemple est adaptatif : le texte ne dépasse jamais la taille de la fenêtre, et le menu supérieur laisse place à un bouton si la fenêtre diminue trop de largeur. Cette dernière technique cependant requiert l’utilisation du JavaScript, un langage que beaucoup de développeurs amateurs voulant simplement coder leur site ne connaissent pas.

Vous pouvez vous demander alors : quel intérêt de rendre son site adaptatif si ça prend seulement plus de travail ? Selon le site WeAreSocial, en moyenne 1 page de votre site sur 3 sera visitée par un smartphone. D’où l’intérêt d’offrir une expérience conviviale à ces utilisateurs ; on est vite importuné de devoir se déplacer horizontalement sur un smartphone ou de devoir zoomer pour lire le texte. C’est souvent cela qui fait partir un visiteur dès les premières secondes. De plus, depuis 2015, Google punit les sites qui ne sont pas responsive dans leur référencement.

A force de rendre des sites statiques responsive et adaptatif, j’ai développé une méthode qui permet de réduire grandement la charge de travail.

Mise à jour 2018 : Découvrez comment utiliser les grilles dans votre site responsive ! La méthode révolutionnaire qui vient de paraître.

Avant d’entrer dans la méthode, notez que je n’explique que très peu les différents sélecteurs et propriétés CSS. N’hésitez pas à laisser un commentaire s’il vous faut plus de renseignements !

La méthode pure HTML et CSS

Commençons tout de suite, en 4 petites étapes seulement (c’est bien un guide simple !) :

Étape 1 : passer la largeur de la page 100%

Vous devriez créer un sélecteur body ou html s’il n’existe pas déjà. Dans celui-ci, indiquez :

html {
 width:100%;
 height:100%;
}
  • Première leçon : on n’utilise pas l’unité du pixel (px) en responsive !
  • Width:100% (width signifiant largeur) signifie que votre site a le droit de prendre 100% de la taille de la fenêtre. Donc si la fenêtre rétrécit, le contenu rétrécira avec.
  • Il n’est pas nécessaire d’indiquer height (hauteur), sauf si vous voulez que vos éléments aient une taille précise. Autrement, ils prendront d’eux-même la taille qui leur est nécessaire, dépendant le contenu, la marge et le padding appliqué.

Si vous souhaitez une page qui ne prend pas la largeur entière :

passez le html en width:100% comme décrit ci-dessus, puis créez <div class= »conteneur »>, dans le quel se trouvera tout le contenu de votre page. Dans le CSS :

.conteneur {
  width:100%;
  margin: 0 auto;
}

margin : 0 auto; signifie que l’élément sera centré sur la page.

Étape 2 : faire flotter vos sections

Il faut maintenant passer dans chaque sélecteur de section. Ceux-ci sont : nav, aside, article, section, header, footer (introduits avec l’HTML5) et tous vos div. Ajoutez à tous ces éléments :

header,
nav,
aside,
article,
section,
footer,
div {
 float:left;
}

Ce sélecteur CSS permet de sélectionner tous ces éléments en une fois. Si vous avez des .div qui ne doivent pas flotter (par exemple les enfants d’un conteneur flottant), alors ne sélectionnez pas tout en même temps mais au cas-par-cas.

  •   Important : il est nécessaire d’indiquer  float:left; à tous vos éléments. Autrement, ils se feront empiéter par le premier élément ayant float:left.
  • Float indique à l’élément qu’il doit se caser tout en haut à gauche de la page (en prenant en compte les marges existantes). Si un élément occupe déjà cet espace, alors il se case juste à droite de cet élément. Float:right existe aussi.

Étape 3 : Videz le positionnement de vos sections

Restons dans les mêmes sélecteurs. Cette fois-ci, supprimez tout ce qui a attrait au positionnement. Donc, si vous aviez par exemple :

header {
  position: fixed;
  position: absolute;
  top: 0px;
  left: 5px;
  right:10px;
  bottom : 15px;
  height:30px;
  width:500px;
}

Retirez tout cela ! On va tout passer en unité relative.

  • Les unités absolues sont, entre autres, exprimées en px. Les unités relatives de taille sont le plus souvent en pourcentage, mais on peut aussi utiliser em.

Étape 4 : passer la position en relative

header {
 position:relative;
 width:100%;
}

Bien entendu, c’est à vous de déterminer le pourcentage nécessaire ! Les headers font généralement 100% de la largeur du site. Il n’est pas nécessaire d’indiquer une hauteur : elle est calculée automatiquement selon ce qui remplit le bloc. Vous pouvez la noter en pixels si vous voulez, mais généralement la taille automatique est préférable pour les smartphones.

  • En CSS, les pourcentages sont calculés par rapport à l’élément parent. Donc, n’utilisez pas width:inherit ! Si votre body fait 50% de largeur, et que votre header fait aussi 50%, il mesurera en fait 50% du 50%, donc 25% de la largeur de la page (et seulement la moitié du body). Inherit indique que la propriété doit reprendre la valeur qui a été donnée à l’élément parent.

Étape 5 : Récapitulons !

  1. Dans le sélecteur body, indiquez width:100%;
  2. Dans les div et autres sections sémantiques, indiquez float:left;
  3. Dans les div, supprimez ensuite les valeurs de position, width, et height
  4. Remplacez par position: relative;  et indiquez width en pourcentage.

Pour aller plus loin

J’ai encore quelques astuces qui pourraient vous aider !

Utiliser les media queries

J’ai écrit un article sur les media queries. En résumé, il s’agit d’un sélecteur CSS un peu spécial qui permet de déterminer l’écran. C’est avec les media queries qu’on peut cibler spécifiquement les smartphones et tablettes, et changer complètement la mise en page du site pour ces appareils.

Des images responsive

Il est préférable de mettre vos images dans un div. Ensuite, dans le CSS, indiquez seulement la taille du div et dites à l’image de prendre 100% de largeur et hauteur :

#conteneur-img {
 height:30%;
 width:30%;
 }
div > img {
 height:100%;
 width:100%;
 }

Le sélecteur div > img signifie qu’on sélectionne les images qui sont enfants directs de tous vos div. Avec ce sélecteur, il faut donc absolument une seule image par div, pas plus !

Ainsi, si vous changez un jour l’image dans le div et qu’elle n’est pas au même format, elle se mettra automatiquement au format de votre div. Il est aussi possible de placer l’image en background du div :

#conteneur{
 height:50%;
 width:50%;
 background: url("img/image.jpg") no-repeat scroll center;
 }

De cette manière, elle conserve ses proportions dans le div et son format n’est pas cassé lorsque la fenêtre du site rétrécit (dans l’HTML, laissez simplement votre div vide).

L’unité em

L’unité em est une unité relative que l’on utilise souvent pour les polices. Simplement, 1em est égal à la taille de police par défaut du navigateur (sur ordinateur en tout cas, on peut la changer dans les réglages, par exemple pour les malvoyants). Si elle fait 14px, alors 2em = 28px. Cependant, on peut tout à fait utiliser les décimales, par exemple 1.432em.

Pour les smartphones, qui ont une taille de police différente selon le modèle, c’est donc une très bonne option.

Dans le CSS, n’indiquez pas les éléments devant avoir une taille de 1em, c’est la valeur par défaut. Par contre, si un autre élément doit changer, par exemple vos titres :

h1{
  font-size: 2.5em;
}

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.