Déclinaison de mon squelette pour smartphone

Préambule : les CSS

En premier lieu, on doit choisir la largeur de notre page, le conteneur plus exactement. 960.gs donne sur son site un lien vers un générateur de grilles personnalisées :
http://grids.heroku.com/
Pour mon besoin, je clique sur « Check to edit the width » pour pouvoir renseigner la largeur de mon conteneur. La définition d’un iPhone est de 480px (l’iPhone 4S est de 960px, mais je préfère partir sur une largeur plus petite pour que mon contenu soit plus lisible sur un petit écran). Voici mes réglages sur le générateur de CSS :

Ayant l’habitude du système sur 12, 16 et 24 colonnes, je choisi ici 12 colonnes.

La gouttière est de 10 px. C’est la « meilleure » valeur pour que la largeur de mon conteneur colle au mieux à la largeur globale de 480px. La largeur d’une colonne (grid_1) est de 30 px. Parfait pour mes plus petites icônes (dans ma barre de navigation secondaire)

Je peux maintenant exporter le fichier CSS pour son exploitation. Je clique sur le premier « Download CSS File ». Je l’enregistre sous le doux nom de « 480.css » en relation à mon précédent 960.css à la racine de mon dossier squelettes dédié aux smartphones.

Le dossier squelettes dédié à ma version smartphone.

Je dois renseigner dans mon fichier mes_options.php un nouveau dossier pour mon squelette qui sera reconnu par l’appel var_skel=smartphone.

Pour plus de reconnaissance si je reprends ce dossier dans 2 ou 6 mois, je crée un dossier « smartphone » dans mon répertoire de squelettes en cours. Je saurais que ça en est la déclinaison et pas celle d’un autre.

Je rajoute une ligne dans mon fichier mes_options.php :

$GLOBALS['dossier_squelettes'] = 'squelettes/201201';

// 'nom' => 'chemin du squelette'
$squelettes = array(
  '201104'=>'squelettes/201104',
  '201201'=>'squelettes/201201',
  'smartphone'=>'squelettes/201201/smartphone',
);
// Si l'on demande un squelette particulier qui existe,  on pose un cookie, sinon suppression du cookie
if (isset($_GET['var_skel'])) {
  if (isset($squelettes[$_GET['var_skel']]))
    setcookie('spip_skel', $_COOKIE['spip_skel'] = $_GET['var_skel'], NULL, '/');
  else
    setcookie('spip_skel', $_COOKIE['spip_skel'] = '', -24*3600, '/');
}
// Si un squelette particulier est sauve, on le definit comme dossier squelettes
if (isset($_COOKIE['spip_skel']) AND isset($squelettes[$_COOKIE['spip_skel']]))
  $GLOBALS['dossier_squelettes'] = $squelettes[$_COOKIE['spip_skel']];

Dans le dossier squelettes/201201/smartphone/, je recopie tous les fichiers du répertoire squelettes/201201/ (sauf smartphone bien sûr).

Voilà, cela fait, reprenons maintenant les même étapes de mon précédent article.

Head.html

Je remplace dans le fichier inclure/head.html « 960.css » par « 480.css » :

<link rel='stylesheet' href='[(#CHEMIN{480.css}|direction_css)]' type='text/css' media='all' />

Je ne touche à rien d’autre.

Body.html

Ici, je remplace :
<div class=“container_16 clearfix”>
par :
<div class=“container_12 clearfix”>

<div class=“grid_4”>
par :
<div class=“grid_12”>

<div id='bouton' class='grid_8 prefix_4 omega'>
par :
<div id='bouton'>

<div class='container_16'>
par :
<div class='container_12'>

Et voilà. On y est pour ce fichier.

Explications toutefois

• container_12 : nous ne sommes plus sur un base de 16 divisions de grille mais de 12 ;
• grid_12 : mon entête sera sur toute la largeur de ma page et non sur ¼ de la page ;
• #bouton : ici aussi, je n’ai plus besoin de l’afficher sur une partie de ma page mais sur toute sa largeur ;

Les fichiers inclure

Je dois vérifier que chaque fichier inclure corresponde à ma nouvelle grille.
Un exemple : inclure/navigation-secondaire.html
Je ne change que 2 lignes dans ce fichier :

<div class='grid_1 alpha'>
par :
<div class='grid_1 prefix_1 alpha'>

et <div class='grid_4 omega'>
par :
<div class='grid_6 suffix_1 omega'>

Cela me permet de centrer cette barre de navigation dans ma page.
On applique le même principe aux autres fichiers inclure « statiques ».

Le contenu

Je modifie maintenant ma page vitrine : contenu/page-sommaire.html
On remplace :

<BOUCLE_articles(ARTICLES){id_secteur=1} {!par date} {pagination 9}>[(#SET{position,[(#COMPTEUR_BOUCLE|alterner{' alpha','',' omega'})]})]
#INCLURE{fond=inclure/article-resume-rubrique, id_article, position=#GET{position}, grille=grid_4}

par :

<BOUCLE_articles(ARTICLES){id_secteur=1} {!par date} {pagination 6}>[(#SET{position,[(#COMPTEUR_BOUCLE|alterner{' alpha',' omega'})]})]
#INCLURE{fond=inclure/article-resume-rubrique, id_article, position=#GET{position}, grille='grid_6', imglargeur=230, imghauteur=230}

Souvenez-vous : mon fichier article-resume-rubrique.html était customisable par les paramètres qu’on peut lui passer. Ici, je lui renseigne la nouvelle largeur de mes vignettes et leur hauteur : 230px.
Ma mise en page est sur 2 colonnes, soit la classe CSS grid_6 (d’une largeur d 230px).

Déclinaisons

Modifions le fichier contenu/rubrique-services.html
Même procédé.

Premier appel de la boucle article, je remplace :

<BOUCLE_articlesinternet(ARTICLES){id_rubrique} {!par date}>[(#SET{position,[(#COMPTEUR_BOUCLE|alterner{' alpha',' omega'})]})]
#INCLURE{fond=inclure/article-resume-rubrique, id_article, position=#GET{position}, grille=grid_6, imglargeur=340, imghauteur=220}

par :

<BOUCLE_articlesinternet(ARTICLES){id_rubrique} {!par date}>
#INCLURE{fond=inclure/article-resume-rubrique, id_article, position='alpha omega', grille=grid_12, imglargeur=470, imghauteur=220}

On est maintenant sur une largeur totale de la page, soit grid_12. On lui passe un alpha et un omega aussi. On pourrait se passer de renseigner cette class car nous sommes déjà dans un grid_12. Mais l’avantage est de courtcircuiter les éventuels css des li du fichier habillage.css

Pour le deuxième appel d’articles de sous-rubrique, je remplace :

<BOUCLE_articlesdesign(ARTICLES){id_rubrique} {!par date}>[(#SET{position,[(#COMPTEUR_BOUCLE|alterner{' alpha','',' omega'})]})]
#INCLURE{fond=inclure/article-resume-rubrique,id_article,position=#GET{position},grille=grid_4}

par :

<BOUCLE_articlesdesign(ARTICLES){id_rubrique} {!par date}>
#INCLURE{fond=inclure/article-resume-rubrique,id_article, position='alpha omega', grille=grid_12, imglargeur=470, imghauteur=220}

Et enfin le troisième et dernier appel d’articles (de la rubrique courante) :
#INCLURE{fond=inclure/article-resume-rubrique, id_article, position='alpha omega', grille='grid_10 prefix_1 suffix_1', imglargeur=580}
par :
#INCLURE{fond=inclure/article-resume-rubrique, id_article, grille='grid_10 prefix_1 suffix_1 alpha omega', imglargeur=390}

Voilà ! La version smartphone est prête à l’emploi.

Pré-conclusion

Il vous suffit de mettre un lien dans votre version standard pour que les utilisateurs de smartphone puisse choisir cette version. Mais surtout, surtout ! N’oubliez pas de faire un lien sur la version smartphone pour revenir à la version standard. C’est l’utilisateur qui doit avoir le choix de choisir sa version et pas à nous de forcer la main.

Un ami m’a parlé d’un script qui détecte si vous êtes sur smartphone ou pas (navigator.userAgent). Oui… Mais il y a un bémol à cette méthode…
On arrive sur la page classique du site, on a le message d’alerte, on se dit « pourquoi pas, sympa d’y avoir pensé ». Cool, tout va bien. Je vois la version optimisée.
Mais lorsque je désire revenir sur la version standard, j’ai une nouvelle fois le message d’alerte alors que j’ai déjà répondu. Je ne trouve pas ça agréable…

Conclusion, la vraie

Il est donc très facilement de faire une déclinaison de son squelette pour les smartphones lorsqu’on utilise des « grilles » (aussi bien Z-dist que 960.gs).

Il faut peaufiner un peu les css mais beaucoup moins que si on partait de zéro.
J’ai mis 1 heure pour réaliser la déclinaison.

À votre tour de tester cette méthode. Je voudrais savoir si elle vous convient, quelles ont été les difficultés que vous avez rencontré et leur solution.