image_pdf

Quelques ingrédients "responsive"

image_pdf

Contrairement à une feuille A4 aux dimensions définies et limitées, une page Web a des dimensions variables et élastiques. La variété des écrans, passant du 30 pouces pour un desktop au 5 pouces pour un smart-phone, complique le travail du développeur qui doit proposer un site lisible sur n'importe quel appareil.

Adapter un site nécessite de modifier le code CSS pour l'essentiel, avec quelques modifications sur le code HTML. Un peu de JavaScript est parfois nécessaire pour gérer les interactions.

Bases du site adaptatif

width

Avant de se lancer dans des notions compliquées, la première intention élastique consiste à mettre des pourcentages dans les valeurs des largeurs de boites plutôt que des valeurs fixes.

Par exemple, on peut écrire :

body { width: 80%; }

plutôt que

body { width: 1000px; }

Cette notion est applicable pour les images :

img { width: 100%; }

Remarque : si l'on utilise les medias queries (détaillées plus bas), il est possible d'utiliser des pixels comme unité de distance, tout en proposant des variations de présentations selon les écrans.

min-width et max-width

Une zone de texte, trop étirée ou rétrécie, atteint vite ses limites en confort de lecture. Il est possible de limiter l'élasticité avec les propriétés min-width et max-width.

body {
    width: 70%;
    min-width: 500px;
    max-width: 1100px;
}

Notez le mélange de pourcentages et de pixels qui permet de régler finement les dimensions de la page.

La propriété max-width peut être utilisée avantageusement pour les images si vous ne souhaitez pas les étirer au delà de leur résolution d'origine :

img { max-width: 600px; }

Images au format SVG

Il n'est pas simple de gérer la résolution d'une image sur une surface variable, le risque étant d'avoir des images trop étirées et floues. Je conseille, quand c'est possible, d'utiliser des images au format SVG. Ces images au format vectoriel ont l'avantage d'être réduite ou étirée à l'infini sans détérioration. Il suffit d'utiliser la propriété CSS width.

Ci dessous, un logo SVG du dernier navigateur libre d'une largeur de 50% du conteneur, suivi d'une autre version à 25%. La même source d'image étant utilisée.


Tailles de polices en em plutôt qu'en px

Pour le confort d'utilisation, préférez toujours les em que les px pour définir les tailles des polices. Par défaut, un em mesure 16 pixels. Cependant, si l'appareil visualisant votre site a décidé qu'un em était de taille 18 pour améliorer le confort de lecture, votre site s'adaptera. Autre avantage, vous pourrez facilement changer les tailles des polices dans les medias queries (voir ci-dessous) en spécifiant un font-size pour une balise parente.

Les medias queries

Les medias queries permettent de fabriquer des mises en formes spécifiques en fonction des tailles d'écrans. Le développeur pourra définir des seuils pour son site au delà desquels la mise en forme s'adaptera.

Le code ci-dessous permet de faire une mise en forme spécifique pour les écrans dont la largeur est inférieure ou égale à 768 pixels. L'endroit idéal pour positionner ces medias queries est à la fin de votre CSS externe. Ainsi les médias queries appliqueront les réglages en amont, complétés ou contredits par les réglages des medias queries. Attention aux doubles accolades.

@media screen and (max-width: 768px) {
    body {
        width: 90%;
    }
}

On peut aussi détecter plusieurs seuils et appliquer les réglages en conséquence, le font-size: 20px permet d'augmenter la taille des em :

@media screen and (max-width: 1100px) {
    body {
        margin: 10px;
        width: calc(100% - 20px);
    }
}

@media screen and (max-width: 768px) {
    body {
        font-size: 20px;
    }
}

Il est également possible de détecter le mode portrait ou paysage d'un smartphone ou d'une tablette et d'y appliquer des mises en forme :

@media (max-width: 768px) and (orientation: portrait) { ... }

Le menu burger

Le menu burger est devenu un incontournable du responsive. Le principe est de faire apparaitre le menu quand on en a besoin, puis de le faire disparaitre lors de la consultation. Voici un petit morceau de code qui pourra vous être utile.

index.html

<!doctype html>
<html>
 
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <title>Menu Burger</title>
    <link rel="stylesheet" href="style.css">
    <script src="burger.js"></script>
</head>
 
<body>
    <nav id="menu">
        <a href="index.html">Accueil</a>
        <a href="index.html">Menu 2</a>
        <a href="index.html">Menu 3</a>
        <a href="index.html">Menu 4</a>
    </nav>
    <div id="icone_burger">&#9776;</div>
    <section>
        <h1>Le site vitrine</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p>
    </section>
</body>
 
</html>

Ce code HTML très simple affiche un menu, un icône burger, un titre et un texte.

style.css

body {
    font-family: 'Arial';
    transition-property: translate;
    transition-duration: 0.3s;
}

#icone_burger {
    display: none;
    cursor: pointer;
    position: absolute;
    top: 0px;
    right: 10px;
    font-size: 3em;
}
 
@media screen and (max-width: 768px) {
    nav {
        display: none;
        position: absolute;
        top: -20px;
        left: 100vw;
        width: 250px;
        height: 100vh;
        background-color: blueviolet;
    }
 
    nav a {
        display: block;
        color: white;
        padding: 1em;
    }
 
    #icone_burger {
        display: block;
    }
}

Le code CSS redessine le menu verticalement, avec un fond violet et sur la droite de la page. Il est masqué au départ grâce à la propriété display: none. Il apparaitra suite au clic sur l'icône burger sur les écrans dont la largeur est inférieure ou égale à 768 pixels.

burger.js

window.onload = function () {
    document.getElementById("icone_burger").addEventListener('click', function () {
        document.getElementById("icone_burger").style.display = 'none';
        document.getElementById("menu").style.display = 'block';
        document.getElementsByTagName("body")[0].style.transform = 'translateX(-250px)';
    });
}

Ce code JavaScript guète le clic sur l'icône burger. En cas de clic, il fait disparaître l'icône, puis fait apparaitre le menu en défilant vers la droite de 250 pixels. L'effet d'animation est géré par la propriété CSS transition écrite précédemment.

Dé-zoom sur les mobiles

Pour faire rentrer des sites aux dimensions desktop sur des petits écrans, les smartphones dé-zooment, ce qui réduit fortement la taille des textes. Cette option devient moins utile quand on fabrique un site responsive, car justement, nous venons de coder une version adaptée aux petites résolutions, alors autant profiter de textes lisibles sur smartphones.

Il faudra donc ajouter la balise suivante pour désactiver le zoom :

<meta name="viewport" content="width=device-width, initial-scale=1">

Notez que cette balise est déjà présente dans le code HTML du burger ci-dessus.

Petit entrainement

Pour vous exercer, essayer de transformer le site d'Hitchcock en site responsive.

Articles connexes

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.