JSCharts
JSCharts est une librairie JavaScript permettant de créer de nombreux graphiques d'après des modèles qu'il est possible de tester avec un générateur. Le résultat est bien esthétique et l'utilisation de cette librairie plutôt aisée. Courbes, histogrammes et camemberts au programme.
CSS Selector Shell
Comment sera interprétée votre feuille de style dans tel ou tel navigateur ? That is the render ! Lindsey Simon de Google a créé un petit script nommé Selector Shell, permettant de tester en ligne l'assimilation des règles par le moteur de rendu. Les sources de Selector Shell sont diffusées sous licence libre. Merci à WebDevSign pour cette suggestion.
10 choses qu'un designer web ne vous dira jamais
10 choses qu’un designer web ne vous dira jamais, un billet plein d'humour satirique de Paul Boag traduit par Padawan.
Au programme :
- Toujours demander un design spéculatif préalable
- Ne vous prenez pas la tête avec les utilisateurs finaux
- Faites confiance à votre instinct, pas à des tests
- Créez un comité pour fournir du feedback
- Soyez obsédés par les détails
- Faites respecter vos règles de style institutionnelles à la lettre
- Mettez autant de choses que possible sur la page d’accueil
- Assurez-vous que le contenu apparaît en haut du panier
- Vous n’avez besoin de tester que sur internet explorer 6
- Le SEO est plus important que le design
Du vrai, du vécu et encore du vrai.
EmChart
Utiliser les unités em pour définir la taille des polices (plutôt qu'en pixels) est une bonne méthode pour permettre leur adaptation à tous les types de lectures, notamment pour l'agrandissement. EmChart est un tableau récapitulatif de conversion em/px donnant le multiplicateur à appliquer en CSS à partir d'une taille de police par défaut (celle appliquée au document) afin d'obtenir la taille désirée en pixels. Très utile pour le calcul des marges verticales et la hauteur des lignes (line-height). Publié par Aloe Studios.
Dans la même veine, existe PXtoEM.com qui est probablement plus pratique d'utilisation.
CSS Animation dans Webkit
Webkit supporte animations CSS dans ses dernières nightly builds. Pas de quoi concurrencer le Flash dès à présent, mais quelques belles alternatives aux plus courants des JavaScripts.
Commentaires
Merci Dew pour ces p'tits trésors du web. Je sens que le Webkit, risque de me faire faire quelques nuit blanches ^^'
Concernant l'article "10 choses qu'un designer web ne vous dira jamais", faut vraiment garder à l’esprit que l’article utilise l’humour satirique à outrance et prendre certaines phrases au 2ème degré.. Parce qu'à la 1ère lecture, mon réflexe à été automatiquement de me dire : "mais c'est quoi ce ramassis de connerie ?? "
Après j’ai relu l’article en rangeant dans un tiroir mon côté designer, et j’ai un peu mieux compris son point de vue. En gros je pense que dire, par exemple, "Vous n’avez besoin de tester que sur internet explorer 6" est "un poile" trop fort de café, mais que l’idée générale de cet article est de ne pas ce laisser "embobiner" par des designers à la recherche du saint graal des designs web, et de savoir garder les pieds sur terre, et nos besoins en tête.
Après je suis curieux de savoir ce que d'autres en pense :)
Bonjour,
ça m'intéresserais beaucoup que tu nous expliques comment tu utilises EmChart pour tes padding et margin ;-)
@Mikerob : l'article est complètement au second degré et liste les idées reçues que certains clients ont: leur «feeling» est fiable, pas besoin de faire des tests ergonomiques avec des utilisateurs; il faut absolument que tous les détails soient parfaits; mieux vaut un comité d'intervenants pour obtenir un design consensuel; etc. Autant d'idées qui peuvent planter un projet de design, en sacrifier la qualité, ou le faire sombrer dans la réunionite aigüe.
@Squal38 : alors c'est simple: pour les margin et padding latéraux, on utilise pas les EM, c'est généralement inutile voire gênant. Pour les padding tout court, d'ailleurs, les EM sont rarement utiles. Pour les margin supérieurs et inférieurs, notamment pour les titres, listes, paragraphes, blocs de citation, etc., les EM sont intéressants, et en gros là on utilise soit du 1em (la taille du texte), soit plus, soit moins, suivant comment on veut gérer les blancs dans les flots de texte. Pas de grand mystère ici (ni dans le choix des tailles de texte en EM, d'ailleurs, qu'on n'est PAS OBLIGÉ de gérer au dixième près dans le but d'obtenir des équivalences avec les pixels, hein!).
@Florent V. : ok, j'ai mal formuler ma question. Je recommence : la phrase "Très utile pour le calcul des marges verticales et la hauteur des lignes (line-height)" m'intrigue, j'aimerais en savoir plus ;-)
Ah ok. Ben pour ma part je dirais que c'est pas utile du tout pour ça; le line-height se passe très bien de EM, et utiliser les EM pour les marges ne demande aucun calcul savant. Mais je laisse l'auteur préciser sa pensée. :)
Je viens de lire l'article associé à l'outil sur le blog de son auteur et je comprend mieux de quoi il est question. Il s'agit de traduire en em les espacement verticaux et les hauteur de ligne, à partir de valeurs en pixels calculées sur des maquettes bitmap, afin de conserver le rythme vertical défini par l'auteur de la maquette.
C'est donc très dépendant de la manière de travailler et c'est pour ça que je ne comprenais pas le besoin de faire ces calculs :-).
@Florent V. : aaah la réunonite aïgue, une maladie que je connais que trop bien... J'ai pas encore trouver le remède miracle, mais peut-être que la solution est dans les entrailles de cet article ^^ .... un ou dans un magasin de bat de baseball....