J'ai eu le plaisir de pouvoir intégrer le nouveau graphisme du site de la société Optimum Sélection, société spécialisée dans la recherche, la sélection, le conseil et le placement en personnel qualifié. Les présentations sont faites.

L'occasion a été intéressante, l'idée était de créer une version classique (sur une base de 900 pixels de large), une version optimisée pour smartphones, et une version imprimable... mais avec un seul fichier CSS, histoire de compliquer légèrement les choses (et surtout d'optimiser les performances du site, autant diminuer le nombre de fichiers CSS si cela est possible).

Pour ce faire, les propriétés de la version classique ont été créées, et les propriétés des deux autres versions ont été ajoutées via @media print et via une mediaquery pour la version smartphone @media screen and (max-device-width: 640px).

Le tout n'est pas extrêmement difficile, si on prend de bons réflexes comme :

• Une structure particulièrement bien étudiée : trois présentations vont se baser sur cette structure...
• et deux de ces trois présentations vont se baser sur la première (seules les propriétés devant être changées selon le média sont adaptées... autrement dit, ne lésinez pas vraiment sur l'analyse de votre structure.
• Avoir une idée précise des éléments et de leur devenir selon le média est très utile, par exemple, le logo de la version print est réutilisé pour la version smartphone. Dans ce cas, ainsi, vous pouvez dire à votre graphiste d'adapter les dimensions en fonction de ces deux médias.
• Avoir un ordre de structure cohérent : si la tentation est facile de se laisser aller à une structure un peu arrangeante avec l'intégration de la version de 900px de large, je constate qu'au final, on retombe plus facilement sur ses pattes en ne faisant pas trop de concessions sur la structure. Autrement dit, comme on dit en anglais, be strict to be cool (soyez strict au début pour être plus tranquille ensuite).

Bref, ne partez surtout pas de l'idée que c'est trop compliqué ou pénible, c'est un exercice de style (si j'ose dire) plutôt amusant et ma foi, un petit challenge assez formateur.

Bien sûr, c'est d'autant plus aisé si vous êtes déjà au courant avant d'attaquer votre intégration... qu'une version smartphone va se baser dessus.

Curieusement, on pourrait penser que cela nécessite beaucoup de temps, il n'en est rien. En prime, cela améliore les performances de votre intégration... donc que demande le peuple ?