Des sites web responsives avant l’heure

Suite a une discussion dans un forum, je me suis rendu compte que je faisais du Responsive depuis toujours; bien avant les smartphones et pour tous mes sites web sans exception.

Et oui j’ai toujours inséré dans l’entête html une ligne du type :

<style type="text/css" media="print"> @import url("/style/print.css");</style>
ou
<link rel="stylesheet" href="/style/print.css" media="print" type="text/css" >

Et oui, mes sites web étaient optimisés pour un écran mais aussi pour l’impression.

Je vais me dépêcher de vous donner la recette pour un site optimisé pour l’impression, car dans quelques années, sans arbre, il sera difficile de se servir de nos imprimantes papier; les imprimantes 3D ? elles n’utilisent pas des cartouches « de produits à base de pétrole » ? plus de pétrole dans 50ans :)

Première chose, nous devons créer des classes .print{} et .noprint{}, ces 2 class seront définies 2 fois, dans la feuille de style normale (écran) et dans la feuille de style print (imprimante).

.print { display:block; }
.noprint { display:none; }

La version écran est bien sur l’exacte inverse :)

on peut penser a économiser de l’encre :

* { background-image:none; background-color:#fff; }

Pour l’entête, tout dépend du site

#entete { display:none }
#logo.print { position:absolute; top:0; left:0;  }

Généralement, il faut un autre logo (bien découpé, bonne taille) pour la version imprimante. Donc pensez à cacher la version écran et créer une version print.

Pour le pied de page, il est bon d’en avoir un spécifique pour l’impression avec les coordonnées géographiques, tel et email. Par exemple :

<ul id="ppied" class="print">
 <li>tel : 06.44.77.99.44</li>
 <li>Paris 75000</li>
</ul>
Ensuite, il y a pas mal de choses a cacher a l’impression :
les menus, sous-menus, boutons … (bandeaux de pub) …

Une fois tous ça caché, oops, le site est cassé ! il faut repositionner,recadré les blocks principaux.

#main { width:100%;margin:auto; }
#page { margin:0; width:100%; height:auto; }
Abusez de la commande « imprimer-prévisualiser » de votre navigateur !

Il y a sans doute quelques couleurs a changer.

Et voila :)
On a pris 30 minutes de notre temps, mais le visiteur nous remercie ! il a économisé du papier (peut-être) et de l’encre(sûr) et surtout, il garde (sur papier) une bonne impression^^ de votre site :)
Share Button

Vous devriez aimer...