Pages :
Bonjour
Je vous soumets ce site afin d’obtenir vos critiques concernant le code, le design, le SEO, tout ce qui pourrait l’améliorer.
Merci pour vos retours.

menuiserie-menplast.fr
Modifié par africa (26 Feb 2021 - 07:31)
Modérateur
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 ! Smiley smile

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,
Coucou !
Si tu veux des critiques sur ton sites (accessibilité, CEO et performances), tu peux utiliser Lighthouse de Google Chrome, il se trouve dans l'inspecteur et analyse ton site.
Je sais pas si c'est le top mais ça marche super bien.
Merci beaucoup pour votre retour, super, je vais tenir compte de vos remarques et conseils Smiley biggrin
Modifié par africa (21 Sep 2020 - 18:53)
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. Smiley decu Smiley smile
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. Smiley confus
Sinon bien joué pour le reste du site qui donne très bien!! Smiley biggrin
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. Smiley decu Smiley smile
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. Smiley confus
Sinon bien joué pour le reste du site qui donne très bien!! Smiley biggrin


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)
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 Smiley decu
J'ai mis plus de 2 mois (Éternel débutant) pour faire le site avec l'aide précieuse des membres de ce forum Smiley smile
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
Modérateur
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 ! Smiley biggrin Smiley biggrin Smiley biggrin . 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.
Modérateur
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 à :
<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,
Meilleure solution
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)
Modérateur
Bonjour,
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 ! Smiley smile

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)
Bien !
Ton site a du succès, et la qualité de ton entreprise le mérite, mais c'est pour cela que nous avons épluché ton site.
Plein de points importants ont étés signalés, et il faut les maintenir, cependant je me doit d'ouvrir le débat :
1) sentiment du visiteur et l'importance de l'infographie:
je cherche pour moi un PRO pour me faire une belle rénovation de mon magasin ,alors je cherche et tombe chez toi, je vois quoi ?
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.
Heureusement si je ne fermes pas la page pour aller chercher ailleurs, alors j'ai des produits bien présentés, très sobrement et très PRO .

Alors tout est à refaire ? quel boulot !! ?????
NON pas du tout juste 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 ,et voila une page ou le visiteur se dira Houlà ! la classe !

2) le Référencement il est à revoir car tu as des anomalies, plus de pages référencées par rapport au nombre réel de pages ?? et mal placé ...
Je peux t'aider assez facilement pour changer cela tu as vraiment matière à être haut placé.

Ton site est très bien pour le moment alors prenons le temps de faire ça IMPEC même si ça prends une semaine.

J'ai avec tes ressources commencé une solution pour l' infographie, je te mettrais un lien d'ici demain, ça c'est pour le client.
Coté Google est-tu inscrit aux outils webmaster ? et veux tu me mettre en MP ton mail ,ce sera plus facile Smiley cligne