3246 sujets
Critiques de vos sites: code et design
Bonjour,
1) On écrit "Accueil" et non pas "Acceuil" (menu du haut)
2) Le code :
Je n'ai pas regardé dans le détail, mais on peut se poser la question de savoir si tous les <div> sont si nécessaires que ça. De plus, quand je vois un <div class="bouton"> , je me dis que peut-être un <button> aurait été mieux.
Mais globalement, ça va pas trop mal. C'est plutôt au dessus de la moyenne.
3) Le design :
Il est "appliqué". Mais je ne saurais pas dire ce qu'il faudrait pour l'améliorer (je suis nul en design). J'ai vu qu'il y avait un autre site https://www.menplast.fr/ de la même société. S'agit-il d'une version plus ancienne ? En tout cas, le design de cet autre site fait plus joyeux. Peut-être faudrait-il travailler sur les images ?
Ça rend mieux sur fenêtre très étroites et fenêtres très larges que sur fenêtres moyennement larges (aux alentours de 1000px). Ça rend mieux aussi au niveau couleur quand on force sur le contraste. Là où ça se gâte un peu, c'est quand le menu jaune apparait !
Le footer est à revoir, pour certaines pages comme https://www.menuiserie-menplast.fr/portes.html, (quand on passe progressivement d'un écran large à un écran étroit, il y a des moments quand la fenêtre est aux alentours de 800 à 1200px, je n'ai pas mesuré exactement, où le pavé "ENTREPRISE" se retrouve à l'extérieur du footer). Curieusement, ça semble aller bien sur la page d'accueil.
Sinon, globalement, il me semble fonctionner plutôt bien, voir très bien (du petit mobile à l'écran large), contrairement à la version https://www.menplast.fr/ où c'est la cata.
4) SEO
Si j'étais internaute, pour trouver un menuisier sur Montpellier, je ferais "Menuisier Montpellier". Le site sort assez loin des premiers (que ce soit celui-ci ou ce que je suppose être l'ancien site). Il faut ajouter du contenu concernant "Montpellier" pour améliorer ça, et sans doute faire un travail de fond concernant le référencement localement. Je ne le vois pas non plus sur le google map qui apparait en haut d'une recherche google avec les mots clés "Menuiserie Montpellier" ou "Menuisier Montpellier". Il y est peut-être mais je ne l'ai pas vu avec avoir chercher plusieurs minutes (voir https://www.google.com/search?q=menuiserie+montpellier)
Globalement un travail sérieux, mais perfectible (surtout sur l'impression qu'il donne au premier coup d'oeil). Et il faut s'occuper du google map.
Amicalement,
1) On écrit "Accueil" et non pas "Acceuil" (menu du haut)
2) Le code :
Je n'ai pas regardé dans le détail, mais on peut se poser la question de savoir si tous les <div> sont si nécessaires que ça. De plus, quand je vois un <div class="bouton"> , je me dis que peut-être un <button> aurait été mieux.
Mais globalement, ça va pas trop mal. C'est plutôt au dessus de la moyenne.
3) Le design :
Il est "appliqué". Mais je ne saurais pas dire ce qu'il faudrait pour l'améliorer (je suis nul en design). J'ai vu qu'il y avait un autre site https://www.menplast.fr/ de la même société. S'agit-il d'une version plus ancienne ? En tout cas, le design de cet autre site fait plus joyeux. Peut-être faudrait-il travailler sur les images ?
Ça rend mieux sur fenêtre très étroites et fenêtres très larges que sur fenêtres moyennement larges (aux alentours de 1000px). Ça rend mieux aussi au niveau couleur quand on force sur le contraste. Là où ça se gâte un peu, c'est quand le menu jaune apparait !
Le footer est à revoir, pour certaines pages comme https://www.menuiserie-menplast.fr/portes.html, (quand on passe progressivement d'un écran large à un écran étroit, il y a des moments quand la fenêtre est aux alentours de 800 à 1200px, je n'ai pas mesuré exactement, où le pavé "ENTREPRISE" se retrouve à l'extérieur du footer). Curieusement, ça semble aller bien sur la page d'accueil.
Sinon, globalement, il me semble fonctionner plutôt bien, voir très bien (du petit mobile à l'écran large), contrairement à la version https://www.menplast.fr/ où c'est la cata.
4) SEO
Si j'étais internaute, pour trouver un menuisier sur Montpellier, je ferais "Menuisier Montpellier". Le site sort assez loin des premiers (que ce soit celui-ci ou ce que je suppose être l'ancien site). Il faut ajouter du contenu concernant "Montpellier" pour améliorer ça, et sans doute faire un travail de fond concernant le référencement localement. Je ne le vois pas non plus sur le google map qui apparait en haut d'une recherche google avec les mots clés "Menuiserie Montpellier" ou "Menuisier Montpellier". Il y est peut-être mais je ne l'ai pas vu avec avoir chercher plusieurs minutes (voir https://www.google.com/search?q=menuiserie+montpellier)
Globalement un travail sérieux, mais perfectible (surtout sur l'impression qu'il donne au premier coup d'oeil). Et il faut s'occuper du google map.
Amicalement,
Bonjour, j'ai jeté un coup d’œil au site https://www.menuiserie-menplast.fr et l'image "Porte Aluminium" passe par dessus la barre de navigation. 
Il faudrait aussi améliorer la qualité de l'image en arrière-plan et celle du bouton avec le trois ligne qui apparait quand la fenêtre est petite.
Sinon bien joué pour le reste du site qui donne très bien!!
Il faudrait aussi améliorer la qualité de l'image en arrière-plan et celle du bouton avec le trois ligne qui apparait quand la fenêtre est petite.
Sinon bien joué pour le reste du site qui donne très bien!!
TheHiddenDisplay a écrit :
Bonjour, j'ai jeté un coup d’œil au site *menuiserie-menplast.fr et l'image "Porte Aluminium" passe par dessus la barre de navigation.
Il faudrait aussi améliorer la qualité de l'image en arrière-plan et celle du bouton avec le trois ligne qui apparait quand la fenêtre est petite.
Sinon bien joué pour le reste du site qui donne très bien!!
Merci
Je ne vois pas ce qui cloche sur le fait qu'en responsive les images passent au-dessus de la barre de navigation ???
Bonne journée
Modifié par africa (26 Feb 2021 - 07:32)
Bonjour
Je remonte ce post pour obtenir un second avis sur ce site après un mois de travail.
Grâce aux conseils et aide des membres du forum j’ai pu améliorer ma page ... !
Ayant la tête dans le guidon depuis quelques semaines, je ne pense pas avoir le recul et l’expérience nécessaire pour juger mon travail, il reste surement des améliorations à faire.
La design ne change pas beaucoup ... !
Par contre j’ai travaillé sur le code HTML en essayant de soigner ma " divite aiguë", j’ai voulu me faire un ami avec Flexbox et j’ai peaufiné le SEO.
Merci
Prenez bien soin de vous.
Modifié par africa (26 Feb 2021 - 07:33)
Je remonte ce post pour obtenir un second avis sur ce site après un mois de travail.
Grâce aux conseils et aide des membres du forum j’ai pu améliorer ma page ... !
Ayant la tête dans le guidon depuis quelques semaines, je ne pense pas avoir le recul et l’expérience nécessaire pour juger mon travail, il reste surement des améliorations à faire.
La design ne change pas beaucoup ... !
Par contre j’ai travaillé sur le code HTML en essayant de soigner ma " divite aiguë", j’ai voulu me faire un ami avec Flexbox et j’ai peaufiné le SEO.
Merci
Prenez bien soin de vous.
Modifié par africa (26 Feb 2021 - 07:33)
Bonjour, le rendu est bien, je trouve. Pour les images à améliorer, vous l'aviez fait avec photoshop ? ou illustrator ? pour les visuels, ça rend bien je trouve, c'est simple mais lisse, félicitations ! ça vous a pris combien de temps à peu près, de la maquette à la finalisation (sachant que c'est toujours bien d'améliorer)?
fruit-des-bois a écrit :
Bonjour, le rendu est bien, je trouve. Pour les images à améliorer, vous l'aviez fait avec photoshop ? ou illustrator ? pour les visuels, ça rend bien je trouve, c'est simple mais lisse, félicitations ! ça vous a pris combien de temps à peu près, de la maquette à la finalisation (sachant que c'est toujours bien d'améliorer)?
Merci pour votre retour.
J'ai utilisé Photo Affinity, les photos ce n'est pas et de loin mon point fort
J'ai mis plus de 2 mois (Éternel débutant) pour faire le site avec l'aide précieuse des membres de ce forum
J'ai profité de leurs conseils pour apprendre et mettre en œuvre les flexbox sur le site.
Trop cool.
Je n'ai pas finalisé, je revois toutes les pages afin de diminuer le nombre de div.
Bonne journée
Bonjour,
L'impression générale est bien meilleure en effet. Prochaine étape : ajouter des effets genre photos que se mettent en place via des animations ou éventuellement des effets au survol (mais tout ça avec modération, car quand il y en a trop, ça finit par être pénible pour l'utilisateur). Y a plein d'idées que tu peux piocher sur les sites de tes concurrents ! . Rien d'urgent cependant.
On te trouve désormais tout de suite sur google map. Et il semble que tu as remonté dans le classement des moteurs sur la recherche "menuiserie montpellier". Mais tu n'es encore pas encore en page 1 de google. Ça se travaille. Je pense que l'étape suivante est de chercher à se faire référencer par d'autres sites comme on peut (mais sans tricher avec des référencements bidons). Et il faut encore et toujours améliorer le contenu (je vois cependant que le mot Montpellier est bien présent maintenant). Il se peut aussi que google mette du temps à te faire monter vu que ton travaille de refonte est récent. Et puis ceux qui sont devant ont fait beaucoup d'efforts eux aussi.
Pour le code html, c'est mieux aussi, mais ça reste encore un peu brouillon. Par exemple, quand on emploie <section>, on doit avoir tout de suite au début du contenu un <hn> (généralement h2 ou h3, certains préconisent même h1, mais je n'aime pas trop). S'il n'y a pas matière à mettre un <hn> quelconque, c'est que probablement <section> est mal choisie. Bon, c'est quand même du détail.
Ton score avec l'outil "lighthouse" de l'inspecteur de Chrome est excellent. Bravo !
Amicalement,
L'impression générale est bien meilleure en effet. Prochaine étape : ajouter des effets genre photos que se mettent en place via des animations ou éventuellement des effets au survol (mais tout ça avec modération, car quand il y en a trop, ça finit par être pénible pour l'utilisateur). Y a plein d'idées que tu peux piocher sur les sites de tes concurrents !
. Rien d'urgent cependant.On te trouve désormais tout de suite sur google map. Et il semble que tu as remonté dans le classement des moteurs sur la recherche "menuiserie montpellier". Mais tu n'es encore pas encore en page 1 de google. Ça se travaille. Je pense que l'étape suivante est de chercher à se faire référencer par d'autres sites comme on peut (mais sans tricher avec des référencements bidons). Et il faut encore et toujours améliorer le contenu (je vois cependant que le mot Montpellier est bien présent maintenant). Il se peut aussi que google mette du temps à te faire monter vu que ton travaille de refonte est récent. Et puis ceux qui sont devant ont fait beaucoup d'efforts eux aussi.
Pour le code html, c'est mieux aussi, mais ça reste encore un peu brouillon. Par exemple, quand on emploie <section>, on doit avoir tout de suite au début du contenu un <hn> (généralement h2 ou h3, certains préconisent même h1, mais je n'aime pas trop). S'il n'y a pas matière à mettre un <hn> quelconque, c'est que probablement <section> est mal choisie. Bon, c'est quand même du détail.
Ton score avec l'outil "lighthouse" de l'inspecteur de Chrome est excellent. Bravo !
Amicalement,
Bonjour
Merci Parsomonhi
Je vais revoir le html et les sections, si celles-ci ne sont pas justifiées je retombe sur une utilisation de div pour les remplacer ?
À part la mauvaise utilisation des sections que vous m'avez indiquées qu'elles sont les erreurs flagrantes que vous avez relevés qui font que le code est brouillon ?
Merci
Bonne journée
Prenez soin de vous.
Merci Parsomonhi
Je vais revoir le html et les sections, si celles-ci ne sont pas justifiées je retombe sur une utilisation de div pour les remplacer ?
À part la mauvaise utilisation des sections que vous m'avez indiquées qu'elles sont les erreurs flagrantes que vous avez relevés qui font que le code est brouillon ?
Merci
Bonne journée
Prenez soin de vous.
Bonjour,
Si je prends la page d'accueil, et sans regarder le code, je m'attends à ce qui suit :
1) un <h1> (contenant Menplast) qui soit enfant d'une balise qui englobe le tout, mais pas dans un <section> parmi d'autres. Dans ton cas, il me semble possible que le <h1> soit enfant direct de <main>, le tout suivi d'un <p> ne contenant que la présentation de la société, suivi lui-même du bouton <devis>.
2) des <section> enfants de <main> (qui suivent donc l'article de présentation de la société), qui auraient pour titre "Menuiseries PVC, Alu, BOIS", "Videos", "Plus proche de chez vous", "Réalisations", "Avis Google" (ces titres étant en <h2> et juste après <section>).
3) le bloc "MENPLAST EST UN PROFESSIONNEL QUALIBAT RGE* CERTIFIE." et ce qui suit dans une balise <article> ou <aside>, et ce qui est actuellement dans une <div id="pub"> dans une balise <aside> également.
4) pas de balise <article> ailleurs.
5) des <section> comme sous section de la section "Menuiseries PVC, Alu, BOIS", "Videos" avec des titres "Menuiseries PVC", "Menuiseries Aluminium", ... (en <h3> et juste après les balises <section> de ces sous-sections).
6) pas de <hr> mais des border-top ou border-bottom dans le css pour délimiter les sous-sections.
Et évidemment, tu peux ajouter quelques <div> quand même pour faciliter la mise en page.
La structure globale de ta page pourrait ressembler à :
Amicalement,
Si je prends la page d'accueil, et sans regarder le code, je m'attends à ce qui suit :
1) un <h1> (contenant Menplast) qui soit enfant d'une balise qui englobe le tout, mais pas dans un <section> parmi d'autres. Dans ton cas, il me semble possible que le <h1> soit enfant direct de <main>, le tout suivi d'un <p> ne contenant que la présentation de la société, suivi lui-même du bouton <devis>.
2) des <section> enfants de <main> (qui suivent donc l'article de présentation de la société), qui auraient pour titre "Menuiseries PVC, Alu, BOIS", "Videos", "Plus proche de chez vous", "Réalisations", "Avis Google" (ces titres étant en <h2> et juste après <section>).
3) le bloc "MENPLAST EST UN PROFESSIONNEL QUALIBAT RGE* CERTIFIE." et ce qui suit dans une balise <article> ou <aside>, et ce qui est actuellement dans une <div id="pub"> dans une balise <aside> également.
4) pas de balise <article> ailleurs.
5) des <section> comme sous section de la section "Menuiseries PVC, Alu, BOIS", "Videos" avec des titres "Menuiseries PVC", "Menuiseries Aluminium", ... (en <h3> et juste après les balises <section> de ces sous-sections).
6) pas de <hr> mais des border-top ou border-bottom dans le css pour délimiter les sous-sections.
Et évidemment, tu peux ajouter quelques <div> quand même pour faciliter la mise en page.
La structure globale de ta page pourrait ressembler à :
<header>
...
</header>
<main>
<h1 class="title"><span class="red">Menplast</span> Menuiserie Montpellier, PVC - Alu - Bois</h1>
<p>...</p>
<button>...</button>
<section>
<h2 class="title"><span>Menuiseries PVC, Alu, BOIS</span></h2>
<section>
<h3 class="title"><span>Menuiseries PVC</span> Montpellier</h3>
...
</section>
<section>
<h3 class="title"><span>Menuiseries Aluminium</span> Montpellier </h3>
...
</section>
...
</section>
<aside id="pub">
...
</aside>
<aside class="qualibat bordure">
...
</aside>
<section class="plus-proche-de-vous">
<h2 class="title"><span>Plus proche de vous</span> Colin Antoine</h2>
...
</section>
<section class="chantier">
<h2 class="blogtitle title"><span>Réalisations</span></h2>
...
</section>
<section>
<h2 class="title avis"><span>Avis Google</span></h2>
...
</section>
...
</main>
<footer class="footer" >
...
</footer>
Amicalement,
Bonjour
Je poursuis ma quête du graal ????
Sur "lighthouse" j’ai 2 erreurs que je ne parviens pas à bien comprendre malgré des recherches sur le net.
Accessibility : Le texte des liens ne sont pas assez explicites ???
arial-label serait la solution ???
Best Practices : Les erreurs enregistrées dans la console indiquent des problèmes non résolus. Ils peuvent provenir d'échecs de requêtes réseau et d'autres problèmes de navigateur.
"le port de message s'est fermé avant qu'une réponse ne soit reçue. "
Si vous avez l’explication ou une solution ? Merci
Bonne journée
Modifié par africa (26 Nov 2020 - 07:09)
Je poursuis ma quête du graal ????
Sur "lighthouse" j’ai 2 erreurs que je ne parviens pas à bien comprendre malgré des recherches sur le net.
Accessibility : Le texte des liens ne sont pas assez explicites ???
arial-label serait la solution ???
Best Practices : Les erreurs enregistrées dans la console indiquent des problèmes non résolus. Ils peuvent provenir d'échecs de requêtes réseau et d'autres problèmes de navigateur.
"le port de message s'est fermé avant qu'une réponse ne soit reçue. "
Si vous avez l’explication ou une solution ? Merci
Bonne journée
Modifié par africa (26 Nov 2020 - 07:09)
Bonjour,
En fait il s'agit essentiellement d'un seul lien (que lighthouse te signale si tu cliques sur le triangle pour voir les explications puis sur la ligne où il y a un a tout seul). Il s'agit de :
Et de fait, y a pas grand chose qui permet de dire ce que fait ce lien !
Je n'ai pas ce message.
Amicalement,
Modifié par parsimonhi (26 Nov 2020 - 12:03)
africa a écrit :
Accessibility : Le texte des liens ne sont pas assez explicites ???
arial-label serait la solution ???
En fait il s'agit essentiellement d'un seul lien (que lighthouse te signale si tu cliques sur le triangle pour voir les explications puis sur la ligne où il y a un a tout seul). Il s'agit de :
<div class="haut"><a href="#"><i class="sprite sprite-fleche"></i></a></div>
Et de fait, y a pas grand chose qui permet de dire ce que fait ce lien !
africa a écrit :
Best Practices : Les erreurs enregistrées dans la console indiquent des problèmes non résolus. Ils peuvent provenir d'échecs de requêtes réseau et d'autres problèmes de navigateur.
"le port de message s'est fermé avant qu'une réponse ne soit reçue. "
Je n'ai pas ce message.
Amicalement,
Modifié par parsimonhi (26 Nov 2020 - 12:03)
Bonjour
Merci Jean pierre
Désolé je viens de voir ton message maintenant.
Je te remercie de l'intérêt que tu apportes à mon travail et des solutions que tu me suggère.
Ce forum est ma bible
Infographie
Je ne saisis pas pleinement la portée de tes remarques.
"Sous deux bandes inutiles, des réalisations pas très accrocheuses, qui me bouchent toute ma page, avec des couleurs non accordées et ordinaires."
"revoir le haut et pour qu'il ouvre la porte à la sobriété du corp de ta page aucune couleur sauf la photo et le logo.
reste un bas bien trop haut "
Référencement
plus de pages référencées par rapport au nombre réel de pages ?? et mal placé.
Coté Google est-tu inscrit aux outils webmaster ?
oui
J'ai hâte d'avoir un retour de ta part
Merci
Merci Jean pierre
Désolé je viens de voir ton message maintenant.
Je te remercie de l'intérêt que tu apportes à mon travail et des solutions que tu me suggère.
Ce forum est ma bible
Infographie
Je ne saisis pas pleinement la portée de tes remarques.
"Sous deux bandes inutiles, des réalisations pas très accrocheuses, qui me bouchent toute ma page, avec des couleurs non accordées et ordinaires."
"revoir le haut et pour qu'il ouvre la porte à la sobriété du corp de ta page aucune couleur sauf la photo et le logo.
reste un bas bien trop haut "
Référencement
plus de pages référencées par rapport au nombre réel de pages ?? et mal placé.
Coté Google est-tu inscrit aux outils webmaster ?
oui
J'ai hâte d'avoir un retour de ta part
Merci