acti, agence web lyon

Le Blog

Blend Web Mix 2016 - Le compte rendu de Vân - Jour 1

Par Vân, le jeudi 3 Nov 2016 dans Création de site web

Organisé par la Cuisine du Web, Blend Web Mix est un évènement autour du digital et devenu un rendez-vous incontournable à Lyon. Pour cette première journée de l’édition 2016, le choix des conférences a été difficile car les thématiques, diverses, étaient toutes intéressantes. J’ai choisi mon programme autour de différents thèmes : le Design, Tech, Blend pour varier les sujets autour du digital.

Je vous propose un tour d’horizon (synthétique) des conférences auxquelles j’ai participé, pour vous donner ou non l’envie d’aller plus loin lorsque les vidéos seront disponibles. C’est parti !

1 – Performances et tiers : combien vous coûte cet emplacement pub ?


Les espaces pub ou les widgets (partage sur les réseaux sociaux) peuvent générer des coûts importants pour une marque.
Jean-Pierre Vincent cite un exemple intéressant : en supprimant les boutons de partage, l’internaute se concentre plus sur le bouton « Ajouter au panier ». Intéressant ! 

Voir sa présentation

2 – Phygital

Animé par Eric Marillet

L’e-commerce a évolué au cours des 10 dernières années. Comment le digital a apporté sa plus-value dans notre monde réel ? Comment les marques ont-elles fait pour s’adapter aux nouveaux comportements des utilisateurs en mode virtuel ? La réponse : Physical + Digital = Phygital. Eric Marillet a cité trois exemples remarquables : Timberland – Tap a tag, Undiz machine, et le showroom de Made.com à Paris.

3 – Mes data sont à moi

Animé par Gaspard Koenig

Très bonne découverte que ce philosophe, qui n’a utilisé aucun support de présentation. L’angle de réflexion philosophique est très intéressant car il permet de prendre du recul sur la thématique de la propriété de nos datas, poussant l’analogie avec la propriété de notre propre corps. Une idée choc : Gaspard Koenig propose d’intégrer la notion de « data » dans le droit d’auteur pour initier de la rémunération dessus.
 
Quelques citations : 
« Le secret des correspondances est dissous par les algorithmes de l’Etat »
« Les conditions d’utilisation de Paypal sont plus longues que la tragédie d’Hamlet »
 

4 – Sketch, le petit soft de design à tout faire de 7 à 77 ans

Animé par Adrien Weil


Nous avons eu un aperçu rapide de ce logiciel simple, peu coûteux (100$) et d’apparence très pratique, une alternative à Photoshop pour la réalisation de maquettes vectorielles. Il propose notamment des exports optimisés, très légers. Pour ma part, je trouve que c’est un bon outil pour produire des wireframes HD plutôt que pour remplacer totalement Photoshop dans le workflow de conception. Pour la création des maquettes, je pense que les designers ne vont pas l’adopter tout de suite.

5 – Découvrez le Design Sprint : UX & Design Thinking façon Google Ventures

 
« Si une image vaut 1000 mots, un prototype vaut 1000 meetings » 
Stéphane Cruchon nous explique une nouvelle méthode de travail pour développer une idée en 5 jours afin de limiter les risques avant de se lancer et de présenter le projet / concept à des sponsors. 

Les étapes :
J1 : découvrir/comprendre
J2 : esquisse
J3 : wireframe
J4 : prototype
J5 : tester, tester, tester
 
Conférence de Stéphane Cruchon
Conférence de Stéphane Cruchon

6. Accessibilité et utilisabilité : astuces d’intégrateurs pour webdesigners

Animé par Véronique Lapierre

Véronique Lapierre nous rappelle les bonnes pratiques à mettre en oeuvre pour faciliter la vie des internautes : le choix des couleurs, la taille / le contraste des textes, le fil d’Ariane, les zones cliquables, les boutons play / pause à mettre sur les carrousels, la navigation au clavier, les libellés des champs à remplir… où l’on s’aperçoit que tout cela n’est finalement que du bons sens. Jetez un oeil aux sources citées dans la présentation pour consulter en détail toutes les bonnes pratiques du web.

Voir sa présentation ici

7. La performance du rendu CSS

Animé par Thomas ZILLIOUX

Le speaker pousse la performance d’un site jusqu’à la transition d’un style en CSS.
A retenir : Ne pas faire de transition ou d’animation CSS avec une autre propriété que : opacity, transform, filter 

Voir les slides

Conférence de Thomas ZILLIOUX
Conférence de Thomas ZILLIOUX

8. Mettez des composants VueJS dans votre application traditionnelle en 15 minutes

Animé par Benjamin Richard


Benjamin Richard présente un exemple de VueJS, utilisé pour la refonte de
euronews.com : c’est une programmation réactive, adaptée pour un système d’évènement. VueJS a des directives à la « angular ». Son message : n’hésitez pas à moderniser vos applis.

9 – « To patch or not to patch »

Animé par Bastien Jaillot


Bastien nous a transmis quelques idées intéressantes : 
– Le code parfait n’existe pas car un code évolue à la même vitesse que l’apparition de nouvelles technologies
– Attention à la refonte “from scratch” qui représente une charge de travail importante, qui peut démotiver une équipe
– Mieux vaut se rendre dispensable qu’indispensable dans les métiers du web
– La théorie de la fenêtre brisée : avec le temps, on s’habitue à vivre avec une fenêtre brisée et ce défaut devient la norme, on ne fait plus d’effort pour améliorer les choses.

Bastien Jailot, co-fondateur JoliCode, l’auteur du livre « La dette technique »

La journée s’est terminée autour d’un échange sur les start-up et des investisseurs, animé par 
Guilhem BertholetJérôme Masurel.
 
A très vite pour la suite de Blend Web Mix !
 
Commenter cet article Voir les commentaires (1)

Paris Web et séminaire Accessiweb 2016

Par Marie, le vendredi 21 Oct 2016 dans Actualité digitale

Paris Web : On a tous un rôle à jouer

Paris Web : On a tous un rôle à jouer

Après un avant-goût de Paris Web il y a 3 ans, j’ai eu la chance cette année de participer à l’événement en entier. Et comme se déroulait la même semaine le 23ème séminaire Accessiweb, voici mon retour sur ces 4 jours riches en découvertes et en échanges !

Vous y découvrirez, entre autres, comment rendre les contenus sur Twitter accessibles, un formulaire pour calculer le salaire d’une nourrice, ou comment un site peut être consulté sans connexion internet…

Sommaire :

 

Un web inclusif, prendre soin des utilisateurs/rices

Autant annoncer tout de suite la couleur : la baseline de Paris Web est « web design, qualité et accessibilité », et ce dernier domaine étant la thématique d’Accessiweb, les deux événements se sont particulièrement fait écho.
L’idée que j’y ai vu en fil rouge est de tenir compte des multiples contextes des internautes, que ces contextes soient culturels, personnels, techniques…

On a donc parlé internationalisation, par exemple, avec la conférence d’Aurélie Guillaume, 15 minutes très denses pour évoquer les gros impacts d’un passage d’un site à l’international.

Eh oui, la gestion des différentes langues, déjà complexe en tant que telle, n’est qu’une partie des points à avoir en tête : les champs de formulaire, l’orientation et la taille du texte, les dates, les prix, les symboliques de design mais aussi les lois en vigueur peuvent varier d’un pays à un autre !

1 250,42€ : 1,250.42 € ou € 1.250,42 ou $ 1.392,90 ou $ 21097,013 (ARS) ou 144 131 ¥ ? TVA, douane ?
Extrait de la présentation

Et n’oublions pas que les services tiers dont nous avons l’habitude n’existent pas partout, et que cela peut nécessiter de gros ajustements de fonctionnalités parfois principales (ex : Facebook Connect, Google Maps… qui ne peuvent pas marcher en Chine).

Tout cela résulte en une multitude de points plus ou moins grands à traiter le plus en amont possible, et idéalement à avoir en tête, même lorsque le projet n’a pas (encore) vocation à être internationalisé.

Voir la présentation « Lancer son site à l’international facile ? Oui, si l’on pense à tout ! »

Le sujet a trouvé un prolongement lors d’une discussion informelle sur « comment rendre le web plus inclusif au quotidien », où ont été évoquées ces situations où l’internaute peut se sentir non-accueilli(e) voire rejeté(e) : non-accessibilité, mais aussi formulaires qui n’acceptent pas les informations (correctes) car trop restrictifs, langage genré inadéquat, représentations visuelles limitées…

A été discutée l’idée d’un web « glocal » : global dans sa dimension internationale, mais en même temps local dans son adaptation aux différentes cultures et usages, voire personnalisable par chacun(e).

La discussion a également dérivé sur la problématique de la diversité au sein des conférences et du métier en général, car c’est en faisant se rencontrer différentes cultures, personnalités et expériences, qu’on peut plus facilement questionner ses propres biais et concevoir des projets réellement « accueillants » pour toutes les personnes.

Le concept des informelles est que chaque participant(e) à Paris Web peut proposer sur place un sujet de discussion, qui sera éventuellement retenu par le staff et planifié dans la journée.
C’est ici la seule à laquelle j’ai participé, mais j’ai trouvé que ce format ajoutait un espace d’échanges intéressant en parallèle des conférences, et se prêtait bien à ce type de discussion.

Goulven Champenois, qui était présent, s’est motivé pour retranscrire quelques points l’après-midi même dans un lightning talk (présentation chronométrée de 4 minutes) : « Pour un web inclusif ».

On a tous... un prénom et un nom de plus d'un caractère et lié à notre genre affiché, une adresse fixe, un portable, etc : faux !
Extrait de la présentation

En parlant de lightning talks et d’expérience utilisateur, ce fut mémorable d’écouter les coups de gueule de Vincent Aniort et Sylvie Duchateau sur l’accessibilité.

Le premier nous a listé les quelques points basiques à mettre en place pour l’accessibilité des sites :

  • alternatives textuelles d’images et vidéos
  • utiliser des composants natifs
  • structurer correctement le contenu
  • utiliser des contrastes suffisants
  • prendre en compte la navigation au clavier.

Si tous les sites implémentaient ces points, ce serait déjà un énorme pas pour les internautes… Alors Vincent n’a pas lésiné sur les moyens :

Outre les accroches sans pincettes, Vincent expliquait tous les bienfaits de ces mesures… pour toute personne consultant les sites, en fait : malentendant(e) ou sans casque sous la main, en environnement trop lumineux ou malvoyant(e), geek full-clavier ou utilisateur/rice de lecteur d’écran, etc.
En gros, travailler sur l’accessibilité, c’est travailler sur l’ergonomie et l’utilisabilité !

Voir la présentation « Faites-vous du bien et prenez soin de vos utilisateurs »

Et avec Sylvie, nous avons eu droit au point de vue de l’utilisatrice en colère. Aveugle et utilisant un lecteur d’écran pour naviguer sur internet et travailler au quotidien, elle est revenue sur les points qui la bloquent très régulièrement et sont pourtant corrigeables très simplement :

  • renseigner l’attribut lang sur la balise HTML (au risque de ne rien comprendre à la synthèse vocale qui lit du français comme si c’était de l’anglais)
  • les alternatives textuelles, toujours elles, surtout pour les images utilisées en lien ou bouton (« bouton, bouton, bouton… et comment je fais moi pour payer ? »)
  • la structuration du contenu, pour naviguer rapidement de titre en titre et ainsi « lire en diagonale »
  • relier les champs de formulaire à leurs étiquettes, pour savoir quel contenu y renseigner
  • des alternatives aux captchas, qui embêtent d’ailleurs tout le monde.

Car dans le cas contraire, la réaction est simple : « c’est fini, je boycotte ce site ! ».

6ème frustration : captchas. Veuillez taper les caractères afffichés à l'écran. Sélectionnez les images montrant une maison.
© Yann Kozon

Intégrer l’accessibilité dans ses process

Après tout ça, si vous n’êtes pas convaincus et vous demandez encore pourquoi faire des sites accessibles, Nicolas Hoffmann tente une approche audacieuse : l’accessibilité décomplexée.

Son hypothèse : faites de l’accessibilité d’abord pour vous-même, elle vous le rendra bien !
Il a ainsi présenté toutes les compétences qu’il a pu acquérir ou approfondir via la création de ses plugins Javascript accessibles.

J’ai beaucoup apprécié aussi sa remise en question du discours tenu sur l’accessibilité : au lieu de focaliser sur tout ce qui ne marche pas, arriver à communiquer de manière positive, donner envie, et surtout, au lieu d’exiger la perfection au risque de décourager, privilégier plutôt l’amélioration continue.

Voir la présentation « L’accessibilité décomplexée : ce qu’elle peut faire pour vous »

À côté de cette approche très personnelle du sujet, le séminaire Accessiweb proposait de se pencher sur l’industrialisation de l’accessibilité, notamment au sein des grands groupes : comment appréhender l’accessibilité numérique de manière globale, lorsqu’on a un parc de centaines voire milliers d’applications ou services ?

C’est ce dont différents intervenants ont tenté de rendre compte : Sandrine Alèbe pour Pôle Emploi, Vincent Aniort (à nouveau) pour Orange, Éric Maillard pour le Groupe La Poste.

J’ai trouvé ces présentations complémentaires, dans le sens où les approches et objectifs initiaux étaient différents pour chaque entité, mais les mises en places en interne présentaient de nombreux points communs :

  • équipe de plusieurs personnes
  • travail en transversalité avec d’autres services (notamment le service handicap qui gère entre autres l’aménagement des postes de travail)
  • engagement de la direction indispensable
  • priorisation et travail au fur et à mesure (l’étendue est trop vaste pour être abordée dans sa globalité dès le début)
  • communication, sensibilisation et formation à un maximum de publics différents en interne, sous des formes variées (vidéos, présentiel, e-learning, gamification…)
  • centralisation de ressources et outils techniques sur le sujet, voire création en interne
  • rédaction et diffusion de guides pratiques, checklists, outils d’accompagnement
  • automatisation de tout ce qui peut l’être, et souhait de rendre autonome les différents intervenant(e)s, pour focaliser l’énergie des expert(e)s sur les cas complexes
  • intégration le plus en amont possible, et à tous les échelons des process existants (au même niveau que la sécurité, par exemple) pour éviter d’en faire une démarche spécifique qui pourrait être mise de côté
  • tests utilisateurs

En plus de tout ça, j’ai trouvé intéressant le rôle important que l’open source joue, notamment chez Orange avec leur framework Boosted, basé sur Bootstrap : collaboration, utilisation massive et support en continu, en plus de la visibilité à l’externe.

Voir la présentation « Accessibilité numérique et industrialisation chez Orange »
Voir la présentation « Mise en œuvre de l’accessibilité, retour d’expérience avec La Poste » (merci à Access42 pour l’hébergement)

Nous avons aussi découvert avec intérêt le retour d’expérience d’Anne Cavalier, de la DILA (Direction de l’Information Légale et Administrative), sur la refonte de service-public.fr.

J’ai noté plusieurs idées à retenir :

  • méthode agile beaucoup plus adaptée que le traditionnel cycle en V
  • équipe d’expert(e)s pas forcément dédiée à plein temps au projet, mais présente physiquement dans l’open-space, pour être disponible aux questions, et pouvoir rebondir plus facilement sur les échanges
  • présence systématique aux réunions d’étapes importantes et « rituels » agiles (mélée, pokérisation, démo…) pour suivre, conseiller et lever des alertes
  • sensibilisation systématique des nouveaux arrivants sur le projet
  • revue d’accessibilité intégrée à la revue de code
  • démo d’accessibilité intégrée à chaque démo de fin d’itération
  • corrections en duo : pair-coding, qui permet une perméabilité des compétences
  • ateliers dédiés pour décortiquer les erreurs à répétition et ainsi « mettre à niveau » toute l’équipe
  • accompagnement externe à intervalles réguliers, qui peut servir d’arbitrage.
Questions, celles qui font plaisir : On n'y connait rien, pouvez-vous nous aider ? Quelle méthodologie sera le mieux adaptée ? Où peut-on trouver des documentations ? Y aura-t-il un expert sur le plateau ? Peut-on organiser une présentation pour les développeurs ?
© Ariane Andurand

On retrouvait donc l’idée que pour être prise en compte avec succès, l’accessibilité devait être intégrée le plus en amont possible et traitée au fil de l’eau, avec la même exigence que d’autres contraintes telles que la sécurité, la performance, ou le respect d’une charte imposée.

Voir la présentation « Accessibilité et industrialisation – Retour d’expérience service-public.fr »

Léonie Watson est également intervenue pour présenter les grandes lignes de la « stratégie de l’accessibilité », qui reprenaient la majeure partie des points évoqués ci-dessus sur l’intégration de l’accessibilité numérique au sein des organisations, en y ajoutant une partie rarement évoquée : la gestion de contenus accessibles à l’externe, notamment sur les réseaux sociaux.

Ainsi, une des recommandations est de garder simplicité et homogénéité dans les messages, qui permettra facilement d’identifier l’entité qui communique et de construire une relation de confiance.
L’idéal est également de doser soigneusement les textes et les images, pour permettre une identification aussi rapide pour ceux qui lisent peu que pour ceux qui ne peuvent pas voir les images.

À propos des images, il faut savoir que Facebook intègre désormais un outil automatique pour générer les alternatives textuelles : grâce à la reconnaissance visuelle de plus en plus poussée, cet outil liste les éléments qu’il détecte dans l’image. C’est un premier pas qu’il faut déjà saluer, mais le mieux reste encore de décrire l’image dans le texte de légende, en attendant d’avoir la possibilité de renseigner soi-même l’alternative.
Sur Twitter, en revanche, c’est déjà possible et il est vivement conseillé de le faire : il faut auparavant activer la fonctionnalité depuis les paramètres d’accessibilité de son profil.

Un autre point sur Twitter : penser à utiliser des majuscules dans les #HashTags pour différencier les mots et les rendre ainsi intelligibles à la vocalisation par les lecteurs d’écran.

Voir la présentation « Accessibility strategy, project management and content delivery »

Léonie a également abordé YouTube, mais c’est surtout John Foliot qui a fait le tour de l’accessibilité des vidéos, en particulier avec l’élément HTML5 <video>.

Pour rappel, les éléments obligatoires sont :

  • les sous-titres, qui soient synchronisés avec le déroulement de la vidéo (élément <track>)
  • l’audio-description (ou une vidéo alternative qui l’intègre)
  • des contrôles activables indépendamment du device utilisé (attribut « controls » pour les contrôles natifs, accessibles par défaut, ou alors développer ses propres contrôles, en s’assurant qu’ils soient accessibles)
  • la transcription textuelle accompagnante, qui reprend tout le déroulé de la vidéo (bénéfique aussi pour les moteurs de recherche).

Un point dont il faut tenir compte, pour les contrôles et les sous-titres, c’est que ces derniers prennent traditionnellement le tiers de la hauteur, en bas de la vidéo : il faut donc éviter que l’emplacement des contrôles vienne en gêner la visibilité.

Pour finir, concernant les sous-titres, un peu de vocabulaire anglais, là ou le français ne dispose que d’un seul mot :

  • captions désigne le texte reprenant les informations sonores de la vidéo : dialogues mais aussi bruits ou musiques nécessaires à la compréhension globale, dans la même langue que la vidéo
  • tandis que subtitles désigne spécifiquement les sous-titres de traduction (dans une langue différente), et peuvent donc cohabiter avec les captions
  • par ailleurs on parle de closed captions (CC) lorsqu’ils sont incrustés directement dans la vidéo
  • tandis que les open captions sont, eux activables ou désactivables par l’internaute (fonctionnalité proposée par YouTube, par exemple).

 

Conception et technique

Pour revenir à Paris Web, cela a été l’occasion de découvrir des méthodologies de conception, notamment avec le retour d’expérience de Marie-Amélie Cotillon sur un design sprint organisé avec des militaires.

Tout d’abord, un design sprint, qu’est-ce-que c’est ?
Il s’agit d’une méthode diffusée par Google, avec pour principe de fonctionner en phases très courtes, pour s’assurer le plus tôt possible de la viabilité du service ou produit, avant de se lancer dans une longue phase de production.
Je le vois un peu comme une application de la méthode agile à la partie conception et design.

Le contexte était le suivant : dans le cadre d’un projet global d’amélioration des relations entre les militaires et les services administratifs qui leur sont dédiés, il s’agissait de travailler sur un premier parcours, la préparation au départ en opération extérieure (OPEX) en individuel.
En effet, il s’agit d’un processus qui se répète souvent dans la vie des militaires : après candidature et réception d’un ordre de mission, un ensemble de formalités administratives diverses sont à effectuer avant le départ, mais les militaires doivent se débrouiller sans accompagnement, et sans communication entre les différents services concernés, ce qui aboutit généralement à l’impossibilité de prise en charge totale de ces tâches.

Demander, c'est facile... Copinage, formation, bricolage, manque d'infos, procédures... Obtenir, c'est dur !
Extrait de la présentation, © Florent Courtaigne

Des études utilisateurs avaient déjà été faites pour défricher la complexité, et le but était maintenant de produire un outil pour répondre à ce besoin, en le construisant en collaboration avec les utilisateurs finaux : les militaires eux-mêmes.
Ce sont donc 5 jours très intenses qu’ont passé l’ensemble des participants au sprint : militaires qui avaient fait une OPEX dans les 6 derniers mois, travailleurs des services concernés, décisionnaires, et bien sûr designers et consultants de l’agence.

Chaque jour correspondait à une étape :

  1. accueillir tout le monde, prendre connaissance du projet et des différentes parties prenantes
  2. rechercher des idées, échanger dans toutes les directions possibles
  3. décider et définir l’idée choisie dans le détail
  4. réaliser le prototype
  5. tester, observer, analyser pour les prochaines étapes.

Le fait que tous les acteurs concernés soient présents permettait de prendre des décisions rapides, en même temps que d’avoir une vue globale des différents parcours utilisateurs.

Au total, une trentaine de wireframes ont été produits, et quelques maquettes graphiques, qui étaient accessibles sur un écran tactile et testables au fur et à mesure.
Ce sprint a ainsi permis d’avoir rapidement un prototype validé, pour continuer ensuite sur l’approfondissement du design, puis sur des développements, avec des déploiements progressifs sur plusieurs bases militaires.
Le projet est donc encore en cours, et s’enrichit des retours d’utilisation après chaque déploiement.

Pour conclure, ce que Marie-Amélie nous rappelait, c’est que faire un design sprint nécessitait un énorme travail de préparation en amont, et n’était productif que s’il était appuyé par des décisionnaires impliqués côté client.

Voir la présentation « Quand les militaires se prennent au jeu du design sprint »

Par ailleurs, certaines conférences nous invitaient à nous questionner sur nos responsabilités en tant que concepteurs et conceptrices de sites web.

Ce fut le cas par exemple de Thibault Jouannic qui nous a présenté la problématique de la gestion des données personnelles sur le web. On parle ici bien sûr des coordonnées, mais aussi de données indirectes telles que les pages visitées et les interactions réalisées.
Selon les personnes, certaines de ces informations peuvent être très sensibles : une adresse rendue publique, la visite de certains sites peuvent avoir des impacts énormes selon le contexte (loi du pays, profession à risque…). On ne connait pas le contexte des utilisateurs/rices, et ce contexte peut changer dans le temps, donc il faut partir du principe que toutes les données sont sensibles.

- Et bien Lucien ! L'historique de ton navigateur, c'est pas joli joli dis donc... - Arrête ! Rends-moi mon iPhone j'te dis !
Extrait de la présentation

Après avoir expliqué comment ces données sont actuellement exploitées et monétisées, Thibault nous a expliqué les différents moyens utilisés pour récupérer ces informations, et surtout quelles stratégies nous pouvons mettre en place. En effet, lors de la réalisation de sites, nous pouvons limiter au maximum les intrusions dans la vie privée de nos utilisateurs/rices en arrêtant de collaborer avec les GAFA (Google, Apple, Facebook, Amazon et consorts), notamment :

  • ne pas utiliser les widgets de partage (qui en plus ralentissent les pages) mais de simples liens qui fonctionnent tout aussi bien
  • auto-héberger les polices de caractères plutôt que de faire les inclusions de Google Fonts
  • utiliser OpenStreetMap à la place de Google Maps
  • héberger soi-même les plugins plutôt que passer par des CDNs de ces géants

Il faut aussi s’assurer de ne pas être soi-même une menace, en intégrant le respect de la vie privée par défaut dans la conception :

  • ne recueillir que les données qui sont strictement indispensables, en se posant la question du niveau de précision nécessaire
  • toujours demander l’autorisation
  • concevoir le stockage de manière à éviter le danger si une des bases est compromises, avec un point d’attention particulier sur les mots de passe
  • utiliser le chiffrement avec HTTPS
  • réinternaliser les fonctionnalités plutôt que les laisser gérées par des tiers (ex : commentaires par Disqus)
  • ne pas bloquer les internautes qui utilisent Tor.

En revanche, pour les sites qui affichent de la publicité, il est impossible pour l’instant de faire grand-chose, sachant que ces dernières incluent et sont basées sur des systèmes de trackers.

Voir la présentation « Désintoxication au web sous surveillance »

Dans le côté responsabilisation, il en est une autre à laquelle nous sommes encore peu sensibilisés : la responsabilité environnementale. C’est Frédéric Bordage qui a présenté ce sujet, en expliquant le principe d’éco-conception.

En effet, on considère que l’empreinte environnementale actuelle de l’internet mondial correspond à environ 2 fois celle d’un pays comme la France, et cela grossit en permanence.
L’idée est donc d’intégrer cette perspective dans la conception des sites, en visant la moindre consommation de ressources. Cette démarche va d’ailleurs généralement aussi dans le sens de la qualité, de la performance et d’une meilleure expérience utilisateur.
Il faut donc réduire la puissance informatique nécessaire au fonctionnement, sachant que la partie la plus « coûteuse » du web est plutôt du côté utilisateur (ressources à télécharger, mémoire) que du côté des data-centers auxquels on pense en premier.
Pour cela, il faut se concentrer sur les fonctionnalités principales, en adoptant une démarche d’efficience et de frugalité : réduire tout le superflu.

Avec quelques retours d’expérience, Frédéric nous montrait que les actions ayant le plus d’impact consistaient en la compression/optimisation des images, le remplacement de certaines par du CSS, la suppression d’animations, mais aussi externaliser, épurer, valider et compresser le code, ou éviter les allers-retours avec le serveur.
Il recommandait également la conception mobile-first, qui oblige à se concentrer sur l’essentiel.
Enfin, il faut savoir que cette démarche fait déjà l’objet d’une norme ISO, ainsi que d’un référentiel de bonnes pratiques.

Voir la présentation « Eco-conception : mon site web au régime »

Côté technique, c’est le concept de Progressive Web Apps qui a été présenté par Hubert Sablonnière.
Basé sur des technologies existantes, ce n’est donc pas une nouvelle technologie en tant que telle : l’idée est de faire se rapprocher les sites de l’expérience des applications natives, avoir les avantages de celles-ci (réactivité, ne dépend pas de la connexion internet) sans les inconvénients (nécessité d’installation même pour utiliser une seule fois, développements différents selon les OS).

La technologie principale sur laquelle ce concept se base est le service worker : codé en Javascript, il intercepte les requêtes vers le serveur et peut, à la place, décider de renvoyer des informations stockées dans le cache navigateur.
Cela ne fonctionne qu’avec HTTPS, pour éviter justement les attaques par injections à l’occasion de l’interception des requêtes.

Les grands principes des progressive web apps sont donc les suivants :

  • linkable : pas besoin de l’installer, accès via une URL (permet les utilisations « one-shot »)
  • responsive : s’adapte au device utilisé
  • safe : sécurisé car basé sur HTTPS
  • connectivity independancy : fonctionne en mode hors ligne, grâce aux service workers (pour les pages déjà visitées)
  • fresh : reste à jour en gérant des chargements en arrière-plan, voire en forçant les mises à jour
  • app-like interaction : gestion de la structure principale (conteneur, autrement appelé shell) indépendamment du contenu, ce qui permet son chargement rapide
  • re-engageable : ré-engager l’utilisateur, par exemple en utilisant des notifications push, disponibles maintenant sur le web également
  • discoverable : c’est un site web donc il est présent dans les moteurs de recherche, et on peut renseigner son fichier « manifeste » pour aider Google dans son indexation
  • installable : on peut ajouter un site (une URL et son icône) à l’écran d’accueil de son smartphone, comme si c’était une application
  • progressive : doit pouvoir fonctionner même si les service workers ne sont pas supportés sur le navigateur utilisé.

La conclusion de cette présentation, c’était que c’est un concept très prometteur, qu’il va falloir encore expérimenter dessus, pour en ressortir des bonnes pratiques, et aller plus loin encore dans l’expérience utilisateur.

Voir la transcription textuelle de la présentation « Progressive Web Apps : le futur du web arrive »

Nous avons également eu droit à une présentation sur la blockchain, par François Zaninotto.

Paris Web : La blockchain, quand l'individu sert au collectif... malgré lui - François Zaninotto
© Yann Kozon

Difficile de résumer en quelques mots ce mécanisme plutôt complexe, alors que François a pris le temps (et l’humour) nécessaire pour nous l’expliquer pas-à-pas…
L’idée principale est de s’affranchir des intermédiaires (autrement appelés autorités centrales, telles que les banques), et de les remplacer par un programme qui encadrerait les échanges (autrement appelées transactions).

Les bases sont les suivantes :

  • peer-to-peer : chaque ordinateur possède une copie de l’information, en l’occurrence, la liste des transactions effectuées
  • cryptographie asymétrique : système de clé privée associée à une clé publique, qui permettent de « signer » une transaction
  • proof-of-work : le nom blockchain s’explique littéralement par une « chaîne de blocs », chaque bloc contenant des transactions, et la création d’un bloc nécessite un gros travail de serveurs, d’où le principe de « preuve de travail ».

Pour les usages, le plus connu est le Bitcoin, monnaie virtuelle permettant d’effectuer des transactions en ligne ou pour des objets réels.
Parmi les applications envisagées, on a la signature de contrats qui seraient ainsi infalsifiables, la gestion programmée de propriété, des paris en ligne, des sociétés sans dirigeant, du stockage crypté sur le cloud

Après avoir testé le développement d’une application avec son équipe, François arrivait au constat que c’est une technologie qui n’est pas encore très mature, reste lente (de 10 secondes à 10 minutes pour valider une transaction), et peut être très coûteuse (littéralement mais aussi en empreinte environnementale).
Par ailleurs, toute l’idée est de faire d’un programme une autorité, or ce programme reste écrit par des humains, et peut toujours être hacké, donc n’est pas d’une sécurité infaillible.

Dernier point technique, la journée d’ateliers du samedi a été l’occasion de se frotter à Git, grâce à Agnès Haasser et Guillaume Turri.
Malgré une salle surpeuplée et un léger flou organisationnel, chaque participant(e) a pu se frotter aux commandes connues ou moins connues de cet outil de versioning (gestion d’un historique – versions – de développement).

Les explications étaient plutôt techniques, mais j’ai l’impression que l’atelier a permis à celles et ceux qui étaient déjà connaisseurs d’approfondir certaines pratiques, tandis que les autres ont pu tester les fonctionnements plus basiques, en même temps que profiter de l’expérience de leurs voisin(e)s.

Voir la présentation « Git is choupi »

 

Et pour finir…

J’ai une mention spéciale pour la présentation d’Agnès Haasser (à nouveau) sur comment elle a dépassé son syndrome de l’imposteur, pour faire sa première conférence et surtout son premier projet open-source sur Github.

Le syndrôme de l'imposteur est lorsque les compétences perçues sont inférieures aux compétences réelles. L'inverse est le syndrôme du petit péteux : c'est la droite de la lucidité qui les sépare.
Extrait de la présentation

Ce projet est parti d’un besoin personnel : calculer le salaire de la nourrice. Un tableau Excel au départ, qui d’améliorations personnelles en échanges avec d’autres parents, est devenu un mini-site sous forme de formulaire.
Je vous invite donc à aller consulter le Pajomatic, ça pourrait vous servir, et vous pouvez même proposer ou apporter des améliorations !

Voir la présentation « Libérée, délivrée… du syndrome de l’imposteur »

Autre mention spéciale, l’atelier animé par Corinne Schillinger et Laurence Vagner, sur toutes sortes d’astuces pour affronter le monde professionnel. De l’organisation du temps et du travail à la gestion des clients ou des collègues, c’était l’occasion de découvrir et partager des bonnes pratiques du quotidien acquises après quelques années d’expérience.

Voir la présentation « Trucs & astuces pour débuter sereinement »

Enfin, mention particulière à toute l’équipe de bénévoles de Paris Web, qui se démènent chaque année pour faire de l’événement un succès.
Je parlais plus haut du fait d’être inclusif : ces conférences sont celles qui mettent la barre le plus haut, avec la vélotypie (transcription textuelle en direct) et la traduction simultanée en langue des signes, en même temps qu’une attention particulière à tous les détails lors du déroulement de ces 3 jours.
Un grand merci à eux donc, et peut-être à l’année prochaine !

Commenter cet article Voir les commentaires (1)

Comment générer des leads avec les solutions Adwords ?

Par Laëtitia, le vendredi 7 Oct 2016 dans E-Marketing

Vous avez créé un site vitrine moderne et ergonomique avec un formulaire de contact optimisé pour générer des leads. Pourtant les contacts se font rares ? Voici quelques explications qui vous permettront d’utiliser les outils Google Adwords afin de faire augmenter votre volume de leads.

Se faire connaître, accroître sa visibilité

Pour inciter des prospects à déposer une demande sur votre site, vous devez tout d’abord vous présenter à eux. Pour cela plusieurs options s’offrent à vous :

Google Display Network (GDN)

Le Google Display Network est l’ensemble des espaces publicitaires disponibles sur les sites des partenaires Google. Ce réseau vous offre la possibilité de diffuser des annonces publicitaires au format Display sur des milliers de site web.

Pour autant, il vous faudra être sélectif dans la diffusion des annonces pour toucher uniquement les internautes qui vous intéressent. Là encore vous avez le choix entre différentes possibilités :

  • Le ciblage par emplacement : ce type de ciblage vous permet de sélectionner au sein du réseau des sites spécifiques sur lesquels vous souhaitez apparaître. Si ce ciblage vous permet d’être très précis, il représente peu de volume d’autant plus si vous sélectionnez une liste restreinte de sites.

Ciblage géographique Adwords
Ciblage géographique Adwords
  • Le ciblage contextuel : le ciblage contextuel est un ciblage complémentaire au ciblage par emplacement. Il vous donne la possibilité de cibler des internautes en fonction de différents critères : leurs centres d’intérêts, les thématiques des sites qu’ils consultent ou encore des mots-clés qu’ils ont précédemment recherchés sur Google. L’interface Google Adwords vous donne accès à un large éventail de possibilités pour affiner votre ciblage.
  • Le ciblage démographique : si vous ciblez uniquement les femmes ou encore que votre cœur de cible se situe dans la tranche d’âge 35 – 44 ans, vous pouvez choisir de n’afficher vos annonces qu’auprès des internautes correspondant à ces critères. De la même manière vous pouvez diffuser vos annonces dans un secteur géographique limité (par pays, région, ville…) ou encore de diffuser des annonces différentes selon les régions ciblées.

Ciblage démographique Adwords
Ciblage démographique Adwords

Vous êtes prêt à vous lancer mais vous n’avez pas les ressources en internes pour créer des bannières Display ? La plateforme Google Adwords vous propose des bannières préconçues et personnalisables.

Annonces vidéo sur YouTube

Vous avez réalisé une vidéo pour présenter votre activité ? Excellente initiative, profitez-en pour séduire vos prospects en la diffusant sur YouTube. Vous pourrez sélectionner les mêmes critères de ciblage, à la différence que les emplacements ciblés ne seront plus des sites web mais des chaînes YouTube.

Deux types d’annonces sont proposés par la plateforme pour promouvoir vos vidéos :

  • Les annonces InStream : ces annonces activent automatiquement la diffusion de votre vidéo lorsqu’un internaute est en train de visionner une vidéo de son choix.

Annonce Instream YouTube
Annonce Instream YouTube
  • Les annonces Video Discovery TrueView : moins intrusives, ces annonces permettent de proposer vos vidéos sur les pages des vidéos (page d’accueil, page de recherche, page de lecture des vidéos). Elles se composent d’une miniature de vidéos ainsi que d’un texte d’accroche.

Annonce Discovery YouTube
Annonce Discovery YouTube
  • Les annonces Bumper : ce tout nouveau format s’adapte particulièrement aux modes de consommation des jeunes publics. À l’instar des annonces Instream, vous pouvez diffuser vos vidéos lors de la lecture de vidéos YouTube, à la différence que le format de votre vidéo sera limité à 6 secondes.  

Le + : avec les annonces InStream vous n’êtes facturés que lorsque l’internaute visionne plus de 30 secondes de vidéos.

Gmail Sponsored Promotions

Gmail est un des webmail les plus utilisés au monde… et un nouvel espace de visibilité pour toucher vos prospects !

Comme les annonces Display, les annonces Gmail affichent vos annonces aux internautes dans un contexte ciblé (âge, localisation, centre d’intérêts, etc). Spécificité propre aux annonces Gmail : vous pouvez également cibler les internautes recevant des mails de la part de vos concurrents !

Pour séduire vos prospects, vous pouvez sélectionner un des 4 formats proposés :

  • Une image cliquable
  • Une annonce image + appel à l’action
  • Une annonce multi-produits
  • Une annonce html totalement personnalisée

Annonces Adwords Gmail
Annonces Adwords Gmail

Le + : les annonces Gmail sont encore peu utilisées par les annonceurs, lancez-vous tant que la concurrence est faible !

Être trouvé

Vous avez effectué une ou plusieurs campagnes de visibilité pour vous faire connaître. À présent que vos prospects connaissent vos marques, vous pouvez leur proposer vos produits ou services via les annonces Google Search.

Les annonces Search sont les annonces les plus populaires parmi l’offre Google Adwords

Ces annonces exclusivement composées de textes et liens s’affichent dès lors qu’un internaute recherche un des mots-clés que l’annonceur aura sélectionné sur Google. Ces annonces sont très utiles car elles permettent de capter un internaute en recherche active. De plus elles sont utiles pour compenser vos faiblesses en référencement naturel.

Tout comme les précédents formats, les annonces Google Search fonctionnent sur le système d’enchère : vous obtenez de plus ou moins bonnes positions en fonction du montant maximal que vous êtes prêt à payer pour obtenir un clic.

Comment vous assurer que vos annonces et vos mots-clés vous rapportent des leads ?

Via un code de conversion, vous pourrez comptabiliser le nombre de formulaires de contact validés via les mots-clés que vous avez achetés.

La plateforme Google Adwords vous donnera accès à toutes les statistiques de vos campagnes : nombre d’impressions, nombre de clics, nombre de conversions pour chaque mots-clé et chaque annonce que vous aurez rédigé. Un mot-clé vous coûte beaucoup d’argent, mais très peu de conversions ? En un clic, vous décidez ne plus enchérir sur ce mot-clé au profit de mots-clés plus performants.

Le + : les enchères ont tendance à augmenter sur le réseau Google Search, mais de nombreuses astuces vous permettent d’être mieux positionné que vos concurrents pour des enchères inférieures.

Rattraper les indécis

Vos campagnes de visibilité et conversion ont généré une forte augmentation de trafic sur votre site. Malheureusement, beaucoup de visiteurs ont cliqué sur vos annonces sans pour autant vous laisser leur contact. Ce comportement est très fréquent, peu d’internautes acceptent de laisser leur contact dès leur première visite, même s’ils sont intéressés par vos produits ou services. Rien n’est perdu pour autant au contraire ! En gardant régulièrement le contact avec vos prospects, vous les familiarisez peu à peu avec votre marque, et leur faites passer des messages pour les convaincre de prendre contact avec vous.

Le remarketing vous permet cela via les 2 formats suivants :

Remarketing Search

Le remarketing Search fonctionne de la même manière que les annonces Google Search. Dès lors qu’un internaute tape un des mots-clés que vous avez acheté, vous apparaissez dans les premiers résultats de Google. Quel intérêt alors ? Avec le remarketing Search, vous effectuez un ciblage spécifique aux internautes ayant déjà visité votre site web. Puisque ces prospects sont plus susceptibles de convertir, vous pouvez également décider d’enchérir plus uniquement sur ce type de de visiteurs.

Remarketing Display

Le remarketing Display vous donne plus de visibilité dans la mesure où vous diffusez une annonce aux visiteurs non convertis lors de leur navigation, même s’ils ne sont pas en situation de recherche. En diffusant des bannières à des visiteurs  « non convertis », vous ancrez votre marque dans leur esprit, ce qui pourra jouer dans la balance lorsque le visiteur validera sa décision d’achat.

Le + :  grâce au remarketing, vous pouvez personnaliser vos annonces selon les pages que votre prospect a visité pour maximiser les opportunités de conversion.

 

Envie d’un conseil personnalisé selon vos besoins ?

Envoyez-moi un email pour me décrire votre situation.

 

Commenter cet article Voir les commentaires (0)

Rechercher