Lunaweb, une réflexion sur la création web et le marketing Internet

Archive pour le mot-clef ‘CSS’

Premailer, transformer vos CSS pour l’email HTML

Par le
No Gravatar

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.

Maîtriser la taille progressive des polices en CSS

Par le
No Gravatar

Maîtriser la taille progressive des polices en CSSC’est du classique mais cela ne fait pas de mal à relire de temps en temps, l’excellent article « Définir des tailles de police dynamiques cohérentes avec CSS » de Pompage.net revient sur l’utilisation judicieuse du em en guise d’unité de mesure dans ses pages HTML, en donnant quelques astuces afin d’avoir une présentation homogène dans tous les navigateurs.

» Lire l’article « Définir des tailles de police dynamiques cohérentes avec CSS« .

Faire un style switcher CSS et PHP

Par le
No Gravatar

Style Switcher simple en PHP et CSSAlsacréations publie un tutoriel très rapide et très clair sur la façon de construire un « chargeur de style » (style switcher) par l’usage des langages CSS et PHP.

Simple et rapide, cette méthode éprouvée doit être aujourd’hui utilisée sur des millions de sites dans le monde, alors si vous cherchez un bon style switcher, en voici un !

» Lire l’article « Faire un Style switcher (changement d’habillage) en PHP« .

Design web : utiliser les standards

Par le
No Gravatar

utiliser les standards, par Jeffrey ZeldmanDesign web : utiliser les standards est LE bouquin fondamental du design ergonomique et respectueux des standards. Cette seconde mouture de la bible du webmaster, dont la première a été pour moi le déclencheur d’une réflexion aboutissant à la réalisation de sites 100% accessibles et réalisés sur le mode xHTML/CSS, contient de nouveaux articles, des exemples actualisés et des points de vues étoffés.

» Découvrir le livre Design web : utiliser les standards

Conception de sites web avec les CSS

Par le
No Gravatar

Livre Conception de sites web avec les CSS, d’Eric MeyerConception de sites web avec les CSS est un livre simple, complet et très pédagogique. Ecrit par le pape du CSS, Eric Meyer, cet ouvrage propose des exercices pratiques, agrémentés d’astuces et d’illustrations en couleur sur les dernières techniques de conception des sites Web en CSS (Cascading Style Sheets ou feuilles de style en cascade).

» En savoir plus sur le livre Conception de sites web avec les CSS

Structurer le design Web selon le principe de la grille

Par le
No Gravatar

Excellent article paru (encore eux!) sur Alistapart, cette fois-ci écrit par Wilson Miner, et traitant de l’usage strict des repères d’une grille à l’heure de composer et de coder une page Web.
Au delà de la simple grille de lecture d’une page Web, il s’agit d’appliquer des principes simple de composition, mais aussi de programmation xHTML/CSS d’une page. L’auteur s’intéresse notamment à la maîtrise des alignements et espacements verticaux des éléments typographiques d’une page Web. Voici un aperçu des principaux enseignements de cet article.

Lire le reste de cet article »

24 façons d’impressionner vos copains

Par le
No Gravatar

24 ways to impress your friendsL’expérience 24 ways continue avec 24 nouveaux hacks et astuces CSS/javascript qui épateront vos copains.
Parmi les articles que détient la 3ème mouture de l’expérience 24 ways, je retiens notamment :

Firefox : Le bug de positionnement en pourcentage d’une image en background CSS

Par le
No Gravatar

Le bug de positionnement en pourcentage d'une image en background CSSUne petite particularité de Firefox que j’ai découverte par hasard en codant un site, il s’agit du positionnement d’une image en background CSS. En effet, j’avais préalablement placé mon image en haut à gauche d’un conteneur, puis j’ai eu besoin de la déplacer horizontalement au milieu, mais rien à toucher à l’axe vertical.

Lire le reste de cet article »

Lunablog célèbre le CSS Naked Day

Par le
No Gravatar

5 avril 2007, troisème édition du CSS Naked Day !

Afin de mettre en avant la puissance et la flexibilité du design web utilisant les feuilles de style en cascade CSS (cascading style sheet), des centaines de sites dans le monde célèbre le 5 avril comme jour de l’affirmation du design aux normes.

Lire le reste de cet article »

Insérer du Flash visible et accessible de tous

Par le
No Gravatar

Insérer du Flash valideBobby van der Sluis publie dans son article Unobtrusive Flash Objects une méthode passionante et très efficace permettant d’insérer dans les pages Web de son site des éléments Flash (.swf) tout en respectant les principes d’accessibilité et en s’assurant de l’accès universal à ce type d’applications.
Basée sur un fichier javascript externe une méthode de replacement, UFO est un script DOM qui détecte le plug-in Flash du visiteur et insère dynamiquement les objets Flash (fichiers d’extension .swf). Il passe tous les obstacles de détection Active-X (de nos amis les navigateurs Internet Explorer PC) et utilise les feuilles de style dynamiques permettant de styler temporairement l’espace alloué à l’animation pendant que celle-ci se charge. Bien d’autres raisons encore (13 en tout) incitent à utiliser cette technique éprouvée et primée par de grands noms, voici donc une bonne raison de suivre cet article en VO.
> Lire l’article Unobtrusive Flash Objects.

↑ Haut de page