26. Responsive Design

Le premier navigateur web moderne pour les smartphones a été présenté en 2007 avec le premier iPhone. Auparavant l’accès aux sites web depuis un appareil mobile était très limité et très peu optimisé.

Le premier iPhone. Image: Apple

Ce qui a commencé avec un seul appareil s’est développé en quelques années pour devenir un énorme marché avec d’innombrables smartphones et tablettes différents. Les sites web initialement optimisés pour un ordinateur de bureau ou portable devaient soudain pouvoir gérer des dizaines de tailles d’écran et de doigts au lieu de pointeurs de souris. Le design réactif est né.

Dans le domaine du développement, “Responsive” signifie “réactif”. La programmation du site web est capable de reconnaître quel navigateur, quel système d’exploitation et/ou quelle résolution d’affichage est utilisé par l’utilisateur et peut y réagir. Concrètement, cela signifie que différents affichages sont possibles en fonction des détails de l’appareil détecté.

Une étape importante dans la conception et la réalisation d’un site web réactif est la planification: comment le site et sa mise en page doivent-ils se comporter de manière responsive ?

(unités relatives) Unités relatives

Vous vous souvenez sans doute du chapitre unités de mesure. Il apparaît maintenant clairement pourquoi vous devez utiliser des unités relatives aussi souvent que possible dans votre mise en page. Les valeurs statiques entraînent de nombreux inconvénients ou beaucoup de travail supplémentaire si vous voulez que votre site web soit réactif.

Image FROONT

# Responsive & Adaptive

Alors qu’un site web responsive s’adapte généralement de manière “fluide” à la taille de l’écran, un site web adaptatif se compose généralement de deux (ou plus) mises en page fixes qui sont appliquées en conséquence en fonction de l’écran.

Image FROONT

Il existe des sites web qui ont une version mobile et une version desktop, mais c’est l’exception. En gros, il s’agit de deux sites complètement différents qui sont généralement accessibles sur des domaines différents également. Citons par exemple fr.wikipedia.org et fr.m.wikipedia.org . Cela n’a généralement de sens que pour des projets très complexes, par exemple pour améliorer les temps de chargement ou l’expérience de l’utilisateur.

# Mobile first ou desktop first

Avec l’essor des smartphones et des tablettes, de nombreux utilisateurs n’utilisent plus d’ordinateurs de bureau traditionnels. En tant que concepteur, vous devez donc toujours vous demander si le public principal de votre site web est plus susceptible d’accéder à votre site avec un desktop ou un mobile.

Ces dernières années, l’initiative “mobile first” a pris beaucoup d’ampleur, ce qui signifie qu’il faut donner la priorité à la conception des appareils mobiles. Cela implique de conceptualiser et de concevoir d’abord pour les smartphones, puis de n’optimiser que pour les grands écrans dans un deuxième temps. Avec “desktop first”, c’est l’inverse. Le choix du concept qui a du sens dépend du public cible et de l’objectif de votre site web.

Image FROONT

# Breakingpoints

Les Breakingpoints vous permettent de modifier la mise en page lorsque la taille de l’écran dépasse une certaine largeur en point. Par exemple, trois colonnes sur desktop peuvent se décomposer en une seule colonne sur un smartphone. L’endroit où vous devez fixer ces points d’arrêt (breakpoint) dépend de votre contenu.

Image FROONT

Note

Non seulement le fait de simplifier une mise en page peut améliorer l’ergonomie (usability), mais aussi le fait d’ajuster l’espacement. Avec une souris d’ordinateur, vous pouvez sélectionner des zones minuscules avec précision. Avec le pouce sur votre smartphone, c’est plus difficile. Veillez donc toujours à ce que les objets soient suffisamment espacés les uns des autres pour qu’ils soient faciles à utiliser.

# Breakpoints avec des Media Queries

Les requêtes de médias sont définies dans votre feuille de style CSS et déterminent quelles instructions CSS doivent être appliquées à différentes tailles d’écran. Vous définissez les règles applicables à une taille d’écran minimale et/ou maximale. Les requêtes des médias ont toujours la spécificité la plus élevée dans votre CSS. Cela signifie qu’ils peuvent passer outre d’autres styles CSS et sont considérés comme plus importants par le navigateur.

    /* Au moins 700px de large */
    @media (min-width: 700px) { 
      /* Vos styles CSS */
      p {
          color: red;
      }
    }
    
    /* max-width : 700px */
    @media (max-width : 700px) { 
      /* Vos styles CSS */
    }
    
    
    /* Requête des médias pour l'impression */
    @media print {
      /* Cacher l'en-tête lors de l'impression */
      header {
        display:  none;
      }
    }

Liens connexes

Mozilla - Utilisation des requêtes média

# Breakpoints without media queries

:hammer_pick: Responsive

Maintenant que vous connaissez les bases du Responsive Design, vous pouvez ajuster votre porfolio en conséquence.

Note

Pour garder une trace de vos nouveaux styles, vous devez les enregistrer dans un fichier responsive.css séparé. Enregistrez-les également dans le dossier “css” et ajoutez-les avec une balise “link” sous votre fichier “style.css” dans le dossier “index.html”.

    <!-- index.html -->
    <!-- ajouter le fichier responsive.css dans le <head> sous le style.css -->
    <link rel="stylesheet" type="text/css" href="css/responsive.css">

Une fois que vous avez créé ce fichier et que vous l’avez lié dans le HTML, vous pouvez y placer les styles suivants :

    /* mediaqueries jusqu'à environ 960px de largeur d'écran */
    @media (max-width : 700px) {
    
    }
      

:hammer_pick: Contrôle

Comme toujours, vous devez maintenant vérifier le résultat dans le navigateur.

Note

Utilisez les Outils pour les développeurs pour simuler un appareil mobile. Il ne suffit pas de réduire la fête pour vérifier le résultat.

Si tout est correct, votre portefeuille devrait maintenant ressembler à ceci selon le modèle :

Faites défiler l’image ou visualisez la page sur l’invention

Relever les défis

#25 Hamburger Menu (Ajouter un menu contextuel pour les smartphones).