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.

Adapater 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: 100%; }

Images en 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, une image SVG du célèbre moteur de recherche 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 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 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>

style.css

body {
    font-family: 'Arial';
    transition-property: all;
    transition-duration: 0.3s;
    overflow-x: hidden;
}

#icone_burger {
    display: none;
    cursor: pointer;
    position: absolute;
    top: 0px;
    right: 10px;
    font-size: 3em;
}

@media screen and (max-width: 768px) {
    nav {
        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;
    }
}

burger.js

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

Exercice

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. Apprenez comment les données de vos commentaires sont utilisées.