Responsive Web Design
conception de sites web adaptatifs
Introduction
Le Responsive Design répond à la problématique d’une nouvelle utilisation du web.
Alors qu’auparavant, on consultait un site depuis son ordinateur, on utilise aujourd’hui d’autres supports. En quelques années, le nombre d’appareils et de résolutions servant à consulter des sites web ont tout simplement explosé : ordinateurs, Smartphones, tablettes, web TV, format portrait, paysage, etc.
Le problème est qu’on ne peut pas, ou du moins ce ne serait pas très pratique, développer autant de versions d’un site qu’il y a de résolutions différentes. La solution à ce problème grandissant s’est donc imposée d’elle-même : le Responsive Design (conception de sites web adaptatifs).
Alors qu’auparavant, on consultait un site depuis son ordinateur, on utilise aujourd’hui d’autres supports. En quelques années, le nombre d’appareils et de résolutions servant à consulter des sites web ont tout simplement explosé : ordinateurs, Smartphones, tablettes, web TV, format portrait, paysage, etc.
Le problème est qu’on ne peut pas, ou du moins ce ne serait pas très pratique, développer autant de versions d’un site qu’il y a de résolutions différentes. La solution à ce problème grandissant s’est donc imposée d’elle-même : le Responsive Design (conception de sites web adaptatifs).
Caractéristiques - Les media queries CSS3
La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML. On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS.
Ces bonnes pratiques permettent d'exploiter encore plus les avantages de la séparation du contenu et de la présentation : l'intérêt est de pouvoir satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité d'un site web.
Ces bonnes pratiques permettent d'exploiter encore plus les avantages de la séparation du contenu et de la présentation : l'intérêt est de pouvoir satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité d'un site web.
Approche historique
Avec CSS2 et HTML4, il était déjà possible de spécifier un média de destination pour l'application d'une ou plusieurs feuilles de style. C'est ainsi que l'on a pu associer des règles CSS complémentaires pour l'impression, modifiant la mise en page, favorisant tel élément ou faisant disparaître un autre inutile à la sortie sur papier, par exemple un menu de navigation. La balise <link> est alors dupliquée pour autant de feuilles de style que nécessaire, et comporte un attribut media précisant le contexte dans lequel les styles doivent être appliqués :
<!doctype html>
<head>
<meta charset="utf-8">
<title>Media Queries !</title>
<link rel="stylesheet" media="screen" href="screen.css" type="text/css" />
<link rel="stylesheet" media="print" href="print.css" type="text/css" />
</head>
<body>
...
</body>
L'attribut media peut prendre (depuis CSS2) les valeurs suivantes :
Screen (écrans)
Handheld (périphériques mobiles ou de petite taille)
Print (impression)
Aural (CSS 2.0) / speech (CSS 2.1) (synthèses vocales)
Braille (plages braille)
Embossed (imprimantes braille)
Projection (projecteurs ou présentations avec slides)
Tty (terminal, police à pas fixe)
Tv (téléviseur)
All (tous les précédents)
Une impression braille (embossed)
Ces directives peuvent parfaitement être intégrées au sein même d'une feuille de style grâce à une règle @media suivie directement du type. La syntaxe sera alors légèrement différente :
@media print {
#menu, #footer, aside {
display:none;
}
body {
font-size:120%;
color:black;
}
}
Note : d'autres variantes peuvent exister avec la règle @import, cependant celle-ci pose quelques problèmes de performance sur d'anciens navigateurs et se voit ignorée lorsqu'elle est utilisée en combinaison avec les media queries sur Internet Explorer versions inférieures à 8.
Or, les médias peuvent être très variés, surtout en ce qui concerne les écrans. De surcroît, tout dépend du support de l'interprétation de ces définitions. Rien n'oblige un périphérique ou un navigateur à appliquer ce qui semblerait le plus indiqué. Par exemple, la règle media handheld est ignorée par la grande majorité des navigateurs mobiles, y compris par Safari Mobile sur iOS qui se considère comme un média screen.
Or, les médias peuvent être très variés, surtout en ce qui concerne les écrans. De surcroît, tout dépend du support de l'interprétation de ces définitions. Rien n'oblige un périphérique ou un navigateur à appliquer ce qui semblerait le plus indiqué. Par exemple, la règle media handheld est ignorée par la grande majorité des navigateurs mobiles, y compris par Safari Mobile sur iOS qui se considère comme un média screen.
Syntaxe des Media Queries CSS3
La philosophie des Media Queries (ou requêtes de media) en CSS3 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.
L'écriture de ces requêtes est relativement explicite : une media query est une expression dont la valeur est toujours vraie ou fausse. Il suffit d'associer les différentes déclarations possibles avec un opérateur logique pour définir l'ensemble des conditions à réunir pour l'application des styles compris dans le bloc adjacent.
Les opérateurs logiques peuvent être :
And (et)
Only (uniquement)
Not (non)
Pour obtenir l'équivalent du "ou", il suffit d'énumérer différentes media queries à la suite, séparées par des virgules : si l'une d'entre elles est valable, alors l'ensemble de la règle sera appliquée.
En général, on combine ensemble un type de média (screen, all...) et une expression grâce à and, bien qu'une expression seule puisse être utilisée. L'expression est toujours écrite entre parenthèses.
Les deux exemples suivants ciblent les écrans de largeur inférieure à 640 pixels grâce à la règle max-width associée à la valeur 640px.
En général, on combine ensemble un type de média (screen, all...) et une expression grâce à and, bien qu'une expression seule puisse être utilisée. L'expression est toujours écrite entre parenthèses.
Les deux exemples suivants ciblent les écrans de largeur inférieure à 640 pixels grâce à la règle max-width associée à la valeur 640px.
<link rel="stylesheet" media="screen and (max-width: 640px)" href="smallscreen.css" type="text/css" />
@media screen and (max-width: 640px) {
.bloc {
display:block;
clear:both;
}
}
Les combinaisons peuvent être multiples. Ici l'on s'adresse à un écran dont la résolution en largeur est comprise entre 200 et 640 pixels :
@media screen and (min-width: 200px) and (max-width: 640px) {
.bloc {
display:block;
clear:both;
}
}
Fonctionnalités
La plupart des critères (ou fonctionnalités) peuvent être préfixés par min- et max- lorsqu'elles acceptent des valeurs numériques pour définir des valeurs minimales ou maximales à respecter.
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)
Grid (périphérique bitmap ou grille, par exemple lcd)
Height (dimension en hauteur de la zone d'affichage)
Monochrome (périphérique monochrome ou niveaux de gris, bits/pixel)
Orientation (orientation du périphérique, portait ou paysage)
Resolution (résolution du périphérique)
Scan (type de balayage des téléviseurs, progressive ou interlace)
Width (dimension en largeur de la zone d'affichage)
Les dimensions pourront être évaluées avec des unités (px, em). Les ratio avec des fractions (entier/entier). Une résolution sera définie en dpi (points par pouce) ou en dpcm (points par centimètres).
Certaines de ces propriétés peuvent être testées d'une façon raccourcie sans valeur, par exemple (color) qui sera équivalent à (min-color: 1) ou considérée comme vraie pour une valeur différente de 0. La fonctionnalité monochrome n'est pas uniquement booléenne avec la syntaxe raccourcie (monochrome), on peut aussi considérer un nombre de niveaux de gris, par exemple (min-monochrome: 2) pour 2 bits par pixel.
Certaines de ces propriétés peuvent être testées d'une façon raccourcie sans valeur, par exemple (color) qui sera équivalent à (min-color: 1) ou considérée comme vraie pour une valeur différente de 0. La fonctionnalité monochrome n'est pas uniquement booléenne avec la syntaxe raccourcie (monochrome), on peut aussi considérer un nombre de niveaux de gris, par exemple (min-monochrome: 2) pour 2 bits par pixel.
Concevoir les gabarits
Une fois les groupes d’appareils identifiés, il faut prévoir comment les pages s’agenceront pour chacun d’eux.
Commencez par la version mobile, la conception se focalisera sur l'essentiel car il n'y a pas suffisamment de place pour le superflu. Les versions plus spacieuses bénéficieront des choix opérées pour la version mobile.
Il est impératif de concevoir le site avec une grille et des blocs. Cette conception modulaire permet de recomposer la page selon la largeur de l’écran. Le maquettage papier de l’interface ce prête bien à cette exercice : on manipule librement les contenus pour les repositionner ou les laisser de coté.
Les blocs doivent être cohérents en termes de contenu. Cela évitera d’éclater l’information en passant d’un appareil à un autre. Une fois constitués, ces blocs seront déplacés, allégés ou même supprimés selon la résolution.
Commencez par la version mobile, la conception se focalisera sur l'essentiel car il n'y a pas suffisamment de place pour le superflu. Les versions plus spacieuses bénéficieront des choix opérées pour la version mobile.
Il est impératif de concevoir le site avec une grille et des blocs. Cette conception modulaire permet de recomposer la page selon la largeur de l’écran. Le maquettage papier de l’interface ce prête bien à cette exercice : on manipule librement les contenus pour les repositionner ou les laisser de coté.
Les blocs doivent être cohérents en termes de contenu. Cela évitera d’éclater l’information en passant d’un appareil à un autre. Une fois constitués, ces blocs seront déplacés, allégés ou même supprimés selon la résolution.
Voyez comment le site Think Vitamin se recompose entre la version classique et mobile :
La hiérarchie de l’information joue ici un rôle important. Il est nécessaire d’identifier les contenus qui seront prioritaires en fonction des appareils : la barre latérale a-t-elle toujours un rôle sur mobile ? Le header peut-il être minimisé, voire disparaître ? Faut-il mieux arriver sur la page par le contenu et proposer une navigation secondaire en fin de page ? Il ne s’agit pas simplement d’empiler ces boîtes les unes au dessus des autres dans une colonne unique pour les résolutions mobiles, mais d’évaluer la pertinence du contenu en fonction du contexte.
Il faut simplifier la navigation, alléger le contenu, minimiser les images. L’e-reader avec affichage en niveaux de gris doit aussi offrir une restitution convenable du site. Le Responsive Design doit donc être appliqué dans cette idée.
Clean Air Works adapte son menu de navigation sous forme de boutons adaptés au tactile :
Les ajustements de positionnement : libérez de la place !
En général, une page web se compose : un en-tête (parfois avec divers liens), un corps avec une barre latérale, une partie principale et un pied de page :
Le but du Responsive Design consiste surtout à réarranger les différents éléments de façon à ce que le rendu sur petits écrans reste lisible, le placement de la barre latérale ailleurs (souvent en ligne, au dessus ou au dessous de la partie centrale)
Réduction des marges (margin, padding)
Remplacement des largeurs fixes par des largeurs relatives (100% ou 98% avec une marge de 1% pour centrer le tout sans coller sur les côtés)
Pour les images : ne pas utiliser de largeurs et hauteurs en pixels (pouvant dépasser de leur cadre) mais utiliser ceci :
width: 100%; height: auto;
Ainsi, les images occuperont la largeur complète et la hauteur sera adaptée de façon à conserver les proportions.
Les menus déroulants seront déroulés, ou supprimés.
Un effet de survol (: hover) n’est pas utilisable sur un écran tactile.
Un effet de survol (: hover) n’est pas utilisable sur un écran tactile.
Les ajustements de décors
Maintenant que les éléments sont positionnés on peut modifier les styles de décoration. On effectuera par exemple ce genre de modifications :
Adaptation de la taille de police. Vu que le contenu peut être zoomé
User-scalable=yes
Il n’est en général pas nécessaire d’adapter la taille de police pour chaque type d’écran : les navigateurs mobiles ont des règles et des styles qui suffisent en théorie à faire un rendu lisible de la page.
Au service des mobiles
Dans la majorité des cas, on utilise les media queries pour produire des améliorations spécifiques à l'affichage sur les mobiles, qui sont directement concernés par des critères sur les dimensions de l'écran (en terme de résolution et d'espace disponible) et sur l'utilisation tactile. Les périphériques sous iOS (iPhone, iPod, iPad...) supportent relativement bien les media queries.
La fonctionnalité orientation a été introduite pour des périphériques pouvant être orientés, par exemple l'iPad. On peut alors déclarer une feuille de style spécifique pour ajuster l'affichage :
La fonctionnalité orientation a été introduite pour des périphériques pouvant être orientés, par exemple l'iPad. On peut alors déclarer une feuille de style spécifique pour ajuster l'affichage :
<link rel="stylesheet" media="(orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation:landscape)" href="paysage.css">
Certains navigateurs classiques l'implémentent également en version bureau et calculent le ratio hauteur/largeur pour simuler un affichage "orienté".
Autres exemples:
Impression sur un support plus large que 5 pouces
print and (min-width: 5in)
Ecrans possédant un ratio 16/9 ou 16/10
tv, (device-aspect-ratio: 16/9), (device-aspect-ratio: 16/10)
Support et alternatives
Les navigateurs sont inégaux face aux media queries, mais cela tend à s'améliorer:Mozilla Firefox : 3.5+
Internet Explorer : 9+
Google Chrome : 5+
Opera : 10.5+, Opera Mobile : 10+, Opera Mini : 5+
Apple Safari : 4+ et iOS (mobile) 3.2+
Android : 2.1+
WebKit en général
Globalement, si un navigateur ne les supporte pas du tout, il continuera à appliquer la règle concernant le type de média qui figure en début de chaîne.
<link rel="stylesheet" media="screen and (max-width: 640px)" href="smallscreen.css" />
On peut choisir d'exclure tous ceux ne supportant pas les media queries en utilisant comme préfixe de déclaration l'opérateur only.
<link rel="stylesheet" media=" only screen and (color)" href="styles.css" />
Le retardataire le plus marquant est encore une fois Internet Explorer. Il existe quelques alternatives en JavaScript néanmoins pour ce navigateur et les plus anciens, telles que des plugins jQuery (MediaQueries) ou une librairie JavaScript nommée Respond.js qui apporte un support minimaliste des media queries par la lecture de la feuille de style et des propriétés du document HTML pour IE 6 à 8, Firefox 1 à 3 et Safari 2.
Avantages du Responsive Design
Cette technique permet d'offrir plus de réactivité au site web qui s'adapte alors aux différentes résolutions d'écrans disponibles. Cela permet d'universaliser l'affichage d'un site web en utilisant les nouvelles règles et propriétés de CSS3 acceptées par la grande majorité des navigateurs.
Les colonnes et les images s'ajustent, se redimensionnent et se déplacent automatiquement selon que la résolution d'écran l'exige. Cette technique permet une ergonomie optimale en sauvegardant intacte la qualité de l'information du site web.
Avec le Responsive Design, plus de souci de redirection de lien. Une fois mis en place, il y a très peu de maintenance à réaliser et le coût de développement est plus intéressant qu'un site mobile spécialisé.
Avec le Responsive Design, c'est l'assurance d'une URL unique : parfait pour les campagnes de promotion. On n'ignore pas notamment l'intérêt crucial dans le secteur commercial. En effet, le non ajustement du site au support de navigation peut affecter grandement l'expérience achat du “mobinaute“.
Le lien unique avec le site original permet au support mobile de respecter la même structure d'information que le site complet réduisant par la même le temps nécessaire d'adaptation au nouveau format. Le site s'affiche automatiquement en fonction de l'écran sans demander de quelle manière l'utilisateur souhaite naviguer.
Avec le Responsive Design, c'est l'assurance d'une URL unique : parfait pour les campagnes de promotion. On n'ignore pas notamment l'intérêt crucial dans le secteur commercial. En effet, le non ajustement du site au support de navigation peut affecter grandement l'expérience achat du “mobinaute“.
Le lien unique avec le site original permet au support mobile de respecter la même structure d'information que le site complet réduisant par la même le temps nécessaire d'adaptation au nouveau format. Le site s'affiche automatiquement en fonction de l'écran sans demander de quelle manière l'utilisateur souhaite naviguer.
Inconvénients du Responsive Design
Si les avantages sont nombreux, on distingue tout de même certains inconvénients.
Le temps de téléchargement est plus long
Il faut sans cesse faire attention au temps de chargement, à ne pas laisser d’éléments invisibles ou de scripts inutilisés. Il ne faut pas oublier que les gens sont impatients ! Si votre site met trop de temps à charger sur un appareil mobile, il y a de fortes chances qu’il ne se charge jamais dû à un signal réseau trop faible ou à un manque de mémoire.
Plus de connaissances, plus de technique
Pour faire du Responsive Design, il y a beaucoup de choses à connaître car il ne suffit pas de connaître les media-queries CSS3 sur le bout des doigts ainsi qu’une ou deux astuces. On est souvent confronté aux spécificités de certaines plates formes.
Plus de code, plus de mises à jour
Pour adapter le contenu et la mise en page à la majorité des supports, il faut plus de code ce qui entraîne donc des temps de mises à jour plus élevés…
Le cas des images
La question des images à redimensionner ou à cacher est délicate. Il ne faut pas pour autant perdre la force du concept et il faut que le site se charge vite… Redimensionner des images consomme plus de performance CPU* et de mémoire.
*Central Processing Unit “Unité centrale de traitement“ est le composant de l'ordinateur qui exécute les programmes informatiques.
Responsive Design et le référencement*
Concernant le référencement de site Responsive Design, cela ne génère aucun problème. C'est l'option idéale si l'on souhaite proposer son site sous différentes versions. Les prévisualisations d'images d'une certaine largeur dans les pages de résultats d'un moteur de recherche représentent un atout considérable pour le référencement naturel.
L’indexation est bien meilleure avec le Responsive Design, ce dernier s'adaptant à tous les supports d'affichage.
De plus, sachant que chaque page du site à une adresse unique peu importe la version, les liens entrants se dirigent tous vers une même URL facilitant le référencement. Cela permet de réaliser des économies d'échelles considérables puisqu'une seule modification est alors nécessaire.
* Faire un lien d'une page A vers une ressource B, c'est y faire référence et donc référencer la ressource B depuis la page A.
Le temps de téléchargement est plus long
Il faut sans cesse faire attention au temps de chargement, à ne pas laisser d’éléments invisibles ou de scripts inutilisés. Il ne faut pas oublier que les gens sont impatients ! Si votre site met trop de temps à charger sur un appareil mobile, il y a de fortes chances qu’il ne se charge jamais dû à un signal réseau trop faible ou à un manque de mémoire.
Plus de connaissances, plus de technique
Pour faire du Responsive Design, il y a beaucoup de choses à connaître car il ne suffit pas de connaître les media-queries CSS3 sur le bout des doigts ainsi qu’une ou deux astuces. On est souvent confronté aux spécificités de certaines plates formes.
Plus de code, plus de mises à jour
Pour adapter le contenu et la mise en page à la majorité des supports, il faut plus de code ce qui entraîne donc des temps de mises à jour plus élevés…
Le cas des images
La question des images à redimensionner ou à cacher est délicate. Il ne faut pas pour autant perdre la force du concept et il faut que le site se charge vite… Redimensionner des images consomme plus de performance CPU* et de mémoire.
*Central Processing Unit “Unité centrale de traitement“ est le composant de l'ordinateur qui exécute les programmes informatiques.
Responsive Design et le référencement*
Concernant le référencement de site Responsive Design, cela ne génère aucun problème. C'est l'option idéale si l'on souhaite proposer son site sous différentes versions. Les prévisualisations d'images d'une certaine largeur dans les pages de résultats d'un moteur de recherche représentent un atout considérable pour le référencement naturel.
L’indexation est bien meilleure avec le Responsive Design, ce dernier s'adaptant à tous les supports d'affichage.
De plus, sachant que chaque page du site à une adresse unique peu importe la version, les liens entrants se dirigent tous vers une même URL facilitant le référencement. Cela permet de réaliser des économies d'échelles considérables puisqu'une seule modification est alors nécessaire.
* Faire un lien d'une page A vers une ressource B, c'est y faire référence et donc référencer la ressource B depuis la page A.
Conclusion
Le Responsive Design est sans nul doute une évolution du webdesign plus que nécessaire à l’heure où notre façon de naviguer et d’interagir avec le monde connecté se transforme.
Il est une solution efficace afin d'offrir une expérience utilisateur en adéquation avec l'usage souhaité. C'est une évolution majeure du web design invitant les concepteurs à un nouveau défi ergonomique et assurant aux utilisateurs une expérience enrichie. Pour ce qui est des inconvénients dégagés par cette technique, cela implique plus d'investissement au niveau de la conception et du développement du site.
Il est une solution efficace afin d'offrir une expérience utilisateur en adéquation avec l'usage souhaité. C'est une évolution majeure du web design invitant les concepteurs à un nouveau défi ergonomique et assurant aux utilisateurs une expérience enrichie. Pour ce qui est des inconvénients dégagés par cette technique, cela implique plus d'investissement au niveau de la conception et du développement du site.
Ressources
http://fr.wikipedia.org/wiki/Responsive_Web_Designhttp://www.w3.org/TR/CSS21/media.html
http://www.w3.org/TR/css3-mediaqueries/http://www.alsacreations.com/article/lire/930-css3-media-queries.html
http://designspartan.com/info_generale/responsive-design-definition-fonctionnement-ressources-et-tutoriels/
http://www.ergonomie-interface.com/conception-maquettage/responsive-webdesign-adapter-resolutions/
http://lehollandaisvolant.net/index.php?d=2012/11/24/20/37/08-css-faire-un-theme-mobile-avec-html5-et-responsive-design
http://lehollandaisvolant.net/index.php?d=2012/11/24/20/37/08-css-faire-un-theme-mobile-avec-html5-et-responsive-design
http://www.commentcamarche.net/faq/34876-responsive-design-avantages-et-inconvenients
0 commentaires:
Enregistrer un commentaire