Cascading Style Summer Refresh 2010
Reflet Web par cilou
Voir en ligne http://www.reflet-web.com
Après refresh
Note obtenue : 6.130/10
Voir en ligne http://www.reflet-web.com
Note obtenue : 6.130/10
Les commentaires sont clos.
Alsacréations, un site dédié au <body> building
(Jean-Claude Vandamme)
Commentaires
Bonjour
N'ayant pas trouvé comment mettre un petit descriptif à l'inscription (c'est mon premier concours), je tente ici :)
Nouvelle vie, nouveau département (Guadeloupe), il était temps que je "rafraichisse" mon site... HTML 5, CSS3, un peu d'ARIA et de Jquery (scripts tout fait), ce concours est très formateur.
Merci d'avance pour vos critiques.
Pas un très grand fan des couleurs, et code non valide W3C, mais design simple et clair. C'est sympa ! :)
Bon affichage sous IE6 (petite alerte javascript sur la page des contacts).
Bien meilleur design que l'ancien au passage !! Le relooking a du bon !
En effet, bon relooking! Le changement est flagrant et efficace!
A l'image de @Ariakan972 je ne suis pas fan de certains choix graphique (c'est quoi ce formulaire hideux en bas de page?), mais l'ergonomie est bonne.
Le code est plutôt bon, et je ne cache pas que je met 1 point bonus a tout ceux qui ont fais le pas vers html5 :-)
C'est la première fois de ma vie que je fais cette remarque mais : je n'aime pas les couleurs (ce vert est très étrange !). Bon, ceci dit, les gouts et les couleurs, ça ne se discute pas ! La mise en page est plutôt sympa, et je ne trouve pas le formulaire de contact de bas de page si hideux (mais il pourrait être plus discret). En bref, c'est plutôt une réussite :)
Et bien, moi j'aime beaucoup !
Du HTML5, la lisibilité est plutôt bonne, les perfs sont très bonnes, c'est bien présenté... c'est du très bon boulot !
Il ne manque plus que la version iPhone ! (faut bien que je trouve qqch à dire, ce site est à mon avis l'un des mieux fichus que j'ai vu pour l'instant sur ce concours)
@Ariakan972 : Et non, le code est totalement valide HTML5 (attention, HTML5 prend en défaut l'extension HTML validator), utilise le validateur du W3C pour vérifier.
Bonjour, bonsoir,
Merci à tous pour ces premiers commentaires.
- Nico3333fr, merci d'avoir vu "mes efforts" en terme de codage et d'optimisation des performances car ce sont des points qui me tiennent de plus en plus à cœur :) Pour les version mobiles... c'est vrai que je n'y suis pas encore penchée, il va falloir que j'apprenne aussi. On m'a dit que la vidéo fonctionnait sur certains (vive html5) mais était inintelligible...
- annso, merci pour tes appréciations et ta franchise ;) Si tu repasses par là, peux tu me dire ce que tu trouves d'étrange à mon vert... N'étant pas graphiste à la base, je trouve plus facile d'apprendre le code que d'avoir "bon" goût. J'ai gardé les mêmes couleurs que l'ancien site (marron, orange et vert) car je pense qu'il est important de conserver son unité graphique dans le temps et puis je n'avais pas envie d'un "vert pomme granny" comme en voit sur beaucoup de sites.
- ClementRoy, merci aussi, vive le concours, qui m'a boosté :) Formulaire hideux ? Si tu peux m'expliquer en quoi...
- Ariakan972, merci d'avoir apprécié le relooking :) Pour la validation, prise d'un doute, je viens de re-vérifier, mais c'est ok en html5. Pour IE6 (je n'ai que IETester), j'ai fais au mieux pour que l'information s'affiche sans dommage, je pense que tu as vu le problème sur la page a_propos a cause du script de la vidéo, j'essayerai de trouver pourquoi à la fin du concours.
cilou > je ne saurais vraiment pas te dire ce que je lui trouve à ton vert, mais je n'en suis pas fan ! Enfin, je suis totalement consciente que c'est un "défaut" bien subjectif, donc rassure toi, je n'en ai pas du tout tenu compte quand j'ai noté ta refonte ;)
Par ailleurs, je suis totalement d'accord avec toi en ce qui concerne l'importance de conserver une unité graphique dans le temps.
(mais le vert pomme, c'est si joli !)
Merci annso d'avoir pris le temps de re-poster et surtout d'avoir voté pour moi :)
A priori, mon code couleur n'est pas des plus heureux, si j'ai d'autres remarques en ce sens, j'en tiendrai bien sûr compte et je croquerai dans la pomme :)
C'est beaucoup beaucoup mieux qu'avant d'un point de vue esthétique.
@annso : D'accord avec toi concernant le vert! ;)
@ClementRoy : J'ai pas trouvé le formulaire de contact flagrant, ça se fait beaucoup en ce moment dans le style.
Une bonne participation en tout cas! ;)
Tom
Je trouve la refonte très rafraîchissante. Le vert est un peu bizarre mais pas choquant, je te dirais tout de même que si on le remarque tous, la plus part des internaute le remarqueront également et cela peut-être considéré comme un défaut.
Pour ton formulaire je ne noterai qu'un petit défaut décelé sous chrome, tes border-radius y sont mal interprété et ça fait vraiment moche.
Bonjour
- Shokojjo : merci et bonne participation à toi aussi :)
- Ekyunoryu : oups, j'ai pas vérifié sous chrome, merci à toi de me le signaler
Le changement apporté est vraiment un saut qualitatif notable. Le site est clair, accessible, hiérarchisé et agréable dans sa mise en page. La gamme chromatique ne me perturbe pas trop. Mes réserves concernent le flottement du milieu de page ( par rapport aux marges latérales ). Je trouve également un brin de lourdeur, peut-être lié au fait que je dispose d'un grand moniteur et que les marges attirent l'œil un peu trop ? Cela reste un travail très correct, qui manque juste d'une petite étincelle peut-être. Quand on constate l'évolution entre les deux versions, on peut imaginer la suite avec curiosité.
Merci designer1959 pour tes appréciations, j'ai peur de ne pas comprendre "le flottement" du centre... Je n'ai pas de grand écran mais est ce que tu veux dire que le fait d'avoir les 2 pavés marrons en haut et en bas sur toute la surface de ton écran créent cet effet de lourdeur ? je n'y avais pas pensé, effectivement, ce n'est surement pas terrible !
Le flottement provient du fait que la colonne centrale (avec 4 visuels par ligne ) a un fond blanc et les marges latérales, blanches aussi. Cet espace n'est donc pas délimité. Oui, la lourdeur est produite par la prolongation des marges marron et l'enfermement de la zone centrale ( blanche ) par de grandes surfaces sombres au dessus et au dessous. Bien sûr, je visionne le site sur un écran 27 pouces… ce qui n'est certes pas le cas de tous les internautes !
Bonsoir et merci designer1959 pour ta réponse, je comprend mieux et je retravaillerai en ce sens : une limitation pour les marges et un fond de couleur peut être pour le body afin de mieux caler visuellement le centre.
C'est toujours facile de faire des remarques générales sur un travail finalisé… Pas toujours simple, ensuite, d'améliorer sans déséquilibrer. Parfois, une petite chose suffit. Bon courage !
Et bien, dans ton code, il n'y a pas trop de div non plus ! Une seule et c'est pour une question de graphisme, donc c'est pas mal du tout.
Je n'aurais pas vu le code comme ça au niveau des <section> et quelques autres balises <aside> à la place d'un <article>... que des broutilles.
Ensuite, j'ai aussi fait un travail au niveau des class et id, un bon nettoyage de fond, un exemple : "Re<span class="f_grand">f</span>let web", on aurait pu se contenter de ça "Re<span>f</span>let web", et y accéder en CSS "header span". C'est un petit exemple. Un maître dans le genre : http://camendesign.com/ c'est difficile de fa... pareil si on veut garder la compatibilité IE < 8/9.
Dans l'ensemble : un bon code, j'aime moins le design (question de goût). Dommage que je ne puisse pas voter.
Merci lightcode pour tes appréciations et d'avoir relevé la class en trop, j'irai corrigé ça :)
Le site camendesign est effectivement une bonne référence, je m'en suis beaucoup servie pour la balise video. Pour les autres balises, c'est possible que je ne les ai pas toujours utilisées à bon escient... c'est parfois difficile de s'y retrouver dans les infos concernant html5, c'est pour cela d'ailleurs que je n'ai pas utilisé les headers, h1 et compagnie dans les articles, cela me semblait prématuré... il sera toujours temps d'améliorer dans quelques temps :)
Pour la class, c'est un exemple, si tu cherches à en mettre encore moins, mais je pense que c'est possible.
Oui, c'est dur de trouver des références, moi j'ai fouillé dans les codes sources des sites HTML5, et je trouvais des divergences.
Pour les header, je m'en suis servit en tête dans ma balise article (pour faire le bandeau sur mon site), après ce header, j'avais l'article et enfin le footer. Sinon, je ne casse pas les titres "h1 -> (article) h1...", aujourd'hui, si je retire le CSS, je perds des informations. Surement qu'un jour tous le monde le fera sans se poser de question, les deux méthodes sont valide, alors, on choisit ?
Le problème d'HTML5, c'est le manque de documentation, et les divergences entre les exemples du W3C, des "bricoleurs HTML5", ... Au final, on ne sait plus quoi mettre et à quel endroit. Il y a un exemple, pour plusieurs types d'utilisation, ...
Voilà, je vois qu'on a fait quasiment le même travail de recherche.
Quand je parlais de camendesign, c'est pour son code source sans class et sans ID (à part pour les ancres). A propos de la balise vidéo, j'ai fait une intégration, j'ai pas mal galéré avec l'encodage (OGV, MP4, WEBM) sinon, ça passe bien.
Bonjour lightcode
Effectivement, il est parfois difficile de s'y retrouver dans la documentation parfois divergente de ce nouveau langage, mais bon, tout cela va murir dans le temps :) je crois que pour l'instant, l'important est de coder avec réflexion... par exemple, je n'ai pas mis header, footer etc dans article parce qu'il ne me semblait pas que l'information délivrée le nécessitait (je me suis posée la question et en fait j'ai eu l'impression que j'allais alourdir le code et que sémantiquement, cela n'allait pas être un plus). Au contraire, sur ta page d'accueil, je trouve que l'utilisation des header et footer dans article est tout à fait justifiée. Par contre, je n'aurai pas utilisé header pour encadrer le titre h2 actualités...
J'ai cherché la vidéo sur ton site pour voir comment tu avais fais, je ne l'ai pas trouvé, pour ma part, j'ai trouvé la mise en place de l'encodage assez simple, j'ai plus galéré sur l'ajout du sous-titrage...
Ok alors, là je vais commenter au niveau design ce que tu pourrais améliorer.
En premier, pourquoi ne pas faire un menu "caché" du type menu jquery qui apparaît quand tu passes dessus? Car ici on voit que tu ne savais pas trop où mettre ta navigation. Dans l'idée un peu comme sur le site de thecssawards.
En deuxième, la typographie, à mes yeux elle est beaucoup trop grande, prend l'habitude soit de la regarder sur un petit écran (là j'ai un 1024X768 comme écran pour mes palettes et un autre plus grand bien-entendu) ou soit tu as la possibilité de simuler ça, avec la web developpeur, en redimensionnant ta fenêtre dans une petite résolution.
A mon avis la typo dans l'entête (là où il y a le colibri) en plus grand, faut pas avoir peur, limite à faire un slide show et tu le mets sur plusieurs "pages". Ça t'amènerait de l'interactivité.
Mais surtout ce qui me dérange, ce sont les liens pour filtrer le contenu, n'es pas peur de les mettre en petit, car on ne les utilise pas souvent.
Ensuite pour des visuels de travaux, moi j'essaierais de les mettre plus en avant lorsqu'on fait un rollover dessus. Type soit un changement de couleur de la typo, changement du background etc.
Lorsque tu cliques sur un travail, n'est pas tout ce texte qui revient à chaque fois (les petits plus et le vos pages...). Tu pourrais même enlever ton header avec le colibri, pour faire tte la place à tes travaux.
Sinon retravaille ton logo, le f est bien trop voyant lorsque tu fermes un œil et la fleur de crocus ou je ne sais pas quoi, on en a pas besoin... on comprend que c'est un oiseau.. un colibri je pense. Et surtout pas de reflet dans ton logo. Il y a pleins de bons sites d'inspiration de logos comme : logo of the day, creattica et LogoPond.
Voilà j'espère que ça te seras constructif.
Sinon code c'est bien tout ça m'a l'air d'être de l'html 5... je n'utilise pas tout mais c'est bien.
Bonjour Sogam et merci d'avoir pris le temps de regarder mon site et de le commenter :)
@cilou : c'est normal, j'ai une version "beta" chez moi, et je fais maintenant tous mes tests avant publication. Mon problème avec la vidéo, c'est de trouver les logiciels, celui qui revient souvent c'est Miro Encoder, mais les vidéos ne fonctionnaient pas, sur Chrome, la lecture ne démarre pas. Pour les formats, j'ai fait :
- WMV -> MP4 avec Handbrake
- MP4 -> OGV avec une extension de Firefox
- OVG -> WebM avec Miro et ça a marché...
Bref, pour ma part, je n'en garde pas une bonne expérience. T'as fait comment ? En plus, j'ai vraiment du mal avec les vidéo, je n'arrive pas à la redimensionner proprement (comme on ferait avec une image) et surtout vu le nombre de conversion, bonjour les pertes. Si tu as des conseils je suis preneur ;)
Pour le <header>, celui que tu trouves justifié c'est celui de la <section>. Mais j'ai décidé d'en mettre une pour chaque <article>, parfois c'est inutile. Sinon, pour le footer, ça me permet de mettre la mise en forme (gris, italique). Mais je ne pense pas toucher à ça, surtout que je trouve ça logique. Après, je suis conscient que le langage n'est pas finit, et que tout cela va murir, heureusement d'ailleurs !
Pour information, j'ai testé : la balise <audio> (pour IE9, Chrome [MP3]), <video> (tous), je commence à regarder à <canvas> rapidement. J'ai regardé rapidement au localstorage (qui fonctionne même sous IE7 !), voilà pour mon petit tour d'HTML5. Il y a aussi les placeholder dans les formulaires et les nouveaux types de champs, etc. Bref, on a encore beaucoup de choses à étudier !
Bon courage.
Bonjour lightcode
Pour les vidéos, j'ai utilisé Miro Video Converter (http://www.mirovideoconverter.com/), ça a bien marché mais je n'ai pas testé sous chrome ??? donc...
je suis partie d'un fichier flv.
Dans ma page j'ai mis dans l'ordre mp4, webm, ogv puis le flv en alternative et je ne me suis pas servie de l'attribut "poster" (j'ai suivi les indication de camendesign)
J'ai mis un moment avant de trouver qu'il fallait déclarer les types mime dans le htaccess (le tuto de Nico3333fr sur la vidéo n'existait pas encore ;))
Pour les tailles de la vidéo, j'avoue que je ne me suis pas trop posée de questions, j'avais fais le fichier flv à partir de Super (http://www.erightsoft.com/SUPER.html) qui permet de définir une taille sinon il y a Virtualdub et son filtre Resize qui fonctionne bien parait-il.
J'ai utilisé aussi ce tuto pour les sous titrage : http://www.traduction.cc/traduction/Accessibi...
Après ma vidéo perso n'était pas au départ de très bonne qualité, c'était vraiment pour tester... si je devais un jour mettre une vidéo "accessible" sur le site d'un client, je lui expliquerai qu'il faut d'abord la concevoir dans les règles !
Sinon Localstorage me semble très intéressant et un plus pour la consultation hors ligne, j'ai trouvé quelques sites qui l'utilisent, mais comme toi, j'ai encore beaucoup de choses à apprendre et c'est passionnant :)