Le responsive web design, ou « conception de sites web adaptatifs » en français, consiste à offrir une expérience de consultation confortable sur les différents supports de lecture qui permettent de consulter un site Internet : ordinateurs, tablettes, smartphones, etc.
Il ne s’agit pas de créer plusieurs interfaces, une pour chaque support, mais de permettre à l’interface de s’adapter à l’écran de l’utilisateur.
Diverses techniques présentées dans l’article nécessite d’avoir quelques connaissances dans le domaine du web.
Techniques
Les media queries CSS3
Pour permettre à l’interface de s’afficher correctement sur chaque support, il faut utiliser les media queries de CSS3. Ce sont des règles décrites par le développeur qui indique comment doit s’afficher tel élément selon la taille de l’écran, son type (écran, imprimante, projecteur, etc.) ou d’autres informations (support de la couleur, orientation du périphérique, etc.).
Ces règles sont principalement utilisées pour modifier l’agencement des éléments sur la page. Comme vous pouvez le voir sur l’image à droite, les éléments ne sont pas placés aux mêmes endroits suivant que le support est un écran d’ordinateur, de tablette ou de smartphone.
Ainsi, le contenu reste toujours lisible.
Adaptation des images
Les images n’étant pas affichées à la même taille sur les différents écrans, il peut être utile de charger des images plus petites et donc plus légères pour les petits écrans (sauf dans le cas où l’image doit être plus grande sur petit écran que sur grand écran). Cela permet d’optimiser le temps de chargement sur les supports qui disposent d’un accès Internet lent. Pour en savoir plus : « Built-in Browser Support for Responsive Images » (anglais).
Une solution plus simple, mais moins radicale, consiste à compresser les images sans perte.
Le pixel-ratio
Si vous utilisez des thèmes sur un CMS ou sur votre site, vous n’aurez généralement pas à vous occuper de cela, mais il est important de connaitre le pixel-ratio.
Sur un écran de smartphone ou de tablette, il est possible que la résolution de l’écran soit identique à celle d’un ordinateur, mais l’affichage sur un petit écran sera mauvais :
Voici un exemple avec le site accastillage-fips.fr avec un mauvais et un bon pixel-ratio :
La modification du pixel-ratio s’effectue avec HTML, en ajoutant une balise meta dans le head :
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
Celle ligne précise au navigateur qu’il doit se baser sur la taille de l’écran plutôt que seulement sur la résolution. Elle autorise par la même occasion le zoom pour l’utilisateur.
Différentes approches
Il existe différentes approches pour rendre un site web adaptatif. Nous en distinguons deux : le desktop first et le mobile first.
Desktop first
Cette technique consiste à penser l’interface pour les ordinateurs pour ensuite retirer ou agencer les éléments différemment sur les plus petites tailles d’écran afin que l’interface reste utilisable sur ces supports.
Mobile First
Le mobile first consiste à penser l’inverse : l’interface est prévue pour les mobiles pour ensuite être adaptée pour les grands écrans tels que ceux des ordinateurs.
Aucune de ces techniques n’est meilleure que l’autre. C’est à vous d’identifier si votre site sera plutôt utilisé via des mobiles ou via des ordinateurs, la tendance étant à l’utilisation accrue du téléphone (Facebook est par exemple accédé à 70 % du temps par des smartphones).
Mise en place
Pour mettre en place un système efficace de création de designs adaptatifs, il vous est conseillé d’utiliser un framework CSS, bien qu’il soit possible de le faire soi-même.
Quelques framework CSS :
- Bootstrap ;
- Foundation ;
- Knacss.
De nombreux tutoriels expliquent comment créer un site responsive ou comment utiliser tel ou tel framework.
Chez ORMA, nous utilisons généralement Bootstrap sur les sites que nous créons.
Statistiques sur l’utilisation des smartphones et tablettes
Statistiques sur l’évolution de l’utilisation des smartphones, tablettes et ordinateurs entre janvier 2013 et juin 2015
Entre janvier 2013 et juin 2015, le trafic d’utilisation d’Internet par smartphone est passé de 13,56 % à 34,21 %. Ce qui rend presque obligatoire la création d’un site web adaptatif plutôt que figé pour une taille d’écran.
Avantages d’un site responsive par rapport à un site dédié
Un site dédié pour mobile permet de gérer très finement la différence de contenu qui sera affichée pour les smartphones et pour les ordinateurs. Vous pourrez aussi faire en sorte que le site dédié soit plus optimisé que le site pour grand écran. Mais plusieurs problèmes se posent.
Tout d’abord, il faut gérer deux sites, donc il y a deux fois plus de travail. Ensuite, de nombreux appareils ne font ni la taille d’un smartphone ni la taille d’un écran d’ordinateurs. Il y a par exemple les tablettes, les smartphones avec de grands écrans, les télévisions, etc. Tout autant de supports à prendre en compte.
Bien sûr, chaque technique à son lot d’avantages et d’inconvénient, de même pour l’application dédiée, mais au final, il semble que la meilleure solution soit le responsive par rapport aux autres techniques plus lourdes et plus coûteuses.
Si vous avez une question, un projet ou quoi que ce soit, n’hésitez pas à nous contacter par e-mail ou par téléphone au 04 75 78 12 81.
