Votre blog sur un téléphone portable, really ready ?

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Votre blog sur un téléphone portable, really ready ?

Votre blog sur un téléphone portable, really ready ? Des fois c’est facile, des fois… pas facile. Pourtant, un site web ou un blog devraient être accessibles depuis n’importe quel périphérique, y compris un téléphone portable. Après la lecture du billet de Nico, j’ai testé mon blog sur le site .mobi qui a évalué ma page d’accueil sur une échelle de 1 à 5 en fonction de sa lisibilité sur un petit écran, de sa taille et de l’estimation de sa vitesse (ou coût) de chargement. Le tout en une trentaine de tests. Strict is the way…

Comme vous pouvez le constater, avec une note de 2 sur 5, mon blog n’est pas mobile ready. A cause notamment du marquage XHTML non valide au regard des possibilités de traitement des navigateurs embarqués. Au moins ais-je échappé à la shame frame ^^

Le résumé des tests est sans appel, mais plein d’enseignements : un lien sur chaque élément pris en compte détaille les raisons de l’échec. Sans oublier les avertissements ou les commentaires sur les spécificités non bloquantes à prendre tout de même en considération pour une meilleure accessibilité de mon contenu sur ces petits appareils.

Résultats des tests

Ce blog échoue donc lamentablement à sept d’entre eux :

  1. La page n’est pas conforme à XHTML-MP (wap 2.0, formulation de XHTML à l’usage des périphériques mobiles), ni même à un autre langage comme :
  2. Le marquage XHTML n’est de toute façon pas valide ! C’est vrai que j’ais laissé la DTD Strict Made in Dotclear alors que je devrais mettre une DTD Transitionnal. (c’est fait depuis la capture),
  3. Taille des images. Au moins une image n’a pas de hauteur ou de largeur spécifiée,
  4. Mesures. Des dimensions spécifiées en pixel ou de manière absolue sont détectées dans la feuille de style,
  5. Feuilles de style. Mon utilisation des feuilles de style n’est pas en accord avec les bonnes pratiques. L’usage des styles en ligne en est principalement la cause. Mais aussi l’utilisation des balises sup ou del mal prises en charge par les navigateurs mobiles,
  6. La taille de la page (en incluant les images et les feuilles de styles) est trop importante : si le code HTML se stabilise à 68 ko, la page complète pèse dans les 277 ko… Depuis, j’ai remplacé Prototype et script.aculo.us par la Splash Box de Xuxu pour l’effet lightbox, et j’ai installé jQuery en version compressée pour le reste : j’ai économisé plus de 50 ko,
  7. La page est liée à trop de ressources externes, (images, feuilles de styles et autres objets) ce qui ajoute du temps au chargement de la page.

Avertissements et commentaires

Grâce à ces derniers, j’en ai appris davantage sur les éléments à prendre en compte lorsqu’on veut cibler les navigateurs embarqués dans les appareils mobiles. Répétez avec moi :

  1. J’évite de concevoir mes pages web avec des propriétés display ou float,
  2. Je garde sur un coin du bureau un post-it pour me souvenir que la plupart des périphériques mobiles ne supportent pas Javascript,
  3. Je mets le focus sur les champs input pour faciliter la saisie, et je fournis des valeurs sélectionnées par défaut,De toutes manières, étant données les limitations typiques des formulaires sur les appareils mobiles, une interface utilisateur devrait autant que possible en minimiser l’usage, Lorsque c’est possible, je privilégie les checkbox, radio, et autres button qui ne nécessitent pas de saisie fastidieuse,
  4. Je me retiens d’utiliser des tableaux qui sont par nature difficiles à rendre sur ces petits appareils,
  5. J’utilise les accesskeys sur tous les liens,
  6. Pour finir, je place un fichier sitemap.gz à la racine du site. Chez moi il s’appelle sitemap.xml… je changerais le nom à l’occasion.

Résumé

Pour être mobile ready un site web devrait donc :

  1. Posséder un code XHTML non seulement valide, mais conforme au XHTML-MP, ou en tout cas débarrassé de certaines balises comme sup, del, ou table,
  2. Spécifier les dimensions des images,
  3. Abandonner les unités de mesures fixes (sauf peut-être pour les images) au profit des unités relatives comme em, ex ou %,
  4. Éviter les styles CSS en ligne comme style= »border: 0; » par exemple,
  5. Limiter (voire supprimer) les liens vers les ressources externes comme les scripts, ou les balises object,
  6. Etre léger, léger…

Malgré le haut-débit et la puissance des processeurs, l’allègement des pages web est toujours d’actualité

Le poids des mots, le choc des photos

Faire un site adapté aux périphériques mobiles ne se limite pas à modifier quelques balises et à en supprimer d’autres. Car même en ne visant que les navigateurs compatibles WAP 2.0, le poids total des pages handicape la plupart des blogs et des sites web.

Toutefois, rien n’est gravé dans le marbre et il est toujours possible d’alléger la page. A cet égard, le choix d’une librairie Javascript légère et évolutive est essentiel. Nous faisons trop souvent comme si le chargement des éléments tels que les CSS ou Javascript dans le cache du navigateur à la première requête, nous autorisait à être léger sur l’accessibilité et à avoir la main lourde sur les effets graphiques ou les animations.

Suite à ces tests, je me suis rappelé que chaque jour, près de 75% des visiteurs venaient ici pour la première fois, et qu’une partie non négligeable, repartait après la première page vue. Ces visiteurs-là n’ont pas le temps d’apprécier les bienfaits de la mise en cache par le navigateur ! Reste l’étude de la mise en cache via PHP qui pourrait — avec compression gzip — faire l’objet d’un autre billet.

L’avenir appartiendrait-il aux flux Atom et RSS…

On peut envisager de détecter le navigateur et décider de charger ou non ces ressources, mais cette approche ne règle pas les autres particularités des navigateurs embarqués concernant notamment les propriétés float. Et encore je ne parle même pas des unités de mesure trop souvent définies en pixels.

Pour moi, la solution se trouve du côté des flux Atom ou RSS qui vont à l’essentiel du contenu. A cet égard, j’ai trouvé I Feed You qui permet de convertir un fil RSS/Atom au format Wap et i-mode pour suivre l’actualité d’un site ou un blog très simplement depuis un mobile.

…avec du semacode dedans ?

C’est déjà pas mal. Mais sachez que nous pouvons épargner cette fastidieuse saisie de l’adresse du flux en question en utilisant les tags visuels de semacode.

Semacode permet de générer un code barre qui sera lu par le téléphone portable

Alors n’hésitez plus, et créez un code barre pour le flux RSS/Atom de votre blog. Il sera ainsi facilement accessible aux utilisateurs d’un mobile avec appareil photo.

PS : Si vous connaissez un bon lecteur de flux pour téléphone portable, ou d’autres solutions, c’est le moment de dégainer :)

Stay tuned and mind the gap!

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



9 commentaires pour “Votre blog sur un téléphone portable, really ready ?”

  1. francis dit :

    N’est-il pas urgent d’attendre avec l’arrivée du nouvel IE portable, la dernière version d’Opéra pour mobile ? Ensuite n’est-il pas plus simple de proposer une feuille de style uniquement pour mobile et enfin pour régir sur javascript je vois souvent sur les forums les pro javascript dire que maintenant seulement 1% des internautes interdisent javascript je n’ai pas regardé de plus prêt les nouvelles mouture d’opéra mobile ni de IE mais si elle ne support pas le javascript je crois qu’il va falloir faire un effort de ce coté là car le surf avec appareil mobile devrait aller croissant non ?

  2. Marin dit :

    Hello, en fait, l’idéal serait un thème du blog pour les navigateurs mobiles. Cela dit en passant, un tel bonheur existe pour WordPress (WP-Mobile: alexking.org/projects/wor… ) le plugin est en action sur mon blog. De toute façon avoir un code propre aide a l’affichage sur les portables.

  3. br1o dit :

    francis > oui, effectivement, une feuille de style spécifique pour les téléphones portables est une bonne idée. Mais à la limite, si les navigateurs mobiles ignoraient tout simplement les feuilles de styles ;)

    Il m’arrive de surfer de temps à autre sur mon pda qui propose de linéariser la page et ça suffit largement pour ce type de consultation.

    Marin > Je ne connaissais pas du tout l’existence de cette extension wordpress pour le thème dédié aux mobile… Et en gros, ça ressemble à une feuille de style pour le print ou autre chose ?

  4. Sur un téléphone portable Suite au sujet de « Votre blog sur un téléphone portable, really ready ? », du blog css4design, j’ai aussi testé mon blog sur le site .mobi. Ce site permet d’évaluer la lisibilité de mon blog (ou tout autres site) sur un téléphone portable….

  5. fnapz dit :

    Bonjour,

    Pour dotclear 1.2.5, vous trouverez une version mobile pour le blog ici : http://www.fnapzilla.net/index.p...

    Les tableaux, le javascript et tout autre fioriture ne sont pour l’instant que des doux rêves pour les pauvres processeurs des mobiles sur le marché (diminution de l’autonomie …). Un site mobile c’est un compromis : efficacité (avant tout)/design. On ne peut pas vouloir retrouver l’identique d’un site web sur le mobile mais plutôt une utilisation de ce même site en situation de mobilité, ce qui est une autre approche d’un même outil.

  6. br1o dit :

    fnapz > Tout d’abord merci pour le lien que je me suis empressé de visiter.

    J’ai testé mobiblog.php mais lors de l’accès via mon portable, je n’ai pu accéder à la page à cause de l’erreur xml.org/sax/exception/xml/vc-element …

    Pourtant le fichier est bien en place à l’adresse http://www.css4design.com/m...

    Le mobile peut-il être en cause, ou le marquage ?

  7. fnapz dit :

    le syndrome de la démo qui ne marche pas :)

    Quel est le mobile utilisé ?

  8. br1o dit :

    fnapz > c’est toujours comme ça :p Le mobile est un Samsung 501i noir assez récent.

  9. Nico dit :

    Billet super bien détaillé. Excellent. :)



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site