Une page type pour Guide-biere.fr

Bonjour, je m'occupe depuis quelques années d'un site d'information sur la bière. N'ayant à la base aucune connaissance en webmastering, il est fait un peu de bric et de broc.

Petit à petit, je commence à faire plus attention à ce que je fais, donc pour uniformiser le graphisme, faciliter la création de nouvelle page et améliorer le code, j'ai décidé de créer une page type


Pouvez-vous me dire ce que vous en pensez, tant au niveau graphique que code ?

Le détail qui me chagrine encore beaucoup, c'est le problème d'affichage des bulles d'info au survol des titre : lorsque la fenêtre du navigateur est ouverte en petit, ça ne s'affiche pas correctement.

merci!

Bonjour,

Pinaise a écrit :
Je n'exclue pas les utilisateurs en 1024, si ? C'est la largeur maximale de mes div...

Seulement, même en plein écran, il reste quelques éléments du navigateur (bordure / assenceurs) donc il faut prévoir un peu moins de 1024px de largeur pour que ça rentre. (entre 990px et 1000px, c'est généralement bien).

Je suis également d'accord avec Super_baloo sur la présence de "Site optimisé pour mozilla firefox - 1024*768" c'est bête de le mettre. Premièrement parce que le site passe relativement bien avec IE6 ; deuxièmement parce que cela fait "amateur" dans le mauvais sens du terme.

Idem également pour le graissage au survol, ça perturbe à cause du mouvement.

Graphiquement, le site est un peu trop "terne" rajouter une couleur un peu plus vive, et quelques effet d'ombre/glossy/cequetuveux pour donner un peu de volume ne serait pas un mal.

Bizarement la première bulle sur le menu "news" apparait avec une bordure blanche en haut alors que les autres sont bien transparentes.

Les liens de bas de page sont fort petits et avec un contraste trop faible (par rapport à leur taille de font).

J'ai également un problème avec le structure de titres : Titre 1 > Titre 3 (sous titre) > Titre 2 (titre paragraphes) > Titre 5 > Titre 6 (titre colonne) > Titre 4 (réservé à la colonne). Tu ne vois pas un problème ? Avoir une hiérarchie de titres complète, logique et suivie est particulièrement important : 1. Pour la logique de ta page ; 2. Pour tous ceux qui navigent à l'aide des titres via un lecteur d'écran. Tu ne peux pas avoir dans ton code un h1 suivit d'un h3, il doit y avoir une h2 entre les deux. EDIT : après visionage du code, c'est pire que je ne le pensais (h1 suivi de h6...)

Pour ce qui est du code :

* Dans le head, tu as deux meta, topic et keywords, qui sont tous les deux innutiles pour les moteurs, par contre tu n'exploite pas "description" qui, s'il n'est pas utile au référencement, est utilisé par les moteur pour proposer un résumé de la page sous son titre dans les résultats de recherche. Avoir une description sexy et différente pour chaque page est un gros plus pour attirer le clic.

* Il est préférable de mettre les scripts JS en fin de page. Ainsi le code HTML peut charger avant les scripts.

* Il est tout à fait possible de mettre des accents dans le title :

<title>inscrire ici le titre de la page en evitant les accents</title>

C'est même plus simple pour la lecture.

* En utilisant le clavier pour naviguer, les infobulles n'apparaissent plus sur ton menu :

<div class="bandeau3"><a href="/news/index.php" class="bandeaux" onmouseover="div.show('div1')" onmouseout="div.hide('div1')">News</a></div>

Utiliser onfocus et onblur à la place de onmouseover et onmouseout (respectivement) permettrait de concerver les infobulles pour tous.

* La structure de la page est perturbante, le titre de la partie contenu > le colonne de droite > la suite de la partie contenu. C'est d'autant plus perturbant, si l'on essaye de faire une sélection de la partie contenu et que l'on se retrouve avec la colonne. C'est, je pense, à revoir.

* Il est dommage d'utiliser un tableau pour les liens de bas de page : Accueil, Nous écrire et Retour.

* Pour les liens du pied de page, j'aurais utilisé une/des liste(s) (éventuellement imbriquées) plutôt que des <br>

Merci Laurie-Anne pour cette réponse détaillée, je vois que tu fais ça dans les règles de l'art sous plusieurs navigateurs, avec la navigation clavier, etc...

En effet, le 1024 c'est une betise de ma part, je vais passer à 1000px, ça va amener un certain nombre de changements, on verra ça ce soir.
idem pour la bande blanche en haut de la bulle news...

"Site optimisé pour mozilla firefox - 1024*768" ,
je l'enlève complètement ? parce que sur IE6 c'est quand même pas top : mes bulles sont des .gif et plus des .png.
Et sur des résolutions < 1024px, les bulles ne s'affichent plus (ce qui n'est pas handicapant mais reste dommage).

Sinon, "terne" c'est un peu méchant, je préfère "sobre" . Le but c'est que quand on met un photo de bière, ça soit vraiment elle qui attire l'oeil et assure l'esthétisme.

Le graissage et la taille des liens de footer je vais voir avec les autres comment/si on change ça.

onfocus et onblur, je ne connaissais pas du tout, merci pour le tuyau !

Au niveau des accents dans le titre, c'est dans un site sur le référencement que j'ai lu ça. Jusqu'ici je les mettais aussi...

Les h1 à h6, je sais que je les ai mis un peu dans le désordre, mais à part pour ceux qui navigent à l'aide des titres , est ce que ça a vraiment une importance ? On m'a assuré que non. Les premiers doivent être ceux qui sont les plus descriptifs (avec des mots clés) de ma page.
Par exemple mon sous titre est en 3 au lieu de 2 car la plupart du temps il contient un trait d'humour et apporte moins d'info que les titres des paragraphes. Et le titre de la colonne, c'est quelque chose comme "repères" ou "résumé" donc vraiment pas intéressant, c'est pour ça que je l'ai calé en titre6.

encore merci pour ton aide, je vais essayer de regarder tout ça rapidement... si quelqu'un d'autre voit des problèmes, n'hésitez pas !

Laurie-Anne a écrit :
Seulement, même en plein écran, il reste quelques éléments du navigateur (bordure / assenceurs) donc il faut prévoir un peu moins de 1024px de largeur pour que ça rentre. (entre 990px et 1000px, c'est généralement bien).

Et encore...
Cette ressource sur les web safe areas recommande plutôt 849px de surface utile pour du 1024. C'est un poil extrémiste mais plutôt parlant.

Pinaise a écrit :
Sinon, "terne" c'est un peu méchant, je préfère "sobre" . Le but c'est que quand on met un photo de bière, ça soit vraiment elle qui attire l'oeil et assure l'esthétisme.

OK, mais ça n'empêche pas d'avoir un layout plus avenant ! Je suis assez d'accord avec le terme "terne" : le côté monochrome doit pas mal jouer, tu pourrais essayer de diversifier un peu ta palette. Les images dans ton header sont timides (et microscopiques), il y a sans doute moyen de valoriser un peu tout ça !

Comme d'hab, des concurrents, c'est encore le mieux pour puiser l'inspiration :
- http://www.2lwinery.com/
- http://redbicyclette.com/
- http://www.folieadeux.com/
- http://www.larochewines.com/
- http://www.de-saint-gall.com/pre-home.asp?redirect=/index.asp
- http://www.turningleaf.com/

(c'est des trucs de vin, mais bon tu vois l'idée...)

Pour revenir sur le fond de l'exercice - créer un page type - perso je conseillerai aussi de jeter un coup d'oeil aux 'SSI' et autre 'includes'. Ceci tu permettras par exemple d'avoir des fichiers importés sur toutes tes pages ... si tu décides de changer un mot dans ta colonne de droite, tu change un seul fichier et cela se répercute sur tout le site.

Autre point. Je rendrai la zone 'active' des liens de ta navigation plus grande (display:block + padding) et je la ferai aussi large / haute que tes onglets. A présent au moindre mouvement un peu brusque de ma souris tes boites disparaissent et c'est frustrant .

Pinaise a écrit :
Includes etc, c'est vrai que ce serait malin, ne serait-ce que pour le copyright "2007-2009 tous droits réservés. " en bas de page qu'il faudrait changer sinon tous les ans sur toutes les pages.

oui et si tu utilises PHP et

2007-<?php echo date('Y'); ?> tous droits réservés.

Tu peux carrément oublier les mises à jour
Modifié par webdesign-fr (31 Aug 2009 - 14:47)

Ouaip, ça y est, j'ai mis 2 include que je vais finallement remplacer par des require_once...
c'est par ici maintenant :page type
j'ai pas encore mis le petit code pour générer l'année tout seul, mais c'est prévu ! j'ai jusque'au 31 décembre pour le faire