[Intermédiaire] Site Vitrine - Cabinet nutritionniste - revamping

Bonjour à tous,

Je suis fraîchement inscrit après avoir lu et relu beaucoup d'articles qui m'ont permis de me remettre au dev web après presque 10ans d’inactivité (développeur de métier). Merci pour la richesse de ce forum et de ses contributeurs, site Alsacien qui plus est .

Voilà, je sollicite votre aide car je suis en cours de revamping du site de mon épouse.
http://www.nouvier.com

J'ai été contraint de le revoir suite à des piratages intempestifs (tous les deux jours).
Histoire: site entièrement refait en 2009 par un designer (pas développeur) en utilisant un CMS de l'époque (Joomla 1.5), avec les tendances de l'époque (orienté "bulles").
Le site se fait pirater depuis plus de huit mois, certainement du à une faille de Joomla.
J'ai tenté en vain de migrer Joomla aux dernières versions.
J'ai donc décidé dans un premier temps de "statifier" le site en l'aspirant. Pas gênant car contenu très peu dynamique.
J'ai du revoir la paiement en ligne via PayPal car il utilisait le module Joomla, lui même personnalisé.

Résultat: quand on commence à modifier qqchose, on se prend au jeu et on se dit, pourquoi pas améliorer çà, et puis ça, etc....

Bref, j'essaie de garder le design originel (je ne suis pas graphise/webdesigner ) car je ne ferais certainement pas mieux (A moins que bous n'ayez des idées). Par contre je souhaite améliorer tout le reste.

ce que j'ai fait:
- Fait le ménages dans les css et div/styles non utilisés ou inutiles (c'était le bronx)
- cassé l'architecture en tableau et en multibles Div imbriqués inutiles (basé sur le template RawMilkyway de Joomla)
- des rewriteRule Apache pour avoir de jolies URLs
- Un seul Index.php avec une inclusion dynamique des pages de contenu
- commencé à virer les tableaux. A ce titre j'ai découvert que la mode était de ne plus les utiliser pour la mise en page. Enfin! ... Sauf que le mécanisme des DIV n'est pas plus simple ou logique mais ça c'est un autre sujet
- refait le menu en full CSS3/HTML5 et viré le javascript. Mon dieu! Je pensais que les navigateurs avaient convergé avec le temps. Je me retrouve avec une déclaration de style CSS longue comme le bras juste pour un dégradé! Mais Allo quoi !
- nettoyé les style in-line (il en reste encore).
- Commencé à rendre le site W3C compliant
- Optimisé les temps de chargement. j'ai toujours un problème avec ma grosse image de fond qui pèse 360ko.

Je que je compte encore faire:
- Page d'accueil: virer les tableaux et tout faire en DIV et cie.
- Page d'accueil: virer les images "bulles" pour ne garder que "l'image" et construire la bulle en CSS et avoir le texte en balise H2 (c'est une image également actuellement!)
- Essayer de corriger le bug de la ligne horizontale grise au dessus du footer qui apparaît sur certains navigateurs (surtout les mobiles). Ca vient du style shadow que j'ai appliqué au bloc juste au dessus du footer pour avoir la continuité des bords ombragés avec le footer. Si vous avez des idées
- Mettre un titre différent par page. Je compte mettre les infos en BDD ou dans un fichier CSV
- réduire la marge à gauche au minimum pour que le site s'affiche mieux sur tablette ou smartphone

Mes questions:
- que pensez vous du site au niveau look?
- que pensez vous de sa structure?
- Est-il optimisé pour le référencement naturel (hormis le titre à changer sur chaque page)?
- Ouvert à tout autre remarque. normal c'est le but de ce post.

Je tiens à préciser que j'ai déjà fait toutes les modifs grâce aux articles et contributions de ce forum. merci d'avance.

PS: Je reviens au dev après.... avoir embauché et managé de nombreux développeurs
Modifié par djmatti (17 Jan 2014 - 11:27)

Bon visiblement mon site ne vous inspire pas .

Entre temps, dans ma TO-DO j'ai fais:
- Page d'accueil: virer les tableaux et tout faire en DIV et cie.
- Page d'accueil: virer les images "bulles" pour ne garder que "l'image" et construire la bulle en CSS et avoir le texte en balise H2 (c'est une image également actuellement!)
- Mettre un titre différent par page. Je compte mettre les infos en BDD ou dans un fichier CSV
- réduire la marge à gauche au minimum pour que le site s'affiche mieux sur tablette ou smartphone

Reste à faire:
- Essayer de corriger le bug de la ligne horizontale grise au dessus du footer qui apparaît sur certains navigateurs (surtout les mobiles). Ca vient du style shadow que j'ai appliqué au bloc juste au dessus du footer pour avoir la continuité des bords ombragés avec le footer. Si vous avez des idées
- Avez-vous des idées pour réduire la taille del'image en background du header? PNG de 360ko.

Merci d'avance!

Quel est le but du site ? De générer du contact, des appels, des inscriptions ?
Il n'y a pas de gros bouton "demande de bilan", de numéro de téléphone, d'adresse email...
Le design du site est une chose, mais le rendre fonctionnel et ergonomique en est une beaucoup plus importante.

Le but du site est de susciter l'intérêt pour générer une prise de RDV au cabinet ou une consultation en ligne.
Pour le contact par mail, une page dédiée de contact est présente. Je ne veux éviter le spam.
Pour le numéro de tel, idem mais vous pensez qu'il faille l'afficher en gros sur l'accueil?
Idem pour "demande" de bilan?

merci pour ta réponse.
L'architecture est héritée de Joomla mais j'ai viré le CMS.
j'ai simplement repris le code généré HTML que j'ai gardé statique. je suis donc libre

Ensuite j'ai commencé à nettoyer les pages. Normalement la page d'accueil est "propre" et passe le w3c validator.

Je dois encore nettoyer les autres pages des tableaux.
ok, je pense du coup mettre le numéro (en texte?) dans le cartouche droit en haut de page. Qu'en pensez vous?

voilà. J'ai nettoyé tous les tableaux et ajouté un téléphone en haut à droite ( ne s'affiche pas en rouge sous safari mobile, sais pas pkoi).
je pense qu'il devrait être bien la. pas responsive malheureusement mais ce devrait être trop compliqué à faire sans tout changer.
sinon, vous avez des idées pour réduire la taille, en poids, du header? L'image en png fait 360ko.

Bonjour, pour optimiser le poids des images smush.it est gratuit et performant : http://www.smushit.com/ysmush.it/
Pour le SEO, tu peux faire une redirection 301 de http://www.nouvier.com/index.php vers http://www.nouvier.com (contenu dupliqué). Tu peux aussi mettre le lien vers l'article sur le titre plutôt que sur le texte "en savoir +", bref le mieux serait de faire appel a un référenceur à Strasbourg

Un Strasbourgeois ^^

Bonjour,

Les liens en savoir plus sont passés en gris :
http://nsa20.casimages.com/img/2014/01/27/140127120106340695.jpg

Sinon, je ne sais pas si je mettrai une ombre sur le numéro de tél, sous firefox le rendu n'est pas top, ça rend moins lisible le numéro limite :
http://nsa20.casimages.com/img/2014/01/27//140127120321378176.png

Après ce n'est que mon avis

@ohweb:
"Les liens en savoir plus sont passés en gris ". J'ai vu sur certain navigateurs (emulateur web et mon ipad). Bizarre pas sur mon poste pourtant, tout navigateur confondu. Pourtant j'ai un attribut color dans ma css... J'ai l'impression que c'est l’attribut du de la balise "a" de base qui prend le dessus.
Je peux pas le debugger n'arrivant pas à le reproduire sur mon environnement de dev.

Pour l'ombre sur le tel: j'ai éclairci un peu le shadow

@bongduiaj4wei (ça c'est du pseudo ver domi! ):
SEO: peut pas. Les requêtes sur / sont redirigées vers index.php (rewriterule). Si e faix une redirection type 301 je boucle à l'infini
Pour le lien dans le H1, oui bonne idée. Peut-être garder les deux...

djmatti a écrit :
@ohweb:
"Les liens en savoir plus sont passés en gris ". J'ai vu sur certain navigateurs (emulateur web et mon ipad). Bizarre pas sur mon poste pourtant, tout navigateur confondu. Pourtant j'ai un attribut color dans ma css... J'ai l'impression que c'est l’attribut du de la balise "a" de base qui prend le dessus.
Je peux pas le debugger n'arrivant pas à le reproduire sur mon environnement de dev.

Curieusement ça remarche à nouveau. C'était sur firefox sous windows 7 64 bits.

j'ai forcé la définition de "a" en spécifiant la pseudo a:active.
bizarre

Bonjour,

Juste pour signaler que l'image d'arrière plan avec la fraise est de très mauvaise qualité. JPEG trop compressé et agrandi. On n'agrandit jamais une image au dessus de sa taille initiale (flou), encore moins une image JPEG, ce qui fait ressortir les défauts de compression et donne un résultat sale avec des taches. Sur grand écran c'est très visible.
Image de fond à remplacer, changer ou supprimer donc.

Certains blocs se calent mal horizontalement (chrome/mac). Vous pouvez en décaler un de façon bien nette, mais pas tous, ça casse l'équilibre de la mise en page.

Pour le reste, ce site semble faire son job.
Modifié par spongebrain (27 Jan 2014 - 23:29)

spongebrain a écrit :

Juste pour signaler que l'image d'arrière plan avec la fraise est de très mauvaise qualité. [...]
Image de fond à remplacer, changer ou supprimer donc.

C'est là que je suis embêté. L'image originale pèse près de 400ko. C'est trop gros. Vous l'a voyez avec quelle résolution d'affichage? car en général sur la plupart des écran on ne voyait pas trop la dégradation. Si je l'a supprime je trouve qu'il "manque quelque chose". N'étant pas graphiste ou infographiste (et donc pas artiste) je ne n'ai pas d'idées.

spongebrain a écrit :

Certains blocs se calent mal horizontalement (chrome/mac). Vous pouvez en décaler un de façon bien nette, mais pas tous, ça casse l'équilibre de la mise en page.

Je ne vois pas de quel bloc vous parlez. Je suis passé hier en "vrai" HTML5 et donc remplacé les bloc de la page d'accueil en DIV par des SECTION.

L'image pourrait peser environ le même poids avec un rendu propre et non compressé à ce point.
Juste une capture sur une zone où la dégradation est particulièrement visible (image hébergée sur http://www.jupload.fr/ ) :

http://images.jupload.fr/1390955525.png

Les taches fluos, le manque de netteté et les traces sales dues à une compression excessive sautent aux yeux. Image irrécupérable, direct à la corbeille.
Il existe des images libres de droits où pour quelques euros vous pouvez avoir un rendu propre et agréable, sur des banques d'images comme fotolia par exemple. Choisir une image d'au moins 1200 pixels de large pour éviter le flou et la dégradation. Le poids de l'image ne devrait pas être impacté vu qu'ici la dégradation est tellement visible qu'il semble évident qu'elle a eu lieu avant agrandissement. Si vous souhaitez alléger le poids sans détériorer le rendu et que vous n'avez pas de logiciel qui permet cette optimisation, il existe de nombreux sites gratuits sur le web qui proposent ce service. Une recherche google pour ce faire ou si quelqu'un à un lien ? Placer une image en arrière plan est très courant.

Second point concernant les blocs mal calés verticalement :
Lignes verticales rouges : les décalages indésirables
Lignes verticales oranges : les calages apparemment volontaires mais pas tip top, les textes trop collés
Lignes verticales vertes : les calages conseillés, les textes à décoller du bord
Flèches rouges horizontales : Les éléments mal centrés avec une marge droite plus importante sur l'ensemble du contenu, la marge gauche est trop étriquée, Le menu mal centré
Flèche + ? : Dessin incompréhensible, c'est quoi ??

http://images.jupload.fr/1390956213.png

Pour voir la seconde image à l'échelle 1, ouvrez la dans un nouvel onglet.
Voilà pour moi.

Tout d'abord, un grand merci à toi pour avoir pris le temps d'illustrer tes avis et conseil. C'est précieux et j'apprécie beaucoup.

spongebrain a écrit :
L'image pourrait peser environ le même poids avec un rendu propre et non compressé à ce point. [..]

Merci. Je vais voir ce que je peux faire

spongebrain a écrit :

Second point concernant les blocs mal calés verticalement :
Lignes verticales rouges : les décalages indésirables

Tu as indiqué trois lignes verticales "indésirables". Je comprends que le bord extérieur du menu, les blocs de contenus dans le contenu et les cartouches (blocs du header) doivent être alignés. C'est bien çà?
Le cas échéant, pour les marges de gauche, je peux aligner le menu aux blocs mais je ne pense pas aligner l'item de menu "accueil" sur eux.

spongebrain a écrit :

Lignes verticales oranges : les calages apparemment volontaires mais pas tip top, les textes trop collés
Lignes verticales vertes : les calages conseillés, les textes à décoller du bord
Flèches rouges horizontales : Les éléments mal centrés avec une marge droite plus importante sur l'ensemble du contenu, la marge gauche est trop étriquée, Le menu mal centré

OK je note

spongebrain a écrit :

Flèche + ? : Dessin incompréhensible, c'est quoi ??

C'est le logo de la méthode qu'elle utilise (c'est une franchise).
Elle a utilise deux méthodes:
- une méthode de consultation nutritionnelle classique
- une méthode par laquelle elle est franchisée spécifique à la perte de poids (avec des soins et autres appareils)

Je fais faire un index2 pour vous montrer les résultats.
Merci encore

pour le design je trouve que ça tiens la route ..sinon j'ai fait une petite analyse avec l'outil de référencement Woorank et les résultats ne sont pas trop mauvaise, mais il faut faire attention au fait d'utiliser plus d'une balise H1 par page, le mieux c'est de rester cohérent et d'utilise h1 puis h2, h3...
Il y a apparemment aussi des undersocres dans certains URLs et finalement il faut travailler un peut plus la densité des mots clés (répéter les mots les plus importants dans le Title, la balise H1 et en haut des paragraphe...)
Bon courage

J'ai pris en compte vos remarques.
Les URLs sont maintenant avec des tirets et plus avec des underscores.
J'ai corrigé les alignements.
Je ne peux faire plus car le menu est centré sous IE et Chrome mais pas sous FireFox.
Je ne peux réduire les marge dans le cartouche en haut à droite sinon le texte est renvoyé à la ligne est sort du champ.

Pour la qualité de l'image, vous pouvez tester avec l'image originale non compressée sur le serveur:Fotolia_8624855_M.jpg
Pour tester, il suffit de remplacer le nom du fichier dans la classe #page_bg
Je ne vois pas bcp de diffénrences.
C'est peut-être l'image à la base qui est pourrie.
Modifié par djmatti (30 Jan 2014 - 23:27)

Je constate que depuis ton poste tu as fais des modifs. Je trouve le visu correct personnellement.

*Note de modération : Tu passais par hasard, tu t'es dit que le sujet méritait ton inscription, ton intervention pas très argumentée, et pourquoi pas un petit lien pour faire un peu de pub à ton site ? Ce n'est pas une très bonne idée.
Modifié par 6l20 (04 Apr 2014 - 10:57)

Merci. Je pense avoir finalisé le design et l'archi. Ca à l'air d'être optimisé.
Manque plus que "le maître d'ouvrage" y mette plus de contenu