CSS & Webdesign » Conception de site web http://css.4design.tl Le blog de l'intégrateur web Sun, 20 May 2012 15:30:49 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 La journée mondiale de l’accessibilité, c’est maintenant ! http://css.4design.tl/journee-mondiale-accessibilite-9-mai http://css.4design.tl/journee-mondiale-accessibilite-9-mai#comments Wed, 09 May 2012 17:49:58 +0000 Bruno Bichet http://css.4design.tl/?p=11993 Le GAAD (Global Accessibility Awareness Day) dédie cette journée du 9 mai 2012 à la sensibilisation du plus grand nombre à l’accessibilité des contenus et applications digitales (web, logiciel, application mobile, etc.) pour les personnes en situation de handicap.

Demain, le Web sera plus humain

Merci à Monique Brunel (Webatou) d’avoir partagé cette vidéo.

Articles sur le même sujet

flattr this!

]]> http://css.4design.tl/journee-mondiale-accessibilite-9-mai/feed 2 Check your <body> avec le W3C http://css.4design.tl/check-your-body-avec-le-w3c http://css.4design.tl/check-your-body-avec-le-w3c#comments Wed, 11 Apr 2012 20:35:20 +0000 Bruno Bichet http://css.4design.tl/?p=11833 Suite à l’arrivée W3C mobileOK Checker sur mon écran radar (merci @flashxman), je me suis dit qu’il pourrait être utile de faire une liste des outils proposés par le W3C pour vérifier la conformité de nos sites web par rapport aux standards, aux bonnes pratiques ou aux performances web. D’une manière générale, ces outils œuvrent pour l’amélioration de la qualité web.

Principaux validateurs du W3C

  • Unicorn– C’est le Validateur unifié du W3C pour :
    • Vérifier la conformité générale en effectuant tous les tests possibles.
    • Vérifier la validité pour les profils CSS 1, CSS 2, CSS 2.1 et CSS 3.
    • Vérifier la compatibilité avec les portables.
    • Vérifier la syntaxe des flux Atom ou RSS.
    • Un dernier choix permet de sélectionner les tests à effectuer parmi les items précédents.
  • Markup Validation Service — Connu également sous le nom de Validateur HTML, ce service vérifie la conformité des formats HTML, XHTML, SVG ou MathML.
  • Link Checker — Vérifie les ancres dans un document HTML / XHTML. Pratique pour faire le point sur les liens brisés.
  • CSS Validator — Vérifie la conformité des feuilles de style CSS ou des documents qui comportent des styles CSS. Les trois derniers outils sont réunis dans Log Validator qui permet d’améliorer la qualité d’un site web pas à pas en cherchant les erreurs en premier lieu dans les documents les plus populaires. Plus d’information à ce sujet dans Passer aux standards Web rédigé par Karl Dubost (@karlpro).
  • mobileOK checker — Vous développez pour les périphériques mobiles ? Ce service vous aidera à découvrir les points faibles de votre site lorsqu’il est affiché sur un smartphone.

Autres services du W3C

W3C Cheat Sheet

Valider c’est bien, encore faut-il savoir comment améliorer les éléments que ces fabuleux outils soumettent à notre sagacité. Si le W3C est capable de trouver la source des maux dont souffrent nos pages web, il nous donne aussi les clés pour améliorer notre pratique.

W3C Cheat Sheet est un outil open source que le W3C met librement à la disposition des développeurs web. Il fournit un accès rapide à tout un tas d’informations concernant les différentes spécifications publiées par le W3C :

Articles sur le même sujet

flattr this!

]]> http://css.4design.tl/check-your-body-avec-le-w3c/feed 1 11 vidéos pour comprendre l'accessibilité du point de vue… des mal-voyants http://css.4design.tl/11-videos-accessibilite-mal-voyants http://css.4design.tl/11-videos-accessibilite-mal-voyants#comments Sun, 12 Feb 2012 18:54:03 +0000 Bruno Bichet http://css4design.com/?p=11438 L’accessiblité des sites web est une choses dont on parle souvent, sans forcément avoir une idée très précise de la manière dont les mal-voyants utilisent les sites que nous concevons, généralement, pour le plus grand nombre. Les enjeux sont importants car le web permet aux mal-voyants de communiquer, de s’informer et de gérer une partie de leur vie quotidienne. Cette série de vidéo proposée par Access-Key de l’Université Nice Sophia-Antipolis devrait fixer les idées sur des cas concrets, pour nous permettre d’améliorer la lisibilité et le décodage de nos sites web.

Ces 11 vidéos en libre-accès illustrent de manière pédagogique les recommandations du WAI :

Merci à la liste de diffusion Pompeurs !

Pompage et CSS débutant nous offrent une liste de discussion francophone pour créateurs de sites web.

Articles sur le même sujet

flattr this!

]]> http://css.4design.tl/11-videos-accessibilite-mal-voyants/feed 5 CSS Sans Stress — Une formation intégrateur HTML & CSS http://css.4design.tl/formation-integrateur-html5-css3 http://css.4design.tl/formation-integrateur-html5-css3#comments Fri, 25 Mar 2011 15:21:54 +0000 Bruno Bichet http://css4design.com/?p=7173 La plupart des formations dédiées à la création de sites web ressemble trop souvent encore aujourd’hui aux formations PAO d’hier où l’on apprenait à utiliser des logiciels sans rien connaitre des aspects «métier». A quoi bon connaitre les différentes manières de faire des colonnes dans Quark XPress ou InDesign et d’importer du texte et des images si l’on a aucune notion de mise en page et de typographie ?! C’est la même chose avec Dreameweaver ou votre éditeur HTML préféré. Les fondamentaux du graphisme et les principes de base de l’ergonomie doivent faire partie intégrante des projets de formation en Webdesign, sans quoi ils sont voués à l’échec.

Introduction

En attendant que les pouvoirs publics ne se décident à financer des formations adaptées — et puisque le Pôle-Emploi est souvent hors du coup et hors des coûts –, se sont des générations de Webdesigners qui sont souvent formés à la va comme je te pousse ! A moins qu’un veilleur bien inspiré de la Région Rhône-Alpes ne vienne lire ce billet…

«Les Standards du Web, connais pas, c’est quoi ? Moi, j’ai suivi une formation en Webdesign Dreamweaver. Mais une fois, le formateur nous a fait cliquer sur le mode Source. Ça ne compte pas ?»

Par Astrid Graeber via Wikimedia Commons

Former des grands débutants à la création de site Web From Scratch est un pari difficile. Voici quelques éléments issus de la formation Chargé d’Intervention Multimédia que j’ai mise en place il y a une dizaine d’années pour le compte de la région Rhône-Alpes.

A l’issue de cette formation, les apprenants devaient être capables de mettre au jour les besoins du client, de formaliser les besoins dans un cahier des charges, de créer l’architecture d’un site internet, de concevoir le design à l’aide de Photoshop et d’Illustrator, de réaliser l’intégration d’un PSD dans Dreamweaver et de comprendre les bases de Javascript, PHP & MySQL.

Si je devais remettre cette formation en place aujourd’hui, je remplacerais Dreamweaver par Notepad++, j’insisterais lourdement sur les CSS 2.1 et CSS3 et la sémantique associée aux balises HTML5 et j’ajouterais la réalisation d’un thème WordPress comme examen de fin d’année ;-)

«J’ai bien envie de savoir découper un PSD autrement qu’en exportant toutes les tranches depuis ImageReady, c’est possible ?»

Niabot (Licence GFDL ou CC-BY-3.0), via Wikimedia Commons

Tout au long de la formation, j’insiste sur l’accessibilité, l’ergonomie, les standards du Web, la rédaction Web et le référencement (SEO). J’aborde également les outils de mesure d’audience (Google Analytics, GetClicky, Feedburner) et l’utilisation des réseaux sociaux pour faire la promotion de son site et effectuer une veille technique pro-active.

Ça fait beaucoup de choses, mais distillés par petites touches, ces conseils trouvent leur place et permettent de recadrer la production des apprenants avec des arguments concrets du type : «oui, ton texte est très bien écrit, mais non, en verdana 9px ça passe difficilement et en plus tu risques d’augmenter ton taux de rebond» ou encore : « Ton formulaire de recherche est bien placé mais sans bordure, avec son fond gris clair sur blanc on ne le distingue pas », etc.

Après Css Sans Stress — Auto-formation HTML & CSS avec les Frameworks CSS , ce billet fait partie d’un ensemble d’articles que je compte consacrer à la mise en place d’une formation globale sur l’intégration HTML & CSS dont le nom de code provisoire est :

« CSS Sans Stress & HTML S’en Mêle »

C’est quoi le Web ?

Expliquer comment faire un site Web c’est d’abord dire deux mots sur le Web et l’Internet dans les grandes lignes : histoire, protocoles, notions de client-serveur, débits, navigateurs et enfin la page web elle-même. Un site web n’est qu’une collection de pages reliées entre elles par une intention plus que par une technologie. C’est cette intention qui se traduit par le design dans le sens de «dessein».

A partir de là seulement, on peut évoquer la partie technique : HTML, CSS, Javascript, formats d’images et vidéos puis aller voir sous le capot l’apparence du code source. Pour éviter que l’expression «code source» ne soit source de confusion, j’insiste sur le fait que ni HTML ni CSS ne sont des langages de programmation, contrairement à Javascript côté client ou PHP côté serveur, par exemple.

Une très brève histoire du web

Représentation symbolique du réseau Arpanet (september 1974)
Représentation symbolique du réseau Arpanet (september 1974)

Par Yngvar (Public domain), via Wikimedia Commons

 

En 1969, un réseau connecte les universités d’Utah et de Californie. A partir de 1972 et jusqu’en 1981, les 213 hôtes qui sont reliés donneront naissance au cœur du réseau des réseaux (l’Internet). C’est à cette époque que les RFC sont mises en place : elles permettront de proposer et de distribuer les protocoles qui régissent et font vivre Internet aujourd’hui encore. Source Wikipédia.

Alors, c’est quoi le Web ? La lecture de l’article La plateforme Web de Karl Dubost (@karlpro sur Twitter) est très instructive. Le web est un espace d’information composé d’éléments caractérisés par des identifiants, appelé URI pour Uniform Resource Identifier. En gros, il s’agit de documents accessibles via un identifiant, par exemple une URL. Ce n’est peut-être pas grand chose, mais c’est déjà beaucoup.

Les premiers documents Web

Le site web du consortium du World Wide Web en 1992 encore accessible sur le site du W3.org

Le site web du consortium du World Wide Web (1992)

Les premières pages web sont principalement des documents universitaires, ce qui n’est pas étonnant puisque le Web est né du besoin des universités de partager leurs connaissances ou de confronter leurs travaux. Les balises HTML ont été conçues pour mettre en ligne des documents sémantiques et structurés et HTML5 ne déroge pas à ce sacro-saint principe.

Mise en page en tableaux

Les tableaux ont permis aux Webmasters de proposer des pages moins linéaires. On a ainsi vu apparaitre des en-têtes, des colonnes et des pieds de page. L’augmentation progressive des débits de connexion aidant, les images ont pris peu à peu la place qu’elles occupaient déjà dans les documents imprimés.

Inutile de sortir votre palette et vos pinceaux : la mise en page en tableaux ne fera pas de vous un(e) artiste ! (Photo par Rinina25)

photo by Rinina25 sur Wikimedia

Les tableaux c’était bien, mais leurs limites ont rapidement été atteintes : la maintenance est un casse-tête, l’accessibilité est souvent compromise et le ratio «code vs. contenu» n’est pas du bon côté de la force.

Mise en page avec CSS

Dans les années 2001, on a commencé à se dire que les CSS permettraient de produire des sites web plus efficaces en terme de maintenance, notamment en ce qui concerne la partie liées à la décoration des polices de caractères pour éviter d’alourdir les pages avec trop de «font» . Mais c’est à partir de 2005 (à la louche) que leur utilisation a vraiment commencé à s’imposer dans les esprits grâce au nouvelles possibilités de positionnement des blocs.

Les feuilles de styles CSS de l’intégrateur web ne sont pas fatiguées d’être sexy, elles !

By danBLOO (Own work) Public domain, via Wikimedia Commons

Toutefois, à cette époque encore, les CSS ont la réputation d’être un peu rigides ; les sites un peu funky n’y trouvent pas toujours leur compte. On reproche aux CSS de produire des mise en pages trop «carrés» (bien avant border-radius, donc). Pour certains, les CSS permettent tout juste d’arriver à la hauteur des sites Web en tableaux les plus basiques.

La lecture régulière de sites tels que  Cybercodeur, Openweb, CSS Zen Garden ou Alsacréations ont permis de tirer le meilleur du couple HTML & CSS vers le haut pour produire des pages Web respectueuses des standards, des maquettes du client et des délais (et des performances).

C’est quoi le graphisme ?

Les notions de Graphisme et de Design sont un peu les «laissés pour compte» dans les formations en création de site web. Tout au plus a-t-on le temps d’enfoncer le clou de la lisibilité et de donner quelques conseils de base concernant les trois mamelles du gris typographique : polices de caractères, contraste et interlignage.

Ce n’est pourtant pas une mission impossible. Il suffit de rappeler que le graphisme est composé de deux parties distinctes et complémentaires : Direction artistique et Design. La première va définir l’ambiance, le style, ce que le visiteur va ressentir en voyant le site ; tandis que le second est l’application des bonnes pratiques concernant la manière dont sont agencées les composantes de chaque page. Ce n’est jamais que l’expression de l’opposition de principe entre le fond et la forme, l’intention et l’exécution.

Une fois que l’on a bien compris que la direction artistique et le Web Design sont deux choses différentes, on peut se concentrer sur les fondamentaux du graphisme : les principes du design (traduit en français sur pouipouidesign) et les éléments que ces principes doivent organiser.

Graphisme & Webdesign

Voici le minimum syndical dont tout apprenant en Webdesign devrait entendre parler, ne serait-ce que dans les grandes lignes en fonction de la durée de la formation.

Quelques principes de base, un milliard de possibilités

Équilibre (symétrie, asymétrie)

Grille de mise en page au fer à gaucheLes notions de base de notre physique quotidienne comme la masse, la gravité ou encore le vide restent actives lorsque nous regardons une composition graphique. Nous attribuons un «poids visuel» aux éléments qui composent une mise en pages. Cet équilibre peut être arrangé de manière symétrique ou asymétrique.

Dans le premier cas, la composition est répartie autour d’un axe vertical ou horizontal. Il en résulte une impression… d’équilibre, de paix, de stabilité. Dans le cas de l’asymétrie, les éléments sont organisés de manière à produire une plus grande tension visuelle par l’utilisation de plusieurs petits éléments pour équilibrer une plus grande forme, par exemple.

Rythme (régulier, mouvant, progressif)

TartanL’intervalle entre la répétition ou l’alternance d’éléments crée le sens du mouvement et définit des motifs ou des textures. Le rythme peut être régulier lorsque les intervalles ou les éléments sont similaires en taille ou en longueur, fluide avec un mouvement plus organique ou plus naturel, ou encore progressif lorsque des étapes sont suggérées.

Proportion (distribution des formes, échelle et relation entre les éléments)

Il s’agit des dimensions ou de la distribution des formes, mais aussi de l’échelle entre un élément et un autre. Un petit objet à côté d’un plus important peut donner l’impression d’être plus éloigné.

Hiérarchique ou prédominance (quelle place pour quel élément)…

Point de perspective…Ou comment établir la perspective d’une composition et décider de l’importance relative des éléments entre eux selon le premier-plan, le plan médian et l’arrière-plan. Il existe la perspective à deux points de fuite et à trois points. Rarement utilisée, cette dernière est utilisée pour augmenter une perspective représentant des immeubles très hauts, des clochers d’église, etc. Via ABC Dessin.

Unité (d’après la Gestalt théorie)

Gestalt similarityIl s’agit de la composition vue comme un tout, où chaque élément, les liens et les relations qu’ils entretiennent font partie d’une démarche conceptuelle qui pousse l’esprit à établir des liens, à former des catégories ou des groupes porteurs de sens. La nature a horreur du vide, l’esprit humain aussi !

  • Fermeture — L’esprit imagine les pièces manquantes dans une composition,
  • Continuité — L’œil continue dans une direction donnée,
  • Similarité — Relation entre la forme et la fonction,
  • Proximité — Relation entre les éléments et comportement induit,
  • Alignement — Mise en place des objets dans l’espace pour organiser des ensembles cohérents.

La couleur

J’ajoute un topo sur les couleurs, sans lesquelles la vie serait bien triste. Sans entrer dans le détail de la symbolique des couleurs, je retiens que l’on a toujours besoin d’une couleur dominante et de quelques couleurs secondaires.

  1. Couleur dominante (bandeau ou logo) déclinée en 3 couleurs moins saturées et/ou plus claires pour découper la page en blocs fonctionnels.
  2. Couleur tonique pour les titres, déclinée en deux couleurs pour les puces, les pictos ou des textes courts,
  3. Troisième couleur pour les encarts, déclinée en deux couleurs pour les mises en exergue, les traits de séparation,
  4. Couleur typo pour le texte principal,
  5. Fond de page.
Le nuancier Pantone, que les imprimeurs appellent aussi « pantonier » et qui ne comprend pas moins de huit cents teintes, donne en fait les proportions de chacune de ces dix teintes de base
Couleurs Pantone

Nuancier Pantone

Un travail de qualité ne saurait se contenter de ces cinq étapes pour déterminer une palette de couleurs. Néanmoins, cette to-do list permet de franchir le cap de la feuille blanche. N’hésitez à consulter Choisir sa palette de couleurs où vous trouverez pas moins de 14 outils en ligne pour vous aider dans cette tâche. C’est d’ailleurs l’une des phases les plus passionnantes dans le processus de création ; c’est aussi celle qui sera la plus impactante en terme de première impression.

L’idéal serait d’avoir un très beau visuel sur lequel promener la pipette pour recueillir délicatement quelques gouttes de pixels… Ne rêvons pas trop, car la réalité est souvent plus proche d’un logo conçu en fonction des contraintes de l’imprimé versus les possibilités chatoyantes de l’écran.

Le gris typographique

C’est grosso modo l’impression visuelle faite par un pavé de texte que l’on regarde de loin en plissant les yeux (‘-_-’). En appliquant cette idée du gris typographique à l’ensemble des blocs (et au texte qu’ils contiennent), il est possible de travailler sur le rythme du site et la respiration de la page.

Rythmer la navigation

Nous avons plus haut la notion de rythme appliquée au niveau de la page. Ici, je m’intéresse aux relations qu’entretiennent les différentes pages d’un site en fonction des éléments qu’elles partagent : logo, bandeau et les menus de navigation qui fédèrent par nature les pages d’un site Web. L’enchainement des liens va donner du souffle à la navigation et à l’expérience utilisateur.

Il ne faut pas non plus que le site se transforme en machine à cliquer. Chaque page doit retenir le visiteur en offrant un espace qu’il peut identifier et situer immédiatement par rapport au reste du site. Si ce n’est pas le cas, il faut revoir la copie !

Plan de cours

A l’issue de cette série de billets , je proposerai un plan de cours sur cinq jours pour l’apprentissage de HTML & CSS auprès d’un public de débutants plus ou moins avancés. Cette formation devrait être idéale pour les webdesigners ou les graphistes voulant aller plus loin que le mode «Aperçu» de Dreamweaver ;-).

Exemple pour la première journée :

  1. Lundi

    Matin :

    • Présentation rapide de l’objectif de la formation : exemple de page web à assembler le dernier jours #1,
    • Qu’est-ce que le web (les grands jalons historiques),
    • Qu’y trouve-t-on, (sites web, les blog, pages perso, intranet),
    • La relation client-serveur (comment ça marche, les protocoles utilisés).

    Après-midi :

    • Présentation détaillée de l’objectif de la formation : exemple de page web à assembler le dernier jours #2,
    • Présentation des briques composant l’exemple de la page web sur un support papier distribué aux apprenants,
    • Présentation du code source commenté de la page web en isolant bien chaque brique et en indiquant où elle se situe sur le support papier.

C’est tout pour le moment ;)

PS — Ah, j’oubliais : n’hésitez pas à me contacter pour que nous discutions ensemble de votre projet de formation, que vous soyez débutant, ou pas.

 

Articles sur le même sujet

flattr this!

]]> http://css.4design.tl/formation-integrateur-html5-css3/feed 3 Une solution CSS accessible pour remplacer du texte HTML par une image http://css.4design.tl/solution-css-accessible-remplacer-texte-html-par-image http://css.4design.tl/solution-css-accessible-remplacer-texte-html-par-image#comments Thu, 17 Feb 2011 08:09:57 +0000 Bruno Bichet http://css4design.com/?p=9192 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.

Une solution satisfaisante devrait permettre de garder un document intelligible lorsque les feuilles de styles et les images sont désactivées, mais aussi lorsque l’une ou l’autre seulement est active. Pour cela, il suffit de placer le texte en question derrière l’image via la propriété z-index pour jouer avec la profondeur. De cette manière, le texte apparait lorsque les images et/ou les feuilles de styles CSS ont été désactivées par l’( agent ) utilisateur.

Marquage HTML & CSS

Voici un exemple que j’ai testé en situation réelle pour m’assurer que cette solution n’entrainait pas d’effets de bord sur le reste de la page. Voici donc la partie de l’en-tête avec un logo et une description en mode texte, et une image en dur pour avoir un bon vieil attribut alt des familles comme on les aime ! 

<header>
    <hgroup>
        <h1 id="logo"><a href="/" rel="home">Salut, c'est moi : logo !</a></h1>
        <h2 id="motto">Salut, c'est moi : motto !</h2>
    </hgroup>
    <div id="banner">
        <a href="/"><img src="images/logo.png" alt="CSS & Webdesign" width="940px" height="150px"></a>
    </div>
</header>
header {
    position: relative;
    height: 170px;
}
hgroup {
    position: absolute;
    z-index: 1;
    top: 25px;
    left: 1px;
}
#banner {
    position: absolute;
    z-index: 2;
}
Dans un premier temps, la déclaration position: relative sur l’élément header permet de placer hgroup et #banner en position absolue par rapport à header et non au Viewport. La valeur de height: 170px remplace la hauteur qu’aurait du avoir header si les éléments qu’il contient n’avait pas été sortis du flux par le positionnement absolu.

Les éléments hgroup et #banner sont positionnés de manière absolue pour permettre d’utilisation de la propriété z-index. Quant à hgroup, il est en z-index: 1 pour permettre aux liens qu’il contient de rester cliquables (ce qui ne serait pas le cas, s’il leur z-index était inférieur à zéro).

L’image contenue dans #banner est en z-index: 2, ce qui la place au-dessus des éléments contenus dans hgroup. Le décalage en top et left sert à positionner précisément hgroup derrière l’image, selon ses dimensions. Le left: 1px empêche les serifs de certaines polices de caractères de dépasser de l’image.

Aperçu du composé HTML & CSS en images

Après le code, voici le résultat des courses en image avec les différentes cas de figure que l’on peut rencontrer :

  1. Avec CSS et images,
  2. Avec  image sans CSS,
  3. Sans image mais avec CSS,
  4. Sans image et sans CSS.

CSS et images activées

Le logo texte et la description se retrouve derrière l’image conformément à leurs propriétés z-index respectives.

Fig. 1 : CSS et images activées. Cliquez pour agrandir l'image.

Avec images sans CSS

L’absence de CSS annule les propriétés de positionnement dans le flux et d’empilement des éléments.

Fig. 2 : image activée, CSS désactivée. Cliquez pour agrandir l'image.

Sans images avec CSS

Si les images sont désactivées, les propriétés position: absolute et z-index continuent de jouer leur partition.

Fig. 3 : CSS activée, image désactivée. Cliquez pour agrandir l'image.

Sans image et sans CSS

Le grand jeu ! Voici le header en l’absence de toute fioriture : plus d’image et plus de CSS !

Fig. 4 : image et CSS désactivées. Cliquez pour agrandir l'image.

Conclusion

Cette solution est loin d’être parfaite, notamment en raison de l’utilisation du positionnement absolu dont je ne suis pas fan ou du moins que j’évite en général pour les éléments structurels d’une page. Il existe certainement d’autres manières de placer du texte derrière une image en faisant en sorte que l’accessibilité des uns et des autres ne soit pas compromise.

Merci à Sébastien Delorme et à Sylvain Fix qui ont inspiré ce billet grâce à leurs commentaires.

A suivre :-)

Articles sur le même sujet

flattr this!

]]> http://css.4design.tl/solution-css-accessible-remplacer-texte-html-par-image/feed 16 Lancement de Dotpress.fr «point presse» de vos communiqués d’entreprise http://css.4design.tl/dotpress-les-communiques-de-presse http://css.4design.tl/dotpress-les-communiques-de-presse#comments Fri, 05 Nov 2010 18:58:54 +0000 Bruno Bichet http://css4design.com/?p=7916 Je viens de lancer mon nouveau site spécialisé dans la publication de communiqués de presse pour les entreprises et les particuliers. Encore un site pour publier des communiqués de presse ? Oui, mais à la mode de Bruno les bons tuyaux, c’est-à-dire avec un plus-produit aussi simple qu’innovant : réécrire les communiqués de presse pour publier des articles originaux. Autrement dit, je mets en ligne sur Dotpress.fr des contenus non dupliqués (ce qui est plutôt rare car le CP est généralement envoyé à l’identique aux journalistes). L’objectif est d’être bien référencé par les moteurs de recherche pour donner le maximum de Link Juice aux liens qui pointent vers les contenus «corporate» que l’on me confie.

Dotpress, what else?

A côté du site Dotpress.fr, j’ai lancé @dotpress pour assurer le relais des publications sur Twitter et partager mes réflexions et mes découvertes sur ce monde à explorer… N’hésitez pas à vous abonner à ce nouveau compte Twitter ainsi qu’au flux RSS de Dotpress pour ne rien rater :-)

Certains se souviennent peut-être qu’à l’origine de l’achat du nom de domaine dopress.fr, j’avais le projet de créer un thème magazine disponible à la fois sur Dotclear et sur WordPress, genre un thème pour les rassembler tous. Depuis, de l’eau a coulé sous le tapis de souris et le projet est passé à la trappe pour renaitre aujourd’hui sous une forme totalement différente.

WordPress, what else?

Sans surprise, j’ai conservé WordPress comme CMS. J’ai laissé le thème Twenty Ten en attendant de finaliser la maquette. Je préfère avoir une idée plus précise de la diversité des contenus pour me décider sur certains éléments-clés, comme le nombre, la taille et l’emplacement des visuels ou l’importance des textes. Sans parler de la largeur des différents formats des encarts AdSense ! Par ailleurs, j’aurais ainsi le temps d’étudier de plus près de quel bois se chauffe WordPress 3 pour analyser ce qui se trouve sous le capot !

Direction artistique et design

La Direction artistique avait pour mission de coller à l’idée de travail manuel en s’inspirant de l’ambiance des ateliers d’imprimerie à l’époque de Gutenberg, où les caractères étaient posés un à un pour composer des mots, puis des phases, puis des choses à lire. L’encre n’est pas totalement sèche, quelques gouttes parsèment le plan de travail pour évoquer la notion de Work in Progress.

Pour le design, je suis resté fidèle à ma grille de 942 pixels de large, déjà utilisée sur ce blog et dont le nombre de colonnes non divisible par 3 oblige à une asymétrie rafraichissante. L’interlignage de 21 pixels représente la moitié de la largeur d’une colonne, ce qui permet — au cas où cela serait nécessaire — d’harmoniser le nombre de lignes avec la hauteur des images, en plus d’aérer le texte.

Rendez-vous sur Direction artistique et Design pour plus d’information sur la différence entre intention et exécution quand on parle de graphisme.

Aperçu de la maquette avec affichage de la grille pour déterminer la taille et l’emplacement des blocs.

Première ébauche sur Illustrator. Cliquez pour agrandir l'image.

Aperçu de la même maquette sans la grille en espérant qu’elle se fasse un peu oublier ;)

Même chose sans la grille de mise en page. Cliquez pour agrandir l'image.

Typographie

En fonction de la police de caractère retenue (probablement Georgia), le texte sera composé en 13/21 ou 14/21, soit un rapport de 1,618 d’une part ou 1,5 d’autre part, respectant dans les deux cas un ratio proche du nombre d’Or (absolu dans le premier cas et typographique pour le second). Quant à la grille elle peut encore évoluer vers une solution un peu plus modulaire à laquelle je réfléchis.

Pour les titres, j’utiliserai IM Fell DW Pica SC et IM Fell DW Pica pour les hors-textes. Ces fontes devraient se «fondre» idéalement dans le décors.

Logotype

Pour le logo, j’ai fais simple en mettant l’accent sur le terme «press» qui possède la même couleur que le paragraphe d’introduction, sur lequel il est aligné. Le terme «dot» est quant à lui de la même couleur que le titre des articles sur lesquel il est aligné pour guider le regard vers le plus important.

Pour le reste, j’ai joué sur la notion de «point presse» suggéré à trois reprises de manière plus ou moins cryptique à mesure qu’on regarde vers la droite.

En attendant…

Bref, comme d’habitude, je m’en remets à votre jugement, parfois bienveillant, souvent lapidaire, toujours intéressant, sans lequel mes blogs ne seraient pas ce qu’ils sont :-)

N’hésitez pas à proposer vos communiqués de presse sur http://dotpress.fr

Retrouvez les liens cités dans l’article

Articles sur le même sujet

flattr this!

]]> http://css.4design.tl/dotpress-les-communiques-de-presse/feed 10 Grille de mise en page, « zoning » et gabarit avec Adobe InDesign http://css.4design.tl/indesign-grille-mise-en-page-zoning-gabarit http://css.4design.tl/indesign-grille-mise-en-page-zoning-gabarit#comments Thu, 28 Oct 2010 08:18:06 +0000 Bruno Bichet http://css4design.com/?p=7717 Après les croquis réalisés plus ou moins rapidement sur un coin de table face au client ou de retour à l’atelier, il est parfois nécessaire de passer à une phase plus industrielle afin de réaliser les maquettes « fil de fer » de la Home et des pages intérieures. Illustrator et Fireworks ont beaucoup d’atouts pour faire les Wireframes d’une page Web, mais InDesign n’est pas en reste. Il permet de mettre en place une grille dès la création d’un nouveau document. Dans la suite de cet article, nous verrons comment créer un colonage compatible avec votre framework CSS préféré et utiliser les gabarits InDesign pour les différentes déclinaisons des pages de votre site Internet.

Préparer InDesign

Ouvrez Préférences (Ctrl + K) > Unités et incréments et modifiez les unités horizontales et verticales de la règle pour passer des millimètres (mm) aux points (pt) (à la résolution de 72 ppp, un point équivaut à un pixel). Reste à déterminer la largeur du plan de travail : dans les exemples qui suivent, j’ai choisi un design d’une largeur de 942 pixels pour 16 colonnes avec une gouttière de 18 pixels, mais n’hésitez pas à utiliser les valeurs de votre framework CSS.

Créer les colonnes

Avec InDesign, quelques réglages suffisent pour mettre rapidement en place une grille magnétique.

Boite de dialogue Nouveau document InDesign.

Selon votre framework CSS, choisissez le nombre de colonnes et la largeur de la gouttières qui les séparent. Pour finir, mettez les marges à zéro.

Notez qu’il est possible de créer un document à la taille du Viewport (ex. 1024). Pour obtenir un document hors marges de 942 pixels, utilisez la formule suivante : largeur du Viewport moins celle du framework et divisez le résultat par deux pour obtenir la valeur des marges gauche et droite. Exemple : (1 024 – 942) / 2 = 41.

N’oubliez pas de cliquer sur Enregistrement prédéfini… pour enregistrer votre plan de travail.

Modifier la la ligne de base

Pour affiner la grille il est peut s’avérer utile de matérialiser la ligne de base en fonction de l’interlignage que vous avez choisi pour le corps du texte. J’ai opté pour un corps de 13 pixels avec un coefficient multiplicateur de 1,6 (pour tutoyer le nombre d’Or) ce qui donne un interlignage de 21 pixels (en arrondissant à l’entier supérieur).

Pour cela, je vais dans les préférences du logiciel Ctrl + K > Grilles et je règle le pas sur 21 pt. J’en profite également pour augmenter la valeur pour améliorer le magnétisme des repères pour faciliter le placement des blocs.

Il est toujours utile de visualiser la ligne de base de votre document.

Modifiez la grille de la ligne de base dans Préférences > Grilles

Gabarits de page avec InDesign

Si InDesign facilite la mise en place d’un système de mise en page en colonnes pour placer vos différents modules, il permet aussi de créer des gabarits réutilisables et c’est assez cool.

Profitez des modèles de pages modifiables d’InDesign !

La fenêtre Pages d'InDesign pour créer et appliquer un gabarit à une page.

A partir d’un zoning comprenant le header, le menu principal et le footer qui se répètent sur toute les pages comme autant de fichiers inclus, il est possible de créer plusieurs variantes d’une page selon les différents modèles de votre projet Web.

(In)Design Web ?

Après quelques tests rapides, je trouve qu’InDesign est une aide précieuse pour mettre au net les croquis et commencer le zoning d’un site. Pourquoi ne pas s’en servir pour faire une maquette plus fouillée en assemblant des éléments en provenance de Photoshop ou d’Illustrator avant d’intégrer le tout dans le navigateur ?

Bref, InDesign semble l’outil idéal pour se rappeler que dans Webdesign il y a aussi «design» avec tout ce que cela comporte de travail sur les blancs tournants, les volumes et la typographie.

Liens complémentaires

Articles sur le même sujet

flattr this!

]]> http://css.4design.tl/indesign-grille-mise-en-page-zoning-gabarit/feed 17 Les frameworks CSS sont le nouveau format A4 http://css.4design.tl/framework-css-format-a4 http://css.4design.tl/framework-css-format-a4#comments Tue, 26 Oct 2010 05:53:10 +0000 Bruno Bichet http://css4design.com/?p=7694 Les logiciels de création graphique proposent un menu Fichier avec une entrée Nouveau pour créer un nouveau document en réglant des paramètres comme la taille, la couleur de fond, le nombre de couleur, la résolution, etc. J’ai déjà abordé la question des paramètres par défaut pour le Webdesign dans l’article Quelques notes sur les grilles de mise en page et je me demande aujourd’hui dans quelle mesure les frameworks CSS peuvent être considérés comme l’expression des réglages de base pour commencer la création d’un site Web ?

On a toujours besoin d’un standard pour travailler

Quand on y réfléchit, on trouve un format de base dans tous les logiciels et personne ne se pose la question de savoir si le format par défaut proposé par Word ou OpenOffice représente un frein à notre créativité littéraire.

Les formats des feuilles de papier pour les documents destinés à l’impression sont très variés, mais dans la majorité des cas vous choisissez le format « A4 » car c’est celui qui est pris en charge par votre imprimante et tout un éco-système qui va des chemises cartonnées aux cartables en passant par les boites de rangement. D’ailleurs, le format international issu de la norme ISO 216 qui nous a donné le format A4 est utilisé dans tous les pays du monde, sauf aux Etats-Unis et au Canada (source : Wikipédia).

Une seule largeur pour les gouverner tous ?

Vous pensez peut-être que sur le Web la diversité des configurations matérielles interdit justement l’imposition d’un format unique ? En théorie, c’est le cas, mais la pratique et l’observation nous apprennent que 99% des sites Web sont conçus pour entrer dans une largeur de 1024 pixels, ce qui nous donnes des largeurs moyennes utiles proches des 960 pixels que l’on trouve dans de nombreux frameworks CSS.

Choisissez votre framework CSS !

Dans une certaine mesure, les formats proposés par les frameworks CSS remplissent le rôle d’une configuration par défaut pour produire des sites Web comme on produit du texte avec OpenOffice… et ce n’est pas mal : les thèses estudiantines méritent autant que les ouvrages d’art le droit d’exister ! Il en va de même pour les sites web : certains sont «utilitaires» et d’autres à vocation artistique. Pour vous guider dans le labyrinthe des solutions disponibles, voici plus de 30 frameworks CSS commentés qui vous permettront de choisir les réglages par défaut les plus proches de vos besoins. Si vous n’arrivez pas à trouver chaussure à votre pied, l’application Air Boks vous permettra de déterminer le pas de votre grille et bien d’autres choses encore.

Articles sur le même sujet

flattr this!

]]> http://css.4design.tl/framework-css-format-a4/feed 13 #WDFR — Imprimez votre grille pour dessiner vos croquis http://css.4design.tl/wdfr-impression-grille-dessin-croquis-maquette http://css.4design.tl/wdfr-impression-grille-dessin-croquis-maquette#comments Fri, 22 Oct 2010 16:47:10 +0000 Bruno Bichet http://css4design.com/?p=7652 Le dernier thème du WDFriday (#wdfr sur Twitter) était consacré aux croquis, maquettes et autres fils de fer (Wireframe) qui précèdent souvent le travail sur un logiciel de création comme Illustrator ou Photoshop. J’ai toujours un petit calepin à carreaux de 5 mm de côtés pour prendre des notes graphiques. Comme j’utilise une grille dans Illustrator bien au chaud dans un calque « grille » verrouillé, je me suis dit qu’il serait intéressant de l’imprimer en plusieurs exemplaires pour m’en servir de support. Pour les croquis, je me contente d’imprimer cette grille à 50% de sa taille réelle pour ne pas gâcher inutilement l’encre et le papier (petit geste écolo). Je réserve l’impression en taille réelle pour les maquettes grandeur nature (Mockup) sur lesquelles je peux utiliser des post-it pour placer et déplacer mes éléments à volonté.

942.css : ma grille de mise en page

J’utilise souvent la grille de mise en page créée à l’occasion du redesign de ce blog : 16 colonnes de 42 pixels, gouttières de 18 pixels, largeur totale de 942 pixels. L’interlignage de 21 pixels représente 1,6 fois la taille du caractère de base (13 pixels) arrondi à l’unité supérieure. Le nombre d’Or est basé sur des rapports de 1,618 et bien que l’on considère souvent que 1,5 est le nombre d’Or typographique, j’ai gardé le ratio 1,6 car l’interlignage de 21 pixels représente exactement la moitié de mon module de base de 42px de côté. Hasard, je ne pense pas ^__^

Pour vous inspirer pendant les longues soirées d’hiver pourquoi ne pas lire 500 grilles et feuilles de style pour l’imprimé et le Web de Graham Davis ou imprimer l’un des 10 modèles pour Wireframe ?

Adapter votre grille pour l’impression

Après la phase du croquis, il peut être utile de marquer les regroupements de colonnes pour faciliter la création des maquettes (page d’accueil, pages «intérieures», etc.). On peut tout aussi bien imprimer des blocs de couleurs différentes à la tailles des colonnes pour les placer sur la grille. En ce qui concerne les couleurs, lors de l’impression, j’utilise des couleurs plus légères pour dessiner par dessus.

Avec Illustrator, la création d’un gabarit de mise en page pour faire des croquis ou des maquettes est très simple : Objet >Transformation > Déplacement (ou Maj + Ctrl + M).

Cliquez sur l'image pour voir la grille en taille réelle (1024x1024)

Le « fold » ou la partie émergée de l’iceberg

En plus des colonnes et de l’interlignage, j’ai ajouté quelques éléments à cette grille de base : l’indication de la hauteur du viewport vu de mon Netbook de 10.2 pouces et de mon écran 19 pouces. Pour les visualiser, j’ai placé des repères de chaque côté de la grille, à 420 pixels et à 714 pixels.

Cette matérialisation du fold est utile pour voir les éléments qui seront visibles sans nécessiter de scroll, même s’il faut garder à l’esprit qu’il y a de la vie en dessous de 600px ! La zone des 300px à partir du haut de la page est la plus regardée. Les éléments les plus importants devraient se situer au-dessus du fold mais sans sacrifier le bas de la page qui doit rester attrayant. Il est utile de placer des éléments à cheval sur deux zones pour inciter l’utilisateur à descendre jusqu’au pied de page.

En bref

J’espère que vous n’aurez pas perdu votre temps à la lecture de cette astuce simple mais terriblement efficace qui évite de passer trop de temps à faire des ajustements techniques dans les logiciels de création graphique. J’ai par exemple des difficultés à ne pas aligner parfaitement mes éléments sur Illustrator, alors qu’un placement approximatif serait suffisant dans la phase de recherche.

N’hésitez pas à partager les trucs que vous utilisez au quotidien pour vous faciliter la vie de webdesigner !

Articles sur le même sujet

flattr this!

]]> http://css.4design.tl/wdfr-impression-grille-dessin-croquis-maquette/feed 4 Frameworks CSS + Mockup = Mockup CSS http://css.4design.tl/framework-css-mockup-prototypage-rapide http://css.4design.tl/framework-css-mockup-prototypage-rapide#comments Wed, 20 Oct 2010 13:45:30 +0000 Bruno Bichet http://css4design.com/?p=7455 Les développeurs n’aiment pas les frameworks CSS et les graphistes n’aiment pas l’idée de travailler avec une grille de mise en page. Mais ça ne m’empêche pas de leur trouver un intérêt (aux FW, aux dévs et aux créas). Je suis certainement une espèce mutante, le chainon manquant entre les matheux (le code n’est poétique que dans WordPress ^^) et les graphistes ! Pour autant, je ne pense pas que les frameworks CSS doivent être utilisés partout ou que le design dans le navigateur remplacera votre graphiste ou votre logiciel de création préféré. Il s’agit d’une méthode de travail qui s’ajoute aux précédentes ; elle ne prétend pas s’y substituer. L’article Framework CSS — Sémantique, maquette dynamique et autres notes vous permettra de défricher le terrain sur leur utilisation et leurs avantages.

Framework CSS ?

Les frameworks CSS sont généralement composés d’un ou plusieurs fichiers prenant en charge les différents aspects de la réalisation d’une page (grille, typographie, formulaires, tableaux, etc.) dans le but de faciliter le placement des blocs sur la page et d’harmoniser les styles typographiques selon une grille horizontale.

The Simpler Grid — 12 colonnes «A la une» de 60px avec une gouttière de 20px pour une largeur totale de 940px. Choisissez votre Framework CSS parmi les 30 solutions disponibles.

Les Frameworks CSS proposent un environnement de travail réutilisable et compatible avec la majorité des navigateurs.

Mockup ? (non, ça ne se fume pas)

Un Mockup est une maquette grandeur nature qui permet d’avoir une idée sur la manière dont les fonctionnalités prévues par le cahier des charges (cf. le périmètre des fonctionnalités) vont se concrêtiser. Selon les projets, il peut s’agir d’un croquis réalisé à main levé pendant le rendez-vous avec le client ou d’une version plus élaborée une fois que vous êtes de retour à l’atelier.

Voici un échantillon tiré des 40 Brilliant Examples of Sketched UI Wireframes and Mock-Ups qui devraient vous plaire et vous inspirer.

D'autres croquis sur http://www.flickr.com/photos/43641156@N02

Un logiciel comme Balsamiq Mockups propose plusieurs dizaines de contrôles et plus d’une centaine d’icônes pour représenter les éléments que l’on trouve habituellement sur une page web (menus déroulants, onglets de navigation, blocs de texte, listes, formulaires, login, etc.).  Je les trouve plutôt ennuyeux à utiliser et je préfère poser mes idées dans un bloc-note. Toutefois, ils peuvent être utile si les maquettes doivent circuler dans le flux de production et être modifiées par différents intervenants.

Pour faire un zoning ou une maquette plus précise, j’utilise généralement Illustrator, mais il semble que Fireworks ait plus d’un tour dans son sac. Rapid prototyping in Fireworks CS3 est un tutoriel en français qui explique comment utiliser les fonctionnalités de prototypage rapide apparues dans la version CS3 de la Suite Adobe. Lire également les article de SuperFiction sur les Wireframes.

Framework CSS et prototypage rapide

Partant de l’idée que l’intérêt premier des frameworks est de proposer une méthode pour placer rapidement des blocs sur la page, pourquoi ne pas les utiliser pour le zoning et la maquette fil de fer (Wireframe) ? Les différents objets censés représenter les éléments d’une page web seraient visibles sous leur forme native : les menus déroulants pourraient se dérouler et les diaporamas, diaporamer ! En attendant que les contenus définitifs vous parviennent, il existe du faux texte prêt à l’emploi à base de Lorem Ipsum enveloppé dans différents marquages HTML. Lire les billets traitant des Frameworks CSS sur css4design.

Conclusion

En permettant de modifier rapidement et simplement la largeur et l’emplacement des différents blocs, les frameworks CSS et le design dans le navigateur (au moins en ce qui concerne la maquette) procurent des avantages à l’équipe de développement, mais aussi au client qui pourra manipuler la maquette à l’échelle 1:1 ET en direct-live : il n’est plus obligé de regarder son futur site avec les yeux, mais il peut le toucher avec la souris ! En s’appropriant ainsi sa maquette, il devrait être plus enclin à fournir les contenus pour voir ce qu’ils donneront in situ.

Liens complémentaires

Articles sur le même sujet

flattr this!

]]> http://css.4design.tl/framework-css-mockup-prototypage-rapide/feed 13