Avant que je sache que ce que je faisais était du responsive webdesign ou dans ce cas une adaptation smartphone (je voulais surtout tester les media-queries moi !), j'ai fait plusieurs petits sites ou j'ai pu m'exercer à ce type d'intégration un peu nouveau.

En voici un exemple relativement facile qui montre quelques grands principes : le site ProPulsion. C'est un exemple assez simple, car il a peu de contenu, une navigation simple (un seul niveau), néanmoins, il y a quelques pièges dans lesquels il ne faut pas tomber.

Le graphisme desktop ayant une disposition un peu « originale », il ne doit pas écarter un grand principe : c'est la structure HTML5 et l'ordre logique de lecture hors mise en page qui dicte l'intégration CSS, et certainement pas le contraire ! D'ailleurs, vous verrez que cette rigueur va rendre les versions smartphone et print bien plus faciles à produire par la suite.

Donc avant de se lancer dans du grand n'importe quoi, revenons aux bases, la page d'accueil étant un petit peu plus compliquée, étudions la page méthode de l'agence ProPulsion qui est très simple, en voici le code :

<div id="menuaccess">
 …
</div>

<div id="page">
 <div id="header">

  <h1 id="logo">
   <a href="./" accesskey="1">
   <img src="../layout/images/logo-page.gif" alt="" 
           width="266" height="34" />
   <span>ProPulsion - Agence Conseil en Communication</span>
   </a>
  </h1>

  <div id="navigation">
  <ul>
   …
  </ul>
  </div>

 </div>

 <div id="main">
  <div id="content">

   <h2>Le bon sens, c’est aussi une méthode de travail.</h2>

   <p>…</p>

  </div>
 </div>

</div>

<div id="footer">
 …
</div>

J'ai supprimé les contenus et les parties non intéressantes. On a donc une structure assez simple dans un ordre logique, le menu d'évitement, le titre avec le logo, la navigation, ensuite le contenu et le pied de page. Et ce même si la disposition du site n'est à priori pas dans cet ordre visuel sur un navigateur de type desktop.

Une fois ce code posé, appliquons les styles pour la version desktop : la navigation et le logo vont être sortis du flux pour être positionnés en bas en absolute, quelques propriétés pour les largeurs pour le contenu, et nous y sommes.

Note : j'aurais pu partir de la version mobile en premier, mais l'approche mobile first a certains inconvénients, entre autre de priver les anciens IE des propriétés CSS contenues dans les media-queries. IE étant plus important que les navigateurs mobiles dans ce projet, la version desktop et ses performances seront prioritaires.

La version smartphone va être directement déduite de la version desktop, on garde tout et on adapte seulement les propriétés nécessaires dans @media screen and (max-width: 800px){}

L'idée se résume à rétablir le flux normal, la navigation et le logo vont se voir attribuer un position:static, la page et le contenu voient leurs propriétés en quelque sorte remises à 0 via :

 width:auto;
 height:auto;  
 margin:0;
 padding:0; 
 background-color:#fff; 
 color:#000; 
 background-image:none;

Ainsi, ces derniers vont profiter de tout l'espace qu'ils auront à disposition, que le navigateur soit en portrait ou en paysage.

Petite particularité : dans un souci d'économie de requêtes HTTP, j'utilise le logo pour la version print et également pour la version smartphone, ça évite d'utiliser trop d'images.

La version print est très semblable, je rétablis le flux normal, je cache les éléments inutiles comme la navigation ou le menu d'évitement, quelques adaptations, et le tour est joué !

Comme vous pouvez le voir, produire une version mobile à été simple, surtout parce que le code de base était de bonne qualité ! En résulte une CSS très légère : 7 ko non compressée, et encore j'aurais pu la minifier pour gagner un peu plus. En version compressée, la CSS pèse 2 ko, ce qui est vraiment léger !

Même si l'approche n'est pas totalement de type mobile first, il est aisé de constater que le fait d'appliquer quelques grands principes des standards du web, notamment celui d'un contenu correctement linéarisé hors CSS a grandement facilité la tâche.

C'est la preuve – s'il y en avait besoin – qu'un principe de bonne conception correctement appliqué apporte des bénéfices ailleurs que dans son domaine propre. Là dans cet exemple, les bénéfices sont en l'occurrence pour l'accessibilité :

• la navigation au clavier est facilitée,
• l'ordre logique du contenu hors CSS facilite également la lecture par certaines synthèses vocales,
• le document garde un sens logique, ce qui amène d'autres avantages,
• etc.

mais également les bénéfices abordent d'autres terrains, comme la production d'une version smartphone et print dans le même fichier, ce qui sera appréciable pour les performances web.

Ajoutez à cela que des conseils basiques de performance web comme avoir des sélecteurs efficaces vont également vous faciliter la production d'une version print et smartphone, car vous pourrez réutiliser ces sélecteurs simples dans la media-query pour modifier les propriétés CSS.

Bref, je pourrais encore ajouter d'autres avantages, mais vous avez dû comprendre l'idée : tout est interconnecté dans la qualité web, les bénéfices d'un domaine dépassent très souvent ce domaine.