3246 sujets
Critiques de vos sites: code et design
Bonjour akapando,
Niveau code :
Bon pour le moment pas beaucoups de contenu, donc le code est simple à lire.
Par contre, une chose me "choque", c'est l'usage des ' à la place des " dans ton code, surtout que ce n'est pas le cas dans l'ensemble de la page.
Ceci dit, ça passe la validation mais ça me titille dans mes vieilles habitudes (je précise "vieilles" ne veut pas forcément dire "bonnes").
Niveau accessibilité (t'as vu Vero j'apprends ) penser aux liens d'évitement en haut de page, ton menu et tes news apparaissant en premiers dans la page en vue sans style. (au minimum un lien aller au contenu :
Prévoir des "title" pour tes liens, même pour les images/liens qui contiennent déja un "alt", préciser aussi si possible les liens externes.
Niveau design, je suis pas fan du fond qui me fait papiller mes pauvres yeux fatigués par des années devant l'écran.
Je mettrais un petit padding dans le div du menu pour écarter les liens du bord, idem pour le contenu.
Le mélange de couleurs "fortes" et de lignes droites et angles tranchants donne un côté "aggressif" à ton site, peut-être voir à adoucir l'ensemble avec quelques courbes. pour tes "chapos".
Un petit effet sur les liens du menu serait pas mal également je pense.
Wala c'est tout pour le moment.
Bon courage à toi.
Niveau code :
Bon pour le moment pas beaucoups de contenu, donc le code est simple à lire.
Par contre, une chose me "choque", c'est l'usage des ' à la place des " dans ton code, surtout que ce n'est pas le cas dans l'ensemble de la page.
Ceci dit, ça passe la validation mais ça me titille dans mes vieilles habitudes (je précise "vieilles" ne veut pas forcément dire "bonnes").
Niveau accessibilité (t'as vu Vero j'apprends
) penser aux liens d'évitement en haut de page, ton menu et tes news apparaissant en premiers dans la page en vue sans style. (au minimum un lien aller au contenu : <a href="#central" title="Aller directement au contenu">Aller au contenu</a>Prévoir des "title" pour tes liens, même pour les images/liens qui contiennent déja un "alt", préciser aussi si possible les liens externes.
Niveau design, je suis pas fan du fond qui me fait papiller mes pauvres yeux fatigués par des années devant l'écran.
Je mettrais un petit padding dans le div du menu pour écarter les liens du bord, idem pour le contenu.
Le mélange de couleurs "fortes" et de lignes droites et angles tranchants donne un côté "aggressif" à ton site, peut-être voir à adoucir l'ensemble avec quelques courbes. pour tes "chapos".
Un petit effet sur les liens du menu serait pas mal également je pense.
Wala c'est tout pour le moment.
Bon courage à toi.
Bonjour,
Pour le design, s'il n'y a pas plus de contenu que ça, peut être qu'un centrage vertical pourrait être sympa.
Sinon c'est vrai que le design me parrait un peut simple.
Pour la banniere, domage que le rond bleu en bas soit coupé, ça donne l'impression d'une image qui a été mal implenté dans le site.
D'un point de vue code, il y a un petit probleme avec les images bar_bleue_angle_droit.jpg et bar_jaune_angle_droit.jpg
sous FF l'image se repete d'un pixel a droite. Un simple
bakcground-repeat : no-repeat;
dans les css pourrait regler ce probleme.
Bonne continuation.
Pour le design, s'il n'y a pas plus de contenu que ça, peut être qu'un centrage vertical pourrait être sympa.
Sinon c'est vrai que le design me parrait un peut simple.
Pour la banniere, domage que le rond bleu en bas soit coupé, ça donne l'impression d'une image qui a été mal implenté dans le site.
D'un point de vue code, il y a un petit probleme avec les images bar_bleue_angle_droit.jpg et bar_jaune_angle_droit.jpg
sous FF l'image se repete d'un pixel a droite. Un simple
bakcground-repeat : no-repeat;
dans les css pourrait regler ce probleme.
Bonne continuation.
Bonjour ici,
Je ne reprendrai pas les remarques judicieuses d'AymericJ ou Linki.
_______________________________
AÉRER LES TEXTES
Une chose qui me gène un peu, ce sont les textes (menu et contenus) qui sont collés contre leurs conteneurs. Peut-être faudrait-il laisser quelques bordures extérieures sur les blocs de textes.
Pour le menu : laisser une marge (ou padding) à gauche (et en bas s'il s'agrandit).
Pour le contenu central : laisser une marge autour du texte (ou padding), ne serait-ce que de 5 pixels, pour qu'il ne soit pas collé sur les lignes pointillées du bloc div#central.
Pour le menu droite : laisser une marge à droite (aligner le texte sur " .coinorangeG").
_______________________________
BALISAGE
Même si c'est un contenu test
Comme AymericJ, les apostrophes me font toujours "tilter" quand j'en vois dans le balisage. C'est juste, mais ça pose quelques fois problème ; il faut obligatoirement échapper toutes les appostrophes ensuite...
Et moi aussi, le fond me semble trop "fatiguant" pour les yeux (à la distance d'un bras de l'écran, car si on recule un peu ça va mieux - mais c'est plus dur pour utiliser le clavier
).
_______________________________
ACCESSIBILITÉ ET TOUT ÇA
L'image de la bannière est définie par la feuille de style, donc il n'y a pas de contenu alternatif à l'image, et pas de texte pour les lecteurs d'écrans ou navigateurs textuels. (Il suffit de désactiver les CSS pour avoir une idée du rendu.)
L'image définie par la feuille de style est utile pour la faire varier sur certaines pages, sur une feuille de style alternative, ou dans le cas d'un design fluide. Sinon, pour un design fixe, peut-être que :
BALISAGE
CSS
Navigateur textuel : ils auront le titre du site par le texte du <h1>
Navigateurs graphiques : ils verront, l'image pas de souci - le titre est caché par une indentation négative de 5000px.
Navigateurs graphiques, images désactivées : le texte alternatif prendra la relève.
Lecteurs d'écran : ils devraient pouvoir lire le <h1>.
Le design fait environ 850 pixels de largeur. Les visiteurs qui naviguent en 800*600 auront une barre de "scroll" horizontale. Comme le design du site est fixe, c'est dommage. Le ramener à 800 pixels ou moins serait indiqué.
Je ne reprendrai pas les remarques judicieuses d'AymericJ ou Linki.
_______________________________
AÉRER LES TEXTES
Une chose qui me gène un peu, ce sont les textes (menu et contenus) qui sont collés contre leurs conteneurs. Peut-être faudrait-il laisser quelques bordures extérieures sur les blocs de textes.
Pour le menu : laisser une marge (ou padding) à gauche (et en bas s'il s'agrandit).
Pour le contenu central : laisser une marge autour du texte (ou padding), ne serait-ce que de 5 pixels, pour qu'il ne soit pas collé sur les lignes pointillées du bloc div#central.
Pour le menu droite : laisser une marge à droite (aligner le texte sur " .coinorangeG").
_______________________________
BALISAGE
Même si c'est un contenu test
blablabla...<br />
blablabla...<br />
blablabla...<br />
blablabla...<br />
blablabla...<br />
[#orange]<p>[/#]blablabla...<br />
blablabla...<br />
blablabla...<br />
blablabla...<br />
blablabla...[#orange]</p>[/#]Comme AymericJ, les apostrophes me font toujours "tilter" quand j'en vois dans le balisage. C'est juste, mais ça pose quelques fois problème ; il faut obligatoirement échapper toutes les appostrophes ensuite...
Et moi aussi, le fond me semble trop "fatiguant" pour les yeux (à la distance d'un bras de l'écran, car si on recule un peu ça va mieux - mais c'est plus dur pour utiliser le clavier
)._______________________________
ACCESSIBILITÉ ET TOUT ÇA
L'image de la bannière est définie par la feuille de style, donc il n'y a pas de contenu alternatif à l'image, et pas de texte pour les lecteurs d'écrans ou navigateurs textuels. (Il suffit de désactiver les CSS pour avoir une idée du rendu.)
L'image définie par la feuille de style est utile pour la faire varier sur certaines pages, sur une feuille de style alternative, ou dans le cas d'un design fluide. Sinon, pour un design fixe, peut-être que :
BALISAGE
<div id="bandeau">
<h1>PANDO ET LE MONDE</h1>
<a href="http://www.pandoetlemonde.info" title="">
<img src="http://www.pandoetlemonde.info/images/bandeau.jpg" alt="PANDO ET LE MONDE" />
</a>
</div>
CSS
#bandeau h1 {
text-ident: -5000px;
margin: 0;
}
Navigateur textuel : ils auront le titre du site par le texte du <h1>
Navigateurs graphiques : ils verront, l'image pas de souci - le titre est caché par une indentation négative de 5000px.
Navigateurs graphiques, images désactivées : le texte alternatif prendra la relève.
Lecteurs d'écran : ils devraient pouvoir lire le <h1>.
Le design fait environ 850 pixels de largeur. Les visiteurs qui naviguent en 800*600 auront une barre de "scroll" horizontale. Comme le design du site est fixe, c'est dommage. Le ramener à 800 pixels ou moins serait indiqué.
bonsoir
jai fais quelque modifications...
en fait je me pose des questions, jai un peu du mal à gerer ce design pr y integrer du graphisme (cest un format que jutilise pas vraiment les 2 "menus" sur les cotés).
je me demande si quelque chose de moin simple rendrait mieux, parce que finalement jai pas beaucoup de contenu a mettre
mon site precedent est visible encore ici: http://perso.wanadoo.fr/pandoetlemonde
merci
Modifié par akapando (02 May 2006 - 23:00)
jai fais quelque modifications...
en fait je me pose des questions, jai un peu du mal à gerer ce design pr y integrer du graphisme (cest un format que jutilise pas vraiment les 2 "menus" sur les cotés).
je me demande si quelque chose de moin simple rendrait mieux, parce que finalement jai pas beaucoup de contenu a mettre
mon site precedent est visible encore ici: http://perso.wanadoo.fr/pandoetlemonde
merci
Modifié par akapando (02 May 2006 - 23:00)
Salut,
il me semble qu'il y a une coquille sur cette phrase : "2003 : Je continua ensuite en autodidacte à me former..."
la page en question (http://perso.wanadoo.fr/pandoetlemonde/bio.html[/url])
ne vaudrait-il pas mieux utiliser " je continuais ensuite en autodidacte..."
Modifié par fredmac (02 May 2006 - 23:35)
il me semble qu'il y a une coquille sur cette phrase : "2003 : Je continua ensuite en autodidacte à me former..."
la page en question (http://perso.wanadoo.fr/pandoetlemonde/bio.html[/url])
ne vaudrait-il pas mieux utiliser " je continuais ensuite en autodidacte..."
Modifié par fredmac (02 May 2006 - 23:35)
Coucou,
Avis strictement personnel, et bien que je n'ai regardé que (et rapidement) l'apparence, je préfère l'ancienne version à la nouvelle.
(Je ne dis rien pour le moment, mais je sais que si je devais, je commencerais par te conseiller d'espacer légèrement le contenu des bord du cadre avec une marge ou un padding.)
EDIT --
Styupîde faôute.
Modifié par
(03 May 2006 - 00:23)
Avis strictement personnel, et bien que je n'ai regardé que (et rapidement) l'apparence, je préfère l'ancienne version à la nouvelle.
(Je ne dis rien pour le moment, mais je sais que si je devais, je commencerais par te conseiller d'espacer légèrement le contenu des bord du cadre avec une marge ou un padding.)
EDIT --
Styupîde faôute.
Modifié par
(03 May 2006 - 00:23)bonjour
jai bossé un peu le design la nuit derniere...
si vous pouvez me dire ce que vous en pensez , meme si tout n'est pas encore optimisé mais bon je suis pas trop mecontente de moi sur ce coup là
http://www.pandoetlemonde.info/site2006/
:D
jai bossé un peu le design la nuit derniere...
si vous pouvez me dire ce que vous en pensez , meme si tout n'est pas encore optimisé mais bon je suis pas trop mecontente de moi sur ce coup là
http://www.pandoetlemonde.info/site2006/
:D
salut,
En visitant ton site j'ai eu le sentiment que l'outils "Outline Current Element" de l'extension webdev était activée
Pour ce qui est du design... ça n'est pas ma tasse de thé ; je ne crois pas que l'on puisse faire un bon design sans avoir une idée précise du résultat que l'on veut obtenir.
Voilu
En visitant ton site j'ai eu le sentiment que l'outils "Outline Current Element" de l'extension webdev était activée
Pour ce qui est du design... ça n'est pas ma tasse de thé ; je ne crois pas que l'on puisse faire un bon design sans avoir une idée précise du résultat que l'on veut obtenir.
Voilu
La version qui me semble la plus "abouti" du point de vue du design me semble être celle-ci http://www.pandoetlemonde.info
les autres? un avis?
http://www.pandoetlemonde.info/site2006/index.php
jai verifier quelques criteres d'accessibilité.. mais si des pros pouvaient regarder et me dire ce que je peux faire ca aiderait
Modifié par akapando (09 May 2006 - 15:45)
http://www.pandoetlemonde.info/site2006/index.php
jai verifier quelques criteres d'accessibilité.. mais si des pros pouvaient regarder et me dire ce que je peux faire ca aiderait
Modifié par akapando (09 May 2006 - 15:45)
akapando a écrit :
personne ne veut maider?
L'une des choses qui me semble importante, c'est l'expression. Tes textes sont truffés de fautes d'orthographes et de conjugaison. Commence déjà par cela.
Ensuite, tu te prétends graphiste et webdesigner... à la vue de ton site cela est difficile à croire. Pour ce qui est du design, pose toi la question de ce que tu souhaites faire passer et couche le par écrit ; cela te fera une base à laquelle tu pourras te référer en permanence. Pour ce qui est de l'inspiration strictement graphique ce ne sont pas les sites de référence qui manquent.
Par exemple http://cssmania.com
Pour ce qui est du graphisme, il s'agit avant tout de culture graphique... et cela ne se fait pas en un jour. C'est un long travail de digestion... Alors courage
Modifié par fredmac (10 May 2006 - 17:18)
akapando a écrit :
cest nul a ce point???
jai peut etre oublier de dire que jetais relativement debutante, alors bon vous mavez demoraliser un peu là quand meme...
Notre but n'était pas celui-ci, mais il est intéressant de savoir se situer par rapport aux autres (collègues, confrères...) surtout si il s'agit de prestations que l'on veut vendre.
"Le problème" de la réalisation web réside dans l'approche aisée du html. Faire un peu de texte, quelques images, coder et mettre le tout sur le web, ne fait pas de vous un webmestre.
Mais pour te rassurer, je t'avoue que je ne faisais pas mieux à mes débuts...
Continue de travailler encore et encore, et tu parviendras probablement à un résultat plus satisfaisant. A titre indicatif, j'en suis à la cinquième version de mon site...
Bonne continuation.
Modifié par fredmac (10 May 2006 - 22:18)
Bonjour,
Je sais que c'est pas évident de faire un site web, et y parvenir donne une grande satisfaction. Qui très vite laisse passe à de la lassitude puis du regret, et finalement on recommence 3 mois plus tard (quand c'est pas la semaine suivante...).
J'aurai du mal à te conseiller pour le moment, et si je ne le fais ce sera uniquement au niveau graphique, car techniquement j'en connais pas encore assez pour ca. Je n'ai donc pas regardé la structure de ton code.
Au niveau graphique, pour le moment, il n'y a pas ce qu'on appelle une "charte", c'est à dire un dénominateur commun qui donne une image et une ambiance à tout support de communications déclinés. La en l'occurence le site internet.
Quand j'ouvre ce site, ou il n'ya pour le moment qu'une page, sans liens actifs, je ne sais pas de quoi ca peut bien parler... "Pando et le monde". Déja Pando je connais pas, et le monde, oui mais le monde de quoi de qui pour quoi ? L'image utilisée en bannière ne m'aide pas à en avoir une idée.
Je vais donc voir le contenu 'très léger pour le moment', sans texte rédigé, quelques informations disposées à la manière d'un formulaire de la sécurité sociale.
Le site est cerné par un filet rouge, qui lui même renferme un cadre noir qui n'est pas régulier (étant graphiste cela me choque).
Je discerne un début de structure : les titres principaux sont en orange, et il y'a des titres secondaires en bleu (tiré des 16 plus primaires couleurs de la gamme EGA (mode d'affichage de couleur totalement obsolète aujourd'hui), et les textes en noir.
Ah tiens, un lien dans le texte, qui est de la même couleur que les sous-titres et un peu moins gras en terme de typo...
Bref comme constat, il n'y a pas de parti pris graphique très fort, ni une ambiance ou un univers de dépeint, et je pense que c'est par la qu'il faut commencer ! Quand on parle de webdesign, il est certe bien de connaitre au maximum les codes permettant d'afficher un site comme bon nous semble, mais il faut avant tout commencer par envisager son site.
Tu semble déja avoir une structure de rubriques, ce n'est donc plus à faire. Il faut ensuite en connaitre le contenu : Si tu peux déja sans forcément rédiger tout, savoir ce que tu vas dire en gros dans chaque page, choisir un style de rédactionnel (pourquoi pas comme un formulaire de sécu, mais bon ca va être relativement restrictif). Une fois que c'est fait, il te faudrait maintenant ouvrir photoshop, faire valser les aéros, lassos et autres formes vectorielles, en ajoutant quelques typos (que tu referas pour la plupart en CSS ensuite, mais bon il faut les placer quand même un minimum pour voir le look général), et de créer ainsi la propre charte de ton site ! Qui doit dépeindre ton univers et une ambiance dans laquelle tu te reconnais.
Une fois que sera fait il sera temps l'intégrer à un code html respectant la syntaxe et la mise en forme voulue par les standards. Et la il sera en effet bon d'aller dans un premier temps voir le forum "CSS et mise en forme" pour compléter les données qui te manquent pour intégrer ton photoshop dans ton html+css, et ensuite il sera envisageable de revenir ici, et c'est alors avec grand plaisir que je pourrais te faire des critiques constructives concernant ton site.
Voilà, je suis pas très paternaliste, alors j'espère que le ton employé ne te choquera pas, mais je pense que tu as encore tout à faire, et c'est bien la ce qui est finalement intéressant ! Sinon autant aller se coucher en attendant des temps meilleurs.
Bon courage et pardon pour le pavé
Je sais que c'est pas évident de faire un site web, et y parvenir donne une grande satisfaction. Qui très vite laisse passe à de la lassitude puis du regret, et finalement on recommence 3 mois plus tard (quand c'est pas la semaine suivante...).
J'aurai du mal à te conseiller pour le moment, et si je ne le fais ce sera uniquement au niveau graphique, car techniquement j'en connais pas encore assez pour ca. Je n'ai donc pas regardé la structure de ton code.
Au niveau graphique, pour le moment, il n'y a pas ce qu'on appelle une "charte", c'est à dire un dénominateur commun qui donne une image et une ambiance à tout support de communications déclinés. La en l'occurence le site internet.
Quand j'ouvre ce site, ou il n'ya pour le moment qu'une page, sans liens actifs, je ne sais pas de quoi ca peut bien parler... "Pando et le monde". Déja Pando je connais pas, et le monde, oui mais le monde de quoi de qui pour quoi ? L'image utilisée en bannière ne m'aide pas à en avoir une idée.
Je vais donc voir le contenu 'très léger pour le moment', sans texte rédigé, quelques informations disposées à la manière d'un formulaire de la sécurité sociale.
Le site est cerné par un filet rouge, qui lui même renferme un cadre noir qui n'est pas régulier (étant graphiste cela me choque).
Je discerne un début de structure : les titres principaux sont en orange, et il y'a des titres secondaires en bleu (tiré des 16 plus primaires couleurs de la gamme EGA (mode d'affichage de couleur totalement obsolète aujourd'hui), et les textes en noir.
Ah tiens, un lien dans le texte, qui est de la même couleur que les sous-titres et un peu moins gras en terme de typo...
Bref comme constat, il n'y a pas de parti pris graphique très fort, ni une ambiance ou un univers de dépeint, et je pense que c'est par la qu'il faut commencer ! Quand on parle de webdesign, il est certe bien de connaitre au maximum les codes permettant d'afficher un site comme bon nous semble, mais il faut avant tout commencer par envisager son site.
Tu semble déja avoir une structure de rubriques, ce n'est donc plus à faire. Il faut ensuite en connaitre le contenu : Si tu peux déja sans forcément rédiger tout, savoir ce que tu vas dire en gros dans chaque page, choisir un style de rédactionnel (pourquoi pas comme un formulaire de sécu, mais bon ca va être relativement restrictif). Une fois que c'est fait, il te faudrait maintenant ouvrir photoshop, faire valser les aéros, lassos et autres formes vectorielles, en ajoutant quelques typos (que tu referas pour la plupart en CSS ensuite, mais bon il faut les placer quand même un minimum pour voir le look général), et de créer ainsi la propre charte de ton site ! Qui doit dépeindre ton univers et une ambiance dans laquelle tu te reconnais.
Une fois que sera fait il sera temps l'intégrer à un code html respectant la syntaxe et la mise en forme voulue par les standards. Et la il sera en effet bon d'aller dans un premier temps voir le forum "CSS et mise en forme" pour compléter les données qui te manquent pour intégrer ton photoshop dans ton html+css, et ensuite il sera envisageable de revenir ici, et c'est alors avec grand plaisir que je pourrais te faire des critiques constructives concernant ton site.
Voilà, je suis pas très paternaliste, alors j'espère que le ton employé ne te choquera pas, mais je pense que tu as encore tout à faire, et c'est bien la ce qui est finalement intéressant ! Sinon autant aller se coucher en attendant des temps meilleurs.
Bon courage et pardon pour le pavé