Cascading Style Summer Refresh 2010
Blog @t Das Art par Das
Voir en ligne http://blog.das-art.com/
Après refresh
Note obtenue : 6.818/10
Voir en ligne http://blog.das-art.com/
Note obtenue : 6.818/10
Les commentaires sont clos.
C'est dans ces moments que j'me dis que j'vais changer
(Maître Gimp)
Commentaires
J'aime beaucoup l'illustration ! Cela change de la version précédente bravo. :)
La mise en page est soigné bravo !
Bonne continuation,
Pierre
Très joli webdesign et un univers bien sympa! ;)
Bonne continuation,
Tom
Pas du tout constructif mais : j'adore carrément ! Super style, super design ^^
J'adore le design des blocs sur les côtés !
Merci pour ces commentaires. C'est toujours agréable, les commentaires positifs, même si ce n'est pas "constructif" :-)
Pour ce qui est de cette refonte, faute de temps (comme beaucoup), je n'ai pas pu tout boucler (affichage dans IE6, finition du pied de page, de quelques détails dans la colonne de droite, création d'une 404 sympa et nettoyage/correction des imperfections/redondances dans le code que j'ai zappé en allant un peu vite).
Mais l'ensemble est viable et j'ai pu le passer en production dans les temps.
Bonne visite et bonne chance aux autres participants.
Très bonne idée tout ça ! :D
Le header est un poil grand..... Mais ça sert bien le site ! Très bon footer également
Excellent design qui colle parfaitement au sujet qu'il traite. :)
Passe plutôt bien sous IE6, je ne pense pas que ça nécessite le message qui se situe tout en haut ! (il y a juste une erreur javascript sur la home par contre)
Attention aux erreurs HTML/CSS qui trainent par contre...
Félicitations ! :)
C'est vrai que mon commentaire n'était pas très constructif <!-- autant pour moi ^^ --> , mais comme je peux le constater, tu sais ou sont les points à améliorer:
affichage dans IE6, finition du pied de page, de quelques détails dans la colonne de droite, création d'une 404 sympa et nettoyage/correction des imperfections/redondances dans le code que j'ai zappé en allant un peu vite, et je rajouterai validation CSS/HTML
C'est vrai qu'on a manquer de temps pour ce concours, mais en ayant réglé ces quelques points tu aurais eu certainement une meilleure note encore! ;)
Pour le header/footer je suis d'accord avec Ariakan972, je trouve qu'ils sont un poil trop grand. Concernant le footer, je trouve qu'il serait également intéressant de trouver un autre moyen pour mettre en valeur les Catégories, c'est un des seuls modules qui n'est pas travaillé et du coup ça jure un peu (après c'est mon avis, ça reste assez subjectif...)
En tout cas, bonne continuation
Tom
Vraiment sympa le style BD !
Merci pour ces commentaires. Constructif ou non, les commentaires/discussion sont toujours plus agréable que l'ignorance (il faut d'ailleurs que je prenne le temps de visiter les 98 onglets que j'ai ouverts avec les sites des participants).
@ Ariakan972 :
Pour le message destiné au utilisateur de IE7 et antérieur, c'est plus une façon de dire à ces personnes, discrètement, qu'ils pourraient dans la mesure du possible profiter des derniers navigateurs IE ou autres au lieu de se traîner leurs vieilleries. Je voulais d'ailleurs cappé ce message à 1/visiteur, de façon à ne pas agresser les gens sur chaque page (c'est dans ma to-do list).
@ Ariakan972 et Shokojjo :
Pour ce qui est des dimensions de entête et pied de page, c'est vrai qu'ils sont conséquents mais c'est un choix que j'assume de part le contenu et la fonction de ce site (blog perso pas assez souvent mis à jour - c'est d'ailleurs pour ça que je ne date pas mes notes).
Lorsqu'on affiche une première fois le site, on ne voit même pas la première note, mais sachant que je ne publie que des dessins sur ce site, il faut de toutes façon faire défiler le site pour les voir en entier. J'ai donc conservé le partie pris de faire une entête importante et de m'amuser avec.
Pour le pied, je pense qu'il est assez rare de s'attarder dessus, c'est pour ça que je me suis amusé avec aussi et que je l'ai fait si grand... Mais il n'est pas encore fini.
Pour ce qui est de la validation, les css sont pour certaines liées au plug-in que j'utilise et je n'y touche(rais) pas car mes corrections seraient à refaire à chaque mise à jour des dits plug-in.
Pour ma partie, j'ai 4 erreurs avec les propriétés -moz-box-shadow et -webkit-box-shadow qui n'existent pas, forcément. Le reste est valide.
Pour la partie html, j'en ai 4 aussi. 3 sont dû au player flash de la dernière note, que j'ai bêtement copier-coller du site d'où il est extrait sans le corriger. La quatrième est dans les catégories du pied de page. Un h2 placé à la va vite dans une liste directement après le ul. Ça ne se fait pas, mais sur l'instant, ça m'a bien arrangé pour finir le site rapidement (à corriger asap).
@ Shokojjo
Les catégories sont d'après mes stats, une navigation (quasiment) jamais utilisée sur mon site. Il faut dire qu'elle n'ont pas beaucoup de sens à première vue.
Les Internautes soit arrivent par une note et j'ai donc mis en avant sur la colonne de droite les articles connexes et les derniers publiés, soit ils arrivent par la page d'accueil et là, ils vont s'arrêter ou continuer par une navigation chronologique (suivant, suivant, suivant...)
Dans tout les cas, c'est vrai que je n'ai pas travaillé sur cette partie, que je me suis contenté de calé de façon propre mais sans plus. C'est pour ça que je pense qu'il y a encore du travail sur le pied de page pour arranger son contenu, je suis parfaitement d'accord avec toi.
L'idée est super et je trouve la réalisation bien réussi.
Bravo ! ;)
J'ai beaucoup, le header et le footer sont énorme, mais ils s’intègrent parfaitement à l'ensemble du site et au thème
J'aime beaucoup, ce site mérite sa place dans le top ten ! dommage qu'il ne soit pas valide W3C.
Bonjour,
Merci pour vos commentaires et votre accueil positif de mon site.
@ P0ulpe
Comme dit plus haut, pour la validité (si on s'arrête à la première page - elles sont toutes pareils ou presque), c'est essentiellement dû au player flash encore présent et un h2 placé à la va vite juste après un ul. Sur l'instant, ça m'a bien arrangé pour finir la mise en page du site rapidement (à corriger asap après le concours).
Pour la css qui me concerne http://blog.das-art.com/squelettes/habillage.... (css 3), j'ai 4 erreurs que je ne corrigerais pas, puisqu'il s'agit d'utilisation de -moz-box-shadow et -webkit-box-shadow. Toutes les autres css vont avec des plugin que j'utilise et donc que je ne corrigerais pas car mes corrections seraient à refaire à chaque mise à jour des dits plug-in.
Par contre, côté accessibilité par exemple, il y a du boulot (et c'est plus important que de valider un code façon W3C, à mon avis, tout comme de faire des efforts sur les contenus et leur grammaire/orthographe) :
- réorganisation de la navigation au clavier avec les tabs et les accesskey sur laquelle je n'ai pas travaillé du tout,
- optimisation du poids des pages (compressions...),
- sûrement d'autres choses auxquelles je ne pense pas !
Et puis toujours, dans ma to-do list : affichage dans IE6, finition du pied de page, de quelques détails dans la colonne de droite, création d'une 404 sympa et nettoyage/correction des imperfections/redondances dans le code que j'ai zappé en allant un peu vite.
Bref, du boulot dès le lendemain de la fin des votes :-)
Très sympa ce nouveau design. Beaucoup plus clair, même si le noir, bon, mais ça passe bien.
Que dire , je suis sans voix, c'est vraiment superbe comme design, fluide, les textes et les graphismes sont placés judicieusement.
Sans apprécier l'univers de cette illustration j'apprécie son originalité, et ça c'est vraiment sympathique, voire jubilatoie car on sent que l'auteur se fait plaisir et la touche d'humour est bienvenue.
Quelques trouvailles appréciables comme les menus de la colonne de droite.
Le bas du site.
Quelques regrets /
La typographie demanderait plus de soin, un interlignage moins serré, et un peu de plus recherche de ce côté.
Je pense que l'organisation des blocs les uns sous les autres pourrait être améliorée, par une transition plus subtile, le cadre noir fin, bof, et le fond blanc sont peut-être à repenser.
L'effet du papier ombré chiffonné est une bonne idée mais le fondu au noir est un peu brusque.
Une remarque, la présence des instruments graphiques est sympa, sauf que, sauf erreur, il me semble que le dessin présenté fait peu usage de l'aquarelle ou de l'encre, au profit d'un logiciel ?
Merci pour vos commentaires.
@ designer1959 : je suis d'accord avec toi que le pied de page demande du travail sur la typo et la mise en forme (et le code), mais je n'ai pas eu le temps avant la fin du concours. Je dois donc attendre la fin des votes pour terminer le travail, maintenant.
Pour les notes, les cadres noirs de chaque bloc rappellent simplement des cases de BD sur une page (d'où le fond blanc aussi) même si j'avoue qu'on conçoit sûrement plus facilement les cases de BD comme étant plusieurs par ligne. Par contre, qu'entends tu par transitions plus subtiles ?
Enfin, pour les outils présents dans l'interface, ce sont des outils que j'utilise couramment et dont on peut voir les résultats sur ce blog dans les différentes notes (j'utilise encore d'autres outils non représentés aussi comme les feutres, pastels, peintures...).
Bien que le dessin de l'interface ai été mis en couleur avec Photoshop, il a été dessiné au crayon et encré avec un rotring avant d'être scannerisé et mis en couleur avec une palette (et son stylet).
La tâche en bas a été faite avec de l'encre Pebeo dont j'ai aussi représenté le pot. Pour info, cette tâche est la même que la tâche noire présente dans l'entête de la version précédente de mon blog (cf. capture) et elle était encore présente dans les deux précédentes versions.
Bref, à part le pinceau en haut, tout les outils de l'interface on servit pour la réaliser.
Bords noirs /
Autant pour moi, je n'avais pas perçu ça ainsi.
Disons que la succession des blocs en colonne rend la citation (case de BD) moins évidente, du moins pour moi.
Quand je parlais de transitions plus subtiles, c'était une envie de trouver un rythme un peu moins répétitif peut-être… Mais à présent que je comprends l'intention, mon regard est un peu modifié aussi.
Outils /
Merci pour les explications.
Je pense que ça aurait été sympa, au moins à titre de citation, qu'on voit, ne serait-ce qu'un détail en " matière " avec des encres, etc. Quelque chose qui " bave " un peu plus.
Ouch côté perfs, il faut vraiment faire des efforts : entre autres : 9 Javascripts qui pourraient être réduits de 170 Ko, c'est à améliorer de toute urgence ! (y a un tuto très bien fait sur Alsa !)
Très sympa visuellement parlant ! Un délire graphique très réussi.
Merci pour ce commentaire sur les performances.
Pour tout dire, il y a très peu de javascript dans lesquels j'ai mis les mains. La plupart sont liés à des plugin que je n'ai pas développé et donc je n'ai pas l'intention d'y toucher car je n'ai pas envie de tout recommencer à chaque mise à jour des plugins (tout comme je le disais plus haut pour les css).
Par contre, j'ai désactivé la compression des scripts et des css le temps du concours, afin qu'ils soient lisible. Une fois réactivé, on gagne pas mal en performance.
Mais de toute façon, même en améliorant le code, mon blog restera lourd à charger à cause des images que j'optimise mais pour lesquelles je veux tout de même conserver une qualité correctes et donc, je ne les compresse pas trop (ça reste avant tout un blog où je présente mes dessins).
@Nico3333fr : le concours étant fini, j'ai réactivé la compression des js (que j'avais laissé lisible pour le concours) et je passe de 179ko à 13ko.
Mais comme précisé, ce blog présente mes illustrations dont je n'ai pas envie de perdre trop en qualité, elles pèsent environ 100ko chacune et sont au nombre de 7 par page (plus l'interface). Donc, le site reste long à charger sur une connexion à faible débit.