En raison de leur étroite corrélation avec les avancées technologiques, les normes de conception Web sont en constante évolution et se développent. La création de site web peut devenir une manifestation de nouvelles idées, d’innovations et peut donner vie à des idées grâce à l’animation, à l’interaction et à l’immersion. Faisons un tour des idées de conception de sites Web pour 2024 qui domineront les tendances.
Le « Dark mode »
En raison de ses avantages esthétiques et ergonomiques, le dark mode, également appelé « mode sombre » en français, est devenu populaire ces derniers temps notamment popularisé par Apple sur son environnement Mac OsX. D’un point de vue pratique, ils contribuent à réduire la fatigue oculaire, un problème pour de nombreuses personnes qui passent de plus en plus de temps à regarder des écrans. D’un point de vue esthétique, le mode sombre crée facilement un look ultramoderne pour votre site web tout en vous permettant de mettre en valeur d’autres éléments de conception simplement en assombrissant les éléments qui les entourent.
Des typographies grand format
Envisagez d’ajouter des textes de grande taille ou surdimensionnés dans toutes les sections si vous souhaitez créer un site web ultra-minimaliste qui transmet les informations nécessaires dès le premier coup d’œil. Outre le titre principal, vous pouvez utiliser des titres épais et gras pour mettre en évidence les services, les biens ou les personnes à contacter. Le texte simple avec des polices sans empattement peut rendre le site web plus attrayant. Si vous choisissez d’afficher les informations en texte grand format, vous pouvez également en dire plus avec moins. Les concepteurs peuvent réduire la mise en page et ne pas afficher de gros éléments visuels sur les pages, ce qui améliore la réactivité des sites web. Le retour des polices avec empattement (Serif) fait également son retour.
Section en pleine page et parallaxe
Présent depuis quelques temps, cette tendance reste appréciée et au gouts du jour. Optez pour des sections en pleine page, avec des éléments imposants, animé lors du scroll. Ceci est la grande tendance des sites créant une impression de dynamisme et permettant notamment de donner de la profondeur à votre vitrine si vous manquez de contenus et de textes.
Les Mesh gradients
Les « Mesh gradients » comprennent plusieurs points de maille. Les couleurs de ces points se fondent lentement. Les mesh gradients n’enferment pas vos couleurs dans une certaine position, contrairement aux autres types de dégradés de couleurs. Ils vous donnent plus de liberté pour choisir l’aspect que vous souhaitez leur donner. Vous pouvez envisager d’ajouter des accents de dégradé avec du noir et du blanc ou de mettre en évidence les CTA dans des tons vifs si vous souhaitez créer un site web à partir de zéro ou rafraîchir votre ancien site. Vous pouvez utiliser des dégradés en arrière-plan pour des images ou des sections entières et rompre avec l’espace si vous souhaitez opter pour une palette de couleurs plus prononcée. De nombreux sites permettent de créer ces types de dégradés.
D’autres tendances sont également à prendre en compte :
Les bords arrondis : les blocs arrondis font leur retour ! Que ce soit pour enjoliver une cartes ou des boutons, les bords arrondis rendent votre site plus sympa et moins « carré ».
Les curseurs personnalisés : permettent de donner un petit plus sympa à votre site. Attention à faire en sorte que ceux-ci ne nuisent pas à la navigation sur le site.
Les micro interactions : des détails subtiles comme une animation au chargement de la page, animations au survols des boutons ou d’éléments graphiques, etc…
En résumé, faite place à votre imagination et lâchez-vous en donnant une forte image à votre entité. Vous souhaitez vous démarquer ? Notre agence ILLUCOM vous accompagne pour tous vos projets de communication digitales.
Annoncé depuis plusieurs mois l’arrivée, Google avait évoqué l’arrivée d’un nouvel indicateur dans ses Core Web Vitals (Signaux Web Essentiels). Baptisé INP (Interaction to Next Paint), ce signal viendra remplacer le critère FID (First Input Delay) en mars 2024.
Qu’est-ce que le nouvel indicateur INP de Google ?
INP (Interaction to Next Paint) vient remplacer le FID (First Input Delay). Ce dernier indicateur mesurait le temps écoulé entre l’interaction de l’utilisateur avec la page et la réponse de celle-ci à cette interaction. Cependant, le FID ne prenait pas en compte les problèmes de stabilité visuelle, ce qui signifie qu’une page pouvait sembler réactive, mais présenter des changements visuels perturbants après le chargement. Cela pouvait nuire à l’expérience utilisateur.
Avec l’introduction d’INP, Google vise à fournir une évaluation plus complète de la performance des pages web en prenant en compte à la fois la réactivité et la stabilité visuelle. Cela permet aux développeurs de s’assurer que leurs pages offrent une expérience fluide et sans interruptions visuelles, ce qui est essentiel pour engager les utilisateurs et les maintenir sur le site. En d’autres termes, le critère INP mesure la probabilité qu’un utilisateur rencontre des changements visuels inattendus pendant l’interaction avec la page.
Il y a la bonne et la mauvaise réactivité – Source : Google
Le critère INP utilise les données issues de l’API Event Timing afin d’évaluer la réactivité globale d’une page web. INP observe la latence de l’ensemble des interactions effectuées sur la page afin d’évaluer la latence globale. Ces « interactions » font référence à toutes les actions menées par l’utilisateur qui impliquent un retour visuel : naviguer dans un menu sur smartphone, dérouler une liste en cliquant, ajouter un article dans un panier, s’authentifier dans un formulaire, etc.
Comment agir ?
La mesure de l’INP est désormais disponible depuis la Google Search Console. Entrant en vigueur en mars 2024, il est vivement conseillé d’optimiser ses pages dès maintenant en surveillant cette évaluation plus complète de la performance des pages.
Objectif : moins de 200 ms – Source : Google
A retenir donc :
Un bon score INP se situe en dessous de 200 ms (millisecondes)
Entre 200 ms et 500 ms, il est nécessaire de procéder à quelques améliorations
Au-delà de 500 ms, la réactivité est jugée trop lente, et peut impacter négativement l’expérience des utilisateurs
Mon site risque-t-il d’être impacté ?
Comme à son habitude, Google a mis sa jauge assez sévère toujours dans cette optique d’offrir la meilleure expérience possible aux internautes. Certains sites fortement animés seront probablement impacté. En cause, les mouvements des éléments et différentes interactions parfois complexes. L’interêt de créer des landing pages plus allégées pour le référencement naturel SEO prendra alors encore plus de sens si vous possédez un site visuellement attractif.
Le monde du référencement naturel ouvre de nouvelles perspectives passionnantes pour les spécialistes du marketing en ligne. Grâce à l’intelligence artificielle (IA), il est possible d’optimiser les stratégies de référencement de manière plus efficace que jamais. L’IA permet d’exploiter les données de manière intelligente, ce qui permet d’obtenir des résultats plus précis et plus rapides. Cette combinaison puissante offre une visibilité accrue et un trafic organique croissant pour les sites web.
Quels avantages de l’IA sur le SEO ?
L’un des avantages clés de l’intelligence artificielle dans le domaine du référencement est sa capacité à analyser les tendances du marché, les comportements des utilisateurs et les préférences des moteurs de recherche. Grâce à des algorithmes sophistiqués, l’IA peut identifier les mots clés les plus pertinents et les stratégies de contenu les plus efficaces pour chaque site web. Cela permet de créer des stratégies de référencement sur mesure, adaptées aux besoins spécifiques de chaque entreprise.
En outre, l’intelligence artificielle peut également aider à améliorer la convivialité et l’expérience utilisateur d’un site web. En analysant les données de navigation des utilisateurs, l’IA peut identifier les problèmes potentiels et suggérer des améliorations pour optimiser la convivialité du site. Cela inclut des recommandations pour la disposition du contenu, la structure de navigation et même la personnalisation du contenu en fonction des préférences des utilisateurs.
L’automatisation des tâches grâce à l’IA
L’intelligence artificielle peut être utilisée pour automatiser certaines tâches fastidieuses liées au référencement. Par exemple, elle peut générer automatiquement des méta-descriptions et des balises de titre optimisées pour chaque page d’un site web, ce qui permet d’économiser du temps et des ressources pour les spécialistes du marketing.
En outre, l’IA peut également être utilisée pour surveiller et analyser en temps réel les performances d’un site web. Grâce à des outils d’analyse avancés, les spécialistes du marketing peuvent obtenir des informations précieuses sur le comportement des utilisateurs, les tendances de navigation et les performances des pages. Cela leur permet de prendre des décisions éclairées pour améliorer la stratégie de marketing en ligne et optimiser l’expérience utilisateur. En utilisant l’intelligence artificielle, les spécialistes du marketing peuvent également prédire les préférences et les besoins des utilisateurs, ce qui leur permet de personnaliser davantage le contenu et les offres du site web.
Un atout pour la sécurité des sites
L’IA peut être utilisée pour améliorer la sécurité d’un site web. En analysant les schémas de trafic et en détectant les comportements suspects, l’IA peut aider à prévenir les attaques et à protéger les données sensibles des utilisateurs. Elle peut également être utilisée pour détecter et bloquer les commentaires ou les messages indésirables, offrant ainsi une expérience en ligne plus sûre et plus agréable.
L’intelligence artificielle peut également être utilisée pour améliorer le service client sur un site web. Grâce à des chatbots alimentés par l’IA, les entreprises peuvent offrir une expérience utilisateur optimisée en captant l’interêt de l’internaute et répondant à ses éventuelles questions.
Parce que nous avons toujours eu vocation à partager notre savoir-faire et vous accompagner dans vos projets digitaux ou futurs métiers autour du web, ILLUCOM est heureux de vous annoncer que nous sommes désormais certifié QUALIOPI. Notre centre de formation peut désormais vous faire bénéficier de formations WordPress, SEO, Photoshop, financées par de nombreux organismes dont votre CPF (Compte Personnel de Formation).
Reconnue internationalement, la certification Tosa vous permet de confirmer vos compétences par un diplôme. Elle permet également aux professionnels du web de convaincre leurs prospects de leurs savoir-faire WordPress, Photoshop, Illustrator, etc…
L’année 2022 fut particulière. Nous sommes heureux d’avoir été présent pour vous accompagner et nous adapter afin de vous proposer des solutions toujours plus pertinentes et performantes. Cette année à notamment été marqué par le développement de nos formations Web certifiées Qualiopi et CPF.
De nouveaux défis nous attendent encore et nous sommes prêts à les relever, toujours à vos cotés. Nous vous souhaitons à tous une excellente nouvelle année 2023.
Évoqué en Mai 2020 par Google, cette mise à jour de l’algorithme sera officiellement effective en 2021. Le 4 décembre de cette année 2020 Google a cependant annoncé une mise à jour portée sur les « Core web vitals » des sites. L’annonce ne donne pas plus de détails mais nous avons constaté des variations dans les positions de certains sites. L’occasion de faire un rapide point et prévoir les évolutions à apporter à vos sites afin qu’ils ne soient pas pénalisés.
Core Web Vitals, qu’est-ce que c’est ?
Les Core Web Vitals que nous pouvons traduire par Signaux essentiels du site réunissent plusieurs critères techniques concernant votre site. Ils incluent notamment les 3 facteurs affluants sur l’expérience utilisateur.
Les 3 métriques qui composent le Core Web Vitals
LCP : Largest Contentful Paint
Ce facteur mesure le moment où le plus grand élément de contenu de la fenêtre devient visible.
Je ne vois aucun contenu utile! Pourquoi le chargement prend-il autant de temps?
Il est utilisé pour déterminer quand le contenu principal de la page a fini de s’afficher à l’écran dans le but de proposer le plus rapidement possible ce que cherche l’internaute. Les causes les plus courantes peuvent être une latence de votre serveur, ou plus souvent des codes Javascript ou CSS bloquant le rendu.
Actuellement Google considère que votre LCP est correct en dessous de 2,5 secondes.
FID : First Input Delay
Le « délai de première entrée » mesure l’intéractivité de votre site. Il s’agit du temps entre le moment où un utilisateur interagit pour la première fois avec votre site (c’est-à-dire lorsqu’il clique sur un lien, appuie sur un bouton ou utilise un contrôle personnalisé basé sur JavaScript) jusqu’au moment où le navigateur est réellement capable pour répondre à cette interaction. Pour offrir une bonne expérience utilisateur, vos pages doivent avoir un FID inférieur à 100 millisecondes.
CLS : Cumulative Layout Shift
Le Cumulative Layout Shift (CLS) est une métrique centrée utilisateur qui permet d’évaluer la stabilité visuelle d’une page web. Elle permet de mesurer la fréquence à laquelle les utilisateurs subissent des changements de mise en page inattendus dans le but de ne pas perturber sa lecture ou navigation. Alors que nous tendons à charger au maximum des éléments en différé pour augmenter le temps de chargement de la page, il faut d’avantage surveiller à ce facteur qui peut être pénalisant.
Explication en images de ce qu’est le Cumulative Layout Shift (CLS).
Pour bien comprendre pourquoi ce facteur peut être très pénalisant pour l’internaute et donc votre score SEO, voici une vidéo démontrant un exemple concret d’une mauvaise expérience utilisateur.
Comment évaluer mon site ?
Vous l’aurez compris, il est donc important de surveiller ces métriques afin d’apporter la meilleure expérience utilisateur possible et pouvoir bien positionner votre site sur les moteurs de recherche. Pour cela de nombreux outils sont à votre disposition. Au sein d’Illucom nous en utilisons plusieurs. Attaché à GTmetrix nous utilisons également les nombreux outils mis à disposition par Google : Page Speed Insights, Lighthouse (anciennement l’onglet Audit) de la console Google Chrome, ou l’extension Chrome Web Vitals.
N’oublions pas parmi toutes ces métriques de fournir un site parfaitement adapté aux mobiles, sécurisé (avec le protocole HTTPS), optimisés au niveau des images, CS, JS etc en bien évidement riche en contenu !
Si vous souhaitez en savoir plus sur les performances de votre site et comment nous pouvons l’améliorer, n’hésitez pas à nous contacter.
Ce que nous avons apporté à Fortunat,
nous pouvons aussi vous l’apporter !
Comment avons-nous augmenté le chiffre d’affaires de 80% (hors place de marché) sur une année ?
Vépéciste depuis la fin des années 90, Fortunat a développé son activité de vente par correspondance d’accessoires et ustensiles de cuisine sur catalogue papier. A l’heure où le digital prend une place considérable, Fortunat a su saisir le tournant du numérique avec une boutique e-commerce.
Présente depuis de nombreuses années, nous avons repris la gestion de la communication en ligne en 2017.
Le développement des supports
La première année de collaboration a été dédié à analyser les solutions e-marketing mise en place, analyser leur ROI et développer les ventes sur les places de marchés telles que Amazon, cDiscount, eBay, etc.
En multipliant les canaux de vente et optimisant le contenu des fiches produits, les ventes additionnels sont très vite venues compléter le chiffre d’affaires du site.
Nous avons également accrue la présence de Fortunat sur les médias sociaux tels que Facebook et Youtube avec la publication des vidéos de mise en scène des produits.
Adaptation de la version mobile et optimisation de l’expérience utilisateur
La boutique Fortunat.fr ayant été développée en 2014, celle-ci ne bénéficiait pas de version mobile, un point bloquant en 2018 où la grande partie des ventes se faisaient déjà à partir de supports tablettes ou smartphone. Tout en gardant la base du site, nous avons adapté la charte afin qu’elle devienne « Responsive » et ainsi faciliter la navigation pour les utilisateurs mobiles.
Nous avons également amélioré l’expérience utilisateurs en permettant un parcours plus rapide sur le site et une consultation plus élevée avec des suggestions de produits similaires ou accessoires.
Comment référencer un site sur un secteur ultra-concurrentiel ?
Avec des centaines de milliers de recherche par mois autour des ustensiles et accessoires de cuisine, nous ne pouvions négliger le potentiel d’acquisition clients grâce au SEO. Mais quelle stratégie adoptée pour Fortunat dont le catalogue et ressources humaines est jusqu’à 10 fois inférieurs à ses concurrents ? Prenant également en compte que les produits vendus sont pour la majorité des articles éphémères, de saisons, ou limité en stock, nous avons fait le choix de concentrer le référencement sur les fiches de produit ayant une fort potentiel de vente et d’acquisition client grâce à un prix concurrentiel.
Après un audit complet du site, nous avons optimisés les points essentiels au SEO : optimisation du code et temps de chargement, balises Hn, Title et description, balisage des schémas, optimisation du contenu, etc.
Résultat sur an un gain de plus de 23% de nouveaux clients et une augmentation des pages vues par utilisateurs grâce à une navigation plus aisées et suggestions de produits. (Source Google Analytics)
Veille concurrentielle et analyse du catalogue
Beaucoup de e-commerçant oublient qu’ils sont avant tout des commerçants ! Avoir le plus beau site et être bien référencé ne garantit pas des résultats explosifs si les produits présentés ne correspondent pas à la demande ou ne sont pas concurrentiels au niveau du prix. Fortunat n’a jamais eu vocation de proposer les prix les plus bas mais tout en restant compétitif d’être au juste prix et assurer un service de qualité. En veillant à ces objectifs et en prenant le temps d’analyser les rapports de visites et de ventes, nous accompagnons l’entreprise à peaufiner son catalogue. Couplé avec des mises en avant réfléchies et des newsletters segmentées, nous avons réussi à fortement augmenter le taux de conversion.
L’aventure continue !
Aujourd’hui nous sommes fiers de voir le résultat de la stratégie mise en place pour Fortunat et pouvoir continuer à développer les ventes autant sur le site que sur de nouvelles places de marché.
Comme Fortunat, faites-nous confiance pour le développement de votre e-commerce.
Nous avons récemment été questionné sur l’impact sur le SEO d’un site des protocole SPF, DKIM et DMARC. Pour rappel l’envoi d’email frauduleux où l’expéditeur usurpe l’identité d’une entreprise (ce que l’on appelle le Pishing) est désormais monnaie courante. Pour tenter de palier à ce problème, les FAI ont mis en place des normes de vérification comme SPF, DKIM et DMARC.
SPF, DKIM et DMARC : définitions et objectifs
Nous ne rentrerons pas dans le détails de la configuration de ces protocoles, mais faire un rappel sur leur utilité semble cohérent pour comprendre l’impact ou non sur votre site.
Le protocole SPF
SPF (pour Sender Policy Framework) est un moyen de limiter l’usurpation d’identité en enregistrant dans votre configuration DNS de votre domaine quels sont les serveurs autorisés à envoyer des emails en votre nom. Cela permet entre autre de certifier l’expéditeur. A noter que même si un domaine disposant d’un enregistrement SPF sera plus difficile à exploiter par les spammeurs, cela ne vous garantit pas une parfaite délivrabilité de vos mailings qui pourront tout de même être considérés comme du spam à cause d’autres éléments.
Le protocole DKIM
Né en 2004 de la fusion des technologies DomainKeys de Yahoo et Identified Internet Mail de Cisco. L’objectif du protocole DKIM (DomainKeys Identified Mail) est de faire le lien entre le nom de domaine de l’expéditeur et le message en y ajoutant une signature. La clef cryptée est située dans un enregistrement DNS afin de permettre de vérifier si un message a été modifié lors de son transport (entre les différents serveurs SMTP) et de garantir que le contenu arrivera intact jusqu’au destinataire. Pour ce faire, le serveur du destinataire récupère la clé publique correspondant à la signature du serveur de messagerie déclaré comme expéditeur.
Le protocole DMARC
DMARC (pour Domain-based Message Authentication Reporting and Conformance) est une norme développée en 2011 par un consortium des grandes sociétés comme Google, Yahoo ou Microsoft et est avant tout un complément à SPF et DKIM. Son but de garantir que les serveurs de courrier de réception ne se contentent pas de vérifier l’authenticité des e-mails reçus (en utilisant les protocoles SPF et DKIM), mais prennent notamment des mesures appropriées en cas de résultats de contrôle négatifs, en accord avec le propriétaire du nom de domaine du message envoyé. En bref, le protocole DMARC permet à l’expéditeur de recevoir les résultats de l’authentification de ses envois auprès des principaux opérateurs de messagerie, et au serveur du destinataire de savoir comment il doit traiter les messages ayant échoué le test de l’authentification.
Quel est l’impact sur l’optimisation du référencement de votre site ?
Nous voilà au coeur du sujet. Comme nous venons de le rappeler, les protocoles SPF, DKIM et DMARC servent à protéger votre domaine des spammeurs et authentifier vos envois d’emails pour une meilleure délivrabilité. Concrètement ils n’influent donc pas directement sur votre référencement. En 2018, la question avait ouvertement été posée et Google avait assuré que cela n’entrait pas en compte dans le classement de votre site. Pourquoi alors en reparler aujourd’hui ? Les algorithmes des moteurs de recherche évoluent constamment. Ce qui était valable hier ne l’est peut-être plus aujourd’hui, et inversement. Actuellement, pour qu’un site soit d’avantage mis en avant dans les résultats SERP, celui-ci doit bénéficier d’une connexion sécurisée via un certificat SSL, afficher les mentions légales, être en conformité avec les lois sur la protection des données (RGPD pour les sites européens), etc. La Search Console de Google relève notamment la présence de logiciels malveillants sur les sites indexés. Tout ceci tourne autour de la sécurité, un facteur essentiel pour les moteurs de recherche qui visent constamment à proposer des contenus pertinents provenant de sites fiables et de confiance en se basant sur des critères tels que le TrustFlow, le Domain Authority, etc.
En conclusion
Même si l’absence de ces protocoles ne pénaliseront pas fortement le positionnement de vos pages, il est important de proposer aux moteurs de recherche des sites ayant la meilleure réputation possible, et donc de votre domaine qui peut-être pénalisé si celui-ci se fait usurpé via des spams. Nous relevons notamment que certains outils d’Audit n’hésitent pas à mettre des alertes sur ces vecteurs.
Exemple d’un audit SEO avec Woorank
L’audit Woorank remontent dans un onglet Sécurité si votre site est sécurité via SSL, HSTS, etc et la présence d’une configuration DMARC.
Des outils tel que MXtoolbox vous permettent notamment de vérifier la configuration DMARC, SPF et DKIM de votre domaine.
Une faille de sécurité a été découverte par PrestaShop dans les versions 1.7.0.0 jusqu’à 1.7.6.3
Est-ce une faille critique qui peut avoir un impact sur mon commerce ?
Oui, cette faille permet à un pirate de modifier les comptes clients pour les rendre inutilisables (perte des adresses postales et informations de compte). Notamment, dans PrestaShop avant la version 1.7.6.4, lorsqu’un client modifie son adresse, il peut librement changer l’id_address dans le formulaire, et ainsi voler l’adresse de quelqu’un d’autre. Il en va de même avec le CustomerForm, vous pouvez changer l’id_client et modifier toutes les informations de tous les comptes.
Des robots malveillants sont actuellement à la recherche de sites comportant cette faille, le temps est compté pour se protéger.
Comment se protéger ?
Afin de sécuriser votre site de cette faille, 5 fichiers sont à mettre à jour. Vous aver deux possibilités :
• Vous pouvez utiliser la fonction 1 Click Upgrade de Prestashop (attention à bien faire une sauvegarde intégrale de votre boutique avant toute mise à jour).
• Vous pouvez mettre à jour manuellement les fichiers concernés (6 au total) en suivant notre procédure ci-dessous.
Mettre à jour manuellement mon Prestashop
Pour plus de sécurité, vous pouvez éditer vous-même les fichiers concernés par la faille, à savoir :
classes/form/CustomerAddressForm.php
classes/form/CustomerAddressFormatter.php
classes/form/CustomerForm.php
classes/form/CustomerFormatter.php
Téléchargez le patch suivant concernant les 4 classes à corriger : Patch-1.7.6.4
Remplacez les fichiers php par ceux contenu dans le .zip. Attention si vous avez des overrides à bien mettre à jour vos fichiers.
Mettez également à jour votre fichier themes/votretheme/templates/checkout/_partials/steps/addresses.tpl en remplaçant la ligne action="{$urls.pages.order}"
