Le responsive design

Lorsque le web mobile a commencé à se développer avec les premiers smartphones, les entreprises qui souhaitaient adopter le mobile créaient généralement une version mobile spéciale de leur site, avec une URL différente (souvent quelque chose comme m.example.com, ou example.mobi). Cela signifiait qu’il fallait développer deux versions distinctes du site. Outre la lourdeur de gestion de ces systèmes, les sites mobiles de l’époque n’offraient généralement pas à l’utilisateur une expérience de navigation satisfaisante.

Certaines alternatives ont étés testés mais sans offrir une grande satisfaction. Rapidement, il a fallu penser une approche plus novatrice permettant de résoudre l’ensemble de ces problématiques. C’est ce que fit, en 2010, Ethan Marcotte, un designer americain, en définissant les futures règles du Responsive Web Design.

La solution imaginée par Marcotte repose sur 3 principes :

• Les images fluides ;
• Les grilles fluides ;
• Les Media Queries.

Les notions de fluidités sont déjà bien connues puisqu’il s’agit principalement de dimensionner les containers et les media à l’aides d’unités relatives leurs permettant ainsi de s’adapter naturellement à un contexte (la largeur de la fenêtre du navigateur par exemple). Nous nous attarderons donc sur le troisième principe, les Media Queries, pour l’instant moins connu, qui nous permettront de manipuler plus finement notre composition en jouant sur sa structure global, la façon dont les éléments se répartissent dans la page et interagissent les uns avec les autres.

Les Media Queries

De façon générale, les Media Queries correspondent à des styles CSS conditionnels (nous parlerons de requêtes CSS). Disponible depuis la version 2 du CSS, elles permettent de modifier le code CSS en fonction du support sur lequel le contenu sera visualisé. C’est en s’appuyant sur ces règles que nous pouvons, par exemple, modifier un contenu pour son impression sur papier.

Depuis CSS3, de nouvelles fonctionnalités sont venues compléter l’utilisation des Media Queries. Il nous est désormais possible de détecter la largeur d’un écran ou d’une fenêtre et ainsi en modifier la mise en page (augmenter ou réduire le nombre de colonnes, afficher ou masquer certains éléments,…).

Comment ça marche les Medias Queries ?

Les requêtes médias sont historiquement utilisées pour identifier un contexte dans lequel interpréter notre CSS. Ainsi il nous est possible de détecter si il s’agit :

• d’un écran (screen),
• d’ un périphériques mobiles (handheld),
• d’une impression (print),
• d’une synthèses vocales (speech),
• d’une plages braille (braille),
• d’une imprimantes braille (embossed),
• d’un projecteurs (projection)
• d’un téléviseur (tv)
• de tous les précédents (all)

Ces valeurs peuvent être intégrées au sein même d’une feuille de style de la façon suivante :

p{
  color : red;
}

@media print{
  p{
   color : black;
  }
}

Dans cet exemple, nous définissons que l’élément <p> initialement affiché en rouge ( color : red; ) sera affiché en noir ( color : black; ) dans le cas d’une impression.

La philosophie des Media Queries est d’offrir un panel de critères plus vaste et plus précis, à l’aide de propriétés et de valeurs numériques, ainsi que de combinaisons multiples de ces mêmes critères. Le but est de cibler plus finement les périphériques de destination en fonction de leurs capacités intrinsèques.

Nous pourrons donc compléter notre requête à l’aide d’opérateurs logiques :

• and (et) ;
• only (uniquement) ;
• not (non).

De façon générale, nous allons combiner un type de média (screen, all, …) avec une ou plusieurs valeurs numériques à l’aide de ces opérateurs.

Nous pourrons ainsi définir des styles propres à un affichage sur écran dont la largeur sera inférieur à 640px comme présenté dans l’exemple suivant :

p {
    font-size : 16px;
}

@media screen and (max-width: 640px) {
  p {
    font-size : 24px;
  }
}

Nous pourrons également affiner cette règle et définir l’affichage pour les écrans dont la largeur sera comprise entre 200px et 640px :

p {
    font-size : 16px;
}

@media screen and (min-width: 200px) and (max-width: 640px) {
  p {
    font-size : 24px;
  }
}

Media Queries et supports mobiles

Les media queries sont actuellement principalement utilisées pour produire des améliorations spécifiques à l’affichage sur les mobiles (smartphone et tablettes). Ces derniers sont directement concernés par les critères liés à la dimension de l’écran mais également par l’utilisation tactile.

Ainsi, nous trouverons le plus fréquemment des règles pour :

• agrandir la taille du texte
• agrandir la taille des contrôles et zones cliquables (pour une utilisation au doigt)
• faire passer le contenu sur une seule colonne
• masquer ou afficher des éléments spécifiques
• ajuster les dimensions et marges

Il est également bon de rappeler que ces requêtes peuvent également se révéler très utiles pour affiner les affichages sur les écrans d’ordinateurs plus classiques pouvant parfois atteindre des résolutions extravagantes.

C’est dans cette logique que nous pourrons définir différentes requêtes au seins d’une même feuille de style. Nous parlerons de points de rupture.

Dans l’exemple suivant nous trouverons un même élément affiché différemment selon différentes requêtes :

.mon_block {
  width : 50%;
}

/* Small */
@media (min-width: 576px) { 
  .mon_block {
      width : 100%;
  }
}

/* Medium */
@media (min-width: 768px) { 
  .mon_block {
      width : 80%;
  }
}

/* Large */
@media (min-width: 992px) { 
  .mon_block {
      width : 33%;
  }
}

/* Extra large devices */
@media (min-width: 1200px) { 
  .mon_block {
      width : 25%;
  }
}

Dans cet exemple, nous définissons une largeur par défaut de 50% à un élément possédant l’attribut class="mon_block".

• Sur un écran d’une largeur minimum de 576px, il fera une largeur de 100%
• Sur un écran d’une largeur minimum de 768px, il fera une largeur de 80%
• Sur un écran d’une largeur minimum de 992px, il fera une largeur de 33%
• Sur un écran d’une largeur minimum de 1200px, il fera une largeur de 25%

Choisir les points de rupture appliquer ?

C’est là que les choses se compliquent un peu. Il existe un nombre de taille d’écran démesurément énorme ! Nous devrons donc régulièrement redéfinir nos choix en fonctions de statistiques d’utilisateurs, d’évolutions techniques, de frameworks, etc.

De façon générale, nous définirons ces points de rupture comme des moyennes qui pourront varier selon nos besoins et la composition des pages de notre site.

La problématique du web mobile

Rendu à ce stade de notre découverte du responsive design, nous avons compris que les modifications liées aux requêtes média de CSS s’appuyaient majoritairement sur une résolution d’écran donnée en pixel. Lorsque nous contrôlons leur effet sur notre site en redimensionnement simplement la fenêtre de notre navigateur, aucun problème. Oui mais voilà, nos requêtes n’auront peu voir aucun effet sur un smartphone dont la définition ou plus concrètement le nombre de pixels présent dans l’écran s’avère très élevé.

Ce problème est apparut avec les écran Retina d’Apple et s’étend désormais à de nombreux modèles de smartphones et tablettes. Une parade à donc été implémenté à HTML 5. Il s’agit de la balise Meta Viewport.

Qu’est-ce que le viewport

Afin de mieux cerner et exploiter le concept de viewport sur terminaux nomades, il nous faut commencer par maîtriser deux notions de base : la surface réelle et la surface utilisable (en « pixels CSS ») des mobiles.

la surface réelle est le nombre physique de pixels qui composent la matrice physique de l’écran, en gros la « résolution » ou « définition ».

Par exemple, la surface réelle de quelques terminaux Apple :

• 320x480px pour l’iPhone 3
• 640x960px pour l’iPhone 4
• 640x1136px pour l’iPhone 5
• 750×1334 pour l’iPhone 6 (1080×1920 pour l’iPhone 6+)
• 768x1024px pour l’iPad 2
• 1536x2048px pour l’iPad 3, 4, Air

La surface utilisable, également appelée device-width (device-height) ou screen.width (screen.height) ou encore « ça dépend », il s’agit du nombre de pixels virtuels que le terminal pense avoir et sur lequel il fonde son affichage.

• 320x480px pour l’iPhone 3
• 320x480px pour l’iPhone 4
• 320x568px pour l’iPhone 5
• 375×667 pour l’iPhone 6 (414×736 pour l’iPhone 6+)
• 768x1024px pour l’iPad 2
• 768x1024px pour l’iPad 3

L’enjeu est donc de »forcer » notre système à s’appuyer sur la surface utilisable plutôt que sur la surface réelle. Pour ça, HTML5 propose une balise Meta (présente entre <head> et </head>).

La métabalise viewport

Généralement, nous définirons une largeur de viewport égale à la largeur de l’appareil dans le viewport ainsi qu’un niveau de zoom initial égal à 1 et interdirons les utilisateurs de zoomer ou de dézoomer. Nous allons donc utiliser la balise suivante :

<meta name="viewport" content="width=device-width, initial-scale=1,  user-scalable= no">

La propriété width contrôle la taille de la zone d’affichage. Elle peut être définie sur un nombre spécifique de pixels comme width=600 ou sur la valeur spéciale device-width, qui est la largeur de l’écran en pixels CSS à une échelle de 100%. (Il existe des valeurs height et device-height correspondantes, qui peuvent être utiles pour les pages comportant des éléments qui changent de taille ou de position en fonction de la hauteur du viewport).

La propriété initial-scale contrôle le niveau de zoom lors du premier chargement de la page. Les propriétés maximum-scale, minimum-scale et user-scalable contrôlent la manière dont les utilisateurs et utilisatrices sont autorisé·e·s à zoomer ou dézoomer la page.

Pour conclure

Depuis l’apparition des supports mobiles, le responsive design est devenu la norme. Cette approche est prise en compte par Google pour le référencement d’un site. À l’heure où plus de la moitié de la navigation web se fait depuis un mobile ou une tablette, mettre ce mode de conception de côté devient presque une faute professionnelle. De plus en plus de designers orientent d’ailleurs leur travail UX/UI en appliquant la logique du Mobile First, c’est à dire en priorisant l’ergonomie mobile pour l’adapter par la suite aux écrans d’ordinateurs classiques. Cette logique peut également être appliquée à la phase d’intégration en partant du plus petit pour aller au plus grand.