alt

Systèmes de grilles et design responsive

golden-grid

Proposer une version du site ou de l’application web adaptée à tous les terminaux est indispensable. Le marché du smartphone est aujourd’hui incontournable, tous nos sites ont passé la barre des 20% de visites via mobile.

« Ce qui nous passionne chez Antistatique, c’est expérimenter, trouver la meilleure solution et oser la remettre en question. »

À ce petit jeu, la communauté web et les développeurs sont des as. En 1999, nous faisions des sites fluides s’adaptant à tous les écrans de l’époque. Une mise en page avec des tableaux et des tailles en pour cent. Puis, dans des heures plus sombres, des tailles fixes étaient spécifiées pour chaque cellule, chaque élément. Ceci afin de garantir un affichage respectant les maquettes pixel par pixel.

Eric Meyer, passage aux CSS et sémantique web.

Puis arrivèrent les CSS et standards du web avec la mise en page séparée du contenu ; un contenu qui est mis en page pour plusieurs usages (web, mobile, impression, TV, etc.). Du coup, nous avons regardé avec une certaine méfiance les 960.gs et autres systèmes de grille qui proposent de spécifier l’arrangement des colonnes dans le code HTML. Nous les avons utilisés sur certains projets en toute conscience du problème de sémantique posé. Pourquoi ? Le design intégrait une grille dès la conception, l’usage de l’HTML était clairement défini pour le site.

Finalement ne pas appliquer de façon stricte la pensée académique sur la sémantique dans les attributs class des éléments permet une plus grande souplesse dans le développement.

Semantic grid system – usage des class et grilles responsives

Par la suite, différentes grilles responsive ont vu le jour. Par exemple, celle de twitter bootstrap, une autre basée sur une largeur de 1140, le nombre d’or ou encore avec une méthode qui garantit la sémantique du code HTML. Ces frameworks sont pratiques et permettent d’obtenir rapidement des versions pour tous les écrans. Nous les avons testés et utilisés pour des projets, en fonction des contraintes graphiques initiales. Dans l’ensemble, ces outils permettent de réaliser plus vite l’intégration HTML/CSS mais il est nécessaire de tester et ajuster certains comportements pour garantir une navigation optimum dans toutes les tailles.

Grille infinie et au-delà

Dans ce contexte, des points de chute sont définis pour chaque taille d’écran populaire. On parle de largeur mobile, tablette et écran par exemple. Mais une grille infinie s’adapte à la largeur pour chaque largeur d’écran et non selon des bornes définies par le marché actuel. On parle alors de grilles fluides.
Dans la réalisation d’un site responsive, la disposition des éléments pour tous les écrans doit être réfléchie. Elle s’effectue selon les contraintes suivantes :

  • les différents types d’interactions (tactile, souris, genres de menus, etc.)
  • la densité des éléments (quel niveau de détail)
  • la hiérarchie (menu, contenu, actions)
  • le viewport (largeur d´écran, zoom)

Je vous invite à lire l’article sur les grilles infinies de Chris Armstrong sur A List Apart pour en apprendre davantage.

Image prise sur goldengridsystem.com