Archives du mot-clé design Web

Créer une grille de mise en page

S’il vous arrive régulièrement de mettre en page des brochures, des affiches ou même des sites Web, vous êtes très probablement familier avec les grilles de mise en page.

Si vous ne l’êtes pas, vous allez vite le devenir. Les grilles de mise en page sont un atout majeur (voire essentiel) pour achever un travail de mise en page de manière parfaitement structurée et ordonnée.

Plusieurs types de grilles existent ; en passant par les simples grilles basées sur la règle d’or (ou la règle des tiers) jusqu’aux grilles modulaires complexes. Ces dernières sont difficiles à mettre en place, car un certain calcul mathématique s’impose. Heureusement, il existe de nombreux outils pour vous aider à y parvenir.

Dans cet article, je vous présenterai Gridelicious, un outil en ligne fait en Javascript qui vous permet de calculer simplement et facilement des chiffres bien pratiques, vous allez vite vous en apercevoir…

Gridelicious est, il faut le spécifier, une alternative gratuite et moins complète de Grid Calculator. Grid Calculator vous permet d’aller un peu plus loin dans vos calculs, et de le faire de manière plus fluide (un logiciel est toujours plus aisé et pratique qu’une application Web), mais comme ils demandent un sacré prix (45 $), les plus démunis d’entre nous se contenteront aisément de Gridelicious, qui a vu le jour justement grâce à quelqu’un qui s’est indigné contre le prix de Grid Calculator.

Pour l’exemple, nous utiliserons un format bien standard : Lettre US, et nous utiliserons InDesign, bien que le principe soit certainement applicable à plusieurs autres applications professionelles de mise en page. Ces directives vous permetteront de créer facilement une mise en page « modulable »; il est possible d’aller plus loin évidemment, mais c’est un bon début. Au fait, les noms des menus InDesign sont donnés en français, mais si vous avez une version anglaise et que vous trouvez pas, parlez-en dans les commentaires de cet article, on trouvera bien pour vous. Il peut s’avérer commode également de mettre ses unités de règles en points pour l’exercice (ou en mm selon ce que vous utilisez), ainsi que d’activer le magnétisme des grilles.

  1. Créez donc un nouveau document dans InDesign, de 8,5" x 11" (Lettre US, mais libre à vous amis français de mettre du A4 et d’entrer les valeurs en conséquence lorsque le moment sera venu). Mettre toutes les marges à 0 pour un peu de propreté durant l’exercice.
  2. Créez une boîte de texte, mettez-y du texte bidon (Lorem Ipsum). Paramétrez au passage la fonte, la taille et surtout l’interligne que vous désirez. Cette étape est important car l’interligne est la pierre angulaire de tout le calcul.
  3. Du côté de Gridelicious, choisissez d’abord Inches à Page Measurement Units.
  4. Entrez 8.5 et 11 à Width et Height (sous la section Page size).
  5. Disons que je choisis 14 pts comme interligne. On l’inscrit dans la case Desired Leading, juste dessous.
  6. Surprise, y’a des champs qui s’auto-remplissent avec des valeurs tout ce qu’il y a de bizarres, dont 2 plutôt importants :
    Correct Leading (13.895 pt) : Ceci est votre valeur d’interligne corrigée pour que le calcul fonctionne. C’est le chiffre-clé.
    Baselines
    (57) : Ceci est le nombre de lignes de bases dans le document, pour cet interligne corrigé.
  7. De retour dans InDesign, armé de vos chiffres, faites InDesign > Préférences > Grilles…
  8. Sous Grille de ligne de base, mettre :
    Début 0
    Relative àHaut de page
    Pas : 13.895 pt (Correct Leading)
  9. Sous Grille du document, à horizontalement et verticalement, mettre :
    Pas : 13.895 pt
    Subdivisions : 1
  10. Faire OK, puis afficher la grille si vous n’en voyez aucune : Affichage > Grille et repères > Afficher la grille du document.
    Wow, une belle grille toute bien ajustée! C’est pas tout, il faut aussi déterminer la hauteur d’f. La hauteur d’f va vous aider à aligner parfaitement vos images avec la typographie. Vraiment, c’est génial, et on va foutre des repères partout pour ça, ça vaut le coup!
  11. Si vous avez créé un style de paragraphe pour votre texte bidon, modifiez-le afin d’avoir la bonne interligne corrigée, c’est-à-dire 13.895 pt dans notre exemple. Si vous n’aviez pas créé de style, faites-le sur le champs.
  12. Dans l’onglet Retrait et espacement du style, choisissez Toutes les lignes à Aligner sur la grille. Ceci force la typographie à l’aligner parfaitement sur votre belle grille toute neuve.
  13. Placez une boîte de texte en partant du bord du haut de la page, dans lequel vous tapez un f minuscule (avec le style de paragraphe précédemment paramétré). Votre f minuscule devrait maintenant être parfaitement aligné sur la ligne du bas de la grille.
  14. Pour obtenir une mesure tout ce qu’il y a d’exact, transformez votre lettre f en vecteurs : Texte > Vectoriser (avec la boîte de texte sélectionnée). Voilà donc le f devenu une forme vectorielle.
  15. Créez un nouveau calque appelé Hauteur f, plus en zoomant sur la lettre, descendez précisément un guide pour l’aligner parfaitement sur le dessus de la lettre f.
  16. Avec le guide toujours sélectionné, faites Édition > Exécuter et répéter et entrez ces valeurs :
    Nombre de répétitions : 57 (la valeur Images de tout à l’heure)
    Décalage vertical13.895 pt (Correct Leading)
  17. Cliquez sur OK (vous pouvez voir un aperçu juste avant pour être sûr que les guides couvrent la surface du document).
    Grille et hauteur d'f
  18. Voilà, vous avez une joli grille facile à utiliser, vous pouvez maintenant ajuster vos marges et colonnes selon votre bon goût. En passant, il est préférable d’aligner la marge du haut avec l’un des repères d’hauteur d’f.
    Alignement de texte et d'images

C’est tout pour l’instant, libre à vous d’aller plus loin, ce n’était qu’une introduction aux grilles de mise en page! Je remercie au passage mon pote de chez 3e Avenue qui m’a fait découvrir Grid Calculator.

Pour les plus feignants d’entres vous, je fournis même le fichier InDesign CS3 ayant servi à faire l’exemple :

Créer un favicon, une icône personnalisée

Un favicon est une icône qu’on peut attribuer à son site Internet. Elle est visible à gauche de l’adresse URL dans la barre d’adresse du navigateur, ainsi que dans les favoris. Un favicon permet de donner davantage de personnalité à votre site Web.

Comment ajouter un favicon pour votre propre site? très simple et rapide !

  1. Utilisez un logiciel pour la retouche d’image, (tel que Photoshop, Gimp, Corel Draw, Paint, …) et créez une image de 64×64 pixels. Vous pouvez aussi la faire d’une taille de 32×32 pixels, ou 16×16 pixels, mais 64×64 est préférable pour un favicon.
  2. Sauvegardez-la en format ICO, ou PNG, ou utilisez cet outil en ligne. Si ça peut influencer votre choix, Internet Explorer 6 ne reconnaît que les fichiers ICO.
  3. Ajoutez ceci entre la balise <head> et </head> de votre site web :



Vous devez simplement remplacer mon_favicon.png par le nom de votre image… et voilà, c’est aussi simple que ça!

Validation complète d’un site Web

Devant un site d’une centaine de pages que je souhaitais rendre standard, j’ai trouvé une réponse à ce problème. Il suffit de vous inscrire gratuitement, ajouter un ou plusieurs sites à valider, et lancer le rapport.

Free Site Validator détectera si des pages sont invalides selon les normes W3C, mais également si vous avez des liens morts, ce qui est très pratique dans un site dans le style grosse usine à gaz statique.

Effectuer une vérification complète peut être assez long (bien sûr, ça dépent du nombre de pages), mais ça vaut la peine. De cette façon, vous en avez le coeur net!

Tester votre site pour une résolution d’écran

Rien de plus énervant que de changer la résolution de votre écran, pour vérifier si votre site Web nouvellement créé "passe" dans une résolution d’écran quelconque (800×600, 1024×768).

De plus, ça met un foutoir terrible dans les palettes des logiciels qui avaient la malchance d’être ouverts à ce moment-là!

Voici un site utilisant un petit script très simple, qui vous permettra de faire les tests que vous voulez, beaucoup plus aisément. C’est simple, mais il fallait y penser. Ça ouvre une popup en javascript, aux dimensions de la résolution d’écran cible.

Vous pouvez facilement créer votre propre script… mais cet outil peut dépanner.