Grille modulaire pour périphériques mobiles (iPhone, Android, iPad)

La résolution des périphériques mobiles comme les téléphones mobiles, les Smartphones (iPhone, Android) et les tablettes tactiles (iPad) est généralement de l’ordre de 240 x 320, 320 x 480 ou 480 x 640 pixels. Après avoir décortiqué la création d’une grille de mise en page adaptée à la résolution moyenne des écrans de bureau et des Netbooks, je vous propose de suivre un autre exemple d’application de ce concept de grille modulaire dont la particularité est que la colonne de base est égale à la largeur de la gouttière.

← Précédemment dans css 4 design…

Avec les blancs tournants, la gouttière est un élément essentiel qui participe à l’équilibre d’une mise en page en colonnes. Elle fait office de contre-poinçon, de contre-forme pour le contenu,  et facilite la lecture et la recherche d’information, en plus de donner du rythme. C’est pourquoi, il me semble important que la largeur de cette gouttière ne soit pas simplement le modulo des calculs savants  qui ont servis à déterminer le nombre et la largeur des colonnes.

J’ai donc choisi d’associer la largeur de la gouttière à la hauteur de l’interligne et à la largeur d’une colonne de base pour obtenir une grille composée de carrés de 21 x 21 pixels (mais on peut choisir un autre interlignage sous réserve qu’il corresponde aux critères de lisibilité selon la taille des caractères). Ces modules serviront de matrice pour déterminer toute une multitude de colonnages. Dans l’article cité plus haut, j’obtient pas moins de 13 grilles différentes permettant des regroupements de colonnes divers et variés.

Mise en page pour mobiles

Le Web est multiple et son accès s’effectue dans des conditions qui échappent aux concepteurs de sites. Le Web mobile a le vent en poupe et cela n’est pas prêt de s’arrêter. Voici donc une adaptation de ma grille modulaire pour ces nouveaux périphériques dont la particularité est d’avoir des petits écrans.

Plusieurs exemples de grilles pour les formats les plus courants en matière de périphérique mobile ou tactile.

Pour les besoins de l’exemple, j’ai choisi un interlignage de 20 pixels qui donne des comptes ronds vu que les résolutions sont des multiples de 10. Au cas où, voici les étapes à suivre dans Illustrator :

1. Créer un document au format 320 x480,
2. Faites glissez l’angle supérieur droit situé à l’intersection des règles (Ctrl + R) verticales et horizontales jusqu’au bord supérieur gauche du document pour définir les coordonnées x et y le cas échéant,
3. Sélectionnez l’Outil Trait (T), cliquez et précisez la longueur (320 px),
4. Ajustez le placement du trait aux coordonnées  x : 0 px et y : 0 px,
5. Choisisez une couleur de contour (#cccccc) et une épaisseur (0.5 pt),
6. Copiez ce trait  vers le bas : Ctrl + Maj + M (Horizontale : 0, Verticale : -20 px, Distance : 20 px et Angle : -90) et cliquez sur Copier,
7. Dupliquez-le avec Ctrl + D autant de fois que nécessaire.

Voici une grille vite fait bien faite pour l’iPhone. Cliquez sur l’image pour voir l’animation 😉

Pour les colonnes, les étapes ressemblent à la duplication des colonnes, à ceci près qu’il faut choisir l’Outil Rectangle (M) et spécifier une largeur de 20 pixels et une hauteur de 480 pixels. Dupliquez cette première colonne 7 fois, sélectionnez-les toutes et déplacez-les de 10 pixels vers la droite de manière à laisser des marges correctes de part et d’autre. Choisissez les couleurs qui vous conviennent et voilà !

Le bonheur est dans la gouttière

La largeur de la gouttière est donc un bon point de départ pour créer un gabarit de mise en page pour le Web. Ce qui m’amène à faire une proposition simple : plus que la gouttière ou tout autre élément, c’est la largeur totale de l’empagement qui doit servir de variable d’ajustement.