La tête dans le Flux !

Les mobiles nous mentent !

Vous le savez sans doute : les périphériques mobiles disposent de trois types de largeurs différentes :

• screen width : largeur physique de l’écran
• device-width : largeur déclarée par le périphérique
• viewport : largeur de fenêtre du navigateur

Ces données ne concernent que la largeur mais sont transposables pour la hauteur, et sont bien-sûr susceptibles de changer selon l’orientation !

J’ai toujours cru que la valeur de device-width était fixée pour chaque périphérique, par exemple que le device-width sur iPhone 3 et 4 était tout le temps de 320 pixels. Mais ça c’était avant d’avoir fait quelques tests utilisateurs.

En bas de cet article, vous trouverez l’ensemble des données récoltées.

Ces tests n’ont rien de scientifiques ni de révolutionnaires, mais ils m’ont permis de comprendre que device-width ne dépend pas forcément que du périphérique, mais également du navigateur utilisé.

En résumé, si vous appliquez le désormais célèbre <meta name=”viewport” content=”width=device-width”>, votre base de travail sera non seulement différente selon les différents périphériques (pas de surprise jusque là), mais elle sera aussi différente sur un même périphérique selon votre navigateur !

(Et si vous n’utilisez pas la valeur “width=device-width”… c’est pire !)

Trois points me semblent essentiels :

• iPhone 3 et iPhone 4 ont le même device-width, malgré leur densité de pixels différente
• Le device-width sur Safari est identique en portrait qu’en paysage (!)
• Un device-width (en portrait) peut globalement varier de 240px à 640px selon les terminaux mobiles

De ce dernier point découle une conséquence logique : votre design, parfaitement affiché et votre navigation idéalement proportionnée pour iPhone (device-width 320px) seront comparativement deux fois plus réduits et donc potentiellement moins ergonomiques - voire inaccessibles - sur certains autres smartphones (device-width 480 à 640px).

Les données collectées

Apple iPhone 3GS

• Safari (portrait + paysage) : >180dpi / ratio >0.7 / device-width >320

Apple iPhone 4

• Safari (portrait + paysage) : >320dpi / ratio >2 / device-width >320
• Opera mini (portrait) : (NR resolution et ratio) / device-width >320
• Opera mini (paysage) : (NR resolution et ratio) / device-width >480
• iCab (portrait + paysage) : >320dpi / ratio >2 / device-width >320
• Dolphin (portrait + paysage) : >320dpi / ratio >2 / device-width >320

Apple iPad 2

• Safari (portrait + paysage) : >180dpi / device-width >640
• Dolphin (portrait + paysage) : >180dpi / device-width >640
• iCab (portrait + paysage) : >180dpi / device-width >640

HTC Sensation

• IE mobile : >220dpi / ratio >1.1 / device-width >480

HTC HD7

• IE mobile : (NR resolution et ratio) / device-width >480

HTC Incredible S

• Android : >250dpi / ratio >1.5 / device-width >640

HTC Desire HD

• Navigateur intégré (portrait + paysage) : >250dpi / ratio >1.5 / device-width >600
• Firefox (portrait) : >220dpi / ratio >1.1 / device-width >480
• Firefox (paysage) : >220dpi / ratio >1.1 / device-width >640
• Android (portrait) : >250dpi / ratio >1.5 / device-width >320
• Opera mini (portrait) : >220dpi / ratio >1.1 / device-width >380
• Opera mobile (portrait) : >220dpi / ratio >1.1 / device-width >320
• Opera mobile (paysage) >220dpi / ratio >1.1 / device-width >480

Galaxy Nexus

• Android (portrait) : >320dpi / ratio >2 / device-width >640

Galaxy Note

• Android (portrait) : >320dpi / ratio >2 / device-width >640
• Firefox (portrait) : >320dpi / ratio >2 / device-width >640
• Opera mobile (portrait) : >320dpi / ratio >2 / device-width >320

Samsung Nexus S

• Android (portrait) : >250dpi / ratio >1.5 / device-width >480
• Android (paysage) : >250dpi / ratio >1.5 / device-width >640
• Firefox (portrait) : >220dpi / ratio >1.1 / device-width >480
• Firefox (paysage) : >220dpi / ratio >1.1 / device-width >640

LG GT540

• Android (portrait) : >180dpi / ratio >0.7 / device-width >640

LG Optimus One

• Navigateur intégré (portrait) : >180dpi / ratio >0.7 / device-width >320

LG 2X

• Navigateur intégré (portrait) : >250dpi / ratio >1.5 / device-width >640
• Firefox (portrait) : >220dpi / ratio >1.1 / device-width >480

Nokia N8

• Symbian (portrait) : >220dpi / ratio >1.1

Motorola Milestone

• Android (portrait) : >250dpi / ratio >1.5 / device-width >640

Samsung Omnia 7

• IE mobile (portrait) : (NR resolution et ratio) / device-width >480

Samsung 5800 GT

• IE mobile (portrait) : >180dpi / ratio >0.7 / device-width >240

Vous voulez un exemplaire du livre “CSS avancées” dédicacé ?

Vous le savez peut-être déjà : la 2è édition de mon livre “CSS avancées - vers HTML5 et CSS3” va sortir dans quelques jours, le 3 février exactement.

Certains m’ont dit être intéressés pour recevoir un exemplaire dédicacés par l’auteur.

Ça tombe bien, c’est possible. Je dispose d’une vingtaine d’exemplaires que je peux vous dédicacer et envoyer personnellement.

Vous aurez même droit à une réduction et si vous habitez en France, je me chargerai des frais de port.

Voici les ouvrages qu’il me reste (stock mis à jour régulièrement) :

• 8 exemplaires de la 2è édition (2012), à 35€ au-lieu de 38€
• 5 exemplaires de la 1ère édition (2011), bradés à 25€ au-lieu de 38€

Voici la marche à suivre pour obtenir ces livres dédicacés :

1. Aller sur Amazon.fr, rubrique “chèque cadeau”.
2. Vous identifier avec votre compte Amazon ou en créer un en 1 minute
3. Accédez au formulaire d’envoi de chèques cadeaux par mail
4. Choisissez le montant correspondant à l’édition souhaitée.. ou plus si vous le souhaitez
5. Compléter les cases “Pour” et “De” telles que vous aimeriez qu’elles soient sur le chèque-cadeau.
6. Quelle est l’adresse e-mail du destinataire ? Ne vous trompez pas, il s’agit de raphael@goetter.fr
7. Message à l’attention du destinataire  : notez ici impérativement votre adresse postale, sans quoi je ne pourrai pas vous envoyer le livre !
   (attention c’est limité en taille et les guillemets doubles ne sont pas pris en compte).
   Si vous souhaitez une dédicace particulière sur le memento, notez-là ici.

Et voilà ! Y’a plus qu’à attendre le facteur : j’effectuerai la première livraison ce vendredi 3 février (jour de la sortie officielle de la 2è édition).

N’hésitez pas à laisser un commentaire s’il y a le moindre problème ou pour toute question.

Je tiendrai à jour ce billet pour correspondre au stock de livres restants.

Adaptation du menu de goetter.fr sur mobiles

Moyennement fan des menus de navigation occupant toute la place de nos chers petits écrans de mobiles, je me suis amusé ce week-end à concevoir un menu coulissant pour mon site perso Goetter.fr, ainsi l’espace demeure dédié au contenu.

Le principe est que le menu est hors du champ visuel (en haut) et seul une barre et un bouton “menu” permet de le repérer.

En appuyant sur le bouton “menu”, le menu coulisse vers le bas et apparaît.

Le menu a été testé sur Android, Windows Phone 7.5 et iOS (aussi avec l’outil de lecture vocale VoiceOver). Il ne fonctionne pas sur Opera Mini et n’a pas été testé sur Opera Mobile et Blackberry, mais vu les technologies CSS3 employées il ne fonctionnera que sur des smartphones récents.

Menu rétracté :

Menu déroulé :

Qu’en pensez-vous (principe, ergonomie, accessibilité, compatibilité) ?

Le mythe de l’élément H1 unique en HTML

Depuis quelques jours, on voit se diffuser un peu partout une infographie concernant les bases du référencement naturel. Comme dans beaucoup de document vulgarisés, il y a de bonnes choses dans cette ressources, … mais aussi de grosses bêtises basées sur des rumeurs.

L’un des points évoqués qui me dérange le plus est “N’utilisez qu’un seul élément <h1> dans la page”

Et comme j’adore les trolls, j’avais envie de décortiquer la question :)

1- Ce que dit le W3C

Selon les spécifications HTML4, les éléments h1, h2, … h6 servent à décrire le sujet de la section qu’ils introduisent. Un agent utilisateur doit pouvoir s’en servir pour construire le sommaire (table des matières) du document.

Cette définition est illustrée par la règle suivante :

<DIV class="section">
<H1>Forest elephants</H1>
<P>In this section, we discuss the lesser known forest elephants.
...this section continues...

En clair, aucune spécification officielle W3C HTML n’interdit l’usage de plusieurs éléments <h1> et d’ailleurs le code d’exemple ci-dessous tend à montrer que plusieurs <h1> apparaîtraient s’il y avait d’autres sections dans la page.

Note : selon les spécifications, le titre de page est bien <title> et non <h1>.

2- Le cas HTML5

Selon les cas de figure, HTML5 prône l’emploi d’un niveau de titre <h1> au sein de chaque nouvelle section.
Cela a rapidement été interprété en “HTML5 autorise plusieurs H1” en sous-entendant que ce n’était pas le cas avant, ce qui est faux.

3- Ce que dit le dieu Google

De très nombreuses rumeurs ont de tous temps couru sur la puissance de <h1> dans l’algorithme de Google. Ces expectatives ont mené à ce qui semble être devenu une “bonne pratique SEO” : ne surtout pas avoir plusieurs <h1> dans une page.

Pour couper court à ces rumeurs, Matt Cuts de Google s’est exprimé en 2009 dans une vidéo devenue célèbre : http://www.youtube.com/watch?v=GIn5qJKU8VM

Voici ce que dit exactement Matt Cuts dans cette vidéo :

• On peut parfaitement avoir plusieurs <h1> dans la page,
• Mais il faut que ça ait du sens, et ne pas en abuser,
• Il n’est pas normal qu’il y en ait partout,
• Certains ont essayé (d’en mettre partout)… et se sont fait sanctionner par Google

Quelle surprise, n’est-ce pas ? Bref, rien de nouveau, ni de contraire aux spécifications et au bon sens.

(EDIT) 4- Ce que disent les expert en SEO

Il est préférable de n’utiliser qu’un seul H1

Je ne peux pas infirmer ou confirmer cette expérience, n’ayant pas trouvé encore de source d’explication fiable.

Conclusion

Pour commencer, je n’ai aucun conseil à vous donner : puisqu’il est possible de faire comme bon nous semble tant que cela est porteur de sens, j’aurais tendance à faire… comme bon me semble.

En tout cas, ne prenez pas cet article comme une incitation à mettre plusieurs <h1> dans vos pages web, sinon vous aller m’attaquer en justice pour avoir perdu votre positionnement chez Google (alors qu’à mon avis ce sera pour bien d’autres raisons).

Bref, faites ce que vous voulez, mais vous connaissez maintenant mon point de vue sur la question ;)

Quelques sources pour aller plus loin :

• Utiliser plusieurs H1 sur une page web
• H1 and SEO : Myths and Facts
• HTML 5 Outline — Quelques notes sur la structure des pages Web avec h1 et section
• HTML5 and Search Engine Optimisation (SEO)