Responsive design

Le web responsive : Définition et pratiques

Mais c’est quoi le web responsive ?

Tout d’abord je vous propose un rapide récapitulatif de ce qu’est une intégration responsive.
Il y a plusieurs années nous pouvions voir des choses du genre « site optimisé pour les résolutions 800 x 600px » et puis le « standard » de résolution a évolué avec des écrans muni d’une résolution de plus en plus importante.
Le problème est apparut avec l’arrivée des smartphones et tablettes qui ont des résolutions forcément bien différentes de ce que nous pouvons avoir sur nos écrans d’ordinateurs.
Le design et intégration responsive est donc une manière de créer un design et une manière de l’intégrer pour être compatible avec la majorité des appareils pouvant afficher votre site.

Mais comment on fait pour être compatible avec tous les appareil ?

En fait c’est assez simple, nous allons utiliser les CSS : Media Queries. Les Media Queries nous servaient déjà pour faire des feuilles de styles spéciales pour l’impression.

Nous allons utiliser le même concept sauf que nous allons pouvoir spécifier beaucoup plus d’éléments tels que la taille d’écran, l’orientation (portrait ou paysage pour les mobiles), la largeur de la fenêtre de votre navigateur et bien d’autres.

 

Voici un exemple simple de ce que cela peut donner en css :

.contenaire{
width:960px;
border:1px solid #ff0000;
}
@media screen and (max-width: 800px) {
.contenaire{
width: 760px;}
}

Nous donnons une largeur de 960px et une bordure de 1px rouge à notre DIV qui a la classe contenaire.
Ensuite nous déclarons grâce à la ligne @media… que le style suivant doit se mettre en place si ma page fait 800px ou moins.
Nous avons seulement besoin de changer ou ajouter les styles qui nous intéressent pour ce type d’écran, nous n’avons donc pas besoin de remettre le style de la bordure car il a été déclaré précédemment.

Voici un autre exemple si vous voulez appeler une feuille de style différente :

link rel="stylesheet" media="screen and (max-width: 800px)" href="petit-ecran.css"

Dans cet exemple nous appelons la feuille de style « petit-ecran.css » si la largeur de la fenêtre fait moins de 800px.
Voilà ce n’est pas plus compliqué que cela.

Mais sur quelles CSS: Media Queries peut-on intervenir ?

color : support de la couleur (bits/pixel)

color-index : périphérique utilisant une table de couleurs indexées

aspect-ratio : ratio du périphérique de sortie (par exemple 16/9)

device-aspect-ratio : ratio de la zone d’affichage

device-height : dimension en hauteur du périphérique

device-width : dimension en largeur du périphérique

width : dimension en largeur de la zone d’affichage

height : dimension en hauteur de la zone d’affichage

orientation : orientation du périphérique (portrait ou paysage)

resolution : résolution du périphérique

scan : type de balayage des téléviseurs

grid : périphérique bitmap ou grille (ex : lcd)

monochrome : périphérique monochrome ou niveaux de gris

Il est bien sur possible de combiner plusieures conditions comme ci-dessous :

@media screen and (max-width: 400px), screen and(device-aspect-ratio: 16/9) {
.contenaire{
width: 360px;
}
}

Dans cet exemple, notre largeur de 360px s’appliquera pour une fenêtre faisant 400px ou moins de large ou si l’écran est au format 16/9.

Mais qu’est ce que ça donne dans la pratique ?

Dans la pratique nous allons donc pouvoir par exemple changer les largeurs de colonnes de notre site ou faire passer une colonne en dessous de l’autre si l’écran est plus petit que la valeur que l’on a défini. Cela va donc grandement nous servir pour l’affichage de notre site sur un mobile ou une tablette.

Cela n’est donc pas compliqué à mettre en place mais il faut bien sur y penser lors du design du site ainsi que lors de l’intégration de celui-ci.
Les principales règles sur lesquelles nous allons opérer sont les suivantes :

  • Agrandir la taille des zones cliquables pour la navigation au doigt ce qui permet une meilleure ergonomie pour les mobi-nautes et utilisateurs de tablettes.
  • Ajuster les dimensions des colonnes de votre site.
  • Masquer certains éléments ou en afficher d’autres.
  • Faire passer des colonnes l’une en dessous de l’autre (par exemple lorsque l’on change l’orientation de son portable ou tablette)
  • Agrandir la taille du texte.

Il existe bien sur énormément d’autres possibilités, ce ne sont que les principales que vous aurez besoin d’utiliser selon moi.

Mais par quels navigateurs les CSS : Media Queries sont reconnus ?

Comme à son habitude, Internet explorer nous posera problème dans ses versions 7 et 8 mais il existe des alternatives en javascript comme un plugin jQuery (MediaQueries) ou bien une librairie javascript (Respond.js) qui permettent d’utiliser les media Queries.

Voici la liste des navigateurs compatibles :

  • Internet explorer 9 et +
  • Mozilla firefox 3.5 et +
  • Google chrome 5 et +
  • Opera 10.5 et +, Opera mobile 10 et +, Opera mini 5 et +
  • Apple safari 4 et + et iOS 3.2 et +
  • Android 2.1 et +

Quelques ressources utiles

HTML, Web-design

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *