Design & Graphisme

Standards du Web vs. Standards du Print

Julien Dubedout @mariejulien vient d’écrire un article très intéressant sur le rendu au pixel près des maquettes dans les différents navigateurs. Il explique son point de vue sur certaines différences de rendu de certaines propriétés qui ne sont pas { acceptables | logiques | normales } ; elles proviennent d’un standard qui — par définition — devrait garantir un affichage identique d’une même propriété sous tous les navigateurs. L’argumentation est rigoureuse et l’analyse est fine ; je partage une grande partie des points abordés par Julien que je résume rapidement ainsi : →

Design & Graphisme

Les sites web doivent-ils s’afficher exactement de la même manière dans chaque navigateur?

Cette question récurrente est un peu le serpent de mer du webdesign et de l’intégration web. Elle provient à l’origine d’une application sans discernement du flux de production PAO à des projets web qui n’ont pas les mêmes problématiques à résoudre. En PAO, il est impossible de dire au client que sa brochure imprimée aura un nombre de colonnes différent selon les lecteurs ou que la belle typo qu’il a déjà sur sa carte de visite ne passera pas à l’impression. C’est ainsi qu’est né le mythe du rendu des maquettes Photoshop au pixel près. Et pour cause : une fois que l’on a fait signer le BAT au client, on a les mains liées. Difficile de lui expliquer ensuite pourquoi son site ne ressemble à rien sur le PC de sa secrétaire qui utilise IE6. Et c’est normal du point de vue du client qui a bien raison de se moquer des problèmes existentiels des ouvriers qui travaillent à fond de cale 🙂 →

Création graphique

Envie de buzzer ? What else…

Dans la série des délires (ré)créatifs où prennent place mes recherches graphiques, voici une piste pour un site auquel vous avez échappé : Envie de buzzer ! Comme vous allez le voir, vous n’échapperez pas au logo que je viens de retrouver dans un sous-dossier d’une sauvegarde que je croyais perdue à jamais. Envie de buzzer est un site que j’avais envisagé de lancer lors de la grande mode du buzz. Genre, si à 50 ans tu n’a pas lancé un site avec le terme «buzz» dedans, tu as un peu raté ta vie ^^ →

Design & Graphisme

Le design est un dessin et un dessein

Le design est une discipline visant à représenter concrètement, une pensée, un concept ou une intention en tenant compte éventuellement d’une ou des contraintes fonctionnelles, structurelles, esthétiques, didactiques, symboliques, techniques et productives. Ces représentations peuvent être tangibles ou virtuelles et s’inscrivent de préférence dans un contexte social, économique, culturel. →

Typographie

Mise en page typographique avec CSS3 et Lettering.js

Ce tutoriel écrit par Nikola Lazarevic montre comment mettre en forme un texte de type «article» à l’aide de CSS3 et de Lettering.js. L’auteur nous prend par la main et détaille chaque étape : reset.css, styles de base, typographie avec Font-face, mise en forme des paragraphes. Le tout saupoudré d’une pincée de box-shadow et d’une segmentation des mots composant les titres à l’aide de Javascript pour débrider notre créativité en jouant sur les mots. →

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. →

Design & Graphisme

Webdesign, lisibilité, typographie et rédaction web

Une grande partie des notions relatives à la lisibilité des contenus sur les écrans date des débuts du web. Dès 1997, Jakob Nielsen déclarait que la lecture sur écran était 25% plus lente que sur le papier. Depuis cette époque, la technologie n’a cessé d’évoluer et la qualité des écrans et des polices de caractères va dans le bon sens. Il est temps de se poser des questions sur la lisibilité des caractères, le sens de lecture d’une page, les valeurs optimales pour le corps des textes et leurs interlignages, le nombre de fontes que l’on peut utiliser dans une page, et la rédaction pour le web. →