Coder le Web pour les mobiles

design-pour-mobiles.jpgDans son article Coding for the mobile web, Chris Mills dresse un panorama des différentes techniques utilisées pour servir un contenu adapté aux terminaux mobiles (téléphones, PDA, UMPC, etc.). :

  • la simple application des standards du Web
  • la création d’un site spécial mobiles en doublon au site “normal”
  • créer un seul site, mais ajouter du code pour optimiser le rendu de celui-ci en fonction du terminal d’affichage (utilisation des CSS filtrés par l’attribut media).

Il liste également les contraintes à respecter afin de pemrettre un affichage idéal :

  • fonctions de contrôles restreints
  • taille d’écran limitée
  • faibles bande passante et mémoire
  • petite palette de polices disponibles
  • palette de couleurs réduite

» Lire l’article Coding for the mobile web

Tags : , ,

Créer un graphique en barres avec CSS et PHP

Créer un graphique en barres avec CSS et PHPVous souhaitez publier régulièrement des données graphiques ? Vous avez besoin de communiquer sur votre site des chiffres fréquemment actualisés à l’aide d’un diagramme en barres ?

Rien de plus simple grâce à l’usage conjoint de CSS et PHP !
Lire la suite de cet article »

Tags : , , , ,

Internet Explorer 8 utilisera une balise META pour respecter les standards

internet explorerInternet Explorer, connu des webmaster pour sa fâcheuse habitude à ne pas respecter les standards du Web, va utiliser une balise META (inscrite dans l’entête des pages Web) pour se référencer aux normes du W3C.

Cette caractéristique permettra, selon Microsoft qui s’en explique sur son blog MSDN, de conserver les artifices utilisés par les webmaster pour rendre leurs sites correctement interprétables par les versions antérieures de leurs navigateur (Internet Explorer dans sa livrée 7, 6, 5…) lorsque l’on tentait de coder un site correctement par l’usage de xHTML strict et de CSS 2.1 ; et donc de ne pas “casser” le rendu des anciens sites (ceux faits pour IE 6 et 7 notamment, avec des patchs spéciaux pour corriger le mauvais rendu du CSS) dans le nouveau navigateur.

C’est ma foi une relative bonne nouvelle dans la mesure où IE8, qui passe le test ACID2 (le test Acid2 vise à tester la qualité de la mise en œuvre d’un choix de fonctionnalités liées à différents standards du web dans un navigateur, dixit Wikipedia), se plie enfin aux bonnes règles du W3C et pourra afficher un rendu correct de sites conçus selon des règles communes à tous les navigateurs.

Petit accroc dans le tableau, la balise lui permettant de suivre ces principes est la suivante :

META HTTP-EQUIV="X-BALL-CHAIN"

Comme un fait exprès, cette balise est spécifique à IE8, et donc non standard au sens strict du terme, c’est à dire qu’elle fera échouer la certification aux tests de validité du W3C…

Il est dommage de constater (mais que peut-on espérer de plus avec Microsoft) l’usage d’une balise propriétaire pour valider le fait d’utiliser les standards, c’est véritablement prendre le problème à l’envers que de forcer à utiliser un élément étranger aux normes pour valider au navigateur l’usage de celles-ci.

Enfin, si déjà IE8 suit à la lettre le reste des instructions xHTML et CSS, ce sera beaucoup de temps de développement de gagné, en attendant que tout le monde switche à Firefox Internet Explorer 8.

[Mise à jour] C’est pas moi qui le dit, c’est Jeremy Keith dans le A List Apart du 15/02/08 :

Version targeting will allow Microsoft to reach new heights of standards compliance where CSS and (especially) scripting are concerned. But to benefit from it, developers must explicitly opt in. That’s just not right, says Jeremy Keith. And it’s doomed to fail, because standardistas, by their very nature, will refuse to opt in.

Et, toujours dans ALA, par Jeffrey Zeldman lui-même :

Version targeting shakes our browser-agnostic faith. Its default behavior runs counter to our expectations, and seems wrong. Yet to offer true DOM support without bringing JScript-authored sites to their knees, version targeting must work the way Microsoft proposes.

» Lire l’article They Shoot Browsers, Don’t They? etVersion Targeting: Threat or Menace?

Tags : , , , ,

Personnaliser la présentation de vos encarts Google Adsenses

Google AdsenseLes Google Adsenses sont partout, mais combien de sites les intègrent harmonieusement à la charte globale de l’environnement du site ?

Il est souvent déplorable de voir ces encarts promotionnels défigurer un design très sobre ou très étudié, et qui vient immanquablement dénaturer l’ensemble et déséquilibrer la perception de l’internaute. De plus, puisque le but des Google Adsenses est de s’intégrer au mieux du site afin de jouer sur la contextualité des informations affichées avec celles de la page en cours, pourquoi ne pas s’attacher à personnalisation la présentation de ces encarts publicitaires textuels ?

L’article Style your AdSense links vous explique comment procéder afin de réussir une intégration idéale. Il revient sur les 3 types d’Adsense que sont :

  • les Adenses de contenu,
  • les Adsenses de recherche,
  • les Adsenses de référents.

Via quelques astuces CSS, l’auteur nous explique les tours de mains à appliquer (notamment en CSS) afin de personnaliser complètement ses annonces textuelles.

» Lire l’article Style your AdSense links

Tags : , ,

Premailer, transformer vos CSS pour l’email HTML

Support du CSS dans les emailsUn des gros soucis de rendu d’un email HTML envoyé à différents services de webmail (Hotmail, Gmail, Yahoo Mail, etc.) ou vers des softs de messagerie électronique (Apple Mail, Outlook, Eudora, etc.) consiste en le support partiel, voire l’absence totalement de support, du CSS, qu’il soit décrit dans une feuille de style externe ou bien intégré directement dans la balise HEAD du document. Le guide to CSS support in Email, de Campaign Monitor (déjà mentionné ici), retrace toutes les balises acceptées ou refusées par tous les grands services ou logiciels d’emails.

Pour pallier à ce problème, la seule solution consiste à mettre tous les attributs de mise en forme directement dans la balise concernée (méthode du CSS inline) . Par exemple, un paragraphe à styler en gras et en vert, au lieu d’être habituellement parée d’un attribut class suffisant :

(p class=grasvert)Le phrasé de ma grand mère est une tuerie.(/p)

Devient ceci :

(p style=color:green;font-weight:bold)Le phrasé de ma grand mère est une tuerie.(/p)

Je vous laisse imaginer le côté “pratique” d’un emailing complet à styler tout à la main, et surtout à maintenir (surtout quand le client demande d’inverser les couleurs au denrier moment). Du pur bonheur, et un retour aux années Dreamweaver…

Jusque là, nous en étions arrivés au point de créer un script PHP qui moulinait la page HTML avec son CSS “classique” en feuille externe, mais pour cela fallait-il encore avoir la connaissance et l’infrastructure pour le faire.
Et voici que sort premailer, qui vous le fait en deux temps et en mode Web. Pratique !

> Visiter le site de Premailer

Tags : ,