Les grilles macro typo pour le web ? facile !

Marie GuillaumetVincent Valentin

Paris Web20 octobre 2012

Les grilles macro-typopour le web ? Facile !

Grilles macro-typo /184

Qui sommes-nous ?

Marie Guillaumet

Qui sommes-nous ?

Web designer etdéveloppeur web front-end

http://marieguillaumet.com/@kreestal

bit.ly/site-marie

Vincent Valentin

Qui sommes-nous ?

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

Développeur web front-end

bit.ly/site-vincent

Retour d’expérience

Avant-propos

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

Plan d’attaque !

1.La grille toute puissante2.Concevoir sa grille3.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

Colonnes

Gouttières

Ligne de base

La grille toute puissantePremière partie

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.

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

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

La grille dans l’histoire

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

Écriture et architecture

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.

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

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

BurenLes deux plateaux(1996)

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

Utilisation systématique de la grille.

Graphisme contemporain

Emil Ruder(1914–1970)

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

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 :

Concevoir sa grilleDeuxième partie

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

Grille verticale

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

Définir sa grille

Grille verticale

Grille verticale Grille horizontale

•corps de texte•hauteur de ligne

Définir sa grille

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

Démonstration

bit.ly/grid-calcbit.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 :

http://www.guideguide.me/

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

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 horizontalep /* le body est fixé à 14 pixels */{font-size: 1em; /* soit 14 pixels */line-height: 1.42867em; /* soit 20 pixels */margin-bottom: 1.42867em;

Grille horizontale

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

Grille horizontale

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

Grille verticale

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;

Grille verticale

Grille horizontale

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

Grille horizontale

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

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;

Grille horizontale

Démonstration

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;

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;

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;

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;

Grille horizontale

De bons outils

Normalize.css

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

bit.ly/normalize-demo

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

• 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><div id="article">

</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

$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;

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

bit.ly/hash-grid

Démonstration

bit.ly/hash-grid-demo

• Tout-terrain• Divisible• Modulaire• Souple

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

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

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

Mon rythme vertical est cassé

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.

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum

Dolor sit amet

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

Réparer le rythme vertical

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

Compenser les pixels ajoutés

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

#foo{! border-bottom: 10px solid pink;! 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);}

•Toujours travailler avec des unités relatives

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

Fixer des hauteurs

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();

bit.ly/jquery-baseline

Conclusion

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

@kreestal@htmlzg

Les grilles macro typo pour le web ? facile !

Technology

Anthologie Des Grilles

Perspectives macro 131_fr

Typo3 Support cours - gdidees.eu · GDIDEES ‐ Formation Typo 3 Page 5 Installation de Typo 3 a) Pour faire fonctionner typo3 il faut : ‐ un serveur Web (application qui répond

Grilles, Louvres & Diffusers

typo berlin création graphique

LA MACRO ETAPE

France Grilles 19 septembre 2013 …calcul.math.cnrs.fr/IMG/pdf/France-Grilles-mesocentres-19sept2013.pdf · Présentation de France Grilles •Le Groupement d’Intérêt Sientifique

Rideaux métalliques et grilles enroulantes - Gunther … · Rideaux métalliques et grilles enroulantes Rideaux métalliques/ grilles enroulantes 2 Sous réserve de modifications

Typo et Web - Blendconference - Lyon 2013

Grilles de défense

typo- GRApHIE

LE GRIS TYPOGRAPHIQUEkxl.free.fr/Thibault/typo c2/gris_typo.pdfdécouvert la typo. En première année on nous sensibilisait déjà pas mal à cet aspect du design. Nous avons même

Analyse Macro

Carnet de typo

Workshop Typo

Macro > Macro-Ã©conomie 1

Typo Logie Des Emp Runts Francais

Cours n 2 l’Approche Typo-morphologique

Macro Et Microcosmos

Grilles d'été