WordPress 4.3, Billie Holiday

William P. Gottlieb

Comme chaque version de WordPress depuis la 1.0, prénommée Miles Davis, la version 4.3 de WordPress porte le nom d’une légende de la musique jazz, Billie Holiday.

WordPress core developers share a love of jazz music, and all our major releases are named in honor of jazz musicians we personally admire.

Cette originalité est dûe au développeur fondateur de ce CMS open source, Matt Mullenweg. Ce passionné de l’écriture aime aussi la musique, avec un amour tout particulier pour les sonorités du saxophone. C’est d’ailleurs son affection pour cet instrument qui l’a conduit dans le monde du web et l’univers des blogs.

Cette nouvelle version de WordPress est sortie le 18 août 2015. Elle améliore, entre autres, le confort de l’utilisateur grâce à de nouvelles fonctionnalités.

 

Un formatage simplifié

L’un des sujets les plus excitants concernant cette nouvelle version de WordPress est la possibilité d’utiliser des raccourcis clavier pour mettre instantanément en forme du texte.

Il est en effet désormais possible, depuis la console visuelle d’un article, de pouvoir créer des titres, des citations, des listes ordonnées ou numérotées, dans le corps de texte, sans avoir à cliquer sur des boutons et sans jamais s’interrompre d’écrire. Cette fonctionnalité met en avant l’appartenance sémantique des éléments d’un site, tout en garantissant une optimisation du temps passé à les structurer.

Les quelques raccourcis désormais disponibles dans l’interface visuelle de WordPress sont décrits dans le paragraphe présent ci-dessous. Par ailleurs, si vous tapez une de ces combinaisons, mais ne souhaitez pas que le formatage automatique se mette en place, il suffit d’appuyer sur la touche Backspace de votre clavier.

        - space → liste <ul>
        * space → liste <ul>
      1. space → liste <ol>
      1) space → liste <ol>
          > text → citation <blockquote>
        ## text → titre de niveau 2 <h2>
      ### text → titre de niveau 3 <h3>
    #### text → titre de niveau 4 <h4>
  ##### text → titre de niveau 5 <h5>
###### text → titre de niveau 6 <h6>

Des mots de passe sécurisés

Une autre des grandes fonctionnalités proposées par la version 4.3 de WordPress est le nouveau système de gestion des mots de passe.

Tout d’abord, l’interface de la création d’un nouvel utilisateur du blog a été modifiée. Dans les versions antérieures à la version 4.3, il était possible, au moment de l’ajout d’un administrateur du blog, d’initialiser le mot de passe de ce nouvel utilisateur en le tapant deux fois. Un indicateur de sûreté était proposé à cet instant à l’utilisateur, lui recommandant d’utiliser au moins sept caractères, des lettres en minuscules et en majuscules, ainsi que des symboles.

Aujourd’hui, par défaut, le nouvel utilisateur reçoit un mot de passe automatiquement généré de manière aléatoire avec un indicateur de sécurité fort.

WordPress new password system

Bien évidemment, il est possible de réduire ce mot de passe, ou de complètement le modifier. WordPress vous signalera alors si celui-ci lui semble sûr, ou si au contraire celui-ci peut facilement être retrouvé. Si le mot de passe que vous choisissez est considéré comme étant faible, un nouveau champ Confirmation du mot de passe se présente dans l’interface.

WordPRess new password system with weak password

Un menu revisité

Grâce à la version 4.3 de WordPress, il est désormais possible de concevoir de nouveaux menus pour son blog depuis l’interface de personnalisation du thème. Il est donc possible de créer en temps réel un menu, de prévisualiser ce composant dans son environnement graphique et de sauvegarder l’évolution de celui-ci pour le mettre à disposition de tous.

L’interface de personnalisation de menu a originellement été proposée à l’aide du plugin Menu Customizer. Cette fonctionnalité existe désormais côté core de l’applicatif. Le principal objectif de cette fonctionnalité est de moderniser la gestion de menu tout en garantissant une expérience utilisateur optimale.

Ainsi, les lecteurs d’un blog n’ont plus à être impactés par des changements de menus intempestifs, car l’administrateur du blog peut mieux tester son environnement graphique avant toute nouvelle publication.

Des bugs corrigés

Une multitude de bugs provenant des versions précédentes de WordPress a été corrigée lors de l’élaboration de la version 4.3 de WordPress. Il est possible d’appréhender chacun des fixs apportés grâce à la liste des tâches corrigées que nous propose l’espace Make WordPress Core de WordPress.

Un hommage à Lady Day

Billie Holiday, aussi surnommée Lady Day, est considérée comme une des plus grandes légendes de jazz de l’histoire afro-américaine. Elle a révolutionné le monde de la musique avec ses vocalises improvisées et sa voix reconnaissable d’entre milles.

Billie Holiday tire son inspiration des classiques de Louis Armstrong et de Bessie Smith. Encore jeune adolescente, elle trouvait réconfort auprès de leurs chansons pendant les moments difficiles. À l’âge de 18 ans, elle est découverte par John Hammond dans un club de jazz de Harlem. Dès lors, son timbre métallique et acide, son phrasé nonchalant et sa souplesse rythmique marquent ses interprétations.

No two people on earth are alike, and it’s got to be that way in music or it isn’t music. – Billie Holiday

Cette année marque le centenaire de la naissance de Billie Holiday, née en avril 1915.

Améliorer l’échange autour de la performance web

O'Reilly Conferences

La première keynote à laquelle j’ai assisté lors de la conférence Velocity est celle d’Aaron Rudger. Aaron Rudger est un technicien possédant une longue expérience en tant que directeur marketing et produit senior chez Keynote Systems en Californie. Son principal objectif, en tant que professionnel référent dans son domaine, est d’établir un univers de développement performant autour des solutions de monitoring de son entreprise sans pour autant déprécier les désirs de ses clients.

Maximize the return of your digital investments est avant tout une prise de connaissance sur le monde dans lequel nous évoluons actuellement, notamment en matière de performance web. La principale question soulevée est celle de la communication entre les équipes marketing et les équipes de développement.

Comme le souligne Aaron Rudger tout au long de son discours, il peut être parfois difficile de faire comprendre aux équipes marketing et commerciales l’enjeu de la performance pour les utilisateurs d’un site internet ou d’une application web. Pourquoi ?  Parce que les clients en veulent toujours plus : plus de publicités digitales, plus de connexions avec les réseaux sociaux, dont le nombre ne cesse d’accroître par ailleurs, plus de pixels captant le comportement des utilisateurs, des images de plus en plus grandes et donc de plus en plus lourdes, etc.. Et bien évidemment, la plupart de ces contenus proviennent de plateformes complètement hors de notre portée, et ne rendent pas nécessairement l’expérience utilisateur satisfaisante.

Selon une étude de la société Forrester réalisée en 2012, près de 32% des acteurs du marketing – directeur marketing, assistant marketing, planner stratégique, media planner, chargé d’études, directeur d’études, manager de la marque, responsable marketing digital, chef de publicité, directeur de clientèle, etc. – pensent que leur département technologique entrave à la réussite budgétaire de leur entreprise. En 2014, Aaron Rudger nous informe que ce nombre est passé à près de 43%. D’après lui, cette croissance souligne simplement que la manière dont le marketing et celle dont les équipes de développement pensent à la performance est de plus en plus divergente.

Parler de temps de connexion inférieur à un certain nombre de secondes pour une page web ne signifie pas grand chose de concret pour tous les « marketeux ». En réalité, c’est toute la notion d’analytics qui n’a pas de grande valeur à leurs yeux. Selon eux, les indicateurs clés de performance d’un bon produit, les Key Performance Indicators, sont l’engagement, la fidélité et la croissance. Il faut donc savoir construire un discours qui dégagera naturellement toutes ces notions dans le contexte de l’entreprise. Parler de l’amélioration du start render en disant par exemple que celui-ci augmentera l’engagement des utilisateurs à terme, et donc aura un impact positif sur les revenus, est une façon de convaincre les équipes marketing de l’intérêt d’un tel projet, qui ne leur semblerait que technique à première vue.

Le principal conseil d’Aaron Rudger serait donc d’élever la conversation pour convaincre les équipes marketing. Il faudrait ainsi, en toutes circonstances, certes mentionner les aspects techniques de nos futurs développements, mais surtout démontrer l’impact final sur la réussite de l’entreprise grâce à la performance technique. Changer sa manière de dialoguer et adopter un discours selon son interlocuteur peut directement jouer en notre faveur. « Create your own sense of ownership around performance that’s driving business impact in your organization. » Aaron Rudger nous propose d’ailleurs un article, Do you speak the same language as your business ?, pour poursuivre les réflexions autour de cette problématique. Vous pouvez également écouter cette keynote grâce à la vidéo ci-dessous.

 

Conférence Velocity

christelle.

Tous les acteurs du web souffrent des mêmes problématiques, à savoir réussir à proposer aux utilisateurs de leurs sites un chargement de leurs pages rapide, posséder une infrastructure leur permettant d’être sereins quelque soit la charge de leurs serveurs, proposer sans cesse une fiabilité sans pareille de leurs services, etc.. C’est dans l’objectif de fournir quelques éléments de solutions à ces questions que se tenait, il y a un peu plus de deux mois, la conférence Velocity dans la ville de Barcelone en Espagne.

J’ai eu l’extrême chance de pouvoir y participer, et c’est dans ce cadre que j’ai réellement pu prendre conscience des énormes progrès qu’il nous reste tous à faire en matière de performance dans le monde du web.

Un évènement O’Reilly

Velocity, c’était avant tout un évènement regroupant plusieurs sérieux protagonistes du web organisé par la maison d’éditions O’Reilly. Le groupe O’Reilly Media a été fondé en 1978 par Tim O’Reilly, un passionné des technologies dont le plan original était de simplement produire un travail de qualité pour des personnes ayant besoin de profiter d’un savoir dans un domaine précis ayant attrait à l’univers de la programmation. Son leitmotiv était le suivant : « Make interesting work for interesting people ».

Tim O’Reilly commence donc à se faire un nom en écrivant des livres techniques, qu’il décide de publier de son propre chef. Âgé de 60 ans aujourd’hui, cet écrivain et chroniqueur continue la publication de livres avec sa maison d’éditions, qui est considérée comme l’une des meilleures à l’international en matière de livres de programmation, voire même de livres autour de l’informatique de manière générale. Il est aujourd’hui l’invité de conférences autour du web dans le monde entier.

Une liste de speakers hautement qualifiée

Pour moi qui découvrais la conférence Velocity en même temps que je découvrais Barcelone, c’était vraiment une expérience enrichissante durant laquelle j’ai longuement pu remettre en question ma manière d’envisager le web de demain. De très nombreux intervenants provenant du monde entier sont venus partager leur expérience dans la matière, et c’était vraiment un honneur pour moi de pouvoir bénéficier de leurs conseils de façon si instantanée, grâce à leur proximité.

J’ai par exemple adoré l’intervention de Patrick Hamann, un ingénieur client-side qui travaille pour le magazine britannique The Guardian. Sa présentation, Breaking News at 1000ms, était un résumé de l’ensemble des tâches qui ont permis à ce magazine, ou plutôt à la version web de celui-ci, de passer sous la barre des 1000 millisecondes pour le chargement de leurs pages : une décision qui a été prise suite à un sondage auprès de 3000 de leurs utilisateurs quant aux différents axes d’amélioration qui pourraient rendre leur navigation plus agréable. La performance est apparue comme un sujet primordial, qui les a conduit à penser la partie responsive de leur site selon l’expression suivante : « Core content should be delivered first », un résultat que vous pourrez apprécier en navigant ici sur http://next.theguardian.com.

J’ai également apprécié retrouver Estelle Weyl, une consultante et développeuse plutôt front dont les compétences ne font plus l’ombre d’un doute. Elle présentait RWD is not a panacea, presque une mise en garde contre tous ces développeurs qui proposent encore qu’une version statique de leur site. Telle était son approche : « Just because no one uses your mobile site, doesn’t mean you don’t need to improve it. Maybe no one uses it because the experience is so bad. ». Pour elle, penser au mobile à l’heure actuelle n’est plus une recommandation, mais une réelle nécessité vis-à-vis du nombre de devices sans cesse en augmentation. D’ailleurs, même Google va se mettre à pénaliser les sites non mobile-friendly

Bien d’autres développeurs, consultants, écrivains et chercheurs se trouvaient à cette conférence, au milieu de nous tous, comme s’ils étaient finalement que des personnes normales, accessibles de tous. Parmi eux se trouvaient entre autres Tammy Everts, Kent Alstad, chercheurs pour Radware, Lyza Gardner, fondatrice de la start-up Cloud Four et co-auteure de Head First Mobile Web, Pamela Fox développeuse et passionnée Ilya Grigorik développeur chez Google, Mark Zeman fondateur de SpeedCurve, Joshua Hoffman administrateur systèmes pour Soundcloud, ou encore Yoav Weiss qui n’est autre que celui qui aura révolutionné le monde des images pour le responsive avec l’attribut srcset et notamment son apport au support de cette fonctionnalité jusqu’alors expérimentale sur Chrome et Robert Treat, un développeur notamment connu pour ses travaux sur PostgreSQL.

Cette conférence, c’était aussi l’occasion de retrouver des acteurs plutôt connus du monde du web : O’Reilly naturellement, Keynote Systems, EdgeCast, Dynatrace, GitHub, Limelight, mais aussi Akamai Technologies Inc., AppDynamics, Pingdom, Telefónica ou encore Aerospike, ThousandEyes, Etsy, Facebook, Mozilla, Google et Cedexis, un groupe que l’on retrouve également en France qui propose des outils de monitoring pour le web. Les technologies RUM, Real User Monitoring, étaient d’ailleurs largement représentées tout au long de ses trois jours. Car, oui, je ne vous l’ai pas mentionné plus tôt : Velocity, c’était trois jours intenses de veille autour de la performance pour le web.

Durant les deux premiers jours, des sessions de « keynotes » étaient programmées le matin, et l’après-midi des conférences sur des thèmes comme l’amélioration des performances pour le mobile, l’arrivée du responsive dans le web et ses conséquences en matière de start render et temps complet de chargement des pages, la mise en place d’infrastructures visant à améliorer la qualité des services pour le web, etc., nous étaient proposées. Le troisième et dernier jour était composé de sessions d’une heure et trente minutes visant à comprendre de manière concrète quelles étaient les mesures prises pour « construire une nouvelle version du web plus forte et rapide » : « Building a faster, stronger web ». En clair, des sessions de tutoriaux nous étaient proposées sur par exemple, la compression des images avec un rapport qualité/poids correct, l’optimisation des requêtes réalisées sur des bases de données internes, l’utilisation d’algorithmes très spécifiques pour réduire le poids des éléments affichés sur une page web… Suivez ce lien pour retrouver le programme des conférences disponibles à cette occasion.

J’ai pu profiter de nombreuses recommandations dont cet article ne fait pas une liste exhaustive. J’ai bien l’intention d’écrire d’autres articles sur l’ensemble des notes que j’ai pu prendre lors de ces différents discours notamment sur l’organisation du code front préconisé par les intervenants, sur la manière dont doit être mise en place un projet responsive – une des choses qui m’a semblé extrêmement pertinente à ce sujet, est de faire travailler les designers et les développeurs en parallèle sur ces travaux, pour ne pas perdre de temps, et renforcer la crédibilité et la mise en place d’un nouveau design, sur l’utilisation de véritables données pour un suivi quotidien de la performance et ce, aussi bien pour les serveurs que pour les fichiers utilisant des technologies diverses.

Une expérience multi culturelle

En bref, Velocity, c’était vraiment un chouette évènement pour directement rentrer un contact avec des grands acteurs du web. C’était aussi l’occasion de parler un peu anglais, un tout petit peu espagnol, et très peu français pour échanger sur le web actuel.

Par ailleurs, Barcelone est vraiment une ville fascinante, où se mêlent bien différentes cultures, et où le dynamisme de la ville semble donner libre cours à l’imagination de tous ses architectes tant ces rues espagnoles sont différentes en termes de design de tout celles que j’ai pour habitude de parcourir. Les barcelonais que nous avons pu croiser maîtriser plus ou moins les trois langues précitées, ce qui n’est clairement pas notre cas, ici à Paris. Un petit plus pas désagréable non plus : à Barcelone, on peut accéder au WiFi gratuitement dans toute la ville ! C’est bien l’une des choses qui m’a pas mal fascinée parmi tant d’autres ! Et il faisait clairement dix degrés de plus qu’à Paris au moment où se tenait la conférence.

Velocity m’aura permis de rencontrer des personnes évoluant dans mon milieu, que je n’ai pas hésité à aborder pour en connaître plus sur leurs actions à venir, ou simplement pour pouvoir récupérer quelques goodies ! La communauté O’Reilly semble définitivement bien solide, puisque Velocity a lieu quatre fois au cours de l’année. D’ailleurs, en 2015, elle se tiendra entre le 27 et 29 à Santa Clara en Californie, le 11 et le 11 août à Pékin, du 12 au 14 octobre à New York, et enfin du 11 au 13 novembre à Amsterdam.

Utilisez Feedly pour rester à l’affût de l’actualité !

Feedly

Cela fait déjà près d’un mois que j’utilise Feedly, grâce à un de mes collègues trop génial ! Et je dois dire que je ne cesse d’être épatée par toutes les possibilités que nous propose ce site !

Feedly est ce que l’on appelle communément un agrégateur de flux RSS. En clair, il permet à tous de pouvoir être rapidement tenus informés des nouveaux contenus présents sur un site web en particulier.

Le format RSS est un type de fichier permettant de décomposer de manière très précise un site web. Il est créé à partir d’un fichier XML, et contient de nombreuses informations sur les mises à jour d’un site. Pour un blog par exemple, le flus RSS permet de savoir à l’instant t si un nouvel article est créé. C’est une manière pour le lecteur de constamment rester à l’affût des dernières actualités, et un moyen pour l’éditeur de pouvoir diffuser ses articles via un plus large réseau.

Et donc, Feedly permet de gérer l’ensemble des sites que vous souhaitez surveiller ! De manière très ergonomique et agréable, Feedly met à votre disposition un champ de recherche vous permettant d’ajouter l’URL que vous voulez suivre. Il est également possible de rechercher, par centres d’intérêt, un site dont la thématique vous plaît. Et l’ensemble de vos liens sont « organisables » : vous avez la possibilité de créer des catégories pour trier l’ensemble des informations qui vous plaisent.

Feedly

Vous pouvez également complètement revoir le design de votre espace sur Feedly. Vous avez la possibilité de lire vos actualités sous la forme de cartes avec lesquelles la photographie contenue dans l’article est mise en avant. Il est aussi possible visualiser vos actualités sous la forme traditionnelle des billets sur Internet (un peu comme le design des articles que je propose sur une page de type « archive » de mon blog).

Il est possible de choisir un thème de couleurs pour sa plate-forme personnalisée, de choisir sa page de démarrage, la couleur des liens, et bien d’autres choses encore… ! Toutes ces améliorations pour votre confort sont disponibles sur la page de Préférences de Feedly.

ONE CHAPTER A DAY a actuellement 8 lecteurs sur Feedly ! Mais je compte sur vous ! :)

Améliorer ses recherches sur Twitter

keiyac

Twitter nous propose depuis toujours d’effectuer des recherches sur l’activité momentanée existant sur son réseau. Mais saviez-vous qu’il est possible d’améliorer l’efficacité d’une recherche sur Twitter ?

Il est en effet possible de pouvoir spécifier précisément ce que l’on recherche sur la plateforme à Twitter. Vous cherchez par exemple des liens à propos d’un sujet précis, ou vous avez envie de lire des tweets envoyés près de la ville de Casablanca : tout est possible !

Je vous propose donc aujourd’hui, en tant qu’astuce du jour, ce tableau aussi disponible sur l’API de Twitter, qui vous permettra de mieux appréhender les opérateurs mis à notre disposition.

Opérateur Pour trouver des tweets…
banane chocolat contenant les mots « banane » et « chocolat ».
« happy hour » contenant l’exacte expression « happy hour ».
soleil OR ciel contenant l’un des mots « soleil » et « ciel », ou les deux.
beyoncé -solange contenant le mot « beyoncé » mais pas « solange ».
#design contenant le hashtag « design ».
from:onechapteraday écrits par l’utilisateur « onechapteraday ».
to:chriiistelle envoyés pour l’utilisateur « chriiistelle ».
@twitter référençant l’utilisateur « twitter ».
« salsa » near: »paris » contenant le mot précis « salsa » et envoyés de Paris.
near:London within:15mi envoyés depuis Londres, à 15 miles près.
martinique since:2014-01-05 contenant le mot « martinique » et envoyés depuis le 5 janvier 2014.
guadeloupe until:2013-12-31 contenant le mot « guadeloupe » et envoyés au plus tard le 31 décembre 2013.
cupcake -fraise :) contenant le mot « cupcake » mais pas le mot « fraise » et ayant une caractère positif.
ratp :( contenant le mot « ratp » et ayant un caractère négatif.
tekken ? contenant le mot « tekken » et posant une question.
rihanna filter:links contenant le mot « rihanna » et proposant des liens hypertextes.
news source:twitterfeed contenant le mot « news » et ayant pour source TwitterFeed.

Créer une feuille de style pour l’impression

oskay

Dans le monde du web, on oublie souvent de penser à l’impression quand on crée le design d’une page. Et pourtant, l’internaute à la recherche d’informations aura sans aucun doute recours à l’impression si le contenu de la page qu’il parcourt lui semble pertinent.

Aujourd’hui, très peu de sites implémentent une feuille de style dédiée à l’impression en présumant que leurs informations apparaissent conformément à leurs attentes. Malheureusement, c’est rarement le cas. Ayant travaillé à plusieurs reprises sur ce type de projet, j’ai pu répertorier une liste non-exhaustive des points à surveiller attentivement.

Mettre en place des règles CSS pour l’impression

Dans un premier temps, il convient de préciser aux navigateurs les règles CSS qui doivent être uniquement apposées dans le cas d’une impression. Il existe deux manières simples de parvenir à cet effet.

La première est de spécifier dans l’entête de la page HTML une feuille de style destinée uniquement à l’impression. Dans l’exemple présenté ci-dessous, on appelle la feuille de style du nom de print.css en précisant que le média destiné à lire la page sera l’imprimante. Ainsi, les styles prévus pour l’impression sont séparés de la mise en page particulière destinée aux différents moniteurs. C’est donc dans l’entête de la page HTML, entre les balises spécifiant le <head>, que l’on utilise cet appel :

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Il est également possible d’utiliser une requête sur le type de média qui parcourt la page HTML et d’ensuite proposer les styles à appliquer dans le cas en fonction de celui-ci. C’est à l’aide des media queries qu’est rendu possible cette intégration.

Les media queries permettent d’indiquer de manière précise à quel type de média sont attribuées les règles énoncées. On les utilise notamment pour la création d’un design évolutif, dit responsive, et permettre l’adaptation d’une application multi-support. Cette fois, il convient simplement d’ajouter au sein d’une des feuilles de style appelée dans la page la condition suivante @media print, et d’insérer les règles CSS concernées au sein de ses accolades.

@media print {
p { // On redéfinit l'élément paragraphe pour l'impression
font-size: 15pt; // On fixe la taille de la police à 15 points
color: black; // On attribue la couleur noire au texte
}
}

Pour ma part, je préfère tout de même réserver une nouvelle feuille de style à ses expérimentations : il s’agit là uniquement de mon point de vue personnel, les deux méthodes étant complètement équivalentes. Avec l’aide de LESS, il est possible de coupler ces deux pratiques, mais j’y reviendrai quand je vous parlerai plus en profondeur de ce pré-processeur.

De manière générale, on surcharge nos anciennes règles CSS pour attribuer un comportement particulier à l’impression. La surcharge en CSS est l’opération qui consiste à utiliser exactement les mêmes propriétés définies au préalable pour leur affecter une nouvelle valeur. Concrètement, c’est l’acte de modifier le comportement d’un élément selon un contexte bien défini. De cette manière, si dans une liste affichée sur une ligne les éléments doivent être espacés de 5 pixels à gauche, en surchargeant cette propriété, on peut spécifier au navigateur que le premier item de cette liste, lui ne possède aucun intervalle de positionnement.

Supprimer les éléments inutiles

Il faut veiller à bien retirer tous les éléments nécessaires à la compréhension de l’interface web qui ne sont plus d’aucune utilité sur un support papier. Il s’agit essentiellement de supprimer l’affichage des entêtes de pages, des éléments de navigation, du pied de page, des informations contextuelles (les publicités, les modules de recherche ou les mots-clés par exemple), des images animées ou non selon leur importance vis-à-vis du corps de texte, etc… Pour cela, on utilise simplement la propriété display à laquelle on assigne la valeur none.

.header,
.footer,
.ads {

display: none; // Permet de cacher les éléments
}

Il est important de bien déterminer quelles sont les informations que tout potentiel lecteur serait ravi de pouvoir conserver. Et donc, il faut faire attention à ne pas supprimer du contenu jugé essentiel. Une mauvaise pratique serait, par exemple, de supprimer les données liées à l’auteur ou la provenance d’un texte : l’utilisateur aura tendance a oublié, avec le temps, d’où lui proviennent ces informations qu’il a souhaité conserver.

Améliorer le formatage d’une page

Il faut également penser au formatage de la page sur le support papier. Les informations présentes pour le web prennent rarement la largeur globale de l’écran qui les parcourt, et ça, que l’on soit sur un écran classique ou sur une quelconque tablette. En revanche, on s’attend à ce qu’il n’y ait pas cette limitation d’espace sur le support papier. Pourquoi utiliser seulement la moitié de la surface papier quand on veut pouvoir lire agréablement un texte ?

Il convient donc de penser à l’utilisateur qui souhaiterait optimiser le nombre de feuilles de papier qu’utilisera son imprimante, et c’est également un bon moyen d’agir pour l’environnement ! Pour cela, de simples règles peuvent être ajoutées à l’élément recueillant le contenu textuel.

#content {
width: 100%; // Le contenu prend toute la largeur de la page
margin: 0; // Les marges définies pour l'écran sont réinitialisées à 0
float: none; // Tout flottement prédéfini est supprimé
}

Une autre bonne pratique ici consisterait à diminuer la taille de la police utilisée pour le corps de texte principal. Mais pour cela, il faut d’abord réellement comprendre le comportement des polices. L’excellent article de Kyle Schaeffer, CSS font-size em vs px vs pt vs %, m’y a aidé. Il existe des équivalences entre les unités de valeurs textuelles : 1em = 12pt = 16px = 100%. Sachant que les points sont utilisés pour l’imprimerie, on peut ainsi aisément désigner la taille du texte pour l’impression voulue. Par la même occasion, il peut être intéressant de revenir à des couleurs d’impression par défaut, et donc de proposer l’affichage du texte en noir si celui-ci est d’une autre couleur à l’écran.

Une autre de mes préoccupations a été de m’intéresser aux liens hypertextes figurant dans le corps principal du texte. On peut naturellement en changer la couleur ou l’épaisseur pour mieux les différencier du contenu textuel simple. Mais surtout, sur le support papier, la page pointée par le lien en question n’est pas du tout répertoriée : il est complètement impossible de se rendre sur cette page, et une information parfois capitale pour la compréhension d’un article est donc perdue. Pour contrer cet effet, on peut avoir recours à une simple manipulation décrite ci-après, qui permet de présenter l’URL à laquelle renvoie le lien en question juste après le texte surligné du lien.

#content a:link:after, // Après un lien classique
#content a:visited:after {
// ... et après un lien visité
content: " (" attr(href) ") "; // On ajoute en tant que contenu la destination du lien après celui-ci
font-size: 90%; // La taille de police correspond proportionnellement à 90% de la taille du lien
}

Forcer l’affichage des arrière-plans

Par défaut, la propriété background n’est pas implémentée par la feuille destinée à l’impression : alors, comment faire apparaître de la couleur ou une image quand on passe à l’impression sans pour autant modifier le code HTML ?

A l’époque où je travaillais sur un projet destiné au grand public, j’ai rencontré ce souci. Et j’ai finalement réussi, après de longues recherches, à résoudre ce problème en appliquant des méthodes originales au niveau des règles de style. Pour faire apparaître une image prédisposée en background-image sur un élément à l’écran, il faut utiliser le sélecteur :before sur l’élément en question et en spécifier la propriété content.

Pour que ce soit plus clair, je vais illustrer cette problématique à l’aide d’un exemple. On pourrait prendre l’idée d’une page d’accueil proposant l’affichage d’un logo à l’aide d’un background défini en CSS. On pourrait imaginer une structure HTML aussi simple que celle présente ci-dessous.

<h1 id="logo">
<a href="#">ONE CHAPTER A DAY</a>
</h1>

Sur la feuille de style classique, l’image est administrée par le biais d’une propriété d’arrière-plan sur l’élément #logo a. Sur la feuille de style liée à l’impression, les styles à mettre en place sont les suivants :

#logo { position: relative; }
#logo:before {
content: url("../img/logo.png"); // L'adresse de l'image est indiquée ici
position: absolute; // Une position "absolute" est fixée
left: 0; // L'image est alignée à gauche
top: 0; // ... et en haut de la page
width: 100px; // Il est important de préciser la largeur
height: 50px; // ... et la hauteur de l'image à imprimer
}

Pour faire apparaître un arrière-plan coloré, cette même solution peut donc être utilisée. L’astuce ici est de créer une image ayant une couleur unie correspondant à la couleur souhaitée pour l’élément en question. En revanche, ce procédé a la particularité de ne pas permettre au concepteur de préciser la largeur et la hauteur sur lesquelles doit se superposer la couleur : en clair, il est impossible d’optimiser le poids de l’image utilisée en précisant que l’arrière doit être répété sur un axe prédéfini. Il faut donc prévoir une image suffisamment grande pour recouvrir toute la superficie où doit être apposée la couleur convoitée. C’est donc une pratique à utiliser avec parcimonie, et uniquement s’il y a vraiment un intérêt prouvé pour l’utilisateur.

Consolider l’affichage des tableaux

Selon la structure que vous mettez en place pour les tableaux présents sur l’ensemble de vos pages HTML, il se peut que ces derniers ne présentent à l’impression aucune des données figurant à l’écran. Là encore, une solution assez simple à mettre en place a été trouvée comme réponse à cette problématique.

De manière générale, les entêtes de tableaux, symbolisés par les balises <thead> et <th> en HTML classique, ne sont pas prises en compte à l’impression. Il peut arriver que les données figurant dans le corps du tableau ne s’affichent pas à l’impression non plus. Il convient alors d’utiliser la propriété display pour pallier à ce problème et de lui conférer les valeurs suivantes table-header-group, table-row-group et table-footer-group correspondant respectivement aux éléments thead, tbody et tfoot.

Il peut aussi être intéressant d’interdire aux imprimantes l’impression sur deux pages d’un tableau et de prévoir le saut de page dans le cas où ce tableau serait situé en bas de page. On peut ainsi préciser que seules les lignes de ce tableau doivent être insécables. La propriété rendant possible cette opération est page-break-inside, à laquelle on affecte la valeur avoid.

Avoir une réflexion sur le sujet

Comme je vous le disais en préambule, cette première liste n’est pas exhaustive, et constitue un moyen de simple de contrer les cas les plus simples liés à une mauvaise impression de votre page web.

C’est selon vos différents besoins à un instant t, que vous serez capables de savoir comment mieux manipuler vos styles pour l’impression. Pour ma part, c’est en ayant quelques soucis d’optimisation de rendu, notamment pendant mes heures de travail en entreprise, que je me suis aperçue de ces quelques pratiques. Peut-être que vous aurez d’autres conseils à m’apporter sur le sujet. Toute idée supplémentaire est la bienvenue.  :)

Les enjeux du CSS pour l’impression

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

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.

L’organisation autour de la publicité digitale

A-Lister Photography

Le nombre d’internautes étant en constante augmentation, il existe un véritable enjeu en matière de publicité digitale : profiter du dynamisme de l’offre sur Internet et pousser l’utilisateur à commettre un acte de consommation.

Pour la mise en place d’espaces publicitaires sur des sites à la notoriété indéniable, un certain nombre d’acteurs entre en jeu.

Les acteurs de la publicité digitale

On retrouve dans un premier temps les annonceurs… Un annonceur est l’entité désireuse de présenter ses services sur d’autres supports et d’autres sites que le sien. Pour s’assurer une représentation importante, l’annonceur est donc prêt à négocier des emplacements publicitaires sur des sites plus ou moins importants. Les agences détentrices d’un bien de valeur possèdent un fort intérêt pour les annonceurs : les sociétés ayant un site présentant un contenu rare de qualité représentent un support sûr d’audimat pour leur publicité.

Dans une entreprise à forte pénétration, les équipes de marketing et commerciale interviennent alors pour optimiser leur offre destinée aux annonceurs. Grâce aux différents outils permettant aux équipes de marketing et commerciale de connaître précisément les audiences de leurs sites ainsi que les rubriques les plus consultées, elles sont capables d’élaborer une stratégie commerciale. L’équipe de marketing est plutôt axée sur l’objectif de trouver des offres et de saisir les opportunités qui peut exister en matière de promotion. L’équipe commerciale, quant à elle, prospecte de potentiels futurs clients en s’appuyant sur les acquis de la société, propose des campagnes publicitaires et s’assure de la satisfaction des attentes des clients.

Un autre acteur peut intervenir dans la mise en place des annonces publicitaires : la régie publicitaire. La régie est l’entité mettant en œuvre la vente des emplacements publicitaires d’une société. Elle peut aussi bien être externe qu’interne à l’entreprise.

Enfin, on appelle éditeur l’acteur chargé de la mise en place des annonces publicitaires sur son site. L’éditeur est l’entité qui, dans le but d’accroître ses revenus, opte pour élargir son système économique initial : c’est, en clair, la personne physique ou morale qui permet l’affichage des publicités autour de son contenu. Celui-ci est d’ailleurs rendu possible grâce aux tags publicitaires. Un tag publicitaire est généralement un script associant des variables définies à l’affichage réel d’une publicité.

Différents formats pour différentes cibles

Pour la mise en place de ces tags publicitaires, quatre principaux espaces publicitaires sont préconisés selon les tailles standard du monde du web. Les formats publicitaires standard du web proviennent des normes fixées par l’IAB, the Interactive Advertising Bureau, une communauté qui regroupe plus de 500 sociétés reconnues dans le monde médiatique de la publicité. Ces dernières représentent à elles seules près de 86% de la publicité en ligne aux Etats-Unis.

Le format Pré-Home

Il existe, par exemple, le format pré-home qui consiste en l’affichage d’une publicité avant d’accéder au contenu du site : c’est le format sur l’on retrouve par exemple sur Allociné qui exploite particulièrement ce dispositif depuis quelques années tout en proposant le lien "Accéder directement au site".

Le format pré-home est destiné à toucher toute la population active d’un site. On pourrait dire que ce type de format convient uniquement à des sites ayant une grande popularité, ceux pour lesquels la page d’accueil est la page d’entrée d’un utilisateur sur le site. En clair, ce type de format convient aux sites dont le nom est suffisamment connu, et non à certains blogs, le mien par exemple, qui reçoivent l’essentiel de leur trafic grâce à des requêtes sur des moteurs de recherche.

Il existe une alternative qui consiste à proposer ce type de format pour toutes les entrées d’utilisateurs sur un site. Ce format dérivé est considéré comme un interstitiel d’entrée. La mise en place d’un tel format est plus compliqué et nécessite d’envoyer sur le navigateur de l’utilisateur un indice de passage de celui-ci sur le site, comme un cookie. Mais à mon humble avis, ce format est le meilleur moyen de perdre de l’audience, et de diminuer la durée moyenne d’une session sur son site.

L’habillage publicitaire

Il existe également les habillages. Un habillage est un procédé par lequel est mis en œuvre des publicités sur un site. Il permet de remplir l’espace disponible autour du contenu du site en question sans pour autant en perturber la lecture et désorienter l’utilisateur habitué du site.

Les habillages ont plusieurs atouts pour l’annonceur publicitaire. Premièrement, celui-ci lui permet une large visibilité sur les sites à forte audience. Aussi, contrairement aux annonces vidéo par exemple, l’habillage présente l’avantage d’être forcément parcouru des yeux par les internautes : un habillage aux couleurs inhabituelles attire l’attention de l’internaute et qu’il en soit conscient ou non, il prend compte de l’information contenue par celui-ci. Enfin, un habillage possède généralement ce que l’on appelle des liens de tracking.

Un lien de tracking donne la possibilité à son auteur de recueillir plusieurs informations sur la personne ayant cliqué sur celui-ci. De manière générale, les publicateurs de ces liens ont pour principal but de récupérer l’URL du site d’où provient son utilisateur. Parfois, ils souhaitent connaître la résolution du moniteur de celui-ci ou le navigateur utilisé… Les liens de tracking peuvent aussi fournir des statistiques extrêmement précises quant à l’audience du site. En clair, les annonceurs profitent d’une popularité intensifiée et d’un nombre de visiteurs uniques des liens promotionnés conséquent.

En ce qui concerne la mise en place des habillages sur les sites de la société, les annonceurs se chargent généralement de fournir toutes les créations graphiques nécessaires à leurs mises en place : il s’agit principalement d’une image à disposer en arrière-plan du <body>, d’une bannière animée ou un script JavaScript permettant la génération de cette bannière (cette intégration est gérée à distance par le client lui-même).

Les bannières rich-media

Les formats de type bannière publicitaire et pavé numérique entrent directement dans la composition structurelle d’une page web. Ces formats sont aussi des éléments publicitaires clés mettant généralement en œuvre de la vidéo et/ou de l’animation.

De manière générale, il existe :

  • le format 728×90 aussi appelé megaban, méga-bannière ou leaderboard qui correspond à la bannière utilisée dans le header du site concerné – pour la refonte, cette tendance tend à évoluer principalement en 1000×90 aussi
    appelé gigaban ou bannière XXL pour parfaire l’évolution du site face aux actuelles normalisations
  • le format 300×250 appelé medium rectangle, rectangle media ou pavé, qui lui correspond à la publicité située en colonne de droite de manière générale : c’est un format pratique car ses dimensions faibles donne la possibilité d’en intégrer plusieurs sur une même page – de manière générale deux à trois publicités de ce type peuvent se retrouver sur les sites à grande notoriété – et parfois des pavés aux dimensions suivantes 300×600 viennent compléter cet affichage numérique pour une plus large promotion au sein de ces pages web
  • le format 250×90 appelé ROS button, utilisé par exemple dans un haut de page, ou en colonne latérale, qui permet avec un espace minimal d’inclure des bannières animées et facilement modulables

D’autres formats existent : je ne vous propose pas une liste exhaustive dans cet article (ça me prendrait trop de temps, et vous ne lirez pas tout;). Mais vous pouvez vous faire une idée plus précise de ces formats via le lien suivant qui spécifie les bonnes pratiques concernant l’affichage des publicités.

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

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 ?