Les enjeux du CSS pour l’impression

Copyright : Dmitri

C’est réellement intéressant de voir à quel point dans le monde du web, on oublie que finalement, le support papier reste celui préféré pour la lecture. J’ai notamment eu la curiosité d’observer mes sites et quelques-uns des sites que je consulte régulièrement en mode Apercu avant l’impression : le résultat en est plutôt surprenant.

J’estime que 95% des sites sont incompatibles avec la notion d’impression. Pour ce qui est du rendu des articles de ce blog à l’impression, celui-ci a été optimisé : la plupart des informations annexes à l’article ont été supprimées. Mais je m’aperçois en écrivant cet article, qu’il me reste un souci de marges légèrement étroites à corriger ! (Je le ferai ce week-end, si j’en trouve le temps !)

Le papier présente en premier lieu l’avantage de proposer une navigation rapide des textes. A tout moment, le lecteur a la possibilité de revenir à un passage antécédent pour se remémorer des informations. Il a donc la possibilité d’y annoter des éléments sans altérer l’œuvre principale. D’ailleurs, d’après Jakob Nielsen, professeur, écrivain et consultant sur l’ergonomie du web et le web design, la lecture sur écran est en moyenne 25% moins performante que la lecture sur papier –  vous avez la possibilité de lire l’article Be Succinct ! (Writing for the Web) de Jakob Nielsen via le lien précédent, si vous voulez en savoir plus.

Les polices utilisées sur le web ne sont parfois pas adaptées au confort que doit proposé l’écran. Aussi, devant un contenu numérique, le lecteur a beaucoup plus tendance à lire de manière discontinue, en parcourant la page au gré de ses envies, au gré de ce par quoi son œil est attiré. Il sera sans cesse perturber par les animations contextuelles, les publicités animées ou les liens hypertextuels. En entrant dans le cadre de la lecture sur support papier, le lecteur se conditionne tout de suite à lire un texte plus dense, de manière plus décontractée.

Harris Interactive, une société européenne spécialisée dans le domaine des études interactives, a sorti une étude sur le sujet en 2011 déclarant que 93% des français préfèrent la lecture d’un livre sur papier que celle d’un livre sur écran. Et que 77% des français anticipent que les livres papiers resteront plus agréables à lire que les livres numériques d’ici 2021.

En mars 2013, une nouvelle étude réalisée cette fois par Opinion Way pour le Syndicat National de l’Edition (SNE) démontre que 85% des Français n’ont jamais lu en partie ou en totalité un livre sur support numérique et que seulement 10% d’entre eux envisagent de s’y mettre. A l’heure où les moniteurs se font de plus en plus intrusifs dans notre vie quotidienne, l’impression a encore de beaux jours devant elle : c’est donc la raison pour laquelle le web a tout intérêt à ne pas négliger ses lecteurs sur papier.

Publicité digitale et revenus

Copyright : Aunti Juli

Il existe plusieurs manières de générer du profit au moyen de la publicité digitale. Un détail me paraît important à souligner ici si l’on souhaite prendre en main le système économique d’un site : selon la notoriété de celui-ci, le type des annonces publicitaires implémentées ne sera pas le même, et le mode de paiement de l’annonceur sera complètement différent.

Il existe aujourd’hui trois principales modalités
de paiement possibles à négocier par les agences ou les annonceurs : le CPM, le CPC et le CPA. Vous pouvez toujours relire cet article sur l’organisation autour de la publicité digitale, si les notions d’annonceur, d’éditeur ou d’habillages par exemple ne sont pas claires pour vous.

Le Coût Pour Mille (CPM)

Le CPM, le Coût Pour Mille affichages, est plutôt réservé aux sites dont la notoriété est forte. L’annonceur paie à chaque impression de la page sur laquelle est proposée ses publicités. En clair, à chaque fois que la page est vue par un utilisateur, l’annonceur est tenu de verser un montant, qui sera fixé au préalable, à l’éditeur.

Le Coût Pour Mille affichages est ainsi négocié pour toute nouvelle insertion publicitaire. 50€ CPM par exemple, signifie que l’éditeur touchera 50€ pour 1000 impressions de la page concernée par l’annonce publicitaire. Une impression de page correspondant à un seul affichage d’une page, l’éditeur touchera donc la somme de 50/1000 soit 5 centimes à chaque fois qu’un internaute voit la page concernée par la pub. Concrètement, mille impressions de pages représentent une page vue mille fois.

Comme vous vous en doutez, le CPM est sans aucun doute préconisé par toutes les sociétés qui ont un fort trafic sur leur site. Les habillages publicitaires peuvent par exemple bénéficier de ce mode de paiement. En revanche, un petit blog, le mien par exemple, ne bénéficiera pas nécessairement d’un taux de conversation suffisamment important pour intéressé les annonceurs.

Le Coût Par Clic (CPC)

Le Coût Par Clic, simplement abrégé CPC, fonctionne tout autrement ! Cette modalité indique que l’annonceur ne paie l’agence
éditrice de sa publicité que si un clic est fait sur son annonce. Concrètement, c’est par le biais de l’action de l’internaute sur l’annonce publicitaire prédisposée que l’entité proposant l’espace de promotion est rémunérée.

C’est le modèle typiquement utilisé par Google AdSense ou encore VShop pour rémunérer les entités implémentant leurs publicités. Ici, tant que l’éditeur ne génère aucun clic grâce à son affichage publicitaire, il ne reçoit aucun revenu, quelque soit la fréquence de diffusion de la campagne. Ainsi, l’annonceur de prend aucun risque en termes de promotion de sa marque. Et cela lui permet, de manière générale, d’assurer une promotion probablement plus importante, en terme de durée je veux dire, que celle mise en place pour un mode de paiement CPM.

Si l’on reprend l’exemple des habillages publicitaires, l’annonceur peut décider les clics vers sa marque seront rémunérés. Il arrive que celui-ci paie également l’espace qui lui est alloué. Et il se peut aussi que les deux modes paiements, CPM et CPC, soient discutés en parallèle : un habillage peut coûter 80€ CPM et 0,50€ CPC, soit 8 centimes à chaque affichage de la page, auxquels on ajoute 50 centimes à chaque fois qu’un internaute clique sur la pub. J’ai pris volontairement des prix ronds, et probablement plus élevés que la réalité, histoire que vous puissiez suivre, mais tout est imaginable !

Le Coût Par Actions (CPA)

Enfin, le troisième type de paiement est le Coût Par Actions, abrégé CPA. Le Coût Par Actions implique les actions de l’utilisateur pour qu’il y ait une rémunération quelconque de la part de l’annonceur. Ces actions peuvent être la validation d’un formulaire, l’achat d’un produit identifié, le téléchargement d’une application ou d’un produit, etc.. Le CPA est ainsi comparable au système d’affiliation qu’offrent des entreprises comme Amazon, iTunes ou la Fnac par exemple.

Le principal inconvénient d’un mode de paiement CPA est que l’éditeur permet une certaine visualisation de l’annonceur à travers son site sans pour autant pouvoir garantir le moindre bénéfice. L’internaute peut être amené à consommer autre chose que le lien promotionné sur le
site de l’annonceur grâce à l’éditeur par exemple : dans ce cas, l’éditeur ne toucherait pas un centime bien qu’il ait amené l’utilisateur à la consommation. Aussi, le produit concerné par la publicité peut être indisponible ou le lien cassé, ce qui rendrait également le revenu de l’éditeur nul. De nombreuses situations peuvent réduire l’impact en termes de revenus de ce genre d’annonces publicitaires.

Comme vous pouvez le voir, tout est une question de stratégie en matière de publicité pour le web. On peut faire cohabiter deux des solutions proposées ici pour un même site, ou une même application conçue pour le web. Il s’agit de bien réfléchir au préalable à l’étendue des disponibilités, et de penser l’architecture d’un site en fonctions des futures pavés numériques publicitaires qui viendront s’y ajouter.

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 ?

La collection "The web designer’s idea book"

Copyright : Andy Sowards

Afin de rester à l’ordre du jour au niveau des tendances graphiques actuelles, j’ai eu l’occasion de profiter d’une série de livres sur les nouvelles prédispositions du webdesign, une collection signée Patrick McNeil. J’ai, pour ma part, en ma possession (ou presque) le premier de la série : MCNEIL Patrick. 2008. The Web Designer’s Idea Book. United States : HOW Books. 256 p..

Dans ce premier tome de cette série, près de 700 sites sont référencés afin de fournir aux lecteurs un ensemble de bonnes pratiques pour la conception de maquettes web. Ces différents sites sont classés selon leur type, leur appartenance structurelle d’un point de vue design, les couleurs prédominantes de leurs pages web ou encore leurs thèmes. J’en profite ici pour vous proposer en lecture, un texte de Joshua David McClurg-Genevese, un directeur artistique et designer senior de la société American Electric Power, qui décrit l’ensemble des éléments du design.

Et donc, selon Patrick McNeil, si l’on crée un site personnel, le design à concevoir doit être pensé complètement différemment que celui créé pour un site servant de vitrine à une entité offrant des services web par exemple. Dans cette même optique, on peut imaginer qu’attribuer une couleur verte à une page web c’est avant tout lui affecter la notion de flexibilité ou lui conférer des ambiances environnementales.

Un autre des points que j’ai apprécié sur ce livre est l’agencement d’une palette de couleurs hexadécimales située de manière connexe à l’ensemble des sites proposés sur une double page. Ces couleurs peuvent ainsi permettre au concepteur de recréer une atmosphère particulière, grâce à des variations qui lui ont plu.

Je pense qu’il est important de s’intéresser aux dernières évolutions liées au design des pages du web. Bien que ces préoccupations peuvent sembler être au premier abord celle du graphiste ou de l’intégrateur, chaque développeur doit être en mesure de penser son travail en fonction des éléments présents sur les maquettes conçues à l’énoncé du besoin. Ce dernier point doit être observé afin de se préparer au mieux à l’implémentation de ces maquettes, que ce soit pour générer de l’interactivité, ou pour mettre en place des modules techniques bien précis, qui nécessitent un vrai développement.

The Web Designer’s Idea Book permet entre autres, de bien comprendre les bonnes pratiques permettant à un espace web de fournir des éléments sémantiques, compréhensibles de tous. Je vous recommande donc cette collection de livres, que vous retrouverez sur Amazon.

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