Pages :
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 Smiley cligne .

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 Smiley cligne
Modifié par djmatti (17 Jan 2014 - 11:27)
Bon visiblement mon site ne vous inspire pas Smiley confus .

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?
Bonjour,

Je trouve le site très propre visuellement parlant, efficace à mon sens, peut-être serait-il en effet judicieux d'afficher le numéro de téléphone en haut à droite des pages (bien que je ne sois pas un spécialiste en comm'), ou au moins un bouton "Me contacter" plus évident visuellement...

Pour ce qui est du code, c'est assez sale d'un point de vue sémantique, j'évoque bien entendu l'usage des tableaux, mais tu dois en effet être dépendant de ton CMS actuel, qui, et c'est un avis personnel, n'est pas le plus adéquat à mon sens.

Mais si cela ne dépend que d'un plugin e-commerce paypal, alors tu pourras facilement migrer vers un code 100% codé main ou un CMS plus adapté tel que Wordpress ou Drupal, voire pourquoi pas Prestashop, bien qu'ici le site n'est pas terriblement axé e-commerce (bibliothèques de produits, gestion forte des commandes, comptes clients, etc
...).

Autre remarque, le site n'est pas responsive, mais on ne va pas trop en demander à un vieux Joomla Smiley smile

En tout cas, le site a un temps de chargement acceptable, et répond globalement à mon sens aux exigences d'un utilisateur lambda en terme d'ergonomie et de navigation.

Bon courage
Modifié par ohweb (22 Jan 2014 - 10:06)
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.
@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.
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. Smiley cligne
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/ Smiley lol ) :

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. Smiley cligne
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 Smiley cligne
Pages :