css 4 design » Quelques notes

Quelques notes — Programme de formation HTML & CSS

Bruno Bichet — Wed, 04 Jan 2012 12:01:47 +0000

Les langages du web HTML et CSS sont généralement structurés autour de concepts qui ont peu à voir avec la manière dont ils seront utilisés. Ce qui est normal après tout : les concepteurs ne sont généralement pas les auteurs. Il appartient à ces derniers de tâtonner un peu, beaucoup ou passionnément et d’en parler avec leurs voisins pour connaitre les bonnes pratiques du jour. Pour dire les choses autrement, les langages du web ne sont pas livrés avec «le» mode d’emploi. La plupart des tutoriels que l’on trouve sur le web reprennent généralement le découpage que l’on trouve dans les spécifications du W3C.

Si les spécifications sont très utiles pour comprendre la nature des ingrédients (balises HTML et propriétés CSS), elles ne nous disent pas grand chose sur la manière de les mettre en oeuvre pour réaliser un site web. S’il n’existe pas de recette toute faite, c’est certainement à cause des plats (les contenus) qui sont uniques.

Enfin, en même temps, on ne peut pas ne pas constater que les sites Web sont à 90% composés de :

En-tête pour : logo, baseline, visuel, un ou plusieurs menus de navigation,
Zone de contenu principale : texte, image, vidéo,
Une, deux ou trois barre latérales (Sidebar) à droite, à gauche de la zone de contenu,
Pied de page (Footer).

Depuis quelques temps, je réfléchis à la mise en place d’un plan de cours pour l’apprentissage du couple HTML & CSS. Dans l’idéal, cette formation devrait être :

Assimilable rapidement par les débutants qui n’ont jamais vu une balise HTML ou une règle CSS,
Convainquante pour inciter les créatifs à se pencher sur les notions d’intégration web,
Intéressante pour ceux qui utilisent ces langages dans leur vie professionnelle ou en amateur (dans le noble sens du terme).

La plupart des plans de cours sur le sujet séparent souvent l’étude du HTML des CSS. J’aimerais mettre en place une méthode globale s’inspirant (très librement) de la Programmation Orientée Objet (POO), en initialisant un super objet — le site web — englobant d’autres objets comme le header, la sidebar, les menus et les différentes zones de contenu que l’on trouve généralement dans un site internet ou sur un blog (titres, sous-titres, paragraphes, liste, etc.). A cet égard, HTML 5 permet d’aller dans ce sens avec les balises header, nav, article, aside, footer.

CSS et HTML sont dans un bateau…

Sans le HTML, les CSS ne servent à rien. Dans la pratique, on rencontre rarement HTML sans CSS. Au lieu d’aborder les deux langages de manière séquentielle, j’envisage de démarrer par la mise en place d’un vocabulaire de base qui fournirait les briques élémentaires nécessaires à la construction d’un site web. Cela pourrait s’effectuer en abordant les deux langages simultanément tout en ajoutant les notions d’ergonomie et d’accessibilité : les bonnes manières s’apprennent dès le début.

Ces briques seraient composées de bouts de code, de module, de composés HTML & CSS «prêts à l’emploi» à expliquer aux apprenants par le biais d’exercices pratiques qui débuteraient le plus tôt possible dans la formation. L’apprenant serait ensuite invité à assembler ces briques pour construire une page web. Le formateur fournissant à cette occasion les indispensables conseils, trucs et astuces concernant l’apparence sur les différents navigateurs, l’utilisation des commentaires conditionnels, etc., selon le temps disponible.

Parmi les méthodes proposées dans les commentaires du billet d’Aymeric, nombreuses sont celles qui préconisent de partir du contenu pour commencer l’apprentissage de HTML. Je suis généralement le premier à prendre mon Stabilo ® pour baliser le contenu avant même de prendre une tablette graphique ou mon Notepad++. Toutefois, intégrer le balisage du contenu dans la formation peut s’avérer chronophage et ne pas trouver sa place dans le temps généralement impartie dans les centres de formation où un module de base dure rarement plus d’une semaine.

En outre, indépendamment du contenu, l’immense majorité des sites web partage les mêmes caractéristiques. On pourrait passer beaucoup de temps à lister tous les éléments constituant un site et faire des statistiques pour savoir si tel ou tel élément se retrouve le plus souvent dans le header, la sidebar ou le footer, etc. mais force est de constater qu’à ce niveau, un consensus se dégage : le logo, la baseline et le menu principal se retrouvent dans haut de la page tandis que les informations de contact et de copyright se situent plutôt en bas de la page !

On pourrait donc, dans le cadre d’une formation sur cinq jours, fixer les idées autour des zones que l’on rencontre généralement sur les sites web ou les blogs :

un header (pour le logo, la baseline, la navigation principale et les liens d’évitement),
une zone de contenu…
… associée à une ou plusieurs barres latérales,
avec un footer (contact, crédits, copyright) pour finir.

Ce découpage mélange joyeusement l’analyse fonctionnelle et la présentation, mais présente l’avantage de fixer les idées sur des choses auxquelles les apprenants ont été confrontés, ce qui a son importance.

Pour aborder l’apprentissage des balises et la sémantique qui leur est associée, je propose de partir du logo qui peut être le premier niveau de la page d’accueil (ce n’est pas gravé dans le marbre, cf. 8 composés HTML pour le logo et la « baseline » et leur potentiel SEO). On pourra lui réserver la balise h1 avec un background pour l’image. On pourra masquer le texte d’une manière ou d’une autre.

Partant du principe qu’une zone de menu sera souvent composée avec une liste de liens, il me semble utile de proposer dès le début les méthodes généralement utilisées pour faire flotter les li, transformer les a en bloc, utiliser les images de fonds, etc.

Une zone de contenu secondaire est souvent représentée par une barre latérale placée à droite ou à gauche de la zone de contenu. Pourquoi ne pas introduire directement les notions de positionnement avec float et les positions relative et absolute ? Pour un débutant, ces notions ne sont pas plus difficiles à comprendre que le reste. Je me dis qu’elle seront peut-être même plus rapidement assimilées en les abordant dès le début, même si les notions de contexte de formatage ou de clearing ne sont pas très évidentes au premier abord.

Je reviendrais sur le sujet un peu plus tard selon vos retours. L’objectif est de remplir un programme de formation détaillé sur 5 jours permettant à des personnes ayant des pré-requis réduit au minimum de pouvoir créer une page web «classique».

Pour ne pas conclure

Ce billet est une ébauche que je compléterais au fur et à mesure de mes idées et de vos suggestions. Ce billet traine dans mes brouillons depuis que Aymeric a eu dès 2007 l’excellente idée de synthétiser les commentaires qui avaient suivis son billet sur le plan de formation idéal pour l’apprentissage du XHTML et des CSS que je vous invite à lire sans plus attendre.

Linkographie

Articles sur le même sujet

Quelques notes sur les éléments graphiques du webdesign

Bruno Bichet — Tue, 24 May 2011 16:59:12 +0000

Une fois n’est pas coutume, je vais aborder la question du web design sous l’angle du graphisme, sans considération de langage de développement ou de technique en général. Je n’aborderai pas les questions liées à l’architecture de l’information, à l’ergonomie ou à l’accessibilité. A la place, après un aperçu sur le travail du Directeur artistique et du graphiste, je vous propose une liste commentées des éléments graphiques que l’on trouve de manière récurrente sur les sites web, avec pour chacun un rapide commentaire.

La question du «pourquoi tel élément plutôt qu’un autre ?», rejoint un peu la question posée par Leibniz : «pourquoi y a-t-il quelque chose plutôt que rien dans l’univers ?». A laquelle je ne peux m’empêcher d’ajouter mon grain de sel sous forme de question subsidiaire : «pourquoi tel élément de «design» plutôt qu’un autre ?»

Direction artistique & Web design

Le Directeur artistique détermine le fond du message ; le graphiste s’occupe de la (mise en) forme. Le DA met sa connaissance des codes artistiques des temps passés, présents et futurs pour proposer un univers graphique sans se soucier des contraintes techniques. Quant au graphiste, il rend en quelque sorte «utilisable» le travail du DA en fonction du support et des techniques dont il dispose.

Chacun d’eux porte son attention sur une partie différente des bonnes pratiques liées à son métier. Le DA s’assure que les codes graphiques qu’il a retenus sont adaptés à la marque et à son public. Le graphiste veille à ce que la mise en oeuvre des choix graphiques respecte à son tour les attentes de la marque et du public.

En pratique, le DA évitera généralement de proposer des couleurs vives pour un site web vendant des articles funéraires et que le graphiste s’abstiendra de placer le logo et le champs de recherche en bas de la page. Si ces cas extrêmes sont généralement évités, il n’en reste pas moins qu’il n’est pas toujours évident de choisir entre des coins arrondis ou des angles droits, des dégradés ou des aplats de couleurs, du Stars and Stripes ou du Sex and Sun !

Finalement, la question que je me pose est la suivante : «quand et pourquoi se décide-t-on pour un coin arrondi ou pour un coin carré ?». Cette question est valable pour tout élément ayant un impact sur l’apparence d’une page web. Pour éviter de faire ces choix parfois cornéliens sur un coup de poker, voici quelques éléments de réflexion que j’ai rassemblé ici parce que vous le valez bien :-)

En-tête, bannière et pied de page

Header

Les en-têtes de blogs plus ou moins délirants ont eu leur heure de gloire, mais ont fini par lasser. Ils sont souvent composés d’une image bariolée occupant la largeur du site ou d’une image centrée dans le background débordant largement de la largeur du contenu. On peut voir la première technique dans le thème par défaut de WordPress 3. La deuxième a été popularisée par des sites comme celui de Matt Mullenweg ou Web Designer Wall.

Un bon gros header

Footer

Les pieds de page sont souvent les laissés pour compte du webdesign. Toutefois, la mode des Big Footer leur a redonné une certaine importance, même si au départ, il s’agit surtout d’améliorer le maillage interne en mettant un paquet de liens. Pour faire passer la pilule, les plus créatifs ont utilisé cette zone, peu sexy en général, pour en faire quasiment la vitrine de leur site web. Voici quelques conseils pour optimiser votre Fat Footer (explications en français).

Exemple de big footer simple et graphique à la fois

Big Footer de Soh Tanaka

Colonnes et barres latérales

Il est assez rare de rencontrer un blog ou un site web composé d’une seule colonne. Tout au plus trouve-t-on des thèmes WordPress affichant l’article seul sans les barres latérales. Jusqu’en 2003 environ, les sites web étaient souvent composés d’une zone de contenu entourée de deux barres latérales. Dans celle de droite, on trouvait généralement le champs de recherche et les liens annexes, tandis que la colonne de gauche accueillait la publicités, des listes de liens extérieurs (blogroll), etc.

Les frameworks CSS permettent de créer une système de colonne pour votre site web

The Grid Simpler : une grille simple et souple

Aujourd’hui, la tendance est clairement à une composition en deux colonnes : le contenu à gauche et la barre latérale à droite. Lorsqu’on a besoin d’une deuxième sidebar, elle est souvent située à côté de la première, avec la même largeur, mais pas forcément. L’idée maitresse est de créer une asymétrie graphique. Par ailleurs, la friction monétaire étant ce qu’elle est, cette organisation permet de mettre en avant le contenu pour les moteurs de recherche qui digèrent le code HTML de haut en bas et de gauche à droite (c’est peut-être différent pour les langues qui se lisent de droite à gauche).

Contours et angles

Arrondir les angles ou pas ?

Le modèle de boite du W3C reposant sur des angles droits, l’utilisation des coins arrondis a permis à une époque de sortir du lot. De fait, ils sont utilisés depuis longtemps malgré de nombreux obstacles techniques. L’arrivée de CSS3 et de border-radius, qui rendent accessibles les coins arrondis au plus grand nombre, remettront peut-être les angles droits ou irréguliers à l’honneur.

Cela dit, l’origine de l’engouement pour les bords arrondis est à chercher du côté symbolique. L’arrondi est une forme organique qui donne une impression de proximité affective. Il a un pouvoir immersif qui s’adresse au cerveau droit et joue sur l’émotionnel. A l’opposé, le coin carré s’adresse plutôt à la raison, à l’intellect.

L’arrivé de border-image avec CSS3 devrait élargir les possibilités créatives, en se rapprochant de ce que l’on trouve dans Illustrator, par exemple.

Rubans (ribbons)

Ils ont pratiquement toujours existés et le web ne cesse d’inventer de nouvelles formes dont le but est d’ancrer le ruban dans la page tout en le faisant ressortir. Force est de constater que les derniers rubans à la mode en provenance du monde anglo-saxon (oui, le jour où les graphistes francophones cesseront de se croire le nombril du monde…) réussissent ce tour de force.

Ombres portées

Elles ont toujours fait partie du paysage graphique autant en PAO et sont apparues sur le web dès que cela a été possible. D’abord en utilisant des cellules de tableau, puis avec des balises div imbriquées et enfin, depuis peu, avec les propriétés CSS3 box-shadows et text-shadows.

Bords déchirés

On voit relativement peu de contours déchirés ou de bords irréguliers, malgré leur fort potentiel graphique.

backgrounds

Fond blanc

Associé à du texte (presque) noir, le fond blanc présente le meilleur rapport de contraste que l’oeil puisse trouver. Il s’agit généralement de la couleur de fond de page par défaut des agents utilisateurs depuis plusieurs années. C’est une valeur sûre qui ne devrait être modifiée qu’après mûre réflexion ;-)

Aplat de couleur

L’utilisation des aplats de couleur permet de faire ressortir une partie du texte tout en lui conférant une certaine puissance. Si en peinture, l’obtention d’un à-plat digne de ce nom n’est pas une sinécure, il n’en va pas de même pour la PAO ou le web où il suffit de saisir une valeur pour obtenir en beau «noir au blanc». Les sites web des années 2000 faisaient un large usage des aplats, tandis qu’aujourd’hui leur emploi est réservé à des petites portions de texte, comme des titres ou des encarts. Il peuvent être utilisés pour signaler les hors-textes en lieu et place des guillemets géants qui commencent à lasser un peu (mais c’est joli quand même).

Dégradés

Si les aplats de couleur sont roboratifs, les dégradés se digèrent plus facilement. Toutefois, ils restent peu utilisés sur le web à part dans les backgrounds en haut de page pour ancrer l’en-tête du site dans la fenêtre du navigateur. Ils devraient trouver une seconde jeunesse grâce à la nouvelle propriété gradient apparut avec CSS3. Attention à l’overdose : ces effets sont à utiliser avec parcimonie.

Zébrures (Stripes)

Les fonds hachurés ont eu leur heure de gloire dans les années 2005 — 2006 mais ils n’ont pas totalement disparus. Comme les dégradés, ils permettent d’utiliser une couleur de fond tout en restant léger. Il peuvent être orientés de plusieurs manières et présenter des tailles de zébrures variables. (cf. Des fonds hachurés avec la positive attitude).

Tartan

Le tartan est une autre manière de remplir un fond sans agresser l’oeil. Peu employé, il pourrait reprendre du poil de la bête. Voici un générateur de tartan au cas où vous voudriez prendre de l’avance.

Images

les visuels «Full Background» sont généralement à éviter, mais si votre produit ou votre thématique nécessite une immersion du visiteur dans votre univers, foncez ! L’essentiel est de garder un oeil sur la lisibilité d’ensemble. C’est certainement très subjectif, mais je trouve que les sites utilisant des images généreuses sur un fond noir avec du texte clair s’en sortent mieux que ceux qui utilisent des grandes images sur un fond blanc avec du texte noir ^^

Background « bruité »

Ces backgrounds utilisant généralement la fonction Filtre > ajout de bruit de Photoshop remplacent avantageusement les dégradés lorsqu’il s’agit de donner un peut de matière et de profondeur à la page. Avec l’option bruit gaussien, les raccords entre plusieurs fond bruités sont un jeu d’enfant.

Fonds artistiques

Parmi les fonds plus ou moins artistiques — qui sont de plus en plus utilisés –, j’aime beaucoup celui de All For Design qui parvient à conserver un bon niveau de lisibilité malgré le faible contraste entre la couleur du fond et le texte.

C’est tout pour le moment

Cet article devrait trouver une suite avec quelques notes sur l’utilisation des textes, des illustrations, des palettes de couleurs, etc. N’hésitez pas à partager vos impressions ou à fournir toute information complémentaire susceptible de faire avancer le «schmilblick» :-)

Articles sur le même sujet

Quelques notes sur les fonctions de l’intégrateur web et de l’intégratrice web

Bruno Bichet — Tue, 05 Apr 2011 11:54:49 +0000

Parmi les nombreux intervenants dans la chaine de production des métiers de l’internet, l’intégrateur web est sans doute celui qui se cherche le plus. C’est le «vilain petit canard» de l’Open Space. Souvent coincé entre les graphistes et les développeurs web, il peut se sentir à l’étroit. Placé au bout de la chaine, de nombreuses erreurs de conception faites en amont lui tombent dessus, à commencer par les délais. Le retro-planning donne souvent l’impression d’avoir zappé le temps nécessaire à «l’intégration». Pourtant, l’intégrateur HTML & CSS est une ressource précieuse que toute entreprise sérieuse devrait valoriser. C’est le garant de la qualité globale du site mis en ligne, du respect de la charte graphique à l’expérience utilisateur en terme de performance d’affichage des pages.

L’intégrateur web en milieu naturel

Selon les entreprises, en dehors de sa responsabilité évidente relative au bon affichage du site sur l’ensemble des navigateurs, il gère les «oublis» en matière de référencement et d’optimisation «SEO» pour les moteurs de recherche (pléonasme !) en remplissant les balises alt ou certains attributs title. Il peut même aller jusqu’à améliorer la densité des mots-clés présents dans les titres des articles. C’est dire son implication dans la réussite de l’entreprise.

Par ailleurs, sa passion du web et son goût pour l’accessibilité lui permettent de rendre votre site web accessible au plus grand nombre. Avec un peu d’expérience, votre intégrateur web pourra facilement devenir un chef de projet web capable de faire travailler ensemble graphistes et développeurs web.

Enfin, et c’est le plus important, l’intégrateur web, en fonction des composés HTML & CSS qu’il emploi et des bonnes pratiques qu’il observe lors de l’intégration des différents fichier Javascript, a une responsabilité importante en ce qui concerne la maintenance du site dont il intègre les pages. D’après mon expérience, la plupart de l’argent mal dépensé par les entreprises sur le web est lié à une mauvaise conception des pages et à une architecture de site défaillante. N’attendez plus et mettez donc un intégrateur web qualifié dans votre moteur !

Mais qui est donc l’intégrateur web ?

Les définitions concernant l’intégration web insistent souvent sur la découpe et l’intégration de la maquette réalisée par le graphiste. On parle souvent de «montage» de page web, terme qui nous vient du fin fond du monde de l’imprimé et de la PAO…

Définition globale du métier d’intégrateur web

L’intégrateur web produit généralement des pages web à partir d’indications visuelles ou sonores : maquette détaillée dans un logiciel de traitement d’image, croquis à main levée, directives verbales, etc. Il utilise tout code informatique compatible avec les agents utilisateurs (les navigateurs web). Il crée le plus souvent des composés HTML & CSS pour déterminer le fond et la forme des éléments composants la page et peut ajouter de l’interactivité avec les utilisateurs en manipulant le DOM avec ECMAScript. Source : Définir le métier intégrateur web.

L’intégrateur est avant tout un spécialiste des langages HTML et CSS. Produire des pages web consiste à taper du code dans un éditeur texte, à en tester le rendu dans les navigateurs web présents sur le marché et à s’arranger pour que la page web affichée corresponde au brief ou à la maquette.

Dans cette définition, je n’ai pas voulu enfermer l’intégrateur dans le rôle du méchant découpeur de .psd qui monte des pages à la chaine. D’une part, il peut très bien produire une page web (voire même tout un site) directement dans le navigateur d’après un simple croquis, comme j’ai pu le démontrer dans l’article Conception dans le navigateur avec HTML5 & CSS3, et d’autre part, lorsqu’elle existe, cette phase d’exécution pure n’est que la partie émergée de l’iceberg des compétences de «l’inté».

Les profils de l’intégrateur web

Selon le secteur d’activité, la taille de l’entreprise, et la définition de poste, le curseur initialement situé au centre des compétences premières de l’intégrateur web («découpe» de fichiers Photoshop et «montage» des pages) se déplace sur une ligne qui va de l’intégrateur-graphiste à l’intégrateur-développeur :

A gauche du curseur, nous avons le web designer capable de concevoir une charte graphique, de la mettre en œuvre à l’échelle d’un site web, de réaliser le montage HTML & CSS des pages. Ce web designer possède avant tout une forte culture graphique.
Un peu plus vers la droite, le web designer peut également intervenir sur les développements côté client avec Javascript ou côté serveur avec PHP. Variante : le Web designer utilise un CMS comme WordPress pour l’assister dans cette tâche. Celui-ci possède plutôt une culture technique. C’est souvent un ancien webmaster qui a l’habitude de Photoshop.
Au centre, nous trouvons notre intégrateur dont le rôle consiste à découper une maquette fournie (généralement) au format Photoshop et de la transmuter en page web à l’aide de HTML & CSS.
Un peu plus loin vers la droite, nous avons le webmaster chargé initialement de l’intégration des contenus et qui fait naturellement l’intégration HTML & CSS des pages web qu’il ajoute au site. Il intervient également souvent sur la partie PHP.
A droite du curseur, nous avons un développeur PHP dont le sens esthétique ou le goût pour la lisibilité lui permettra d’habiller ses développements PHP avec HTML & CSS3. Généralement adepte de The Gimp, il pourra reprendre le logo du client et placer des éléments graphiques dans sa composition.

→ Lire Je suis « enveloppeur web » moi monsieur et Intégrateur web + graphiste = intégraphiste !

En bref

Les compétences de base de l’intégrateur sont multiples, et ce d’autant plus que ce dernier peut porter plusieurs casquettes allant du graphiste au développeur web. Toute fiche «métier» devrait tenir compte de la spécificité de ce métier qui peut en cacher plusieurs autres ! A ce sujet, je recherche des témoignages d’intégrateurs web sous forme d’un ou deux paragraphes : brève description du travail effectué et place dans le flux de production de l’entreprise, et tout autre élément que vous jugerez nécessaire. Vous pouvez me faire parvenir votre témoignage dans les commentaires ou à l’adresse infographiste[at]gmail[dot]com Merci d’avance o/

Articles sur le même sujet

BlueGriffon — Un éditeur HTML5 & CSS3 WYSIWYG avec des morceaux de Firefox

Bruno Bichet — Sun, 23 Jan 2011 17:58:53 +0000

Après ma longue liste commentée des éditeurs HTML plus ou moins WYSIWYG, voici mes premières impressions sur BlueGriffon. C’est un éditeur HTML complètement WYSIWYG dont l’affichage est confié au moteur de rendu qui équipe le navigateur Firefox. Le créateur s’y connait, puisqu’il s’agit de Daniel Glazman (@glazou pour les intimes) qui travaillait déjà sur Composer, l’éditeur HTML de la suite Netscape, puis sur Nvu dans le cadre de Disruptive Innovations. Il fait partie du groupe de travail de normalisation du langage CSS au W3C : c’est un vrai spécialiste des CSS.

BlueGriffon : un éditeur HTML5 et CSS3 WYSIWYG prêt pour WAI-ARIA pour créer vos pages web directement dans l’éditeur !

«Un éditeur Web dernière-génération basé sur le moteur de rendu de Firefox»

Prêt pour ARIA, HTML5 et CSS3

La particularité de BlueGriffon est d’entrer dans la modernité en prenant en charge HTML5 et CSS3. Il est possible d’appliquer à vos balises HTML un rôles ARIA parmi les 73 options disponibles dans une liste déroulante. Les styles CSS sont accessibles depuis le panneau «Propriétés de style» qui propose d’appliquer les CSS de manière intuitive à l’aide de menus déroulants, de sélecteurs de couleurs, de cases à cocher et d’options à sélectionner.

Bref, on se croirait presque dans Dreamweaver, le support des CSS3 (colonnes, dégradés, ombres portées, etc.) en plus. L’application des styles s’effectue au choix, sur un identifiant, une classe ou un style en ligne. A noter que les styles appliqués depuis les menus déroulants en dehors du panneau de style produisent des styles en ligne, comme le centrage des éléments, par exemple.

Le côté WYSIWYG de BlueGriffon ne vous empêchera pas de basculer vers le mode «Source» pour voir à quoi ressemble le code qui est relativement propre et clair, même si l’on trouve ça et là, des retours chariots intempestifs sous forme de balises BR. J’aurais préféré que le logiciel utilise des paragraphes par défaut, à modifier selon les besoins par la suite.

FontSquirrel et Google Font Directory

BlueGriffon permet de choisir directement les polices de caractère issues de FontSquirrel et de Google Font Directory. Pour le premier, Bluegriffon va même jusqu’à télécharger le kit comprenant la police de caractère choisie sous les différents formats nécessaires pour en garantir l’affichage sur tout les navigateurs, ce qui est très, mais alors très intéressant. D’autant plus que la police de caractère choisie est prévisualisée en Direct live. Je vous recommande fortement la lecture des Bonnes pratiques pour les déclarations @font-face pour aller plus loin sur l’utilisation de de la propriété Font Face.

Extensions

Il est possible d’ajouter des modules externes à BlueGriffon pour la modique somme de 29,26€ TTC jusqu’à la sortie de la version 1.0 : mode plein écran, compteur de mots, insertion de bouts de code en un clic, gestion d’une boite à outils, gestion des formules MathML et LaTeX, gestion des tableaux. Par ailleurs, des gestionnaires de modèle, de projet, de script et de WebFonts sont actuellement en projet.

Pas glop

Cette première prise de contact avec ce logiciel se solde par un avis mitigé : j’ai l’impression que les professionnels du web ne seront probablement pas comblés et que les débutants ne parviendront pas vraiment à faire ce qu’ils veulent, sauf peut-être dans le cadre de la production d’affiches où les effets CSS3 WYSIWYG à base d’ombres portés, de dégradés, etc. feront merveille.

Glop glop

Un des points fort du logiciel est l’application des feuilles de styles externes à l’ouverture d’un document, ce qui rend BlueGriffon intéressant pour modifier les textes contenus dans un document complexe sans se perdre dans les méandres du code. En ce qui concerne la méthode de travail avec un éditeur vraiment WYSIWYG on peut dire qu’après le design dans le navigateur, BlueGriffon inaugure peut-être le design dans l’éditeur HTML. A quand une fusion entre un logiciel comme Gimp et BlueGriffon pour créer et intégrer dans la foulée ?

BlueGriffon en bref

BlueGriffon est disponible au téléchargement pour Linux, Windows et Mac OS,
Reportez les bugs sur Bugzilla,
Informez-vous sur le forum.
Interview de Daniel Glazman par Tristan Nitot.
Compte Twitter de l’application @BlueGriffonApp.

N’hésitez pas à partager vos impressions sur l’intérêt du WYSIWYG en matière d’intégration web en général et sur BlueGriffon en particulier.

Articles sur le même sujet

Webdesign — L’essence précède l’existence (Wireframe, Mockup et Mood Board)

Bruno Bichet — Mon, 17 Jan 2011 09:58:49 +0000

Les processus à l’oeuvre lors de la création d’un site web sont généralement chargés d’affects. Tout semble compliqué alors qu’il ne s’agit souvent que de choses complexes que l’on peut facilement partitionner. Dans le meilleur des cas, la réflexion part d’un brief qui présente la société, le projet, la cible, les attentes, etc. à partir duquel l’équipe créative (ou votre cerveau droit si travaillez seul) doit proposer une ou plusieurs propositions graphiques qui, une fois affinées, donneront naissance à un site Web.

J’ai tendance à considérer ce brief comme un problème — au sens mathématique du terme. Chaque composante du brief est une partie de l’équation à résoudre pour passer au niveau supérieur en attendant d’avoir affaire au boss de fin de niveau ;-) Entre le brief et les propositions graphiques, le concept représente l’équation que les éléments du design devront résoudre. Il faudra ensuite concrêtiser ce concept par des pistes graphiques ou ou des Mood Boards (proposition d’univers graphique) que le client devra s’approprier et valider.

Les graphismes bousculent le planning

Les aspects visuels qui devraient éclore tout à la fin d’un long processus de réflexion bousculent souvent le planning et finissent par occuper le devant de la scène plus souvent qu’à leur tour. Il faut dire que la partie visuelle d’un projet est un des rares aspects d’un site web où le client pense avoir quelques compétences (qui n’a pas de couleurs préférées ?). Par ailleurs, cette partie graphique concrêtise le projet et le rend tangible : dans son for intérieur, le client paie pour le design. Malgré tout, il est important de ne pas s’enfermer dès le début dans une proposition graphique trop marquée. A cet égard, la mise en place de Mood Board ou «panneaux d’humeur» permettra au client de se concentrer sur le fond, sur ce qu’il veut communiquer, plutôt que de s’attarder sur les détails.

Creating a Mood Board

Une seule proposition graphique

On parle souvent de trois propositions : la première qui permettrait au graphiste de se faire plaisir, la deuxième censée correspondre aux besoins du client et la troisième servant de repoussoir au deux autres. Un graphiste peut-il concevoir plusieurs propositions graphiques sur un même sujet ? C’est possible, bien sûr, mais pas souhaitable. Il vaut mieux mettre le paquet sur une seule proposition et affuter ses arguments pour la défendre plutôt que se disperser. Prenons le temps de mieux cerner les besoins du client. Il arrive souvent que ses attentes (un site Web en Flash qui bouge) entrent en conflit avec ses besoins (optimiser la présence du site dans les moteurs de recherche, par exemple). Ce qui ne doit pas vous empêcher d’explorer plusieurs pistes graphiques : il n’y a rarement qu’un seul chemin permettant de résoudre une équation.

Pas de Wireframes

Avant, pendant ou après la phase des recherches créatives, les Wireframes permettent de mettre en lumière l’ergonomie, l’expérience utilisateur et la granularisation de l’information. On peut aussi à cette étape commencer à s’interroger sur la mise en place d’une taxonomie adaptée. Il existe de nombreux outils en ligne (ou hors-ligne) pour faciliter la création de Wire-Frames, même si un crayon et une feuille de papier suffisent largement. Faire des Wireframes peut s’avérer indispensable dans certains projets où les étapes de validation sont longues et/ou impliquent de nombreuses personnes et/ou services différents, mais en général, on peut aisément s’en passer.

The Right Way to Wireframe

Designez dans le navigateur !

A la place, je privilégie le travail dans le navigateur. Pourquoi perdre du temps à dessiner (encore !) une pseudo-maquette quand on peut faire avancer le projet en commençant par le marquage HTML ? Hérésie ? Bridage de créativité ? Que nenni : quand je vois le niveau de détail de certains Mockups, je me dit qu’il reste finalement peu de place pour l’équipe créative. Autant mettre en page le fil de fer directement dans navigateur.

(Innsidia Project - Photo by Hanne Linander)

Cette méthode offre l’avantage de ne pas apprendre un nouveau logiciel pour vos Wireframes. A la place, vous pourrez vous aider de l’un des nombreux frameworks CSS existants. Ils offrent toute la souplesse nécessaires pour ajouter, supprimer, modifier les blocs, qu’il s’agisse de leur taille ou de leur emplacement. Cerise sur le gâteau, lorsque le Mood Board et le Wireframes sont validés, il reste juste un peu de travail d’intégration à faire, et voilà !

Je vous laisse avec l’article Frameworks CSS + Mockup = Mockup CSS pour approfondir la création des Mockup ou Wireframes directement dans le navigateur grâce aux frameworks CSS et aux grilles de mise en pages.

Linkographie

Mood Board — Le Mood board est un prototype utilisé pour donner une idée du ton et de l’ambiance d’une création. On l’utilise dans plusieurs métiers de création comme la décoration d’intérieur, la mode, le paysagisme mais aussi le webdesign.
Le concept board webdesign — Que ce soit dans le cadre d’une avant vente ou au cours d’un projet, la présentation d’une maquette aux représentants de la marque ou de l’entreprise qui a commandé un site s’avère toujours délicate.
Un graphiste peut-il concevoir plusieurs propositions graphiques d’un même sujet ? — Travailler sur un sujet c’est surtout faire des choix, retenus eux aussi parce qu’on les estime meilleurs que les autres car plus adaptés au contexte du sujet. Un choix construit sur une analyse fine du sujet et de son contexte forge des certitudes.
Frameworks CSS + Mockup = Mockup CSS – 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 procurent des avantages à l’équipe de développement et au client qui pourra manipuler la maquette à l’échelle 1:1.
La Taxonomie pour éviter le cagibi de l’oubli — Le terme taxonomie (taxonomy en anglais) désigne une méthode de classification des informations dans une architecture évolutive. Le terme est couramment employé dans le cadre des systèmes de gestion de contenu (CMS).
Wireframes : 4 styles pour 4 types d’outils — Les wireframes sont un sujet sans fin dans la profession. Vous pouvez leur donner différents noms (storyboard, maquette fonctionnelle, zoning…), LA grande question de savoir quel est l’outil le plus approprié revient régulièrement
Tools Une dizaine d’outils en ligne pour réaliser des Wireframes.
Paper Prototyping — As interfaces become ever more complex and development schedules seem to get shorter and shorter, you may find it useful to give up your user-interface modeling software for awhile in favor of something simpler. All you need is paper, pens, scissors, and your imagination.
5 Reasons to Design with Mood Boards — If you’re a designer, the most dreaded thing a client can say is, “my wife really loves purple; so why can’t we make it purple?”
Getting Moody — Mood boards, being a lot like they sound, are typically used to help establish a style, theme, expression, environment, atmosphere, or feeling. They often consist of found objects from magazine tear outs or digital imagery to fabric or color swatches, but really can be anything that inspires (like a favorite saying, or phrase, for example).
Website Mood Boards a Successful Precursor to Visual Prototyping — One final note on our mood boards. This exercise gave us some incredible insight into the different designer’s styles and thought processes. As mentioned, each designer offered a brief explanation of their choices and by doing so, really enhanced our understanding of the designers skills and vision and ultimately the client’s understanding of the emotions and mood they were trying to create.
Why Mood Boards Matter — Words fail miserably when trying to translate design concepts. What one person calls “edgy” another might see as chaotic.
Moodboard Webdesign — I have to redesign 8 HTML pages and also showing 3 levels of content structures. So I have to analysis and study the current website to make a new proposal for the new website.
www.moodshare.co — Selling ideas just got easier (version bêta sur pré-inscription)
40 Brilliant Examples of Sketched UI Wireframes and Mock-ups
Moodboards – das Design vor dem Design

Articles sur le même sujet

Un site Web n’a pas forcément besoin de graphismes

Bruno Bichet — Thu, 13 Jan 2011 09:23:47 +0000

Dans Webdesigner est-il ? j’évoquais mon parcours Print où une grande partie de mon travail consistait à mettre en pages des publications périodiques. Dans Intégrateur web + graphiste = intégraphiste, j’ai émis l’idée saugrenue qu’un intégrateur Web pouvait avoir une sensibilité et des compétences artistiques lui permettant d’aborder la création d’un site Web avec un point de vue différent de celui du graphiste artistico-créatif ou de l’intégrateur technico-bourrin. L’intégraphiste peut être très exigeant sur les aspects purement graphiques d’un site Web, tout en acceptant facilement l’idée qu’un site n’a pas forcément besoin de graphismes (le «s» est important) pour fonctionner.

A partir de quel moment a-t-on besoin de graphismes ? Pour Will Burtin, les choses sont très claires :

Quand la simple énumération des faits est insuffisante, laborieuse ou peu claire pour le lecteur et qu’une organisation visuelle s’impose, il faut alors faire appel au graphisme. Celui-ci doit avoir les qualités d’une bonne prose. Sa lisibilité doit être parfaite.

A la lumière de cette citation, on peut conclure que travailler sans le contenu est un non-sens. Les graphismes devrait faire leur apparition lorsque toutes les autres possiblités ont été épuisées. L’absence de graphismes n’est pas l’ennemi du design, c’est peut-être même tout le contraire. Il est souvent bon de s’attarder sur la phase de placement des blocs de contenus et les relations qu’ils entretiennent entre eux.

Le design minimalisme est toujours une bonne option

Les plus sceptiques d’entre vous penseront certainement qu’il est difficile de se tromper lorsqu’on ne fait rien, et qu’à vaincre sans péril on triomphe sans gloire. Certes, mais pourquoi votre client ferait-il les frais de votre envie de faire des dessins un peu partout ? Pourquoi ne pas se contenter de textes noirs sur fond blanc sans autre fioriture graphique que le logo du client ? Je plaisante. Il est évident que votre client est unique et que son site Web devrait refléter cette singularité.

Mais comment traduire cette singularité ? A partir de quel moment se dit-on : «Tiens, là, je fais un truc sobre, ça va le faire», ou «Et puis non , je vais mettre le paquet sur le background» ou encore «Allez hop, je vais lui en mettre plein la vue !» ?

Le Webdesign au kg : je vous en mets pour combien ?

La question du bugdet ne devrait pas entrer en ligne de compte quand il s’agit de créativité, mais force est de constater que les considérations financières ont un impact qui n’est pas négligeable sur le résultat final. Un site Web sobre et/ou minimaliste coûte forcément moins cher qu’un site avec de nombreux graphismes, n’est-ce pas ? Par graphismes, je fais référence à tout ce qui n’est pas uniquement réalisé avec des aplats de couleur, du texte ou des filets réalisé à l’aide de HTML et de CSS.

Les effets CSS3 changent un peu la donne en la matière, mais dans la plupart des cas, les concepts d’amélioration progressive ou de dégradation gracieuse ne sont pas toujours pertinents au regard de l’ouverture d’esprit des interlocuteurs ou de votre movation à faire plusieurs sites pour le prix d’un.

Ceci n’est pas une conclusion

Ce billet est une réflexion en cours, une sorte de prélude pour me motiver à écrire un article sur les différentes manières d’aborder la conception graphique, un peu à l’image du livre Exercices de style de Raymond Queneau. Beaucoup de questions donc, et peu de réponse dans ces quelques notes qui me servent à noter les idées pour lesquelles je n’ai pas encore trouvé l’angle d’attaque qui permettrait de mieux structurer mes idées. Soyez indulgent et n’hésitez pas à apporter votre point de vue dans les commentaires pour faire avancer le Schmilblick.

Articles sur le même sujet

Quelques notes sur la balise h1 avec HTML5

Bruno Bichet — Thu, 16 Dec 2010 13:19:29 +0000

La réponse courte à la question « Combien de balises h1 dans une page Web HTML5 ? » est : « Autant que nécessaire ! » En gros, chaque fois que vous avez une nouvelle section, vous pouvez mettre un h1. D’une manière générale, h1 accompagnera article, aside, nav ou section avec brio ! (cf. Sectioning content). Allons voir ce que nous disent les spécifications HTM5 sur l’emploi des balises de titre h1 — h6, notamment les exemples concernant les niveaux de titre. Ils sont assez parlant bien que parfois déroutant lorsqu’on a l’habitude du balisage utilisé jusqu’à présent. Les éléments h1 — h6 représentent les niveaux d’en-têtes de leurs sections respectives. Quant à l’élément hgroup, il regroupe un ensemble d’en-têtes composé d’au moins deux niveaux de titre, comme un titre et son sous-titre ou un titre et le slogan associé (un bon candidat pour Logo et Motto, faute de mieux).

Quelques exemples avec H1

Les deux bouts de code qui suivent sont équivalent :


    Let's call it a draw(ing surface)
    Diving in
    Simple shapes
    Canvas coordinates
    Canvas coordinates diagram
    Paths


    Let's call it a draw(ing surface)
    
        Diving in
    
    
        Simple shapes
    
    
        Canvas coordinates
        
            Canvas coordinates diagram
        
    
    
        Paths

La première forme est celle que l’on utilisera le plus souvent dans le cadre d’un CMS, puisque il est rare que l’on puisse saisir des balises section lors de la rédaction d’un article, même en passant par l’éditeur HTML puisqu’il supprime les balises exotiques. A moins qu’un plugin ne permette d’y remédier.

Dans un autre exemple, on trouve une utilisation des niveaux h1 suivis de h2 et h3 à l’intérieur des sections :

Apples

Apples are fruit.

Taste

They taste lovely.

Sweet

Red apples are sweeter than green ones.

Color

Apples come in various colors.

Toutefois, le W3C recommande d’utiliser la forme suivante plus explicite et plus simple à maintenir si l’on doit modifier l’ordre des sections en cours de rédaction (ou lors de corrections plus tardives) :

Apples

Apples are fruit.

Taste

They taste lovely.

Sweet

Red apples are sweeter than green ones.

Color

Apples come in various colors.

Si la première version semble mieux hiérarchisée, la deuxième est plus claire : un h1 gratuit pour chaque création de section explicite ! Et l’on peut continuer avec les balises h2, h3, etc. C’est la profondeur du document, l’imbrication des sections et des sous-sections qui définit la hiérarchie du document. Ce qui ne signifie pas que les balises h2 – h6 sont inutiles. Elle sont toujours indispensables pour structurer le message à l’intérieur des sections.

Pour l’application des styles CSS, en revanche, pas sûr que section section h1 {...} soit plus simple que h3 {...}. Voir à ce sujet HTML5 Titles Inception, la courageuse descente de Nicolas Hoizey dans les limbes pour styler les h1 selon leur profondeur.

Sémantique ou optimisation SEO ?

La question du nombre de fois où l’on peut utiliser la balise h1 dans un document présente deux facettes :

Logique interne du document (Semantic). Un document est souvent identifié par un titre et les parties qui le composent par des sous-titres. Si un document peut ne posséder qu’un seul titre (à l’image des livres où le titre se trouve en couverture), il est possible d’utiliser un titre `h1` par `section`. On suppose alors que les sections forment des parties dissociables du tout. A cet égard, on peut se demander si une balise `article` n’est pas préférable dans la mesure où une partie indépendante peut bénéficier (en théorie) d’un flux RSS dédié.
Le référencement au niveau de la page (In Page). Google accorde un poids supplémentaire (un petit poids, faut pas trop rêver non plus) aux mots-clés contenus dans les balises de titre `h1`, `h2` et `h3`. La tentation est grande de vouloir en utiliser un maximum dans une même page.

Est-il est possible de mixer ces deux approches en tentant le Jackpot de la beauté sémantique et du charme SEO ? Lorsqu’on regarde de près les ouvrages imprimés (livre ou magazine), on s’aperçoit que le titre ne se retrouve pas toujours uniquement sur la 1ère de couverture. Dans certains livres, le titre est parfois répété dans les feuillets intérieurs précédé et/ou suivi de quelques pages blanches. Dans certains magazines, le nom de la revue peut se retrouver sur toutes les pages avec le titre de la rubrique en regard.

Du coup, l’argument du titre unique pour l’ensemble du site Web — en comparaison logique avec le Livre (objet de référence dès qu’il s’agit de bon goût) — ne tient plus. CQFD. Reste la question du title présent dans les balises meta. D’un point de vue SEO, cette balise est fondamentale car elle fait office de titre dans les SERP’s (Résultats dans les pages de recherche). Il faut donc lui accorder un soin tout particulier. Elle doit être unique sur la page. Or, la plupart des CMS utilisent le titre de l’article pour garnir ce title, ce qui le fait apparaitre deux fois. Sans compter l’URL du billet qui reprend souvent ce même titre lors de la réécriture des URL (URL Rewriting).

Il est important de s’assurer que ce title n’est pas redondant. Le meilleur moyen d’y parvenir est de considérer qu’il représente le vrai titre de la page Web, indépendamment des niveaux de titres h1 présents (sans compter que la page n’est pas forcément synonyme de document) ou même du logo, qu’il s’agisse d’un texte ou d’une image. Le Web n’est pas totalement réductible aux pratiques de l’imprimé, fussent-elles de bon goût.

En matière de SEO, redondance rime avec décadence, du moins lorsque la répétition s’effectue sur des niveaux hiérarchiques d’égale importance.

Document vs Site Web

La plupart des exemples fournis par le W3C concernent des documents et pas des sites Web, et ce n’est pas un détail : de nombreuses ambiguïtés concernant le bon usage de la balise h1 viennent de là. Si l’on doit présenter le compte-rendu d’une réunion, le titre du document pourrait être l’objet du mail qui a servi pour inviter les participants.

Prenons par exemple le document suivant :

«La Tête Dans l'Asso» accueille les nouveaux adhérents

Cette année, l'association a recueillie une centaine de nouveaux membres [...]

La réunion d'intégration

blablabla [...]

Le livret d'intégration

blablabla [...]

Partenaires

La Tête dans l'Ecu
La Tête allant vers...

Une fois que le document est balisé correctement, il reste à l’intégrer dans le site Web qui contient généralement des balises d’en-tête de différents niveaux avant et après la zone des articles. Pour simplifier, on peut utiliser le marquage suivant :


    
        Mon logo qu'il est beau
        Mon Slogan qu'il est grand
    
    Ma description étendue qu'elle est bien fichue [...]

Sous réserve que le logo en question soit composé en HTML et signifie quelque chose. Pendant longtemps, ce blogzine avait pour titre «CSS & Webdesign», ce qui en faisait un titre efficace dans le sens où 1) l’expression était représentative du contenu et 2) signifiait quelque chose pour les moteurs de recherche. D’ailleurs, sans trop vouloir enfoncer le clou du SEO, si votre logo-titre n’est pas utile pour les moteurs de recherche (ex. css4design, logo en image), autant utiliser une balise div.

Pour intégrer notre document dans le site Web, nous allons l’envelopper avec une balise article. Puis, nous allons modifier le marquage du header pour supprimer la balise h1 bien que les spécifications HTML5 ne nous y oblige pas. L’idée est de garder la ou les balises h1 uniquement à l’intérieur de la balise article pour optimiser le SEO In Page. Nous en profiterons pour remplacer la description du site par un résumé de l’article qui servira de chapô :


    
        Mon logo qu'il est beau 
        Mon Slogan qu'il est grand
    

    
Un résumé de l'article qui servira de chapô [...]


    «La Tête Dans l'Asso» accueille les nouveaux adhérents
    Cette année, l'association a recueillie une centaine de nouveaux membres [...]
    La réunion d'intégration
    blablabla [...]
    Le livret d'intégration
    blablabla [...]
    Partenaires
    
        La Tête dans l'Ecu
        La Tête allant vers...

Pour continuer dans cette logique de donner la primeur au contenu principal de la page, le mieux est encore de le placer en premier dans le code. En effet, un des avantages du Web par rapport à l’imprimé, c’est que l’ordre d’affichage des éléments n’est pas forcément celui du code source. Ainsi, dans l’exemple, ci-dessus, on peut très bien placer le contenu de la balise article avant celui de header dans le code et inverser l’ordre d’affichage avec la propriété float ou position: absolute.

Adaptez la feuille de style aux documents, pas l’inverse !

Si les spécification du W3C autorisent — voire encouragent — l’utilisation de plusieurs balises h1 pour structurer le contenu à l’aide de section, il me semble important d’adapter le balisage HTML à la sémantique des documents. Vous trouvez ça bateau ? Pourtant je remarque que l’on a tendance à baliser les documents de manière à les adapter à la feuille de style que l’on a déjà, plutôt que d’adapter la feuille de style aux documents ! Cela passe par une analyse approfondie des documents existants, par la création d’une feuille de style CSS souple et par la capacité de remettre son travail en question selon la nature des documents à venir.

Linkographie

Articles sur le même sujet

Quelques notes sur le design graphique des sites web et autres futilités

Bruno Bichet — Tue, 21 Sep 2010 12:16:59 +0000

Ces quelques notes sont le fruit d’une réflexion rapide qui fait suite au commentaire de Papier-pixel sur l’article Conception dans le navigateur avec HTML5 & CSS3. Il regrette grosso modo qu’il y a des thèmes récurrents dans mes billets qui tendent à laisser penser que le webdesign et la mise en place d’une vraie charte graphique ne sont pas indispensables. Le fait de coder directement dans le navigateur ou d’oublier photoshop pour finir par m’interroger sur la pertinence du design qui serait « inutile » dans 80% des cas nous entrainerait dans un web uniforme, sans véritable réflexion visuelle en amont.

Prologue

Il y a effectivement quelques articles dans ce blog qui explorent d’autres voies que celle de Photoshop, mais j’en ai écris encore plus sur le design et le graphisme (ne vous arrêtez pas aux derniers articles parus qui ne sont pas forcément représentatifs de mon point de vue). Petite précision avant d’aller plus loin : l’article où je m’interroge sur le graphisme qui serait inutile dans 80% des cas est une ode au design, ne vous méprenez pas.

Un seul design pour les lier tous ?

Le design ou la conception dans le navigation ne signifie pas absence de design ou de conception : c’est même tout le contraire ! Sur la question de l’uniformisation du design des sites web, il est important de prendre en compte plusieurs choses :

D’une part — et c’est le plus important — en quoi le fait que tous les sites se ressemblent est si grave ? Au pire, le visiteur a une impression de «déjà vu», au mieux, il ne perd pas de temps à se demander comment fonctionne le site.
D’autre part, les sites soi-disant graphiques se ressemblent tous d’une certaine façon (de mon point de vue, c’est valable pour l’immense majorité d’entre eux). La quantité de pixels utilisés n’enlève rien à une autre forme d’uniformisation. Sans compter que la plupart des fantaisies graphiques rendent souvent le site difficilement utilisable : il faut souvent entrer dans l’univers du graphiste avant d’entrer dans le contenu.
Par ailleurs, je pense que l’absence de design est parfois préférable à un mauvais design pour peu que le concepteur a fait attention à l’ergonomie et la navigation. Si en plus il a choisi une police de caractère lisible de 16px avec un interlignage de 24px contrastant suffisamment avec le background, c’est parfait ;)

Cela dit, il existe de nombreux cas ou l’on a besoin de faire entrer le visiteur dans un univers visuel : lorsque l’expérience immersive produit du sens en tant que tel en fonction de la marque ou du produit. Mais il ne faut pas se voiler la face : ces cas sont assez rares et quand on les rencontre, il sont malheureusement souvent mal fichus.

Le graphisme n’est pas une surcouche ?

Le webdesign est entré dans une phase de maturité où — n’en déplaise à beaucoup — le graphisme est une couche appliquée sur un marquage HTML, lui-même fruit d’une réflexion sur les différents types de contenus qu’il enveloppe. A cet égard, je ne résiste pas au plaisir de placer l’article Métiers du web — Je suis « enveloppeur web » moi monsieur !

Bientôt (dès demain, en réalité) de nombreux effets graphiques seront réalisés avec les langages du web, ce qui ne veut pas dire que Photoshop sera obsolète, bien au contraire. L’uniformisation des designs de sites réalisés avec HTML5 et CSS3 et «designés» directement dans le navigateur seront un type de prestation parmi d’autres.

Il y aura toujours besoin de créatifs originaux pour les projets où une «patte graphique» sera nécessaire. Mais au moins les créatifs devront-ils faire preuve d’un peu plus d’audace que mettre des dégradés, des coins arrondis ou des ombres portées dans Photoshop ou Illustrator…

Pour ne pas conclure

Lorsque je regarde de près les meilleurs «designs de l’année», je vois bien qu’il y a du travail de qualité, mais en creusant un peu, j’ai le sentiment qu’il s’agit souvent du portfolio d’un webdesigner réputé ou d’un site web réalisé par une agence pour un client qui a dépensé beaucoup d’argent. Bref, des projets que la startup ou la PME française moyenne n’a pas les moyens de s’offrir ou qu’elle ne veut pas payer.

Épilogue

Zut, à la relecture je me rends compte que je donne encore l’impression de sacrifier le graphisme sur l’autel de la sobriété et du mauvais goût. Il y a tellement de cas de figure différents qu’il est difficile de faire un seul billet sur cette question en restant concentré… Mais je reviendrai prochainement vers vous avec un billet sur la notion du Good Enough dans l’industrie du webdesign.

Articles sur le même sujet

Une très brève histoire des métiers du web et de la PAO (publication assistée par ordinateur)

Bruno Bichet — Thu, 26 Aug 2010 14:10:17 +0000

Lorsque j’ai publié mon dernier billet sur le design dans le navigateur avec HTML5 et CSS3, je m’attendais à des commentaires sur mon interprétation du rôle et de l’utilisation des nouvelles balises HTML5 pour structurer les contenus telles que header, hgroup, section, aside, nav, article ou footer. A la place, j’ai vu apparaitre une discussion plutôt orientée « graphistes vs. intégrateurs » web au sens large, qui m’a donné envie de faire un retour en arrière sur mon expérience des métiers de la chaine graphique et des métiers du web.

Attention : un peu d’humour et de second degré se sont glissé dans ce billet, merci pour votre compréhension ;)

Mon parcours professionnel m’a amené à côtoyer et à exercer plusieurs métiers de la chaine graphique : exé PAO, infographiste, scannériste-retoucheur, chef de studio, flasheur et j’en oublie certainement. Côté web, j’ai commencé à « faire » des sites web à une époque où le métier de webmaster était plutôt bien vu. Je suis devenu intégrateur web, puis webdesigner en attendant de faire mon chef de projet là où l’on voudra bien de moi ;)

En 1990, lorsque j’ai commencé à me former en PAO, la plupart des professionnels ont vu d’un mauvais oeil l’arrivée de l’informatique dans leurs métiers.

Jusqu’en 1993, j’ai eu l’occasion de travailler avec des Directeurs artistiques qui dessinaient leur maquettes, collaient les photos et titraient avec des lettrasets. Le travail de l’exé PAO consistait à rendre cette maquette fonctionnelle à l’aide des logiciels Quark XPress, Photoshop ou Illustrator. Il fallait également assurer la préparation pour l’impression : formats d’images, colorimétrie, débords, défonce, etc. Toutes ces choses un peu techniques que le DA ignorait le plus souvent et que l’on regroupait sous le vocable « pré-pressse ».

Quelques années plus tard (1997), la majorité des DA travaillaient directement dans Photoshop ou Illustrator mais les questions techniques autour du pré-presse n’étaient toujours pas digérées.

A partir des années 2000 les exés sont devenus (ou ont été remplacés par) des infographistes. Il fallait non seulement savoir faire l’exé et assurer la partie pré-presse, mais être également capable d’intervenir sur la partie création en adaptant la charte graphique mise en place dans les grandes lignes par le DA.

De nombreux infographistes ont peu à peu goûté à la créa et ont été à même — non pas de proposer des pistes graphiques, qui restait globalement le coeur de métier des DA — mais de travailler directement dans XPress ou InDesign pour « faire » une affiche, mettre en page un magazine ou proposer un logo. Le rôle du DA (quand il y en avait un) était plutôt axé relation-client (boire un coup avec les donneurs d’ordre) et benchmarking (lecture de la presse spécialisée devant la machine à café) ^__^v

Cette brève histoire de la PAO montre bien qu’il y a eu factorisation des métiers de la chaine graphique. Bien sûr le simple exé existe toujours, mais pour être embauché il doit en savoir bien plus qu’aux débuts héroïques.

Il se passe la même histoire avec les métiers du web. Au début, le métier de webmaster consistait grosso modo à intégrer les contenus envoyés par les clients (les back-office coûtaient cher et les CMS n’existaient pas encore), à ajouter de nouvelles pages, à maintenir et optimiser le site pour continuer à satisfaire les visiteurs toujours plus nombreux.

Une partie des webmasters se sont spécialisés dans les langages HTML, CSS et Javascript et son devenus des intégrateurs web ou des développeurs front-end. Ceux qui avaient une sensibilité artistique sont devenus des webdesigners.

Parallèlement à cela, une grande partie des graphistes traditionnels ont de plus en plus travaillé pour le web en fournissant des fichiers .psd à découper. Certains ont finit par ne faire que du webdesign et sont de fait devenus des… webdesigners sans toutefois posséder la culture technique des anciens webmasters. Comme les DA évoqués plus haut qui ignoraient tout ou presque des contraintes pré-presse.

Vous me voyez venir : la factorisation qui a eu lieu dans les métiers de la chaine graphique n’a aucune raison d’être épargnée aux métiers du web. Elle est même plus féroce dans la mesure où l’intégrateur HTML et CSS doit de plus en plus devenir un développeur web front-end en ajoutant Javascript à son arc. Voire même maitriser un langage côté serveur comme PHP ou faire de l’administration serveur en jonglant avec plusieurs kernels à la fois ! Parti de webmaster, le travailleur du web tend à redevenir un homme ou une femme à tout faire.

Quant aux webdesigners « graphistes », une partie d’entre eux semble regretter le temps où le format A4 était roi et n’obligeait pas le lecteur à faire défiler la page ;) Tiens, ça me rappelle Deux mots sur le graphisme, le design et l’ergonomie des sites web que j’ai écris il n’y a pas si longtemps.

Articles sur le même sujet

Quel tarif pour un thème WordPress ?

Bruno Bichet — Thu, 24 Jun 2010 12:36:25 +0000

C’est une question récurrente : mais combien coûte un thème WordPress ? A cette question simple, je voudrais apporter quelques éléments de réflexion. J’ai la conviction qu’une réponse toute faite ne peut être juste. Par ailleurs, je trouve qu’il règne une certaine hypocrisie sur la formation des prix dans le Webdesign. Il semble normal — lorsqu’on achète une voiture ou une machine à laver — de donner des indices sur le budget que l’on est prêt à consacrer. Dans le Web Design (et sans doute dans les prestations de services en général), la question du budget semble taboue. J’ai même parfois l’impression que les clients potentiels ne se posent pas la question, comme si l’on vendait du vent ; pourtant, livrer un site Web correspondant aux besoins du client n’est pas une mince affaire et demande beaucoup de travail, y compris en utilisant un CMS comme WordPress (mais c’est valable aussi pour Drupal, Pluxml ou NekoCMS).

5 étapes pour concevoir un thème WordPress

La création d’un thème pour le CMS WordPress se décompose idéalement en cinq étapes :

Recueil des besoins — Réception d’un email expliquant le contexte de la demande ou document plus complexe en plusieurs partie (cahier des charges ?).
Récapitulatif des besoins — Envoi d’un email précisant ce qui sera effectivement vendu, en tenant compte du périmètre des fonctionnalités retenues (document à faire valider avant d’attaquer le point n°3).
Conception de la charte graphique — Il s’agit de formaliser graphiquement les besoins du client (à cette étape, il a versé 30% de la commande) en présentant une ou plusieurs pistes graphiques selon ce qui aura été défini à l’étape précédente. Notez que le nombre de proposition est souvent lié avec l’importance du budget alloué (document à faire valider avant d’attaquer le point n°4).
Intégration Web (HTML, CSS & jQuery) — Lorsque la charte graphique est acceptée et que les BAT sont OK, il est temps de transmuter le design réalisé sous Photoshop dans un format lisible par les navigateurs.
Mise en place des fonctions WordPress — Affichage des billets et autres éléments constitutifs du blog ou du site Web (ne soyons pas sectaire).

A cela, il faut ajouter les allers-retours pour les modifications (corrections, changements, etc.) qui sont chronophages… Vous l’aurez compris : la mise en place d’un thème WordPress ne diffère en rien de la mise en place d’un site Web dynamique ! La seule différence, c’est le point n°5 qui permet de faire l’économie de la partie PHP/MySQL : les équipes de WordPress ont déjà fait tout le travail de développement.

L’intérêt d’utiliser WordPress pour son site Web ou son blog, c’est de pouvoir profiter de l’étendue des fonctionnalités proposées par ce CMS, sans compter la qualité du Back Office accessible aux utilisateurs les moins avertis. On peut dire que WordPress est l’ami développeur PHP/MySQL qui travaille gratuitement, ou presque.

Toutefois, et sans vouloir relancer la polémique pour savoir si l’on peut parler de développement WordPress, il faut savoir que l’API de WordPress ne vient pas s’intégrer toute seule dans la maquette. Il faut un minimum de connaissance en développement Web (PHP, MySQL) pour mettre en place un thème WordPress un peu complexe. Et il est normal que le tarif en tienne compte.

Un thème, des Templates ?

J’allais oublier. Maintenant que nous avons en tête toutes les étapes nécessaires, il faut encore prendre en compte le fait qu’un thème WordPress est composé d’un nombre de Templates variable selon les besoins exprimés à l’étape n°1 et retenus à l’étape n°2.

Un thème WordPress peut se composer d’un seul modèle de page (index.php) pour accueillir l’ensemble des contextes d’affichage possibles (catégories, tags, recherche, articles seul, images, etc.). Le thème WordPress par défaut (Twenty Ten) comporte plus de 10 Templates. Le tarif tiendra évidemment compte à la fois du nombre de Templates et des différences qu’ils présentent entre eux.

Et les plugins ?

Qui dit WordPress, dit Plugins. Il est rare d’installer WordPress sans passer par le menu Extensions. Celles-ci peuvent nécessiter des réglages de configuration plus ou moins complexes. Certaines nécessitent de mettre les mains dans les Templates et les fichiers CSS pour adapter le code HTML produit en sortie à votre charte graphique toute neuve.

Combien ça coooûûûte !

cf. point n°1 ;)