Optimisation web pour impression et mobile

Voici un petit guide pour vous aider à optimiser votre site web pour l'impression et pour les petits écrans et téléphones mobiles. D'abord vous devez vous créer 2 feuilles de styles, une pour l'impression et une pour les petits écrans (Ipod, PDA...) et les téléphones mobiles.

Les Mobiles

Copier cette ligne de code dans le HEADER de votre page (ne copier pas les symboles /* qui servent simplement à éviter que ces styles soient appliqués sur mon site ;) et remplacer les "(ouverture tag)" et "(fermeture tag)" par les symboles "<" pour l'ouverture et "/>" pour la fermeture )
/*
(ouverture tag) link rel="stylesheet" href="http://nomdusite/mobile.css" type="text/css" media="handheld" (fermeture tag)
/*
Dans la feuille de style "mobile.css", copiez ces lignes de code. (Vous pouvez changer les couleurs et les styles selon vos goûts.)
/*
html, body { font: 12px/15px sans-serif; padding: 3px; color: #000; margin: 0; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } #content img { max-width: 250px; } .center { width: 100% !important; text-align: center; } a:link, a:visited { text-decoration: underline; color: #0000CC; } a:hover, a:active { text-decoration: underline; color: #660066; }
*/
Et surtout, n'oubliez pas de copier cette ligne de code, car c'est les "float" qui causent le plus de problème d'affichage sur les petits écrans.
/*
* { float: none; }
*/


Si certaine partie du site cause problème lors de l'affichage sur petit écran, vous pouvez les mettre en mode invisible en ajoutant cette ligne de code.

/*
#nom-du-div-problématique { display: none; }
*/


Vous pouvez également copier cette ligne de code pour optimiser le site pour le iPod.
/*
(ouverture tag)link rel="stylesheet" href="media/c/mobile.css" type="text/css" media="only screen and (max-device-width: 480px)" (fermeture tag) */


Et ceci dans la feuille de style du iPod :
/*
html { -webkit-text-size-adjust: none; }
*/


Voilà, vous avez votre feuille de style optimisée pour les mobiles et petits écrans.



L'impression

Vous faites grosso-modo la même démarche pour la feuille de style optimisée pour l'impression.
/*
(ouverture tag)link rel="stylesheet" href="http://nomdusite/print.css" type="text/css" media="print" (fermeture tag)
/*
Et dans la feuille de style print.css, vous copiez ces lignes de code.
/*
body{background:white;color:black;font-size:10pt} .header{display:none;} .content{width:100% !important;max-width:none !important;min-width:0 !important;} #footer {display:none;}
/*
Maintenant vous n'avez plus aucune raison de ne pas optimiser votre site en fonction du médium sur lequel il sera consulté.

Les bonnes pratiques

Habituellement il est de mise de ne pas mettre d'image dans un site optimisé pour téléphone mobile, surtout si ces images sont lourdes et n'ont pas été réduites pour l'affichage sur petit écran. Pour faire en sorte que l'image soit remplacée par sa description copiez cette ligne de code :
/*
img { visibility: hidden; } img[alt] { visibility: visible; }
/*
Personnellement je n'utilise pas cette optimisation car je crois que sa pertinence dépend de la nature du site. Il va s'en dire qu'une personne qui navigue avec son téléphone mobile doit s'attendre à devoir télécharger des images s'il va sur des sites de photographe, de graphiste, d'e-commerce... C'est pourquoi mes sites ne cachent pas les images en version iPod, et que c'est à votre discrétion d'utiliser ou non ce procédé d'optimisation des images. De toute manière, les réseaux WIFI sont de plus en plus accessibles ce qui éliminera graduellement le problème de frais élevés qui sont reliés au téléchargement sur les réseaux téléphoniques. Sans compter que de naviguer sur le web c'est plus facile avec un PDA qu'avec un téléphone. Alors à mon avis il est bon d'optimiser son site pour les PDA (iPod, BlackBerry...) mais ce n'est pas indispensable de le faire pour les téléphones mobiles qui ont des capacités d'affichages très limités et seront bientôt considérés comme désuets.

De plus, les gens qui naviguent avec leurs téléphones mobiles devraient connaître les avantages de s'inscrire au fils RSS d'un site ! C'est ainsi qu'ils évitent de télécharger tout le contenu du site et consultent uniquement les pages qui les intéresses.

Fil de presse - "Newsletter"

En vous inscrivant au(x) fil(s) de presse de LaGraphiste vous recevrez une "newsletter" dès qu'une nouvelle page sera en ligne.

Fil courriel de LaGraphiste.commercial

Fil courriel de LaGraphiste.netiquette







Vous avez article(s) dans votre panier




Annie - LaGraphiste

Directrice artistique et graphiste depuis 1997, entrepreneure à plein temps depuis 2001, LaGraphiste enr. Annie Mc Clure se définit comme une artiste multidisciplinaire. Amoureuse du design publicitaire et de la programmation de site web, elle fera tout en son pouvoir pour vous assurer un service haut de gamme à des prix compétitifs. 

QR Contact 




Courriel
La publicité c'est dans notre nature. conception design, multimédia, production et buzz marketing