Le Responsive Design

Introduction au responsive design

Ces dernières années, l'utilisation des smartphones et tablettes pour la consultation des sites internet a énormément augmentée. Ainsi, c'est les développeurs de sites internet qui doivent se charger de faciliter la navigation des utilisateurs. Cette adaptation passe par l'aspect visuel et pratique mais aussi par la vitesse d'accès aux sites. Chaque appareil ayant sa propre résolution d'écran, le contenu d'un site doit s'adapter en fonction de la résolution de l'appareil qui est utilisé. C'est donc là qu'intervient le Responsive Design.

Il faut faire la distinction entre le Responsive Design et les site dédiés. Le site dédié comprend un site classique, une version mobile pour les smartphones et encore une autre version pour les tablettes par exemple. Cela a le désavantage de devoir concevoir un site pour chaque type d'appareil utilisé. Avec l'apparition de nouvelles technologies il faudrait créer un site adapté pour chaque type d'appareil. L'apparition des phablettes par exemple nécessite aux sites utilisant cette méthode de recréer un site adapté.

Le type d'appareil utilisé est détecté par le serveur et renvoie vers une adresse du type www.m.exemple.com au lieu de www.exemple.com

Le Responsive Web design permet quant à lui de développer des sites qui s'adaptent automatiquement à l'espace disponible sur l'écran. Cette technique vise à l'élaboration de sites offrant une expérience de lecture et de navigation optimales pour l'utilisateur quelle que soit sa gamme d'appareil (téléphones mobiles, tablettes, liseuses, moniteurs d'ordinateur de bureau). En général, on se base sur la largeur de l'écran pour déterminer comment les éléments du site doivent s'afficher.

Les éléments nécessaires au fonctionnement du Responsive Design

Actuellement, le responsive nécessite des technologies et des méthodes telles que :

• Une grille fluide, où les largeurs des éléments de structure sont débarrassées des unités de pixels

• Des images, des médias et des contenus flexibles leur permettant de ne pas sortir du cadre lorsque celui-ci se restreint

• Une adaptation de l'affichage au Viewport du terminal

• Des CSS3 Media Queries permettant d'appliquer différentes règles de styles CSS selon la taille ou l'orientation de l'écran de l'appareil

• Éventuellement des adaptations conditionnelles (menu de navigation) côté client, basées sur JavaScript ou jQuery

• Une façon de concevoir les sites tel que le Mobile First et l'enrichissement progressif facilitant l'accessibilité, la compatibilité et la performance des pages produites

De plus en plus souvent de parties détectées et générées côté serveur (RESS), là aussi notamment pour accélérer l'affichage de certains composants ou ressources.

Avantages

• Plus de réactivité : La bande passante étant allégée, l'accès au site est donc plus rapide.

• Les images, colonnes et textes s'adaptent automatiquement, permettant une ergonomie optimale : La navigation sur le site étant simplifiée, l'ergonomie est beaucoup plus efficace.

• Les élément les plus pertinents sont mis en avant :Cela permet d'avoir le contenu principal du site rapidement et la lisibilité des informations est mise en avant.

• Pas de redirection de lien : Une seule et unique adresse est nécessaire pour accéder au site, cela évite une redirection vers le site mobile, un gain de temps est réalisé. Le choix entre le site classique ou le site mobile n'est pas présent.

• Une seule feuille de style : Cette avantage permet de modifier un titre, par exemple, pour tous les appareils en une seule fois. Tout le CSS modifié s'applique pour chaque version d'appareil.

Inconvénients

Demande plus de connaissances techniques : Le responsive étant récent, il n'y a pas beaucoup de connaisseurs de cette méthode de développement et de développeurs formés pour l'appliquer. Il requiert certaines connaissances préalables pour le mettre en application. Le temps de développement d'un site est plus long : L'adaptation des formats et le développement est plus long, en moyenne 25% de travail en plus ce qui est assez conséquent.

Utiliser le responsive

Il est conseillé lors de la création d'un site web qui utilisera le responsive de le concevoir d'abord pour les mobiles, c'est le « Mobile First ». Cela consiste donc à créer le site au format des mobiles, qui est plus simple, puis au format classique. L'avantage de cette méthode est surtout dans la rapidité de chargement de la page. En effet, les navigateur récupérerons donc les règles CSS pour les mobiles sans s'occuper des autres règles pour la version classique dit « desktop ». Cela évite donc aux navigateurs mobiles de récupérer les règles CSS du site pour les ordinateurs et de les supprimer par la suite car cela leur demanderai plus de travail.

Etude sur les User Agent

L’utilité du User Agent

Dans les requêtes HTTP effectuées depuis un client web, une chaîne user agent est intégrée et elle contient des informations sur le navigateur ainsi que le système d’exploitation.

Le code PHP

En PHP, il existe une variable prédéfinie nommée $_SERVER qui permet d’obtenir des informations sur le serveur web mais également de récupérer quelques informations concernant le client qui se connecte, comme son adresse IP et sa chaîne User Agent.

Etude sur les Media Queries

Visionner le document

Etude sur le Viewport.

Visionner le document

Les frameworks CSS

L'arrivée des frameworks CSS a changé notre utilisation du css. Pour rappel, un framework CSS a pour avantage de contenir des éléments déjà personalisés, utilisables par chaque utilisateur en renseignant un classe spécifique à un élément HTML. Cela permet de faire gagner beaucoup de temps aux développeurs. Plus de soucis de compatibilité selon le navigateur. Parmis les nombreux avantages qu'apportent les frameworks CSS, le responsive design.

Il faut alors appréhender la notion de grille. Une grille est le plus souvent composée de 12 colonnes (le nombre de colonnes peut varié), voir l'image ci-dessous :

Source : http://twitter.github.io/bootstrap

Ces colonnes vont donc se compressées en fonction de la résolution de l'appareil avec lequel l'utilisateur consulte la page.

Pour les utiliser, avec Materialize par exemple :

<div class="col m8 s12"></div>

Cela aura pour effet d'afficher ce bloc sur 8 colonnes avec une résolution moyenne et sur 12 colonnes sur un appareil mobile, soit la totalité de la largeur.

Bootstrap

Bootstrap est un framework CSS développé par Twitter. C'est l'un des plus populaires (je l'ai d'ailleurs utilisé pour ce site). Efficace, simple d'utilisation, je vous le recommande.

Utiliser Bootstrap

Materialize

Materialize est un framework CSS permettant d'avoir un rendu "Material Design" de Google. Pour moi c'est le meilleur, je l'ai découvert après Bootstrap.
Il est extrêmement complet, avec une documentation très claire et des exemples. Materialize ne s'arrête pas aux styles CSS, il contient également des éléments javascrpit prêts à l'utilisation comme ouvrir une pop-up ou utiliser les "chips" de Google. Je l'utiliserai à l'avenir pour la majorité de mes projets personnels et je vous le recommande vivement.

Utiliser Materialize

Conclusion

Le Responsive Design est donc une bonne solution pour la consultation des sites web depuis n'importe quel type d'appareil en raison de l'adaptation des sites à la taille de l'écran des smartphones, tablettes, ordinateurs, etc. L'utilisateur a donc plus de facilité à consulter le contenu d'un site et cela rend plus agréable la navigation sur internet. L'ergonomie est idéale et de plus en plus de développeurs apprennent à appliquer cette solution pour l'adaptation de leurs sites. Malgré un investissement plus important lors de la création, ce temps de développement est ensuite rentabilisé dans la maintenance qui est plus facilitée. Le Responsive Design est donc une solution qui sera de plus en plus répendue à l'avenir.

Sources

alsacreations.com
openclassrooms.com
w3schools.com
responsivedesign.is
aliasdmc.fr
netmacom.fr

Commentaires

Les commentaires sont soumis à un système de modération avant d'être publiés.

Rédiger un commentaire