Vos avis et conseils sont précieux pour s'améliorer !

Bonjour à tous et à toutes !

Etant nouveau sur ce forum, je tiens à me présenter à toute la communauté :
Je suis Christian, 73 ans, ancien directeur des ventes dans une société de bureautique et passionné de création et d'optimisation de sites.

J'aimerai avoir vos avis et conseils sur ma dernière création : www. copem.fr (je mets un espace dans l'url pour que l'on ne me prenne pas pour un spameur )

Je l'ai passé à la moulinette du w3c et PageSpeed Insights de Google et c'est Ok pour les deux.

Que pensez-vous du design et de de son ergonomie ?


En vous remerciant pour le temps que vous allez me consacrer
Bien cordialement
Christian

Bonjour Christian

Je n'ai qu'un seul reproche (ou deux) à faire selon moi sur le site :

C'est l'image 40 ans qui est en haut à droite
Je ne trouves pas pratique de la coller à l'écran car quand on descends il peut vite devenir gênante.

Tout ton site à l'air responsive sauf le footer, est-ce un choix ou simplement un problême de code ? ou peut être que le public visé est un public utilisant des ordinateurs

En tout cas le site est bien, remplis d'information et vraiment sympathique à l'ouverture de la page

Pourquoi ne pas rajouter un "sommaire" sur la page d'accueil qui redirige vers les différents paragraphes de la page d'accueil ?

Bonjour Christian

Le site est clair mais très remplit

Beaucoup (trop) de texte. Et cela dès l'accueil. Mais on peut facilement supposer que cotem veut rassurer en mettant un maximum d'infos.
Il faudrait tout de même réduire et se concentrer sur l'essentiel qui est ?? bah tient je sais même pas... J'ai pas eu envie de lire tout le baratin. Du coup vente ? location ? ça m'a pas marqué...

Pour revenir sur l'aspect visuel.
Mêmes remarques que OnePunch.
Conseil : Faire en sorte que cette image des 40 ans disparaisse lorsque la grande image du haut disparait.

Et puisque je parle de cette image... Il s'agit bien d'une image, pourtant il y a un texte et un bouton.
Conseil : Il faudrait que l'image soit une image de fond et que le texte et le bouton soient de vrais éléments html par dessus l'image

Les conseilleurs ne sont pas les payeurs et il est facile de dire quoi faire... j'en suis conscient, mais c'est pour le bien du site

D'une manière globale c'est une belle réussite...

OnePunch a écrit :
Bonjour Christian

Je n'ai qu'un seul reproche (ou deux) à faire selon moi sur le site :

Même plus, ça ne me dérange pas

Pour l'image de vient de rectifier le css3 : elle est fixe maintenant
Pour le footer ce n'est pas voulu, juste un problème de code que je solutionnerai cette semaine
Merci OnePunch pour ces constatations qui me permettent d'avancer

Christian

pchlj a écrit :
Bonjour Christian

Le site est clair mais très remplit

Beaucoup (trop) de texte. Et cela dès l'accueil. Mais on peut facilement supposer que cotem veut rassurer en mettant un maximum d'infos.
Il faudrait tout de même réduire et se concentrer sur l'essentiel qui est ?? bah tient je sais même pas... J'ai pas eu envie de lire tout le baratin. Du coup vente ? location ? ça m'a pas marqué......

Oui c'est assez rébarbatif mais ce texte est là pour l'optimisation car le ratio texte/html est de 41% ce qui parait-il est très bon

a écrit :
Conseil : Faire en sorte que cette image des 40 ans disparaisse lorsque la grande image du haut disparait....

C'est fait car 2 remarques de 2 personnes différentes, c'est un avertissement !

a écrit :
Conseil : Il faudrait que l'image soit une image de fond et que le texte et le bouton soient de vrais éléments html par dessus l'image ...

J'y avais pensé mais j'évite de mettre du texte sans rapport avec le mot clé de la page car cette page est optimisée pour le mot clef "photocopieur" sur Google

Merci pour votre contribution

pchlj a écrit :
belle réactivité

pour le mot clé il suffit que la page ait un H1 en rapport...
Le texte sur l'image n'a pas besoin d'être en H quelque chose

Même si google lit tous les mots de la page il s'intéresse surtout aux H1 à H3 qui sont donc les titres en rapport avec les mots clés, logiquement.

Pour le ratio, oui en effet c'est important. Mais il y a quand même un sacré placard...
Et si je suis la logique google, l'image du haut fait que les premiers mots sont limites sur la ligne de flottaison, donc aucun apport réel d'avoir autant de texte.
Dans ces cas là il me semble que le même texte avec une présentation accordéon, donc titre visible et texte caché n’empêche pas la reconnaissance des 41% de texte

Le h1 est en haut de la page sous le logo et donc c'est ce qui est lu en premier par Google
Je ne tiens pas trop à supprimer du texte car pour la requête Photocopieur c'est 18300 requêtes mensuelles en France (données de Google) et compte tenu que le site est bien positionné pour ce mot clé https://www.google.fr/search?source=hp&ei=K6IVWs_3ItLMwQKbn5SQAg&q=photocopieur&oq=photocopieur&gs_l=psy-ab.3..0l10.2037.7413.0.8067.12.10.0.2.2.0.83.599.9.9.0....0...1c.1.64.psy-ab..1.11.609...0i131k1j0i10k1.0.yeqA35RJWv4, je ne tiens pas trop à prendre le risque de perdre des positions.

Merci d'avoir insisté, je vais essayer de réduire le texte en essayant de garder le même ratio d'optimisation

Christian

Attention à la largeur des paragraphes...
Par exemple, la ligne ci-dessous s'inscrit dans son intégralité sur mon écran :

Depuis 40 ans, la société COPEM est reconnue pour son expertise et son professionnalisme dans le domaine de la vente, la location et la maintenance de photocopieurs et d'imprimantes multifonction

Ce qui fait 195 caractères, là où les ouvrages traitant de HTML recommandent de ne pas dépasser 60 à 70 caractères (soit environ 33 EM de large en CSS).
Sur poste de travail, des paragraphes occupant toute la largeur de l'écran obligent en effet le lecteur à des aller / retour successifs pour parcourir chaque ligne, diminuant d'autant l'attention.

J'aurai encore une autre remarque :

elle concerne ton faux bouton "Demandez ici votre devis réponse sous 24 heures"
Je ne suis pas fan du fait que tu ai deux liens différents avec du simple texte entre les deux . Je ne trouves pas ça pratique pour un utilisateur lambda qui peut ducoup avoir du mal à savoir ou cliquer

Pourquoi ne pas avoir fait par exemple ça (en gardant à l'esprit ton affichage) :

<a href ="/contact.php">
  <p>Demandez ici votre</p>
  <p><strong>DEVIS</strong></p>
  <p>REPONSE sous 24 heures</p>
</a>

OnePunch a écrit :
J'aurai encore une autre remarque :


Pourquoi ne pas avoir fait par exemple ça (en gardant à l'esprit ton affichage) :

<a href ="/contact.php">
  <p>Demandez ici votre</p>
  <p><strong>DEVIS</strong></p>
  <p>REPONSE sous 24 heures</p>
</a>

Ce n'est pas une bonne pratique de mettre des balises de types bloc à l'intérieur de balises inline.

Sauf que les contextes inline / bloc sont affreusement has-been depuis HTML5.

<a> a un modèle de contenu «transparent». C'est à dire qu'il hérite de son parent le contenu autorisé. Si <a> est l'enfant de <div>, il peut donc contenir tout ce que <div> autorise. Justement pour ce genre de cas de figure.

De plus, on le faisait déjà avant HTML5.

Effectivement, autant pour moi.

Je n'avais jamais entendu parler du contenu "transparent".

OnePunch a écrit :
J'aurai encore une autre remarque :

elle concerne ton faux bouton "Demandez ici votre devis réponse sous 24 heures"
Je ne suis pas fan du fait que tu ai deux liens différents avec du simple texte entre les deux . Je ne trouves pas ça pratique pour un utilisateur lambda qui peut ducoup avoir du mal à savoir ou cliquer

J'ai essayé avec ton code et je n'arrive pas à corriger ce bug
Je crois que je vais faire au plus simple : une image avec lien

Merci encore OnePunch pour tes constatations !

sepecat a écrit :
Attention à la largeur des paragraphes...
Par exemple, la ligne ci-dessous s'inscrit dans son intégralité sur mon écran :

Depuis 40 ans, la société COPEM est reconnue pour son expertise et son professionnalisme dans le domaine de la vente, la location et la maintenance de photocopieurs et d'imprimantes multifonction

Ce qui fait 195 caractères, là où les ouvrages traitant de HTML recommandent de ne pas dépasser 60 à 70 caractères (soit environ 33 EM de large en CSS).
Sur poste de travail, des paragraphes occupant toute la largeur de l'écran obligent en effet le lecteur à des aller / retour successifs pour parcourir chaque ligne, diminuant d'autant l'attention.

Merci sepecat, je vais augmenter mes paddings et voir ce que ça donne

suchi a écrit :
Merci sepecat, je vais augmenter mes paddings et voir ce que ça donne

A priori, la solution la plus adaptée aux différentes résolutions serait plutôt de jouer sur la largeur maxi d'une DIV englobante, dont les marges horizontales auront été fixées à auto.
Exemple :

.content
{
max-width:40rem;
margin:0 auto 1rem auto;
}

Les balises de paragraphe P sont mises à l'intérieur de cette DIV (class="content") et seront donc forcément contenues dans la largeur maxi précitée. Les marges auto indiquent au navigateur de centrer le conteneur sur la page.
Bien entendu, j'ai indiqué ici 40rem à titre d'exemple, mais ce n'est pas une valeur absolue et on peut l'augmenter ou la diminuer en fonction des besoins de la mise en page.
A ma connaissance, ce mode de positionnement / contrainte en largeur fonctionne sur l'ensemble des navigateurs récents, mais à confirmer par d'autres membres du forum plus au fait dans le domaine CSS.

suchi a écrit :

J'ai essayé avec ton code et je n'arrive pas à corriger ce bug
Je crois que je vais faire au plus simple : une image avec lien

Merci encore OnePunch pour tes constatations !

J'ai fini par trouver :

J'avais positionné la div du devis entre deux autres div ce qui empêchait le lien de fonctionner sur l'ensemble du contenant

Merci One Punch

je trouve le site très bien mais un peu trop chargé à mon goût !