3241 sujets

Critiques de vos sites: code et design

[Amateur] Rueil Athletic Club - Basket

Bonjour,

Je travaille actuellement au développement du site internet du club de basket de ma ville (Rueil-Malmaison, 92500).
Après avoir pas mal lu sur différents sites d'information dont Alsacréations, nous sommes parti sur un développement en HTML5 et CSS3.
Pas mal de choses on déjà été réalisées mais nous rencontrons des problèmes avec IE (normal me direz-vous) et surtout des problèmes de validation ! nous en avons déjà corrigé beaucoup mais il en subsiste quelques-uns et qui me posent quelques problèmes.
En règle général lorsque j'essaie de corriger, cela casse quelque chose ailleurs !

J'en ai fini avec mes explications et comme souvent les faits valent mieux qu'un discours, voici l'URL, alors allez-y, n'hésitez pas, je suis ouvert à toutes les remarques qui me permettront d'avancer.

http://racbakset.free.fr

Pour info, le site est fait avec du PHP, JavaScript (un peu d'Ajax) et une BDD MySQL.

Benoit
Bonjour,

Alors comme annoncé, sous IE6, c'est la catastrophe (et non ça n'as rien de normal, bien que je comprenne que pour un débutant, ce n'est pas forcément facile de gérer IE6) et c'est certainement du aux erreurs de code HTML.

En ce qui concerne le choix de l'HTML5, pourquoi pas, mais ce n'est pas encore un standard finalisé, j'espère que cela a bien été pris en considération. De plus, je ne vois pas vraiment d'utilisation des éléments spécifiques d'HTML5 dans le code Smiley ohwell

Revue du code en détail :
* Il n'y a pas de doctype, ce qui cause de nombreuses erreurs de code. En HTML5, le doctype est simplifié, mais il reste obligatoire. L'absence de doctype est ce qui cause la majorité des problèmes de compatibilité d'IE6 et 7 (8 ?).

* La langue du document n'est pas spécifiée, ni dans la balise <html>, ni via la meta Content-Language ; les deux doivent être renseigné (sauf si ton serveur renvoit l'information, auquel cas, la meta n'est pas nécessaire).

* Il manque une meta description, qui fourni aux moteurs de recherche une description de la page un peu plus sexy que celle part défaut ; cela peut faciliter le clic d'un visiteur potentiel indécis.

* L'attribut alt est obligatoire sur les images, surtout quand l'image est le support d'un lien. Sans alt, si l'image ne peut être affichée (problème de serveur, problème de connexion) ou vue (images bloquées, lecteur d'écran), il n'y a plus de lien.

* Ton menu déroulant ne fontionne pas avec IE6 (qui ne gère :hover que sur les liens), il faut utiliser JavaScript et non CSS pour gérer les comportements déroulants.

* Il existe mieux que <br> (codé en xHTML, et non HTML, d'ailleurs) pour positionner les éléments : les marges et les padding notamment.

* Le tableau de présentation n'est absolument pas approprié.

* Les styles en ligne, qui se répètent, alors qu'il y a une feuille de style, c'est à revoir.

En bref, il y a de l'idée, mais il faut plus de rigueur dans le code, revoir les bases serait peut-être utile.

Pour tes problèmes de validation, si tu rencontre des problèmes, n'hésite pas à créer un sujet dans la section "HTML".

Bonne continuation.
Laurie-Anne a écrit :
Bonjour,

Alors comme annoncé, sous IE6, c'est la catastrophe (et non ça n'as rien de normal, bien que je comprenne que pour un débutant, ce n'est pas forcément facile de gérer IE6) et c'est certainement du aux erreurs de code HTML.


J'ai du mal m'exprimer, lorsque je dis normal, c'est simplement pour dire que IE6 nécessite la mise en place de "correctifs" pour avoir un rendu similaire aux autres navigateurs et que pour l'instant, ces "correctifs" n'étant pas mis en place, il est normal que le rendu ne soit pas bon.

Laurie-Anne a écrit :

* Il n'y a pas de doctype, ce qui cause de nombreuses erreurs de code. En HTML5, le doctype est simplifié, mais il reste obligatoire. L'absence de doctype est ce qui cause la majorité des problèmes de compatibilité d'IE6 et 7 (8 ?).


Lorsque j'ai mis un doctype pour html5 (<!DOCTYPE html>), la mise en page de mon menu a disjoncté ! je l'ai donc supprimé le temps de trouver l'origine du problème et de corriger un grand nombre d'autres bugs.

Laurie-Anne a écrit :

* La langue du document n'est pas spécifiée, ni dans la balise <html>, ni via la meta Content-Language ; les deux doivent être renseigné (sauf si ton serveur renvoit l'information, auquel cas, la meta n'est pas nécessaire).

* Il manque une meta description, qui fourni aux moteurs de recherche une description de la page un peu plus sexy que celle part défaut ; cela peut faciliter le clic d'un visiteur potentiel indécis.

* L'attribut alt est obligatoire sur les images, surtout quand l'image est le support d'un lien. Sans alt, si l'image ne peut être affichée (problème de serveur, problème de connexion) ou vue (images bloquées, lecteur d'écran), il n'y a plus de lien.


Ok, merci, je vais corriger

Laurie-Anne a écrit :

* Ton menu déroulant ne fontionne pas avec IE6 (qui ne gère :hover que sur les liens), il faut utiliser JavaScript et non CSS pour gérer les comportements déroulants.


Pour l'instant, IE6 n'est pas supporté.

Laurie-Anne a écrit :

* Il existe mieux que <br> (codé en xHTML, et non HTML, d'ailleurs) pour positionner les éléments : les marges et les padding notamment.


Merci ! je n'y avais jamais pensé mais c'est vrai que ce serait bien mieux !

Laurie-Anne a écrit :

* Le tableau de présentation n'est absolument pas approprié.


De quel tableau parles-tu ? celui dans les petits modules à droite (partenaires et gazettes) ? J'ai bien essayé d'avoir le même rendu sans utiliser de tableau mais je n'ai pas réussi par exemple à aligner la date de la gazette sur le milieu de l'image en tête de ligne. La date était toujours positionnée plus bas.

Laurie-Anne a écrit :

* Les styles en ligne, qui se répètent, alors qu'il y a une feuille de style, c'est à revoir.


Des oublis de tests, ils vont disparaitre dans le CSS.

Laurie-Anne a écrit :

En bref, il y a de l'idée, mais il faut plus de rigueur dans le code, revoir les bases serait peut-être utile.

Pour tes problèmes de validation, si tu rencontre des problèmes, n'hésite pas à créer un sujet dans la section "HTML".

Bonne continuation.


Ok, je posterais dans la section HTML pour les problèmes de validation.

Merci pour toutes les remarques, je corrigerais au plus vite.
Technologix a écrit :
Je ne sais pas, mais le site semble être down chez moi...


Je n'ai aucun problème, quel navigateur utilises-tu ?
Administrateur
RACBasket a écrit :
Lorsque j'ai mis un doctype pour html5 (<!DOCTYPE html>), la mise en page de mon menu a disjoncté ! je l'ai donc supprimé le temps de trouver l'origine du problème et de corriger un grand nombre d'autres bugs.

Houlà, surtout pas, malheureux !

Il faut un doctype. Quel que soit la raison, quel que soit l'effet produit, quel que soit le leurre qui te fait croire que c'est mieux sans, il faut un doctype !

Tout simplement parce que sans doctype, Internet Explorer dimensionne tous les éléments complètement différemment de tous les autres navigateurs du monde.
C'est tout simplement impossible de faire un site aujourd'hui sans doctype.
Pas de soucis, je vais mettre un doctype, je l'ai supprimé juste "temporairement" pour corriger les autres bugs avant d'en créer de nouveaux.
Modifié par RACBasket (16 Jul 2010 - 15:46)
RACBasket a écrit :
Pas de soucis, je vais mettre un doctype, je l'ai supprimé juste "temporairement" pour corriger les autres bugs avant d'en créer de nouveaux.
Dans ce cas, je t'invite à corriger les bugs de ton site et à la re-soumettre à la critique quand il sera finalisé (dans le même sujet, merci d'avance).
Le doctype est ajouté et quelques corrections ont été apportées mais mon menu ne ressemble plus à rien et c'est à n'y rien comprendre, si j'enlève le doctype (et donc qu'un doctype est appliqué par défaut par FF) tout va bien...
Enfin, après plusieurs essais, tout semble rentrer dans l'ordre avec mon menu.

Donc le code HTML5 est valide (http://validator.w3.org/check?uri=http%3A%2F%2Fracbakset.free.fr%2F)

Et coté CSS3 c'est presque parfait (http://jigsaw.w3.org/css-validator/validator?uri=racbakset.free.fr&profile=css3&usermedium=all&warning=1&#9001;=fr) avec simplement des problèmes pour les déclarations spécifiques aux différents interpréteurs (?)

Donc maintenant, n'hésitez pas à me faire part de vos remarques concernant le design et l'organisation du site.

URL : http://racbakset.free.fr
Bonjour,

- Juste très rapidement, tu as un problème d'encodage de caractères sur tes galeries de photos (exemple).
- Je trouve que les liens contenus dans tes sous-menus ne sont pas suffisamment espacés avec la bordure de leur conteneur.
- Je ne comprend pas l'utilité d'avoir un sous-menu déroulant avec chaque sponsor si c'est pour qu'ils pointent sur la même page. Autant mettre juste un onglet de menu "sponsors" et ne pas faire de sous-menu, non ?
- Tu utilise des styles en ligne dans ton petit module latéral (qui affiche un partenaire au hasard), c'est dommage.
- Pareil pour l'autre module latéral avec la gazette en pdf. D'ailleurs je ne pense pas que le contenu de ce module justifie l'utilisation de tableaux html (stylés en ligne en plus).

Pour finir, je trouve que c'est dommage de partir sur du html5 et ne pas utiliser les nouvelles balises (<nav>, <article>, <header>, <figure>, etc.). Je n'en vois même absolument pas l'intérêt... à part avoir un joli doctype Smiley lol Smiley sweatdrop
audrasjb a écrit :
- Juste très rapidement, tu as un problème d'encodage de caractères sur tes galeries de photos (exemple).

Merci, je vais corriger, nous sommes plusieurs à travailler au développement et parfois l'un ou l'autre utilise du code pas toujours très juste, c'est une coquille restante Smiley decu

audrasjb a écrit :
- Je trouve que les liens contenus dans tes sous-menus ne sont pas suffisamment espacés avec la bordure de leur conteneur.

Je vais faire un essai avec un padding un peu plus élevé mais je ne voudrais pas non plus que les sous-menu prennent trop d'importance par rapport aux menus.

audrasjb a écrit :
- Je ne comprend pas l'utilité d'avoir un sous-menu déroulant avec chaque sponsor si c'est pour qu'ils pointent sur la même page. Autant mettre juste un onglet de menu "sponsors" et ne pas faire de sous-menu, non ?

C'est une question de visibilité, nous aurions simplement pu créer un menu Partenaires avec un lien vers la page des partenaires mais souvent personne ne clic sur ces liens. Ici, un simple survol (et plus si affinité) permet de connaitre les partenaires principaux et ainsi de leurs offrir une plus grande visibilité sans contrainte pour l'utilisateur.

audrasjb a écrit :
- Tu utilise des styles en ligne dans ton petit module latéral (qui affiche un partenaire au hasard), c'est dommage.
- Pareil pour l'autre module latéral avec la gazette en pdf. D'ailleurs je ne pense pas que le contenu de ce module justifie l'utilisation de tableaux html (stylés en ligne en plus).

Les styles sont mis directement dans le code au moment du développement (à cause du développement à plusieurs), ils sont ensuite intégrés au CSS mais ceux-ci n'ont pas encore été retirés du code.
Pour l'utilisation de tableaux html, je n'ai pour l'instant pas trouvé de solution satisfaisante pour présenter une image et un texte cote à cote sans avoir le texte qui s'aligne plus bas que l'image.
Mais la suppression du tableau est à l'ordre du jour.

audrasjb a écrit :
Pour finir, je trouve que c'est dommage de partir sur du html5 et ne pas utiliser les nouvelles balises (<nav>, <article>, <header>, <figure>, etc.). Je n'en vois même absolument pas l'intérêt... à part avoir un joli doctype Smiley lol Smiley sweatdrop

Pour l'instant aucun intérêt je suis d'accord, mais dans l'avenir qui sait et je ne vois pas de contre-indication à partir sur du html5 sans utiliser les nouvelles balises (s'il en existe, je suis preneur).
Et si nous travaillons sur un doctype HTML 4.01 et que dans quelques temps, nous voulons utiliser <nav>, <article> ou autre, je ne voudrais pas avoir à revoir mon code à cause d'une compatibilité imparfaitement assurée entre HTML5 et HTML 4.01.

Merci pour ces remarques critiques qui nous permettrons d'améliorer le code et la présentation du site. Nous travaillons de façon bénévole et nous n'avons par forcement le temps de corriger rapidement, mais nous prenons toutes les critiques constructives avec plaisir.
Modifié par RACBasket (04 Aug 2010 - 16:05)
Re Smiley smile

a écrit :
Et si nous travaillons sur un doctype HTML 4.01 et que dans quelques temps, nous voulons utiliser <nav>, <article> ou autre, je ne voudrais pas avoir à revoir mon code à cause d'une compatibilité imparfaitement assurée entre HTML5 et HTML 4.01.


Du coup, ça revient strictement au même, et je ne vois pas vraiment a quoi pourraient ressembler d'éventuelles "compatibilités imparfaitement assurées entre HTML5 et HTML 4.01"... enfin bref, comme tu veux Smiley smile
En gros la seule différence c'est que t'auras pas à écrire le doctype et que tes attributs sont écrits sans guillemets (ce qui pose du coup le problème de la retrocompatibilité du code en cas de marche arrière Smiley cligne )

Mais c'est clair que cette pratique est valide, pas de souci, c'est juste que j'ai exprimé ma petite frustration de ne pas voir autre chose qu'un doctype sur un site qui annonçait utiliser du html5 Smiley ravi Smiley langue
Modifié par audrasjb (04 Aug 2010 - 16:16)
Sujet clos
Aller à