3239 sujets

Critiques de vos sites: code et design

Design : Page de connexion (Formulaire, bouton...)

Bonjour,

J'aimerais des avis sur ma page de connexion (couleurs, contrastes, design, logo, header) :

upload/43679-connexion.png

upload/43679-Sanstitre2.png

Vous pouvez accéder à cette page ici :http://www.web-astronomie.fr

Je sais que ça manque un peu de graphisme.
Merci d'avance pour vos conseils
Modifié par nico44530 (06 Mar 2014 - 22:03)
Salut,

je me suis "amusé" à cliquer sur le formulaire de remind pour le passe et erreur :

Fatal error: Call to undefined method Connexion::recover() in /public_html/login.php on line 36

Sinon le design reste somme toute élégant, simple et clair.

Bonne continuation !
Je mets n'importe quoi dans le mail, je clique il me dit "veuillez remplir tous les champs". Du coup :
1. j'ai déjà rempli le premier
2. je n'ai rien qui me dit que le mail n'est pas d'un format valide.

Donc pour améliorer tout ça, je mettrais en avant le ou les champs mal remplis (un liseret de couleur par exemple) et j'ajouterais un test sur le mail pour savoir si c'est un format d'adresse mail valide Smiley smile

Sinon au niveau design c'est sobre, un peu bootstrap like mais c'est pas dérangeant Smiley smile
C'est corrigé pour le format valide d'email Smiley smile

Ensuite, si tu rempli qu'un seul champ dans le formulaire de connexion, c'est sur qu'il va manquer un champ, vu qu'il faut un email et un mot de passe.

Par exemple, je ne peux pas colorer la bordure d'un input en rouge, parce que j'utilise POO pour la connexion.
Ou si tu as une solution, je ne dit pas non Smiley cligne
J'aime pas trop utiliser ajax pour le formulaire de connexion ou d'inscription.
Si javascript est désactivé, le formulaire ne s'envois pas.

Je sais que la plupart des personnes laissent javascript activé (Pour Facebook par exemple).
Modifié par nico44530 (08 Mar 2014 - 17:52)
Bonsoir,

j'ai rapidement regardé ton code HTML et CSS et j'ai quelques remarques à te faire.

Code HTML :
- Pour les éléments <link> et <script>, tu peux supprimer l'attribut type étant donné que tu fais du HTML5.
- Il serait judicieux de placer les éléments <script> juste avant la balise de fermeture du <body> et ce pour des raisons de performance.
- Les tableaux ne sont pas à utiliser pour faire de la mise en page ; il faut utiliser CSS pour mettre en page les éléments de ton formulaire.
- Tu emploies mal l'élément <label> ; voir ici pour rectifier le tir.

Code CSS :
- Évite de faire un reset CSS en utilisant le sélecteur universel : c'est déconseillé.
- Sur #header, je te conseille de ne pas mettre de hauteur fixe mais plutôt une hauteur minimale (avec la propriété min-height) car si le contenu de ton entête fait plus de 80 pixels de haut, ça va dépasser.
- La propriété z-index ne fonctionne que sur des éléments positionnés. Tu peux donc la retirer sur #header.
- Aussi, je te conseil d'utiliser l'unité relative em pour définir la taille de tes textes (voir ici pour plus d'informations).
Merci pour ces conseils :

- Les balises link, script, label sont corrigés.
- Pour les tableaux, ça ne change pas grand chose, c'est valide sur W3C, même Facebook l'utilise dans la mise en page de ses formulaires. Je sais que c'est pas recommandé.
- Ensuite les éléments <script> sont placés dans l'entête parce que je fais un include de l'entête de la page pour éviter de réécrire le code.
Ou alors, je verrais plus tard pour faire un include de mes scripts à placer avant </body>

Pour le CSS :

- C'est corrigé pour tous les conseils que tu m'a donné sauf pour la police em, je suis habitué à la longueur du pixel.
Sujet clos
Aller à