[amateur]

Bonjour à tous,

Je viens de créer un nouveau webdesign pour le site de mon unité scoute.
Personnellement je le trouve vraiment pas mal et le côté code est à priori ok, en tout cas aucune erreur de validation.

Maintenant j'aimerais malgré tout avoir vos avis et critiques, que ce soit sur le code, le design,...

Le lien : *** EDITE

Merci à tous
Modifié par pixelb (25 Aug 2011 - 18:21)

Très sympa ton site, claire et agréable. Très bonne intégration de simpleviewer.

Niveau design rien de special à dire: c'est clean

Pour le code, mise à part les div vide au début, pour les nuages ca m'a l'air bon aussi.
Faut juste virer la meta keywords qui sert à rien


Bonne continuation

Bonjour,

Niveau design, si c'était agréable sur iTruc (bien que petit ^^; ), c'est loin d'être le cas sous IE6. Le menu horizontal recouvre une grande partie du contenu de la page la rendant partiellement inaccessible. Une portion du menu vertical est également inaccessible puisque tronqué, il faut éviter de donner des hauteurs fixes aux éléments.

L'utilisation de px pour définir la taille des fontes empêche tout redimensionnement sous IE 6 et 7...

Niveau code :
* La langue du document n'est précisée ni dans html, ni avec la meta Content-Language, ni dans les entêtes HTTP...

* Ta meta description est un peu succincte, mais ça passe.

* La meta keyword est totalement inutile.

* Les scripts JS devraient se trouver en fin de document (déjà signalé pour 4Student).

* Les div vides t'ont déjà été signalés.

* Le titre de la page est un peu trop flou, il est difficile de savoir qu'il s'agit de la 110éme unité scout.

* Les target="_top" sur le menu ne servent à rien...

* "Sections à la 110ème" n'est pas très français.

* Un h3 ne serait-il pas plus approprié que "<div class="title">"...

* Quand je vois ceci :

<p style="text-align: center;">
  <span style="color: rgb(0, 0, 255);">
    <strong>
      <span style="font-size: medium;">
        <a href="http://www.110eme.be/site/pages/photos/fete-d-unite---27-mars-2010.php">
          <span style="font-size: x-large;">
            <img width="52" height="30" alt="" src="http://www.110eme.be/site/media/img/Chapeau%20002.gif" />
            &nbsp;&nbsp;&nbsp;F&ecirc;te d'Unit&eacute; 2010 - MERCI A TOUS ! 
          </span>
          <span class="Apple-style-span" style="font-weight: normal; font-size: small;">
            <strong>
              <span style="font-size: medium;">
                <span style="font-size: x-large;">
                  <img width="52" height="30" alt="" src="http://www.110eme.be/site/media/img/Chapeau%20002.gif" />
                  <br />
                  <span style="font-size: xx-small;">Cliquez ici</span> 
                </span>
              </span>
            </strong>
          </span>
        </a>
      </span>
    </strong>
  </span>
  <strong>
  </strong>
</p>

Je me dis qu'il y a un problème... Rasures moi, dis moi que c'est ton WYSIWYG qui a rajouté toutes ces balises totalement inutiles et que tu as oublié de nettoyer...

* D'après Google Page Speed, il y a moyen de réduite de 40Kb le poids de tes images.

* Il est dommage d'utiliser un tableau pour le formulaire de contact... Rien ne le justifie.

pixelb a écrit :
J'ai résolu sommairement les problèmes concernant ie6. Le site n'est pas beau sous cette version d'ie, mais il est consultable sans souci normalement.

C'est beaucoup mieux, et le site passe très bien.

pixelb a écrit :
J'ai également ajouté un message aux visiteurs les invitant à mettre à jour leur navigateur...

Là part contre c'est pas terrible, si tu tiens absolument à mettre un message inutile (les utilisateurs actuels d'IE6 savent très bien que le navigateur est dépassé, mais ils n'ont aucun moyen de le mettre à jour) oublie la pop-up, place plutôt un message discret en haut de page.

Bonjour pixelb,
dans l'ensemble c'est plutôt pas mal, les couleurs sont bien gérées et le vert choisi est chaleureux, mais il y a quelques problèmes à différents niveaux :

> Premièrement la référence au scoutisme n'est pas assez évidente (l'emblème du footer devrait être repris dans le header).
Les personnages/animaux de BD sont trop petits.

> D'un point de vue conventionnel le bloc d'actu devrait se placer à droite de la colonne centrale et le plus haut possible avec d'avantage de points d'impact visuels, tout ce vert est un peu monotone, penser en terme de contraste visuelle selon le niveau d'importance hiérarchique (le texte en blanc ressortirait d'avantage...).
Sauf effet particulier ou bonne justification, éviter d'avoir 2 teintes de verts (la date est dans un vert plus froid il me semble).
Même chose pour ton bloc "sections à la dixième" qui est l'endroit ou l'on affiche en général un menu secondaire. Les section parrallèles ou dépendante de ce site devrait être accessible directement à partir du header sur la forme qui vous semble la plus appropriée (liste déroulante...).

> Il faudrait aligner le bas du bloc central blanc sur celui de la colonne de gauche.

> Le header à l'air un peu compresser en hauteur, il faudrait aérer un peu l'ensemble (+ d'espace en dessus et en dessous du menu)

> les intitulés du menu manquent un peu de contraste avec leur fond, il faudrait les assombrir un peu le cartouche rectangle arrondi, cela permettrait par ailleurs de les dissocier un peu plus facilement du fond du header.

> Ta colonne de gauche est un peu étroite, l'élargir un peu permettrait d'avoir plus de mots par ligne car la justif est actuellement un peu courte.

> Le parti pris graphique choisi est un peu incertain (référence à la BD pas endroit et pas à d'autres).
Tes H3 de la colonne de gauche (un "bâton BD") est introduit au milieu d'éléments graphique qui ne font pas référence à l'univers de la BD, il faut choisir et garder le cap
D'autre part attention au choix des typos bâtons BD qui dans la plupart des cas ne sont pas très heureuses placées hors contexte ou intrinsèquement moches (la Comic Sans en est le meilleur exemple).

> Tes lignes de texte sont un peu longues, il serait intéressant par exemple de réduire la largeur du bloc principal en l'alignant sur DVD.

> La lueur externe du titre du site contraste avec l'univers BD environnant, c'est incohérent, une simple bordure passerait déjà mieux

> Eviter les retrait en alinéa quand il ne sont pas justifié (voir les titres)

> Les sections xxx.110eme.be devraient toutes se baser sur la même charte graphique.

> Le lien " Fête d'Unité 2010 - MERCI A TOUS ! " ressemble d'avantage à un titre de section qu'à un gros bouton cliquable, le graphisme du lien devrait suggérer instantanément une possibilité d'action (sans que le cliquez ici soit nécessaire).


Voila pour moi
Modifié par Hermann (28 May 2010 - 12:09)