Tips and tricks : La mise en page web.

Saviez-vous qu’un internaute ne lit qu’un tiers des contenus d’une page web . Qu’il ne passe en moyenne que 20 secondes sur la page d’accueil du site et qu’il se fait une idée de la valeur de votre propos en à peine 3 secondes . Vous savez à quel point nous pouvons être volatiles si l’info que nous cherchons ne nous tombe pas sous le nez. C’est en prenant en compte ces quelques considérations qu’il est important de penser sa mise en page. Chaque élément doit être justifié et posséder un rôle bien déterminé. Les couleurs choisies, les typos, les appels à l’action (Call To Action — C.T.A.), les choix iconographiques, les vidéos ou l’utilisation d’éléments interactifs sont autans d’éléments sur lesquels concentrer son attention pour rendre le propos lisible au plus grand nombre.

De façon générale, nous savons que la lecture d’une page sur écran nécessite un effort plus important à notre œil que la lecture sur papier. Il est important de ne pas partir du postulat qui serait de considérer l’internaute comme un grand fainéant. Nous connaissons depuis quelques années les effets du rétroéclairage de nos écrans sur l’œil humain. Nous pourrions dans une certaine mesure comparer l’effort fourni à la lecture sur écran à celui d’un jeune lecteur sur ses premiers livres. Le travail de mise en page d’un site web pourrait donc être comparé à la mise en page d’un livre jeunesse sur de nombreux points. Nos pages seront donc réfléchies pour alléger l’effort de lecture. Les éléments devront être hiérarchisés, placés au bon endroit, aller à l’essentiel et susciter une certaine « émotion » de la part du lecteur.

Il est aussi important de prendre en compte la dimension technique dans la composition de nos pages. Qu’il s’agisse du référencement (Search Engin Optimisation — S.E.O.), de la facilitation de l’intégration HTML/CSS des pages ou de leur déclinaison sur différents supports de lecture (responsive), le design choisi aura une importance sur l’indexation du site par les moteurs de recherche. Une bonne connaissance des balises et de leur valeur sémantique est donc un atout non négligeable au moment de la conception.

Une autre dimension à prendre en compte au moment de la conception des pages est son impact énergétique. À l’heure où les serveurs web sont de plus en plus gros, où les connections au réseaux se font par fibre et les médias sont considérés, à tors, comme dématérialisés, notre consommation de data n’a jamais été aussi démesurée. Les acteurs du numérique, quelque soit leur niveau, des GAFAM au graphiste indépendant, prennent de plus en plus en compte l’impact du réseau sur l’environnement ou son coût financier. À l’heure actuelle, le poids moyen d’une page web est équivalent à celui du jeu vidéo Doom sorti en 1993. Les algorithmes de Google, quand à eux, prennent en compte le poids des page pour leur indexation. Il est donc plus important que jamais de maitriser des pratiques économes en énergie dès la conception des pages. Certains parleront ainsi « d’éco-conception ». Souvent utilisé à de simples fins marketing (compensation carbone, arbres plantés…) , ces pratiques n’en restent pas moins nécessaires pour faire évoluer et pérenniser le secteur du numérique en réduisant drastiquement son impacte environnementale.

Voici donc quelques tips pour vous faciliter la tâche et réussir votre composition. Il ne s’agit pas de règles immuables mais d’astuces qui pourront répondre à la majorité de vos besoins.

La rédaction

Avant toute chose, il est important de bien considérer que le contenu texte d’une page est son élément central. C’est lui qui définira les informations à structurer pour une bonne transmission et qui permettra l’indexation de la page. Le texte sera donc d’abord lu par un ordinateur (Google par exemple) avant d’être transmit à l’internaute. Partant de cette idée il faudra penser la rédaction en limitant l’utilisation de métaphores que seul un humain pourrait comprendre. Les phrases devront êtres courtes et contenir des mots clés qui pourront êtres mis en avant à l’aide des balises html de structure de textes. Les plus importantes seront les balises de type <hn> (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>), viennent ensuite les balises de type listes, citations, mise en avant de contenu (<strong>, <em>, <mark>…). Chacune de ces balises devra donc être identifiée et stylisée. Il est également important de comprendre les balises de regroupement pour prévoir une bonne utilisation sémantique. Par exemple, les sections devront commencer par des titres.

La rédaction web diffère donc quelque peu de la rédaction pour support imprimés, nous parlerons ainsi de stratégie éditoriale. Cette stratégie ne se limitera pas a une simple lecture mais devra prendre en compte l’aspect technique propre au web et les comportements de l’internaute.

La typographie

Comme pour l’édition, le choix typographique a une importance capitale pour une bonne transmission de l’information. Historiquement, le web ne donnait accès qu’ une poignée de typographie. Il s’agissait dune dizaine de typo présentent dans la majorité des systèmes informatiques. Depuis quelques années l’évolution du css a permis d’augmenter considérablement le nombre de typographies utilisables. Et de nombreuses solutions en ligne nous permettent de faciliter nos choix. C’est le cas par exemple de GoogleFont® qui offre un accès libre à une large gamme de fonts optimisées pour le web. Cependant il est intéressant de comprendre que le recours à ce type de solution augmente les échanges serveurs entre votre site, google et l’internaute ce qui augmente le poid écologique du site. Il est possible de compenser ce problème en hébergeant les typos utilisées sur son propre serveur en s’appuyant sur les règles css @font.

De façon générale, nous limiterons le nombre de typo et le nombre de déclinaisons à intégrer au site. Nous pourrons ainsi définir 1 ou 2 font maximum avec pour chacune 1 déclinaison (gras, light, black…) de façon à limiter le poids de la page et donc son temps de chargement. Il pourra être intéressant, selon les besoins, de s’appuyer sur une typographie système pour composer les textes de labeur et de n’avoir recours à une typographie complémentaire que pour certains éléments (titres, boutons, menus…) de façon à optimiser un maximum le poids de la page.

Au delà de la dimension technique, le choix d’une police web ne diffère pas énormément de l’édition. Là ou la différence se fera sera dans la facilité de lecture sur écran. Certaines polices spécifiques ne seront pas spécialement prévu pour une utilisation numérique. Il faudra les tester et bien comprendre leurs limites.

Pour aider l’internaute dans sa lecture, il pourra être intéressant d’augmenter légèrement le corps ainsi que l’interlignage des paragraphes et dans certains cas l’interlettrage. Comme il est évoqué en introduction de l’article, nous travaillerons un texte d’une façon assez similaire aux romans jeunesse.

Parmi les choses à éviter, nous limiterons l’usage des capitales qui rendent le plus souvent un texte plus dur à lire et ont une signification sémantique spécifique (acronymes et sigles). Un titre par exemple sera visuellement identifié comme tel par son emplacement, son corps et sa graisse. Il n’est pas nécessaire d’insister en changeant sa casse.

Autre erreur à éviter : le recours aux paragraphes justifiés. Il est important de bien comprendre qu’une composition de texte justifié passe par un traitement chirurgical de chaque ligne. En édition, les dimensions des pages ne changent pas pour chaque lecteurs, nous pourrons donc gérer la césure, l’interlettrage ou les espaces justifiants pour chaque ligne. Le web ne permet pas encore ce type de travail. En justifiant un texte, nous ne pourront pas obtenir un gris typographique acceptable. Nous compliquerons donc la lecture, dégraderons notre composition et perdrons notre internaute dans les lignes de nos paragraphes.

Les couleurs

Les couleurs présentent dans une page web permettrons de susciter l’émotion de votre internaute. Il est important de définir sa gamme en amont. Chaque couleur choisi devra l’être en fonction de son pouvoir évocateur. Il s’agit de rester subtile et de ne pas multiplier les couleurs qui composeront votre gamme sous peine de fatiguer le regard et donc l’intérêt de votre internaute pour votre message.

De façon générale une gamme de couleur sera composé de 5 teintes, allant des plus claires aux plus foncées. Il ne s’agit pas là d’une règle immuable, certains sites n’en nécessiterons que 3, d’autres plus. Tout dépendra du message et de la masse d’information.

Il peut être intéressant de composer cette gamme de façon réfléchie en ne pas s’appuyer uniquement sur des notions de goûts. Nous définirons en priorité la couleur de fond et la couleur des textes. Il peut également être intéressant de choisir une couleur spécifique aux titres. Ces couleurs pourront être complétées par une ou deux teintes destinées aux éléments interactifs pour les mettre en avant. Il s’agira d’une teinte d’accent que nous retrouverons sur les boutons et les liens. Cette couleur devra resté lisible et aidera l’internaute à comprendre l’ergonomie générale de votre page. Pour faire simple, elle lui permettra de savoir où et pourquoi cliquer.

En introduction de l’article, nous évoquions la dimension écologique a donner au design. La couleur en est un des levier. Ainsi nous privilégierons des pages avec une majorité de fonds foncés pour limiter la consommation énergétique du navigateur. Un fond sombre sollicitera bien moins les diodes luminescentes (LED) du moniteur donc leur usure et leur consommation électrique. De plus en plus de sites proposent d’ailleurs un bouton pour passer en « mode sombre ». Ce qui permettra une alternative aux volontés des clients et graphistes de ne pas avoir un site systématiquement obscure.

L’autre paramètre important à prendre en compte, comme pour la typographie, est le confort de lecture. Ainsi nous éviterons certains contrastes trop marqués entre les arrières plans et les textes. Un texte noir sur fond blanc sera adoucie. Le blanc de l’arrière plan deviendra gris clair et le noir gris foncé ou inversement.

L’iconographie

Comme pour les couleurs, les choix iconographiques doivent êtres définis avec l’idée de transmettre une certaine émotion à l’internaute. Les images choisis devront faire écho au contenu textuel. Elles ne sont pas là pour répéter l’information mais pour en facilité son accès, sa bonne compréhension ou la compléter. Un bon choix et un bon placement des images sera un véritable atout pour votre design. De mauvaises images ou des images de mauvaises qualité nuiront à votre propos et feront perdre toute crédibilité à votre site.

Il existe actuellement de nombreux librairies ou banque d’images pour vous faciliter vos recherches, mais ces images sont bien souvent trop génériques et typées, n’hésitez pas, dans la mesure du possible, à prévoir des séances de prises de vue par un photographe professionnel de façon a maitriser l’identité de votre création graphique.

Côté technique, il est important de contrôler le poids et le nombre d’images, c’est bien trop souvent le point faible des sites trop lourds.

Actuellement, nous pouvons constater un recours à la vidéo pour remplacer les images. Cette approche est intéressante pour augmenter le temps de présence de l’internaute sur les pages, son intérêt et son attention pour votre propos. Mais cette méthode à un prix. Écologiquement, elle augmente considérablement l’impact environnementale des sites. Il sera donc conseillé de n’utiliser la vidéo que pour la transmission d’informations importantes et d’éviter de l’utiliser comme simple illustrations. Inutile également de mettre une vidéo en haute définition ou en 4K.

L’alternative intéressante pour éviter un recours systématique aux images et vidéos est la création d’une gamme de pictogrammes. Le format SVG et les typo de type « glyph » permettrons d’alléger considérablement les pages sans pour autant appauvrir votre design. C’est le travail fait par les créateurs d’interfaces utilisateurs ou de systèmes informatiques depuis bon nombre d’années.

La composition des pages

Passons maintenant à la partie fondamentale de notre page, sa composition. De façon générale, nous appuierons notre composition sur une grille de mise en page. Cette grille sera le plus souvent composée de 12 segments pour permettre un maximum de déclinaisons possibles.

Les grande différence que nous pourrons trouver par rapport à la mise en page d’édition papier va se passer dans le format. En effet, là où nous pourrons définir une largeur et une hauteur à notre document imprimé, la diffusion numérique s’appuie sur les paramètres définis par l’utilisateur. La taille de l’écran, sa définition, la taille de la police par défaut sont autant d’inconnus à prendre en compte dans le processus de création. La première chose à prendre en compte est que nous sommes les seuls à avoir accès à l’intégralité de notre page. L’internaute lui ne pourra avoir accès à l’ensemble des informations présentés qu’en faisant défiler verticalement la page, c’est le fameux scroll. Ce principe implique donc que nous travaillons la page comme un ensemble découpé en tranches horizontales superposées les unes aux autres. Chacune de ces tranches pourra être découpée en colonnes. Ainsi nous pourront donner un rythme en passant d’une tranche de deux colonnes, à une tranche de quatre puis une, etc.

Pour conserver une cohérence visuelle nous nous appuierons sur la grille de mise en page qui nous donnera les reperds nécessaire au respect des proportions entre chaque tranches. De cette façon, les gouttières seront maintenus et guideront le regard de notre internaute lors du défilement de la page.

Il existe certaines notions pour nous faciliter le travail de composition tout au long de notre page. La principale est la définition des largeurs de nos tranche. Il peut être intéressant d’en définir trois :

• La première sera la plus étroite (normal), elle permettra de composer un texte sans que les lignes ne soient trop larges. C’est le cas pour l’article que vous êtes en train de lire.
• La seconde sera plus large (grande largeur) et permettra des dépassement sur la gauche et la droite sans pour autant toucher les bords du navigateur. Cette largeur permettra de rythmer le déroulé pour placer une image par exemple, une zone d’appel à l’action (ex : inscription à la newsletter) ou pourvoir composer une tranche en plusieurs colonnes.
• La dernière prendra en compte toute la largeur de la page (pleine largeur). Elle ira du bord gauche au bord droit de votre navigateur. C’est bien souvent ce que nous utilisons pour une entête ou pour créer une rupture dans le déroulé en plaçant un grand visuel. On parlera dans ce dernier cas de bannière ou de poster.

Chacune de ces tranches aura son utilité et permettra de décomposer le(s) message(s) à transmettre à l’internaute. Côté technique elles simplifieront énormément le travail d’intégration en permettant de structurer logiquement le code et facilitera les déclinaisons responsive de la page.

Pour conclure

Les astuces présentées dans cet articles ne sont que des pistes pour faciliter le travail de création graphique. Elles ne doivent pas êtres utilisées de façon dogmatiques mais peuvent servir de point de départ. Chaque sujet, chaque mise en page possède ses propres caractéristiques et ses cas particuliers. Il vous faudra expérimenter, observer et cultiver vos références pour compléter ces quelques points.