Archives mensuelles :

février 2011
HTML & CSS

CSS3 pour les web designers : voyez grand, codez petit !

Dans la nouvelle collection A Book Apart lancée par les éditions Eyrolles, je demande CSS3 pour les web designers. Cet ouvrage — écrit par Dan Cederholm et préfacé par Jeffrey Zeldman — paru aux éditions Eyrolles fait partie « des livres de ceux qui font le web ».  La concision et la précision qui font partie des préoccupations quotidiennes des professionnels du web est la marque de fabrique de cette collection de petits livres. →

Applications autonomes

Minify — Accélérez l’affichage des pages en réduisant le nombre de requêtes HTTP

Minify est un script PHP5 dont l’objectif est d’aider les webmasters à atteindre un des objectifs les plus importants des règles de hautes performances pour les sites web proposées par Yahoo! : diminuer le nombre de requêtes HTTP. Pour y parvenir, Minify combine (concatène) les fichiers CSS ou Javascript. En prime, il supprime les commentaires et les espaces en trop. Minify se charge même de l’encodage gzip tout en envoyant les bons en-têtes (headers) au navigateur. →

HTML & CSS

Journal — « Typographie, HTML5 Boilerplate, Reset CSS, Clearfix, CSS3, Photoshop »

Au menu de ce petit journal, je vous propose un pot-pourri de ce qui a retenu mon attention ces 30 derniers jours. La typographie sur le web avec Font-face et les différents formats de polices de caractère. Apprendre les bonnes pratiques en matière d’intégration HTML & CSS avec HTML5 Boilerplate. Choisir de mettre un reset CSS dans votre moteur ou une simple (mais complète) feuille de style de base. Approfondir CSS3 avec un tutoriel concret et utiliser les pseudo-classes `:before` et `:after` pour créer des ombres portées du plus bel effet. Mettre en place une feuille de style pour les périphériques mobiles et autres smartphones (iPad, iPhone ou Android). Avoir une liste d’outils pour vous aider à développer avec Internet Explorer (et IE6 en particulier). Et pour finir, reprendre les bases de Photoshop avec un tutoriel en 5 parties distinctes mais complémentaires. →

Ergonomie & Accessibilité

Une solution CSS accessible pour remplacer du texte HTML par une image

Dans l’article remplacer du texte HTML par une image avec CSS, j’ai listé un certains nombre de techniques efficaces permettant d’avoir un titre de niveau `h1` (par exemple) qui disparait de l’affichage au profit d’un visuel plus «sexy». Le but étant d’améliorer l’apparence du site et le référencement dans les moteurs de recherche. Toutefois, les solutions présentées n’offrent pas toujours une expérience utilisateur satisfaisante pour tous. Les utilisateurs de lecteurs d’écran comme Jaws ou NVDA risquent de ne pas y trouver leur compte. Certaines solutions sont «accessibles» uniquement lorsque les CSS sont désactivées et il faudra penser aux cas où les images sont absentes. →

HTML & CSS

8 techniques CSS pour remplacer du texte HTML par une image

Il est courant d’afficher le logo d’un site web sous la forme d’une image au lieu de mettre le nom du site au format texte HTML. Les préoccupations grandissantes des webmasters concernant l’optimisation SEO ont popularisées les titres HTML composés de mots-clés optimisés puis masqués au profit d’un logo sous forme d’image. Pour y parvenir, les intégrateurs HTML & CSS ont plusieurs cordes à leur arc. Malheureusement certaines solutions présentent des défauts, notamment en ce qui concerne l’accessibilité des contenus cachés, qui peuvent rester inaccessibles pour certains (agents) utilisateurs. Sans parler du risque (faible dans ce cas) de passer aux yeux de Google pour un vilain petit cachottier. Voici donc un florilège de techniques CSS pour cacher ce texte que l’on ne saurait voir, mais qui a son importance. →

Frameworks Javascript

Treesaver — Framework Javascript pour créer des maquettes de type magazine

Treesaver est un framework Javascript conçu pour faciliter la création de maquettes de sites web de type magazine qui s’adaptent automatiquement à une large variété de périphérique de sortie, le tout à l’aide des langages standards du web : HTML et CSS. Aucune connaissance en programmation Javascript n’est nécessaire. L’ensemble ne pèse que 25 ko gzippé pour un affichage assez rapide sur les périphériques mobiles. →

HTML & CSS

IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples

Parmi les nombreux bugs qui affectent Internet Explorer 6, le bug des classes multiples apparait lorsqu’on utilise au moins deux classes CSS simultanément. Par exemple `.classe1.classe2` pour adresser des propriétés CSS aux éléments possédant à la fois `.classe1` et `.classe2`, ce qui est très pratique. Malheureusement, IE6 ne tient compte que de la dernière classe, soit `.classe2`, en l’occurrence. Une pratique répandue consiste simplement à se passer des classes multiples, ce que je fais depuis des années. →

Tutoriel

Coda Slider Effect — Navigation par onglets accessible avec effet de Slide

Coda Slider Effect est un des nombreux excellents tutoriels proposés par Remy Sharp sur jQuery for Designers. Au menu de Coda Slider Effect : un système de navigation par onglets accessible avec effet de Slide du plus bel effet composé de plusieurs plugins tels que scrollTo, localScroll et serialScroll. Dégradation grâcieuse en l’absence de Javascript, effet de slide respectueux de votre CPU et maintient de la navigation courante via les «hash».