La notion de responsive représente la capacité pour un site web à s'adapter quelque soit la taille de l'écran et l'appareil utilisé, et ce sans nécessairement détecter le type d'appareil (ordinateur, tablette, smartphone) ni recharger la page.
Cela permet généralement à l'utilisateur d'accéder exactement au même contenu mais avec l'expérience la plus adaptée à son appareil.
Si par exemple votre site fait normalement 1200px de large, vous n'allez pas lui présenter à cette taille sur un mobile, ça l'obligerait à zoomer pour en voir correctement le contenu.
Avec les moyens techniques liés au responsive, vous allez pouvoir adapter votre design spécifiquement pour des tailles d'écran réduites, à condition bien sûr que votre design ait été pensé de cette façon.
Malgré les moyens techniques à disposition, cela ne veut pas dire que n'importe quel design peut-être facilement adapté à toutes les tailles d'écran.
En responsive, la structure HTML ne changera pas selon la taille d'écran, c'est uniquement le CSS qui adapte votre site (et éventuellement du JavaScript si nécessaire).
Mais améliore l'expérience utilisateur ne se limite pas à la taille de l'écran utilisé.
Sur un mobile par exemple, il sera plus pratique d'avoir une adresse mail directe ou un numéro de téléphone plutôt qu'un formulaire de contact moins pratique à remplir (ou moins direct).
Il faut alors déterminer ce qui est le plus pertinent, voir mettre les deux à disposition en mettant l'un ou l'autre en avant selon la taille de l'écran utilisé.
Il y a de plus en plus d'appareils de diverses tailles qui sortent (les smartphones de grande taille, les smart TV, les smartwatch, etc.), ce qui représente des cibles bien trop nombreuses et diversifiées si vous souhaitez toutes les atteindre.
Le responsive reste donc la solution là moins coûteuse en terme de temps, même si elle est forcément plus longue à appliquer que si on vise une seule catégorie d'appareils.
Elle permet aussi de rendre l'expérience plus agréable et donc généralement d'améliorer la satisfaction de l'utilisateur vis à vis de votre site.
Il existe une technique permettant de concevoir autrement son design : le mobile first.
Cette technique consiste à d'abord penser son site (et donc son design) pour le mobile avec la meilleure expérience possible, puis via les moyens techniques liés au responsive, le rendre tout aussi agréable sur tablette ou surtout ordinateur de bureau.
C'est une technique qui s'avère très efficace pour des sites orientés contenu car elle met généralement en avant celui-ci et c'est ce que cherche l'utilisateur.
Pour des sites plus complexes, avec beaucoup de fonctionnalités ou de l'achat en ligne par exemple, le mobile first n'est souvent pas la bonne solution.
Cette tendance est néanmoins en train de changer pour le e-commerce car il commence à y avoir plus d'achats effectués depuis un mobile que depuis un ordinateur.
Cela sort un peu du contexte du responsive car cela consiste à s'adapter à un navigateur et/ou un type d'appareil en particulier (par exemple Safari sur un iPad), mais c'est tout à fait possible en récupérant la chaîne de caractères qui identifie le navigateur et que l'on appelle user-agent.
Exemple d'user-agent, Safari 9 sur iPad:
Mozilla/5.0 (iPad; CPU OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1
Il y a autant d'user-agent différents qu'il y a de navigateurs, d'appareils de systèmes d'exploitation, d'appareils et de numéro de versions différentes pour chacun d'eux.
À moins de cibler spécifiquement un user-agent, il est recommandé d'utiliser une librairie comme MobileDetect qui permet de détecter les éléments importants dont on a besoin en fonction de l'user-agent : le type d'appareil (bureau, tablette, mobile), le navigateur utilisé et sa version et enfin le système d'exploitation.
L'utilisation de la détection d'user-agent est toutefois à éviter autant que possible car elle n'est pas des plus fiables.
Une autre façon d'adapter ou d'améliorer l'expérience utilisateur consiste à détecter si le navigateur utilisé prend bien en charge les fonctionnalités que l'on souhaite utiliser, comme par exemple les vidéos HTML5, la géolocalisation ou encore certaines propriétés CSS.
Pour cela, il existe une librairie JavaScript appelée Modernizr qui va détecter le support de plusieurs fonctionnalités (HTML, CSS et JS) et ajouter une class CSS spécifique à chaque fonctionnalité sur l'élément <html>.
Cela vous permet notamment d'appliquer des styles différents selon le support de certaines fonctions.
Par exemple, admettons que vous ayez sur votre page un bouton permettant de géolocaliser l'utilisateur. Vous souhaitez cependant afficher ce bouton que si son navigateur supporte la géolocalisation :
.no-geolocation .btn-geoloc {
display: none;
}
.geolocation .btn-geoloc {
/* Tous les styles pour votre bouton. En les appliquant uniquement si le navigateur supporte la géolocalisation, vous évitez d'appliquer des styles inutiles puisque le bouton est ensuite masqué. */
}
La liste de toutes les fonctionnalités et les class associées est disponible dans la documentation de Modernizr. Celui-ci préfixe la class par no- quand le navigateur ne supporte pas la fonctionnalité liée.
Avant d'aborder une solution puissante d'adaptation du design en fonction de la taille d'écran, il peut être utile de récupérer celle-ci en JavaScript.
// en vanilla
window.innerWidth; // largeur
window.innerHeight; // hauteur
// en jQuery
$(window).width(); // largeur
$(window).height(); // hauteur
Cela comprend uniquement la hauteur visible de la fenêtre, sans les barres d'outils ou de défilement, usuellement le contenu.
Dans la majorité des cas, adapter le design revient à appliquer des styles différents selon la taille de l'écran. C'est donc une tâche plus adaptée au CSS qu'au JS.
De plus, appliquer ces styles par le biais de JavaScript risquerait de ralentir leur application et de réduire l'expérience utilisateur.
C'est donc pour cela qu'en CSS il existe les media queries.
Ce sont en quelque sorte des règles sur les propriétés du périphérique utilisé qui vont conditionner les styles à appliquer.
Elles se présentent sous cette forme :
@media (conditions) {
selecteur {
propriété: valeur;
}
}
Ce n'est au final qu'une condition qui entour un ou plusieurs sélecteurs et ses propriétés.
Prenons par un exemple un lien :
On aurait alors le code suivant :
.mycustomlinks {
display: inline-block;
color: blue;
text-decoration: underline;
}
@media (max-width: 1024px) {
.mycustomlinks {
padding: 10px;
}
}
@media print {
.mycustomlinks {
padding: 0;
color: black;
}
}
Ici, quelque soit la cible, on affiche un lien en bleu souligné. Ensuite, si la taille de la fenêtre fait 1024px ou moins, on lui ajoute une marge interne.
Enfin, si on est en train d'imprimer la page, on s'assure que les marges internes sont nulles et on applique une couleur noir aux liens.
Vous remarquerez donc qu'on peut tout aussi bien cibler une taille d'écran, mais aussi un type de media (screen, print, tv…).
Il existe une grande quantité de propriétés utilisable dans les conditions des media queries, que je vous invite à aller consulter sur cette page.
Quand on parle de Responsive, on utilise très souvent le terme breakpoint pour définir les largeurs d'écran à partir desquelles votre design va changer.
Le but n'est pas d'en avoir autant qu'il y a de tailles d'écran différentes, mais simplement les tailles importantes des types d'appareils existants.
Un design bien conçu aura en moyenne 3 breakpoints (cela peut aller jusqu'à 6, mais pas plus) :
Pour ne pas se retrouver dans un cas non géré, on choisit généralement le style par défaut qui s'affichera sans media query.
C'est généralement le desktop qui s'affiche par défaut, mais on peut très bien choisir le mobile : on peut très bien appliquer le mobile first aux media queries.
L'intérêt du mobile first en media queries est souvent d'appliquer les styles les plus minimalistes en premier, puis de surcharger via les media queries selon le type d'appareil.
En effet, il y a souvent d'avantages de styles sur les versions tablette et surtout desktop.
Cela revient alors à penser autrement ses styles et du coup ses conditions.
Sur certains navigateurs, certains appareils ou même selon certaines options d'accessibilité, la taille de police par défaut peut changer.
On a tendance à fixer la taille de police par défaut en px sur nos éléments, mais il est souvent préférable de se baser sur celle du navigateur et d'adapter son design en fonction.
Il existe pour cela l'unité em qui se base sur la taille de la police de caractères.
Parce qu'un exemple vaut mieux qu'un long discours :
/* Ici on fixe la taille du body pour l'exemple, mais on aurait très bien pu mettre 100% comme valeur pour avoir la taille par défaut du navigateur, qui est généralement de 16px, et mieux prendre en compte l'agrandissement éventuel de la taille par défaut */
body {
font-size: 12px;
}
h1 {
font-size: 1.333em; // ~16px
}
h2 {
font-size: 1.250em; // ~15px
}
Il est alors possible d'utiliser cette unité pour tout si on veut s'adapter en fonction de taille de police.
En gardant ce principe, on peut alors appliquer des media queries non pas sur la taille de l'écran en px, mais sur sa taille en em. Ce qui aurait pour effet d'adapter encore mieux l'expérience pour les personnes augmentant ou réduisant la taille de la police.
Partant de ce principe, on pourrait par exemple partir sur 5 breakpoints :
/* Pas de media query : mobile portrait, style par défaut */
@media (min-width: 34em) {
/* ~544px pour 16px de font-size par défaut */
/* Petits écrans: mobile paysage */
}
@media (min-width: 48em) {
/* ~768px pour 16px de font-size par défaut */
/* Ecrans moyens: tablettes */
}
@media (min-width: 62em) {
/* ~992px pour 16px de font-size par défaut */
/* Ecrans larges: desktop */
}
@media (min-width: 75em) {
/* ~1200px pour 16px de font-size par défaut */
/* Ecrans très larges: desktop large */
}
L'unité em a pour particularité de s'adapter à son parent.
Cela signifie que si vous appliquez font-size: 0.5em; aux <li>, si il y a un autre <li> à l'intérieur, son texte sera finalement équivalent à 0.25em si il se basait sur la même taille que son parent.
Ce qu'on voudrait au final, ce serait se baser sur la taille de police du body qui ne changera pas puisque cet élément est unique et parent à tous les autres.
Il existe donc pour cela l'unité rem signifiant root em et faisant donc référence à la taille de police de la base du document.
Cette unité est toutefois inutile dans les media-queries puisque celles-ci n'ont pas de lien de parenté avec un quelconque élément intermédiaire.
Pour reprendre notre exemple, si on avait donc une font-size de 16px par défaut, et que l'on appliquait font-size: 0.5rem; aux <li>, un <li> imbriqué dans un autre aurait alors lui aussi une taille de police de 8px comme son parent, puisque tous deux se baseraient sur la taille de police par défaut.
Sur nos appareils mobiles (smartphones, tablettes) il y a de plus en plus d'écrans haute définition (HDPi, ou Retina qui est une marque déposée par Apple) qui ont une densité de pixels différente à nos écrans habituels.
Cela signifie qu'ils affichent plus de pixels que les écrans ordinaires, mais sur une surface équivalente (ce qui donne cette netteté supérieure).
Vous pouvez donc également être amené à cibler ces écrans via vos media queries.
Il est possible d'utiliser pour cela les propriétés min-pixel-ratio et max-pixel-ratio.
.is-hdpi {
display: none;
}
@media (min-pixel-ratio: 2) {
.is-hdpi {
display: block;
}
}
Ici, on affiche donc les éléments de class is-hdpi uniquement sur des écrans à haute densité de pixels.
Lorsque vous concevez ou développez un site dont le but est d'être consultable sur tous types d'appareils, il y a plusieurs bonnes pratiques à prendre en compte.
Sa chute a démarré avec la sortie de l'iPhone, et Adobe le déconseille désormais depuis peu : il faut éviter tout contenu en Flash sur votre site.
Non seulement la taille de la police doit être adaptée à l'écran (on privilégiera une taille de police plus grande sur des petits écrans), mais également la taille des éléments interactifs (un doigt est moins précis que le pointeur d'une souris, il faut donc des éléments plus grands et bien espacés).
Il est possible de mettre plusieurs sélecteurs et propriétés dans une même média query, il faut donc éviter de mettre une media query pour chaque élément, mais plutôt le minimum possible par CSS.
Sur les appareils mobiles et les tablettes, il faut préciser au navigateur qu'il doit afficher la page avec les dimensions de l'appareil et non les dimensions desktop de la page.
Il faut donc rajouter cette balise html dans la section <head> de votre page, avant tout appel de CSS :
<meta name="viewport" content="width=device-width, initial-scale=1" />
Cela indique alors d'afficher le site avec la largeur d'origine de l'écran, en précisant que le zoom initial est de 1.
Les media queries pourront alors prendre en compte la bonne taille d'écran, et l'utilisateur sera toujours libre de zoomer dans la page si il le souhaite.
Les outils de développements de Firefox et Chrome embarquent un mode de changement de la taille du viewport afin de tester plus facilement son site dans les différentes tailles d'écran et densité de pixel.
Ils ont également une liste prédéfinie de résolutions ou d'appareils correspondant à l'usage courant.
C'est un atout très important pour développer de manière efficace le côté responsive de votre site.
Google a depuis longtemps mis à disposition un outil permettant de tester les performances de son site : Google PageSpeed Insight.
Depuis quelques temps, celui-ci teste indépendamment les performances desktop et mobile, mais également l'expérience utilisateur sur mobile.
Bien que cela puisse être perfectible car non testé par un humain, il relève tout de même les erreurs majeures comme des liens trop petits ou trop rapprochés.
Dans le but d'éviter de réinventer la roue à chaque développement, des Frameworks CSS sont apparus il y a quelques années et contiennent un ensemble de classes prédéfinies pour appliquer des styles que l'on a l'habitude d'utiliser à chaque projet, un peu à la manière du Reset ou Normalize, que ces différents frameworks incluent d'ailleurs généralement.
La plupart des frameworks sont composés de 3 parties majeures : une grille (grid), du style pour les éléments de base (texte, titres, tableaux, formulaires et boutons) et enfin des composants plus avancés (barre de navigation, menu déroulant, pagination, etc.).
Les frameworks sont généralement en OOCSS (CSS Orienté Object) par leur organisation et le nommage des class CSS.
C'est simplement une façon de nommer ses class, de construire ses sélecteurs et d'organiser ses éléments.
.fontSmall[Ces frameworks ont leurs différentes classes généralement groupées en catégories communes:
Un élément important des frameworks est la présence d'une grille (paramétrable selon le framework).
En CSS, cela permet de disposer les différents éléments (blocs) de la page sur une grille qui s'adaptera en fonction de la taille de l'écran (responsive donc).
Admettons que l'on ait 2 colonnes dans notre grille, que l'on affiche le contenu dans la première, et une sidebar dans la seconde.
En mobile, la seconde colonne va alors automatiquement passer sous la première.
Les grilles sont de plus en plus élaborés, et il est alors possible d'ajuster la taille et le passage à la ligne d'une colonne selon des breakpoints établis au niveau de la grille.
Il est donc possible d'avoir un élément qui fasse un tiers de la largeur de la page sur un écran large, tandis qu'il fera la moitié de l'écran sur une tablette, et enfin la totalité de la largeur de l'écran sur un mobile.
Il existe de plus en plus de frameworks CSS, avec plus ou moins d'éléments mis à disposition.
Dans le cas d'une utilisation complète (sans passer par un préprocesseur Sass ou LESS), l'idéal est d'utiliser celui qui est le proche de votre besoin plutôt que "celui qui fait tout" si vous n'en utiliserez que 10% au final.
Parmi tous les frameworks utilisés, Bootstrap est certainement le plus utilisé, et peut-être aussi celui qui a rendu populaire les frameworks de ce type.
C'est sa richesse, sa documentation et sa simplicité d'utilisation qui l'ont aidé à devenir le plus apprécié et utilisé par les développeurs.
Bootstrap est devenu, depuis quelques versions, mobile first.
Toutes les media queries sont basées sur la propriété min-width pour adapter le style à partir d'une largeur minimale du viewport, selon différents paliers (breakpoints).
Le framework se base sur du mobile first, avec des classes en .col-xs- au niveau de la grille, puis 3 breakpoints pour les écrans plus grands, ce qui nous donne :
xs — breakpoint de base, Très petits appareils, Mobiles ( <768px )sm — Petits appareils, Tablettes ( ≥768px)md — Appareils de moyenne taille, Ordinateurs ( ≥992px )lg — Appareils larges, Ordinateurs ( ≥1200px )Via les différents mots-clés associés aux breakpoints et à la grille, il est alors possible d'avoir un rendu différent de la grille pour chaque breakpoint. Dans l'exemple suivant, on va alors avoir :
lg — 3 blocs côte-à-côte ( 50% - 25% - 25% )md — les 2 premiers blocs côte-à-côte, puis le dernier en dessous sur toute la largeur ( 50% - 50% / 100% )sm — le premier bloc en 100%, les deux autres côte-à-côte, l'inverse du breakpoint au dessus ( 100% / 50% - 50% )xs — chaque bloc en 100%, l'un en dessous de l'autre ( 100% / 100% / 100% )La grille étant sur 12 colonnes, on aura donc le nombre de colonnes :
100% — 1250% — 625% — 3<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<!-- Bloc #1 -->
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
<!-- Bloc #2 -->
</div>
<div class="col-xs-12 col-sm-6 col-md-12 col-lg-3">
<!-- Bloc #3 -->
</div>
On peut constater que le nombre de colonnes indiquer sur les différents breakpoints autres que lg dépasse largement les 12 colonnes de la grille, ceci afin de forcer le passage à la ligne au bout de 12 colonnes.
Il reste essentiel de garder 12 colonnes par lignes (ou moins) pour éviter des passages à la ligne indésirables.
Un bloc à 6 colonnes suivi d'un bloc à 7 colonnes nous amène à 13 colonnes, ce qui fait passer les blocs l'un en dessous de l'autre pour une seule colonne.
Container, Row et ColLes classes de colonne col- doivent toujours se trouver dans un bloc de type ligne row.
Cette dernière s'adapte cependant au parent dans lequel elle se trouve et divise donc sa largeur en 12 colonnes.
Il est donc préférable d'utiliser un bloc de type conteneur (container) auquel on va attribuer une largeur (qui peut-être 100% du viewport) puis notre grille à l'intérieur.
Bien que l'on puisse dépasser le nombre de colonnes pour le passage à la ligne, il est préférable de maîtriser le changement de ligne par un nouveau bloc row, en gardant 12 colonnes par ligne.
On peut alors compléter l'exemple précédent :
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<!-- Bloc #1 -->
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
<!-- Bloc #2 -->
</div>
<div class="col-xs-12 col-sm-6 col-md-12 col-lg-3">
<!-- Bloc #3 -->
</div>
</div>
</div>
Bootstrap permet également de réordonner les colonnes. Une technique assez complexe à maîtriser au début, mais qui peut-être très utile ensuite.
Pour simplifier notre exemple, on va partir sur 2 breakpoints seulement : Mobile et Desktop.
Prenons par exemple un simple blog à 2 colonnes, la sidebar à gauche, puis le contenu à droite. Si sur mobile, vos colonnes passent l'une en dessous de l'autre, cela signifie que la sidebar serait en première, puis le contenu.
Or il est préférable d'avoir l'inverse et d'afficher le contenu d'abord sur mobile, pour aller à l'essentiel.
Comme on est en mobile first, cela veut donc dire que l'on fait d'abord la colonne du contenu, puis celle de la sidebar :
<div class="container">
<div class="row">
<div class="col-xs-12">
<!-- Contenu -->
</div>
<div class="col-xs-12">
<!-- Sidebar -->
</div>
</div>
</div>
On commence par mettre les bonnes tailles à nos blocs, col-lg-9 pour le contenu, col-lg-3 pour la sidebar.
Pour inverser leur position, on va alors pousser push le contenu de 3 colonnes, puis tirer pull la sidebar de 9 colonnes.
Cela donne le code suivant :
<div class="container">
<div class="row">
<div class="col-xs-12 col-lg-9 col-lg-push-3">
<!-- Contenu -->
</div>
<div class="col-xs-12 col-lg-3 col-lg-pull-9">
<!-- Sidebar -->
</div>
</div>
</div>
Vous pouvez également forcer l'affichage ou masquer des éléments selon le breakpoint dans lequel vous vous trouvez, via les classes .visible-*-* ou .hidden-*.
La première astérisque dans les deux étant le breakpoint xs, md, etc., le second étant le type de display inline-block, block, inline.
Sur notre exemple précédent, plutôt qu'un col-xs-12 sur la sidebar on aurait donc pu mettre hidden-xs pour masquer la sidebar sur mobile.
Il est également possible d'utiliser les styles prédéfinis pour les boutons, ainsi que les formulaires.
Bootstrap n'applique pas de style par défaut aux différents éléments tant que les classes qui lui sont spécifiques ne sont pas appliquées sur les éléments HTML.
Même avec Bootstrap dans la page, si vous enlevez toutes les classes du code suivant, il n'aura pas du tout le même style.
Et pourtant ce sont ses uniques styles dédiés à ces éléments (à l'exception du bouton qui a plusieurs variantes).
HTML - FORMULAIRE
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
Bootstrap met également à disposition quelques class CSS utiles pour la typographie.
Bien qu'il applique un style particulier à chaque élément de type <h1>, <h2>, etc., il peut parfois être utile d'appliquer le style du <h6> au <h1>.
Dans ce cas là, il ne faut surtout pas remplacer le <h1> par un <h6> puisque cela n'a pas la même signification sémantique, mais simplement utiliser la class à disposition :
<h1 class="h6">.
Le framework ne met pas seulement à disposition des classes, il tente également de styliser des éléments HTML censés être prédisposés à des usages sémantiques spécifiques, comme par exemple <mark> pour surligner du texte, <del> pour marquer du texte comme supprimé ou au contraire <ins> pour du texte inséré, ou encore <strong> pour mettre en avant du texte plus important en gras.
Enfin, il y a également des classes pour l'alignement du texte dans un paragraphe (text-left, text-center, text-right, text-justify, text-nowrap), ou la casse du texte (text-lowercase, text-uppercase, text-capitalize).
Toute la documentation sur la partie Typographie de Bootstrap est disponible sur cette page.
La quatrième version du framework, en version alpha au moment de la rédaction de cette fiche, devrait rester sur les mêmes bases, mais avec une conception différente au niveau CSS.
Les changements principaux apportés par la nouvelle version peuvent être consultés sur cette page qui met en avant les différences.