Votre avis sur ce site est important ;-)

manu1238 · 30 Octobre 2020

Bonjour,
j'aimerai avoir vos avis sur ce site
nous avons beaucoup de visites, des mise au panier, mais très peut de ventes.
Nous avons cherchés si nous avons des bugs, et surtout ou s’arrête l'utilisateur.
Mais rien ne cloche (pour nous).
Vos avis sont précieux
merci

emualliug · 30 Octobre 2020

Déjà, le chargement de la homepage n'est pas rapide. Le score PageSpeed Insights n'est pas très bon (sans être catastrophique non plus). Mais c'est potentiellement un levier.

Ensuite, le menu principal n'est pas utilisable (en tout cas sous FF) : au survol de "NOUVEAUTÉS", "MAISON", etc. un sous menu apparaît, mais le déplacement de la souris vers celui-ci le fait disparaître (à cause de la seconde ligne).

Enfin, pour mieux comprendre la raison du faible taux de transformation, il faudrait savoir 1) sur quelles requêtes l'internaute est arrivé 2) à quel moment il est reparti (là, c'est à toi de voir avec un analytic pour savoir).

manu1238 · 30 Octobre 2020

merci pour ton retour,

manu1238 · 30 Octobre 2020

emualliug a dit:
Déjà, le chargement de la homepage n'est pas rapide. Le score PageSpeed Insights n'est pas très bon (sans être catastrophique non plus). Mais c'est potentiellement un levier.

Ensuite, le menu principal n'est pas utilisable (en tout cas sous FF) : au survol de "NOUVEAUTÉS", "MAISON", etc. un sous menu apparaît, mais le déplacement de la souris vers celui-ci le fait disparaître (à cause de la seconde ligne).

Enfin, pour mieux comprendre la raison du faible taux de transformation, il faudrait savoir 1) sur quelles requêtes l'internaute est arrivé 2) à quel moment il est reparti (là, c'est à toi de voir avec un analytic pour savoir).

merci pour ton retour, sur la home page, le cache est désactivé, car j'ai mis à jour des infos.
Tu dit que le menu n'est pas utilisable? je suis sur firefox, aucun souci. je n'ai pas de 2 eme ligne

#3 manu1238, il y a 5 minutes

emualliug · 30 Octobre 2020

manu1238 a dit:
le cache est désactivé

Je ne pense pas que ce soit le problème essentiel. Je pense que c'est plus la quantité de média et leurs tailles. Certaines images pourraient être en JPEG (à voir si le texte et les aplats de ne sont pas dégradé) et bénéficier d'un lazyload.

manu1238 a dit:
je n'ai pas de 2 eme ligne

Et pourtant ! et il faut que j'abaisse le padding left et right à 17px chacun pour que tout rentre sur une ligne (à la base, il est de 28px !). Au "naturel", la ligne change dès "MARQUES" (qui est déjà sur la seconde ligne). Et ce avec la largeur d'écran maximale. En dessous de 1225px, c'est même "CADEAUX PERSONNALISÉS" qui est sur la seconde ligne.

manu1238 · 30 Octobre 2020

emualliug a dit:
Je ne pense pas que ce soit le problème essentiel. Je pense que c'est plus la quantité de média et leurs tailles. Certaines images pourraient être en JPEG (à voir si le texte et les aplats de ne sont pas dégradé) et bénéficier d'un lazyload.

Et pourtant ! et il faut que j'abaisse le padding left et right à 17px chacun pour que tout rentre sur une ligne (à la base, il est de 28px !). Au "naturel", la ligne change dès "MARQUES" (qui est déjà sur la seconde ligne). Et ce avec la largeur d'écran maximale. En dessous de 1225px, c'est même "CADEAUX PERSONNALISÉS" qui est sur la seconde ligne.

As tu un screen? car j'ai testé, je ne vois pas ce bug.
j'ai testé via: https://bluetree.ai/screenfly/
merci

emualliug · 30 Octobre 2020

manu1238 a dit:
j'ai testé via: https://bluetree.ai/screenfly/

Sauf erreur, l'outil que tu indiques avoir utilisé ne fait que proposer une fenêtre dans lequel le site est exécuté, ce n'apporte rien de plus que la vue adaptative de Firefox (Ctrl+Maj+M).

J'ai un peu fouillé ce qui pourrait causer l'erreur, en comparant avec les screen de "vrais" outils de screen qui ne produisaient pas l'erreur (ou pas systématiquement, j'y reviendrai), par exemple ici https://www.site-shot.com/WMVBqBqvEeu-eQJCrBEABA

J'ai très vite identifié le problème (et je m'en doutais un peu), la police utilisée est "Trebuchet MS" et elle n'est pas fournie (ni "Geneva" proposée en alternative). En cas de choix pour une police non-standard (ce qui n'est plus du tout un problème en soi aujourd'hui) : 1) fournir la police et 2) indiquer in fine une police standard (par exemple "sans-serif"). À noter toutefois que cela ne règle pas tout à fait le problème, "PROMO" restant en 2e ligne chez moi.

Le problème doit tout de même apparaître chez toi sur une taille d'écran légèrement supérieure à 1200px, comme ici : https://www.site-shot.com/ICz2TBqvEeu2YAJCrBEABQ.

En passant les padding left et right à 15px chacun (en plus de l'indication d'une police de secours), le problème est résolu chez moi dans toutes les situations (mais tu n'auras plus un menu qui prend la largeur dans toutes les dimensions d'écran).

Il est peut-être possible de moins réduire le padding en fournissant "Trebuchet MS", qui est dispo sur google fonts.

manu1238 · 30 Octobre 2020

emualliug a dit:
Sauf erreur, l'outil que tu indiques avoir utilisé ne fait que proposer une fenêtre dans lequel le site est exécuté, ce n'apporte rien de plus que la vue adaptative de Firefox (Ctrl+Maj+M).

J'ai un peu fouillé ce qui pourrait causer l'erreur, en comparant avec les screen de "vrais" outils de screen qui ne produisaient pas l'erreur (ou pas systématiquement, j'y reviendrai), par exemple ici https://www.site-shot.com/WMVBqBqvEeu-eQJCrBEABA

J'ai très vite identifié le problème (et je m'en doutais un peu), la police utilisée est "Trebuchet MS" et elle n'est pas fournie (ni "Geneva" proposée en alternative). En cas de choix pour une police non-standard (ce qui n'est plus du tout un problème en soi aujourd'hui) : 1) fournir la police et 2) indiquer in fine une police standard (par exemple "sans-serif"). À noter toutefois que cela ne règle pas tout à fait le problème, "PROMO" restant en 2e ligne chez moi.

Le problème doit tout de même apparaître chez toi sur une taille d'écran légèrement supérieure à 1200px, comme ici : https://www.site-shot.com/ICz2TBqvEeu2YAJCrBEABQ.

En passant les padding left et right à 15px chacun (en plus de l'indication d'une police de secours), le problème est résolu chez moi dans toutes les situations (mais tu n'auras plus un menu qui prend la largeur dans toutes les dimensions d'écran).

Il est peut-être possible de moins réduire le padding en fournissant "Trebuchet MS", qui est dispo sur google fonts.

Merci pour ton retour, effectivement au alentour des 1200px de large, un souci avec le bloc promo.
J'ai réduit le padding à 20px, vidé le cache, est ce mieux?

Voyez-vous d'autres freins à la conversion?

emualliug · 30 Octobre 2020

Il reste le problème de la police "Trebuchet MS" qui n'est pas fournie et sans alternative standard…

manu1238 · 30 Octobre 2020

emualliug a dit:
Il reste le problème de la police "Trebuchet MS" qui n'est pas fournie et sans alternative standard…

ok, je vais regarder pour la police, je ne sais pas trop comment faire, mais je regarde sur google.
Y a une alternative pour garder ma police Trebuchet MS ?
merci pour ton aide

emualliug · 30 Octobre 2020

manu1238 a dit:
mais je regarde sur google.
Y a une alternative pour garder ma police Trebuchet MS ?

Pas si simple que je le supposais, en fait elle n'est pas dispo chez Google font. Je ne connais pas trop les conditions de licence et si tu peux la redistribuer depuis ton site. Si c'est possible, c'est très simple, tu intègre le lien vers le fichier depuis ton CSS.

Roboto ou Lato sont des alternatives envisageables. L'avantage est que, si tu passes par le CDN de Google, 1) tu n'as pas à gérer leur distribution et tu bénéficies gratos du CDN de Google 2) tu peux utiliser leur outil pour générer les bouts de codes nécessaires.

Et si tu ne veux pas utiliser le CDN de Google, https://google-webfonts-helper.herokuapp.com/fonts permet de très facilement générer les bouts de code nécessaires.

manu1238 · 30 Octobre 2020

j'ai ca dans le code:

manu1238 · 30 Octobre 2020

emualliug a dit:
Pas si simple que je le supposais, en fait elle n'est pas dispo chez Google font. Je ne connais pas trop les conditions de licence et si tu peux la redistribuer depuis ton site. Si c'est possible, c'est très simple, tu intègre le lien vers le fichier depuis ton CSS.

Roboto ou Lato sont des alternatives envisageables. L'avantage est que, si tu passes par le CDN de Google, 1) tu n'as pas à gérer leur distribution et tu bénéficies gratos du CDN de Google 2) tu peux utiliser leur outil pour générer les bouts de codes nécessaires.

Et si tu ne veux pas utiliser le CDN de Google, https://google-webfonts-helper.herokuapp.com/fonts permet de très facilement générer les bouts de code nécessaires.

Nouveau j'ai ca dans le code:
font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif;
mais je ne sais pas si c'est bon.
je trouve la police que ici:
https://www.cssfontstack.com/Trebuchet-MS

emualliug · 30 Octobre 2020

emualliug a dit:
En cas de choix pour une police non-standard (ce qui n'est plus du tout un problème en soi aujourd'hui) : 1) fournir la police et 2) indiquer in fine une police standard (par exemple "sans-serif")

Je reviens donc au point 1. Si aujourd'hui fournir une police non-standard est acceptable, il faut qu'elle soit fournie.

manu1238 · 30 Octobre 2020

emualliug a dit:
Je reviens donc au point 1. Si aujourd'hui fournir une police non-standard est acceptable, il faut qu'elle soit fournie.

comme je ne connais pas bien,
je peut ajouter remplace la police par:
font-family: Trebuchet MS,sans-serif;
en css?
ou faut il ajouter un fichier de font?

emualliug · 30 Octobre 2020

Les deux en fait.

La règle font-family indique quelle famille de fonte tu souhaites employer à un moment. Je préfère utiliser des guillemets pour les fontes dont le nom contient une espace. Je n'ai pas de problème avec les listes d'alternatives un peu longues, encore que ce ne soit plus vraiment indispensable

Code:

font-family: "Trebuchet MS", Geneva, Lucida Sans Unicode, Lucida Sans, Arial, Helvetica, sans-serif;

Mais il faut par ailleurs indiquer où récupérer ces fontes (ou du moins la première) avec la règle @font-face ; la règle doit être adaptée suivant les formats de fichiers disponibles :

Code:

@font-face {
  font-family: 'Trebuchet MS';
  font-style: normal;
  font-weight: normal;
  src: local('Trebuchet MS'),
       url('url-du-fichier-de-la-font.woff') format('woff');
}

Le code ci-dessus (que j'ai récupéré depuis ce site) n'est pas idéal car il ne contient que le lien vers un fichier woff qui n'est pas forcément pris en charge par tout les navigateurs. Pour une compatibilité maximale, il faut disposer du fichier de font dans une diversité de format, des plus anciens aux plus récents : eot, ttf, (svg pour de vieux iOS), woff et woff2 (pour les plus modernes). Je ne sais pas ceux qui sont dispos pour Trebuchet MS (et j'ai pas cherché du coup).

Tout ça pour dire que si c'est trop compliqué, mieux vaut se rabattre sur des fonts plus standard, celles dispo sur Google Fonts.

manu1238 · 30 Octobre 2020

emualliug a dit:
Les deux en fait.

La règle font-family indique quelle famille de fonte tu souhaites employer à un moment. Je préfère utiliser des guillemets pour les fontes dont le nom contient une espace. Je n'ai pas de problème avec les listes d'alternatives un peu longues, encore que ce ne soit plus vraiment indispensable

Code:

font-family: "Trebuchet MS", Geneva, Lucida Sans Unicode, Lucida Sans, Arial, Helvetica, sans-serif;

Mais il faut par ailleurs indiquer où récupérer ces fontes (ou du moins la première) avec la règle @font-face ; la règle doit être adaptée suivant les formats de fichiers disponibles :

Code:

@font-face { font-family: 'Trebuchet MS'; font-style: normal; font-weight: normal; src: local('Trebuchet MS'), url('url-du-fichier-de-la-font.woff') format('woff'); }

Le code ci-dessus (que j'ai récupéré depuis ce site) n'est pas idéal car il ne contient que le lien vers un fichier woff qui n'est pas forcément pris en charge par tout les navigateurs. Pour une compatibilité maximale, il faut disposer du fichier de font dans une diversité de format, des plus anciens aux plus récents : eot, ttf, (svg pour de vieux iOS), woff et woff2 (pour les plus modernes). Je ne sais pas ceux qui sont dispos pour Trebuchet MS (et j'ai pas cherché du coup).

Tout ça pour dire que si c'est trop compliqué, mieux vaut se rabattre sur des fonts plus standard, celles dispo sur Google Fonts.

J'ai cherché pour la police d'écriture, mais je ne trouve pas les fichiers.
J'ai testé avec une autre police de google font, est ce mieux?

emualliug · 2 Novembre 2020

La barre de menu est correctement rendue chez moi.

Par contre, harmonise avec le reste de ta feuille de style, car tu continues d'utiliser "'MS Trebuchet', Geneva" à d'autres endroits, par exemple sur certains H2 "Découvrez l'univers d'Em Création", "Les nouveautés", etc. Au moins ça ne pose pas de problème niveau UX, mais niveau UI, ça fera plus homogène.

manu1238 · 2 Novembre 2020

emualliug a dit:
La barre de menu est correctement rendue chez moi.

Par contre, harmonise avec le reste de ta feuille de style, car tu continues d'utiliser "'MS Trebuchet', Geneva" à d'autres endroits, par exemple sur certains H2 "Découvrez l'univers d'Em Création", "Les nouveautés", etc. Au moins ça ne pose pas de problème niveau UX, mais niveau UI, ça fera plus homogène.

Oui, j’attendais votre retour pour savoir si c'était mieux ou pas.
Voyez-vous d'autres choses au frein à l'achat?

emualliug · 2 Novembre 2020

Peut être un peu optimiser la vitesse sur les images, après il faudrait aller plus en profondeur sur le site.

Je reprends ce que tu indiquais au début :

manu1238 a dit:
nous avons beaucoup de visites, des mise au panier, mais très peut de ventes.

le problème n'est donc fondamentalement pas un problème de SEO.

manu1238 · 2 Novembre 2020

emualliug a dit:
Peut être un peu optimiser la vitesse sur les images, après il faudrait aller plus en profondeur sur le site.

Je reprends ce que tu indiquais au début :

le problème n'est donc fondamentalement pas un problème de SEO.

merci pour ces infos.
La vitesse ne semble pas etre un frein aux visites.