Web Design
Responsive
2526 · Dekens Antoine
Responsive design
Pour expliquer la gestion du responsive design nous allons partir d'un exemple qui sera un design desktop fictif :
12 colonnes, 96px de gouttières, 32px de marges, Montserrat (titres), Work Sans (textes)
Navigation
Desktop
Un des points les plus importants, et souvent complexe, est celui des menus de navigation. De manière générale nous avons un bandeau en haut de page avec un logo, un menu et/ou d'autres actions (login, intranet, etc.) en desktop.
Mobile
Sur mobile, la largeur étant réduite, le format bandeau ne convient plus. La solution que nous verrons est la plus répandue: avoir une version menu fermé avec un bouton permettant son ouverture, et une version menu ouvert avec les différentes actions.
Contenu
Desktop
Sur les écrans larges, nous avons plus d'espace et donc de libertée pour la mise en page. On peut jouer sur les alignements, les espacements et les positions de manière à créer un rythme dynamique.
Mobile
Comme la largeur est réduite, le placement des éléments se fait la plus part du temps de manière horizontale. On peut cependant prévoir certains éléments sur 2 colonnes, ou dans une zone de défilement horizontal de type swipe (slideshow).
Dans notre exemple nous avons un titre, du texte, et 3 cartes. Voyons comment les adapter :Titre & texte
Le corps de texte peut rester à la même taille (souvent entre 14px et 16px). Les titres doivent rester impactant, tout en évitant d'avoir un mot par ligne. Dans notre cas nous allons diminuer la taille. L'alignement centré fonctionne en mobile, par contre on va profiter de toute la largeur de notre grille.
Cartes
Ces éléments vont devoir évoluer, ils ne pourront pas rentrer tous sur la largeur de notre mobile. Plusieurs solutions existent dans ce cas, nous allons en voir 2 :
Cartes verticales
La première solution est de simplement mettre nos éléments les uns à la suite des autres verticalement. Les utilisateurs peuvent accéder au contenu en scrollant. Cette solution est la plus simple à mettre en place, mais est à préviligier si on a peu d'éléments dans notre section et peu de contenu à la suite.
Cartes horizontales
La seconde solution est transformer la section en un slideshow qui pourra être défilé horizontalement au swipe. Il faudra à minima rajouter un élément graphique pour se repérer, qui peut prendre la forme de points ou simplement de nombre. En terme d'accessibilité il serait judicieux de rajouter des boutons précédent et suivant.
Exercice
Adapter en mobile le design suivant, dans un iphone 13 & 14, 6 colonnes, 16px de gouttières et 32px de marges. Bien sûr, il va falloir créer une deuxième frame iphone 13 & 14 pour le design du menu ouvert.
