Dans l’article Nouvelle méthode de remplacement d’image en CSS, je vous faisais part d’une nouvelle méthode de remplacement de texte par l’image en CSS proposée par Scott Kellum qui utilise la propriété text-indent
avec un décalage en pourcentage. Cette méthode n’étant pas dénuée d’effets de bord (voir dans la suite de l’article), une nouvelle technique a fait son apparition lors de la mise à jour de HTML5 Boilerplate. Je vous propose une traduction de l’article Another CSS image replacement technique écrit par Nicolas Gallagher qui détaille une technique avec font-size
: →
Archives des tags : Logo
hgroup disparait du brouillon HTML5, une chance pour logo et motto ?
Suite à la demande de Lars Gunther, la balise `hgroup` ne fait plus partie du brouillon HTML5 des spécifications du W3C. Les raisons de cet abandon semblent assez subjectives. Il semblerait que Lars Gunther n’aimait pas vraiment cet élément et que Ian ‘Hixie’ Hickson non plus. Il n’en fallait pas plus pour que cette balise disparaisse purement et simplement du brouillon HTML5. →
Envie de buzzer ? What else…
Dans la série des délires (ré)créatifs où prennent place mes recherches graphiques, voici une piste pour un site auquel vous avez échappé : Envie de buzzer ! Comme vous allez le voir, vous n’échapperez pas au logo que je viens de retrouver dans un sous-dossier d’une sauvegarde que je croyais perdue à jamais. Envie de buzzer est un site que j’avais envisagé de lancer lors de la grande mode du buzz. Genre, si à 50 ans tu n’a pas lancé un site avec le terme «buzz» dedans, tu as un peu raté ta vie ^^ →
8 techniques CSS pour remplacer du texte HTML par une image
Il est courant d’afficher le logo d’un site web sous la forme d’une image au lieu de mettre le nom du site au format texte HTML. Les préoccupations grandissantes des webmasters concernant l’optimisation SEO ont popularisées les titres HTML composés de mots-clés optimisés puis masqués au profit d’un logo sous forme d’image. Pour y parvenir, les intégrateurs HTML & CSS ont plusieurs cordes à leur arc. Malheureusement certaines solutions présentent des défauts, notamment en ce qui concerne l’accessibilité des contenus cachés, qui peuvent rester inaccessibles pour certains (agents) utilisateurs. Sans parler du risque (faible dans ce cas) de passer aux yeux de Google pour un vilain petit cachottier. Voici donc un florilège de techniques CSS pour cacher ce texte que l’on ne saurait voir, mais qui a son importance. →
Logo HTML5 du W3C — Vers une redéfinition des métiers du web ?
Le W3C a demandé à l’agence OCUPOP de (re)penser l’identité graphique des technologies qui forment ce qu’on appelle généralement les standards du W3C. Ce vocable englobe toutes les technologies non-propriétaires développées et/ou adoubées par le Consortium. Ce dernier a surpris la communauté du développement web au sens large avec un nouveau logo censé englober les standards du web sous l’appellation «HTML 5». →
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. →
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. →
Guide stylistique — Exemple de charte graphique et éditoriale
Lorsqu’on réalise le design d’un site web, il est d’usage de formaliser les choix créatifs retenus en répertoriant les éléments qui composent l’identité graphique et éditoriale dans un guide stylistique. Son objectif est de garantir à l’utilisateur final une expérience visuelle et intellectuelle cohérente tout au long de la navigation. Ce guide stylistique s’adresse généralement aux professionnels chargés de la réalisation technique du site (développeurs, intégrateurs web, etc.) et à ceux qui devront intégrer les contenus au quotidien, qu’il s’agisse des textes et de tout élément graphique ou multimedia. Il peut également préciser les valeurs de la marque et son positionnement vis-à-vis de ses concurrents. C’est dire l’importance de ce guide qui servira souvent de référence dans l’entreprise. →
Nouvelle proposition de logo pour le HTML-FP
J’ai présenté en novembre dernier deux versions d’un logo qui n’ont pas fait l’unanimité. Pour me rattraper, j’ai remis cent fois l’ouvrage sur le métier (oui, j’en rajoute un peu) pour sortir une troisième version et prendre en compte les remarques et les suggestions. J’ai travaillé vite (une petite heure) pour un résultat qui devrait être plus lisible tout en restant ludique et coloré. Cette proposition existe en deux parfums : une version brute d’Illustrator (vectorielle, lisse, etc.) et une version plus organique travaillée dans Photoshop à coup de filtres Textures et Grains. →
« css 4 design » — Nouvelle charte graphique et redesign du logo
La nouvelle version de css 4 design que j’avais évoqué dans Screenshot de mon prochain design est en ligne. Il reste des ajustements à faire et quelques pétouilles que je corrige au fur et à mesure. Comme vous pouvez le constater la mise en page est sobre avec une palette de couleurs blanche et grise rehaussée de teintes chaudes. Ce thème se situe à mi-chemin entre le format blog et le style magazine dont j’ai beaucoup parlé à une époque. J’ai gardé la succession des billets et la traditionnelle sidebar qui fait tous le charme d’un blog, avec au-dessus, le début d’un article qui se distingue par une illustration généreuse accompagnée de sa légende. →