Cascading Style Summer Refresh 2010
Nico's Dreams par Nico3333fr
Voir en ligne http://www.nicolas-hoffmann.net/
Après refresh
Note obtenue : 3.720/10
Voir en ligne http://www.nicolas-hoffmann.net/
Note obtenue : 3.720/10
Les commentaires sont clos.
Ne vaudrait-il pas mieux monter le blanc en neige avec style que mettre le jaune en div avec classe ?
(Joséphine ange gardien)
Commentaires
Si vous utilisez un skin différent de celui par défaut, utilisez le skin ND Egypt, c'est le redesign officiel.
La nouvelle mise en page me laisse perplexe.
Peut être que c'est le thème de l'Egypte qui ne passe pas (aucun rapport entre le thème et ton domaine de compétences).
Pierre
@PierreA : L'auteur aime bien l'Egypte... tout simplement. :)
Petite précision : pensez à redimensionner la fenêtre.
Techniquement, pas grand chose à redire. Par contre, j'approuve, la mise en page me laisse perplexe aussi. Après, les goûts et les couleurs ... Mais là, c'est vraiment trop gros.
Je ne comprend, ni n'apprécie l'univers graphique...
Beaucoup trop de perte d'information en masquant les images d'arrière plan...
Hiérarchie des titres non respecté et accessibilité générale un peu bancale. Je note par contre l'effort d'utilisation d'html5 (mais pas totalement, par exemple les type="text/css" devraient disparaître).
Ce n'est donc globalement pas à mon goût mais peut-être que ça plaira plus à d'autre!
Bonne chance!
@ClementRoy : tu peux étayer pour la hiérarchie des titres et l'accessibilité ?
beurk
Ceci n'est pas un commentaire constructif (Magritt)
Le design me laisse perplexe aussi mais il faut reconnaître qu'il est travaillé.
Qui plus est le reste est très bien aussi, le coût de la fenêtre qui se redimensionne aussi, c'est donc un travail correct dans l'ensemble pour moi, bravo et bonne continuation!
Tom
>Gili : MagrittE :)
Moi aussi, je n'aprécie vraiment pas ce nouveau design Nico3333fr. Pourtant, il faut bien souligner la qualité de ton travail, de ton site, de ton code, mais ce design ne passe vraiment pas.. Je suis désolé. C'est surchargé, c'est kitsh, c'est surfait. Je regrette l'ancien (héhé, on peut le remettre, c'est tout de suite mieux). Par contre, au niveau du code, c'est vraiment chouette, presque un sans faute - c'est un peu paradoxal ce que tu nous propose :)
Je reviendrais faire un commentaire plus long sur le code ;)
@ClementRoy : je ne comprends pas non plus ta critique sur l'accessibilité et la hiérarchie des titres... ?
J'avoue ne pas avoir été très explicite. Donc détaillons un peu!
En l’occurrence ici, ce qui aurait du être le h1 dans la page c'est : "Nico's Dreams" qui est en image de fond ici (pas bien, car riche de sens, donc sémantiquement riche, donc en html ;-) )
Ensuite il est bon (quoique certains avis divergent là dessus..) de nommer chaque "bloc" de son site, par exemple une <h2>Navigation principale</h2> au dessus du menu de navigation principal, même si ce titre est caché via le CSS (et pas en display:none svp :p mais en le sortant de l'affichage, chercher sur le web, vous trouverez ;-) (1)* )
Le mieux pour tester tout ça est de désactiver la feuille de style CSS et voir si toute les parties sont bien nommées, qu'un contenu trouve alors toujours son intitulé ;-)
Ensuite l'autre remarque c'est la perte d'informations si on cache les images de fond (la bannière contenant le titre du site par exemple, ce qui est très gênant).
De plus, et ça je l'ai dis à peu près à tout le monde ici, n'oubliez pas de mettre les width/height sur les images, ils sont importants pour un bon chargement de la page (car la place est occupée avant même que l'image soit chargée) et utiles pour les lecteur d'écran des mal voyants qui utilisent des outils de zoom.
Et j'ai l'impression qu'il y a de nombreux span inutiles (notamment dans des balises titres, et dans les ul li a, mais peut-être que je me trompe et il ont un style appliqué, mais je n'ai pas vu!)
Je parlai d'accessibilité bancale, car il y a la présence d'accesskey, qui en réalité ne sont pas si utiles que ça... Les mal voyants naviguent très vite à la tabulation et préfèrent des titres explicites, title explicites et alt utiles sur les images que des raccourcies claviers qui ne sont pas commun à tous les sites...
Sinon beaucoup de meta, link inutiles dans le head ;-)
Mais sinon c'est pas mal hein! C'est juste que je pourrais pousser mon recettage à des niveaux de standards très élevés et que je trouve toujours matières à redire, dans l'optique de perfectionnement bien entendu, sur un code source :p
(1)* : En effet, un display none n'affichera pas le contenu même pour un lecteur d'écran utilisé par les mal voyants, alors que d'autre solution sont possible (left:-9999px)
J'aime bien le thème Egypte, ça rappelle un peu Rick Dangerous et les conquêtes napoléoniennes.
Le zappeur de styles et ses nombreux choix m'ont bien plu,
@ClementRoy : ok pour le Nico's Dreams, mais comme il est en title de page... je me pose la question de l'utilité de le répéter dans le H1 ?
Quant aux titres avant chaque section, j'ai pris le parti de ne pas en mettre : mon site ne compte qu'une zone de navigation : mon bandeau. Ce dernier étant placé en tête de code, il est donc accessible extrêmement rapidement à la tabulation.
Pour le width/height de ces images (car toutes les galeries de photos en ont), il n'y a que les images de la page d'accueil qui ne les ont pas. Ce point rejoint les span que tu penses inutiles (tout comme certaines divs) : le site a environ 23 CSS alternatives (dispos dans la page skins), dont certaines se servent des ces span (qui sont très utiles !). Et la taille de ces images sans height et width varie selon la CSS utilisée.
(bon allez, je suis bon prince, je peux afficher la taille de ces images via GD, je le mets dans ma to-do list ;) )
Les links ne sont pas inutiles dans le header, ce sont juste une autre implémentation de l'arborescence du site (et une autre façon de naviguer) : chaque page est un chapter, chaque chapter peut contenir des sections (par exemple, l'index des galeries de photos), comme un bouquin. Mozilla et d'autres navigateurs implémentent ce système en natif, Firefox l'a avec une extension (par exemple, Site Navigation Toolbar). Dotclear implémente ce système (observez le code source du Standblog).
Quant aux link Icra et P3P, ce sont juste des éléments de la démarche qualité Opquast. Pas du superflu ! :)
"Alsanautes, songez que du haut de ce site web, 113 lignes de code vous contemplent." Nappe à Léon.
J'aime assez le coté décalé, gros travail graphique qui à le mérite d'être original.
Par contre les contrastes pêchent un peu, ça part un peu dans tous les sens vu de mon oeil.
on dirait que tu as fait l'inverse de ce qui était demander dans le sens ou ton design actuel pourrait très bien être l'ancien et que ton ancien pourrait être ton nouveau.
@sogam : Et inversement ? ;)
J'aimais mieux l'ancien ;o)
Arf (goût personnel), je n'aime pas le design =/ De plus le contenu n'est pas très lisible, le choix des couleurs et polices ne me plaisent pas trop...
Je préfère carrément le skin dissymétrie qui est plus clair et plus au goût du design d'aujourd'hui.
Niveau code, ça a l'air vraiment pas mal =)
Je suis assez surpris dune refonte qui présente une version tellement moins bonne, je ne parle que sur le plan graphique. Certes on retrouve les feuilles de style alternatives. La typographie, quel que soit l'habillage me paraît souvent manquer de respiration également.
Bonjour
Je viens à mon tour t'apporter ma modeste contribution :)
Coté graphique, ton site étant un site personnel, le thème de l'Égypte, même si je ne suis pas fan, ne me choque pas, je trouve même que c'est super bien fait.
Coté code, les skins, la css média-query (que j'irai volontiers étudier comme beaucoup d'autres infos de ton site) me laisse admirative et un peu envieuse :)
Coté remarques, je suis d'accord avec ClementRoy, j'aurai mis "Nico's Dreams" et l'accroche en texte entourés de Hn. Un truc qui me chiffonne aussi, c'est la trop grande utilisation des balises br dans le corps de ton texte... pourquoi ne pas avoir utilisé de balise p ?
Par curiosité, tu n'as pas utilisé de manière systématique des balises section et article ou figure... c'est volontaire et si oui, pourquoi ?
Merci d'avance pour tes éventuelles réponses
Vraiment pas fan du style, le montage des éléments fait qu'on a l'impression qu'il sont posés vite fait, pas vraiment d'intégration... bref le design je préférais l'ancien où le contenu ressortait beaucoup plus.
Ma contribution :)
Techniquement je le trouve bien fait, j'avoue être assez impressionnée par la façon dont le design s'adapte à la taille de l'écran et l'utilisation de quelques techniques css3 : bravo.
Par contre d'un point de vue du design comme beaucoup j'ai vraiment du mal, je préférais l'ancien, même si il faut reconnaître une part d'originalité au nouveau.
Dommage qu'on ne puisse pas mettre deux notes (design / code) ^^
Le code est parfait quoique je ne retrouve pas les tag HTML5 dans le CSS.
Cool la dernière partie du css pour le redimensionnement minimum. Cela va obliger les gens à sortir du 1024*768 par défaut, et même du 800*600.
Pareil pour le style, j'aime mieux l'ancien. Je n'ai pas de critique envers un maître(personne qui donne de son temps pour enseigner avec humilité ses acquis)
C'est comme cela que je vais continuer la refonte du mien, enfin j'ai beaucoup de sites mais que deux mains et les journées n'ont que 24 h
Au premier abord, je n'accroche pas trop au design, mais après quelques minutes, ça passe mieux, je ne sais pas pourquoi, je trouve ça assez original.
Pour le code :
- J'avais suivit ton passage à l'HTML5 et cet histoire d'xHTML5 avec le bon content type... Mais je me demande à quoi sert la première ligne de XML ?
- J'aime bien l'effet sur les textes, il faut que je regarde comment c'est fait.
Je n'ai pas regardé plus longtemps, vu que j'ai déjà regardé le code il y a un petit moment pour m'améliorer en HTML5, je ne pense pas qu'il soit mauvais !
Bonne chance pour le concours !
Comme beaucoup, je reconnais la qualité/quantité du travail pour ce refresh (code, graphisme) mais j'ai le même avis, je ne suis pas fan du graphisme. C'est dommage, il y a beaucoup de boulot sur le "conteneur" du site, mais le contenu est assez brut dans sa mise en forme.
Salut,
Je n'avais pas vu ce site, dommage, sinon j'aurais mis 1...
La raison ? Le picto wcag1AA.gif qui laisse à penser que le site est conforme à WAI niveau AA.
C'est trompeur et mensonger (avant d'être conforme à WAI niveau AA, il faut respecter le niveau A, ce qui n'est pas le cas ici), merci de respecter le travail de ceux qui oeuvrent réellement pour l'accessibilité.
Ericf : j'aimerais bien savoir sur quels critères tu te bases pour oser dire que mon site ne respecte pas le niveau A de WAI. Et au lieu de critiquer de manière non argumentée, propose, je ne demande pas mieux que d'écouter.
Je me base sur le référentiel que tu cites :)
Je n'ai ni le temps ni l'envie de faire un audit complet de ton site pour rechercher tous les points litigieux. Ceci dit, les vidéos non accessibles me permettent de dire que ton site n'est pas conforme à WAI niveau A.
Si on devait prendre en considération WAI niveau AA, alors on trouverait d'autres points litigieux (par exemple sur les contrastes de couleurs insuffisants).
@Ericf : ah ça, aucun risque que je te demande d'auditer mon site, vu le constructivisme, l'accessibilité et l'extrême amabilité dont tu fais preuve à mon égard (moi qui imaginait qu'un expert en accessibilité saurait se rendre... accessible !). Je te prie de vouloir m'excuser, moi, simple intégrateur de ne "pas respecter ceux qui œuvrent vraiment pour l'accessibilité".
Cette injustice est corrigée, l'image offensante a été retirée. Aucun doute, l'accessibilité a gagné du terrain aujourd'hui.
@Nico3333fr : oui, l'accessibilité a gagné du terrain, tu sembles avoir compris mon message ;-)
Ceci dit, il n'y a pas de quoi se fâcher...
Allez, encore 3 points à régler pour améliorer encore l'accessibilité de ton site :
- lorsqu'on désactive les images, on ne voit plus grand chose
- les attributs title qui reprennent le contenu des items sont à proscrire
- certains textes sous forme d'image devraient être remplacé par du texte stylé
Cette liste n'est pas exhaustive.
Et je t'encourage à suivre une formation poussée sur l'accessibilité, tu comprendras sans doute mieux ce que j'ai voulu dire dans mon message initial.