Ed Merritt, un excellent web designer passionné pour la typographie, publie la police Munro, et exauce par la même un voeux secret : disposer d’une police Mac minuscule, de la taille des choses qui sont si lisibles sur Flash (grâce aux fameuses FFF, les Fonts For Flash) mais qui sont ridiculement crades lorsqu’on commence à attaquer les tailles 7/8 points sur Photoshop.
Une fois n’est pas coutume, je vous propose aujourd’hui de faire la critique d’un site que j’ai récemment découvert, que je trouve exemplaire à bien des égards, et que je vous propose de commenter : www.evaneckard.com.
Développant actuellement un site type e-commerce dont les éléments de design s’adaptent à la famille de produits (une famille = une couleur dominante), la question de la génération de code CSS dynamique se pose dans la mesure où l’on doit, pour chacune des familles produit en cours et à venir, attribuer un code couleur de fond et de bordure à tout un tas d’éléments HTML affichant les dits produits.
En cherchant sur le Web de l’information me permettant d’automatiser le processus (= moins de maintenance à termes), et en quête d’une méthode permettant d’alléger au maximum le code CSS à charger (= plus de rapidité au chargement), j’ai fini par trouver cet excellent article très didactique : Generating Dynamic CSS with PHP.
Cet article, paru dans le non-moins excellent Digital Web Magazine, nous explique comment factoriser nos efforts en utilisant PHP pour générer une partie du code CSS de manière contextuelle.
Vous souhaitez publier régulièrement des données graphiques ? Vous avez besoin de communiquer sur votre site des chiffres fréquemment actualisés à l’aide d’un diagramme en barres ?
Rien de plus simple grâce à l’usage conjoint de CSS et PHP !
Lire le reste de cet article »
Encore un article de très grande qualité, extrêmement documenté, de Smashing Magazine : Award-Winning Newspaper Designs. Une mine d’informations sur l’usage de la typographie et la disposition des éléments textes/images dans les publications européennes et américaines.
A noter, une analyse fine de l’arbitrage des espaces dans les publications les plus lues de chacun des pays abordés, très très intéressant !
» Lire l’article Award-Winning Newspaper Designs
Dans un article 10 Principles Of Effective Web Design, Smashing Magazine (l’un de mes 3/4 sites d’inspiration préférés), l’auteur revient sur les concepts d’usabilité, d’ergonomie et d’accessibilité abordés depuis la perspective du design.
D’une documentation remarquable (je ne sais comment ils vont chercher tous ces sites exemplaires pour illustrer leurs dires), cet article reprend les principes de base de l’heuristique appliquée au webdesign.
J’apprécie particulièrement la première partie de cette intervention, intitulée How do users think?, qui démontre images à l’appui que les internautes ne lisent pas, ils scannent une page, comme l’illustre l’aperçu suivant :
Les zones « chaudes » de cette image correspondent aux endroits les plus consultés par l’iris du lecteur, ceci grâce à l’analyse des mouvements de l’oeil sur une page Web (en savoir plus sur cette technique : Eyetools.com. Autrement dit, les internautes cherchent des points d’accroche, comme des ancres, permettant de poser le regard sur un éléments, qu’il s’agisse d’un bloc de texte ou d’une image.
En comparant les deux aperçus, on se rend bien compte de l’intérêt du visuel et du menu contextuel sur la page de droite. La page est bien plus balayée, et maintient une attention jusqu’à la fin du document.
Je vous laisse découvrir les 10 principes du Webdesign accessible et ergonomique par la lecture de l’article original.
Excellent article de Joe Dolson et relayé par Pompage.net pour sa version anglaise. Il aborde le thème de l’accessibilité du contenu d’un site Web vu par le prisme de la typographie.
On balaie la taille des polices, l’interlignage, le choix des typo, l’alignement des paragraphes d’un texte ainsi que l’espacement des lettres. L’accès universel et aisé à un texte est en effet d’abord conditionné par la lisibilité d’un texte, il faut donc avant toute chose soigner en particulier la perception de votre contenu auprès d’un public de lecteurs qui ne sont pas tous à 10/10 d’acuité visuelle, ni équipé des meilleurs écrans du marché…
Je laisse la parole à l’auteur pour la conclusion :
Les éléments à prendre en compte dans la typographie pour Internet sont les mêmes que pour les autres médias, c’est la manière d’utiliser les ressources qui change, afin de s’adapter aux visiteurs. L’absence de contrôle sur de nombreux éléments oblige les webdesigners à réfléchir à d’autres façons d’optimiser les moyens à leur disposition. Il ne suffit pas de s’en tenir à un modèle spécifique, il existe trop d’impondérables. Il vaut mieux au contraire savoir dans quelle mesure les préférences de l’utilisateur peuvent avoir un impact sur vos choix typographiques et éviter les situations risquant de rendre le texte illisible.
» lire l’article Améliorer l’accessibilité Web par la typographie
Récemment, Apple a sorti une nouvelle mouture du logiciel pilotant les iPhone et les iPod Touch. Au menu des nouvelles foncitonnalités, la possibilité de créer une icône raccourci dans le tableau de bord de l’appareil. Un raccourci vers quoi ?
Vers un site favori pardi ! Voici donc l’astuce permettant de créer sur votre site Web un icône spécial iPhone/iPod Touch, car par défaut l’appareil génère un aperçu de la première page pour créer l’icône, ce qui ne donne pas forcément un résultat des plus esthétiques.
Alors comment créer ces WebClip Bookmarks, comme les appelle si bien Apple ? Eh bien il faut commencer par créer sur votre logiciel d’édition graphique favori un icône de 57×57px que vous nommerez
apple-touch-icon.png
Ensuite, on apprend à la lumière de la documentation fournie par Apple qu’il existe plusieurs moyens d’intégrer votre image au navigateur Mobile Safari utilisé par votre téléphone ou baladeur favori.
Parmi les méthodes, la plus simple et logique consiste à faire usage de la balise LINK à l’intérieur de l’entête HEAD de votre page, par l’intermédiaire d’une ligne similaire à celle-ci :
link rel="apple-touch-icon" href="images/apple-touch-icon.png"
Safari retraitera automatiquement votre image pour lui ajouter l’effet glossy des autres icônes, et ainsi faire de votre raccourci un élément à part entière du Springboard (le tableau de bord de l’appareil).
La récente sortie d’Office 2007 nous a offert un superbe retour vers le passé, par le rendu des emails qu’Outlook 2007 emprunte au moteur Word, tout cela évidemment pour des raisons de « sécurité »…
Au delà de l’anecdote d’un logiciel (ce n’est pas la première fois que Microsft nous désolé de ce point de vue), cette goutte d’eau a pour certains fait déborder le vase du non support des règles de base de l’édition HTML :
Nous savons que le courriel, tout comme la page web, sont interprétés différemment selon l’environnement de l’usager. Il existe une variété de messageries qui compliquent la tâche, sans oublier que certaines ne supportent que très peu le HTML. Conséquemment, le courriel est l’enfant pauvre du design actuellement. Oubliez les images en arrière-plan ou un design complexe sans table !
(Source : Courrielleur.com).
En réponse à cela, et plus généralement en réponse au non respect des standards du Web (support complet des règles éditées par les feuilles de style CSS, normes du W3C, d’accessibilité WAI, etc.) ; est né le projet Email-standards.org.
Il a pour but de promouvoir et définir les normes de l’email marketing afin de faire progresser chacun des acteurs de la « chaîne » email : éditeurs de logiciels email, services de webmail, éditeurs de solutions de génération d’email, designer et marketeurs éditeurs, etc.
Au delà du caractère revendicatif de ce rassemblement — le projet a pour point de naissance un gros ras-le-bol des designers qui ne peuvent suivre les standards d’édition du Web et donc ne peuvent bénéficier des fonctionnalités avancées de l’HTML permettant de créer des messages plus graphiques et plus attractifs – il s’agit d’y retrouver des informations constamment mises à jour sur le support des messagerie et sur les évolutions que feront subir les éditeurs de logiciels et de solutions web à leur lecteurs d’emails.
En tout cas c’est l’ambition affichée, car il va falloir batailler ferme, un peu à l’image d’Internet Explorer 7 qui commence enfin à avoir un support correct des normes CSS…
» Connaître le support de chaque logiciel/service de messagerie
» Supporter le mouvement Email Standards
Les Google Adsenses sont partout, mais combien de sites les intègrent harmonieusement à la charte globale de l’environnement du site ?
Il est souvent déplorable de voir ces encarts promotionnels défigurer un design très sobre ou très étudié, et qui vient immanquablement dénaturer l’ensemble et déséquilibrer la perception de l’internaute. De plus, puisque le but des Google Adsenses est de s’intégrer au mieux du site afin de jouer sur la contextualité des informations affichées avec celles de la page en cours, pourquoi ne pas s’attacher à personnalisation la présentation de ces encarts publicitaires textuels ?
L’article Style your AdSense links vous explique comment procéder afin de réussir une intégration idéale. Il revient sur les 3 types d’Adsense que sont :
Via quelques astuces CSS, l’auteur nous explique les tours de mains à appliquer (notamment en CSS) afin de personnaliser complètement ses annonces textuelles.
» Lire l’article Style your AdSense links