S’il y a bien un terme qui revient beaucoup en ce moment dans le monde du développement web, c’est celui de “responsive design” qu’on retrouve un peu partout sur la toile.
Cette technologie gagne a pourtant à être connue. Voyons cela en détail.
Dans le cadre de la veille que je réalise régulièrement dans le domaine du développement, mais également dans le cadre de projets personnels que j’ai menés récemment, j’ai été amené à découvrir et à utiliser cette nouvelle notion, apparue avec l’essor de la technologie CSS3.
C’est l’occasion pour moi de vous parler du responsive design au travers de ce tutoriel mais également par le biais d’une seconde vidéo que j’ai réalisée (suite à vos retours positifs qui m’ont encouragé à poursuivre la série qui s’en était arrêtée…à son commencement !)
Ce tutoriel va donc se composer de deux parties majeures : la présentation du responsive design, ses avantages et inconvénients, avec des exemples de gros sites qui les utilisent et dans un second temps, nous verrons comment mettre en place un design « responsive » sur votre site.
Voici donc le tutoriel vidéo qui va reprendre les grandes lignes de cet article! (je vous invite à le consulter en HD720p pour bien voir les lignes de code 😉 )
Hé dis donc Jamy, le responsive design, c’est quoi exactement?
Avant de vous définir le terme, je vais plutôt vous parler des raisons qui sont à l’origine de son apparition…
Depuis quelques années, le marché des tablettes, notebook et autres smartphones s’étant littéralement envolé, les habitudes des utilisateurs ont changées. Ils consultent beaucoup plus les sites avec leur mobiles qu’avant.
Il y a encore quelques années, il y avait encore très peu d’interet économique pour une entreprise de développer une version mobile de son site internet, mais depuis, la donne a nettement changé.
Les connexions mobiles ont explosés et la proportion de connexion mobile à un site atteint maintenant un chiffre non négligeable (qui varie en fonction des sites) là où avant ce chiffre était dérisoire. Ces changements d’habitudes ont donc justifié pour bon nombre d’entreprises le fait de développer une version mobile de leur site (en plus éventuellement d’une application iPhone et Android).
Qui dit version mobile, dit version à part entière du site qui doit être développée. Cela a un coût non négligeable, d’autant que les résolutions sont différentes d’un terminal à un autre (sans parler des tablettes qui offrent elles aussi une pléiade de résolutions différentes). C’est là qu’entre en jeu le responsive design dont je vais vous parler !
Non ce n’est pas une recette magique qui évitera de développer une version mobile de votre site, ce serait trop beau, mais elle offre quelques opportunités intéressantes.
Concrètement avec le responsive design, le code html du site sera le même et ne changera pas, un gain de temps évident pour la maintenance donc. Ce qui change c’est que vous allez spécifier via le CSS notamment quelles zones vous voulez voir apparaître pour telle ou telle résolution.
Ex : pour des petites résolutions, on ne présentera pas un site de façon classique avec un header, une sidebar mais l’essentiel sera affiché. Certaines fonctionnalités pourront être occultées, car les attentes d’un internaute qui visite votre site depuis un mobile ne seront pas les mêmes que depuis un ordinateur classique par exemple.
La mise en place de cette version « responsive » de votre site, si elle est bien réfléchie en amont permettra un gain de temps considérable tant sur le développement que sur la maintenance du site. Seule l’analyse en amont sera un peu plus poussée qu’à l’accoutumée, et encore, cela varie d’un projet à l’autre.
Un exemple concret: www.pebkac.fr!
Pour vous montrer un exemple concret de ce qu’est un design responsive, voici le site de mon pote @clem80 que vous connaissez peut-être : www.pebkac.fr
Amusez-vous à redimensionner la fenêtre de votre navigateur pour simuler une résolution “tablette” ou “mobile”…
Vous verrez bien qu’en fonction de la résolution du périphérique depuis lequel on se connecte au site, le rendu n’est pas le même. C’est là tout la magie de la chose!
La version “classique” ressemble à cela:
La version tablette quant à elle est allégée visuellement, la sidebar disparaît.
Et pour finir, la version téléphone:
Cela pose aussi quelques inconvénients qu’il ne faut pas occulter, parmi lesquels, le “bridage” créatif des designers qui devront partir du design principal du site pour réaliser les déclinaisons du site. Comme pour tout bridage, il existe néanmoins quelques astuces pour contourner ces soucis, mais il est vrai qu’à première vue, ça peut parraitre contraignant.
Il est nécessaire également d’avoir un navigateur web récent supportant les technologies émergentes telles que le HTML5 et le CSS3 qui n’en sont encorequ’à leurs balbutiements.
Cela dit, si votre navigateur n’est pas compatible avec ces nouvelles technologies, le site s’affichera en version “standard” et donc ne posera pas un réel soucis de navigation. Selon StatsCounter, ce seraient 25% des internautes qui n’auraient pas accès à cette technologie actuellement. Ce chiffre restant tout de même discutable car, les internautes réguliers ont des navigateurs assez récents sachant interpréter le responsive design.
Le plus gros inconvénient avec le responsive design réside dans le fait que peu importe la résolution que l’internaute utilise, le html chargé est toujours le même (c’est juste le css qui dit à tel ou tel élément de ne pas s’afficher).
Cela ne posera aucun soucis sur des connexion internet classiques mais pour une connexion mobile “faible” de type Edge, le site peut-être très très long à s’afficher là où sur une version mobile “classique”, le site s’afficherait plus vite.
Pour des sites dont la part d’utilisation mobile est importante (je pense à tous les sites que vous consultez pour avoir un renseignement précis tels que horaire, numéro de téléphone…), j’aurais donc tendance à déconseiller cette technologie qui est un peu contraignante.
J’ai réalisé pour vous un petit comparatif avantages/inconvénients de l’utilisation d’un responsive design, ce qui m’évitera de vous faire un discours encore plus long et ennuyeux!
Avantages
- Coté développement, pas besoin de développer deux versions distinctes, et donc de mettre à jour plusieurs versions. L’apparence du site change en fonction de la résolution et non d’après un test sur l’user-agent (comme c’est le cas pour un site mobile).
- Une seule version à gérer et à maintenir impliquent des coûts de maintenance plus bas.
- L’expérience utilisateur adaptée à chacunes des résolutions.
- Coté statistiques, un seul suivi à faire.
- Pour la communication de votre site, une seule url à retenir, ce qui je pense ne peut-être que bénéfique pour le SEO.
Inconvénients
- Tout le contenu est chargé, peu importe la résolution, ce qui peut poser problème pour les connexions mobiles (Edge). Un site mobile dans ce cas sera plus rapide à s’afficher.
- Analyse et réflexion plus importante avant le développement pour prendre en compte les supports pour adapter chaque contenu a son support (choix des résolutions, choix de la disposition des éléments en fonction de chaque résolution).
- Créativité un peu plus bridée car le html étant le même, le DOM aussi et donc la personnalisation un peu plus limitée.
- Sites principalement destinés à un usage mobile, la rapidité est primordiale, il sera sans doute plus intéréssant de se tourner vers l’option site mobile.
Hé les garçons, et si on mettait en place un responsive design?
Tout d’abord, on va créer une feuille html5 vierge, je vous laisse copier/coller à votre guise!
<!DOCTYPE html>
<html>
<head></head>
<body>
</body>
</html>
Comme vous le voyez, avec HTML5, la déclaration du Doctype est bien plus simple qu’auparavant!
Plaçons dans ce document quelques éléments pour créer un squelette de site pour nos tests. J’ai choisi d’inclure le css du bootstrap twitter histoire d’avoir un rendu plus sympa sans trop me fouler!
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Le responsive design? C'est pas sorcier!</title>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<header>Entete du site</header>
<section role="main">
<article>Contenu principal</article>
</section>
<section role="sidebar">Sidebar</section>
<footer>Pied de page</footer>
</div>
</body>
</html>
Et le CSS (style.css):
*
{
text-align:center;
}
#main
{
width:1000px;
margin:auto;
}
header
{
width:1000px;
margin:auto;
height:80px;
background:#888888;
}
section[role="main"]
{
width:750px;
float:right;
background:#AAAAAA;
}
section[role="sidebar"]
{
width:250px;
float:left;
background:#CCCCCC;
}
footer
{
clear:both;
width:1000px;
height:40px;
background:#EEEEEE;
}
Jusque là, rien ne devrait vous surprendre…
Là où la magie va opérer c’est avec l’utilisation de cette média query à placer dans votre CSS:
@media screen and (min-width:768px) and (max-width:1024px){}
Que veux-t-elle dire? Tout le CSS que vous mettrez entre les deux accolade ne sera interprété que pour les résolutions dont la largeur est comprise entre 768px et 1024px.
Vous imaginez donc toute la puissance de cela. Non? Préparons par exemple la version mobile du site.
On partira du fait qu’un mobile a une largeur inférieur à 240px (au délà duquel on le considèrera plutôt comme une tablette).
On fera donc:
@media screen and (max-width:240px)
{
header, footer
{
width:100%;
height:30px;
}
section[role="sidebar"]
{
display:none;
}
#main, section[role="main"]
{
width:100%;
}
}
Ce qui aura pour effet de réduire en hauteur notre header et notre footer. La sidebar sera masquée et le contenu du coup prendra toute la largeur disponible.
Libre à vous donc d’imaginer toutes les possibilités que vous offrent le responsive design (changer de disposition un élément, changer sa position, sa taille, sa visibilité…).
Aller plus loin…
Si vous voulez aller plus loin, vous pouvez même imaginer, présenter un menu différent en fonction de votre résolution, cela améliore la lisibilité de votre site, pour cela, soit vous parviendrez à réaliser cela sans rajouter le moindre dom, sinon vous pourrez toujours créer votre second menu et ne l’afficher que pour les petites résolutions (tant qu’à faire je déconseille de procéder comme ça, sinon vous perdrez tout l’interet du responsive design et vous risquez d’alourdir votre site, mais vous n’aurez pas toujours le choix.
Voyons comment mettre un menu spécifique pour votre site pour les mobiles.
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Le responsive design? C'est pas sorcier!</title>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>Entête du site
<nav>
<div class="navbar" style="width:90%;margin:auto;">
<div class="navbar-inner">
<a class="brand" href="#">www.ctrl-alt-geek.fr</a>
<ul class="nav">
<li class="active"><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
</div>
</nav>
</header>
<section role="main">
<article>Contenu principal</article>
</section>
<section role="sidebar">Sidebar</section>
<footer>Pied de page</footer>
</body>
</html>
Voici donc un menu déjà tout skinné grâce au bootstrap.
Voyons maintenant comment personnaliser tout ça pour les petites résolutions. J’ai choisi 400px ici, car avec Chrome je ne peux pas descendre en dessous de 240px.
On va commencer par masquer entièrement le menu pour faire apparaître à la place un bouton de menu sur lequel il faudra cliquer pour faire apparaitre le contenu du menu.
Le css:
@media screen and (max-width:400px)
{
header, footer
{
width:100%;
}
section[role="sidebar"]
{
display:none;
}
#main, section[role="main"]
{
width:100%;
}
nav .navbar
{
display:none;
}
button.btn_menu_mobile
{
display:block;
float:right;
margin:5px;
}
}
Le html :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Le responsive design? C'est pas sorcier!</title>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<header>Entete du site
<nav>
<button class="btn btn_menu_mobile" type="button"><i class="icon-align-justify"></i></button>
<div class="navbar" style="width:90%;margin:auto;">
<div class="navbar-inner">
<a class="brand" href="#">www.ctrl-alt-geek.fr</a>
<ul class="nav">
<li class="active"><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
</div>
</nav>
</header>
<section role="main">
<article>Contenu principal</article>
</section>
<section role="sidebar">Sidebar</section>
<footer>Pied de page</footer>
</div>
</body>
</html>
On va masquer notre bouton sur la version “standard”:
button.btn_menu_mobile
{
display:none;
}
Voilà donc notre rendu quand on réduit la taille de la fenêtre, notre menu est remplacé par un bouton simple!
C’est bien beau, on a maintenant notre bouton de menu, il faut maintenant l’animer lors du clic. On va charger jQuery et on va coder une petite fonction rapide et simpliste (histoire que vous voyez l’idée…).
<script type="text/javascript">
// Au chargement de la page
$(document).ready(function(){
// Au clic sur le bouton
$('button.btn_menu_mobile').click(function(){
// On change l'état du menu: on le masque si il était affiché et inversement
$('nav .navbar').slideToggle();
});
});
</script>
Ce qui donne au final ce code:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Le responsive design? C'est pas sorcier!</title>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
// Au chargement de la page
$(document).ready(function(){
// Au clic sur le bouton
$('button.btn_menu_mobile').click(function(){
// On change l'état du menu: on le masque si il était affiché et inversement
$('nav .navbar').slideToggle();
});
});
</script>
</head>
<body>
<div id="main">
<header>Entete du site
<nav>
<button class="btn btn_menu_mobile" type="button"><i class="icon-align-justify"></i></button>
<div class="navbar" style="width:90%;margin:auto;">
<div class="navbar-inner">
<a class="brand" href="#">www.ctrl-alt-geek.fr</a>
<ul class="nav">
<li class="active"><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
</div>
</nav>
</header>
<section role="main">
<article>Contenu principal</article>
</section>
<section role="sidebar">Sidebar</section>
<footer>Pied de page</footer>
</div>
</body>
</html>
Le tutoriel touche à sa fin, merci d’avoir pris le temps de le lire. C’est sans doute le plus long tutoriel que j’ai écrit ici!
J’espère qu’il aura été clair et qu’il vous aura permi de mieux comprendre le fonctionnement du responsive design!
Comme vous l’avez-vu, au final son utilisation est assez simple, c’est avant tout le travail de réflexion, pour savoir comment disposer vos éléments de sites en fonction des résolution, qui est long.
Si vous avez des remarques ou des précisions à apporter à ce tutoriel, ça se passe dans les commentaires comme d’habitude!
Le meilleur moyen de me remercier, c’est de liker la page facebook, de me suivre sur twitter et de partager l’article! (rien que ça!)