Cascading Style Summer Refresh 2010
Weasy Life par Shokojjo
Voir en ligne http://www.weasylife.com
Après refresh
Note obtenue : 7.029/10
Voir en ligne http://www.weasylife.com
Note obtenue : 7.029/10
Les commentaires sont clos.
J'ai réservé mon nom de dolmen !
(Asterix)
Commentaires
Bonjour à tous,
L'ancienne version de notre site (avant refonte) est toujours en ligne. Vous pouvez la visiter en cliquant sur l'url suivante: www.weasylife.com/oldversion
J'espère que notre nouveau portail vous plaira et je profite de ce petit message pour souhaiter bonne chance à tous les autres candidats!
Tom
Bonjour Shokojjo,
J'aime beaucoup votre style! Très propre! Bonne chance pour le concours !
Merci beaucoup, je profite de ce petit message pour apporter quelques précisions concernant notre site, il est en effet:
- Valide W3C CSS 3.0 & xHTML Strict
- Rétro-compatible jusqu'à IE6
- Totalement adapté en désactivant le JavaScript
- Notre score PageSpeed est de 92/100
Tom
C'est très beau, j'adore ! Excellent travail. :)
Très bonne utilisation de Jquery (ça serait peut-être même bien utile sur la page des références, plutôt que de recharger une page à chaque fois)
J'ai 5 erreur CSS par contre (normal en même temps, les spécifications CSS 3.0 ne sont pas terminée)
Excellent travail, rien à redire. L'un des tous meilleurs du concours !
@Ariakan972 : Merci beaucoup pour ton commentaire! C'est très encourageant ;)
Nous n'y avions pas pensé mais c'est vrai que réutiliser notre navigation par Jquery sur la page références est une très bonne idée! Dès que le concours est terminé, je m'occupe de ça! ;)
Hello,
Bravo, pour l'instant ces le site le plus pro que j'ai pu croiser ici :)
Les pages prestations et références sont particulièrement bien léchées, mais le site dans son ensemble est très bonne facture :)
...je viens de voir la page contact : très bien joué les en-têtes en trois étapes ;)
Bravo, ma meilleure note pour l'instant.
(je parie une pinte que vous allez vous retrouver sur Smashing Magazine très bientôt les gars ^^)
...et puis par rapport à l'ancien design... comment dire... c'est le jour et la nuit !
/sous le charme :)
coucou,Shokojjo
super design, j'adore!!! les couleurs sont sympa et je suis d'accord avec audrasjb pour l'ancien design et surtout avec arikan972 :Excellent travail, rien à redire. L'un des tous meilleurs du concours !
Waaaaaouw ! Vraiment un gros coup de coeur pour ce site que je trouve superbe ^^
Bravo !
@rionma33 @anais-id @audrasjb : Merci beaucoup pour vos commentaires ça fait drôlement plaisir! Je viendrais avec plaisir découvrir vos réalisations pour vous faire part de mon retour à mon tour! ;)
Tom
excellent !
c'est même in(!=)juste pour les autres ;-)
les pages manque un peu de structure <h1> ; <h2> pas toujours, parfois vide ; <h3> ... pas trouvé, alors qu'il pourrait l'être
... m'enfin c'est vraiment pour chipoter ;-)
Très pro ! On sent l'influence Smashing-Magazine mais c'est réussi. Nickel !
Bon bah comme les autres, superbe site. Si j'étais pointilleux, je demanderais pourquoi tu convertis les caractères accentués en entités html (surtout que tu utilises de l'utf8) et je me demande aussi que sont tous ces espaces insécables partout (compatibilité ie ? ).
En dehors de tout ça, ma meilleure note pour le moment.
@iManu : Tu es le deuxième à me parler de Smashing-Magazine mais je dois reconnaître que je connaissais absolument pas ce site avant que vous en parliez, l'inspiration ne vient donc pas de là mais maintenant que vous le dites je vais ajouter le site à mes favoris! Merci beaucoup ;)
C'est d'ailleurs mon tout premier vrai webdesign complet, et l'inspiration vient plutôt de http://www.thecssawards.com/ (un site que je ... d'ailleurs! ;)
Bonne continuation
Tom
Super site. Simple, clair, bien organisé, créatif, vraiment bien foutu au niveau graphisme, ergonomie et aussi contenus. Vraiment bien joué ! :) Bonne continuation.
Je trouve également le design très sympa ainsi que le choix des couleurs, la présentation est claire et bien organisée.
Par contre, sur la page "Accueil" et "Nos prestations" je remarque un légé bug (sur Opera) dans le footer, ou plutôt dessous, en effet, le fond de page apparaît sur environs 230px de haut.
Et niveau SEO il y aura encore un peu de boulot à faire, mais dans l'ensemble je dois avouer que c'est du très bon boulot.
En tout cas, cette nouvelle version fait beaucoup plus pro que l'ancienne ^^
Héhéhé, la vilaine faute d'orthographe sur la page d'erreur 404 !
Bin oui, fallait bien trouver qqch à dire, vu que le reste est de très haute volée. :)
J'aurais quelques remarques :
-les perfs sont plutôt bonnes (on voit qu'elles ont été travaillées, c'est bien !), mais deux ou trois petites optimisations viendraient les améliorer (notamment sur la page "prestations", plutôt lourde à charger (y a des fichiers javascript à combiner entre autres).
-beaucoup de styles définis dans les fichiers HTML, idem pour le Javascript... dommage !
-un méta totalement inutile, le revisit after.
-pas de version iPhone ?
Sinon le graphisme est agréable, le tout se dégrade bien, les couleurs sont bien choisies, c'est plaisant à naviguer.
Y a pas à dire, c'est du très bon boulot !
@LuciferX : Merci pour le petit bug Opéra il avait échappé à notre vigilance, nous corrigerons ça très rapidement.
@Nico3333fr :
- [y a des fichiers JavaScript à combiner entre autres] il n'y a que deux JavaScript (même sur la page prestations), et il ne peuvent pas être combiné malheureusement, a priori impossible de faire mieux... de plus ils sont compressés au maximum (sur la version en ligne en tout cas)!
- Pour la version iPhone/Mobile on a pas eu le temps avec le délai très court pour le concours, mais ca viendra plus tard! ;)
- Pour la faute c'est corrigé mais j'ai mis longtemps à la trouver (faut dire que je suis fatigué!;) Merci beaucoup pour ton œil aguerri qui pousse très loin le détail, il ne doit d'ailleurs pas y avoir d'autres fautes ailleurs (je voudrais pas m'avancer trop quand même mais normalement c'est bon!) ;)
- Pour la balise revisit-after mea culpa! ;) = corrigé
@Nico3333fr, @LuciferX, @atelierwebactif & @Toniob : Merci beaucoup pour vos retours positifs
En tout cas merci beaucoup pour vos remarques je vois que le détail est poussé très très loin sur Alsacréations comme toujours et moi qui suis un peu perfectionniste ça me plait beaucoup! ;)
Bonjour,
vraiment très professionnel, bravo. Sympa aussi le fond dessiné à la main dans "agence".
J'ai hâte de découvrir Comicsblog.fr.
@loicbcn : Merci beaucoup! ;)
Pour Comicsblog.fr le graphisme n'est pas de nous et on s'occupe juste du développement, mais le site promet d'être plutôt bien si l'on en croit les maquettes! ^^
Merci pour tes encouragements
Tom
Un bon travail d'ensemble avec le soin des détails. Démonstration est faite que la sobriété chromatique (gris / bleu) fonctionne quand elle est aboutie. L'accueil est très " pro " et donc un peu froid, bien vu, la page sur l'agence introduit juste ce qu'il faut de fantaisie, et les graphismes sont sympathiques. C'est le plus de cette refonte. La première version, dont je préfère malgré tout la clarté pour le confort visuel, était plus rigide. Voilà ma principale réserve, les fonds sombres sont séduisants, valorisent les visuels, mais sont moins adaptés à la lecture, surtout quand la typo ( gris / noir ) manque de contraste. Détail : attention aux retours à la ligne intempestifs des guillemets typographiques ! Je suis toujours gêné par les étirements indéfinis en largeur, même si sur ce site, ils sont moins mal gérés qu'ailleurs.
J'aime beaucoup, beau travail.
Salut,
je trouve ce site très réussi !
Une toute pitite remarque du coup : le formulaire de contact ne fonctionne pas sans JavaScript et lorsque ce dernier est activé je ne trouve pas les "alert" très heureux.
@p0ulpe : Merci beaucoup! ;)
@Heyoan : Le formulaire fonctionne correctement sans JavaScript ;)
Pour les alertes, nous les avons rajouter à notre To-Do List, je reconnais très volontiers que c'est pas très beau! ;)
@designer1959 : Merci pour ta critique, concernant la couleur de la police, nous accordons beaucoup d'importance à l'ergonomie, l'application Silverback nous permet d'enregistrer les réactions et l'activité des utilisateurs de notre site, étant donné le peu de contenu de notre site, le défaut que tu mets en avant n'a pas été considéré comme tel par nos visiteurs.
Tom
Étant donné que sans JS aucun contrôle n'est effectué sur les champs ce n'est pas ce que j'appelle un formulaire fonctionnel ;)
@Heyoan : Oui c'est pas faux! On va faire quelques ajustements au terme du concours alors! ^^
Je trouve le design particulièrement excellent !
Au niveau du code, je vais juste donner quelques points, que je n'aime pas vraiment :
- Toutes les images qui contiennent du texte, je n'aime pas beaucoup, mais c'est surement pour une question d'estitique ;
- Ces mêmes images sont dans des div appellées "titre"... pas bien ça, ou alors, pareil, raison technique ;
- Les div class separator : on peut pas faire ça avec un hr ?
- Problème avec le lien "une vision" : la page ne bouge pas vers l'ancre ;
- La partie "En diect de notre blog" est une liste, pourquoi ne pas mettre une <ul> ?
- A quoi sert l'atribut "name" dans un "a" ? (là c'est une vraie question).
Voilà, je pourrais surement en écrire encore un peu, je ne sais pas si vous faites très attention au code, car je suis assez exigeant (trop ?) sur ce point.
Je ne dis pas ça pour vous rabaisser, je disais ça pour faire avancer le site, après, je trouve que le design est vraiment professionnel alors que le fond noir était un vrai défit. C'est vraiment propre graphiquement, pour le code, ça n'ateint pas mon niveau d'exigence.
Valeurs des gris de la typo.
Ce n'est pas tout à fait un défaut, surtout dans la mesure où ce rapport de ton est esthétique et très accordé à l'ensemble de la charte graphique. Je pense simplement qu'un léger éclaircissement de la nuance apporterait un peu plus de confort, sans nuire à l'esthétique.
@lightcode : Hello, merci pour ta critique, voici d'ailleurs mon retour à propos de celle-ci:
- Un hr est effectivement plus approprié, néanmoins le div class separator, devait à l'origine contenir plus d'éléments, par manque de temps nous n'avions pas fait les changements. Nous ne manquerons pas de le faire au terme du concours.
- Un <ul> serait effectivement une bonne chose, nous ferons les modifications
- Merci du signalement du lien qui ne fonctionne pas
- L'attribut name dans certains "a" nous sert pour les ancres.
- Les images contenant du texte, sont effectivement là pour gagner en esthétique, et permettent d'éviter de forcer le téléchargement d'une typo via JavaScript devenu malheureusement pratique courante. De plus, nous nous devons de garder à l'esprit que nous sommes une agence de communication préférant ainsi insérer des jolies titres en image plutôt que de les faire normalement pour optimiser un code que les clients ne regarderont pas ;) De plus et comme ceci ne représente absolument pas une contre-indication des standards, pourquoi s'en passer? ^^
Après je t'avouerai être un peu blessé par tes commentaires lorsque tu dis: "je ne sais pas si vous faîtes attention au code" ou "pour le code, ça n'atteint pas mon niveau d'exigence" étant donné le travail qui a été accomplit sur ce point. Le site est d'ailleurs très optimiser sur le plan des performances, nous avons pris le temps de soigner notre version noscript, nous avons redéfinis plusieurs css pour s'assurer de la rétrocompatibilité de notre site, nous avons fait en sorte que nos classes soient définis le plus correctement possible, alors oui ce n'est pas parfait et ce ne le sera jamais, mais de là à dire qu'on a pas fait attention il y a un pas assez conséquent.
@designer1959 : Merci pour ton retour, nous ferons quelques essais afin de tester un éclaircissement ;)
"Après je t'avouerai être un peu blessé par tes commentaires lorsque tu dis" > je suis vraiment désolé : ce n'est franchement pas le but. Je m'explique : j'avais fait une liste de défauts/questions, mais je ne sais pas si vous apportez une grande importance au code, d'où ma seconde reflexion. Je pondérai mes propos, car votre code est bon, mais il n'est pas encore parfait. Je te rassure, je ne suis pas là pour blesser, j'ai cherché pendant un petit moment à formuler ça, je m'en doutait qu'on pouvait mal le prendre : comme quoi, quand on veut bien faire on peut se planter. Et là, je me demande encore si je suis clair. Après, si je devais noter, je n'aurais pas saquer pour des détails pareils, je sais, c'est ridicule : le code est bon, mais perfectible.
Pour le reste :
- "L'attribut name dans certains "a" nous sert pour les ancres." > j'utilise les ID pour cela, je ne connaissais pas.
- Les images me posent pas vraiment de problème, c'était juste pour les titres : pourquoi ne pas les mettre dans un <h2> (ou autre) ?
Toutes mes escuses.
@lightcode : Tu as très bien fait de nous faire part de tes critiques, et si tu en as d'autres, nous serions très heureux de les entendre! // d'ailleurs dès la fin du concours, nous allons modifier quelques classes, modifier les separator pour avoir un hr, et changer le footer en insérant une liste à puce car les éléments que tu mets en avant sont largement justifiés!
Pour te répondre quand on a fait ce concours, on a accordé beaucoup d'importance à tous les points, et notamment le code car c'était vraiment le plus délicat pour nous, et c'est vrai qu'après tous les efforts qu'on avait fait, et comme j'avais l'impression que tu disais: "ce code est pas bon" je trouvais ça frustrant, mais je comprends maintenant que c'est moi qui est mal interprété alors je suis vraiment désolé, et je m'excuse à mon tour.
PS: Si tu as des critiques sur le code comme j'ai vu que ton site était ultra-optimisé de ce côté là, nous sommes preneur plus que jamais! Au contraire, on ne demande qu'à s'améliorer, merci beaucoup pour tes retours.
[- Les images me posent pas vraiment de problème, c'était juste pour les titres : pourquoi ne pas les mettre dans un <h2> (ou autre) ?"--> Très bonne idée, encore pas mal de travail de balises sémantiques.
Tom
Bonjour
Bien qu'ayant du mal avec les sites sombres et le peu de contraste des textes (problème de vision), je trouve malgré tout que le site est très réussi (code, design, optimisation des performances). J'aime beaucoup l'ambiance qui s'en dégage et je trouve les illustrations, les fonds sous les références bien choisis et en accord avec le reste.
je trouve bien aussi la page nos prestations... très détaillée, au moins, on sait ce que vous proposez :)
A part ça, beaucoup de remarques ayant déjà été faites, je n'ai pas grand chose à dire de plus, je re-noterai donc :
- une hiérarchie un peu faible (sur la page d'accueil, j'aurai bien vu les titres notre vision, nos compétences, nos valeurs en h3)
- un script après la balise d'ouverture body... je ne suis pas sûre, mais il me semble que ce n'est pas très bien
- enlever les px de l'image top.png (width="51px" height="20px")
- ajouter une page mentions légales (obligatoire), histoire de faire encore plus sérieux
En tout cas, bravo et bonne chance :)
@cilou : Merci beaucoup pour ton retour:
- En revanche: il existe bel et bien une page "Mentions Légales" --> http://www.weasylife.com/mentions.html
- Pour les scripts dans la balise body je ne pense pas que cela ne soit pas très bien, à confirmer par un expert.
- Une optimisation SEO serait un plus effectivement
- enlever les px de l'image top.png (width="51px" height="20px") --> Merci ! ^^
Tom
J'adore ! (Commentaire pas très constructif mais voilà :D )
Oups, autant pour moi alors, désolée, mais je n'ai pas vu où elle se cachait :)
Pour le js, je parlais du script inline (qui entre autre ne se met pas en cache dans ce cas de figure)
@clairobscur : On aime aussi ce genre de commentaires ;) Merci beaucoup! ^^
@cilou : Le lien vers la page Mentions Légales est sur la page de Contact --->
http://www.weasylife.com/contact.html
Pour le JavaScript, il y a du travail encore, mais nous le vaincrons et nous triompherons de lui au terme du concours c'est promis! Alea jacta est, et merci pour tes commentaires ! ^^
Valeurs de gris typo et autres calages de précision /
Voilà… l'essai est le maître-mot du travail, parfois on fait une remarque, une critique, et en testant on réalise que " c'était mieux avant ". En ce sens, les remarques doivent être assimilables, et pas trop péremptoires. Seul l'essai dans la durée prévaut.
J'aime beaucoup la remarque humoristique sur la victoire et le triomphe sur JS !
J'aime beaucoup, c'est vraiment classe. Si ce n'est cet affreux bandeau en V "votre devis gratuit" vu et revu et archi-revu. Un truc visible oui, mais tant qu'à faire un peu plus original et qui correspond à l'élégance du site.
Très beau dans l'ensemble !
Dommage de ne pas s'y retrouver à la navigation clavier.
Cela manquerait peut-être légèrement de contraste au niveau des couleurs.
Excellente continuation ;)
Bravo! L'ambiance générale est très agréable.
Juste une petite remarque : les lignes de texte ne sont pas assez interlignées dans la page blog.