Pourquoi optimiser ses images ?

Vous l’avez sûrement déjà constaté : certaines pages peuvent mettre longtemps à s’afficher. Cela peut être dû à la qualité de votre connexion à internet (notamment sur réseau mobile), à la qualité de l’hébergement mais également aux poids des éléments à charger.

Par exemple, une galerie photo de 50 images (non optimisées), peut peser plus d’une centaine de Mo (méga-octets) !

Conséquences :

• L’internaute va devoir attendre plus longtemps que la page se charge
• Les moteurs de recherche vont pénaliser le référencement du site (la vitesse de chargement étant l’un des critères pour un bon référencement)
• Si l’internaute consulte la page depuis son smartphone, il va utiliser plus rapidement son crédit de données mobiles
• Vous allez plus rapidement remplir l’espace de stockage de votre hébergement web

Quel format d’image utiliser ?

Il existe une multitude de formats, mais peu sont à la fois adaptés au web ET compatibles avec l’ensemble des navigateurs.

Le JPG

Avec le JPG, peu de chance de se tromper ! Ce grand classique du web est adapté à la plupart des utilisations grâce à sa bonne compression.

Le GIF

Le GIF est connu principalement car il permet d’afficher des images animées. Il n’a aujourd’hui d’intérêt que cette particularité, ce format étant limité à 256 couleurs maximum.

Le PNG

Ce format se décline en deux méthodes de compression : le PNG-8 et le PNG-24. L’extension étant la même (.png).

Le PNG-8 est, comme le GIF, limité à 256 couleurs. Il bénéficie en outre d’une meilleure compression que son aîné (mais pas de sa capacité d’animation).
Malgré cette limitation colorimétrique, ce format est bien plus léger qu’un JPG pour certains types d’images ayant peu de couleurs, comme les logos, les graphiques, les pictogrammes…

Le PNG-24 a la particularité de pouvoir gérer la transparence (chaque pixel peut être plus ou moins opaque, et donc révéler ce qui sera affiché sous l’image).
Contrairement au JPG et au PNG-8, ce format est dit « sans perte », c’est-à-dire qu’il ne dégrade pas la qualité de l’image. Le revers de la médaille étant qu’il est plus lourd. Il convient donc de ne l’utiliser lorsque cela est nécessaire.

Le SVG

Ce format est dit « vectoriel ». Comme son nom l’indique, il est composé de vecteurs : le visuel est donc calculé, contrairement aux images dites matricielles (comme le JPG ou le PNG par exemple) qui ont une taille en pixel définie.
L’avantage du format vectoriel est qu’il peut être redimensionné à l’infini sans perte de qualité, là où une image classique va être « pixelisée » si on l’agrandie. Le SVG présente aussi l’avantage d’être léger.
Enfin, le SVG peut aussi être animé, même si cela s’avère être plus complexe à réaliser qu’avec le format GIF, car il faut savoir coder.

Les « nouveaux formats » WebP, HEIF/HEIC…

De nouveaux formats d’images, plus performants, ont fait leur apparition ces dernières années. Intéressants « sur le papier », ils ne sont malheureusement pas encore pleinement compatibles avec les différents navigateurs.

Caractéristiques des formats d’images :

Comment optimiser une image pour le web ?

Adapter les dimensions de l’image aux dimensions d’affichage

L’erreur classique est de placer ses photos telles quelles sur son site. L’image va certes s’afficher, mais pourquoi charger une photo de 10 mégapixels lorsqu’un visuel bien plus léger de 300 pixels suffirait ?

Il convient donc de redimensionner ses visuels à la taille à laquelle ils seront affichés. Le gain de poids sera déjà considérable.

À quelle résolution dois-je enregistrer mes visuels ?

Peut importe ! On entend souvent dire – à tord – qu’il faut utiliser une résolution de 72dpi pour un affichage à l’écran mais c’est inexact. La résolution est souvent confondue avec la définition d’une image.

La résolution correspond à la densité de pixels sur une zone donnée. Elle est exprimée en dpi = dot per inch, soit points (ou pixels) par pouce (ppp en français). Votre écran, qu’il soit HD, retina, ou du siècle dernier, affichera par défaut chaque pixel de vos visuels sur un pixel de l’écran.

La définition correspond au nombre de pixels de votre visuel : une image de 300×200 px s’affichera sur… 300×200 pixels de votre écran, qu’elle soit en 72, 300 ou 4 000 dpi !

Pour en savoir plus, lisez cet article sur le même sujet

Avec quels outils optimiser une image ?

Photoshop

Si vous avez l’outil phare d’Adobe, la fonction « Enregistrer pour le web » permet très rapidement d’alléger considérablement vos visuels.
Il suffit de choisir le format souhaité (JPG, GIF, PNG-8, PNG-24) puis le niveau de compression.
Pour le format JPG, une qualité de 60 donne un très bon rapport poids/qualité.
Pour les formats GIF et PNG, le poids va dépendre du nombre de couleurs choisi (de 256 à 2 couleurs). Il s’agit donc de sélectionner une palette adaptée à la richesse colorimétrique du visuel.

Les outils en ligne

IloveIMG
Le couteau suisse en ligne de l’image. Il vous permet toutes sortes d’actions sur vos images : redimension, compression, recadrage, conversion, pivotage…

Ezgif
Autre couteau suisse, mais du GIF cette fois. Il permet toute sorte d’interventions sur les GIFs animés, ainsi que de la conversion d’une vidéo en GIF et vice-versa.

TinyPNG
Cet outil (qui existe aussi sous forme de plugin Photoshop) permet par un simple glisser-déposer d’alléger considérablement vos PNG.

SVGOMG
Tout comme TinyPNG, cet outil optimise vos images, au format SVG.

Cookies et traceurs : il n’y a pas un site internet qui ne les utilise pas, et pour cause – il permettent de faire fonctionner les sites, mais aussi de réaliser des statistiques et d’adresser de la publicité ciblée. La réglementation européenne imposait déjà de recueillir le consentement des visiteurs du site internet au dépôt de cookies, mais le RGPD est venu renforcer ces exigences. Il devient de plus en plus simple pour les visiteurs de refuser en bloc tous les cookies. 

Le défi pour les annonceurs est désormais le suivant : comment encourager les utilisateurs à consentir au dépôt de cookies de manière conforme à la réglementation ? 

Les participants :

Lors de ce webinar, Sylvain Chemtob, directeur du cabinet de conseil DPO Consulting SUD-EST, expert de la protection des données personnelles, apportera un éclairage sur la réglementation en vigueur et la position de la CNIL, tandis que Antoine Coulloudon, directeur de l’agence FRSH, expert en communication, vous présentera des solutions pratiques pour recueillir le consentement des utilisateurs de manière efficace et conforme. 

Au programme :

Retrouvez-nous pour 30 minutes de conseils pratiques et 10 minutes de questions-réponses.

Le Webinaire sur les Cookies et le RGPD :

Programme pour être opérationnel dès la fin du confinement

#1 Faire un auto diagnostic

Réévaluez votre offre et réfléchissez à votre environnement.
Certaines questions clés peuvent vous aider : 

• Comment pouvez-vous apporter plus de valeur à vos clients tout en optimisant la rentabilité de vos services / produits les plus vendus ? 
• Quelles sont les opportunités que j’ai pu manquer ? 
• Mes équipes se sont-elles adaptées aux nouveaux enjeux ?

#2 Se tourner vers la concurrence 

Pour bien se connaître, il faut aussi connaître ceux qui nous entourent. Il est primordiale de s’intéresser aux nouvelles offres que la concurrence a récemment proposée ainsi que les canaux de vente.

• Comment ont-ils communiqué et avec quelle régularité ? 
• Quelles idées / best practices pouvez-vous adopter pour accentuer cette différenciation ? 

Pensez toujours à vos concurrents indirects !

#3 La cible et ses demandes 

• Prenez le temps d’écouter vos publics ! Vos messages sont-ils adaptés ? 
• Vos cibles ont-elles un nouveau besoin sur lequel vous pourriez vous positionner ?

Il est donc important de faire un bilan de vos capacités à répondre aux anciens et nouveaux besoins, se réinventer et réfléchir au delà pour proposer une ligne de conduite claire et lisible.

#4 La communication 

La communication digitale est un élément stratégique crucial et notre rôle est de vous accompagner pour mieux exprimer vos besoins et préparer ensemble un plan d’action concret.

• Vos objectifs sont-ils clairement établis ?
• Quels sont les messages clés et à quel fréquence les diffuser ?
• Sur quelles plateformes digitales se retrouvent vos publics et y êtes-vous présent ?

#5 Le plan d’action

• Comment mettre en place votre plan opérationnel ?
• Devez-vous adapter vos services ? 
• Quels outils à mettre en place pour déterminer la performance de vos actions ?

Comme toujours, les crises font office d’amplificateur, et les projets digitaux vont être au cœur de votre stratégie bien au-delà de ces prochains mois.
Et si vous transformiez cette crise en avantage concurrentiel ?

Pourtant, tout n’est pas si simple. Le site web a encore de beaux jours devant lui, et même de nombreux avantages. Décryptage.

Les solutions existantes

Pour bien saisir les avantages et les inconvénients des différentes solutions, il faut savoir qu’il existe 4 types d’applications  :

• l’application native
• l’application hybride
• la web application
• la progessive web app (PWA)

1- L’application native

Téléchargeable via les plateformes d’applications (Play Store, App Store, Marketplace…), l’application native est une sorte de logiciel que l’on installe sur son mobile ou sa tablette. Elle est doit être développée spécifiquement pour chaque système d’exploitation (Android, iOS…). Cela implique donc un coût de développement conséquent si l’on veut toucher l’ensemble des utilisateurs sur mobile. Avec environ 8 smartphones sur 10 tournant sous Android, Google mène la danse, très loin devant Apple (iOS) qui se situe autour de 20  % (les autres environnements tels que Windows Phone ou Blackberry OS étant devenus presque anecdotiques).

2- L’application hybride

À mi-chemin entre l’application native et la web application, l’application hybride embarque des éléments HTML dans un conteneur. Ce sont en quelque sorte des sites web chargés par une application allégée. Cela simplifie grandement le développement car tout le contenu est multi-plateforme, seul le conteneur diffère.

3- La web application

La web application correspond à la version mobile du site internet. Plus rapide à développer car le code est commun à toutes les plateforme (même s’il existe quelques variantes selon les navigateurs). En contrepartie, elle offre moins de contrôle de la partie matérielle du smartphone, et est un peu moins fluide car le contenu doit être téléchargé (via le réseau Wi-Fi ou cellulaire).

4- La progessive web app (PWA)

La PWA est à mi-chemin entre l’application et le site web. Elle offre cependant de bons arguments par rapport à ces derniers : nul besoin d’un store pour la promouvoir, elle s’installe en un clic lors de la navigation sur le site web classique :

Dès lors, elle apparaîtra parmi vos applications et se lancera comme telle, sans passer par votre navigateur favori. Comme une app, la PWA se lance donc en plein écran (vous n’aurez donc plus la barre d’adresse, les onglets, les boutons précédent/suivant…). L’interface sera chargée à la première visite et mis en mémoire cache. Sur la page suivantes, il ne restera que le contenu à charger. La PWA est donc toujours up-to-date : vos visiteurs n’ont pas à mettre à jour l’application comme c’est le cas pour les applications venant de l’App Store ou du Play Store. L’autre avantage qui en découle est que peu d’espace disque est nécessaire sur le smartphone.

Alors, « site mobile, application mobile ou les deux  ? »

On peut d’ores et déjà éliminer le choix d’une appli mobile seule, car ce serait se priver d’une très large audience potentielle. À moins de s’appeler Amazon, Google ou Facebook, rares sont les sociétés qui ont une force de frappe suffisante pour « forcer » leurs utilisateurs à se tourner vers leur app. Reste donc à déterminer si la création d’une application mobile, en plus de votre site mobile (ou responsive adaptatif) est pertinente. 

Comment faire son choix ?

Budget

Comme souvent, le budget que l’on souhaite allouer au projet va conditionner le choix de la technologie utilisée. Dans la mesure où l’application native nécessite de développer pour non pas un, ni deux, mais bien trois plateformes ( !) –Android et iOS a minima, ainsi qu’une version mobile du site pour les visiteurs n’ayant pas installé l’application–, il est probable que cette solution soit écartée assez rapidement.

Cible

Si le budget est suffisant, se pose alors la question de la cible visée :

• Est-elle technophile ? Bien que l’utilisation des smartphone quasiment universelle, tous les publics ne sont pas adeptes des applications, et préfèrent les sites mobiles.
• Votre secteur d’activité se prête-t-il à une utilisation mobile ? Si vos collaborateurs travaillent principalement sur de grands tableurs Excel, probablement pas (ou alors sur tablette a minima).
• Votre notoriété est-elle suffisante pour s’engager sur les marketplaces ? Contrairement à un site web ou le référencement (naturel ou payant) peut vous faire connaître relativement rapidement, la promotion de votre app parmi les millions déjà existantes sera plus difficile.

Fonctionnalités

Enfin, gardons à l’esprit qu’une application n’a d’intérêt que si elle apporte une plus-value suffisante par rapport à votre site : pour que les utilisateurs aient, dans un premier temps, envie de la télécharger, et, dans un second temps, la volonté de la conserver, de la mettre à jour…

Le marketing de contenu est une composante de l’inbound marketing qui permet alors d’attirer l’attention de prospects qualifiés, d’influencer le comportement d’éventuels consommateurs et de faire connaître sa marque ou son entreprise. 

Les techniques de marketing de contenu sont en perpétuelles évolutions, aussi, il n’est pas étonnant qu’en 2020, de nouvelles tendances apparaissent.

1. Des contenus visuels toujours plus spectaculaires

Sortir du lot est le credo de chacun pour cibler un large public. Les plateformes les plus populaires comme Instagram, YouTube ou Snapchat poussent les marques et les internautes à utiliser leurs filtres magiques pour créer des visuels toujours plus funs et créatifs. En 2020 les marques devront être présentes également sur TikTok qui propose des fonctions de réalité augmentée.

2. Les contenus seront générés directement par les utilisateurs

Une récente enquête marketing menée aux États-Unis a ainsi mis en lumière que 90  % des acheteurs étaient plus sensibles aux contenus générés par les utilisateurs qu’à la publicité classique.

C’est pourquoi les marques utilisent de plus en plus les contenus générés par les utilisateurs eux-mêmes sur YouTube par exemple pour créer plus de confiance auprès du public.

3. Le storytelling en vidéo se « professionnalise »

Le storytelling est essentiel pour provoquer des émotions et faire passer des messages. 

Les contenus vidéo occupaient déjà une place centrale dans la stratégie de content marketing en 2019. En 2020, ces contenus seront entièrement repensés pour engager l’internaute.

4. La recherche vocale, nouvel eldorado du content marketing

Toujours friand de plus de facilité et de rapidité, l’Internaute utilise de plus en plus la recherche vocale. Celle-ci nécessite un site web accessible car Google est le premier des aveugles sur Internet. 

5. 2020, année du podcast

Ce format audio doit justifier votre propre communication et ainsi valoriser vos messages sur les réseaux sociaux. De plus en plus d’internautes préfèrent l’audio pour apprendre et comprendre plutôt que les messages écrits ou vidéos responsables de l’infobésité.

6. Fini le snack content !

Les internautes attendent maintenant du contenu de qualité avec des sources irréprochables, ils sont prêts à écouter (plutôt que de lire) des articles de fond assez longs et bien documentés. Bien sûr il faut continuer d’intéresser ces cibles avec du contenu court et rapide mais il faut également s’ouvrir aux articles longs (1 500 à 2 000 mots).

7. Se démarquer par son expertise

Les contenus textuels en 2020 devront proposer toujours plus d’expertise afin de satisfaire aussi bien les internautes et les mobinautes que les moteurs de recherche.

Les lecteurs pourront ainsi retrouver des informations à forte valeur ajoutée et vous augmenterez votre EAT (Expertise, Autorité, Fiabilité) si important pour améliorer le référencement de votre site et vos backlinks.

8. Un contenu personnalisé ou rien

Aujourd’hui voir son nom et son prénom dans un e-mail ne suffit plus. Votre cible attend plus de personnalisation de contenu, il vous faut proposer des choix en fonction des attentes des consommateurs.

9. Les KPI’s au cœur de votre stratégie de contenu

L’analyse des habitudes des internautes sur votre site et sur vos réseaux devient plus complexe car le simple nombre de pages vues ou taux de conversions ne suffisent plus à définir la stratégie de contenu. Il faut également mesurer la performance des titres, la profondeur du scroll, le degré d’implication de vos lecteurs…

10. La confiance est de retour

Il s’agit d’un critère déterminant dans les actes d’achat, il faut donc être authentique dans ses actes et ses mots pour attirer de nouveaux clients. 

Aujourd’hui, 15 à 20 % de la population souffrent d’un handicap toutes formes confondues (visuel, auditif, moteur…). L’accessibilité est un enjeu majeur en 2020 et pour les années à venir, l’améliorer sur votre site web vous donnera l’opportunité de toucher un public plus large, d’améliorer votre image et d’augmenter le trafic et les conversions.

Qu’observe-t-on aujourd’hui ? Efforts insuffisants et moyens trop limités

À l’heure actuelle, très peu de sites web sont correctement accessibles, tandis que la demande d’utilisateurs déficients qui souhaitent les consulter (ou qui sont contraints) est croissante, fortement propulsée par les technologies grand public émergentes.

Ainsi, la plupart des organisations, administrations et sociétés privées se contenteront de réclamer dans leur cahier des charges « un module » ou « une sidebar » permettant à l’utilisateur de changer les contrastes, d’augmenter la taille du texte, convertir les fonds en clair.

Ce système est une rustine temporaire permettant de rendre le site accessible aux personnes qui présentent une faible déficience visuelle seulement (daltoniens, hypermétropes, astigmates…). Et encore, il se peut que ça crée plus de problème que ça n’en résolve. Par exemple si l’utilisateur convertit tous les fonds en clair alors que tous les textes restent blanc…

C’est pour cela que bien souvent, une bonne prise en compte en amont de la réalisation graphique permet de régler cette problématique en utilisant des couleurs contrastées et des typographies de taille et de lisibilité suffisante.

Certains outils d’accessibilité out of the box proposent même un lecteur d’écran qui ne sera à 99 % jamais utilisé par une personne non voyante ou présentant un trouble de la vision important.

Pourquoi ? Car cela nécessite que l’on clique dessus et que les personnes aveugles n’utilisent pas de souris pour naviguer sur un ordinateur, c’est évident vu comme ça mais l’erreur est encore bien trop courante.

Ces outils sont d’autant plus souvent intégrés en Javascript ou via une fenêtre superposée au site, ils se rendent donc totalement inaccessible à la navigation par clavier.

De plus, ils font la plupart du temps doublons avec des fonctionnalités déjà présentes dans les navigateurs récents. En effet, Mozilla Firefox (logiciel gratuit et open source) par exemple, propose déjà nativement des fonctionnalités bien intégrées : augmenter ou diminuer la taille du texte, forcer un contraste élevé. Ou bien des modules supplémentaires pour, par exemple, lire le contenu d’une page.

Comment les personnes avec un handicap utilisent-elles un site web accessible ?

Il n’y a pas de réponse absolue à cette question, néanmoins voici comment les personnes présentant les handicaps les plus fréquent, utiliserons votre site web :

Personnes malvoyantes (daltoniens, hypermétropes, astigmates…) :

Ces utilisateurs vont rencontrer des difficultés avec les informations données uniquement par la couleur, l’insuffisance de contrastes, l’utilisation de couleurs ou de combinaisons de couleurs imperceptibles (par exemple, le vert et le rouge pour les daltoniens deutéranopes), la taille des caractères…Ils vont avoir besoin que votre design graphique soit particulièrement travaillé, en gardant à l’esprit que les nuances de couleurs doivent être supérieures à un certain niveau de contraste, que les typographies graphiques et script sont bien souvent peu lisibles et qu’il se peut qu’ils aient recours à la fonction zoom du navigateur (n’écrivez pas tout votre site en 48px, ce n’est pas utile, les outils le feront très bien).

Personnes aveugles :

Ces personnes vont rencontrer des difficultés avec tous les types de contenus non textuels (images, pictos, vidéo…), la perception de la structure de l’information (tableaux, zones de page…), l’utilisation des éléments interactifs (éléments de formulaire, onglets en JavaScript, contenus en mouvement…).
Ils vont avoir besoin d’utiliser un lecteur d’écran qui sera installé sur le système nativement ou par leurs soins, macOS/iOS proposent par exemple de lire l’écran via VoiceOver sur les ordinateurs et téléphones de la marque à la pomme.

Personnes sourdes et malentendantes :

Ces utilisateurs vont en général savoir naviguer et lire vos contenus mais vont être bloqués dès qu’il va y avoir une vidéo non sous-titrée et/ou lorsque l’élocution n’est pas claire, ou bien si certaines informations sont données sur votre site par voie audio.

Personnes présentant un handicap moteur :

Ces personnes vont rencontrer des difficultés à utiliser une souris pour certains et un clavier pour d’autres. Ils vont avoir besoin que votre site puisse être utilisé complètement avec ces deux moyens de navigation et que vos zones cliquables soient suffisamment larges et dégagées.

Une bonne accessibilité : c’est plus simple que l’on ne le pense !

L’accessibilité, c’est facile et ce n’est pas réservé aux accros du code !

Le développeur a certainement le plus gros rôle, il va devoir appliquer les standards du RGAA et si possible ceux du W3C lorsqu’il va coder son site web. En faisant constamment attention à ce que la lecture de son code soit compatible avec les lecteurs d’écran, que la structure de son site soit navigable au clavier, qu’aucune fenêtre ou message ne sorte du « flux »…

Le webdesigner ou intégrateur a beaucoup de travail lui aussi, il va veiller à ce que le travail du développeur soit correct et il va à son tour travailler en faisant attention aux attributs « alt » de ses images et de ses liens, à l’ordre des contenus et du « flux », aux éléments dynamiques, aux niveaux de contraste de sa création…

Le chargé de projet a un rôle plus global, en plus de garder à l’œil les deux précédents, il va se charger de s’assurer que les standards concordent avec le cahier des charges et la demande du client et auquel cas reprendre les points bloquants en proposant des alternatives.

Le client a également un rôle important, même s’il a moins de travail que les 3 précédents : en étant sensibilisé en amont à l’accessibilité . Il peut contribuer à son niveau pour isoler certains points problématiques, réaliser des tests, proposer des modifications et surtout valider les textes alternatifs…

L’altruisme ce n’est pas pour vous ?
Vous avez doublement tort !

« Mais, mon site ne s’adresse qu’à des valides ! »
Allez tout droit en prison et ne passez pas par la case départ ! Figurez-vous que Google est le premier de tous les aveugles sur le web.

En effet, le robot qui scanne votre site afin de le référencer sur le moteur de recherche le plus populaire de la planète, est bel et bien complètement aveugle et ne pourra jamais juger graphiquement votre site. Le seul moyen pour lui de comprendre de quoi parle votre site et si il doit, ou non, le proposer à ces utilisateurs, est de se baser sur les nombreuses balises « alt » qu’il va trouver, de juger la pertinence et la propreté du code ainsi que l’utilisation de technologies ou des codes obsolètes.

De plus l’Internet de demain sera beaucoup plus parlé qu’aujourd’hui avec le développement des assistants vocaux.
Mélangé avec beaucoup d’autres paramètres, l’accessibilité d’un site est, aujourd’hui, un sujet qui pèse de plus en plus lourd dans la balance du référencement !
N’attendez plus pour vous y mettre !

Mais l’accessibilité c’est obligatoire ou pas ?

Ne téléphonez pas à votre avocat tout de suite Vous n’avez actuellement aucune obligation en tant que société privée mais les organisations publiques doivent répondre à de plus en plus de normes qui se mettent en place au fil du temps.

Et si ça devenait obligatoire, êtes-vous prêt à répondre efficacement ?

L’accessibilité web est en constante évolution et encore tourmentée par certains débats, par manque de moyen, de temps ou de motivation, ça ne fait pas partie des sujets qui agite la France ou l’Europe en ce moment. D’autant que tout évolue très vite et ce que nous venons de voir sera probablement à revoir d’ici quelques années, mais c’est bon signe, ça veut dire que les choses changent et dans le bon sens.

Malgré toutes ces belles perspectives, l’accessibilité est remise en question parfois même par les intéressés eux mêmes. Difficile de comprendre l’intérêt d’un logo ou d’une structure de page quand on a jamais eu la vue ou encore d’arriver à lire un texte quand on a appris la langue des signes avant même le Français… Certaines solutions restent encore à trouver !

Le nombre de personnes nécessitant un site accessible est en hausse permanente car les technologies évoluent très vite et permettent l’accès au web à des personnes qui ne l’ont jamais eu auparavant.

C’est une aubaine pour eux, et notre rôle est de les accompagner en rendant l’accès à l’information possible au mieux par tous. C’est un travail conséquent mais qui vous demandera moins d’efforts par la suite pour simplement faire évoluer votre site en suivant les bonnes pratiques à venir.

Sources :
Site officiel du gouvernement concernant la RGAA
Site du W3C fr
Documentation Mozilla sur l’accessibilité

Vous trouverez dans ce livre blanc une description des experts dont l’agence a besoin pour faire avancer votre communication digitale.

Pas de grand blabla, mais plutôt une galerie de portait flash à la mode Frsh !

Web designer Créatif web et multimédia

Le webdesigner c’est un peu l’architecte du digital.
Sa mission : rendre fonctionnelles et esthétiques des orientations stratégiques définies en amont. Il aime donc travailler sous la contrainte pour mieux s’en affranchir.

C’est un défricheur, un pionnier, un ouvreur d’espace. Il se nourrit d’idées et de tendances pour imaginer celles du futur. Bref, c’est un rêveur qui a les pieds sur terre.

Chargé de projets web

Le chargé de projets est d’abord celui qui écoute. Les clients, pour comprendre leurs attentes. Les experts de l’agence, pour imaginer comment satisfaire ces attentes. Sa principale qualité est l’empathie. Il sait se mettre à la place de ses interlocuteurs pour s’imprégner de leur univers et gagner leur confiance.

Une fois la connexion établie, avancer ensemble devient une nécessité… et c’est la base d’un projet réussi.

Développeur web

Le développeur web, c’est celui qu’on ne rencontre jamais mais qui est toujours présent. C’est un alchimiste qui voit dans les lignes de codes des univers colorés, des possibilités nouvelles, des parcours innovants. Sa citation préférée est de Mark Twain : « Ils ne savaient pas que c’était impossible, c’est pourquoi ils l’ont fait ».

Le développeur web n’a donc pas de limite, il entrevoit toujours la solution et c’est ce qui le pousse à aller de l’avant, à innover pour rendre réel même l’impossible.

Community manager

Vous avez sans doute remarqué le petit air de famille qui relie community manager et communication. Normal, être community manager c’est être au cœur d’un réseau de communication… animé de la volonté de le faire vivre et grandir. Et pour cela, il faut savoir écouter et, bien entendu, savoir proposer. En ayant une forte addiction à la nouveauté et à ce qui fait l’actualité.

Le community manager est donc un aventurier, assoiffé de découvertes, une espèce de tête chercheuse de tendances et d’événements.

Rédacteur Web

Trop souvent, on s’imagine qu’il suffit d’un peu de temps et d’énergie pour écrire sur son entreprise ou sur ses produits. Qu’il suffit de s’y mettre. Sauf que… Sauf que ce n’est pas si simple.

Pour bien écrire, il faut adopter le ton juste. Trouver le bon équilibre entre profondeur des idées, légèreté du style, force des mots, pertinence des métaphores, allégories, anaphores… Sans compter la nécessité de surmonter les contraintes spécifiques des différents supports. Alors oui, il suffit d’un peu de temps et d’énergie pour écrire. Mais il faut bien plus que cela pour séduire et convaincre.

Stratège digital et media sociaux

Le stratège digital est avant tout une vigie. Il voit loin, plus loin que les autres. Et, ça va de pair, c’est un iconoclaste, un casseur de codes, toujours prêt à sortir des sentiers battus pour imaginer avant tout le monde des stratégies web audacieuses, innovantes, surprenantes.

Ses atouts ? Son charisme, ses idées un peu folles et son enthousiasme… Surtout son enthousiasme : il parle le futur comme vous, le présent.

Motion designer

On ne plaisante pas avec le motion design. C’est un métier sérieux. Mais pas un métier triste. Car, s’il faut de la persévérance pour mettre en mouvement des illustrations et les faire vivre, il faut de la créativité pour émouvoir, surprendre ou amuser.

Au fond, le motion designer cultive sa part d’enfance pour exprimer des choses qui parlent au plus grand nombre. Son imagination est sa source. Et plus il la débride, plus il travaille pour la rendre accessible.

Référenceur (ou expert SEO)

Difficile de comprendre comment fonctionne le SEO. Trouver la bonne formule pour faire apparaître un site dans les premiers résultats des moteurs de recherche est un exercice de haute voltige. C’est un savant mélange d’analyse et de prospective. De compréhension des effets de ce qui a déjà été mis en place et d’anticipation de ce qui devra l’être.

Le référenceur SEO est donc un être bicéphale qui marie rigueur analytique et intuition. Si son cerveau droit est hyper développé, le gauche n’est pas en reste… Même s’il a la tête bien pleine, il l’a surtout bien faite.

Réalisateur photo et vidéo

Pour un réalisateur vidéo, entrer dans un sujet, l’approfondir puis se l’approprier, est un préalable essentiel. Cela lui permet de s’en détacher suffisamment pour s’en inspirer plus profondément… de libérer son regard pour capter les moments les plus utiles à son propos.

Il pratique donc un art de l’instantané. Un art où l’œil sait saisir du sens dans l’infime. Un art qui n’est rendu possible que par une préparation longue, précautionneuse, exigeante.

Administrateur réseau et hébergement

Dans le métiers digitaux, certains sont dans la lumière, d’autres dans l’ombre. L’administrateur réseau et hébergement fait partie des seconds.

Sorte d’éminence grise, il s’assure du bon fonctionnement et du bon ordonnancement des réseaux. On ne le voit donc pas, on ne l’entend pas, mais il est là, urbi et orbi, à jongler avec les serveurs assurant leur continuité et leur sécurité. C’est aussi un veilleur : il connaît les technologies, suit leurs évolutions, les applique. Sa discrétion est à la hauteur de son investissement, moins on le voit, moins on parle de lui, plus il est présent.

Téléchargez nos autres livres blancs :

Pourquoi refaire son site ?

Plusieurs raisons peuvent vous amener à penser que c’est le moment de refaire son site, elles peuvent être  :

• « Mon site web est obsolète. » 

Un site ancien peut effectivement desservir votre marque. Trop vieux, démodé, peu ergonomique…

• « Mon site web est mal référencé.» 

Un site qui n’a pas été conçu pour en optimiser le référencement aura du mal à décoller dans les pages de résultats.

• « Mon activité a évolué. » 

Voici une bonne raison de se lancer dans un processus de création d’un site web. Attention toutefois à conserver les avantages que vous aviez obtenus au fil du temps… un bon référencement, une bonne fréquentation…

• « J’ai de nouveaux objectifs ».

On en revient aux fondamentaux. La création d’un site web répond d’abord à des objectifs stratégiques.

• « Mon contenu n’est pas adapté sur mobile. »

Vous souhaitez être visible sur smartphone mais votre site actuel n’offre pas une lisibilité correcte des textes et des images notamment.

• « Mon site n’est pas sécurisé. »

Google pénalise les sites qui ne sont pas sécurisés avec un certificat SSL, si son installation s’avère trop complexe sur votre site, la refonte sera alors plus avantageuse économiquement.

Quand refaire son site ?

En général c’est la question la plus délicate à laquelle répondre. Il n’y a pas de moment imposé, pourtant quelques règles sont à prendre en compte. La durée de vie d’un site dépend avant tout du secteur d’activité et des produits et services qu’il met en avant. Si vous vendez des articles de mode par exemple, il faudra procéder à un rafraichissement plus régulier que si votre site est institutionnel.

Technologiquement, un site peut être vite dépassé s’il n’est pas mis à jour. Dans le cas où il est mis à jour régulièrement la durée de vie de votre site peut s’allonger mais attention toutefois au design. Nous estimons qu’un rafraichissement graphique est nécessaire tous les 2 à 3 ans et qu’une refonte complète doit être envisagée tous les 5 ans mais cela dépend toujours de vos objectifs et de votre cible.

Avec qui refaire son site ?

Plusieurs possibilités s’offrent à vous, vous pouvez le faire vous-même ou faire appel à une agence. L’agence a pour mission de vous conseiller stratégiquement sur les orientations graphiques et techniques à suivre.

Une refonte de site internet est l’occasion de se poser les bonnes questions  ! Mes contenus sont-ils adaptés à ma cible  ? Mon service est-il bien présenté  ? Les prix sont-ils attractifs  ? …

Alors, il est important de prendre son temps et pourquoi pas de faire un diagnostic ?

2020, quant à elle, sera probablement celle la voix. Toutes les tendances marketing en parlent, la reconnaissance vocale est en pleine croissance et révolutionne le monde de la recherche. Elle peut se définir comme étant la retranscription automatique d’un son sous forme de texte.

La reconnaissance vocale s’apparente à tous les assistants vocaux personnels comme Alexa, Google Home, Siri ou Cortana. Même si les français comme les européens sont encore frileux face à l’utilisation des requêtes vocales, l’ensemble de la population mondiale s’en sert très régulièrement. Les questions sont encore basiques, il s’agit surtout de recherches liées à la météo, l’actualité, aux informations simples et générales, à la mise en place d’alertes ou au lancement de musique. Cependant toutes les études annoncent la progression certaine de l’utilisation de la voix pour ses recherches. De plus le vocal commerce est dès à présent le 4^e canal¹ de vente après le magasin, le e-commerce et le m-commerce (mobile commerce).

Pourquoi un tel engouement  ?

• Facilité de l’usage en supprimant des étapes inutiles
• Rapidité et pertinence de la réponse
• Possibilité d’utilisation en accomplissant une tâche annexe en même temps

Alors que nous écrivons 53,5 mots à la minute avec un clavier, 161,2 mots peuvent être saisis à la minute avec la voix²  !

_{1 Hubinstitute
2 BI Intelligence}

Quel impact sur votre site ?

PENSEZ MOBILE FIRST  !

Les sites doivent être optimisés pour le mobile car 80 % des accès se font par le biais d’un smartphone. C’est le premier pas essentiel pour s’assurer d’un bon référencement naturel.

RENDEZ VOS CONTENUS CONVERSATIONNELS

Les sites doivent se positionner sur des mots-clés basés sur un besoin détaillé et non plus sur des termes précis. Par exemple, un internaute ne va plus rechercher « coiffeur homme Lyon » mais va plutôt se renseigner sur « quel meilleur coiffeur homme près de chez moi ». La précision est le mot d’ordre, il faut s’imaginer dans la peau de la personne qui va effectuer la requête et pouvoir y répondre dans votre site et/ou dans votre blog.

NE NÉGLIGEZ PAS GOOGLE MY BUSINESS

La majorité des recherches vocales sont locales. Pour le commerce, les requêtes vont porter sur un besoin immédiat et limité à la zone géographique proche. La fiche descriptive de Google My Business permettra d’apporter les information clé sur votre entreprise, d’être facilement localisable et de proposer un itinéraire.

En somme, il est important de faire évoluer votre stratégie de référencement pour positionner votre site sur de nouvelles requêtes comportant plusieurs mots et expressions que les internautes pourraient demander à l’oral.

Une astuce  ? 

Faire des FAQ en écrivant les questions que peuvent se poser n’importe quel internaute avec des expressions/mots conversationnels afin de sortir dans les meilleurs résultats sur ce modèle de recherche.

En plus de vous permettre d’augmenter votre CA, il permet d’assurer la mise en valeur de vos produits, services et valeurs de marque sur tous les moteurs de recherche. Aussi, tout projet de site e-commerce se travaille en adéquation avec les objectifs de vente et de visibilité à court et moyen termes.

Étape #1 : Définition du projet de site e-commerce

Pour créer un site e commerce, nous vous conseillons de faire appel à des experts et de faire réaliser une étude de marché.

Votre futur site internet pourra ainsi devenir un véritable site marchand avec une stratégie de diffusion des produits cohérente. Ne laissez pas de côté la question de la gestion des stocks et la liaison avec la caisse, première clé en main pour la création de votre site de vente en ligne.

La solution e commerce implique également une définition claire du type de produits proposés et du ton à respecter dans la gestion des avis clients.

Si vous détenez déjà une boutique en ligne, pensez également à répertorier tous ces éléments, sans oublier de choisir les moyens de paiement et la mise en place du contenu du site initial sur votre nouveau site.

Pour toutes ces raisons, le choix et la pertinence du CMS sont essentiels.

Étape #2 : Étude en amont

Avant de construire le dossier, quelques prérequis s’imposent tels que la réservation du nom de domaine, le choix de l’hébergement e-commerce, l’analyse des besoins en réseaux sociaux et l’analyse des contenus existants. Tous ces éléments sont indispensables pour que votre site web existe et vous appartienne et vous représente de la meilleure des manières. Gardez toujours à l’esprit qui est votre cible et quelle sera sa future expérience utilisateur.

Étape #3 : Planning & cahier des charges

La création d’un planning et d’un cahier des charges est une phase indispensable pour que le projet de création de site e commerce soit géré avec succès. À cette étape, il s’agit de mettre en place une charte d’optimisation du référencement naturel, SEO et, bien sûr, de valider le budget global du projet.

Étape #4 : Conception du site e-commerce

À cette étape, il convient de définir l’arborescence et le zoning, d’étudier le parcours utilisateur et pour la partie technique, de configurer le serveur (l’environnement de développement et de production).

Pour ce faire vous devrez récupérer les contenus (textes, visuels, vidéos) et si besoin, prévoir des contenus supplémentaires. Cette étape est une étape cruciale dans la réalisation d’un site e-commerce car il faut installer et configurer l’outil, les modules, les modes de paiement et les modes de livraison.

Étape #5 : Webdesign de site e-commerce

Ce que l’on appelle webdesign consiste en la phase de création des maquettes suite à l’étude de l’UX Design, autrement dit de l’expérience utilisateur, l’expérience que l’utilisateur aura lors de sa visite sur votre site e-commerce, son parcours d’achat en ligne etc.

L’idéal est de bien sûr proposer deux versions différentes de maquettes, avec chacune un parcours différent. Chaque maquette doit idéalement comporter sa version responsive, répondant aux enjeux et aux objectifs de la société ultra connectée. Notre conseil pour cette étape : être créatif  !

Étape #6 : Réalisation & développement site e commerce

L’étape de la réalisation et du développement, c’est tout simplement la phase de développement du site e-commerce dans le respect des normes (W3C, WCAG …). Créer le site de vente en ligne en veillant à la bonne cohérence de la structure pour l’optimisation du SEO, de la Responsive Design et la sécurisation du site et son pare-feu.

Étape #7 : Gestion des contenus e-commerce

Une fois le squelette du site prêt, c’est la phase d’intégration des contenus qui intervient. Cette étape nécessite de prévoir suffisamment de temps de création, rédaction, sans oublier les aller-retours avant la validation du client. Il faut en profiter également pour vérifier toutes les questions relatives à la propriété intellectuelle des contenus et la conformité du site de vente en ligne avec les règles RGPD.

Cette étape inclut aussi la mise en place d’un tunnel de vente optimal  : création et configuration des pages produits, des mails transactionnels, rédaction des documents types et bien sûr remplissage de toutes les pages produits.

Étape #8 : Pré-optimisation SEO

Il s’agit d’une phase purement technique pour bien préparer le référencement e-commerce avec la rédaction des Balises Meta Tags personnalisées et la vérification de la structure du site. Il faut compléter tout le travail de référencement en récupérant les références et codes barre.

Étape #9 : Recettage site e commerce

Une fois les premières étapes de création de site e-commerce réalisées et respectées, vérifiez et testez chaque aspect du site en procédant à son recettage. Il est donc important de suivre le tunnel de vente, tester tous les moyens de paiement proposés, vérifier les modes de livraison et tous les scenarii possibles.

Étape #10 : Mise en ligne site e-commerce

L’étape du recettage du nouveau site e-commerce terminée, une relecture des dernières corrections doit être faite avant de se lancer dans la mise en ligne de ce dernier. Cela consiste en la configuration de l’environnement web (Certificat HTTPS, URL Rewriting etc.) et en la publication du site sur l’environnement de production ainsi que la redirection des noms de domaine. Enfin, bien sûr, mettre en place Google Analytics et tester les formulaires et liens rompus.

Étape #11 : Référencement naturel (SEO)

Le référencement naturel, dit référencement SEO, permet d’apporter à votre nouveau site web une visibilité optimale sur les moteurs de recherches en ligne. Et, sans investir dans la publicité avec le référencement payant SEA. C’est une étape technique et éditoriale à la fois. Elle oblige le référenceur SEO à générer le plan du site sur les moteurs de recherche tout en accompagnant à la création de contenu en vue de favoriser le référencement.

Étape #12 : Formation e-commerce

Pour une parfaite création de site web e-commerce, pensez à intégrer une phase de formation dans vos étapes de développement de site. Elle permet d’aider à la création des comptes utilisateurs et à la gestion des droits. Une bonne formation inclue la connaissance suffisante au transfert de compétences et l’élaboration d’un document de synthèse répertoriant les principales fonctionnalités.

Étape #13 : Maintenance de site e-commerce

Passée la période de garantie généralement de 3 mois, la maintenance est l’étape clé pour assurer la sécurité du site contre les différentes attaques sur le web. Cette maintenance consiste à surveiller le site e-commerce en permanence grâce au monitoring et à mettre à jour régulièrement les éléments qui les composent.

Une fois votre site e-commerce créé et parfaitement développé, augmentez votre indicateur de performances en faisant appel aux experts de notre agence digitale FRSH. N’hésitez pas à lire notre article Les experts d’une agence digitale ou à nous contacter directement via notre page Contact. Découvrez-en plus avec notre livre blanc sur les 12 astuces pour réussir votre site web, un indispensable pour ne pas oublier d’étapes dans la création de votre site web e-commerce.