Créer une feuille de style css spécifique aux mobiles ou un squelette différent, quelques réflexions et quelques propositions techniques pour modifier un peu le plugin iSpip.

Pour qui navigue régulièrement sur le web avec son mobile en 3G, la possibilité d’afficher des pages dans un format simplifier et adapter au téléphone permet d’accéder plus rapidement au contenu sans avoir à supporter le chargement de « décorations » finalement assez superflues.

La version fullcss

Vous pouvez déjà lire cet article assez complet sur le sujet : « Une version iPhone et mobile de son site tout en CSS« .
Le principe est simple, il existe une ligne de code dans le head pour appeler les css en fonction de la destination (screen, print…) et pour le mobile cela se présente ainsi :

<link media=« handheld » href=« handheld.css » type=« text/css » rel=« stylesheet » />

Vous remarquerez cependant que pour les iPhones, cela ne fonctionne pas car ils ne reconnaissent pas le critère media « handheld ». L’article nommé ci-dessus préconise un appel supplémentaire pour les iPhones :

<!– iPhone, iPod —>
<!–[if !IE]>—>
<link rel=« stylesheet » type=« text/css » href=« handheld.css » media=« only screen and (max-device-width: 480px) » />
<!–<![endif]—>

Il définit ainsi une exception pour le critère screen avec une largeur maximum.
Je trouve que le fullcss a des avantages non négligeables. Ce n’est pas compliqué à mettre en place et c’est propre puisque l’url reste la même, aucun risque de duplicate content. Le défaut qui reste pour moi problématique c’est qu’il est parfois nécessaire de vouloir l’affichage classique du site (définit par le critère screen) et là, on se retrouve bloqué.
C’est sans doute une des raisons qui ont poussé les développeurs à proposer des plugins qui génèrent un template (ou un suqelette chez spip) spécifique pour pouvoir basculer de l’un à l’autre selon les besoins.

Voir aussi : Design de poche : Porter votre site web au petit écran et aussi le forum sur alsacréations Créer un site pour téléphone portable.

Les templates (squelettes) spécifiques

Le plus connu des templates spécifiques est sans conteste celui de WordPress (Un plugin mobile génial pour WordPress chez Presse Citron). Au-delà du design simplifié, principe que l’on retrouve plus ou moins dans tous les plugins du genre, j’apprécie le bouton en bas de page pour rebasculer sur le site normal (même s’il arrive que sur certains sites cela ne fonctionne pas).
Vous trouverez pour Dotclear le plugin dc2iphone que nous utilisons sur ce site qui est un template à part entière et qui s’installe ensuite avec un plugin (voir Thème iPhone pour Dotclear2 : dc2iPhone).

Pour spip un plugin est en cours de développement mais déjà utilisable : iSpip (lire aussi cet article sur ispip).

ISpip est un plugin assez simple qui une fois installé propose un squelette spécifique visible par sa propre URL : spip.php?page=ispip (personnellement je passe par le htaccess pour renommer l’url en ispip.html par exemple). Le squelette est très léger et donc se charge rapidement. Il propose un accès par rubrique et, si vous avez installé le plugin Agenda, vous propose aussi un accès direct aux événements, ce qui peut s’avérer très pratique pour certains sites.
Mon premier sentiment positif passé, j’ai cherché comment proposer à partir d’un article (car souvent on va proposer un lien direct sur twitter par exemple) une possibilité d’affichage pour mobile. Ce n’est hélas pas possible sans une intervention dans le code. Le fichier qui affiche les article est nommé dans le dossier du plugin ispip : ispip-article.html. Si vous appelez l’article en faisant une URL comme spip.php?page=ispip-article&id-article=1 (« 1 » pour le numéro de l’article) vous obtiendrez l’affichage du contenu mais sans aucun css. En fait le plugin met en place un système de frames. Il faut donc, pour que cela fonctionne, rappeler les css dans le fichier ispip-article.html.

N’étant pas satisfait par ce principe, je décide donc de le détourner pour l’adapter à mes besoins (démarche certes discutable mais c’est aussi le jeu du web non ?). Je rajoute un fichier que j’appelle par exemple mobile.html dans le plugin ispip. Dans ce fichier je reprends des éléments du fichier ispip.html. En gros le head et la div « toolbar » qui génère l’entête de l’affichage mobile et ensuite, dans le body, j’insère le code de la page ispip-article.html en n’oubliant pas de mettre la boucle d’ouverture de l’article en haut de page et la boucle de fermeture en bas de page.
Pour ne pas avoir une URL du genre spip.php?page=mobile&id-article=… je place dans mon .htaccess la ligne : RewriteRule ^(mobile)(.html)?$ spip.php?page=$1 [QSA,L].
Il ne me reste plus qu’à créer un lien sur ma page classique de l’article qui pointe vers mobile.html?id_article=#ID_ARTICLE et le tour est joué. Je rajoute aussi en bas de page du squelette mobile.html un lien ramenant vers la page originale pour pouvoir simplement basculer de l’un à l’autre.
Maintenant j’ai cependant un souci : 2 URLs proposent le même contenu !

Pour baliser ce problème de duplicate content, je rajoute d’abord un rel= »nofollow » dans le lien vers la page mobile.html. On peut aussi rajouter dans le fichier robots.txt quelques lignes :

Disallow: /mobile.html

Il y a aussi la balise dans le head du fichier mobile.html pour indiquer l’URL du contenu original :

<link rel= »canonical » href= »#URL_SITE_SPIP/spip.php?article[(#ID_ARTICLE)] » />

Voilà une solution assez simple de contournement pour proposer à l’internaute le choix entre un affichage classique et un affichage mobile simplifié.

Vous pouvez aussi offrir le choix via un javascript pour que l’internaute choisissent via une question l’affichage désiré.
Pour l’iPhone il suffit de rajouter dans le head :

<script type= »text/javascript »>
function iPhoneAlert() {
if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.
match(/iPod/i))){
var question = confirm(« Souhaitez-vous naviguer sur le site optimis√© pour iPhone? »)
if (question){
window.location = « http://url.de.votre.site/mobile.html?id_article=#ID_ARTICLE« ;
}else{

}
}
}
</script>

et dans le body :

<body onLoad= »iPhoneAlert(); »>

pour qu’à chaque page la question soit posée.

Évidemment je ne rentre pas dans les détails et dans les possibilités d’aménager plus en profondeur ce plugin selon vos besoins, à vous de tenter, de chercher pour aller plus loin.

Exemple en ligne sur le site http://les-ombres.sprechgesang.net/ :

IMG_1975_1_IMG_1976_1_