Consacré « mot-clé de l’année 2013 » par le célèbre magazine Mashable, le Responsive Web design (RWD) est aujourd’hui incontournable dans nos projets web (et dans les cahiers des charges de nos clients)… mais demeure toujours aussi confus et insaisissable même chez les professionnels !
Voici donc une petite introduction pour mieux comprendre ce phénomène…
Ébauche de définition
Le responsive web design est une approche de conception Web qui 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).
Une expérience utilisateur « responsive » réussie implique un minimum de redimensionnement (zoom), de recadrage, et de défilements multidirectionnels de pages.
Responsive Web Design est un terme inventé par Ethan Marcotte qui explique comment adapter la présentation d’un site Web à plusieurs résolutions d’écran. La création d’une conception Web réactive utilise :
- Des grilles fluides qui fluctuent avec la taille de l’écran des périphériques
- Des images et médias flexibles préservant le contenu, quelle que soit la résolution
- Des requêtes média permettant aux créations de s’adapter en établissant des dimensions de points de rupture
Il décrira par la suite sa théorie et pratique du responsive dans son ouvrage « Responsive Web Design » publié en 2011.
Amélioration progressive
Le design web responsive mobile-first revient à utiliser l’amélioration progressive comme fondement de la stratégie et du design web. Concevoir avec des améliorations progressives implique d’ajouter intelligemment des couches d’améliorations à une base solide afin de fournir une expérience accessible (et, espérons-le, optimisée) à tous.
Les défis qu’apporte le design web responsive
Travailler avec le design web responsive n’est pas sans défis. Tout d’abord, il y a une telle multitude de dispositifs et de tailles d’écran que nous devons prendre en charge. Des écrans extra large aux grands écrans, du plus petit au moyen (et tout le reste), il y a beaucoup de choses auxquelles penser.
Comme avec n’importe quel projet, les principales choses auxquelles vous devez penser avec le design de sites web responsive sont le contenu du site web, comment ce contenu s’inscrit dans le design et comment le contenu s’écoule d’une page à l’autre. Vous devrez regarder comment les différents éléments de design que vous avez fonctionnent ensemble, et faire en sorte que tout semble cohérent et uniforme.
La différence avec le design web responsive est que vous devez également penser à comment tout cela fonctionne, d’un côté à l’autre, que ce soit sur la base de largeur ou de hauteur. Vous devez réfléchir à la façon dont tout cela se traduit sur un écran plus petit ou plus grand et comment tout vos éléments de design, votre flux de contenu et tout le reste fonctionnent. Vous devez garder l’expérience cohérente, peu importe la taille du site.
Content-first, mobile-first ou desktop-down ?
Toujours, toujours, toujours commencer à travailler sur vos designs content-first. Tous ceci a pour objectif de s’assurer que vous travaillez avec le contenu réel et le contenu qui est destiné à être utilisé sur le site web que vous créez.
Le design web responsive « Mobile-First » est une combinaison de philosophies et de stratégies qui se résume en fin de compte à une application plus large des meilleures pratiques du bon vieux web. À mesure que le paysage digital devient de plus en plus complexe, nous devons concevoir des expériences qui fonctionnent sur tout le spectre des appareils digitaux. Cela semble amusant, non ?
Mobile First est une philosophie créée par Luke Wroblewski qui souligne la nécessité de hiérarchiser le contexte mobile lors de la création d’expériences utilisateur. Commencer par le mobile d’abord :
- Permet aux sites Web de toucher davantage de personnes (77% de la population mondiale dispose d’un appareil mobile, 85% des téléphones vendus en 2011 sont équipés d’un navigateur)
- Oblige les designers à se concentrer sur le contenu et les fonctionnalités de base (Que faites-vous lorsque vous perdez 80% de votre écran ?)
- Permet aux designers d’innover et de tirer parti des nouvelles technologies (géolocalisation, événements tactiles, etc.)
En savoir plus sur le design responsive :
- C’est quoi le Responsive Web Design ? par Raphaël de Alsacréations
- Design web responsive par Rachel Shillcock
- Mobile-first responsive web design par Brad Frost
Notre exemple :
See the Pen Design & Lifestyle – Home by atnhenri (@atnhenri) on CodePen.
Qu’est-ce qu’une requête média ?
La requête média est une technique CSS introduite dans CSS3.
Elle utilise la règle @media pour inclure un bloc de propriétés CSS uniquement si une condition donnée est vraie.
Ajouter un point d’arrêt
Si nous avons créé une page web avec des lignes et des colonnes (en pourcentage %), qui réagit bien, on se rend vite compte que cela n’apparait pas bien sur un petit écran.
Les requêtes médias peuvent aider à cela. Nous pouvons ajouter un point d’arrêt où certaines parties du design se comporteront différemment de chaque côté du point d’arrêt.
En savoir plus sur les requêtes média :
- Responsive Web Design – Media Queries sur W3Schools
- CSS3 : les Media-Queries sur mammouthland.fr
Le menu hamburger
Le menu hamburger a été très critiqué au fil des ans, certains pour des raisons légitimes, d’autres non. L’une des raisons de sa controverse est simplement qu’il est très populaire sur toutes sortes d’applications. Une écrasante majorité des publications que nous avons vues en ligne ne semblent être qu’un déni unilatéral de l’élément populaire de l’interface utilisateur, alors qu’en réalité, ils constituent un outil très utile à intégrer à votre application. Il y a une raison pour laquelle beaucoup des meilleures applications les utilisent toujours sous une forme ou une autre.
Donc, voici ce que nous allons faire à la place. Nous allons exposer tous les avantages et les inconvénients du menu hamburger, vous poser les bonnes questions et les bons critères d’évaluation pour trouver la bonne solution, et vous proposer sept des meilleures alternatives au hamburger.
En savoir plus sur le menu hamburger dans cette très intéressante publication.
Voilà le CSS que nous avons mis en place pour que notre menu hamburger fonctionne sans javaScript.
Vous pouvez retrouver le Pen original que nous avons modifié pour créer notre menu.
Merci pour votre attention. Dans le prochain et dernier article de cette série, on bouclera avec la dernière partie qui est la publication du site et son test en grandeur nature.
Si c’est trop long, achetez mon livre sur la création de site web
La création d’un site web aujourd’hui peut se faire sans taper une seule ligne de code. Malgré le fait que les outils aujourd’hui sont démocratisés, le résultat est souvent moche.
Répondez honnêtement à ces questions :
- Vous est-il déjà arrivé de tomber sur le template du site web de vos rêves ?
- Après de longues heures de personnalisation vous vous retrouviez avec quelque chose de moche ?
Eh bien, vous n’êtes pas seuls. Il arrive très souvent que les clients (utilisateurs) de ces constructeurs de site soient séduits pas un template, se le procurent, l’utilisent et le rendent méconnaissable (moche ? 🤪). Ce qui finit tôt ou tard par créer de la frustration. Ce livre est fait pour que la frustration disparaisse. 🤞🏾