Valéry-Xavier Lentz.eu

To content | To menu | To search

Tag - webdesign

Entries feed - Comments feed

Sunday 29 August 2010

En chantier : le redesign du Taurillon

Le Taurillon est un magazine en ligne édité par l'association Les Jeunes Européens. Fondé en septembre 2005, afin de capitaliser sur l'expérience de publication online acquise par l'association au cours de la campagne référendaire, et de participer à la promotion des idées européennes et fédéralistes, il est devenu depuis multilingue en ajoutant de nouvelles versions linguistiques qui sont en fait autant de magazines distincts, chacun ayant sa propre rédaction, dans le cadre des Jeunes Européens Fédéralistes.

Une nouvelle version est actuellement en cours de réalisation. L'objectif est de mieux valoriser le contenu en se débarrassant autant que possible des éléments divers venus encombrer sa page d'accueil, mais aussi de mettre en valeur les différentes versions linguistiques ou encore de mieux prendre en compte les médias sociaux. Enfin, il s'agit aussi d'intégrer dans les squelettes les innovations des dernières versions de SPIP, son outil de publication de contenu.

Le Taurillon - version 1 (2005) :

Le Taurillon - version 2 (2008) :

Le Taurillon - version 3 (en chantier) :

Et vous qu'est-ce que vous amélioreriez sur ce site ?

Friday 28 August 2009

@font-face à la place des images typographiques

La sortie de Firefox 3.5 et sa généralisation progressive (la mise à jour est désormais proposée aux utilisateurs de la version 3), signifie notamment que le public pouvant bénéficier des sites utilisant la propriété CSS @font-face va connaître une explosion démographique.

Avant : les créateurs de sites web ne pouvaient utiliser que des polices de caractère installées sur les postes des utilisateurs. Concrètement ça limitait la typographie web à une poignée de polices, essentiellement Times New Roman, Georgia, Arial, Verdana... (qui a dit Comic Sans ?!).

Maintenant : en fait c'est pareil si l'on souhaite le même rendu sur tous les navigateurs (pour quoi faire ?) mais si l'on veut aller plus loin il est désormais possible d'utiliser la police de son choix... enfin si la licence d'utilisation de celle-ci l'autorise, il faut donc préciser : la police de son choix parmi les quelques-unes l'autorisant Oui aussi surprenant que cela puisse paraître à beaucoup de monde, les typos s'achètent aussi, probablement pour faire vivre les typographes.

Donc si vous avez eu le bon goût de vous doter de Safari 4, Firefox 3.5 ou la RC d'Opéra 10, vous ne verrez plus le web de la même façon. Installez l'un de ces navigateurs si ce n'est déjà fait et visitez ces quelques sites ou encore désormais valeryxavierlentz.eu ou dirtyclubber.com. Vous ne remarquez rien ? Parfait. Mais c'est plus joli.

Alors naturellement, il existait et il existe des moyens d'afficher des typos exotiques et sophistiquées aujourd'hui. Flash et Javascript sont mis à contributions dans des techniques pittoresques de remplacement d'images comme sIFR par exemple. On peut également utiliser des images dynamiques générées par le serveur. Le CMS SPIP (par exemple, au hasard) propose ce type d'images typographiques nativement. Cette technique est en pratique limitée aux titres mais permet des traitements que @font-face ne permettra pas à ma connaissance (cf. les techniques proposées par Arnaud Martin pour SPIP).

Il reste la question des performances web. C'est à dire ce qui permet d'éviter la formation de toiles d'araignées sur la souris de vos visiteurs attendant lle chargement de vos pages web. Une typo ça pèse... 153 ko pour celle que je viens d'installer sur taurillon.org, la très discrète LiberationSerif. Sur zzz.rezo.net, Fil a deux typos pour ce poids là.

Alors qu'est-ce que ça donne sur la page d'accueil de l'animal (cache navigateur vide) ? Selon Firebug :

  • avec les images typographiques : 76 requêtes (oui, je sais...), 624 ko
  • avec @font-face : 65 requêtes (nettement moins pire déjà),738 ko
  • avec du Georgia : 64 requêtes (bah oui, une de moins forcément) et 584 ko (le poids de la typo en moins, donc).
Même si la page d'accueil comportait onze titres en images, elle pèse moins qu'avec le chargement de la typo (10 ko chacune environ). Toutefois, la multiplication des requêtes (c'est à dire les échanges entre le navigateur et le serveur pour charger l'ensemble des éléments constituant la page) augmente les délais. À la louche (car c'est difficile à dire avec les widget tiers), deux secondes de plus qu'avec @font-face. Sans cette dernière c'est encore deux secondes de moins environ.

Il reste à trouver une typo plus jolie pour ce site, et pas trop lourde. Demander l'avis des 4 rédacteurs en chef aussi, peut être.

Thursday 27 August 2009

L'espace fine insécable sur le web, ce n'est pas pour demain

Ayant travaillé plusieurs années durant dans une agence print avant de passer au web (oui, je suis vieux comme ça), j'avais fait du Lexique des règles typographiques en usage à l'Imprimerie Nationale un de mes livres de référence (soit dit en passant, pourquoi la dite imprimerie met-elle une majuscule à l'adjectif ?) .

Naturellement, en travaillant sur le web, je veille aussi autant que faire ce peut au respect des règles typographiques, même si il faut s'adapter au média. Ainsi, pendant longtemps, l'italique était peu lisible à l'écran (à présent les lettres sont lissées la plupart du temps donc il est envisageable à nouveau de l'utiliser pour les titres d'ouvrages ou les citations par exemple). Lire par exemple ce billet : Typographie et web. Pour l'italique il y a bien sur le bug de rendu des vieux Internet Explorer (je n'ai pas testé sur les nouveaux) à prendre en compte.

J'utilise souvent l'outil de publication SPIP notamment car, conçu par des développeurs français dans une optique "presse", il prend en compte avec attention les règles typographiques française. Saisir par exemple un point d'interrogation ou un point virgule provoque l'insertion automatique d'un espace insécable   qui évite de retouver son point d'interrogation à la ligne. L'outil Couteau Suisse dispose aussi d'une option pour permettre le remplacement des guillemets"anglais" (cf. l'article Wikipedia Quotation marks) par des guillemets « à la française » (cf. l'article Wikipedia Guillemets). 

Sur la prise en charge de ces règles par les CMS, et comment lesprendre en compte en leur absence, lire : Entités HTML et typographie française  Naturellement, même SPIP ne fait pas tout... Le « œ » peut être pris en compte en partie grâce à une lame du "Couteau suisse" qui procède à des remplacements par expression régulière sur les mots courants l'utilisant, mais c'est un pis aller. Attention à l'encodage de la page pour le e dans l'o qui ne passe pas systématiquement.

Je faisais remarquer sur spip.org que le   n'était pas le bon caractère à placer devant les doubles ponctuations mais qu'il fallait en réalité une espace fine insécable. Naturellement, on m'a signalé qu'il s'agit d'un choix technique qu'explique cet article : Espaces unicode et navigateurs web selon lequel "parmi les navigateurs testés, seul Firefox sous Linux et Safari sous OS X 10.5 affichent correctement les espaces insécables étroites". Mise à jour : j'ai testé de mon côté, ça fonctionne très bien dans Firefox 3 sur Windows (Vista). Échec cuisant dans Internet Explorer 7, Safari 4et Chrome 2 (un carré s'affiche...).

Dans ces conditions, ce n'est pas pour demain. Naturellement il se trouve des gens qui ne se résignent pas et pondent des hacks tarabiscotés : Gestion des espaces fines et insécables. N'est-ce pas beaucoup de code pour faire plaisir aux puristes ?

P.S. : l'article signale aussi cette extension pour Dotclear.

Sunday 1 February 2009

Lectures du weekend

Thursday 11 September 2008

De la page d'accueil d'un site multilingue

Ce billet constitue le second d'une hypothétique série sur le multilinguisme dans les sites internets. Il fait suite au précédent intitulé "Représenter les langues d'un site web" qui abordait la navigation entre différentes versions linguistiques.

La page d'accueil demeure la page la plus visité de la plupart des sites internets, même si sur la plupart des sites une très large majorité des visiteurs entrent via une page de contenu référencée sur un moteur de recherche.

Dès lors que le site est multilingue, deux questions se posent :

  1. Dans quelle langue doivent être rédigés son interface et son contenu ?
  2. Comment faire comprendre au visiteur qu'il a la possibilité de changer de langue ?
Autant le dire tout de suite, il n'existe pas de bonne solution, ou en tout cas

La pré-page d'accueil

La solution de facilité mais aussi la plus simple, notamment dans le cas d'un site massivement multilingue, et de proposer une page proposant la liste des langues disponibles dès la connexion de l'internaute. Ce dernier est dès lors contraint de sélectionner une langue avant de visualiser le contenu du site.

Notons que c'est sans doute là un des rares cas d'utilisation d'une pré-page d'accueil qui puisse être considéré comme tolérable. En règle générale tout obstacle entre le visiteur et l'information qu'il recherche est à bannir : ça agace.


La page d'accueil du Parlement européen : 21 liens et une faute de goût : une phrase en anglais inutile


Le site du premier ministre de Belgique (détail) : c'est déjà plus simple, mais qu'est devenu l'allemand, si je ne m'abuse également langue officielle au niveau fédéral.

Une langue par défaut

Une autre solution consiste à proposer une page d'accueil en anglais dans une langue par défaut dont on estime qu'elle est comprise par la majorité des visiteurs. On s'efforce alors de mettre en évidence la possibilité de changer de langue si nécessaire.

Ainsi une multinationale pourra proposer sa page d'accueil en anglais et un menu pour passer vers des traductions du site. J'élude délibérément le cas de figure de la famille de sites de filiales avec des noms de domaines différents. Le multilinguisme ainsi évacué finit par revenir par la porte de derrière (et il n'est pas content) dès lors que l'on veut utiliser un .be ou un .ch par exemple.

Un site espagnol pourra afficher son contenu en castillan avec des liens vers les versions catalane, basque ou gallicienne.

Un site belge va chercher une autre solution ou courir au devant de gros ennuis.


Le site portail de l'administration suisse propose une page d'accueil... en anglais !

Une langue par défaut avec détection automatique

La solution la plus sophistiquée consiste à chercher à deviner identifier la langue préférée de l'utilisateur. Il existe toute une série d'indices parmi les informations que votre navigateur internet envoie au serveur du site lorsqu'il se connecte, à commencer par l'emplacement géographique de votre ordinateur, déduit de manière plus ou moins fiable de son adresse IP (une série de numéros plus ou moins unique vous identifiant sur le réseau) et surtout par la ou les langues par défaut du navigateur.

Si votre navigateur dispose d'une interface en français, la langue par défaut d'un tel site sera le français, s'il est disponible. Le webmaster belge est sauvé, il ne devra pas subir l'ire flamande, il pourra proposer une page d'accueil en néerlandais à ses internautes Anversois.

La page d'accueil tour de babel

Oui, mais non... Extrêmement rare : les articles des différentes langues sont mêlées sur la page d'accueil.

La solution peut être appropriée lorsque l'on s'adresse à un public dont on sait qu'il maitrise effectivement les langues concernées. L'avantage principal est que si l'intégalité du site n'est pas traduit, cela permet de continuer à proposer l'ensemble des contenus disponibles.

Les inconvénients de la solution sont évidents : il devient beaucoup plus difficile de parcourir rapidement les titres de la page, d'autant plus que l'on ne comprend pas toutes les langues.

Il n'est pas certain que Google apprécie non plus. Il faut en toute hypothèse pouvoir bien identifier dans le code chaque bloc de contenu à l'aide du code de langue correspondant.

Enfin, pour le politiquement correct : l'interface de navigation ne peut être que dans une seule langue sauf à n'utiliser que des images. Il y a donc toujours un privilégié.


Le site spip-contrib propose des extensions pour SPIP. La page d'accueil mélange ici articles français et espagnols.

I will be back

Le Graal d'un site internet est le visiteur récurrent. Il n'est pas nécessaire le tester sa patience en lui imposant de sélectionner sa langue à chaque visite.

Bien sur, on peut espérer qu'il inscrive dans ses favoris l'adresse de la page d'accueil dans sa langue. Nous avons là le visiteur parfait. Il est sinon possible de conserver une trace du choix réalisé lors de la première visite, soit par l'utilisation d'un cookie, soit dans le meilleur des cas, si votre site le proposer et que le visiteur crée un compte utilisateur, par la conservation de ce choix dans son profil.

Conseils pour votre cahier des charges

La gestion du multilinguisme est un facteur de complexité supplémentaire dans un projet web. Il est essentiel qu'elle soit prévue dès la conception du site sous peine d'entrainer coûts et délais supplémentaires par la suite.

Le multilinguisme conditionne par exemple le choix de l'outil de gestion de contenu, des modes de navigation et de l'organisation de la page d'accueil. Il implique potentiellement la mise en place  de codes particuliers dans les gabarits du site.

Il faut donc préciser dès le cahier des charges un maximum de détails :
  • si le site doit être disponibles en plusieurs langues ou s'il faut le prévoir dès à présent pour une version future
  • le nombre de langues est-il définitif ou faut-il prévoir l'ajout de langues supplémentaires ?
  • l'intégralité du site est-il traduit ou bien seulement quelques pages ?
  • l'arborescence du site sera-t-elle identique ou non selon les langues ?
  • les langues doivent-elles être traitées sur un pied d'égalité ou bien existe-t-il une langue principale sur le site ?
  • faut-il prévoir une optimisation pour le référencement dans toutes les langues ? et une démarche de référencement correspondante ?
Et vous ? Quelle formule vous semble la plus appropriée ?

Saturday 30 August 2008

Représenter les langues d'un site web

Comment représenter les langues sur un site web ?

Le multilinguisme est l'une des principales difficultés dans la conception de sites internet.

Il implique des difficultés à la fois :

  • techniques : pour représenter correctement les caractères accentués ou les différents alphabets, notamment pour la communication entre des applications utilisant des systèmes différents ;
  • ergonomiques : afin de permettre la navigation entre différentes versions linguistiques d'un site ou entre un contenu et ses traductions ;
  • relatives à l'architecture de l'information : à défaut de pouvoir traduire intégralement un contenu les arborescences sont souvent différentes selon les langues. Comment par exemple référencer un contenu dans une langue qui n'est disponible que dans d'autres langues ?
  • en terme de communication : comment communiquer auprès de tous en sachant que l'on ne peut traduire les contenus dans toutes les langues du public ciblé ?
  • politiques : la question de la langue est toujours sensible. Les commentaires négatifs en tardent pas si un contenu visant un public international n'est pas disponible dans la bonne langue.

Lors de la construction d'une page web la langue est prise en compte à plusieurs moments. On la spécifie pour la page entière, ou pour une partie du contenu, voire sur un lien pour signale que la page de destination est dans une autre langue. Cf. Spécifier la langue d’un document (X)HTML sur Openweb.

Je voulais aujourd'hui m'attacher à la question de la représentation des langues sur un site web. Il n'existe que deux méthodes : du texte ou des images.

Le texte est le plus simple : une série de liens voire un menu déroulant permettent de préciser explicitement la langue de destination. Encore faut-il se demander si on doit écrire le nom de la langue dans la langue en question ou dans la langue de la page courante. La logique veut que l'on conserve la version originale dans ce cas puisque l'on s'adresse à un public supposé la parler.

C'est le choix qu'a fait le Taurillon par exemple, qui posera problème si jamais on ajoute une ou deux langues de plus :

Café Babel propose également du texte, mais dans un menu déroulant ce qui rend l'option de langue très discrète. Il est vrai que le ste propose les même contenus dans toutes les langues et qu'il n'est donc pas nécessaire de mettre cette fonction en avant. 

Pour le Taurillon, chaque version linguistique dispose de contenus distincts et d'un comité de rédaction différent : il est donc important pour ce site de mettre en avant de manière évidente les différentes langues disponibles. Notons que dans ce cas l'anglais correspond en fait à une édition internationale. Un problème se poserait si les britanniques souhaitait leur propre édition du magazine, distincte de l'édition internationale. 

Dans le cas où l'on dispose d'un plus grand nombre de langues ou que l'on souhaite mettre en avant visuellement celles-ci à l'aide d'images, que faire ?

L'Union européenne, championne du multilinguisme, utilise les codes ISO-639-1, une norme listant les langues à l'aide d'abréviations de deux lettres. Par exemple :

  • FR = français
  • EN = anglais
  • IT =italien
  • DE = allemand
Notons qu'il existe ausi une norme ISO-639-2 avec des codes à trois lettres (deux lettres ne peuvent représenter en théorie que 676 langues alors qu'il en existe des milliers).

Sur le portail de l'Union européenne et la plupart des sites officiels les codes sont représentés par des pictogrammes sur la pré-home (une page intermédiaire avant la page d'accueil dont l'utilisation est un autre débat...).



Les pages intérieures reprennent le système de menu déroulant, plus à même d'économiser l'espace à l'écran, ce qui est d'autant plus important que le nombre de langues est important (l'Union compte 21 langues officielles) et que ce menu a vocation à être présent à un emplacement clé de la page web. Ces icônes sont documentées ici [en].

Notons que la langue du site de destination est affichée à l'aide du même picto :



L'usage des codes ISO fonctionne bien car il est associé à un texte dans la langue en question.

En revanche on peut se demander s'ils peuvent remplacer les petits drapeaux que l'on trouve parfois, comme ici sur le site www.pourdesvoituresmoinspolluantes.org :





L'intérêt de cette formule est que les drapeaux sont reconnus par les utilisateurs, qu'ils prennent moins de place qu'un texte tout en évitant d'imposer la manipulation d'un menu déroulant.

Les drapeaux fonctionnent sur ce site car ils n'indiquent pas seulement la langue mais aussi le pays concerné : chaque drapeau lie à une page dont le contenu est spécifique à chaque pays.

En revanche leur usage est à déconseiller lorsqu'il s'agit seulement d'indiquer la langue. Il est très peu politiquement correct de proposer à un américain ou encore moins un irlandais de cliquer sur l'Union Jack pour afficher une page en anglais ou ne laisser aux Belges que le choix entre un drapeau français ou néerlandais (sans compter les Belges germanophones). Je ne dénoncerais pas ici de site qui se rendent coupable de cette mauvaise pratique. Cf. Jakob Nielsen : Flag problem [en].

La seule alternative graphique semble donc la reprise des fameux codes ISO, ce qui suppose que les internautes connaisse le code de leur langue et identifient une série de codes comme étant un menu de langues. L'idéal serait un standard graphique qui s'impose de facto ou de jure comme cela s'est fait pour le RSS [en].

On trouve par exemple sur Wikipedia une série d'icones (sous licence libre bien sur) utilisables à cette fin :

Le problème de ces icônes est qu'elles sont très laides d'une part et que personne ne les utilise d'autre part. En revanche on doit pouvoir adapter la couleur à l'environnement du site.

Et vous ? quelle interface préférez-vous pour les sites multilingues ?