Les grilles macro typo pour le web ? facile !

Marie GuillaumetVincent Valentin

Paris Web20 octobre 2012

Les grilles macro-typopour le web ? Facile !

1

Grilles macro-typo /184

Qui sommes-nous ?

2


Marie Guillaumet

Qui sommes-nous ?

3

Web designer etdéveloppeur web front-end

http://marieguillaumet.com/@kreestal

bit.ly/site-marie

http://www.marieguillaumet.com

http://www.marieguillaumet.com


Vincent Valentin

Qui sommes-nous ?

4

http://www.htmlzengarden.com/@htmlzg

Développeur web front-end

bit.ly/site-vincent

http://www.htmlzengarden.com

http://www.htmlzengarden.com


Retour d’expérience

Avant-propos

++pragmatisme−−démonstrations techniques avancées

5


Plan d’attaque !

1.La grille toute puissante2.Concevoir sa grille3.La grille dans la pratique

6


Objectifs

• Donner envie aux développeurs web front-end et aux web designers d’utiliser la grille

• Fournir une méthodologie de travail

7


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.

8


Quelques définitions

9


Colonnes



Gouttières





Ligne de base


Ligne de base




La grille toute puissantePremière partie

20


Print vs Web :

•une filiation évidente

•un fossé technique immense

21


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.

22



Un outil commun : la grille.

Unité. Harmonie. Rythme.

24


++ Lisibilité++ Accessibilité++ Capitaliser sur l'apprentissage

Offrir au regard des contenus clairs, agréables à lire, dans lesquels on se repère aisément.

25


La grille dans l’histoire

26


3400 avant J.C. : écritures cunéiformes

Écriture et architecture

27



2670 à 2450 avant J.C. : pyramides de Guizeh, construites avec le nombre d'or


29



449 à 438 avant J.C. : le Parthénon

Optique, proportions, nombre d'or


31



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.

33


MondrianComposition avec jaune, bleu et rouge(1939-1942)

34


MorelletReflets dans l’eau déformés par le spectateur(1964)

35


BurenLes deux plateaux(1996)

36



Style suisse : prise de pouvoir de l’utilitaire sur l’expression personnelle.

Utilisation systématique de la grille.

Graphisme contemporain

38


Emil Ruder(1914–1970)

39


Emil Ruder(1914–1970)

40


Josef Müller-Brockmann(1914–1996)

41


Josef Müller-Brockmann(1914–1996)

42


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.

43


Appuyons-nous sur ces principes plastiques fiables.

Affinons notre regard à la lumière de cet héritage pluridisciplinaire.

44


Forte densité de contenus+ Minification des périphériques+ Interfaces tactiles

45

= Intimité accrue de notre rapport au média web.


Les web designers et la grille :une histoire passionnelle !

46


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

47


La grille est un squelette

50

une charpente

un guide


1. Combattre l’angoisse de la page blanche2. Assurer harmonie, unité et cohérence3. Gagner du temps4. Casser le rythme5. Faciliter le travail en équipe

Les avantages de la grille :

51


Concevoir sa grilleDeuxième partie

52


Il n'existe pas une grille.

Il existe une infinité de grilles.

53


À chaque web designer de concevoir sa grille en fonction du contenu du site et de ses choix esthétiques.

54


C’est l’usage du site qui doit prévaloir dans le choix de la grille.

55


Quelle grille choisir ?

Deux approches :1. Grille fluide ou élastique

2. Grille à largeur fixe

56


Définir sa grille


Grille verticale

•largeur de page•largeur de gouttière•largeur de colonne•nombre de colonnes

Définir sa grille


Définir sa grille

Grille verticale



Grille verticale Grille horizontale


•corps de texte•hauteur de ligne

Définir sa grille





61

Définir sa grille




62

Définir sa grille



Définir sa grille

•S’aider de formules•S’aider d’outils visuels

63


Démonstration

64

bit.ly/grid-calcbit.ly/scale-rhythm


Définir sa grille : choisir

•Grille verticale en unités absolues•Grille horizontale en unités relatives

65


Démonstration

66

bit.ly/marges-px-em


Et pour le RWD ?

•Écrans larges : tailles maîtrisées

•Écrans mobiles : pas d’espace à perdre

67


Configurer sa grille :

http://www.guideguide.me/

68

Photoshop + GuideGuide

bit.ly/guide-guide




Démonstration

bit.ly/guide-guide


Attention !

1.Choisir un interlignage égal à la largeurdes gouttières

2.Placer le texte entre les lignes de base

70


La grille sur le web : exemples

71


Grille à colonnes égales

++Grille adaptable à toutes les situations−−La plus courante

72


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

82


http://www.hattienewman.co.uk/

bit.ly/hattie-newman

http://pinterest.com





http://promisetangeman.com/

bit.ly/promise-tangeman

http://promisetangeman.com

http://promisetangeman.com




http://volumique.com/v2/

bit.ly/volumique-v2






http://manchesterwire.co.uk/

bit.ly/manchester-wire

http://manchesterwire.co.uk

http://manchesterwire.co.uk




Grille modulaire « éclatée »

Le meilleur des deux mondes ?

93


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.

100


Fonctionnement CSS

101


Grille verticale

102


Grille verticale.col{width: 60px;float: left; /* + hack si nécessaire */margin-right: 20px;

}

103


Grille verticale#aside{width: 300px; /* (60 * 4) + (20 * 3) */float: left;margin-right: 20px;

}

104


Grille verticale.col{width: 60px;float: left;margin-left: 20px;

}

105


Grille verticale.col{width: 60px;float: left;margin-left: 10px;margin-right: 10px;

}

106


Grille verticale.first-child /* ou :first-child */{margin-left: 0;}

.last-child{margin-right: 0;}

107


Grille horizontale

108


Grille horizontale – Rythme initial

html{font-size: 100,01%;}

body{font-size: 0.875em; /* soit 14 pixels */line-height: 1.42867em; /* soit 20 pixels */

}

109


Grille horizontalep /* le body est fixé à 14 pixels */{font-size: 1em; /* soit 14 pixels */line-height: 1.42867em; /* soit 20 pixels */margin-bottom: 1.42867em;

}

110


Grille horizontale

111

p{font-size: 1em;line-height: 1.42867em; /* soit 20 pixels */margin-top: 1.42867em;

}


Grille horizontale

112

p{font-size: 1em;line-height: 1.42867em; /* soit 20 pixels */margin-top: 1.42867em; /* fusion */margin-bottom: 1.42867em;

}


Techniques un peu plus avancées

113


Grille verticale

114


Grille verticale.gutter-border{margin-right: 10px; /* 10 + (60 / 2) */padding-right: 9px; /* 9 + (60 / 2) */border-right: 1px solid pink;

}


.col-border{margin-right: 40px; /* 10 + (60 / 2) */padding-right: 39px; /* 9 + (60 / 2) */border-right: 1px solid pink;

}

116

Grille verticale


Grille horizontale


p{font-size: 1em; /* soit 14 pixels */line-height: 1.42867em; /* soit 20 px */margin-bottom: 1.42867em;

}

118

Grille horizontale


p{font-size: 2em; /* soit 28 pixels */line-height: 0.71428em; /* 1.42em / 2 */margin-bottom: 0.71428em;

}

119

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;

}

120

Grille horizontale


Démonstration

121

bit.ly/em-calculator


p strong /* p est à 28 pixels */{font-size: 1em; /* on obtient 28 pixels */font-size: ?em; /* on veut 32 pixels */line-height: ?em; /* on veut 20 pixels */margin-bottom: ?em;

}

122

Grille horizontale



}

123

Grille horizontale



}

124

Grille horizontale



}

32/28

125

Grille horizontale


p strong /* p est à 28 pixels */{font-size: 32/28em; /* soit 32 pixels */line-height: ?em; /* on veut 20 pixels */margin-bottom: ?em;

}

126

Grille horizontale


p strong /* p est à 28 pixels */{font-size: 32/28em; /* soit 32 pixels */line-height: 1em; /* on obtient 32 pixels */line-height: ?em; /* on veut 20 pixels */margin-bottom: ?em;

}

127

Grille horizontale



}

128

Grille horizontale



}

20/32

129

Grille horizontale


p strong /* p est à 28 pixels */{font-size: 32/28em; /* soit 32 pixels */line-height: 20/32em; /* soit 20 pixels */margin-bottom: 20/32em;

}

130

Grille horizontale


De bons outils

131


Normalize.css

132

• Définir une base de travail• Disponible en deux versions

bit.ly/normalize-demo


Préprocesseurs CSS


•Calculs simples•Tâches répétitives

134

Préprocesseurs CSS


•Variables•Calculs•Fonctions•Héritage•Imbrications

135

Préprocesseurs CSS


•Less•Sass (Sass et SassyCSS)•Compass

•Stylus

136

Préprocesseurs CSS


• adjust-font-size-to• padding-leader / margin-leader• padding-trailer / margin-trailer• establish-baseline• Etc.

Préprocesseurs CSS – Mixins

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.


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 – Texte


#content {#sidebar {.span(4);.first;

}#article {.span(6);

}}

<div id="content"><div id="sidebar">

<p>…</p><p>…</p>

</div><div id="article">

<p>…</p></div>

</div>

Préprocesseurs CSS – Colonnes


#article {.span(8);@media tablet {.span(4);

}@media smartphone {float: none; width: auto; .first;

}}

Préprocesseurs CSS – RWD


Préprocesseurs CSS – Configuration

144

$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

145

• Contrôle de la grille• Aucune image, tout en CSS• À supprimer en production

bit.ly/hash-grid


Démonstration

146

bit.ly/hash-grid-demo


• Tout-terrain• Divisible• Modulaire• Souple

147

La grille que nous vous proposons

Colonnes de60 pixels

Gouttières de 20 pixels

Page :980 pixels

Interlignage20 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.

Corps de texte14 pixels




Dans la pratiqueTroisième partie

164


Tout doit-il être aligné sur la grille ?

165

Non !

•Ce n’est pas toujours possible•Ce n’est pas toujours souhaité


Mon rythme vertical est cassé

166



167



168


Mon rythme vertical est cassé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.

169






170




Lorem ipsum dolor sit amet, consectetur



171







172






173




Lorem ipsum

Dolor sit amet



174





•Compenser les pixels ajoutés•Fixer des hauteurs•Faire les calculs automatiquement

Réparer le rythme vertical

175


#foo{! border-bottom: 10px solid pink;

}

Compenser les pixels ajoutés

176


#foo{! border-bottom: 10px solid pink;! margin-top: -10px;

}


177


#foo{! border-bottom: 10px solid pink;! margin-top: -10px;! position: relative;! top: 10px;}


178


@mixin border-bottom($width: 1px, $style: solid, $color: black){! border-bottom: $width $style $color;! margin-top: $width * -1;! position: relative;! top: $width;}


179


#foo{! .border-bottom! (10px, solid, pink);}


180


•Toujours travailler avec des unités relatives

•Préférer les hauteurs minimales aux hauteurs fixes

Fixer des hauteurs

181


jquery.baseline.js

Faire les calculs automatiquement

• Aucune configuration nécessaire• Des conteneurs parents pour rétablir le

rythme• Résultats avec des unités relatives

• Exemple : $('img, table').baseline();

182

bit.ly/jquery-baseline


Conclusion

183


Merci ! :-) bit.ly/grilles-faciles

184

@kreestal@htmlzg

http://bit.ly/grilles-faciles




Technology

Les grilles macro typo pour le web ? facile !