CSS & Webdesign » Image

Media queries et téléchargement des images par les mobiles

Bruno Bichet — Mon, 16 Apr 2012 14:11:15 +0000

A l’heure où l’on parle beaucoup de Responsive Webdesign via notamment les propriétés CSS3 Media Queries, il est important de s’interroger sur la manière dont les différents périphériques mobiles se comportent au moment de télécharger les images. Disons que vous affichez une image en tant “normal” et que vous décidez de lui appliquer display: none si max-width: 600px. L’idéal serait que le périphérique ciblé ne demande pas l’image afin d’épargner la bande passante.

Media Query & Asset Downloading Results fait état d’une série de tests où il apparait que :

Si vous décidez de ne pas afficher une image, il ne faut pas compter à coup sûr sur la propriété display: none. A la place l’auteur recommande d’utiliser Javascript ou une approche côté serveur.
Pour masquer une image définie en background-image, il est préférable de masquer l’élément parent. Si cela n’est pas possible, il est possible d’utiliser une surcharge CSS avec background-image: none.
Pour permuter des images de fond, il faut les définir toutes les deux à l’intérieur des Medias Queries

Articles sur le même sujet

Nouvelle méthode de remplacement de texte par une image

Bruno Bichet — Fri, 16 Mar 2012 13:08:28 +0000

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 :

«image replacement» : une autre technique

Une nouvelle technique de remplacement par l’image a récemment été ajoutée au projet HTML5 Boilerplate. Ce billet explique son fonctionnement et comment elle se situe par rapport aux autres méthodes, utilisant text-indent notamment.

Voici le bloc CSS qui a fait son apparition dans la récente mise à jour de HTML5 Boilerplate et le framework Compass :

.ir {
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
}

Comment ça marche ?

font:0/0 a — Ce raccourci met à zéro les propriétés font-size et line-height. La valeur a fonctionne comme un raccourci pour font-family : font-size: 0; line-height: 0 et font-family: a. C’est une idée reprise de l’implémentation BEM. Bien que le validateur CSS fait sa chochotte avec les valeurs 0/0, il faut savoir que tous les navigateurs acceptent cette syntaxe et qu’il s’agit d’une erreur d’interprétation du validateur. En effet, si l’on utilise font: 0px/0, tout va bien, alors que dans le même temps, le validateur affiche font: 0/0.
text-shadow:none –- Permet de s’assurer que les ombres portées avec text-shadow sont supprimés du texte pour éviter l’apparition d’une ombre portée par-dessus le background.
color:transparent -– Requis pour les navigateurs qui ne parviennent pas à rendre le texte complètement invisible, comme Safari 4 ou certains navigateurs pour mobiles. Les versions d’Internet Explorer IE6/7/8 ne reconnaissent pas cette valeur pour la propriété color, mais heureusement, les versions IE7/8 ne montrent rien et IE6 n’affiche qu’une très légère trace du texte.

Dans HTML5 Boilerplate, nous avons également supprimé les éventuelles bordures et couleur de fond :

/* For image replacement */
.ir {
    border:0;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
    background-color: transparent;
}

Cette précaution facilite l’utilisation de la classe CSS .ir sur les boutons ou les liens contenant explicitement un fond ou une bordure.

Avantages par rapport à `text-indent`

Cette nouvelle technique évite les problèmes posés par la méthode de remplacement via text-indent, notamment les pertes de performances. Notez que ces dernières affectent également la dernière méthode proposée par Scott Kellum qui vise au départ à améliorer les performances sur iPad 1.

Fonctionne sur IE6/7 sur les éléments de type inline-block. Cf. les problèmes liés aux techniques basées sur l’indentation de textes à l’adresse http://jsfiddle.net/necolas/QZvYa/show/
N’implique pas la création d’une boite en dehors de la surface visible de l’écran qui entraine une baisse des performances.
Plus besoin de spécifier d’alignement de texte ou de masquer le contenu qui dépasse car le texte de la nouvelle méthode ne prend tout simplement plus de place.
Inutile de masquer les éventuelles balises ou d’utiliser un contournement avec display:inline impliqué par l’indentation du texte.
En tout état de cause, cette technique nécessite moins de lignes de code.

Effets de bord

Aucun hack de remplacement par image n’est parfait :

Laisse une légère trace de texte sur IE6.
Implique de ne pas utiliser l’unité em pour les marges de l’élément sur lequel vous appliquez cette technique, vu que la taille du texte est réglé à zéro.
Windows-Eyes a un bug qui empêche la lecture du texte caché par cette méthode. Il n’y a en revanche aucun problème avec les autres lecteurs d’écran testés. Merci à @jkiss pour ses précisions et à @wilto pour avoir confirmé que cette méthode fonctionnait avec JAWS 12 dans IE 6/7/8 et Firefox 4/5/6.
Comme beaucoup de méthodes de remplacement par l’image, elle ne fonctionne pas si les CSS sont chargées mais que les images ne le sont pas.
Le texte n’est pas caché si le visiteur a une feuille de style utilisateur avec une déclaration font-size se terminant par !important pour l’élément où vous avez appliqué la class .ir.

Il est utile de noter que le remplacement par l’image utilisant les pseudo-éléments — NIR image replacement — évitent ses désagréments mais ne fonctionne pas correctement sur IE6/7.

Pour finir

J’utilise cette technique sans encombre depuis que Jonathan Neal et moi-même l’utilisons dans le cadre d’un test de clearfix commencé il y a un an environ. Le framework BEM utilise également cette technique pour ses icônes. L’idée principale fut proposée dès 2003 mais le rendu des navigateurs de l’époque n’a pas permis une large diffusion de cette méthode.

Si vous rencontrez des problèmes en utilisant cette technique, merci de détailler le bug.

Traduit de l’article Another CSS image replacement technique avec l’aimable autorisation de l’auteur ⁽¹⁾.

⁽¹⁾ Nicolas Gallagher (@necolas) est un développeur web front-end freelance basé à Londres. Il a co-créé Normalize.css et il fait partie des développeurs du projet HTML5 Boilerplate.

N’hésitez pas à me faire part de vos remarques sur les contresens (l’anglais était ma 3e langue), les fautes d’orthographe et d’une manière générale tout ce qui pourrait être préjudiciable à l’article d’origine.

Edit du 09/04/2012 — N’hésitez pas à jeter un oeil sur l’article : My thoughts about the latest Image Replacement techniques qui pointe les défauts de ces nouvelles méthodes de remplacement de texte par une image.

Articles sur le même sujet

Nouvelle méthode de remplacement d’image en CSS

Bruno Bichet — Fri, 02 Mar 2012 22:35:24 +0000

Pour remplacer du texte par une image avec CSS, il existe au moins neuf méthodes, dont deux ont été largement utilisées par les intégrateurs web. Vous trouverez à la fin de l’article une dixième méthode que je n’ai pas encore testée qui devrait allier performance et accessibilité. Elle nous vient tout droit de chez Jeffrey Zeldman.

FIR (Fahrner Image Replacement)


    Fahrner

h1 {
    background-image:url(/images/logo.png);
    background-repeat:no-repeat;
    height:100px;
}

span {
    display:none;
}

Malheureusement, cette méthode censée garantir à tous une bonne accessibilité se mettait la souris dans l’oeil (cf. http://www.alsacreations.com/article/lire/567-Remplacement-d-images-halte-au-display-none.html).

Phark Method


    Phark Method


.hide-text {
    width: 350px;
    height: 75px;
    background: url("images/logo.png");
    text-indent: -9999px;
}

Kellum Method (new image replacement)


    Kellum Method


.hide-text {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background: url("images/logo.png");
}

Pour en savoir plus

Articles sur le même sujet

Classes CSS générées par WordPress pour les images

Bruno Bichet — Sat, 12 Nov 2011 18:19:35 +0000

Dans WordPress, de nombreuses classes CSS sont impliquées dans la gestion des images. Plusieurs options sont disponibles depuis l’interface des médias, chacune ajoutant une classe CSS dans les éléments HTML img ou div (si une légende est spécifiée). Cet article propose un rapide aperçu des classes CSS permettant d’aligner les images avec les styles CSS associés, de gérer les formats d’images ainsi que les légendes. Nous verrons aussi comment, à partir des classes générées automatiquement par WordPress, utiliser les classes multiples — comme .classe1.classe2 { … } sans espace entre .classe1 et .classe2 — pour faire face à tous les cas de figure concernant les formats, les alignements ou la présence ou non de légendes.

"Ajouter une image" depuis l'interface d'administration de WordPress

Classes CSS pour aligner les images

Aucun — .alignnone {}
Gauche — .alignleft {}
Centre — .aligncenter {}
Droite — .alignright {}

Les styles associés (à titre indicatif)

img.alignnone {
    margin: 0 1em;
}
img.alignleft {
    float: left;
    margin-right: 1.5em;
}
img.aligncenter {
    display: block;
    margin: 1em auto;
}
img.alignright {
    float: right;
    margin-left: 1.5em;
}

Formats des images

Les formats (tailles) sont précisés dans Réglages → Médias.

Miniature — .size-thumbnail {}
Moyenne — .size-medium {}
Large — .size-large {}
Taille originale — .size-full {}

A ce niveau, on peut déjà s’amuser avec les classes multiples en stylant différemment les images selon leurs alignements et leurs formats :

.size-thumbnail.alignnone {}
.size-medium.alignleft {}
.size-large.aligncenter {}
.size-full.alignright {}
Etc.

Légende (caption)

Lorsqu’on ajoute une légende, notre image est enveloppée dans une balise div ; une balise p englobe la légende. Les classes impliquées dans l’alignement de l’image sont déplacées sur cette balise div qui contient déjà une classe .wp-caption. Ce qui nous donne les combinaisons suivantes :

.wp-caption.alignright {}
.wp-caption.alignleft {}
.wp-caption.alignnone {}
.wp-caption.aligncenter {}
.wp-caption.alignnone {}

Les classes CSS impliquées dans le format restent chevillées à la balise img. Ce qui élargit encore notre terrain de jeu :

.wp-caption.alignright .size-thumbnail {}
.wp-caption.alignleft .size-medium {}
.wp-caption.alignnone .size-large {}
.wp-caption.aligncenter .size-full {}
etc.

(Je vous fais grâce de toutes les combinaisons dont l’intérêt est tout relatif).

Classes multiples dans IE6 ?

N’hésitez pas à lire le billet 3 fonctions Javascript pour lutter contre le bug des classes multiples dans IE6 pour utiliser les classes multiples dans IE6 : une fonction simple avec jQuery, une autre plus évoluée (toujours avec jQuery) et une dernière fonction en pur Javascript pour ne pas charger la mule !

Articles sur le même sujet

Une solution CSS accessible pour remplacer du texte HTML par une image

Bruno Bichet — Thu, 17 Feb 2011 08:09:57 +0000

Dans l’article remplacer du texte HTML par une image avec CSS, j’ai listé un certains nombre de techniques efficaces permettant d’avoir un titre de niveau h1 (par exemple) qui disparait de l’affichage au profit d’un visuel plus «sexy». Le but étant d’améliorer l’apparence du site et le référencement dans les moteurs de recherche. Toutefois, les solutions présentées n’offrent pas toujours une expérience utilisateur satisfaisante pour tous. Les utilisateurs de lecteurs d’écran comme Jaws ou NVDA risquent de ne pas y trouver leur compte. Certaines solutions sont «accessibles» uniquement lorsque les CSS sont désactivées et il faudra penser aux cas où les images sont absentes.

Une solution satisfaisante devrait permettre de garder un document intelligible lorsque les feuilles de styles et les images sont désactivées, mais aussi lorsque l’une ou l’autre seulement est active. Pour cela, il suffit de placer le texte en question derrière l’image via la propriété z-index pour jouer avec la profondeur. De cette manière, le texte apparait lorsque les images et/ou les feuilles de styles CSS ont été désactivées par l’( agent ) utilisateur.

Marquage HTML & CSS

Voici un exemple que j’ai testé en situation réelle pour m’assurer que cette solution n’entrainait pas d’effets de bord sur le reste de la page. Voici donc la partie de l’en-tête avec un logo et une description en mode texte, et une image en dur pour avoir un bon vieil attribut alt des familles comme on les aime !


    
        Salut, c'est moi : logo !
        Salut, c'est moi : motto !

header {
    position: relative;
    height: 170px;
}
hgroup {
    position: absolute;
    z-index: 1;
    top: 25px;
    left: 1px;
}
#banner {
    position: absolute;
    z-index: 2;
}

Dans un premier temps, la déclaration position: relative sur l’élément header permet de placer hgroup et #banner en position absolue par rapport à header et non au Viewport. La valeur de height: 170px remplace la hauteur qu’aurait du avoir header si les éléments qu’il contient n’avait pas été sortis du flux par le positionnement absolu.

Les éléments hgroup et #banner sont positionnés de manière absolue pour permettre d’utilisation de la propriété z-index. Quant à hgroup, il est en z-index: 1 pour permettre aux liens qu’il contient de rester cliquables (ce qui ne serait pas le cas, s’il leur z-index était inférieur à zéro).

L’image contenue dans #banner est en z-index: 2, ce qui la place au-dessus des éléments contenus dans hgroup. Le décalage en top et left sert à positionner précisément hgroup derrière l’image, selon ses dimensions. Le left: 1px empêche les serifs de certaines polices de caractères de dépasser de l’image.

Aperçu du composé HTML & CSS en images

Après le code, voici le résultat des courses en image avec les différentes cas de figure que l’on peut rencontrer :

Avec CSS et images,
Avec image sans CSS,
Sans image mais avec CSS,
Sans image et sans CSS.

CSS et images activées

Le logo texte et la description se retrouve derrière l’image conformément à leurs propriétés z-index respectives.

Fig. 1 : CSS et images activées. Cliquez pour agrandir l'image.

Avec images sans CSS

L’absence de CSS annule les propriétés de positionnement dans le flux et d’empilement des éléments.

Fig. 2 : image activée, CSS désactivée. Cliquez pour agrandir l'image.

Sans images avec CSS

Si les images sont désactivées, les propriétés position: absolute et z-index continuent de jouer leur partition.

Fig. 3 : CSS activée, image désactivée. Cliquez pour agrandir l'image.

Sans image et sans CSS

Le grand jeu ! Voici le header en l’absence de toute fioriture : plus d’image et plus de CSS !

Fig. 4 : image et CSS désactivées. Cliquez pour agrandir l'image.

Conclusion

Cette solution est loin d’être parfaite, notamment en raison de l’utilisation du positionnement absolu dont je ne suis pas fan ou du moins que j’évite en général pour les éléments structurels d’une page. Il existe certainement d’autres manières de placer du texte derrière une image en faisant en sorte que l’accessibilité des uns et des autres ne soit pas compromise.

Merci à Sébastien Delorme et à Sylvain Fix qui ont inspiré ce billet grâce à leurs commentaires.

A suivre :-)

Articles sur le même sujet

8 techniques CSS pour remplacer du texte HTML par une image

Bruno Bichet — Mon, 14 Feb 2011 11:46:30 +0000

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.

Jouer sur la taille des caractères avec font-size

.texte-a-cacher {
    font-size: 0;
}

Déplacer le texte hors du Viewport avec text-indent ou position

.texte-a-cacher {
    text-indent: -9999em;
}

.texte-a-cacher {
    position: absolute;
    left: -9999em;
}

.texte-a-cacher {
    position: absolute;
    top: -9999em;
}

.texte-a-cacher {
    position: absolute;
    top: -9999em;
    left: -9999em;
}

Sortir le texte du flux avec display

.texte-a-cacher {
    display: none;
}

Masquer le texte avec visibility

.texte-a-cacher {
    visibility: hidden;
}

Placer le texte derrière l’image avec z-index

.texte-a-cacher {
    position: relative;
    z-index: -1;
}

Exemples de marquages HTML

jQuery for Designers


    
        jQuery for Designers

#header h1 a {
    background: url(http://jqueryfordesigners.com/wp-content/themes/j4d/static/images/logo.gif) no-repeat 0px 0px;
    border: none;
    display: block;
    height: 30px;
    width: 258px;
}
#header h1 a span {
    display: none;
}

KLOUT

Klout is the Standard for Influence

h1 {
    background: url(/public/images/logos.png) no-repeat;
    color: #605459;
    font: normal 20px/85px Arial;
    font-style: italic;
    height: 51px;
    padding-left: 125px;
}
h1 span {
    display: none;
}

Ici et ailleurs (Neokraft)


    ici & ailleurs

#top {
    background: transparent url(http://neokraft.net/css/2009-10/img/top_bg.png) no-repeat 0px 3px;
    height: 120px;
}
#top h1 {
    font-size: 0px;
    text-indent: -5000px;
}

W3C

W3C

h1 a {
    display: block;
    float: left;
    background: url('../images/logo-w3c-screen-lg') no-repeat top left;
    width: 100%;
    height: 107px;
    position: relative;
    z-index: 1;
}
.alt-logo {
    display: block;
    position: absolute;
    left: 20px;
    z-index: 0;
    background-color: white;
}

SOHTANAKA

Web Designer & Front-end Developer - Soh Tanaka

h1 {
    background: url(images/homepage_banner.gif) no-repeat center top;
    height: 219px;
    text-indent: -99999px;
}

C’est quoi le plus mieux bien ?

A la lecture des billets de Laurent Denis et de Raphaël Goetter, il semblerait que les solutions à base de display: none, ne soit pas très accessibles aux lecteurs d’écran. Voici une solution qui semble robuste et efficace :


    Blog & Blues

span {
    position:absolute;
    left: 0;
    top: -500px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

Les solutions à base de text-index: -9999em semblent également intéressantes

C’est fini

Il ne s’agit pas d’une liste exhaustive des solutions possibles (vous en trouvez bien plus dans les liens présents dans la Linkographie, ci-dessous), mais de quelques bouts de code que l’on rencontre assez souvent.

Linkographie

Articles sur le même sujet

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

Bruno Bichet — Fri, 12 Nov 2010 15:57:48 +0000

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.

Ces marquages HTML trouvés sur le Web (pour la plupart) seront brièvement commentés par mes soins, puis par l’expert SEO. J’ai évoqué la CSS pour le premier exemple seulement pour alléger l’article. Grosso modo, dans ce contexte, les CSS sont souvent utilisées pour afficher une image en background d’une balise et «évacuer» le texte avec display: none, text-indent: -99999em ou position: absolute, en ajoutant éventuellement une balise span, comme dans h1 span { position: absolute; top: -9999px; }.

1. Logo texte dans «h1»


    
        ici & ailleurs

C’est simple et efficace. Pour info, le logo apparait sous la forme d’une image placée dans le background de #top :

background: transparent url(top_bg.png) no-repeat 0px 3px;

Quant à l’ancre du lien, elle est masquée par la déclaration CSS suivante :

#top h1 {
    font-size: 0px;
    text-indent: -5000px;
}

Source : http://neokraft.net

L’avis de l’expert SEO — Le texte est positionné « hors de l’écran » via CSS, et donc caché pour le visiteur. Je ne pense pas qu’un site ait déjà été pénalisé pour cette seule raison (cela semblerait un peu abusif), mais Google demande aux webmasters d’éviter ce genre de techniques, qui pourraient donner l’impression que leur site est « peu fiable » (source Google). Note : j’aurais plutôt utilisé un lien absolu reprenant l’URL complète de la homepage plutôt qu’un "/" qui signifie « vers la racine du site ».

2. Logo texte dans «h1» et Motto dans «p»

Un marquage HTML similaire avec une tagline à la clé :


    Ergonomie Web, Expérience Utilisateur et Ruby On Rails
    Blog professionnel de Frédéric de Villamil sur les métiers du web

Source : http://t37.net

Ces deux premiers exemples sont probablement la forme la plus courante en raison de leur simplicité et d’une certaine logique. La marque répétée sur l’ensemble des pages du site se voit attribuer une balise d’en-tête de premier niveau. Au temps de HTML 4 ou XHTML 1.0 on s’interrogeait sur le bien-fondé de cette utilisation d’une précieuse balise h1 que l’on réserve normalement aux titres des articles. Le débat est encore houleux entre les partisan de la balise h1 unique pour l’ensemble de la page et ceux qui voudrait en mettre partout. Avec HTML5, les intégrateurs peuvent utiliser au moins une balise h1 par section…

L’avis de l’expert SEO — Etant partisan de la balise h1 unique pour chaque page, je trouve dommage de l’utiliser pour un logo commun à toutes les pages du site. Cela ne permet pas de différencier sémantiquement les pages entre elles. Le p, ici, est neutre, et permet d’améliorer la densité des mots-clefs qu’il contient. Pour preuve, le blog ressort très bien sur Google quand on cherche le nom de son auteur.

Mise à jour (14/11/2010) : comme le fait remarquer Frédéric dans les commentaires, le fragment de code a été prélevé sur la page d’accueil. Sur http://t37.net, le marquage HTML pour la page affichant les articles présente une différence importante : la balise h1 est remplacée par une balise p.


    Ergonomie Web, Expérience Utilisateur et Ruby On Rails
    Frédéric de Villamil analyse l'écosystème Web en temps presque réel

3. Logo image dans «div»

Source : css4design

Voici le marquage que j’utilise sur ce blog : pas de balise d’en-tête, l’image est purement décorative et permet d’identifier le site lors de l’impression de la page. Le premier élément h1 que l’on trouve dans la page est le titre des articles.

L’avis de l’expert SEO — Voilà qui me semble très bien. Les balises utilisées (div) sont sémantiquement neutres et permettent de réserver les éléments h1 pour des données contextuelles ciblées. L’utilisation combinée du title sur le lien et du alt sur l’image permet aux moteurs de savoir précisément de quoi parle la homepage du blog, et n’impacte pas la page en cours, qu’il reste possible d’optimiser finement.

4. Logo image et Motto dans «span» enveloppés dans «address»


    
        
            
            Identi.ca
        
        propulsé par StatusNet

Probablement le balisage qui m’a le plus surpris dans cette quête. Le logo et le slogan sont considérés comme la carte de visite du site, via l’utilisation du microformat vcard. Lecture complémentaire : Proposition de balisage HTML sémantique du microformat hCard et http://dev.w3.org/html5/spec/Overview.html#the-address-element

Source : http://identi.ca

L’avis de l’expert SEO — Effectivement, ce balisage est un peu surprenant mais ne manque pas de sens. Google a annoncé sa volonté d’utiliser de plus en plus les microformats (dont hCard) qui permettent de structurer l’information. Identi.ca fait un pari à long terme sur la généralisation des traitements de ces formats, qui permettront, à terme, une mise en avant visuelle dans les pages de résultats de recherches sur les moteurs (qu’on appelle SERP’s, pour Search Engines Results Pages).

5. Logo image dans «h1» et logo texte dans «span»

W3C

Source : http://www.w3.org

L’avis de l’expert SEO — Là encore, l’utilisation d’une balise h1 commune à toutes les pages est à déplorer. A mon sens, cette balise peut (et donc doit) qualifier la page en cours, et non l’ensemble du site.

6. Logo image dans «h1» avec baseline évènementielle

Source : http://www.paris-web.fr/

Actualité oblige, voici le marquage choisi pour le site Paris Web. Un peu complexes au premier abord, les choix s’expliquent par la nature évènementielle du site, d’où l’image réservée à l’impression ou les dates de début et de fin.

L’avis de l’expert SEO — Comme Identi.ca, Paris Web fait le pari des microformats en utilisant hCalendar, qui semble adapté pour de l’évènementiel. La prise en charge des microformats par Google reste à ce jour aléatoire (au mieux), mais reste une piste très intéressante car sémantiquement très poussée, et normalisée.

7. Logo image dans «span»


    
    
        Journal
        Logiciels
        Services
        Me joindre
        English

Ici l’auteur a mis l’accent sur le menu de navigation au lieu de mettre le logo en avant.

Source : http://michelf.com/journal

L’avis de l’expert SEO — L’utilisation de balises neutres (div, span, ul…) est une bonne chose (les h1 étant libres d’être utilisés pour le contenu de la page), mais la mise en avant du menu de navigation est un choix qu’il faut assumer. L’écueil vient plutôt des pages que l’on va placer dans le menu : ces pages seront linkées depuis toutes les pages du site, dès le début du code-source, et seront donc sur-pondérées aux yeux des moteurs. Il faut les choisir avec soin, et se limiter à quelques pages. Le lien vers la page Contact (qui n’a que très peu de valeur ajoutée en référencement) pourrait être caché (en utilisant du Javascript).

8. Logo texte et image dans «dt» et motto dans «dd»


    Nom du site
    
    HTML5 & CSS3, vous le savez, c'est ma grande passion !

En attendant que le W3C ne songe à créer les balises logo et motto, j’explore l’utilisation des listes de définition qui permettent en l’occurence d’indiquer un lien «sémantique» entre le slogan, le nom du site (version texte), son logo (version image) et la tagline. L’idée est de profiter de la possibilité d’utiliser un seul couple de dt et dd et plusieurs dt pour un ou plusieurs dd. On peut également envisager de remplacer la balise dl par dialog apparue avec HTML5 :


    Nom du site
    
    Pinailler, c'est mon dada !

Il s’agit avant tout d’une tentative de mettre en pratique les conseils de Didier Sampaolo en évitant d’utiliser les niveaux de titre hn et les p réservés aux articles tout en mettant un peu de sémantique à la place de div et de span. L’idée est de personnifier le site et de lui faire dire son petit compliment avec la jolie voix de Betty grâce à une feuille de style @media aural :

@media aural {
    dialog {
        voice-family: betty, female;
    }
}

Source : N/A L’avis de l’expert SEO – Les balises dl, dt et dd sont faites pour contenir un terme et sa définition. L’usage proposé ici est presque un « détournement » des spécifications HTML mais il n’est pas dénué de sens : le logo et le motto (dans mon jargon, j’aurais dit « la baseline ») sont effectivement censés définir une marque (ici, le nom du site). Ce qui me chagrine un peu, c’est la répétition sur chaque page du site de la même définition. En tout cas, ce marquage a l’avantage d’être original, et ne semble pas dangereux (j’entends par là : « ce n’est pas contraire aux guidelines de Google »). Sans aller jusqu’à le conseiller spécialement, je ne pense pas non plus qu’il faille le déconseiller. Pour aller encore plus loin dans l’expérimentation, on pourrait utiliser l’attribut Title sur les dd pour introduire des variations d’une page à l’autre.

La conclusion de l’expert SEO

Lorsqu’on conçoit le code HTML d’un site, il faut garder à l’esprit qu’un moteur de recherche a besoin d’être guidé. Je recommande d’utiliser les balises h1 à h3 de manière à ce qu’en les lisant, on ait une sorte de « plan de la page » (rappelez-vous de vos cours : grand I, petit b, etc.) qui suffira à la résumer. De cette manière, les moteurs sauront d’emblée quel est (ou sont) le(s) thème(s) de la page, et par voie de conséquence, quand la présenter à l’internaute qui effectue une recherche. Pour les balisages communs à toutes les pages du site, je recommande l’utilisation d’éléments sémantiquement « neutres » (comme div et span).

La conclusion de l’intégrateur

La banalité et la récurrence de la présence du logo et du slogan aurait pu laisser supposer une relative homogénéïté des pratiques. Il n’en est rien : on trouve un nombre important de combinaisons. Certaines sont sémantiques mais ne sont pas optimisées en terme de référencement ; d’autres ne paient pas de mine, mais permettent aux articles de transmettre plus de «jus» aux termes et aux expressions utilisées.

A part celui que j’utilise déjà, les deux derniers composés HTML ont ma préférence. Ils permettent de lier sémantiquement le nom du site avec sa baseline (ainsi que le logo) sans utiliser de balise hiérarchique h1 ou de balise de contenu p.

Par ailleurs — et même si on peut considérer l’absence de feuille de style comme une légende urbaine — j’aime assurer un maximum de lisibilité en dehors de toute mise en forme : le contenu doit être «tout terrain» même s’il ne sort que rarement accompagné sans CSS ou Javascript.

Merci à Didier Sampaolo d’avoir pris le temps de se pencher sur ces composés HTML et d’avoir donné un point de vue extérieur, ce qui donne à cet article un supplément d’âme :-)

Articles sur le même sujet

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

Bruno Bichet — Fri, 12 Nov 2010 08:00:39 +0000

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.

Deux mots sur l’algorithme de Google

Le classement des pages par Google tient compte de nombreux critères. Grosso modo, plus les liens extérieurs qui pointent vers vos pages thématiques sont nombreux, plus vous aurez des chances d’apparaitre en bonne position sur ces mêmes thématiques. Le PageRank officialise les choses. A côté de ce principe général, Google pondère ses résultats avec, par exemple, le nombre de clics effectués sur une page par rapport au nombre de fois où elle apparait dans les résultats (consultez les outils Google pour Webmasters pour plus d’information).

Les composantes de l’algorithme de classement des pages par Google. Surveillez votre CTR !

Google utilise déjà une forme d’enchère similaire pour les Adwords : plus votre annonce est cliquée et plus elle apparait en haut des résultats avec un coût par clic (CPC) à la baisse. Si votre annonce intéresse les visiteurs (qu’il s’agisse de la nature du produit ou de la manière dont vous présentez les choses) Google vous récompense pour vos efforts.

Lisez le blog de Patrice Albertus (Search marketer) pour en savoir plus sur les questions liées au marketing pour les moteurs de recherche.

Aperçu instantané

De la même manière, la fonction Aperçus instantanés va inciter les visiteurs à parcourir les différents aperçus proposés, et ce d’autant plus que l’affichage des aperçus est rapide et généreux, ce qui ne doit pas être un hasard quand on connait la hantise de Google concernant les performances d’affichage de sa page de résultats.

Le visiteur pourra donc faire son choix entre… Entre quoi, au juste ? Ah oui, entre :

Le design qui lui semblera le plus cohérent avec ce qu’il s’attend à trouver,
La page qui sera la plus lisible ou la plus avenante,
La page qui proposera le plus de visuels allèchants,
La page qui aura le logo ou le motto le plus accrocheur,
La page dont le design sera plus ou moins moderne en fonction des goûts de l’utilisateur,
Une site d’apparence institutionnel ou un blogzine,
Un vrai site ou un MFA ^^
etc.

C’est la petite loupe à côté du titre qui permet d’activer l’aperçu instantané (Instant Preview). Cliquez pour agrandir l’image.

Le Webdesign, ce n’est pas juste pour faire joli !

Avec la possibilité de comparer le design des pages directement dans les SERP’s, les clics des visiteur risquent d’influer fortement sur le positionnement des pages proposées en première intention par Google. Après la prise en compte de la qualité rédactionnelle, le design et la direction artistique pourraient devenir des éléments fondamentaux (comprendre : pas uniquement pour faire joli) qu’il faudra penser dès le départ pour optimiser l’expérience utilisateur avant même que le visiteur ne se soit rendu sur votre site. Encore une avancée qui devrait rapprocher les différents intervenants de la chaine de production Web !

Articles sur le même sujet

15 « Photoshop-like » en ligne testés et commentés

Bruno Bichet — Thu, 18 Mar 2010 19:31:48 +0000

Photoshop est encore un logiciel incontournable pour l’édition d’image. Mais il est parfois agaçant de sacrifier sa mémoire vive pour effectuer des modifications triviales sur des images (redimensionnement, recadrage, corrections chromatiques, ajouter du texte) ou faire des opérations plus complexes (détourage, remplacement de fond, etc). A côté des économies de RAM, il peut être utile de proposer à ses clients une application en ligne pour modifier les images avant publication ; si WordPress propose des outils pour recadrer, pivoter ou redimensionner les visuels depuis la version 2.9, on est encore loin de faire ce qu’on veut avec ses cheveux ! C’est pourquoi, je vous ai concocté une liste composée d’une bonne dizaine d’outils passés au crible avec un résumé, les «plus», les «moins» et un «verdict» pour que vous fassiez le bon choix.

Picnik
Cet éditeur d’image intégré à Flickr (et racheté par Google depuis peu) est très simple d’utilisation. Une fois sur le site, il suffit de sélectionner une photo sur votre poste de travail pour commencer à travailler. Les outils sont orientés «retouche de photo» pour l’impression papier : correction automatique des couleurs et du contraste, pivotement, rognage, redimensionnement, réglage de l’exposition, des les couleurs, de la netteté, etc.
Les plus
- L’interface est composée de gros curseurs que l’on fait glisser pour voir le résultat des manipulations en direct live,
- Des boutons Annuler et Rétablir mettent l’utilisateur novice en confiance,
- L’interface est en français, ce qui ne gâche rien, surtout que des aides sont disponibles pour indiquer la marche à suivre à chaque réglage,
- Pour finir, un zoom permet d’afficher l’image jusqu’à 800% de la taille d’origine.
Les moins
- Pas de gestion des calques,
- Pas de sélection : les opérations sont globales,
- Nombreuses options payantes,
- Chargement un peu long.
Verdict
Idéal pour permettre aux clients novices d’effectuer les corrections basiques mais souvent nécessaires lorsqu’on met des photos en ligne. Simplicité et efficacité.
Sumo Paint
Après un chargement très rapide, l’interface de Sumo Paint n’a pas à rougir devant celle de Photoshop : elle est même plus réactive ! On y retrouve la plupart des outils de retouche et de création avec la même gestion des options dans une barre sous le menu principal. La palette des calques est très complète et comprend un menu pour les effets de calques qui reprend la majeure partie des effets proposés par Photoshop comme les ombres portées ou les effets de lueur internes ou externes.
Les plus
- Prise en main rapide,
- Orienté retouche et manipulation de photo,
- Nombreux équivalents-clavier,
- Gestion des dégradés,
- Annulations multiples,
- Zoom à 1000%,
- Baguette magique,
- La barre d’espace permet de se déplacer dans l’image avec l’outil Main.
Les moins
- Il manque l’outil Plume pour les détourages,
- La gestion des sélections n’est pas simple,
- Pas de version française.
- Aspect du contour de la sélection,
Verdict
Un très bon outil généraliste qui devrait plaire à ceux qui sont déjà habitués à utiliser des outils complexes de retouche d’image. Le zoom à 1000% permettra d’affiner les sélections réalisées avec le lasso. On retrouve les habitudes prises avec Photoshop pour ajouter ou retrancher à la sélection.
PicMagick

L’interface n’a pas grand chose à voir avec celle de Photoshop : elle est partagée en deux parties avec à gauche deux menus (Basics et Effects) et la zone principale pour afficher l’image. C’est clair et sobre. Ça devrait plaire. Un gros bouton Load Image permet de charger un image depuis le poste de travail.
Le bouton Save, permet d’enregistrer l’image. Le menu Basics permet d’effectuer des opérations simples : recadrage, rotation, anti yeux rouges, adoucisseur de peau, ajustement et amélioration des couleurs. Le menu Effects propose un outil Netteté, Flou, Couleurs sépias, Niveaux de gris, et Glow (effet de luminescence ou de halo).
Les plus
- Le résultat des opérations sur l’image ou les couleurs est affiché en temps réel dans la fenêtre principale,
- Les options vont à l’essentiel,
- Outil Smooth Skin (Adoucisseur de peau) utile et intuitif,
- Outil Main avec la barre Espace,
- Les outils Ajustement et Amélioration des couleurs, particulièrement efficaces.
Les moins
- Pas d’outils de sélection pour isoler une portion de l’image,
- En anglais (mais la frugalité de l’interface rend la traduction moins indispensable),
Verdict
Les options vont à l’essentiel, sans fioriture et c’est ce qui est plaisant avec PicMagick. L’outil Smooth Skin est particulièrement sympa pour adoucir les visages. J’aime bien l’outil Ajustement des couleurs qui propose un pipette pour sélectionner une couleur neutre sur l’image afin de redéfinir la balance des couleurs, ajustable ensuite en terme de température ou de teinte. Bref, un outil à mettre en toutes les mains, y compris pour les non-anglophones.
Pixlr
L’interface démarre par le choix entre la création d’une nouvelle image à partir de rien, l’ouverture d’une image présente sur le poste de travail ou depuis le web en précisant son URL. Cette application propose une interface qui semblera familière aux utilisateurs de Photoshop grâce notamment aux équivalents-claviers.
Les plus
- Interface en plusieurs langues dont le français.
- L’outil de recadrage propose une grille pour recadrer les photos selon la règle des tiers.
- Outil anti yeux rouge.
- Rapidité.
Les moins
- L’aide n’est pas contextuelle.
Verdict
Une application honnête et rapide, une sorte de tout-terrain de la retouche photo en ligne.
Splashup
Splashup propose d’aller chercher des images sur différents réseaux de stockage et de partage comme Facebook, Flickr, Picasa, SmugMug, PhotoBucket ou Splashup à condition d’ouvrir un compte. Il reste bien évidemment possible d’aller chercher une image sur le disque dur ou depuis son URL. L’interface est douce et ressemble à celle de Sumo Paint tout en étant un peu plus sombre.
Les plus
- Joli contour de sélection.
Les moins
- Pas d’équivalents-claviers,
- En anglais,
- Peu d’options.
Verdict
Les possibilités de sélection se réduisent au Lasso et aux sélections circulaires ou carrées. Si le lasso est assez précis, il ne semble pas possible d’ajouter plusieurs sélections successives pour effectuer un détourage, par exemple. Par ailleurs, les possibilités de retouches d’image sont assez limitées.
Photoshop Express
L’outil d’édition et de gestion d’image de Photoshop est finalement celui qui ressemble le moins à la version logicielle. Il est nécessaire de s’enregistrer pour pouvoir sélectionner une image depuis son disque dur, mais il est possible de tester l’outil en cliquant sur Test Drive. La partie Edition d’image n’est qu’une option parmi d’autres, mais elle permet d’effectuer des opérations complexes en cliquant sur des prévisualisations des différents états possibles. Le passage de la souris affichant immédiatement l’image telle qu’elle apparaitra une fois les modifications validées. C’est très bien réalisé. D’autant plus qu’un curseur sous les vignettes permet de choisir les valeurs intermédiaires. Photoshop Express propose également un mode Décoration en version bêta qui propose d’ajouter du texte, des bulles de dialogue, des post-it ou des illustrations vectorielles.
Les plus
- Présélection des effets avec prévisualisation automatique,
- Outil anti yeux rouge particulièrement efficace,
- Zoom et navigation dans l’image à l’aide d’une miniature interactive,
- Une case cochée apparait devant les effets qui ont été appliqués. On peut les activer ou les désactiver à volonté.
Les moins
- Obligation d’ouvrir un compte pour éditer des images en provenance de son poste de travail,
- Pas d’outil de sélection,
- Pas de version française (mais il existe une version allemande et japonaise).
Verdict
Assez déroutant au premier abord tant l’interface s’éloigne de ce auquel on aurait pu s’attendre, Photoshop Express s’avère être un outil intuitif et très simple d’utilisation.
Pixer.us
Assez sobre voire austère, Pixer.us propose des opérations comme le recadrage, redimensionnement, la rotation des images mais aussi quelques manipulations sur la luminosité, le contraste, la saturation, l’ajout de flou ou de netteté. Quelques effets gadgets sont à éviter, à part peut-être l’effet «1850» qui donne à votre visuel l’aspect caractéristique des premières photographies.
Les plus
- Le curseur pour modifier la taille de l’image met l’image à jour en temps réelle en affichant les valeurs en direct live,
- Effet «1850».
Les moins
- Les valeurs en pixels qui s’affichent lors du recadrage de l’image ne sont pas sélectionnables et ne se mettent pas à jour en temps réel : il faut tâtonner pour trouver la bonne valeur,
- Pas de version française,
- Les effets mettent du temps pour s’afficher,
- Fonction Annulation un peu laborieuse.
Verdict
Un peu trop austère, un peu trop lente, cette application ne brille pas particulièrement. Pour le côté sobre, je préfère largement PicMagick.
Phoenix

Image Editor (Phoenix) fait partie de la suite Aviary qui comprend de nombreux outils en ligne : Image MarkUP (Falcon), Color Editor (Toucan), Effects Editor (Peacock), Vector Editor (Raven) et Audio Editor (Myna). Après un chargement assez long (enfin tout est relatif), Phoenix offre un environnement complet de création et de retouche d’image dans une interface très «application de bureau».
Cet outil se rapproche bien de l’esprit de Photoshop. L’outil Lasso permet d’ajouter ou de retrancher à la sélection courante avec les mêmes équivalents-claviers que Photoshop, et c’est pareil pour la Baguette magique dont on peut régler la tolérance et la sélection des pixels contigus ou non. En commençant par la Baguette magique puis en affinant avec le Lasso, on parvient — en jouant sur le zoom à 400% – à isoler assez facilement un personnage du fond.
Les plus
- Gestion intuitive des dégradés,
- Ajout/retranchement des sélections au clavier,
- Effets de calques,
- Calques de dégradés (biseau et lueur),
- Historique des actions effectuées en mode «texte» ou «vignette» avec retour à un état antérieur,
- Nombreux tutoriels disponibles.
Les moins
- Pas d’outil Plume.
Verdict
Phoenix est un outil très complet relativement simple à prendre en main si l’on a déjà l’habitude d’un logiciel comme Photoshop. Ses fonctions, ses options et sa rapidité en font l’un des meilleurs de cette sélection.
Flauntr
Il s’agit d’un service proposé par le groupe FotoDesk spécialisé dans l’impression photo, ce qui explique l’orientation plutôt ludique des applications disponibles une fois que l’on a ouvert un compte gratuit. Malheurement, je n’ai pas pu me connecter une fois enregistré, la gestion calamiteuse des caractères du clavier par Flauntr doit y être pour quelque chose. Bref, j’ai demandé le renvoi de mon mot de passe. J’ai bien réessayer plusieurs inscriptions avec des mots de passes très simples, mais rien n’y fait pour l’instant. Je laisse les chose en l’état et je reviendrais vers Flauntr quand il sera calmé ;)
Les plus
- ?
Les moins
- Connexion impossible après enregistrement.
Verdict
Inscription un peu lourde : obligation d’avoir au moins 6 caractères dans l’identifiant (du coup br1o ne passe pas) et dans le mot de passe (là encore ça peut se comprendre). Impossibilité d’accéder aux outils malgré plusieurs tentatives de connexion

Autres outils bien pratiques

http://www.roundmypic.com — Arrondis les angles de vos images avec un effet de relief. En option : désactivation de l’effet relief, valeur de l’arrondi en pixels et redimensionnement de l’image. La couleur de fond de l’image devient transparente sur les côtés pour la placer sur un fond de couleur. Via Roget.biz.
SnipShot — La plupart des effets sont réservés à la version payante. Pour 9$ par mois, je pense qu’il vaut mieux se tourner vers Picasa en version desktop ou se tourner vers Photoshop Elements qui coûte moins de 80€ jusqu’au 11 avril 2010.
drPic — A part le redimensionnement, le recadrage, la rotation et le réglage des contrastes, cet outil propose des effets de cadres assez basiques. Enfin, je dis ça, mais tout les goûts sont dans la nature, et de ce point de vue, ne disons pas au client ce qu’il doit aimer, mais demandons-nous plutôt comment lui donner les moyens de créer lui-même de beaux cadres autour des images. De ce point de vue, le docteur Pic tombe… à pic, bien sûr ! On a du mal à distinguer les fonctionnalités de la publicité.
Pixenate — Dans le même esprit que le précédent.

Pour la route

Conclusion

Ces applications en ligne en remplaceront pas votre logiciel d’édition d’impage, qu’il s’agisse de Photoshop ou de Gimp, mais vous pourrez sans problème les conseiller aux clients qui ont besoin d’effectuer des retouches simples avant d’illustrer leurs contenus dans leur CMS préféré. Pour eux, Picnik sera parfait.

Par ailleurs, je trouve ces services en ligne très pratiques en situation de mobilité avec les Netbooks où Photoshop n’est clairement pas à son aise. Pour ceux qui ont l’habitude de Photoshop ou de Gimp : Sumo Paint ou Phoenix rendront de grands services.

Mention spécial pour Phoenix et l’ensemble de la suite de logiciels en ligne Aviary qui propose de surcroit des outils pour réaliser des captures d’écran : extentions Firefox et Chrome ; bookmarklet multi navigateur.

Articles sur le même sujet

Genfavicon — Générateur de favicon

Bruno Bichet — Fri, 29 Jan 2010 06:48:04 +0000

Genfavicon – Un favicon est une image miniature qui prend place devant l’URL du site consulté dans IE8 ou Firefox et/ou dans les onglets de Google Chrome. Ils sont pratiques pour identifier les sites web que vous consultez lorsque plusieurs onglets sont affichés. Pour réaliser un favicon, n’importe quel éditeur d’image peut faire l’affaire. Toutefois, un générateur d’icônes comme Genfavicon vous permettra de gagner du temps en autorisant le recadrage d’une image distante à partir de son URL ou depuis votre poste de travail.

Choix de l’image

Genfavicon est pratique. Il manque peut-être la gestion du déplacement de la sélection au clavier pour améliorer la précision du recadrage.

Genfavicon, un service en ligne pour créer rapidement votre favicon. Cliquez pour agrandir l'image.

Les formats pris en charge sont le GIF, le PNG et le JPEG. Une fois que vous aurez recadré l’image, Il faudra ensuite choisir la taille parmi les formats proposés : 16×16, 32×32, 48×48, 64×64 ou 128×128.

Insérez votre favicon

Les navigateurs modernes sont capables d’afficher un favicon s’ils trouvent le fichier favicon.ico à la racine de votre site web. Vous pourrez l’insérer de la manière suivante pour une meilleure compatibilité :

Plus d’information sur les favicons avec Mettre en place un favicon et Faite un geste pour la planète mettez un favicon.

CSS & Webdesign » Image

Media queries et téléchargement des images par les mobiles

Articles sur le même sujet

Nouvelle méthode de remplacement de texte par une image

«image replacement» : une autre technique

Comment ça marche ?

Avantages par rapport à text-indent

Effets de bord

Pour finir

Articles sur le même sujet

Nouvelle méthode de remplacement d’image en CSS

FIR (Fahrner Image Replacement)

Fahrner

Phark Method

Phark Method

Kellum Method (new image replacement)

Kellum Method

Pour en savoir plus

Articles sur le même sujet

Classes CSS générées par WordPress pour les images

Classes CSS pour aligner les images

Les styles associés (à titre indicatif)

Formats des images

Légende (caption)

Classes multiples dans IE6 ?

Articles sur le même sujet

Une solution CSS accessible pour remplacer du texte HTML par une image

Marquage HTML & CSS

Aperçu du composé HTML & CSS en images

CSS et images activées

Le logo texte et la description se retrouve derrière l’image conformément à leurs propriétés z-index respectives.

Avec images sans CSS

L’absence de CSS annule les propriétés de positionnement dans le flux et d’empilement des éléments.

Sans images avec CSS

Si les images sont désactivées, les propriétés position: absolute et z-index continuent de jouer leur partition.

Sans image et sans CSS

Le grand jeu ! Voici le header en l’absence de toute fioriture : plus d’image et plus de CSS !

Conclusion

Articles sur le même sujet

8 techniques CSS pour remplacer du texte HTML par une image

Jouer sur la taille des caractères avec font-size

Déplacer le texte hors du Viewport avec text-indent ou position

Sortir le texte du flux avec display

Masquer le texte avec visibility

Placer le texte derrière l’image avec z-index

Exemples de marquages HTML

jQuery for Designers

Klout is the Standard for Influence

ici & ailleurs

W3C

Web Designer & Front-end Developer - Soh Tanaka

C’est quoi le plus mieux bien ?

Blog & Blues

C’est fini

Linkographie

Articles sur le même sujet

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

1. Logo texte dans «h1»

ici & ailleurs

2. Logo texte dans «h1» et Motto dans «p»

Ergonomie Web, Expérience Utilisateur et Ruby On Rails

3. Logo image dans «div»

4. Logo image et Motto dans «span» enveloppés dans «address»

5. Logo image dans «h1» et logo texte dans «span»

W3C

6. Logo image dans «h1» avec baseline évènementielle

7. Logo image dans «span»

8. Logo texte et image dans «dt» et motto dans «dd»

La conclusion de l’expert SEO

La conclusion de l’intégrateur

Articles sur le même sujet

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

Deux mots sur l’algorithme de Google

Les composantes de l’algorithme de classement des pages par Google. Surveillez votre CTR !

Aperçu instantané

C’est la petite loupe à côté du titre qui permet d’activer l’aperçu instantané (Instant Preview). Cliquez pour agrandir l’image.

Articles sur le même sujet

15 « Photoshop-like » en ligne testés et commentés

Les plus

Les moins

Avantages par rapport à `text-indent`