Ponctuation et CSS content

Copyright : Emily Mathews

La propriété content en CSS permet d’afficher du texte en CSS pour bien des navigateurs. Cette propriété est d’ailleurs plutôt bien supportée, car même Internet Explorer 8 est en mesure de la comprendre. Bon, Internet Explorer 7 ne comprend pas cette propriété, mais comme dirait Uma Turman pour Schweppes "Hey, what did you expect ?". :)

Seulement voilà, on peut parfois se retrouver bien embêté à l’utilisation de cette propriété content, car certains caractères, liés à la ponctuation, ne sont pas correctement encodés directement dans les feuilles de style. Il faut en réalité utiliser la valeur Unicode de ces caractères si l’on souhaite les voir s’afficher avec les sélecteurs :before et :after. Les valeurs Unicode commencent toujours par un antislash.

Je vous propose aujourd’hui un tableau, non exhaustif, de caractères liés à la typographie et la ponctuation, telle qu’elles sont connues par les littéraires.

Symb. HTML ASCII Description CSS content
" " " Guillemet double \0022
& & & Esperluette \0026
< &lt; &#60; Signe inférieur \003c
> &gt; &#62; Signe supérieur \003e
  &nbsp; &#160; Espace insécable \00a0
« &laquo; &#171; Guillemet gauche \00ab
» &raquo; &#187; Guillemet droit \00bb
&ensp; &#8194; Espace demi-cadratin \2002
&emsp; &#8195; Espace cadratin \2003
&thinsp; &#8201; Espace maigre \2009
&zwnj; &#8204; Antiliant sans chasse \200C
&zwj; &#8205; Liant sans chasse \200D
&lrm; &#8206; Marque gauche-à-droite \200E
&rlm; &#8207; Marque droite-à-gauche \200F
&ndash; &#8211; Tiret demi-cadratin \2013
&mdash; &#8212; Tiret cadratin \2014
&lsquo; &#8216; Guillemet-apostrophe culbuté \2018
&rsquo; &#8217; Guillemet-apostrophe \2019
&sbquo; &#8218; Guillemet-virgule inférieur \201A
&ldquo; &#8220; Guillemet-apostrophe double culbuté \201C
&rdquo; &#8221; Guillemet-apostrophe double \201D
&bdquo; &#8222; Guillemet-virgule double inférieur \201E
&#8223; Guillemet-virgule double supérieur culbuté \201F
&dagger; &#8224; Obèle \2020
&Dagger; &#8225; Double obèle \2021
&bull; &#8226; Gros point médian \2022
&hellip; &#8230; Points de suspension \2026
&permil; &#8240; Pour mille \2030
&prime; &#8242; Prime \2032
&Prime; &#8243; Double prime \2033
&lsaquo; &#8249; Guillemet simple vers la gauche \2039
&rsaquo; &#8250; Guillemet simple vers la droite \203A

Can I Use …?

Copyright : Can I Use

Je vous en parlais il y a quelques semaines alors que je vous présentais ce que sont l’amélioration progressive et la dégradation élégante ou encore en décembre dernier alors que je vous parlais de la propriété hyphens en CSS

Le site Can I Use est un utilitaire permettant de rapidement visualiser quels navigateurs implémentent les dernières fonctionnalités du web. Pour ma part, j’utilise ce site à chaque fois que je tombe sur une nouvelle spécification du web et que je ne connais pas son comportement sur l’ensemble des navigateurs. C’est devenu une sorte de réflexe chez moi, qui m’a permit d’éviter bien des soucis, et d’accroître mon temps de développement… Depuis le 19 juillet, Can I Use nous propose une nouvelle version de son architecture et de son design !

Les dernières propriétés mises en avant

L’une des premières choses mises en place par Alexis Deveria, le créateur de ce méga site, est la réorganisation des fonctionnalités par ordre décroissante d’ajout. L’idée est de pouvoir permettre à tous les utilisateurs de Can I Use de rapidement entrevoir les dernières propriétés décrites. Mais bien d’autres choses sont désormais possibles.

Quelques données géographiques ajoutées

Can I Use implémente les données extraites de StatCounter, un autre site génialissime qui permet de connaître les statistiques de l’usage des navigateurs dans le monde. Désormais, Can I Use utilise également des informations sur les différentes régions géographiques proposées par StatCounter. On peut maintenant sélectionner un pays en particulier et obtenir des données précises sur le support d’une fonctionnalité selon cette zone territoriale.

A la première visite du site « refait », la localisation de l’utilisateur est détectée, et Can I Use propose d’afficher les statistiques en prenant en considération cette information. Il y a également la possibilité de sélectionner une région aléatoire grâce à la colonne d’options située à côté des tableaux.

Ces données prédéfinies seront toujours disponibles et automatiquement chargées à chaque connexion sur le site.

Des tableaux sur les supports améliorés

Les tableaux décrivant le support des propriétés CSS, HTML ou autres, sur ch acun des navigateurs ont été améliorés. Il y a maintenant la possibilité de voir un plus large panel de navigateurs sélectionnés au bon vouloir de l’internaute. Toutes les versions d’un navigateur peuvent être entrevues.

Des infobulles s’ajoutent au survol d’une version de navigateur. Elles décrivent explicitement le comportement de ce navigateur, ainsi que l’usage mondial (ou d’une région donnée) en pourcentage de celui-ci.

L’expérience utilisateur sur mobile est également mieux perceptible pour le visiteur de Can I Use. On est désormais capable de sélectionner rapidement l’ensemble des navigateurs d’un mobile, afin d’en évaluer ses capacités.

La famille Simpson en CSS

Copyright : Amusing Time

En voilà une idée saugrenue, non ?! Tel est le challenge que s’est pourtant donné Chris Pattle, un développeur reconnu de la communauté du web originaire du Royaume-Uni.

Le CSS devient un langage extrêmement puissant, que bien des personnes sous-estiment à nos jours ! Chris Pattle s’est donc mis à décomposer chacun des personnages qu’il a eu envie de représenter en plusieurs formes géographiques, qu’il s’est amusé à superposer. Ainsi, en HTML, la tête d’Homer Simpson ressemble à ça :


<div id="homer">
<div class="head">
<!-- Cheveux et haut de la tête -->
<div class="hair1"></div>
<div class="hair2"></div>
<div class="body head-top"></div>
<div class="no-border body head-main"></div>
<!-- Le 'M' au-dessus des oreilles -->
<div class="no-border m1"></div>
<div class="no-border m2"></div>
<div class="no-border m3"></div>
<div class="no-border m4"></div>
<!-- Le cou -->
<div class="no-border neck1"></div>
<div class="body neck2"></div>
<!-- L'oreille -->
<div class="body ear">
<div class="no-border inner1"></div>
<div class="no-border inner2"></div>
<div class="no-border body clip"></div>
</div>
<!-- La bouche -->
<div class="mouth">
<div class="mouth5"></div>
<div class="mouth2"></div>
<div class="mouth1"></div>
<div class="mouth7"></div>
<div class="no-border mouth3"></div>
<div class="no-border mouth4"></div>
<div class="no-border mouth6"></div>
<div class="no-border mouth8"></div>
</div>
<!-- L'œil droit -->
<div class="right-eye">
<div class="no-border right-eye-pupil"></div>
<div class="no-border body eyelid-top"></div>
<div class="no-border body eyelid-bottom"></div>
</div>
<!-- Le nez -->
<div class="body nose"></div>
<div class="body nose-tip"></div>
<!-- L'œil gauche -->
<div class="left-eye">
<div class="no-border left-eye-pupil"></div>
<div class="no-border body eyelid-top"></div>
<div class="no-border body eyelid-bottom"></div>
</div>
</div>
</div>

Rien que ça ! J’ai placé ce code sur ce jsFiddle que vous pouvez modifier à volonté si ça vous dit de jouer avec les éléments HTML et CSS. Et ça donne ça :

Bien évidemment, avec tous les border-radius utilisés, Internet Explorer 7 rend une image assez « carrée » d’Homer Simpson, mais il reste globalement reconnaissable. Chris Pattle réalise donc un véritable exploit à mon sens avec sa vision de Marge, Lisa, Bart et Maggie en CSS. Vous avez la possibilité de consulter sa page consacrée aux personnages des Simpson en CSS à travers ce lien.

Revenge.css, un addon qui se venge !

Copyright : heydonworks

revenge.css vous fera sans aucun doute sourire ! Cette feuille de style CSS été créée pour dénoncer les comportements dépréciés en HTML d’une page sur le web. revenge.css utilise ainsi la propriété content ainsi que le sélecteur :after.

Mais ne vous attendez pas à ce qu’il vous prévienne « cordialement » ! revenge.css se venge, comme son nom l’indique ! Tous les liens malformés, les attributs dépréciés pour un doctype prédéfini, les éléments en blocs dans les éléments « en ligne », et bien d’autres erreurs encore, vous seront signalés par le biais d’un message sur fond rouge écrit en… Comic Sans, bien sûr !

Sur HeydonWorks, vous trouverez donc un petit marque-page à glisser dans vos favoris. Et ensuite, vous pourrez commencer la navigation, et observer ce qu’il se passe. Je vous propose de regarder une capture de la page de mon blog sur Facebook !

Revenge.css

Le rendu est pas mal, n’est-ce-pas ?! Je ne m’attendais absolument pas à ça, mais Facebook, comme n’importe quel autre site, utilise des éléments vides, des balises <a /> pour en faire des boutons, des <div /> dans des éléments inline…. et j’en passe !

A part cet aspect très drôle du fichier, revenge.css peut tout de même vous servir, de manière très sérieuse, à optimiser votre contenu si c’est possible, car il faut prendre certaines des erreurs soulevées avec parcimonie. Je vous souhaite donc bien des sourires avec revenge.css. :)

Amélioration progressive et dégradation élégante

Copyright : stevendepolo

Aujourd’hui, aucun navigateur ne peut prétendre permettre l’utilisation de toutes les spécifications de l’HTML5, ni même de toutes les propriétés prévues pour le langage CSS3. Ces langages n’en restent pas moins utilisables et permettent de simplifier la vie des développeurs.

On peut alors avoir recours à deux grands procédés pour mettre en place ces nouvelles fonctionnalités de façon à ce qu’elles soient au maximum comprises des navigateurs : l’amélioration progressive et la dégradation élégante.

Qu’est-ce-que l’amélioration progressive ?

L’amélioration progressive consiste à créer d’abord des fichiers compréhensibles et interprétables par tous les navigateurs, pour ensuite y ajouter des améliorations visuelles et/ou sémantiques pour tous les navigateurs qui peuvent les comprendre. Il s’agit donc de créer des pages web "basiques" qui seront par la suite agrémenter de nouveaux éléments.

A titre d’exemple, on peut choisir de créer un fond en dégradé à l’aide d’une image répétée sur un axe pour un navigateur comme Internet Explorer 7, et décider ensuite d’utiliser la fonction linear-gradient() pour obtenir un dégradé plus précis, qui sera généré sans image. Mieux encore, on peut considérer que ce dégradé n’a pas d’influence sur le contenu du site et décider que les anciens navigateurs peuvent avoir une couleur unie en arrière-plan. De cette manière, on allège aussi le poids de notre fichier CSS.

En clair, l’amélioration progressive permet d’avoir une expérience utilisateur de base conçue de façon à ce que tout navigateur soit en mesure de proposer un même schéma de parcours pour tout internaute. La particularité de cette conception, c’est que ces pages devront nécessairement être construites en ayant conscience de l’optimisation qui peut y être apportée. De nouvelles fonctionnalités seront ainsi réfléchies au préalable et viendront compléter cette expérience utilisateur de base pour les navigateurs capables d’implémenter ces propriétés.

Qu’est-ce-que la dégradation élégante ?

La dégradation élégante est une technique par laquelle, on s’applique d’abord à créer des fonctionnalités pour les "meilleurs" des navigateurs, ceux capables de supporter la quasi-totalité de la solution envisagée. Puis, elle consiste à ensuite prendre en considération les plus anciens navigateurs, en leur spécifiant des comportements moindres, à la sensorialité complètement différente, mais qui seront supportés par ceux-ci. C’est par exemple avoir recours aux balises <noscript /> pour spécifier un comportement différent si le navigateur qui parcourt la page n’admet l’utilisation de JavaScript.

Dans le cadre de l’HTML5, il s’agit parfois de proposer des solutions souvent plus lourdes ou moins performantes aux navigateurs ne supportant l’ensemble des normes actuelles. Lorsque sont créés des <canvas />, une implémentation permettant de réaliser des images de manière dynamique, on peut préciser à l’intérieur des balises de cet élément, une solution alternative qui ne sera prise en compte que par les navigateurs ne supportant l’élément. Ainsi, sur Internet Explorer 6, une image statique par défaut peut être proposée à l’utilisateur.

L’idée ici est de bien cibler au préalable les fonctionnalités cruciales du site avant toute création. Cela permet au moment de l’intégration, de pouvoir se focaliser sur l’essentiel du visuel à mettre en place. Un exemple familier de dégradation élégante est l’attribut alt pour les images. C’est devenu une habitude, préconisée par le W3C, mais c’est avant un moyen de permet aux anciens navigateurs d’afficher un texte par défaut, descriptif de l’image qui ne sera pas lue.

Comment savoir quelle solution adopter ?

Il faudra sans cesse vous posez la question suivante : Qu’y a-t-il de mieux en termes d’accessibilité pour mes utilisateurs ?. Ces deux solutions peuvent en réalité s’appliquer sur une même page, sur des éléments complètement différents.

A titre d’illustration, si vous êtes un artiste au portfolio conséquent, et que vous avez à l’esprit une mise en page full-Flash ou complètement interactive au moyen d’animations CSS3, vous réfléchirez avant tout à comment réaliser ces animations de la manière la plus simple soit-elle, sans obligatoirement tenir compte des anciens navigateurs. The Walking Man, par exemple, est une animation full-CSS3 d’Andrew Hoyer qui représente un homme qui marche. Celui-ci est visible mais complètement immobile sur Internet Explorer 7. → dégradation élégante

En revanche, si vous souhaitez que la police choisie pour le texte de votre site possède des contours beaucoup plus lisses, vous pouvez toujours ajouter ce comportement grâce à la propriété -webkit-font-smoothing que seuls les navigateurs basés sur Webkit comprendront. → amélioration progressive.

En ce qui me concerne, je vais privilégier au maximum l’amélioration progressive dans mes implémentations. Je pense que cela permet en toute situation de créer une solution suffisamment stable, qu’un grand nombre de navigateurs sera en mesure d’interpréter. Je trouve ça important d’accorder un temps de développement pour les anciennes plateformes car, malheureusement, bien des internautes les ont encore sous la main.

Quoi qu’il en soit, un des meilleurs sites pour vous aider à votre tâche est, à mon sens, Can I Use. Il vous permettra de tester une nouvelle propriété et de rapidement savoir quels navigateurs sont en mesure de l’adopter.

Je serais curieuse d’avoir vos retours quant à vos habitudes de conception en matière de développement. Quelle approche vous semble la plus logique ?

Refonte graphique : une identité visuelle

Copyright : Gemma Evans

Enfin, afin de réaliser une bonne refonte graphique, il est important de bien identifier ce qui fait l’identité visuelle de votre site. Tous les éléments visibles de votre marque, liée à votre activité, comme les couleurs, les formes, l’apparence finale de votre structure actuelle graphique forment l’identité de votre marque : ce par quoi elle est reconnaissable d’entre mille.

Perfectionner son identité visuelle

Pour éviter de complètement désorienter l’internaute, il faut tenter de garder certaines pratiques de l’ancien site. Il peut s’agir des couleurs, de l’environnement graphique ou simplement d’un plan de site assez similaire. L’univers graphique, quoique amélioré, doit posséder quelques similitudes avec l’ancienne interface du site. C’est une bonne pratique pour permettre à l’utilisateur de rapidement se retrouver dans un endroit qui lui semblera familier. L’idée est de lui fournir un espace aussi agréable qu’usuel.

Les anciennes versions de Facebook proposaient déjà des déclinaisons de charte graphique à partir du fameux bleu #44619D : ainsi, changer cette couleur reviendrait à bouleverser les habitudes des utilisateurs de ce réseau social. Cet ensemble de couleurs se retrouve à chaque nouvelle version du site. Bien évidemment, l’interface est sans cesse revisitée et les teintes ne sont pas exactement les mêmes, les icônes changent, etc., mais une certaine linéarité persiste. Facebook s’est créé une véritable identité. Et les lecteurs habitués restent capables d’avoir un usage optimal de l’interface.

Avant/Après d'une page sur Facebook

Décider de l’évolution du logo

La question de l’évolution du logo peut devenir essentielle. On peut choisir de le faire évoluer lors d’une refonte pour en modifier le message ou pour sublimer sa simplicité. On peut en contre-partie choisir de le conserver pour transmettre les mêmes valeurs au nouveau design créé. Dans tous les cas, il convient de réfléchir à ce qu’apporte le logo actuel et à ce qu’une évolution de celui-ci pourrait apporter. Encore une fois, l’idée n’est pas de bouleverser totalement le design de la marque : cela pourra donner l’impression qu’il s’agit d’une nouvelle entité et ce n’est absolument pas le but recherché par les graphistes.

Il faut faire une étude de l’existant et du contexte dans lequel évolue le logo avant de décider de totalement le modifier : Starbucks, par exemple, a au fil des années proposé un logo assez proche du précédent pour aujourd’hui lui préférer une version totalement épurée.

Evolution du logo Starbucks

Plusieurs questions interviennent au cours de l’élaboration d’une refonte comme le précise l’excellent article Art Direction and Design écrit par Dan Mall figurant sur le site A List Apart : Est-ce-que les couleurs choisies s’adaptent correctement à la marque ? Est-ce-que les couleurs choisies vont bien ensemble, ne créent-elles pas un sentiment d’inconfort au lecteur ? N’est-il pas préférable de privilégier des couleurs web-safe ? — Les couleurs dites web-safe constituent une palette des 216 couleurs ayant la même apparence quel que soit l’ordinateur ou le système d’exploitation de l’internaute.

Mettre en place une véritable structure typographique

D’un point de vue typographique, on peut laisser libre court à toutes les fantaisies mais il apparaît essentiel de favoriser la facilité de lecture. La police choisie ne doit pas fatiguer l’œil du visiteur et doit convenir à tous types d’âges et de visions.

De manière générale, dans le monde du web, on opte donc pour une police traditionnelle pour le texte global telle que les polices Arial, Tahoma, Verdana, Helvetica, etc. Ces polices sont dites sans-serif. Une police sans-serif est une police qui ne possède pas de sérifs, comme son nom l’indique. Les sérifs sont les petites césures situées à la fin des contours des lettres en typographie. Les polices sans-serif procurent à un texte son caractère neutre. C’est d’ailleurs la raison pour laquelle elles sont généralement utilisées pour le corps de texte. Elles ont aussi l’avantage de garantir une apparence similaire quelle que soit la résolution de l’écran de l’internaute.

Pour les titres, les citations ou les emphases, d’autres familles de polices apparaissent : semi-serifs, monospaced, script, etc.. Elles sont alors complètement soumises au choix du designer : l’empattement typographique n’est alors plus pris en compte.

Un autre point à ne pas négliger : lorsqu’il s’agit de polices complètement originales telles que les polices Museo Slab ou Capsuula en guise d’illustrations, il faut savoir que pour permettre à tous les internautes d’apprécier la lecture des caractères, il faut absolument "installées" ces polices. On utilise alors l’attribut @font-face en CSS afin qu’elles soient rendues disponibles pour les ordinateurs qui n’en sont pas équipés. Cette installation nécessite plusieurs types de fichiers (TrueType .ttf, OpenType .oft, Embedded OpenType .eot pour Internet Explorer et/ou Scalable Vector Graphics .svg). Et surtout, il n’est pas recommandé de faire un usage trop important de ces polices originales, car plus celles-ci seront nombreuses, plus le chargement des pages pour l’utilisateur d’un site sera long.

Refonte graphique : un système économique

Copyright : Ben Garratt

Hier, je vous parlais des bonnes pratiques lors d’une refonte graphique. Pour tout vous résumer, je parlais essentiellement dans un premier temps des améliorations de l’interface qui doivent être mises en place pour une prise en main simple de celle-ci par l’utilisateur.

Aujourd’hui, je vais vous parler d’un point que certains peuvent oublier et qui pourtant est essentiel à toute conception préalable. Il s’agit de savoir comment imaginer la monétisation d’un site. Bien évidemment, un portfolio n’aura pas nécessairement ce besoin, mais il me paraît essentiel d’ajouter cette réflexion lors de la mise en place d’un projet de refonte graphique.

Penser un système économique fiable

Un autre des points importants à ne pas négliger lors de la refonte d’un site est son aspect économique. Un site à fort trafic doit alors s’assurer des conséquences de la future mise en ligne d’une refonte. Il faut sans cesse penser à optimiser au maximum l’accès aux services proposés qui accroissent les profits réalisés par le site ; et il faut imaginer les emplacements publicitaires de façon à ce qu’ils génèrent des revenus sûrs à la société. D’un point de vue marketing, on vous parlera sans aucun doute de la ligne de flottaison, qui délimite la partie visible d’un contenu avant qu’un utilisateur ne fasse défiler la page. Il est vrai que plus un écran publicitaire sera placé en haut de page, plus celui-ci sera vu, et donc potentiellement attirant pour les internautes. Sur le plan ergonomique, proposer un affichage des fonctionnalités importantes du site au-dessus de cette ligne de flottaison a également son intérêt.

Plus le site possédera un trafic important, plus il sera en mesure de proposer des encarts publicitaires appropriés. Permettre la disposition d’habillages publicitaires de partenaires par exemple, et garantir le positionnement des bannières et des modules de promotion de qualité sont des avantages clés d’un point de vue marketing. Google Adsense et Ligatus sont des services publicitaires (que l’on peut utiliser à ces fins) permettant à un site de réaliser des revenus en fonction des clics et du trafic journalier du site.

Concevoir ces espaces publicitaires de manière concrète

A l’heure de la conception, des maquettes je veux dire, les pages doivent d’ores-et-déjà être imaginées de sorte à accueillir les éventuels pavés publicitaires. Comme je vous le disais ci-dessus, on préconise généralement les hauts de page pour ces insertions car c’est l’emplacement recueillant le plus d’attention de la part des utilisateurs. Mais, en contrepartie, un visiteur habitué aura vite tendance à ignorer de manière plus ou moins inconsciente la lecture des informations situées à cet endroit. C’est la raison pour laquelle certains vous conseilleront d’ajouter des publicités en milieu de page. Je ne suis pas une grande fan de cette pratique, qui pourtant fait parfois ces preuves. Selon moi, un utilisateur complètement ancré dans sa lecture ne prendra pas non plus le temps de s’attarder sur ces annonces. Et de plus, d’un point de vue purement esthétique, je ne trouve pas ça « bien » que l’on coupe un lecteur dans sa recherche d’informations pour de la publicité.

Une étude montre que les publicités sont plus pertinentes lorsqu’elles sont ciblées, c’est-à-dire en rapport avec le contenu de la page parcourue. Toute cette recherche de cohésion doit être orchestrée pour optimiser le rendement. Je vous propose par exemple de lire l’article de Leslie Van Zee (en anglais) sur l’amélioration de l’efficacité de la publicité.

Proposer une véritable identité économique

Favoriser l’identité économique d’un site renvoie au souci de l’amélioration de son trafic : s’il n’y a que peu de visiteurs uniques, le seuil de rentabilité devient faible. Il faut donc appâter la clientèle en innovant et en proposant une ergonomie infaillible. Trois expressions clés apparaissent ici : fidélisation de la clientèle, visibilité du site sur les moteurs de recherche (référencement) et présence du site sur les différents sociaux. Ces trois grandes pratiques sont directement liées à la génération du trafic quotidien d’un site. Proposer une newsletter, des emplacements où l’utilisateur a la possibilité de donner son avis (commentaires d’article, forums, espaces divers de connexion), des flux RSS du site et des flux RSS des différentes catégories du site, des modules avec des articles reliés à celui qui vient d’être lu par exemple, sont des pratiques permettant de donner une meilleure image à votre contenu. L’identité de votre site sera perçue comme une valeur sûre.

Penser aux réseaux sociaux est également très important. Aujourd’hui, il ne faut pas négliger la portée de Facebook qui compte plus de 1,28 milliard d’utilisateurs actifs, de Twitter et ses 645 millions d’utilisateurs et des autres réseaux émergeants : Google +, LinkedIn, Digg, StumbleUpon ou plus récemment Pinterest. Arriver à se positionner de manière fiable et correcte sur ces réseaux ne peut être que bénéfique à son site : c’est un moyen d’informer sur les actualités de votre site et d’améliorer la façon dont les utilisateurs perçoivent le site. Cela permet également d’accroître le nombre de visites du site, et donc d’augmenter ces chances de générer des revenus. Les utilisateurs de Facebook se connectent pour savoir ce qu’il y a de tendance ou de nouveau auprès de leurs proches mais aussi parmi les pages qu’ils ont décidé « d’aimer ». Et de manière tout à fait inconsciente, presque naïve, un internaute de Facebook se rendra sur un article lié à sa marque favorite qui lui proposera
de jouer à un concours pour gagner une tablette ou de profiter d’une offre exceptionnelle l’invitant à produire un acte de consommation. Bien évidemment, les réseaux sociaux ne garantissent pas à eux seuls un nombre de visiteurs importants. C’est avant tout le référencement d’un site qui fait sa notoriété.

Je vous parlerais donc un peu du référencement dans un prochain article. :)

Refonte graphique : interfaces & utilisateurs

Copyright : Tim Gouw

L’idée d’une refonte graphique n’intervient pas que dans l’optique de modifier l’architecture d’un site. Bien évidemment, tout dépend des cas évoqués, et il se peut que celle-ci soit réellement envisagée. Mais, le principal objectif d’une refonte graphique est de pouvoir conserver certaines bonnes pratiques tout en améliorant l’ergonomie du site et sa prise en main pour l’utilisateur. Elle a pour rôle d’intervenir en tant que mise à niveau technique et conceptuelle. Une refonte graphique permet ainsi d’observer une mise à niveau liée à l’usage évolutif des technologies : un menu vertical était une pratique largement développée il y a quelques années par exemple.

Ainsi, pour mettre en place une refonte graphique, il faut savoir tenir compte de certains éléments bien distincts, mais réellement importants pour ne pas engager une perte sérieuse d’utilisateurs (ou d’argent…). Aujourd’hui je vous propose d’appréhender l’usage de votre site au quotidien par vos utilisateurs.

Évaluer le comportement d’un internaute

Le premier point à prendre en considération est le comportement de l’internaute. L’utilisateur arrive généralement sur un site à la recherche d’un contenu pertinent ou de services simples et efficaces. Il faut donc tout mettre en œuvre pour lui faciliter l’accès à ces fonctionnalités. Un site possédant peu de données peut se permettre de laisser totalement libre court à la pensée graphique, contrairement à un site informationnel.

Un site informationnel doit permettre une lecture agréable des informations. Ainsi, l’architecture structurelle des données est à prendre en compte : l’interface proposée se doit être logique. Au cours d’une refonte, il faut garder à l’esprit que les 90% des utilisateurs d’un site ne sont pas des professionnels en informatique. Ce qui paraît évident à un internaute formé ou initié aux nouvelles technologies ne l’est pas forcément pour tous les internautes. Ainsi, se pose la question de la simplicité du rendu.

En matière d’interface, certains comportements rappellent des usages : un changement de curseur sur un bouton indique sa fonctionnalité par exemple. Beaucoup d’éléments interviennent en amont de la maquette créée, la personne chargée de l’intégrer a tout intérêt à penser le dynamisme des interfaces en vue d’une compréhension universelle de celle-ci.

Favoriser la compatibilité des navigateurs

Vient alors le souci de la compatibilité des navigateurs et de leurs versions multiples. Si aujourd’hui, un professionnel en informatique possède la version 29.0 de Firefox ou la version 11 d’Internet Explorer par exemple, l’utilisateur moyen lui n’a que faire de ces outils. Il s’estime heureux de pouvoir naviguer sur Internet à l’’aide de son navigateur par défaut – Safari 4, Firefox 3.6, Internet Explorer 7, et j’en passe – et n’a d’ailleurs probablement pas conscience de ne pas être à jour en termes de fonctionnalités. En revanche, l’usager s’attend à pouvoir utiliser un site aussi bien que n’importe quel utilisateur. Si vous demandiez à ma mère quelle version d’Internet Explorer, elle serait bien incapable de vous répondre !

Une vigilance toute particulière doit alors être réservée à l’intégration des maquettes élaborées. La moindre page doit subir un ensemble de tests de compatibilité afin d’éviter le maximum de désagréments et d’assurer un confort optimal à l’utilisateur bêta. Alors bien sûr, toutes les fonctionnalités prévues notamment en CSS3, avec les transitions ou les dégradés en background, en HTML5 avec les canvas etc. ne seront pas implémentées sur les anciens navigateurs. Mais l’essentiel à retenir ici, c’est que ces possibilités qui proposent une expérience nouvelle des outils créés pour le web, ne doivent pas être nécessaires au parcours et à la compréhension de l’interface. Une implémentation ne permettant pas d’accéder à un contenu quelconque sur un navigateur en raison de son ancienneté est une mauvaise pratique. Un dégradé manquant lui, en revanche, n’est pas gênant.

Lier l’interface aux usages

Pour une bonne refonte graphique, il faut donc savoir faire un compromis entre les comportements de vos utilisateurs, je parle de leurs habitudes pour consulter votre site, et la nouvelle structure que vous souhaitez mettre en place. Posez-vous ces deux premières questions : « Qu’est-ce-que recherchent les utilisateurs de mon site ? » et « Comment je peux les aider à trouver ces informations avec un parcours agréable ? ».

Ce n’est qu’un premier chapitre sur tout ce que j’aurais à vous dire concernant les refontes graphiques de manière générale. La suite, au prochain épisode… :)

La vie du développeur front-end

Copyright : Radocaj

Ma dernière insertion professionnelle m’a pleinement permis de découvrir le métier de développeur front-end et de me pencher sur les savoir-faire et qualités requises à mettre en œuvre quand on fait ce métier. L’ancêtre du développeur front-end est, sans aucun doute l’intégrateur.

Il y a quelques années, l’intégrateur web était la personne chargée de la découpe des maquettes graphiques pour un rendu en pages web. Avec les avancées technologiques, l’intégrateur est devenu un développeur à part entière et ne s’arrête plus essentiellement aux besoins HTML/CSS d’une page classique sur le web. Aujourd’hui, être développeur front-end requiert nécessairement des qualités en matière de développement et d’algorithmie. L’algorithmie est la base de la programmation. C’est par ce procédé, qui met en œuvre un certain nombre de règles, qu’est rendue possible tout exécution de programme à l’aide d’instructions.

D’un point de vue technique, le développeur front-end doit être en mesure de répondre aux attentes liées à la nouvelle ère technologique que nous vivons. Avant toute chose, il doit rendre possible la même utilisation d’un site à tous les internautes et ce, quels que soient leurs navigateurs, quelles que soient leurs résolutions d’écran et quels que soient les scripts pris en compte sur leurs ordinateurs et systèmes d’exploitation. Il est donc important pour lui de s’intéresser aux avancées liées à l’évolution du web et de ses langages, de comprendre les nouvelles librairies lui permettant d’optimiser son travail et de rester extrêmement attentif en matière de veille, puisque les pratiques du web peuvent devenir obsolètes d’une année à l’autre. Le métier de développeur front-end est un métier aux mutations perpétuelles, dans lequel on apprend tous les jours. Le tout est de sans cesse proposer une interface enrichie mais accessible, en vue des validations graphiques obtenues par une maquette. Une maquette graphique créée sous Photoshop par exemple, possède un certain nombre de calques et est conçue dans le but de fournir un maximum d’informations à la personne qui sera chargée de produire la version web ou applicative finale. Forcément utile à tout projet web, elle ne peut cependant suffire : c’est là qu’apparaît la notion d’interactivité. Donner vie à une maquette, c’est imaginer son comportement futur, comprendre l’utilisation qu’en fera l’internaute et donc anticiper les éléments qu’il faudra mettre en œuvre pour faciliter l’ergonomie de celle-ci. Le développeur front-end intervient à ce niveau.

C’est avant tout la raison pour laquelle le développeur front-end doit avoir une certaine sensibilité graphique. Les différentes fonctionnalités à mettre en place pour les internautes ne sont intéressantes que si celui-ci se sent appelé à utiliser les outils mis à sa disposition. Il lui arrive donc de concevoir et d’orienter les graphistes et/ou clients pour leur indiquer ce qui est en mesure d’être réalisé : il réalise souvent une étude de la faisabilité du projet. L’idée est d’éviter de créer des dysfonctionnements au sein de ses templates et de proposer une interface claire pour l’internaute. Par ailleurs, un bon développeur front-end est en mesure de justifier ses choix en matière d’interfaçage. La solution à apporter doit être considérée comme un outil essentiel de communication entre l’homme et la machine. Ainsi, pour créer une mise en page solide, il apparaît essentiel d’instaurer des processus observables tels que des changements de curseurs au survol d’un bouton indiquant la présence d’une fonctionnalité quelconque ou encore la mise en relief des liens hypertextuels, de permettre les interactions possibles au moyen de scripts et/ou transitions, et de sensibiliser l’utilisateur à la structure architecturale du contenu – qui se doit d’être valorisée par la mise en page. Aujourd’hui, une problématique s’additionne à l’ensemble de ces recommandations : le développeur front-end doit également penser à la portabilité de sa solution, au vu des différents médias susceptibles d’utiliser l’application. Le web ne se limite plus uniquement à ce qui est accessible depuis un écran d’ordinateur. Comme le souligne Brad Frost dans une étude qu’il a menée à terme il y a quelques mois appelée For a future-friendly web, « The web is no longer one-dimensional. It consists of a plethora of devices, including smartphones, dumbphones, e-readers, tablets, netbooks, notebooks, desktops, game consoles, tvs and more. ». *

Enfin, le développeur front-end développe – comme son nom l’indique ! L’intégrateur se contentait d’intégrer des maquettes et de maîtriser des langages tels que l’HTML et le CSS. Le développeur front-end connaît les bases algorithmiques et utilise des structures conditionnelles. De manière générale, l’ensemble du travail des développeurs front-end a lieu sans exécution de scripts côté serveur. En contrepartie, on a recours à d’autres langages de programmation tels que le balisage SSI, Server Side Include, par exemple. Ce langage nous permet entre autres de réaliser des insertions de fichiers en HTML pur grâce à la commande include et de pouvoir utiliser les structures conditionnelles telles que if else elif endif essentielles pour tester si une condition est vraie ou non. C’est principalement ce système qui est utilisé pour mettre en place des habillages, par exemple. L’essor de JavaScript et de librairies telles que jQuery notamment ont aussi conduit aux mutations de ce métier.

Aujourd’hui, l’interactivité a un rôle primordial dans le web. Le contenu est certes à la base de la vie sur Internet, mais l’aspect le plus marquant dans la visite d’un site pour un utilisateur quelconque est son environnement graphique, ludique, interactif et dynamique. Les interfaces riches, les galeries optimisées, le responsive web-design : tous ces éléments ont une incidence sur l’expérience d’un internaute. Le développeur front-end doit affronter la mesure du temps et rester à l’affût des nouvelles technologies pour savoir les implémenter. L’architecture responsive permet une mise à jour instantanée de l’interface web pour satisfaire l’utilisateur en fonction de la capacité et de la résolution du moniteur utilisées pour voir le site en question. C’est par exemple permettre à un internaute une approche différente d’un même site qu’il soit sur son écran, sa tablette iPad, son iPhone ou sur un smartphone quelconque, sans avoir recours à des procédés de redirections en JavaScript ou en PHP.

Avoir pu travailler en tant que développeur front-end m’aura permis de pouvoir différencier réellement les différentes étapes de création lors de la mise en place d’un projet. De par mes différentes expériences professionnelles antérieures, qui avaient jusqu’alors toujours eu lieu dans des entreprises moins importantes en termes d’effectif, j’avais toujours eu pour rôle la qualité de webdesigner et de développeur, dans le sens où il m’arrivait à la fois de devoir créer des maquettes graphiques, d’intégrer ces maquettes et d’assurer le développement de celles-ci à l’aide de bases de données fonctionnelles, notamment par le biais du langage SQL. Je ne faisais aucune réelle distinction entre le développement front et back. Au fil des mois passés à ce poste, je me suis rendue compte que la spécialisation dans un domaine est finalement nécessaire pour véritablement maîtriser celui-ci. Et être développeur front-end est un véritable métier, malheureusement encore trop souvent sous-estimé.