J’ai écarté la mise en place d’un style switcher pour changer la feuille de style CSS standard par une CSS spécifique aux mobiles ; difficile dans ce cas de partager une URL de type http://mobile.css4design.com ! Sans compter la reconnaissance des périphériques qui va du format 240 x 320 pixels des téléphones portables aux 800 x 480 pixels des premiers eeePC !

Créez votre version mobile à partir des modèles de pages WordPress

Je suis donc partie sur l’idée d’utiliser le moins de ressources possible (y compris intellectuelles) et de voir ce qu’il est possible de faire sans quitter WordPress. La création d’une nouvelle Page Version mobile basée sur une le Modèle de page mobile.php s’est imposée :

1. Créez votre template mobile :

           <title></title>
   
   
       <div>
               <h1>
                   css4design | Version mobile du blogzine d'un intégrateur web
               </h1>
   
           <div>
               <h2></h2>
               <div></div>
               <p>Publié le  par .</p>
               <hr />
           </div>
   
       </div>
   

2. Créez ensuite une nouvelle Page (Ecrire -> Page),

3. Donnez-lui le titre Version mobile,

4. Sélectionnez le modèle de page mobile (Modèle de page -> choix du modèle dans la liste déroulante),

5. Enregistrez, c’est fini.

Ce template affiche les 5 derniers billets et il suffit de modifier le paramètre showposts="5" pour l’adapter à vos besoins en gardant à l’esprit que le poids de votre page fait partie des éléments à surveiller de près pour un affichage optimum sur un téléphone portable notamment.

En savoir plus : sur la création d’un modèle de page et sur les boucles WorPress.

les plus

• Basique, permet d’aller à l’essentiel : proposer un lien pour afficher les 5 derniers billets sans formatage, donc accessibles depuis n’importe quel périphérique accédant au web,
• Service minimum, rapidité maximum ;)
• l’identifiant dans le body permettra de styler légèrement cette version mobile de votre blog (changer la taille de la police de caractère, gérer les interlignage de texte, etc.)

Les moins

• Il s’agit d’une page unique qui ne permet pas (d’après des tests rapides) l’affichage des commentaires de l’article,
• Les liens internes pointent vers la version standard,
• Il ne s’agit pas d’une vraie version mobile (manque le Doctype adapté, code HTML non-valide au regard des possibilité des mobiles, page encore un peu lourde, etc.),

Ressources pour la conception de pages web « mobiles »

Voici quelques liens en relation avec la conception de sites pour mobiles :

• ready.mobi — Cet outil de test gratuit évalue la conformité de votre page ou de votre site web au regard des standards et des bonnes pratiques spécifiques à ce secteur d’activité. Les résultats se présentent sous la forme d’une note de 1 à 5 et d’une analyse approfondie de la page pour en évaluer les performances sur un périphérique mobile. Nombreux conseils pour corriger les erreurs.

• dev.mobi — Toutes les informations pour développer votre site mobile ready : guide du développeur, outil pour construire votre site rapidement, etc.

• Votre blog sur un téléphone portable, really ready ? — Présentation détaillée de ready.mobi avec l’analyse de mon blog.

• W3C mobileOK Checker [Beta] — Make your Web site mobile-friendly! Déclinaison pour mobile du validateur du W3C.

• Developing Wireless Content using XHTML Mobile — Cet article montre comment créer un document XHTML adapté aux périphériques mobiles : mise en place de l’environnement de travail et transformation d’un document XHTML en WML.

Peut mieux faire !

Coluche vous le dirait, cette solution ne promet pas le grand soir, mais juste à manger et à boire ;) Elle s’inscrit dans une démarche visant à proposer aux lecteurs différentes manières d’accéder aux articles en complément des flux RSS. N’hésitez pas à proposer vos idées pour l’améliorer (notamment pour afficher les commentaires, n’afficher qu’un seul article avec pagination pour alléger la page, etc.).

Articles sur le même sujet

• Danse avec les loops #1 : un thème WordPress mis à nu
• Le Petit Journal du Web — 09/2011
• Création de site WordPress de A à Z — B comme Basics
• WordPress de A à Z — A comme Allons-y ! (on s'organise)
• Créer son site web avec WordPress de A à Z… avec le Codex