3241 sujets
Critiques de vos sites: code et design
Tony Monast a écrit :
En effet, surtout que même l'adresse du profil nous amène sur une page blanche. C'est un site très épuré.
Très épuré
ah ah !Soit que c'est blanc soit que c'est noir.
@Borak : non il n'est pas vide : il y a un !DOCTYPE et valide.
Une feuille blanche c'est pure et beau . . . non ?
C'est mon origine. Et je prend toute ma joie d'une feuille blanche.
++ Modifié par zardoz (03 Dec 2010 - 06:52)
Désolé, j'ai eu un léger problème de connexion lors d'une mie à jour, le problème est réglé.
Le site est disponible à : www.heatherdesign.fr
Voilà, encore désolé du post inutile !
Le site est disponible à : www.heatherdesign.fr
Voilà, encore désolé du post inutile !
Salut,
Comment dire, j'ai un grand écran, qui m'affiche du 1920 x 1080 pixels, et je suis réduit à n'utiliser que la moitié de la fenêtre de mon navigateur, avec un immense espace blanc en bas. Et à cause de ça, je suis contraint soit de ne pas voir les images de tes réalisations en entier, soit de tenter de les aligner précisément dans le cadre autorisé à l'aide de la barre de défilement (et même pas la molette de souris qui n'est pas aussi précise).
Bref ergonomiquement cette limitation n'est pas idéale.
Attention au contraste, le rose et le gris c'est joli, mais le rose SUR gris c'est pas toujours lisible, ce qui est le cas pour ton mail ou ton téléphone (texte trop petit pour être suffisamment contrasté).
Ton <div id="logo"> vide rend son information totalement INaccessible si la feuille de style est désactivée. Une image contenant une information DOIT se trouver dans le code html avec l'attribut alt renseigné.
Les images ne nécessitent pas d'ajouter plusieurs <br /> à leur suite pour gérer l'espace, CSS est là justement pour préciser ce genre de chose. Une marge inférieure peut éviter cela.
Modifié par Mikachu (05 Dec 2010 - 00:27)
Comment dire, j'ai un grand écran, qui m'affiche du 1920 x 1080 pixels, et je suis réduit à n'utiliser que la moitié de la fenêtre de mon navigateur, avec un immense espace blanc en bas. Et à cause de ça, je suis contraint soit de ne pas voir les images de tes réalisations en entier, soit de tenter de les aligner précisément dans le cadre autorisé à l'aide de la barre de défilement (et même pas la molette de souris qui n'est pas aussi précise).
Bref ergonomiquement cette limitation n'est pas idéale.
Attention au contraste, le rose et le gris c'est joli, mais le rose SUR gris c'est pas toujours lisible, ce qui est le cas pour ton mail ou ton téléphone (texte trop petit pour être suffisamment contrasté).
Ton <div id="logo"> vide rend son information totalement INaccessible si la feuille de style est désactivée. Une image contenant une information DOIT se trouver dans le code html avec l'attribut alt renseigné.
Les images ne nécessitent pas d'ajouter plusieurs <br /> à leur suite pour gérer l'espace, CSS est là justement pour préciser ce genre de chose. Une marge inférieure peut éviter cela.
Modifié par Mikachu (05 Dec 2010 - 00:27)
Mikachu a écrit :
Ton <div id="logo"> vide rend son information totalement accessible si la feuille de style est désactivée. Une image contenant une information DOIT se trouver dans le code html avec l'attribut alt renseigné.
Aurais-tu oublié le in- au début du mot ? Car là, ça contredit.
Mikachu a écrit :
Comment dire, j'ai un grand écran, qui m'affiche du 1920 x 1080 pixels, et je suis réduit à n'utiliser que la moitié de la fenêtre de mon navigateur, avec un immense espace blanc en bas. Et à cause de ça, je suis contraint soit de ne pas voir les images de tes réalisations en entier, soit de tenter de les aligner précisément dans le cadre autorisé à l'aide de la barre de défilement (et même pas la molette de souris qui n'est pas aussi précise).
Bref ergonomiquement cette limitation n'est pas idéale.
Moi c'est encore pire : écran 1920*1200, et le bandeau est aux deux tiers de l'écran, par dessus les images :
Bonjour,
Moi j'ai le problème inverse, comme je réduis la fenêtre de mon navigateur, j'ai un viewport réduit. La hauteur de ton header + son positionnement fixe rendent la zone de réel contenu minuscule, ça ne donne vraiment pas envie de rester...
D'un point de vu code, je risque de répéter certains points déjà soulevés par Mikachu, mais c'est pour être sûre que ça rentre.
* Il manque une définition de la langue du document sur html.
* Il manque une meta Content-Language (à moins que ton serveur n'envoie déjà l'information).
* Je suis sûre qu'il est possible de fusionner les 4 scripts JS et de les placer en fin de document, avec celui pour IE.
* D'ailleurs, au sujet d'IE, quel intérêt de lui servir un script html5 alors que tu es en xHTML1.0 ?
* Ton logo n'existe pas pour les robots référenceur, pour les utilisateurs de lecteur d'écran, pour les utilisateurs de navigateur text-only NI pour les utilisateurs qui tombent mal au moment ou ton serveur déconne ou dont la connexion a décidé de résister... Une image porteuse de contenu se place TOUJOURS dans le code HTML, toujours !
* « Bonjour » n’est pas un h1, il ne présente pas non plus d’intérêt à être placé en h1 ; le contenu de ton logo, par contre...
* Il est préférable de donner des noms de class (et d’id) qui évoquent la fonctionnalité de l’élément et non une caractéristique « physique » de celui-ci. Ton class=rose serait plus intéressant, renommé en class=telephone, surtout dans le cas où tu décide de changer la couleur en bleu ^^ ;
* Attention à mailto, c’est le meilleur moyen d’attirer le spam. Un formulaire de contact avec un minimum de sécurité (captcha inversé, par exemple), serait bien plus sûr.
* Dommage que tu ai laissé les alt vides pour tes réalisations (déjà qu’elles ne sont accompagnés d’aucune information:/ ).
* « <br /><br /><br /><br /><br /><br /> » c’est vraiment ignoble...
* Ton menu de bas de pas n’est absolument pas un titre de section de niveau 2...
* La div pied contenu uniquement la div pied-content, l’une des deux est inutile.
Moi j'ai le problème inverse, comme je réduis la fenêtre de mon navigateur, j'ai un viewport réduit. La hauteur de ton header + son positionnement fixe rendent la zone de réel contenu minuscule, ça ne donne vraiment pas envie de rester...
D'un point de vu code, je risque de répéter certains points déjà soulevés par Mikachu, mais c'est pour être sûre que ça rentre.
* Il manque une définition de la langue du document sur html.
* Il manque une meta Content-Language (à moins que ton serveur n'envoie déjà l'information).
* Je suis sûre qu'il est possible de fusionner les 4 scripts JS et de les placer en fin de document, avec celui pour IE.
* D'ailleurs, au sujet d'IE, quel intérêt de lui servir un script html5 alors que tu es en xHTML1.0 ?
* Ton logo n'existe pas pour les robots référenceur, pour les utilisateurs de lecteur d'écran, pour les utilisateurs de navigateur text-only NI pour les utilisateurs qui tombent mal au moment ou ton serveur déconne ou dont la connexion a décidé de résister... Une image porteuse de contenu se place TOUJOURS dans le code HTML, toujours !
* « Bonjour » n’est pas un h1, il ne présente pas non plus d’intérêt à être placé en h1 ; le contenu de ton logo, par contre...
* Il est préférable de donner des noms de class (et d’id) qui évoquent la fonctionnalité de l’élément et non une caractéristique « physique » de celui-ci. Ton class=rose serait plus intéressant, renommé en class=telephone, surtout dans le cas où tu décide de changer la couleur en bleu ^^ ;
* Attention à mailto, c’est le meilleur moyen d’attirer le spam. Un formulaire de contact avec un minimum de sécurité (captcha inversé, par exemple), serait bien plus sûr.
* Dommage que tu ai laissé les alt vides pour tes réalisations (déjà qu’elles ne sont accompagnés d’aucune information:/ ).
* « <br /><br /><br /><br /><br /><br /> » c’est vraiment ignoble...
* Ton menu de bas de pas n’est absolument pas un titre de section de niveau 2...
* La div pied contenu uniquement la div pied-content, l’une des deux est inutile.
Bonjour,
En plus de ce qui a été déjà dit :
Mets un margin-top à ta div presentation au lieu d’utiliser une div decalage.
Ajoute un bottom 0 à ton pied.
Souligne le mot mail pour bien montrer que c’est un lien. Cela le différenciera du numéro de téléphone qui lui n’en est pas un.
Teste en javascript que la hauteur de la fenêtre est au moins deux fois supérieure à ton en-tête et si ce n’est pas le cas, donne a ton en-tête une position absolue.
Pour ceux qui n’ont pas activé le javascript tu peux faire la même chose en plaçant la css entre les balises <noscript>
La balise meta content-type doit toujours être à la première ligne de ton head.
En utilisant le module complémentaire Dust Me Selectors de Firefox, on voit que certains sélecteurs de ta css ne servent à rien.
Modifié par adrien881 (06 Dec 2010 - 11:59)
En plus de ce qui a été déjà dit :
Mets un margin-top à ta div presentation au lieu d’utiliser une div decalage.
Ajoute un bottom 0 à ton pied.
Souligne le mot mail pour bien montrer que c’est un lien. Cela le différenciera du numéro de téléphone qui lui n’en est pas un.
Teste en javascript que la hauteur de la fenêtre est au moins deux fois supérieure à ton en-tête et si ce n’est pas le cas, donne a ton en-tête une position absolue.
Pour ceux qui n’ont pas activé le javascript tu peux faire la même chose en plaçant la css entre les balises <noscript>
La balise meta content-type doit toujours être à la première ligne de ton head.
En utilisant le module complémentaire Dust Me Selectors de Firefox, on voit que certains sélecteurs de ta css ne servent à rien.
Modifié par adrien881 (06 Dec 2010 - 11:59)
Laurie-Anne a écrit :
Peux-tu me montrer la source/raison de cette affirmation ?
Dans le cas où l’information d’encodage n’est pas présente dans l’en-tête http, le navigateur prend celui par défaut (souvent l’iso-8859-1 sur nos configurations). Si en chemin une balise content-type lui apprend que l’encodage est différent, alors il reprend la lecture du document depuis le début.
Florent en parle dans sa première réponse à ce sujet :
http://forum.alsacreations.com/topic-17-35006-1-Balise-meta-http-equivquotContent-Typequot-charset.html
Après on peut la mettre où on veut, mais autant faire au plus simple.