Mobile Design — Réadapter un site en responsive

D’après le site du Lycée Costebelle à Hyères.

Réorganiser les blocs

Pour faire en sorte que le site soit responsive, il faudrait que les blocs soient réorganisés plutôt verticalement à partir d’un certain breakpoint. Par exemple, la colonne de gauche se place en haut du viewport, le contenu principal juste en-dessous, suivi de la colonne de droite. Le plus simple est de faire le design du site sur une colonne.

Simplifier le contenu

Une autre astuce serait tout simplement de simplifier le contenu en synthétisant et regroupant les informations. Il est également important de hiérarchiser.

Imaginer non pas un mais une infinité de designs

Il faudrait imaginer comment se comporte le design sur n’importe quelle résolution d’écran pour prévoir l’adaptation sur tous les designs. La meilleure option est de commencer par le design du mobile pour ensuite améliorer et ajouter des éléments du design pour des largeurs d’écran plus importantes.

S’intéresser au menu

Si le menu possède une largeur fixe, il faut commencer par enlever cet attribut pour que les éléments puissent se mettre les uns au-dessus des autres lorsque la largeur devient trop étroite.

Penser aux media queries

Le code est essentiel dans la réalisation d’un site mobile. Il faudrait utiliser des media queries et quelques attributs essentiels comme “width=device-width”.