Le deal à ne pas rater :
Manette Xbox Séries X avec adaptateur sans-fil Windows 10 à 52,99€
52.99 €
Voir le deal

Aller en bas
Pêpêche
Pêpêche
Mascotte
Messages : 4528

Faire des pages responsive Empty Faire des pages responsive

Lun 17 Juin 2019 - 10:30

Les bases

Faire des pages responsive

Coucou Smile

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.

Qu'est-ce que le responsive ?

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.

Les points de rupture

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 Smile

Idea Voici des exemples : clic

Comment le mettre en pratique ?

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.

Une image par taille d'écran

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 Smile

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>




La Tambouille des Râleuses


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

Idea 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.

Les médias queries

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.

Mais qu'est-ce que c'est ?

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 Smile

Comment les utiliser ?

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 Smile

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 */
}

Idea Tu trouveras toutes les valeurs possibles des conditions ici

Un exemple

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.

bloc 1
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.
bloc 2
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.
bloc 3
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.


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>

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

Arrow Plus d'infos concernant les médias queries ici

Autres remarques

Utiliser son navigateur pour vérifier le rendu

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.

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

Adapter sa typo

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:

• Mobile :
Faire des pages responsive Rendu-26

• Desktop :
Faire des pages responsive Rendu-25

Tu le vois bien, c'est illisible sur mobile...

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:

• Mobile :
Faire des pages responsive Rendu-28

• Desktop :
Faire des pages responsive Rendu-27

ah cette fois, c'est "lisible" sur mobile Smile

Idea 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 Smile

Arrow 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 Smile

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

RPW fluide ou adaptatif ?

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 Smile
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 Smile




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.

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


Pêpêche
Pêpêche
Mascotte
Messages : 4528

Faire des pages responsive Empty Re: Faire des pages responsive

Ven 6 Sep 2019 - 10:46
Coucou par ici Smile

Je fais un petit ajout à ce tuto. Au boulot, l'équipe UX (= les graphistes) m'ont donné une extension que je trouve top pour vérifier le responsive : Window Resize.

Tu peux la télécharger :
pour Chrome clic
pour Firefox clic

Son utilisation est assez intuitive : il te suffit d'ouvrir l'extension et de choisir la dimension que tu veux vérifier.

Cela dit, en cas de souci, n'hésite pas à nous le dire Smile

_________________
Revenir en haut
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
Les coups de ♥ des Râleuses



Post-It des Râleuses