Initiation au responsive avec HTML5 et CSS3
Étant mentor sur le parcours Développeur web pour OpenClassRooms, je suis amené à expliquer aux étudiants les bases du responsive avec HTML5 et CSS3.
Pour les aider à cette compréhension, j’ai écrit cet article avec un exemple simple et basique.
Le projet a été réalisé sous Visual Studio Code (VSC pour les intimes). Les sources sont disponibles sous GITHUB
https://github.com/esauvage1978/blog_responsive
Avant de voir l’exemple, revenons sur la définition du mot responsive :
Qualifie en anglais un site, une application ou un outil informatique dont le code répond à des normes lui permettant d’être adapté à tous types de supports (PC, tablettes, mobiles). Ainsi la taille des objets (photographies, textes, éléments visuels…) s’adapte à la taille de l’écran où ils sont visibles.
https://www.linternaute.fr/dictionnaire/fr/definition/responsive/
Création des fondations de notre projet basique en HTML5 et CSS3
Pour ce projet, nous allons partir sur une structure simple avec un fichier index.html à la racine du site et un répertoire css contenant la feuille de style.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Page vide</title>
<meta name="description" content="Le responsive en HTML5 et CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p>Hello world!.</p>
</body>
</html>Un des éléments fondamental pour que le responsive fonctionne est la présence de la balise meta viewport.
Mise en œuvre du responsive sur notre page
Pour cet exemple, nous allons coder en desktop first. C’est à dire que le code html/css produit sera optimisé pour un affichage sur écran d’ordinateur.
Nous allons créer 12 tuiles de 200px de dimensions que l’on va afficher assez simplement en utilisant Flexbox. A ce sujet, je vous conseille ce site pour en apprendre plus https://css-tricks.com
<main>
<section>
<article>
<span>Article 1</span>
</article>
<article>
<span>Article 2</span>
</article>
<article>
<span>Article 3</span>
</article>
<article>
<span>Article 4</span>
</article>
<article>
<span>Article 5</span>
</article>
<article>
<span>Article 6</span>
</article>
<article>
<span>Article 7</span>
</article>
<article>
<span>Article 8</span>
</article>
<article>
<span>Article 9</span>
</article>
<article>
<span>Article 10</span>
</article>
<article>
<span>Article 11</span>
</article>
<article>
<span>Article 12</span>
</article>
</section>
</main>
main
{
max-width: 1440px;
margin:auto;
}
section
{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
article
{
width: 200px;
height: 200px;
margin:10px;
border-radius: 20px;
border:2px solid #443F61;
background-color: #9D91E0;
display: flex;
align-items: center;
justify-content: center;
}
span
{
color:#443F61;
font-size: 25px;
font-weight: bold;
}Ce code est déjà responsive grâce au flexbox et à la balise meta. Magique, non ?. Vous pouvez le constater en utilisant la vie adaptative de Firefox ( Ctrl+Maj+M ).
Cependant je veux changer de couleur lorsque je suis sur tablette ( résolutions 768 px et 992 px ) et sur mobile ( sous la résolution de 768px ). Pour ce faire je vais utiliser @media
@media (max-width:767px) {
article
{
border:2px solid #346139;
background-color: #79E085;
}
span
{
color:#346139;
}
}
@media (min-width:768px) and (max-width:992px) {
article
{
border:2px solid #2C4961;
background-color: #65A9E0;
}
span
{
color:#2C4961;
}
}Lorsque l’on ajoute des breakpoints, il est important de ne modifier que le strict nécessaire. Pour ma part, je n’ai modifié que les couleurs donc les autres propriétés CSS sont conservées.
Il est à noté que l’ordre d’apparition dans le fichier CSS a de l’importance. Pour une même classe, le dernier écrit gagne.
Lorsque l’on travaille sur plusieurs pages, il peut vite devenir fastidieux de jouer avec la vue adaptative de Firefox. Je vous conseille donc d’installer l’application gratuite responsively
Conclusion
Dans la plupart des cas, je vous conseille de développer en mobile first et ce pour plusieurs raisons. D’une part, la navigation se fait de plus en plus sur smartphone. D’autre part, cela vous permet de penser votre site différemment en prenant compte des spécificités propres aux smartphones, comme la résolution et la vitesse d’affichage.