Des livres incontournables pour tout maîtriser

  • CSS avancées - vers HTML5 et CSS3
  • HTML5
  • PHP5 avancé
  • Memento MySQL
  • Memento CSS 3
  • WordPress 3 100% pratique
  • Memento HTML5
Auteur
Chuck
#
5 Posts
Bonjour,

Je débute complétement la programmation de site et le web design. j'ai créer un blog sous wordpress pour ma femme dont le template est réalisé par mes soins.
Il reste surement des choses à améliorer, optimiser, et compléter.

Dites moi ce que vous en pensez.


www.ernestobanana.fr
Modifié par Chuck (24 Jan 2012 - 21:50)

^
Olivier C
#
1022 Posts
Bonsoir,

Le clignotement sur les boutons de la navigation provient du fait que les images en position "hover" ne se chargent qu'au passage de la souris. Pour éviter ce désagrément vous pouvez les mettre en "sprites", c'est à dire faire une image avec les deux états du boutons, puis changer la valeur d'un "background-position". Vous pourriez même mettre toutes les images du menu en une seule (mais peut-être que pour un début ce serait compliqué). Cela vous ferait aussi moins de requêtes http. Voir ici.

À la place du bouton "blog" le logo (Ernesto Banana) aurait pu être cliquable. Voilà pour l'ergonomie, mais pour un aspect plus pro j'aurais aussi évité la mention "blog".

Je ne critique pas le design : il faut bien commencer et s'entrainer ! ... Peut-être juste ajouter que c'est ok pour un blog mais attention à l'image renvoyée si c'est pour un site vitrine (connotation un peu trop "amateur").
Modifié par Olivier C (25 Jan 2012 - 00:52)

^
_laurent
#
Valar Morghulis, Bitch.
392 Posts
Bonjour,

Juste quelques remarques rapides:

- le logo doit être cliquable, sans remplacer l'onglet "blog". Il ramène a l'accueil du site (ici l'onglet "blog")

- comme le dit Olivier C pour faire plus pro, préférer "actualités" à "blog"

- il y a un un scroll horizontal et un petit bug de background pour la résolution 1024x768

- un petit effet de survol sur les liens RSS et Twitter (ce sont les seuls manquant à l'appel Smiley ravi )

- tant qu'on est dans le footer pourquoi ne pas placer TOUT le footer en bleu plutot que de revenir en blanc pour FB, Twitter et RSS...

- un dernière petite remarque au niveau de la lisibilité, l'image de fond est assez détaillée et gène un peu la lecture, surtout la lecture du texte en rose... (peut être mettre un fond au différentes partie ou bien éclaircir le fond...)

- En fait il y en a une autre mais plus niveau graphisme, pour le logo le style du texte est sympa mais j'aurais plus vu la banane a coté du texte et pleine de couleur plutôt qu'un peu effacée en fond...


Voila mes remarques rapides (j'ai pas du tout regardé le coté technique) tu en fais ce que tu veux, les gouts et les couleurs hein... En tout cas joli travail Smiley murf

"La simplicité est la sophistication suprême" _Léonard de Vinci

^
Laurie-Anne
#
6526 Posts
Olivier C a écrit :
Pour éviter ce désagrément vous pouvez les mettre en "sprites", c'est à dire faire une image avec les deux états du boutons, puis changer la valeur d'un "background-position".
Étant donné que ce sont des images porteuses de contenu, ceci serait un très mauvais conseil à suivre... Il est préférable de se renseigner sur le préchargement des images.

^
Olivier C
#
1022 Posts
Laurie-Anne a écrit :
Étant donné que ce sont des images porteuses de contenu, ceci serait un très mauvais conseil à suivre... Il est préférable de se renseigner sur le préchargement des images.

La postion "hover" n'indique qu'un changement d'état, pas de contenu. Pour la sémantique il suffit de placer du contenu sensé dans un span avec une instruction css display:none :
<h1><a href="http://exemple.com/"><span>contenu caché par css au yeux de l'utilisateur mais donnant du sens pour google</span></a></h1>

C'est une mauvaise pratique ? Si oui pourquoi ? (je l'utilise).

^
Chuck
#
5 Posts
Merci pour les infos, comme quoi dès fois un œil extérieur fait du bien....

- J'ai modifier les boutons du menu en sprite, ça à l'air de bien fonctionner, j'en ai profité pour modifier le blog en actualités.

- J'ai éclairci le fond pour que le texte ressorte plus.

- Les logos du header et du footer sont cliquables.

- Et j'ai aussi mis du bleu sur tout le footer, ça rend effectivement plus jolie.

- Je vois pour mettre un effet de survol sur les images twitter et RSS dans le footer

- Pour le petit bug et le scroll en résolution 1024 x 768, je n'ai pas encore regardé ça.

- Pour le logo avec la banane en fond, je le préfère comme ça, qu'avec la banane à coté, m'enfin question de gout.

^
supprime108
#
4671 Posts
Chuck a écrit :
Pour le logo avec la banane en fond, je le préfère comme ça, qu'avec la banane à coté, m'enfin question de gout.


C'est plutôt une question de lecture. Un logo doit être lisible facilement, or le tiens est confus.

En plus tu utilises un logo différent en pied de page, ce qui est assez bizarre si tu comptes communiquer sur ta marque.

supprime108

^
Olivier C
#
1022 Posts
jb_gfx a écrit :
C'est plutôt une question de lecture. Un logo doit être lisible facilement, or le tiens est confus.

Je préfère moi aussi le logo en pied de page... et pour unifier le tout je l'aurais encore mis comme favicon à la place de celle existante...

^