Table des matières
Annonce
Le Responsive Design en une expression
Le terme Responsive Design ou applications web responsives sont des termes très populaires, des termes connus par bon nombre de personnes, mais…
Peu sont ceux qui maîtrisent vraiment la definition du Responsive Design, et qui peuvent l’expliquer aux personnes qui n’ont aucune affinité avec le développement web.
Pourtant, c’est très simple.
“Le Responsive Design est un moyen de conception, utilisé pour créer un site web qui peut être facilement consulté sur tous types d’appareils (smartphone, tablette, ordinateur de bureau et ordinateur portatif)”.
Qui en est l’initiateur? Pourquoi et comment cette approche de conception est-elle devenue aujourd’hui l’approche par excellence ?
La petite histoire du Responsive Design
Il n’y a pas d’effet sans cause.
Vous n’êtes pas sans savoir que toutes les grandes avancées, les grandes prouesses sont réalisées en essayant de résoudre un problème précis.
C’est aussi le cas du Responsive Design.
Pour savoir son origine, il est primordial de replonger un tout petit peu dans l’histoire du développement web.
Dans les années 90, les sites web ne proposaient que des pages statiques, elles étaient conçues pour s’adapter aux écrans d’ordinateur de bureau et portable dont la plupart avaient une largeur de 1024px.
Bien qu’à cette époque, les téléphones portables avec accès à internet étaient disponibles, ils ne pouvaient pas afficher les sites web tels qu’ils étaient conçus.
Ils n’affichaient que les données sous forme de texte.
Il a fallu attendre les années 2000 avec l’arrivée des smartphones, pour voir les navigateurs mobiles être dotés de fonctionnalités leur permettant d’afficher les sites web réellement.
L’iPhone a été le fer de lance, sorti en 2007, il permettait d’afficher les pages web telles que conçues, et grâce à son multi-touch de zoomer et voir proprement ce que l’on désire.
Mais c’était fatiguant et ennuyant, car les pages sont exclusivement conçues pour les écrans larges, elles avaient une largeur de 960 px et plus.
L’expérience utilisateur était éprouvant sur ce terminal dont l’écran ne faisait que 320px de large.
Pour pallier à cela, les développeurs concevaient une version mobile du site qui s’adapte aux dimensions de l’iPhone.
Mais ils vont encore faire face à d’autres problèmes.
Le succès de l’iPhone a incité d’autres compagnies de téléphonie à eux aussi se lancer dans l’aventure des smartphones.
C’est ainsi de nouveaux smartphones furent conçus, mais leur largeur différait de celle de l’iPhone.
Certains avaient des écrans plus larges que celui de l’iPhone et d’autres des écrans plus petits que ce dernier. Sans oublié aussi que l’iPad fut sorti en 2010 par Apple.
De nouveaux casse-têtes pour les développeurs, il fallait que leur site s’adapte à tous ces smartphones et aussi à l’ipad.
Plusieurs solutions seront proposées, celle qui fut longtemps utilisée par la communauté des développeurs est d’utiliser les medias queries et la flexibilité pour adapter les pages web aux différents terminaux.
Mais ça ne résolvait pas le problème en entier.
Ethan Marcotte comme les autres développeurs aussi faisait face à ce problème, cherchant des approches pour permettre aux pages web de s’adapter automatiquement à tous supports, il trouva la solution en alliant media queries et flexibilité.
Il nomma sa solution le Responsive Web Design.
Pour expliquer le concept aux développeurs de l’époque, il rédigea un article sur le sujet.
Les principes fondamentaux du Responsive Design
Pour réussir à concevoir un site web qui s’adapte lui-même automatiquement aux différents terminaux, il faut tenir compte de quelques principes fondamentaux.
Ils ne sont pas nombreux, ils sont justes aux nombres de trois.
Le tout premier est d’utiliser un système de grille fluide.
L’utilisation de la grille permet de définir les tailles de mise en page, pour que les contenus d’une page augmentent ou diminuent en fonction des spécifications consignées.
Ainsi quelque soit le support via lequel l’utilisateur accède la page, les éléments de la page s’adaptent au terminal de l’utilisateur.
Ensuite, le second principe, les medias queries.
Il s’agit des filtres. Ils permettent de spécifier les dimensions de l’appareil dans votre code et de faire apparaître le design de votre application web de manière appropriée.
Elles permettent de modifier la disposition du site en fonction de la largeur, de la hauteur et de l’orientation d’un écran pour permettre aux utilisateurs d’avoir un rendu adéquat sur leur terminal.
Et enfin le troisième principe, celui de rendre les images fluides.
Les images par défaut ont une taille statique, elles ne sont pas naturellement fluides.
Pour éviter que les images proposées dans votre application web n’excèdent l’écran des mobiles, il faut l’ajuster à l’aide du CSS.
Les avantages du Responsive Design
Si le Responsive Design est aujourd’hui adopté par tous les développeurs, il y a bien une raison valable.
C’est parce qu’il offre d’énormes avantages, découvrons ensemble quelques-uns de ces avantages.
Son premier avantage est le fait qu’il permet d’apporter satisfaction à l’utilisateur, comment?
Il permet de concevoir une interface cohérente, et l’utilisateur a une bonne expérience utilisateur en naviguant sur le site.
C’est un système qui est facile à implémenter et il permet de concevoir une application web bien optimisée pour le référencement.
Pas besoin d’utiliser un sous-domaine pour les sites qui s’adapte aux supports mobiles et tablettes(des sites web distincts), chose qui nuit gravement au référencement d’un site.
Le Responsive Design permet de promouvoir la simplicité et le minimalisme.
C’est aussi prévoyant de concevoir un site en suivant les principes du Responsive Design, car peu importe les types de supports qui sortiront, que leurs écrans soient étroits ou plus larges que ceux disponibles actuellement sur le marché, votre site s’adaptera automatiquement à eux.
Les pratiques du Responsive Design à adopter
Il faut prendre en considération quelques éléments lors de l’implémentation de l’approche du Responsive Web Design.
Il faut penser en premier aux mobiles, en d’autres termes adopter le “mobile first”.
Le mobile first consiste à faire quoi?
Il consiste à faire évoluer les conceptions, de la taille des mobiles aux écrans larges.
Aussi proposer de gros boutons, afficher les éléments essentiels sur les mobiles et cacher les éléments secondaires (non essentiels) qui peuvent apparaître une fois que l’on est sur les écrans larges.
Sur les mobiles, l’application doit être beaucoup plus intuitive que sur les bureaux.
Il faut aussi considérer les grilles et les images que vous implémentez, elles doivent être fluides.
Toujours inclure les breakpoints, les breakpoints sont les points d’arrêt, ils permettent de spécifier le type d’écran auquel votre design doit être appliqué application.
Il vous faut aussi hiérarchiser et masquez le contenu en fonction des contextes des utilisateurs.
Et enfin, utiliser les modèles de conception courants à savoir: Fil d’Ariane, des formulaires d’inscription ou l’on enregistre ses données étapes par étapes, Affichage progressive (processus permettant de réduire un contenu long et de permettre à l’utilisateur lui-même d’afficher le reste par le biais d’un lien), etc.
Conclusion
La technologie avance à vitesse grand V, et tout est fait pour nous simplifier la vie.
Aujourd’hui, vous n’êtes pas obligé d’implémenter vous-même le Responsive Design dans vos applications web, il existe de nombreuses librairies basées sur les principes du Responsive Design qu’il faut intégrer dans vos applications.
C’est l’exemple de Bootstrap et de son puissant système de grille.
Et si vous ne voulez pas du tout mettre les mains dans du cambouis (écrire du code), vous pouvez opter pour ces outils qui vous permettent de générer automatiquement des applications responsives.
Annonce