Responsive Design, ou Mobile First Design ou encore Web First Design (encore appelé Responsive Web design ou Desktop First Design suivant la littérature). Ces notions vous interpellent-elles? Nous vous promettons dans les lignes qui suivent une présentation détaillée de celles-ci, partant des motifs de leurs théorisations jusqu'aux pratiques à adopter.
Essentiellement, un site web est une application qui met à disposition différentes ressources à un public cible. La nature de ces ressources et les opportunités du web ont évolué en même temps que ce dernier.
C'est ainsi que nous distinguons:
Le web 1.0, ou web traditionnel qui démarre dans les années 1990. C’est avant tout un web statique, centré sur la distribution d’informations et sollicite peu l’intervention des utilisateurs.
Le web 2.0, ou web social, change fondamentalement la donne. Il privilégie la dimension de partage et d’échange d’informations et de contenus (textes, vidéos, images ou autres). Il voit l’émergence des réseaux sociaux, des smartphones et des blogs. Toutefois, la prolifération de contenus de qualité inégale engendre une infobésité difficile à contrôler.
Le web 3.0, aussi nommé web sémantique, vise à organiser la masse d’informations disponibles en fonction du contexte et des besoins de chaque utilisateur, en tenant compte de sa localisation, de ses préférences, etc. C’est un web qui tente de donner sens aux données. C’est aussi un web plus portable qui fait de plus en plus le lien entre monde réel et monde virtuel et répond aux besoins d’utilisateurs mobiles, toujours connectés à travers une multitude de supports et d’applications malines ou ludiques.
Le web 4.0, ou web intelligent, est l’évolution logique du web sémantique. Il effraie autant qu’il fascine, puisqu’il vise à immerger l’individu dans un environnement digital de plus en plus prégnant. Basé sur la communication sans fil reliant les personnes et les objets à tout moment et en tout lieu dans le monde physique ou virtuel en temps réel, le web 4.0 pousse à son paroxysme la voie de la personnalisation ouverte par le web 3.0. Mais il pose par la même occasion de nombreuses questions quant à la protection de la vie privée, au contrôle des données, etc. C’est un terrain d’expérimentation où tous ne sont pas (encore) prêts à s’aventurer!
Finalement, bien que nous ayons constaté plusieurs évolutions du Web, ce dernier repose fondamentalement sur la mise à disposition et la mise en forme de l'information conformément aux différents équipements et publics cibles. Par ailleurs, avec toutes ses maturations le Web repose essentiellement sur deux technologies qui assurent cette mise en forme à savoir le HTML et CSS.
Le langage de balisage HTML(HyperText Markup Language) permet de structurer un document et de le mettre en forme. Il est essentiellement constitué de tags qui permettent de représenter divers types d'éléments. Ces premiers sont lus et interprétés par le navigateur qui les converti en composants pour constituer plus tard le DOM(Document Object Model). Il est pour ainsi dire l'ossature de tous site web.
Imaginez à quoi nous ressemblerions si nous étions que squelette?! Eh bon c'est-ce que fut les sites WEB. Il aura fallu attendre la fin des années 90 pour pouvoir équiper ce squelette avec de la chair et de la peau. En effet, le CSS(Cascading Style Sheets) constitue tout ornement qui vient en aval au html. Ce premier s'additionne avec le html avant de constituer le DOM.
L'avènement du mobile
Les utilisateurs de mobiles représentent 66,9 % de la population mondiale. © We Are Social / Hootsuite
Ce phénomène mondiale s'explique par plusieurs facteurs. Cependant, ce qui nous intéresse, ce sont leurs conséquences dans le développement web. En effet, les utilisateurs mobile s'attendent, si ce n'est mieux, à la même expérience comparée à leur desktop. Ces terminaux étant fondamentalement différents, il convient de trouver une solution.
C'est ainsi que le terme de Responsive Design a été inventé et théorisé par Ethan Marcotte en 2010 comme solution. En résumé il s'agit d'un ensemble de pratiques de développement qui permettent d'avoir la même expérience utilisateur indifféremment du terminal de support.
Mobile & Desktop
Le Desktop et le Mobile partagent des attributs différents et nécessitent donc des considérations différentes. Avoir une compréhension approfondie des plates-formes, des fonctions et du comportement des utilisateurs est la clé pour concevoir des expériences UI/UX efficaces.
Voici quelques domaines clés dont vous devez tenir compte lors de la conception suivant la ou les plates-formes cibles:
Tailles d'écran
Les appareils mobiles ont des tailles d'écran plus petites, tandis que les écrans de bureau sont beaucoup plus larges et permettent aux utilisateurs de naviguer avec un souris et un clavier. Ainsi
Les applications mobiles doivent utiliser des fonctions tactiles, plutôt que de cliquer (comme le bureau), et s’assurer que les boutons sont suffisamment grands.
La typographie et la taille de la police doivent être intelligibles pour les utilisateurs quelque soit la plate-forme.
Le contenu doit également être organisé verticalement ou horizontalement dépendamment de la taille d’écran. Il peut aussi se présenter sous des formes différentes en fonction de la plate-forme. Nous avons par exemple des listes dans les applications mobiles plutôt que des tableaux. Il en est de même pour les formulaires...
Caractéristiques du téléphone
Les utilisateurs mobiles veulent un sentiment de familiarité et de cohérence. Cela peut être fait en intégrant des fonctionnalités téléphoniques dans les plates-formes mobiles. Les applications utilisant de telles fonctions mobiles sont susceptibles de donner une meilleure expérience.
Toutes ces différences font que des mesures différentes doivent être prises relativement à la plate-forme cible.
Responsive Web design
Grâce aux technologies de bases du web design notamment les Media Queries de CSS3 nous pouvons faire en sorte que l’affichage d’une quelconque page d’un site s’adapte de façon automatique à la taille de l’écran du terminal qui l'affiche.
Par ailleurs, l'implémentation de cette solution dépend fortement de la plate-forme prioritaire. Ainsi, que ce soit le mobile ou le desktop nous avons respectivement le Mobile first Design et le Web first Design(desktop).
Le Mobile first tout comme le Web first est une philosophie à adopter qui consiste à faire un choix.
Bien que les motivations de ce choix peuvent être multiples, nous considérons souvent le nombre d'utilisateurs finaux pour chaque terminal.
Ainsi pour le Mobile first, le design est réfléchi et conçu principalement pour le plus petit appareil mobile, puis le design est décliné vers le haut jusqu’à l’interface pour desktop.
Le processus inverse est adopté selon la philosophie du Web first ou Responsive Web design
Finalement l'objectif de la responsivité étant de passer d'un terminal à un autre tout en gardant le même expérience utilisateur, nous présenterons dans la partie qui suit les techniques et bonnes pratiques qui nous permettent d'y arriver. Mais avant cela nous allons lever quelques nuances.
Adaptive design
Quand il est question de responsive, cela implique que le site Web répondra à la largeur de l’écran de l’utilisateur et s’ajustera en fonction de cette donnée. Le site sera donc flexible.
Lorsqu’il est plutôt question d’adaptatif, c’est que le site s’adaptera à des largeurs spécifiques. Le site Web s’adaptera donc en fonction de l’appareil utilisé par le visiteur pour consulter le contenu, soit un ordinateur de table, une tablette ou un téléphone mobile.
En résumé, la différence entre le Responsive et l'Adaptive Design réside dans la continuité.
Progressive Web App (PWA)
En dehors de la taille de l'écran, les caractéristiques natives du téléphones constituent une différence majeure entre le web design et le mobile design. C'est ce problème que veut résoudre le PWA.
En effet une progressive web app est une version optimisée d’un site mobile intégrant des fonctionnalités d’applications natives (normalement indisponibles sur un navigateur).
Les fonctionnalités disponibles sont par exemple :
Créer un raccourci du site ou de l'application directement sur l'écran d'accueil du visiteur.
Recevoir des notifications push (par exemple, à chaque nouvel article, à chaque nouveauté sur le site, comme pour une application).
Accéder aux fonctionnalités du téléphone telles que l’appareil photo, la géolocalisation, le micro, la boussole…
Atteindre les contenus hors-connexion grâce à un mode hors-ligne.
Par ailleurs, certaines fonctionnalités peuvent être disponibles hors ligne notamment grâce aux services workers.
Un Service worker est un script JS qui s'exécute en background parallèlement avec le code de la page du site internet. Il va donc stocker les données de la page en cache et de l'afficher sans connexion internet.
Eléments à considérer
Finalement, dans cette partie qui d'un point de vue technique est la plus importante, nous présenterons les différentes pratiques de responsivité.
Styling
L'organisation, la structuration des composants d'une page web se veut être en cohérence avec le support de visualisation. Bien que les techniques de conversion diffèrent selon la philosophie adoptée, elles sont pour la majeure partie assurées par le style (css) de la page web notamment les médias querries. Ainsi nous avons:
Mobile first (Mobile to Desktop):
En général, cela signifie que les médias querries utilisent une largeur minimale (min-width). Nous utilisons des requêtes multimédias pour ajouter ou écraser des styles pour un point d'arrêt défini et plus, comme dans cet exemple :
Web First (Desktop to Mobile):
Comme vous l'avez probablement deviné, une approche axée sur le desktop est l'inverse. Notre CSS est écrit pour les grands écrans, puis nous utilisons des médias querries pour apporter des modifications aux tailles plus petites, en utilisant généralement des requêtes multimédias à largeur maximale(max-width).
Par ailleurs le Flexbox, le Grid, la typographie responsive et la disposition multicolonne vous permettent de créer des composants flexibles et même réactifs sans avoir besoin d’une requête multimédia. Il vaut toujours prendre la peine de se demander si ces méthodes de mise en page peuvent obtenir ce que vous voulez sans ajouter de requêtes multimédias.
Pour plus de détails, veuillez visiter la documentation sur MDN.
Actions
Dans tout application web les actions sont essentiellement déclenchés par des clics et ont une importance particulière dans la dynamisation de ces premiers. Cependant, puisque les applications mobiles sont manipulées par nos mains et celles desktop par un souris, elles ne peuvent être implémentées de la même manière dans des plates-formes différentes.
Tout d'abord, la taille et la distance entre les actionneurs doit être d'autant plus grand que le terminal est petit. En effet, s'agissant des petits écrans pour minimiser les erreurs de manipulation faudrait davantage mettre en évidence les actionneurs et davantage les isoler entre eux.
Ensuite, apprenez le langage du toucher en vous familiarisant avec les gestes tactiles courants et comment ils sont utilisés pour naviguer et interagir avec des objets et des écrans.
Enfin, adapter les changements d'états en fonction du terminal cible et du comportement souhaité. Par exemple: remplacer les actions au survol (:hover) par l'état focus ou long click suivant vos besoins.
Responsive vs Multiple Design
Dans cet exposé, nous avons mis en évidence le problème de l'expérience utilisateur identique suivant la plate-forme cible. Bien que nous avons présenté la solution du responsive design, une autre solution est adoptable; à savoir le Multiple Design.
En termes brèves, il s'agit de développer la solution à répétition dépendamment de la plate-forme cible. Nous n'allons pas détailler cette stratégie mais nous allons faire une petite une comparaison sous forme de tableaux:
Le Responsive Design et le Multiple (Platform) Design sont tout deux des stratégies de développement.
En conclusion, nous pouvons dire qu'il n'existe pas de formule magique pour le choix entre le Mobile first et le Web first Design. Le choix revient à l'équipe technique et dépend de plusieurs facteurs.