Typographie

Manifeste pour un interlignage minimum syndical pour les blogs !

Un spectre hante le web : le spectre de l’interlignage par défaut des navigateurs. Trop de blogs et de sites web se contentent du minimum syndical pour gérer l’interlignage. Par défaut, les navigateurs web proposent 120% de la taille de la police. Ce qui est dramatiquement insuffisant au regard de la faible résolution du texte à l’écran, alors qu’il suffit d’ajouter une ligne de déclaration CSS à la balise `html` ou `body` pour permettre à vos lecteurs de passer du déchiffrage laborieux à la lecture pleine et entière. Essayez, vous serez surpris de voir à quel point vos pages web auront gagné en lisibilité. →

Intégration web

Zapper la maquette Photoshop et passer directement à l’intégration HTML/CSS ?

Depuis longtemps, je me dis qu’un jour je saurai faire la maquette complète d’un design web dans Photoshop. Pourtant, je lance Illustrator à chaque fois, et dès les principes graphiques en place, je lance mon éditeur web préféré (en ce moment, c’est Aptana Studio) pour commencer l’intégration tout de go ! Dans mon for intérieur, j’ai toujours trouvé que peaufiner une maquette dans les moindres détails dans Photoshop était souvent plus chronophage qu’efficace. On se focalise sur les détails graphiques (le bidule, un peu plus à droite, c’est possible ?) au lieu de privilégier la bonne distribution des informations dans l’espace. →

Ergonomie & Accessibilité

Conception d’un thème magazine de A à Z — A comme « Allons-y ! »

theme-a.pngLe thème magazine se porte bien cette année et la tendance est à la hausse. Dans cette catégorie, quelques thèmes sont sortis du lot : Mimbo, traduit en français et modifié par niss et décrit par fran6. (Mimbo Pro est disponible à partir de 90$ — captures d’écran disponibles chez stagueve) et Révolution (à partir de 79$) qui a ouvert la voie aux thèmes magazine payants. Après eux, une foultitude de thèmes du même genre ont vu le jour. Les raisons du succès de ces habillages graphiques pour les blogs sont multiples : →

Conception de site web

Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web

petit-nautile.pngDans la série des thèmes WordPress minimalistes voilà The Ideal Website 1.1 proposé par Information Architect (iA). L’équilibre graphique de ce thème provient essentiellement de l’application de la suite de Fibonacci — qui fournit des rapports très proches du nombre d’or — aux différentes proportions des éléments du design. Le résultat est ce que j’ai vu de mieux en matière de mise en page pour un blog. C’est la démontration réussie que l’on peut appliquer les règles de mise en page du monde de l’imprimé à l’écran, sans rien sacrifier. Je l’avais presque oublié. →

Design & Graphisme

Background CSS : des fonds hachurés avec la « positive attitude »

Motif zébré répétitifLes fonds de page web hachurés sont particulièrement appréciés des webdesigners pour une raison double : les zébrures donnent de la vibes aux pages web tout en conservant un ratio poids/agrément des plus satisfaisant, vu qu’il s’agit d’un motif de petite taille (généralement quelques pixels) qui se répète sur tout ou partie de la page. →

HTML & CSS

Je teste mon navigateur sous Acid2, c’est grave, docteur ?

Acid2 the reference rendering smileyC’est une bonne nouvelle pour tous les webdesigners et autres intégrateurs HTML et CSS : la prochaine mouture d’Internet Explorer (IE8) devrait passer le test Acid2. Enfin, c’est ce qu’on peut lire un peu partout (disons que c’est notre Laure Manaudou à nous, les webeux). Mais qu’est-ce donc que ce test ? Ne risque-t-on pas d’abimer notre navigateur à le passer ainsi à l’Acid ? Pour le savoir, je me suis lancé dans une petite « craduction » de la première partie de l’article Acid2: The Guided Tour paru sur The Web Standards Project qui se bat depuis longtemps pour l’adoption des standards du web par tous pour permettre l’accès du web pour tous. →

Ergonomie & Accessibilité

Le web 2.0 peut être dangereux… pour vos profits

Le gourou de l’utilisabilité, de l’ergonomie et du design web (au sens d’architecture web) Jakob Nielsen nous propose de réfléchir sur le web 2.0 du point de vue des fonctionnalités et de leur adéquation avec les besoins et les attentes de l’utilisateur. Voici un rapide résumé de son alertbox. →

Design & Graphisme

Les 10 plus beaux designs CSS selon SmashingCoding

Le concours organisé par Smashingcoding est terminé et les membres du jury ont rendu leur copie pour désigner le vainqueur parmi le top 10 des blogs inscrits. Je suis content d’être à la 5ème place et je félicite chaleureusement le 1er (avec une pointe de jalousie, il faut bien le dire) ainsi que tous les autres participants avec une pensée pour SuperChinois 😉

Voici donc les 10 plus beaux design CSS selon SmashingCoding qui avait pris en compte l’apparence du blog, la qualité du code, les astuces CSS utilisées et les difficultés surmontées en terme de webdesign :

  1. Affinity Web
  2. le blog de Damien Alexandre
  3. Webinventif, Kenny-Blog
  4. BizetFamily
  5. css4design
  6. Pixnlov
  7. Pixenjoy
  8. Pilok
  9. Buzz and People
  10. Tux Planet

PS : Vous remarquerez que Britney « CSS » Spears n’était pas très « fatiguée d’être sexy » ! Bien joué eMeRiKa 😀

HTML & CSS

Frameworks CSS + Reset CSS : design from scratch

Je n’ai pas résisté à l’envie de vous proposer ma traduction de l’article CSS Frameworks + CSS Reset: Design From Scratch paru dernièrement sur Smashing Magazine. Les frameworks CSS sont des environnements de développement composés généralement de plusieurs fichiers CSS gérant chacun une partie spécifique du design web (typographie, grille de mise en en page, formulaires, etc…). Ces frameworks sont souvent accompagnés d’un Reset CSS, pour s’affranchir des différences de rendu entre les navigateurs. L’article fait ainsi le point sur la notion de framework CSS, ses avantages et ses inconvénients, décrit les frameworks les plus populaires et termine par une série de liens commentés à propos des Reset CSS et des styles de base. En attendant d’éventuels retours sur la traduction, ce billet est en version bêta. →