Faire des pages responsive

Coucou

Dans ce tutoriel nous ne parlerons pas de toutes les astuces et bidules utiles pour faire du responsive. Nous parlerons simplement ici d'une astuce pour avoir des images différentes en fonction de la résolution d'écran et nous parlerons de media query.


Quand on dit d'une page web qu'elle est responsive, cela signifie que son visuel va s'adapter à la taille de ton écran. Par "adapter" j'entends surtout que la page s'affiche bien que l'on soit sur un écran d'ordinateur immense ou sur son smartphone.


Pour adapter nos pages web à toutes les résolutions, nous allons devoir parler de breakpoint ou points de rupture. Ces points de ruptures correspondent en fait aux différentes tailles que l'on rencontre le plus souvent.

En général, nous avons :
• largeur =< 480px = vue mobile
• largeur =< 1024 = tablette
• largeur > 1024 = desktop (= ordinateur)

Cela dit, ces breakpoint ne sont absolument pas figé et tout dépend du graphiste en général.

Par exemple, au boulot, nous avons les points de rupture suivant :
• 320px
• 990px
• 1024px
• 1280px
• 1440px

Ce qui fait que les graphistes nous fournissent toujours 6 maquettes différentes

Voici des exemples : clic


La majorité de la gestion “responsive” se fait via la CSS en utilisant ce qu’on appelle des médias queries. Cela dit, il y a une petite subtilité qui se fait en HTML et c’est par celle-ci que nous allons commencer.


Fût un temps, pour afficher telle ou telle image suivant la résolution d’écran, nous utilisions les display (le block pour celle à afficher et le none pour toutes les autres).

Mais cette période est révolue ! Eh oui, il faut dire que ce n'était pas top de charger N images pour n'en afficher qu'une seule. Cela ne posait pas trop de soucis sur desktop (= ordinateur), mais sur ton mobile, tu chargeais l'immense image qui s'affiche sur l'ordinateur mais en la cachant : tu consommais de la data pour rien. A présent, voici le HTML qu'on va utiliser :

Code:

<picture>
   <source media="INFO" srcset="url-image-specifique">
   <img src="url-image" alt="Mon image" />
</picture>

Je m'explique

• INFO = ici, on va indiquer une largeur minimale par exemple
• url-image = le lien de ton image

Par exemple :

Code:

<picture>
   <source media="(min-width: 900px)" srcset="https://i.servimg.com/u/f71/20/05/19/39/468x6010.png">
   <source media="(min-width: 600px)" srcset="http://pvereecken.fr/tambouille/88x31-logo.png">
   <img src="http://pvereecken.fr/tambouille/50x50-logo.png" alt="La Tambouille des Râleuses" />
</picture>

Change la largeur de ta fenêtre du navigateur, tu verras l'image changer

Ici, j'affiche par défaut le logo en 50x50. Si jamais je rentre dans l'une des 2 conditions au-dessus, le "src" de mon image change pour prendre le "srcset" de la balise source dans laquelle je rentre.


Comme je l'ai dit en intro de cette partie, toute la gestion "responsive" se fait en CSS, et plus particulièrement avec les médias queries.


Tu as raison, commençons par définir correctement cette propriété CSS.

Les requêtes média (media queries) permettent de modifier l'apparence d'un site ou d'une application en fonction du type d'appareil (impression ou écran par exemple) et de ses caractéristiques (la résolution d'écran ou la largeur de la zone d'affichage (viewport) par exemple).

Source : developer.mozilla.org

Autrement dit, grâce à cette information, nous allons pouvoir faire de la CSS différente en fonction de la résolution d'écran de notre navigateur


Eh bien ici, ce n’est pas compliqué : on le met tout simplement dans la CSS. Du coup, tu fais ton style "normal" comme d'habitude, et ensuite, tu précises les spécificités en fonction de la résolution

Le code va se présenter de cette façon :

Code:

@media screen and (condition) {
   /* La CSS sera ici */
}

au niveau des conditions, en général, on utilise :
• la largeur maximale :

Code:

@media screen and (max-width: XXXpx) {
   /* La CSS sera ici */
}

• la largeur minimale :

Code:

@media screen and (min-width: XXXpx) {
   /* La CSS sera ici */
}

• si on est en mode "portrait" :

Code:

@media screen and (orientation : portrait) {
   /* La CSS sera ici */
}

• si on est en mode "paysage" :

Code:

@media screen and (orientation : landscape) {
   /* La CSS sera ici */
}

Et bien sûr, on peut en combiner plusieurs, par exemple :

Code:

@media screen and (max-width: XXXpx) and (orientation : landscape) {
   /* La CSS sera ici */
}

Tu trouveras toutes les valeurs possibles des conditions ici


Ici, on va faire quelque chose de tout simple :

• Sur PC (donc largeur > 1024px), je vais avoir 3 blocs cote à cote avec un fond vert et du texte en blanc ;
• Sur tablette (donc largeur > 480px), j'aurai 2 blocs cote à cote et le 3ème prendra toute la largeur en dessous. Je vais leur mettre un fond bleu;
• Sur mobile (largeur < 320px), mes blocs se placeront les uns en-dessous des autres et ils auront un fond rose.

Code:

<style>

    html{
        font-size: 14px;
    }

    body *{
        box-sizing: border-box;
    }
   
    .d-flex{
        align-items: stretch;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }

    .d-flex > div{
        background:  pink;
        color: white;
        font-size: 1.2rem;
        margin-bottom: 10px;
        padding: 10px;
    }


    /* Tablette */
    @media screen and (min-width: 481px) {
        .d-flex{
            flex-direction: row;
            flex-wrap: wrap;
        }

        .d-flex > div{
            background:  blue;
            flex: 0 0 49.5%;
            max-width: 49.5%;
        }

        .d-flex > div:last-child{
            flex: 0 0 100%;
            max-width: 100%;
        }
    }

    /* Tablette */
    @media screen and (min-width: 1025px) {
        .d-flex > div,
        .d-flex > div:last-child{
            background:  green;
            flex: 0 0 32.5%;
            max-width: 32.5%;
        }

    }

   
</style>

<div class="d-flex">
    <div>
        bloc 1<br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur accusamus quaerat debitis doloribus aspernatur reiciendis, qui dolores rerum impedit, recusandae id nulla in modi accusantium voluptate odit obcaecati eos autem.
    </div>
    <div>
        bloc 2<br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur accusamus quaerat debitis doloribus aspernatur reiciendis, qui dolores rerum impedit, recusandae id nulla in modi accusantium voluptate odit obcaecati eos autem.
    </div>
    <div>
        bloc 3<br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur accusamus quaerat debitis doloribus aspernatur reiciendis, qui dolores rerum impedit, recusandae id nulla in modi accusantium voluptate odit obcaecati eos autem.
    </div>
</div>

Tu peux changer la largeur de l'écran pour voir le rendu différent

Plus d'infos concernant les médias queries ici



Tu peux utiliser ton navigateur pour voir le rendu de ta page web sous différentes résolutions. Pour cela, je t'invite a jeter un oeil à ce tutoriel.

Je te conseille d'utiliser firefox dont l'émulateur mobile est moins buggé que celui de chrome.


En général, quand on fait un site en responsive, on essaie de faire en sorte que la taille de notre police de caractère (typographie) s'adapte à la résolution de l'écran.

Le souci c'est qu'on prend l'habitude de coder nos tailles de typo en px. Mais les px, ce sont des unités fixes. Or, un font-size: 12px; ne donnera pas la même impression sur un écran de mobile que sur un écran de desktop.

Exemple:

Pour palier à ce problème, nous n'allons pas utiliser des px, mais plutôt des rem. Mais les rem qu'est-ce que c'est ? Eh bien c'est une unité variable, un pourcentage de taille. Du coup, elle se base sur une taille de typo de base définie dans la CSS du "html" du fichier et adapte de manière proportionnelle la taille de nos typos en fonction du font-size: X rem qu'on leur aura donné.

Voici un exemple :
1) on définit une taille de base à notre typo :

Code:

html{
   font-size: 14px;
}

ça sera donc notre "base" de calcul.

2) On définit la taille de notre "body" :

Code:


body{
   font-size: 1.4rem;
}


Ici, la taille de la typo du body fera donc : 14*1.4 = 16.8px.

Si je veux changer la taille de ma typo en fonction de si je suis sur mobile ou sur desktop, il me suffit d'utiliser les médias queries. Par exemple :

Code:

html{font-size: 14px;}

@media (max-width: 480px) {
    html { font-size: 12px; } 
}

Et si on reprend mon exemple précédent avec ces modifs :

Exemple:

Ici, en plus d'être "utile" pour le responsive, cela l'est aussi (et surtout) pour l'accessibilité de tes pages web. Eh oui ! Si tu décides de zoomer ou dézoomer la page, la taille de ta typo s'adaptera et sera clairement lisible

En gros, avec les rem, si tu veux changer ta taille de typo pour une résolution en particulier, tu n'as pas à repasser sur toute la CSS où il y a des font-size. Il te suffit de changer la taille de la typo de base ici :

Code:

html{font-size: 14px;}

@media (max-width: 480px) {
    html { font-size: 12px; }
}

et toutes les tailles de typo seront recalculées automatiquement. Tu as juste 1 endroit à changer pour que ça s'applique partout

Ce site explique bien l'importance d'utiliser des rem plutôt que des px. Je te conseille vivement de le lire De plus le petit exemple à la fin est top
Tu as aussi ce site qui apporte un complément d'informations et que je t'invite vivement à lire pour avoir plus d'infos.


Quand on parle de site responsive, on peut distinguer 2 types :
• les sites "fluides" : en général, les dimensions sont indiquées en pourcentage afin que, quelque que soit les dimensions de l'écran, celles-ci s'adaptent automatiquement ;
• les sites "adaptatifs" : pas de pourcentage pour les dimensions, mais pour chaque résolution, tu as des tailles fixées (par exemple, avec une largeur inférieur ou égale à 990px, un bloc fera 900px de large ; sur une largeur de plus de 990, le site fera 990px).

Ici, c'est à toi de choisir ce qui te convient le mieux (ou au graphiste).

Dans le cas où tu partirais sur un site "fluide", le point adapter sa typo est indispensable pour que le texte s'adapte le mieux à la taille de son contenant
Et dans la même idée, si tu veux que tes blocs s'adaptent au mieux à la largeur de ta page, il faudra opter pour des tailles & marges en pourcentages plutôt qu'en pixels

---

Tu as à présent les bases pour réaliser des pages qui s'adaptent à la résolution de l'écran.

Si tu as des questions ou remarques, ou si tu veux plus d'explication sur un point en particulier, n'hésite pas à nous laisser un message a la suite de celui ci.

Si tu veux en savoir plus, voici un article au top sur notre site chouchou : C'est quoi le responsive Web Design ?