Les Grilles Macro-Typo Pour Le Web Facile

Les grilles macro-typo
pour le web ? Facile !

Marie Guillaumet
Vincent Valentin
Paris Web
20 octobre 2012
1
Grilles macro-typo 2 /184
Qui sommes-nous ?
Qui sommes-nous ?
Marie Guillaumet
Web designer et
développeur web front-end
http://marieguillaumet.com/
@kreestal
bit.ly/site-marie
Qui sommes-nous ?
Vincent Valentin
Développeur web front-end
http://www.htmlzengarden.com/
@htmlzg
bit.ly/site-vincent
Avant-propos
Retour d’expérience
++pragmatisme
−−démonstrations techniques avancées
Plan d’attaque !
1.La grille toute puissante
2.Concevoir sa grille
3.La grille dans la pratique
Objectifs
• Donner envie aux développeurs web

front-end et aux web designers
d’utiliser la grille
• Fournir une méthodologie de travail
N’oubliez pas !
N’hésitez pas à nous interrompre si vous
avez des questions.
Toutes les ressources évoquées seront

réunies sur une page web dédiée.
Quelques définitions
Grilles macro-typo /184
Colonnes
Gouttières
Ligne de base
Ligne de base
Première partie
La grille toute puissante
Print vs Web :
•une filiation évidente
•un fossé technique immense
La page web n'a pas de

dimensions réelles.
Mais le besoin d'unité est le

même, en print comme sur le web.
Un outil commun : la grille.
Unité. Harmonie. Rythme.

Offrir au regard des contenus

clairs, agréables à lire, dans
lesquels on se repère aisément.
++ Lisibilité
++ Accessibilité
++ Capitaliser sur l'apprentissage
La grille dans l’histoire

Écriture et architecture
3400 avant J.C. : écritures cunéiformes
2670 à 2450 avant J.C. : pyramides de
Guizeh, construites avec le nombre d'or
449 à 438 avant J.C. : le Parthénon
Optique, proportions, nombre d'or

Les repères linéaires sont des

outils précieux dans l'histoire de
l'art.
L'art moderne a fait de la grille,

outil invisible, une œuvre à part
entière.
Mondrian
Composition avec
jaune, bleu et rouge
(1939-1942)
Morellet
Reflets dans l’eau
déformés par
le spectateur
(1964)
Buren
Les deux plateaux
(1996)
Graphisme contemporain
Style suisse : prise de pouvoir de
l’utilitaire sur l’expression personnelle.
Utilisation systématique de la grille.

Emil Ruder
(1914–1970)
Emil Ruder
(1914–1970)
Josef Müller-
Brockmann
(1914–1996)
Josef Müller-
Brockmann
(1914–1996)
Le métier de web designer est un

métier de conception.
Le rôle du design est de répondre

à des besoins et de résoudre des
problèmes avec des solutions
innovantes.
Appuyons-nous sur ces principes

plastiques fiables.
Affinons notre regard à la lumière

de cet héritage pluridisciplinaire.
Forte densité de contenus

+ Minification des périphériques
+ Interfaces tactiles
= Intimité accrue de notre rapport
au média web.
Les web designers et la grille :

une histoire passionnelle !
La grille, un frein à la créativité ?

La grille est un squelette

une charpente
un guide
Les avantages de la grille :

1. Combattre l’angoisse de la page blanche
2. Assurer harmonie, unité et cohérence
3. Gagner du temps
4. Casser le rythme
5. Faciliter le travail en équipe
Deuxième partie
Concevoir sa grille
Il n'existe pas une grille.
Il existe une infinité de grilles.

À chaque web designer de

concevoir sa grille en fonction du
contenu du site et de ses choix
esthétiques.
C’est l’usage du site qui doit

prévaloir dans le choix de la grille.
Quelle grille choisir ?

Deux approches :
1. Grille fluide ou élastique
2. Grille à largeur fixe
Définir sa grille
Définir sa grille
Grille verticale
•largeur de page
•largeur de gouttière
•largeur de colonne
•nombre de colonnes
Définir sa grille
Grille verticale
•largeur de page
•largeur de gouttière
Définir sa grille
Grille verticale Grille horizontale
•largeur de page •corps de texte

•largeur de gouttière •hauteur de ligne
Définir sa grille

Définir sa grille

Définir sa grille
•S’aider de formules
•S’aider d’outils visuels
Démonstration
bit.ly/grid-calc
bit.ly/scale-rhythm
Définir sa grille : choisir
•Grille verticale en unités absolues

•Grille horizontale en unités relatives
Démonstration
bit.ly/marges-px-em
Et pour le RWD ?
•Écrans larges : tailles maîtrisées
•Écrans mobiles : pas d’espace à perdre
Configurer sa grille :
Photoshop
+ GuideGuide
http://www.guideguide.me/
bit.ly/guide-guide
Démonstration
bit.ly/guide-guide
Attention !
1. Choisir un interlignage égal à la largeur
des gouttières
2. Placer le texte entre les lignes de base

La grille sur le web : exemples

Grille à colonnes égales
++Grille adaptable à toutes les situations

−−La plus courante
http://www.lyon.archi.fr/
bit.ly/lyon-archi
http://www.enssib.fr/
bit.ly/école-enssib
http://www.foncia-location-vacances.fr/
bit.ly/foncia-vacances
Grille modulaire
++Qualités graphiques et organisationnelles

−−Suppose des blocs de hauteur fixe
http://www.hattienewman.co.uk/
bit.ly/hattie-newman
http://promisetangeman.com/
bit.ly/promise-tangeman
http://volumique.com/v2/
bit.ly/volumique-v2
http://manchesterwire.co.uk/
bit.ly/manchester-wire
Grille modulaire « éclatée »
Le meilleur des deux mondes ?

http://pinterest.com/
bit.ly/grid-pinterest
http://www.flowfestival.com/
bit.ly/flow-festival
D’autres expérimentations sont

possibles :
• Grilles basées sur le nombre d’or
• Doubles grilles
• Grilles à colonnes inégales
• Etc.
Fonctionnement CSS
Grille verticale
Grille verticale
.col
{
width: 60px;
float: left; /* + hack si nécessaire */
margin-right: 20px;
}
Grille verticale
#aside
{
width: 300px; /* (60 * 4) + (20 * 3) */
float: left;
margin-right: 20px;
}
Grille verticale
.col
{
width: 60px;
float: left;
margin-left: 20px;
}
Grille verticale
.col
{
width: 60px;
float: left;
margin-left: 10px;
margin-right: 10px;
}
Grille verticale
.first-child /* ou :first-child */
{margin-left: 0;}
.last-child
{margin-right: 0;}
Grille horizontale
Grille horizontale – Rythme initial

html{font-size: 100,01%;}
body
{
font-size: 0.875em; /* soit 14 pixels */
line-height: 1.42867em; /* soit 20 pixels */
}
Grille horizontale
p /* le body est fixé à 14 pixels */
{
font-size: 1em; /* soit 14 pixels */
margin-bottom: 1.42867em;
}
Grille horizontale
p
{
font-size: 1em;
margin-top: 1.42867em;
}
Grille horizontale
p
{
font-size: 1em;
margin-top: 1.42867em; /* fusion */
}
Techniques un peu plus avancées

Grille verticale
Grille verticale
.gutter-border
{
margin-right: 10px; /* 10 + (60 / 2) */
padding-right: 9px; /* 9 + (60 / 2) */
border-right: 1px solid pink;
}
Grille verticale
.col-border
{
margin-right: 40px; /* 10 + (60 / 2) */
padding-right: 39px; /* 9 + (60 / 2) */
border-right: 1px solid pink;
}
Grille horizontale
Grille horizontale
p
{
line-height: 1.42867em; /* soit 20 px */
}
Grille horizontale
p
{
line-height: 0.71428em; /* 1.42em / 2 */
}
Grille horizontale
p strong /* p est à 28 pixels */
{
font-size: ?em; /* on veut 32 pixels */
line-height: ?em; /* on veut 20 pixels */
margin-bottom: ?em;
}
Démonstration
bit.ly/em-calculator
Grille horizontale
{
font-size: 1em; /* on obtient 28 pixels */
margin-bottom: ?em;
}
Grille horizontale
{
margin-bottom: ?em;
}
Grille horizontale
{
margin-bottom: ?em;
}
Grille horizontale
{
32/28
margin-bottom: ?em;
}
Grille horizontale
{
font-size: 32/28em; /* soit 32 pixels */
margin-bottom: ?em;
}
Grille horizontale
{
line-height: 1em; /* on obtient 32 pixels */
margin-bottom: ?em;
}
Grille horizontale
{
margin-bottom: ?em;
}
Grille horizontale
{
20/32
margin-bottom: ?em;
}
Grille horizontale
{
line-height: 20/32em; /* soit 20 pixels */
margin-bottom: 20/32em;
}
De bons outils
Normalize.css
• Définir une base de travail
• Disponible en deux versions
bit.ly/normalize-demo
Préprocesseurs CSS
Préprocesseurs CSS
•Calculs simples
•Tâches répétitives
Préprocesseurs CSS
•Variables
•Calculs
•Fonctions
•Héritage
•Imbrications
Préprocesseurs CSS
•Less
•Sass (Sass et SassyCSS)
•Compass
•Stylus
Préprocesseurs CSS – Mixins

• adjust-font-size-to
• padding-leader / margin-leader
• padding-trailer / margin-trailer
• establish-baseline
• Etc.
bit.ly/compass-rhythm
Préprocesseurs CSS – Mixins réécrits

• font-size
• padding-top / margin-top
• padding-bottom / margin-bottom
• line-height
• Etc.
Préprocesseurs CSS – Mixins ajoutés

• position-top / position-bottom
• height / line-height
• border-top / border-bottom
• bloc
• Etc.
Préprocesseurs CSS – Texte

p {
$fs1: 28px;
.font-size($fs1);
.line-height($fs1); .margin-bottom($fs1);
strong {
$fs2: 32px;
.font-size($fs2, $fs1);
.line-height($fs2, $fs1); .margin-bottom($fs2,
$fs1);
}
}
Préprocesseurs CSS – Texte

p {
$fs1: 28px;
.bloc($fs1);
strong {
$fs2: 32px;
.bloc($fs2, $fs1);
}
}
Préprocesseurs CSS – Colonnes

#content { <div id="content">
#sidebar { <div id="sidebar">
.span(4); <p>…</p>
.first; <p>…</p>
} </div>
#article { <div id="article">
.span(6); <p>…</p>
} </div>
} </div>
Préprocesseurs CSS – RWD

#article {
.span(8);
@media tablet {
.span(4);
}
@media smartphone {
float: none; width: auto; .first;
}
}
Préprocesseurs CSS – Configuration

$base-font-size: 14px;
$base-line-height: 20px;
$grid-width: 60px;
$grid-margin: 20px;
$grid-columns-desktop: 12;
$grid-columns-tablet: 10;
$grid-columns-mobile: 1;
#grid
• Contrôle de la grille
• Aucune image, tout en CSS
• À supprimer en production
bit.ly/hash-grid
Démonstration
bit.ly/hash-grid-demo
La grille que nous vous proposons

• Tout-terrain
• Divisible
• Modulaire
• Souple
Colonnes de
60 pixels
Gouttières de
20 pixels
Page :
980 pixels
Interlignage
20 pixels
Corps de texte
14 pixels
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Troisième partie
Dans la pratique
Tout doit-il être aligné sur

la grille ?
Non !
•Ce n’est pas toujours possible

•Ce n’est pas toujours souhaité
Mon rythme vertical est cassé




Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sit
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis amet, consectetur
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. adipisicing elit, sed do
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu eiusmod tempor incididunt
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in ut labore et dolore magna
culpa qui officia deserunt mollit anim id est laborum. aliqua. Ut enim ad minim
veniam, quis nostrud
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor exercitation ullamco
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis laboris nisi ut aliquip ex ea
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. commodo consequat. Duis
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu aute irure dolor in
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in reprehenderit in voluptate
culpa qui officia deserunt mollit anim id est laborum. velit esse cillum dolore eu
fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Excepteur sint occaecat
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis cupidatat non proident,
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. sunt in culpa qui officia
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu deserunt mollit anim id est
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in laborum.

Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetur

adipisicing elit, sed do
eiusmod tempor incididunt
amet, consectetur ut labore et dolore magna

aliqua. Ut enim ad minim
exercitation ullamco
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
laboris nisi ut aliquip ex ea
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
commodo consequat. Duis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
aute irure dolor in
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
reprehenderit in voluptate
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
velit esse cillum dolore eu
Excepteur sint occaecat
cupidatat non proident,
sunt in culpa qui officia
deserunt mollit anim id est
laborum.

aute irure dolor in
laborum.

aute irure dolor in
laborum.

Lorem ipsum laboris nisi ut aliquip ex ea
aute irure dolor in
Dolor sit amet reprehenderit in voluptate
laborum.

aute irure dolor in
laborum.
Réparer le rythme vertical
•Compenser les pixels ajoutés

•Fixer des hauteurs
•Faire les calculs automatiquement
Compenser les pixels ajoutés
#foo
{
! border-bottom: 10px solid pink;
}
#foo
{
! margin-top: -10px;
}
#foo
{
! margin-top: -10px;
! position: relative;
! top: 10px;
}
@mixin border-bottom($width: 1px,

$style: solid, $color: black){
! border-bottom: $width $style $color;
! margin-top: $width * -1;
! position: relative;
! top: $width;
}
#foo
{
! .border-bottom
! (10px, solid, pink);
}
Fixer des hauteurs
•Toujours travailler avec des unités

relatives
•Préférer les hauteurs minimales aux
hauteurs fixes
Faire les calculs automatiquement

jquery.baseline.js
• Aucune configuration nécessaire

• Des conteneurs parents pour rétablir le
rythme
• Résultats avec des unités relatives
• Exemple : $('img, table').baseline();
bit.ly/jquery-baseline
Conclusion
Merci ! :-) bit.ly/grilles-faciles
@kreestal
@htmlzg

Les Grilles Macro-Typo Pour Le Web Facile

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Les Grilles Macro-Typo Pour Le Web Facile

Transféré par

Droits d'auteur :

Formats disponibles

Les grilles macro-typo

pour le web ? Facile !

• Donner envie aux développeurs web

Toutes les ressources évoquées seront

La page web n'a pas de

Mais le besoin d'unité est le

Un outil commun : la grille.

Unité. Harmonie. Rythme.

Offrir au regard des contenus

La grille dans l’histoire

Optique, proportions, nombre d'or

Les repères linéaires sont des

L'art moderne a fait de la grille,

Utilisation systématique de la grille.

Le métier de web designer est un

Le rôle du design est de répondre

Appuyons-nous sur ces principes

Affinons notre regard à la lumière

Forte densité de contenus

Les web designers et la grille :

La grille, un frein à la créativité ?

La grille est un squelette

Les avantages de la grille :

Il n'existe pas une grille.

Il existe une infinité de grilles.

À chaque web designer de

C’est l’usage du site qui doit

Quelle grille choisir ?

•largeur de page •corps de texte

•largeur de page •corps de texte

•largeur de page •corps de texte

Définir sa grille : choisir

•Grille verticale en unités absolues

2. Placer le texte entre les lignes de base

La grille sur le web : exemples

Grille à colonnes égales

++Grille adaptable à toutes les situations

++Qualités graphiques et organisationnelles

Grille modulaire « éclatée »

Le meilleur des deux mondes ?

D’autres expérimentations sont

Grille horizontale – Rythme initial

Techniques un peu plus avancées

Préprocesseurs CSS – Mixins

Préprocesseurs CSS – Mixins réécrits

Préprocesseurs CSS – Mixins ajoutés

Préprocesseurs CSS – Texte

Préprocesseurs CSS – Texte

Préprocesseurs CSS – Colonnes

Préprocesseurs CSS – RWD

Préprocesseurs CSS – Configuration

La grille que nous vous proposons

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

Tout doit-il être aligné sur

•Ce n’est pas toujours possible

Mon rythme vertical est cassé

Mon rythme vertical est cassé

Mon rythme vertical est cassé

Mon rythme vertical est cassé

Mon rythme vertical est cassé

Lorem ipsum dolor sit amet, consectetur

amet, consectetur ut labore et dolore magna

Mon rythme vertical est cassé