3246 sujets
Critiques de vos sites: code et design
Salut, quelques remarques:
Design/Typographie:
- il manque la favicon.
- le site est "tassé": peut être agrandir le min/max width ?
- je trouve que le background jaune fait assez "sale".
- couleurs du formulaire de contact horribles.
- Padding right à augmenter.
Ergonomie:
- navigation dans le diaporama à revoir, mettre des indications (next/previous/close) et une navigation à la souris sur l'image visualisée. La touche ECHAP pour fermer, et pas "f".
Code:
- scripts js appelés plusieurs fois.
- tous les scripts ne sont pas placés dans le <head>
- il faut essayer de respecter l'ordre d'appel des ressources (CSS puis scripts)
- pourquoi utiliser le JQuery.noConflict() ? Il n'y a pas d'autres framework JS. (à moins que j'ai mal vu...)
Bugs:
- le texte caché s'affiche mal.
Autres:
- Il faut éviter de mettre les adresses e-mail en clair et en toutes lettres. (des bots peuvent les récupérer pour spammer). De plus, quelle est l'utilité de rappeler l'e-mail alors qu'il y a déjà un formulaire de contact ?
Testé sur Firefox 7.
Design/Typographie:
- il manque la favicon.
- le site est "tassé": peut être agrandir le min/max width ?
- je trouve que le background jaune fait assez "sale".
- couleurs du formulaire de contact horribles.
- Padding right à augmenter.
Ergonomie:
- navigation dans le diaporama à revoir, mettre des indications (next/previous/close) et une navigation à la souris sur l'image visualisée. La touche ECHAP pour fermer, et pas "f".
Code:
- scripts js appelés plusieurs fois.
- tous les scripts ne sont pas placés dans le <head>
- il faut essayer de respecter l'ordre d'appel des ressources (CSS puis scripts)
- pourquoi utiliser le JQuery.noConflict() ? Il n'y a pas d'autres framework JS. (à moins que j'ai mal vu...)
Bugs:
- le texte caché s'affiche mal.
Autres:
- Il faut éviter de mettre les adresses e-mail en clair et en toutes lettres. (des bots peuvent les récupérer pour spammer). De plus, quelle est l'utilité de rappeler l'e-mail alors qu'il y a déjà un formulaire de contact ?
Testé sur Firefox 7.
Faut me tutoyer, là tu me fais prendre un coup de vieux 
!
La favicon ne peut être affichée car elle "contient des erreurs."
En ce qui concerne les couleurs, va faire un tour sur http://colorschemedesigner.com/ (ou sur un site qui te permet d'avoir une palette de couleurs harmonieuse.)
Aussi j'ai regardé le script utilisé pour les diapos; normalement tu as directement les flèches de navigation et bouton "fermer".
Vu que le fichier jquery.lightbox n'est pas dans le même répertoire que la page affichée (l'index) il faut changer les répertoires d'images dans le fichier jvs/jquery.lightbox-0.5.js.
En gros si tu as gardé la même arborescence que quand tu as téléchargé le script il faut que tu aies:
Le formulaire de contact est mieux; en revanche quand de mauvais formats sont rentrés, on a les messages d'infos à côté des champs, et on est redirigé vers une page avec message d'erreur. Seule possibilité: revenir en arrière. Ou du moins c'est ce qui est dit
: la redirection se fait sur forms_contact.php et non contact.php
Bon courage ^^
!La favicon ne peut être affichée car elle "contient des erreurs."
En ce qui concerne les couleurs, va faire un tour sur http://colorschemedesigner.com/ (ou sur un site qui te permet d'avoir une palette de couleurs harmonieuse.)
Aussi j'ai regardé le script utilisé pour les diapos; normalement tu as directement les flèches de navigation et bouton "fermer".
Vu que le fichier jquery.lightbox n'est pas dans le même répertoire que la page affichée (l'index) il faut changer les répertoires d'images dans le fichier jvs/jquery.lightbox-0.5.js.
En gros si tu as gardé la même arborescence que quand tu as téléchargé le script il faut que tu aies:
$.fn.lightBox = function(settings) {
// Settings to configure the jQuery lightBox plugin how you like
settings = jQuery.extend({
// Configuration related to overlay
overlayBgColor: '#000',
overlayOpacity: 0.8,
// Configuration related to navigation
fixedNavigation: false,
// Configuration related to images
[b] imageLoading: 'jvs/images/lightbox-ico-loading.gif',
imageBtnPrev: 'jvs/images/lightbox-btn-prev.gif',
imageBtnNext: 'jvs/images/lightbox-btn-next.gif',
imageBtnClose: 'jvs/images/lightbox-btn-close.gif',
imageBlank: 'jvs/images/lightbox-blank.gif',[/b]
// Configuration related to container image box
Le formulaire de contact est mieux; en revanche quand de mauvais formats sont rentrés, on a les messages d'infos à côté des champs, et on est redirigé vers une page avec message d'erreur. Seule possibilité: revenir en arrière. Ou du moins c'est ce qui est dit
: la redirection se fait sur forms_contact.php et non contact.phpBon courage ^^
a écrit :
Faut me tutoyer, là tu me fais prendre un coup de vieux lol !
Ça sera donc "tu" dorénavant.
a écrit :
La favicon ne peut être affichée car elle "contient des erreurs."
Je vais trouver un autre site pour en générer une qui fonctionne. J'ai toujours eu beaucoup de mal à trouver un tel site. C'est pour cela que j'avais plus ou moins laissé tomber.
a écrit :
En ce qui concerne les couleurs...
Merci pour le lien. Je teste et bientôt le site sera resplandissant.
a écrit :
Aussi j'ai regardé le script...
Bon j'ai fait comme tu m'as dit et rien de plus. Les boutons n'apparaissent toujours pas. Argh! J'ai envoyé un message sur le site où j'ai récupéré ce script mais pas de réponse à ce jour. C'est pour cela que j'ai rajouté le petit texte avec l'affichage des lettres qui permettent de naviguer car c'est une option que le concepteur avait prévu dans les paramètres optionnels à passer au script.
Pour terminer, j'ai en effet changé les liens au niveau du formulaire. Je vais donc réintroduire la partie qui manque.
UN GRAND MERCI.
Bon j'y retourne. Toujours preneur de tes conseils et aides.
dans le div#navigation, tu dois supprimer la règle
étant donné que tu as déjà cette image comme background du div parent ( div#centre) et en plus ton image ne se raccorde pas, on voit un décalage.
Pourquoi cette image est elle un png?? je ne vois aucune transparence impliquée ni nécessaire dans ce cas, alors remplace là par une image en Jpeg fond_navigation.jpg, elle se chargera plus vite.
ça ...
utiliser les touches 's'uivante, 'p'récédente, et 'f'ermer pour sortir.
ce n'est pas très ergonomique...
utilise plutôt le soulignement du caractère de raccourci, comme dans les menus des applications.
ton span Le domaine, propriété familiale depuis plus de 400 ans, était exclusivement vouée au cognac jusqu'en 1992. C'est à cette date que Pascal Gonthier, passionné de vin, plante les premiers cépages rouges.
s'affiche un peu en dehors de la fenêtre.. tu aurais la place dans le header à droite pour le mettre de façon permanente, car ce texte a une valeur sémantique forte.
1025px de large, ça fait un peu beaucoup pour ceux qui ont encore des écrans 17" cathodiques. Une norme assez largement acceptée est 960px en largeur et en plus toi tu as de la marge pour étendre ton site verticalement.
tu pourrais assembler ces deux feuilles de styles en une seule...ça te fera un appel de moins au serveur
là tu appelles un CSS pour ta lightBox et tu rajoutes dessous du style associé dans la page.
tu pourrais appeler ton fichier jquery.lightbox-0.5.css en premier et rajouter ton style /* jQuery lightBox plugin - Gallery style */ dans ta feuille de style principale (celle que tu pourrais faire en fusionnant styles/modele11.css et styles/menud.css) que tu appeleras après jquery.lightbox-0.5.css
Y a un souci sur tes survol de liens de menus, il n'y a que la moitié de l'élément de menu qui passe en orange, à moins que ça soit volontaire?
Modifié par lionel_css3 (19 Nov 2011 - 11:57)
background: url("../image/fond_navigation.png") repeat scroll 0 0 transparent;étant donné que tu as déjà cette image comme background du div parent ( div#centre) et en plus ton image ne se raccorde pas, on voit un décalage.
Pourquoi cette image est elle un png?? je ne vois aucune transparence impliquée ni nécessaire dans ce cas, alors remplace là par une image en Jpeg fond_navigation.jpg, elle se chargera plus vite.
ça ...
utiliser les touches 's'uivante, 'p'récédente, et 'f'ermer pour sortir.
ce n'est pas très ergonomique...
utilise plutôt le soulignement du caractère de raccourci, comme dans les menus des applications.
ton span Le domaine, propriété familiale depuis plus de 400 ans, était exclusivement vouée au cognac jusqu'en 1992. C'est à cette date que Pascal Gonthier, passionné de vin, plante les premiers cépages rouges.
s'affiche un peu en dehors de la fenêtre.. tu aurais la place dans le header à droite pour le mettre de façon permanente, car ce texte a une valeur sémantique forte.
1025px de large, ça fait un peu beaucoup pour ceux qui ont encore des écrans 17" cathodiques. Une norme assez largement acceptée est 960px en largeur et en plus toi tu as de la marge pour étendre ton site verticalement.
tu pourrais assembler ces deux feuilles de styles en une seule...ça te fera un appel de moins au serveur
<link rel="stylesheet" type="text/css" href="styles/modele11.css" media="screen" />
<link rel="stylesheet" type="text/css" href="styles/menud.css" media="screen" />là tu appelles un CSS pour ta lightBox et tu rajoutes dessous du style associé dans la page.
tu pourrais appeler ton fichier jquery.lightbox-0.5.css en premier et rajouter ton style /* jQuery lightBox plugin - Gallery style */ dans ta feuille de style principale (celle que tu pourrais faire en fusionnant styles/modele11.css et styles/menud.css) que tu appeleras après jquery.lightbox-0.5.css
<link rel="stylesheet" type="text/css" href="styles/jquery.lightbox-0.5.css" media="screen" />
<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery {
background-color: #008110;
padding: 10px;
width: 520px;
margin-left: auto;
margin-right: auto;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #39e24d;
border-width: 5px;
}
#gallery ul a:hover img {
border: 5px solid #ff7800;
border-width: 5px;
}
#gallery ul a:hover { color: #fff; }
</style>Y a un souci sur tes survol de liens de menus, il n'y a que la moitié de l'élément de menu qui passe en orange, à moins que ça soit volontaire?
Modifié par lionel_css3 (19 Nov 2011 - 11:57)
Bonjour,
Voilà le travail ! et quelques explications.
Bon, j'aimais pas mal l'effet mais j'en trouverai un autre. C'est mieux comme cela quand même.
Incomparable. Plus de 4 mega contre 500K !!
C'est vrai. Mon problème c'est que pour une raison que je ne comprends pas les images suivante, précédente, fermer, présentes dans le script ne s'affiche pas sur mon site. Zed13 m'a aidé mais ça ne fonctionne toujours pas ! Une idée ?
D'accord avec toi mais ça enlève un côté dynamique sympa. Il n'y en a pas tant que cela sur le site... J'hésite encore...
Pas tout compris. Le min-width était à 850px, je l'ai passé à 960px.
Le max-width est à 1260px (80em). Je dois le changer d'après toi ?
J'ai regroupé les deux feuilles de style menud.css et modele11.css.
J'ai réintégré le script css gallery dans le lightbox.css.
Pour ce qui est du survol des lignes du menu, cette barre orange est un effet volontaire. J'aime assez. Que me proposerais-tu d'autres ? J'aime les choses un peu décalées.
En tout cas, merci pour ton aide.
Si tu veux répondre à mes questions je suis preneur.
Cordialement,
Voilà le travail ! et quelques explications.
a écrit :
dans le div#navigation, tu dois supprimer la règle
Bon, j'aimais pas mal l'effet mais j'en trouverai un autre. C'est mieux comme cela quand même.
a écrit :
remplace là par une image en Jpeg fond_navigation.jpg, elle se chargera plus vite.
Incomparable. Plus de 4 mega contre 500K !!
a écrit :
ce n'est pas très ergonomique...
utilise plutôt le soulignement du caractère de raccourci, comme dans les menus des applications.
C'est vrai. Mon problème c'est que pour une raison que je ne comprends pas les images suivante, précédente, fermer, présentes dans le script ne s'affiche pas sur mon site. Zed13 m'a aidé mais ça ne fonctionne toujours pas ! Une idée ?
a écrit :
tu aurais la place dans le header à droite pour le mettre de façon permanente, car ce texte a une valeur sémantique forte.
D'accord avec toi mais ça enlève un côté dynamique sympa. Il n'y en a pas tant que cela sur le site... J'hésite encore...
a écrit :
1025px de large, ça fait un peu beaucoup pour ceux qui ont encore des écrans 17" cathodiques. Une norme assez largement acceptée est 960px en largeur et en plus toi tu as de la marge pour étendre ton site verticalement.
Pas tout compris. Le min-width était à 850px, je l'ai passé à 960px.
Le max-width est à 1260px (80em). Je dois le changer d'après toi ?
J'ai regroupé les deux feuilles de style menud.css et modele11.css.
J'ai réintégré le script css gallery dans le lightbox.css.
Pour ce qui est du survol des lignes du menu, cette barre orange est un effet volontaire. J'aime assez. Que me proposerais-tu d'autres ? J'aime les choses un peu décalées.
En tout cas, merci pour ton aide.
Si tu veux répondre à mes questions je suis preneur.
Cordialement,