HTML & CSS

HTML 5 Outline — Quelques notes sur la structure des pages Web avec h1 et section

Après l’article Quelques notes sur la balise h1 avec HTML5 dans lequel j’ai abordé l’utilisation des niveaux d’en-tête `h1 — h6` pour savoir dans quelle mesure il est judicieux d’utiliser une ou plusieurs balises `h1` dans une même page Web, je continue sur ma lancée avec la notion d’Outline. Cette dernière fournit la liste des sections imbriquées impliquant les éléments de type Sectioning Content ou Sectioning Root. Chaque section peut être associée à un niveau d’en-tête et peut contenir autant de sections imbriquées que l’on veut. Notez que les sections dont on parle ne sont pas nécessairement l’élément `section` lui-même (même si ce dernier fait partie des éléments ayant une portée de Sectioning Content). →

HTML & CSS

Quelques notes sur la balise h1 avec HTML5

La réponse courte à la question « Combien de balises `h1` dans une page Web HTML5 ? » est : « Autant que nécessaire ! » En gros, chaque fois que vous avez une nouvelle section, vous  pouvez mettre un `h1`. D’une manière générale, `h1` accompagnera `article`, `aside`, `nav` ou `section` avec brio ! (cf. Sectioning content). Allons voir ce que nous disent les spécifications HTM5 sur l’emploi des balises de titre `h1` — `h6`, notamment les exemples concernant les niveaux de titre. Ils sont assez parlant bien que parfois déroutant lorsqu’on a l’habitude du balisage utilisé jusqu’à présent. Les éléments `h1` — `h6` représentent les niveaux d’en-têtes de leurs sections respectives. Quant à l’élément `hgroup`, il regroupe un ensemble d’en-têtes composé d’au moins deux niveaux de titre, comme un titre et son sous-titre ou un titre et le slogan associé (un bon candidat pour Logo et Motto, faute de mieux). →

Design & Graphisme

Calculer une grille de mise en page « typo » avec le nombre d’Or

Le calcul d’une grille de mise en page modulaire avec le nombre d’Or est une bonne occasion pour mettre en pratique le manifeste pour un interlignage minimum syndical et les cinq règles pour améliorer l’affichage de vos textes. L’objectif est de déterminer une taille de police de caractère et une largeur de colonnes d’après un interlignage «idéal». Après l’aperçu d’une méthode pour créer des gabarits destinés à l’imprimé, j’expliquerai comment utiliser l’interlignage pour concevoir des grilles adaptées à une résolution inférieure ou égale à 1 024 pixels de large. J’ai choisi un interlignage compatible avec le ratio du nombre d’Or typographique (1,5) et du nombre d’Or Classique (1,618). Toutefois, le concept de cette grille fonctionne très bien avec d’autres valeurs. J’ai mis des exemples de grilles réalisées avec Illustrator sous la forme d’un GIF animé (désolé). →

Google & Référencement

8 composés HTML pour le logo et la « baseline » et leur potentiel SEO

Mon petit manifeste concernant la création des balises logo et motto dans les spécifications HTML5 n’a pas encore eu l’effet escompté. En attendant que le W3C valide cette modeste proposition, les enveloppeurs Web font preuve d’imagination. Voici un florilège de composés HTML (HTML Compound) plus ou moins sémantiques pour baliser l’identité d’un site internet. Cerise sur le SEO, j’ai demandé à Didier Sampaolo de nous dire ce qu’il pense — ou ce que Google pense — des différentes solutions présentées. @dsampaolo est éditeur du site Brave New World et consultant e-business spécialisé en référencement naturel. →

Design & Graphisme

Aperçu instantané de Google, Webdesign et référencement naturel

La rédaction Web et le référencement naturel vont bien ensemble en raison du fonctionnement des moteurs de recherche qui indexent les textes depuis toujours. Il a fallu attendre 2001 pour les images en ce qui concerne Google, ce qui poussé les intégraphistes orientés SEO à mieux nommer leurs fichiers. Les visuels utilisés dans un article sont devenus un atout supplémentaire dans l’acquisition de trafic. Les textes et les images ont une incidence directe sur le référencement et le positionnement d’une page, mais ce n’est pas le cas du design, de l’apparence de cette page. Enfin, jusqu’à présent… La nouvelle fonction « Aperçus instantanés » (Instant Preview) de Google permet de prévisualiser la page de destination depuis les SERP’s, ce qui pourrait bien changer la face du Web et faire entrer le Webdesign dans une nouvelle dimension. Rien que ça. →

Blog professionnel

Lancement de Dotpress.fr «point presse» de vos communiqués d’entreprise

Je viens de lancer mon nouveau site spécialisé dans la publication de communiqués de presse pour les entreprises et les particuliers. Encore un site pour publier des communiqués de presse ? Oui, mais à la mode de Bruno les bons tuyaux, c’est-à-dire avec un plus-produit aussi simple qu’innovant : réécrire les communiqués de presse pour publier des articles originaux. Autrement dit, je mets en ligne sur Dotpress.fr des contenus non dupliqués (ce qui est plutôt rare car le CP est généralement envoyé à l’identique aux journalistes). L’objectif est d’être bien référencé par les moteurs de recherche pour donner le maximum de Link Juice aux liens qui pointent vers les contenus «corporate» que l’on me confie. →

Design & Graphisme

Direction artistique et Design : deux facettes complémentaires du graphisme

La question du fond et de la forme est un sujet récurrent dans le Webdesign. Ces notions sont suffisamment différentes pour que l’on ne les confondent pas, mais elles font oublier que la forme est aussi la somme de deux compétences : la Direction artistique et le Design, que l’on peut traduire par l’intention et l’exécution. Une réalisation peut très bien être le fruit d’une direction artistique exemplaire tout en présentant un design très cheap, ou l’inverse. L’article Art Direction and Design de Daniel Mall paru sur A List Apart explique en détail ce qui ressort de la Direction artistique et ce qui ressort du Design dans la mise en place d’un site Web. →

Design & Graphisme

Grille de mise en page, « zoning » et gabarit avec Adobe InDesign

Après les croquis réalisés plus ou moins rapidement sur un coin de table face au client ou de retour à l’atelier, il est parfois nécessaire de passer à une phase plus industrielle afin de réaliser les maquettes « fil de fer » de la Home et des pages intérieures. Illustrator et Fireworks ont beaucoup d’atouts pour faire les Wireframes d’une page Web, mais InDesign n’est pas en reste. Il permet de mettre en place une grille dès la création d’un nouveau document. Dans la suite de cet article, nous verrons comment créer un colonage compatible avec votre framework CSS préféré et utiliser les gabarits InDesign pour les différentes déclinaisons des pages de votre site Internet. →

Conception de site web

#WDFR — Imprimez votre grille pour dessiner vos croquis

Le dernier thème du WDFriday (#wdfr sur Twitter) était consacré aux croquis, maquettes et autres fils de fer (Wireframe) qui précèdent souvent le travail sur un logiciel de création comme Illustrator ou Photoshop. J’ai toujours un petit calepin à carreaux de 5 mm de côtés pour prendre des notes graphiques. Comme j’utilise une grille dans Illustrator bien au chaud dans un calque « grille » verrouillé, je me suis dit qu’il serait intéressant de l’imprimer en plusieurs exemplaires pour m’en servir de support. Pour les croquis, je me contente d’imprimer cette grille à 50% de sa taille réelle pour ne pas gâcher inutilement l’encre et le papier (petit geste écolo). Je réserve l’impression en taille réelle pour les maquettes grandeur nature (Mockup) sur lesquelles je peux utiliser des post-it pour placer et déplacer mes éléments à volonté. →

HTML & CSS

Manifeste pour la création des éléments LOGO et MOTTO dans HTML5

Ce manifeste pour la création des balises `logo` et `motto` dans une prochaine révision des spécifications HTML5 — puisque rien n’est fixé pour l’instant, nous dit-on —  est né du constat que le nom du site et sa tagline se retrouvent sur la quasi-totalité des sites web sans qu’aucun marquage HTML spécifique ne leur soit dédié. Je regrette que les concepteurs des standards du web n’aient pas fait d’entorse à leur régime 100% structurel. Il semble pourtant assez facile de créer les balises `logo` et `motto`, ce qui  aurait  le mérite d’être assez rigolo, en plus d’être utile. →