blog

Vestiges d’un CSS Guru

Catégorie : Bien développer

Billet

Tout le codex WordPress en une seule page

N’ayant actuellement pas internet chez moi mais voulant tout de même finir mon futur thème WordPress, j’ai cherché à obtenir une version complète et transportable du Codex WordPress. J’ai finalement trouvé par hasard ce guide complet des template tags de WP.

En désactivant le JavaScript (merci Web Developer), on obtient la même page avec tous les blocs entièrement déroulé. Ensuite, un screenshot de la page entière (merci Pearl Crescent) permet d’obtenir tout le codex WordPress en une seule image.

Billet

Sortie de Colorzilla 2.0, avec son générateur de palette de couleurs

Ce matin en ouvrant mon navigateur préféré, une mise à jour de Colorzilla était disponible. Vous connaissez sans doute cette extension Firefox qui permet d’avoir un outil “pipette” dans votre navigateur. Ainsi, en naviguant sur un site, il suffit de cliquer sur l’icône Colorzilla et de placer le curseur sur un pixel d’un élément de la page pour connaître ses codes couleurs (RVB et Hexadécimal).

Souvent, lors d’une mise à jour, une page du site de l’extension s’ouvre pour vous décrire les maj installées. En général, je zappe rapidement cette page, pensant qu’il n’y a qu’une liste de bugfix sans intérêt pour ma part. Mais là, j’ai bien fait de lire les nouveautés.

Aujourd’hui, la version 2.0 de Colorilla est sortie. Quoi de neuf ? Et bien 2 fonctions bien pratiques :

  • Webpage DOM Color Analyzer
    En un clic, vous obtenez une palette de couleurs du site sur lequel vous êtes. Mais le must, c’est qu’il dresse la liste des éléments qui utilisent les couleurs en question. Il y a même la possibilité de sauvegarder la palette ou d’obtenir un permalien vers celle-ci. Voici un exemple avec mon blog :
    Webpage DOM Color Analyzer
    Un excellent outil pour obtenir les couleurs d’un site que vous appréciez.
  • Online Palette Viewer
    En complément de l’outil précédent, Colorzilla permet de visualiser, sauvegarder et partager les palettes de couleurs proposées par les utilisateurs. Par exemple, voici la palette du site du W3C. Vous remarquerez l’outil “pipette” en bas à gauche de la page, même si vous n’avez pas installé l’extension.

La version 2.0 porte plutôt bien son nom, avec son lot de fonctionnalités de partage très intéressantes, sans oublier la simplicité et l’efficacité du générateur de palettes.

Billet

30 excellents pdf pour web designer

Je suis tombé sur un post de Positive Space qui recense 30 Essential PDF Documents Every Designer Should Download. Cette liste très bien fournie aborde des thèmes aussi variés que WordPress, la notion de design, les CSS dans les newsletter, le Web 2.0, la typographie, le statut de freelancer… On peut utiliser ces documents comme des guides, car leur avantage est d’adopter une vision très générale et synthétique d’un thème. Voici quelques-uns de mes préférés.

Yahoo! Design Pattern Library

Yahoo Design Pattern Library

Yahoo! possède déjà de très bonnes ressources pour les développeurs en tout genre. Le pdf de Design Pattern Library est quant à lui un résumé des différents éléments graphiques que l’on peut être amené à implémenter dans un site, que ce soit des onglets, des calendriers, des formulaires… Il y a aussi des informations utiles pour créer un site selon un système de grille, ainsi que des informations sur les supports mobiles (dont l’iPhone).

WordPress Help Sheet

Mémo WordPress

Ce mémo pour WordPress est indispensable à tous ceux qui comme moi aiment créer des thèmes WordPress à partir de rien. Il recense toutes les fonctions que l’on peut appeler, en y juxtaposant une description concise et précise. Il existe bien sûr le Codex WordPress, la source principale, mais ce mémo a pour avantage de donner une vision globale de ce que l’on peut faire, et de trouver facilement une solution face à un problème donné. Si vous voulez aller plus loin, il existe aussi le Advanced WordPress Help Sheet, qui lui se focalise sur des cas particuliers faisant appels à plusieurs fonctions.

Destroy the “Web 2.0 Look”

Destroy the Web 2.0 look

Ce qui me plaît dans cette charge contre le look Web 2.0 c’est que l’auteur (Elliot Jay Stocks) évalue exactement les raisons de la prolifération du soi-disant style “Web 2.0” et caricature les gens qui ne comprennent pas ce que c’est, que ce soit les clients ou bien (et c’est pire) les designers eux-même. Le Web 2.0 n’est pas un design mais un concept. Malheureusement, ce terme a généré une vague sur laquelle bon nombre de gens surfent allègrement en se posant comme des designers 2.0 et considérant que l’Ajax est une technologie 2.0 (alors que ce n’est pas la technologie qui a changé entre le 1.0 et le 2.0, mais l’utilisation que l’on en fait). Le document fait bien remarquer que bon nombre de web designers n’ont pas suivi cette tendance de “look 2.0”, voyant bien que ce n’est qu’un feu de paille bien superficiel.

Billet

Le web design ce n’est pas que du graphisme

Après une année (ou presque) passée dans le monde professionnel du web design en tant que novice encore en rodage, je me pose encore la question : c’est quoi être web designer ? J’utilise cette dénomination parce que c’était celle de la formation que j’ai suivie, et qu’elle correspond aux 2 principaux aspects de mon travail : intégration et graphisme.

Intégration : l’écriture du code (X)HTML et des feuilles de styles (CSS) associées.
Graphisme : création de visuels, animés ou non, sous Photoshop, Illustrator, Flash…

A ce stade, j’ai d’ores et déjà inclus autre chose que du graphisme dans la notion de “web design” : l’intégration. En effet, coder c’est du web design aussi, et correspond en l’occurrence à la moitié de mon travail.
Cela peut prêter à confusion. On se dit “design = graphisme” et donc que le “web design” se résumerait au “graphisme sur le web”. Mais “to design”, c’est concevoir, penser, réaliser les sites web. Comme le résume très bien l’article Wikipedia :

Le web design désigne la conception de l’interface web : l’architecture interactionnelle, l’organisation des pages, l’arborescence et la navigation d’un site web.

Lire la suite →

Billet

8 nouvelles polices à utiliser en CSS

8 fonts to use in css

Une chose que l’on nous apprend en CSS c’est d’utiliser les web-safe fonts. Ce sont en fait une dizaine de polices qui sont a priori existantes sur tous les ordinateurs. Ca permet à l’utilisateur de voir le site correctement, tel qu’il était prévu. Parmi ces polices il y a Arial, Verdana, Times…

Par conséquent, les intégrateurs se sont naturellement limités à utiliser les polices de cette liste. Mais en réalité, rien n’empêche d’en utiliser d’autres. C’est juste qu’en général, on ne prend pas ce risque là, parce qu’on ne connait pas la disponibilité des autres polices.

C’est pour ça que 3.7 Designs a établi une liste de 8 polices qu’on n’utilise pas en CSS mais qu’on devrait. Tahoma, Century Gothic, Palatino… Ce sont des polices qui sont très répandues, que ce soit sur Mac ou PC. On peut donc aisément les utiliser, en songeant bien sûr à spécifier des polices alternatives au cas où elles viendrait à manquer.

Billet

1 police + des variations + des em = 1 leçon de typographie web

Les web designers sont confrontés au problème du nombre de polices disponibles lorsqu’il s’agit de texte html. 9 polices (dont Arial, Verdana, Times…), ça semble peu. Et pourtant, il existe des solutions pour habiller une page rien qu’en jouant sur les variations d’une même police.

Un exemple : la page du Seed Conference.
1 police (Times) et de nombreuses variations (taille, couleur, type…) créent une page relativement jolie.

Encore plus intéressant : Phineas Jones a réalisé exactement la même page mais en utilisant des em (cadratin). Le résultat est excellent. Changez la taille de la police (Ctrl + et Ctrl – sous Firefox) : le redimensionnement est parfait. On croirait un pdf! Comparez avec la page originale, vous verrez la différence.

Via Simple Bits

Billet

Comparer les polices web avec Typetester

Typetester

Sur les pages web, nous sommes limités à 9 polices de caractères (Arial, Verdana, Times…). Cela semble peu (et ça l’est). Mais même avec ce faible nombre de polices, on peut jouer sur la taille, l’alignement, les couleurs, le type, l’espacement… pour apporter de la variété et du dynamisme à une page web. Il faut pour cela tester, et cela prend pas mal de temps, de taper une à une les propriétés CSS puis observer les changements, et comparer avec d’autres possibilités. Si vous voulez gagner du temps, je vous propose un outil très pratique (et très bien foutu) : Typetester.

Il s’agit d’un outil pour comparer des polices, sur la base de 3 colonnes (pratique pour voir les différences au premier coup d’oeil). Les modifications se font en “live” et tous les types (gras, italique, small-caps…) sont disponibles. On peut aussi copier-coller les propriétés d’une colonne vers une autre. Cerise sur le gâteau : on peut choisir dans la liste déroulante les polices installées sur son ordinateur, pour ainsi tester d’éventuelles créations d’images.

Billet

5 bonnes pratiques CSS

En attendant le prochain bdbx (déjà prêt), je vous propose 5 bonnes pratiques en CSS. A force de bosser des feuilles de style, il m’arrive de ne plus faire quelques erreurs même si je n’arrive pas encore à toujours trouver la solution optimale directement. Ici, je ne parlerai pas de pratiques basiques plutôt évidentes (comme par exemple d’utiliser un maximum les notations raccourcies), mais d’autres plus subtiles auxquelles je ne pensais pas auparavant.

  1. Ne pas utiliser de position:absolute sur un élément dont on ne connaît pas la hauteur
  2. Bien notifier qu’un lien est en display:block
  3. Ajouter un background-color avec le background-image
  4. Utiliser le position:relative en dernier recours
  5. Mettre un id au body

Lire la suite →