Aperçu des sections

  • Présentation

    Tout replier Tout déplier

    Le responsive design est arrivé dans les techniques de développement web avec l'apparition des supports mobiles. Avant l'avènement des smartphones et autres tablettes, les seuls devices (périphériques) permettant de naviguer sur le web étaient des écrans d'ordinateurs classiques, donc ayant des résolutions assez normalisées (ex : 1024*768, 1280*900, etc...). A partir du moment ou les gens ont commencé à accéder à des services en lignes via des smartphones et autres tablettes, les sites web conçus pour être affichés sur des écrans de bureau (desktop) se sont révélés être inadaptés à ces périphériques, illisibles, et peu ergonomiques.

    Voici un exemple de rendu non responsive :


    Les acteurs qui spécifie le langage CSS, ont alors incorporé de nouveaux moyens techniques pour résoudre ce problème. En utilisant certains types de règles CSS, on va pouvoir modifier l'agencement et le style d'une page web en fonction de la résolution du périphérique qui la lit. Et ceci est absolument incontournable aujourd'hui, car les utilisateurs utilisent de plus en plus des supports mobiles pour accéder à Internet. Il est donc primordial que le contenu soit adapté aux écrans, sous peine que l'utilisateur quitte un site difficile à utiliser, et passe chez le concurrent...

    De plus, Google à récemment décidé de rendre l'apparence responsive prioritaire par rapport à l'apparence desktop (index mobile), ce qui impacte très fortement le référencement d'un site web qui ne serait pas adapté aux écrans des smartphones, et qui se concrétise par une chute du positionnement dans les résultats de recherche.

    Voici un exemple de rendu responsive basique d'une même page web ouverte par trois périphériques différents :


    En général, on vise un style épuré dans les petites résolutions, et on peux se permettre un peu plus de virtuosité dans les grandes résolutions. C'est logique, car on ne peux pas afficher autant de choses sur un petit écran de smartphone que sur un desktop en fullHD....

  • Viewport

    Pour faire du responsive design, il faut commencer par paramétrer le viewport. En gros le viewport est la surface émulé par votre navigateur selon différents paramètres. Il n'est pas spécialement nécessaire de configurer le viewport en développement "desktop".

    En revanche dès qu'on passe sur des supports mobiles type tablettes et smartphones, il faut forcer certaines valeurs du viewport afin que le navigateur réagisse correctement à notre design. En effet, les navigateurs sont conçus pour émuler une résolution plus grande que la résolution réelle du device (pixels CSS par exemple), ou bien zoomer automatiquement sur un site pour en faciliter l'utilisation par l'internaute. Malheureusement, ces comportements par défaut ne nous arrangent pas, car on souhaite que notre site se comporte différemment sur les supports mobiles, et donc on ne veut pas que le navigateur zoom par exemple.

    Je ne rentrerai pas dans tous les détails qui compose la notion du viewport, mais sachez qu'en général on utilise cette balise :

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

    Ce qui veux dire :

    • force la résolution du viewport à la valeur de la résolution du support
    • ne zoom pas


    Cette balise est à placer dans le <head> de votre page, et elle est obligatoire si vous faites du responsive design.

    Vous trouverez un article détaillé ici : https://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html


  • Media queries

    Les média queries sont des sorte de blocs d'instructions, qui vont vous permettre de redéfinir vos propriétés selon différents paramètres. Il y a pas mal de possibilités avec les media queries, mais nous aborderons ce sujet simplement, avec un device "screen", et des seuils de résolutions en pixels.

    Voici un exemple de media querie :

    @media screen and (max-width: 1280px) {
     p{
      width:100%;
     }
    }

    Voici comment il faut la lire :

    • @media : permet de spécifier qu'on écrit une media querie
    • screen : type de device ciblé : ce paramètre accepte une liste de devices (screen, print, tv, braille, etc...). Donc vous pouvez écrire @media print si vous ciblez une imprimante
    • and : opérateur pour rajouter des paramètres de filtrage à la media querie. Il peut y avoir aussi "not" et "only".
    • (max-width: 1280px) : règle de filtrage à appliquer. Ici toutes les résolutions inférieures à 1280px seront concernées.


    Donc dans notre exemple, tous les paragraphes auront une largeur de 100% pour les résolutions inférieures à 1280px. Et vu que nous sommes dans la "cascade" CSS, cette règle prendra le dessus sur les autres si nous sommes bien dans une résolution inférieure à max-width: 1280px.


    p{
     width:50%
    }
    @media screen and (max-width: 1280px) {
     p{
      width:100%;
     }
    }
    Dans cet exemple, les paragraphes auront une largeur de 50% au dessus de 1280px, et de 100% en dessous.

    Il y a de nombreuses façon d'utiliser les media queries, mais celle que nous venons de voir reste un standard. Vous n'avez qu'a délimiter vos seuils de changement de règles, et l'affichage de votre site s'adaptera aux différentes résolutions. Vous pouvez voir les grands seuils "génériques" dans la partie responsive de votre débugger :

    • entre 320px et 425px : smartphone
    • entre 425px et 768px : tablettes
    • entre 768px et 1440px : laptop
    • plus de 1440px : desktop et TV


    Ces seuils ne sont pas officiels, mais basés sur des statistiques d'utilisation. Ce que vous écrivez à l'intérieur d'une media querie reste du CSS standard, il n'y a pas de restriction particulière. 

    Les media queries servent particulièrement à :

    • augmenter certaines tailles (par exemple les polices)
    • gérer les espacement (faire des gros boutons, par exemple, pour faciliter l'usage avec les doigts sur les smartphone)
    • changer l'agencement de vos blocs (afin qu'ils s'adaptent par exemple à la vue portrait d'un smartphone)
    • cacher ou supprimer des éléments qui n'ont pas leur places sur un petit écran
    • etc...


    Important : les règles CSS qui constituent l'aspect responsive design de votre site vont utiliser les balises HTML, et donc seront intimement liées à la structure HTML de vos pages web. Donc plus vous aurez une structure HTML simple et propre, plus ce sera facile d'appliquer des règles responsive efficaces. C'est pour cette raison que les générateurs de code type Dreamweaver et consors sont à proscrire, ils génèrent des tartines de code HTML pour faire ce que vous souhaitez, et offrent donc une très mauvaise base de travail pour réaliser des améliorations a posteriori.

    Voici des articles plus poussées sur les media-queries : 


  • Astuce

    Vous pouvez optimiser grandement  les performances de votre site grâce aux media queries. Par exemple vous pouvez enlever les grosses images qui pèsent lourd sur votre version desktop pour avoir un site allégé, et donc plus rapide à charger par un smartphone en 2G/3G/...

    Exemple :

    div.banner-img {
     background-image: url(../img/logiciel.jpg);
    }
    @media only screen and (max-width: 475px) {
     div.banner-img {
      background-image: none;
     }
    }
    Dans ce cas la, l'image de fond ne sera jamais appelée sur un device inférieur à 475px, ce qui supprime une requête et diminue le temps de chargement lié au poind de l'image de fond. Vous pourrez vérifier ce genre d'optimisations dans l'onglet "Network" (ou Réseau) de votre inspecteur.

    Conclusion : cette approche prouve que le responsive ne sert pas seulement à améliorer le rendu graphique, mais aussi toute l'optimisation mobile.