Cascading Style Summer Refresh 2010
Colibr-e par Colibr-e
Voir en ligne http://www.colibr-e.fr
Après refresh
Note obtenue : 6.220/10
Voir en ligne http://www.colibr-e.fr
Note obtenue : 6.220/10
Les commentaires sont clos.
Avec ce footer on perd en place. Oui mais on gagne en class...
(Berthe au grand pied)
Commentaires
Bonjour à tous,
Quelques mots pour présenter mon site pour ce concours: Il a été entièrement refondu en HTML5 et CSS 2.1 (validé W3C).
Les images sont compressées via smushit, un contenu est clairement orienté SEO, des CSS normalement compressés, mais que j'ai remis en version "lisible" pour le concours.
J'ai eu une démarche d'amélioration progressive, en intégrant les contraintes des navigateurs plus anciens car, je préfère ne pas altérer la navigation de l'internaute (potentiel client) avec un message intrusif (même si je déteste autant que vous ie6 ...).
Du coup, les éléments CSS3 que j 'intégrerai (lorsque j'aurais le temps) seront par exemple les fonts serveur et quelques effets d'ombrages très certainement, mais peu, peut-être quelques effets Jquery, à voir en fonction de son évolution.
Au niveau ergonomie, un menu accessible et unique depuis n'importe quelle page, ainsi qu'un formulaire de contact présent en fond de page. Un contenu simple et épuré visant à inviter la prise de contact.
Une attention particulière a été portée sur la rédaction des alt et title.
Je vous souhaite une bonne navigation (et un bon vote de préférence ;o) ) !
Merci à Alsa pour l'organisation du concours !
Morgan
Très beau, propre, sobre. Du travail de qualité comme je les aime : bravo !
Cela semble plus abouti que la version précédente, même si j'ai encore du mal avec vos boutons "En savoir plus", je les trouve tranchant, carré, pointue et en décalage avec le reste de la mise en page.
J'aime beaucoup votre slogan "Concentrez-vous sur votre métier, nous nous occupons du reste !", en temps que communicant ça me parle. ;)
Bonne continuation,
Pierre
Bonjour,
Visuellement, c'est très réussi. Mais j'ai la même remarque que Pierre au sujet des boutons, et plus particulièrement de celui "Devis gratuit" qui semble posé là parce qu'il n'allait nulle part ailleurs.
Dans le code, par contre, il y a des détails qui me dérangent beaucoup :
* Tu dis avoir porté une attention particulière à la rédaction des title, tu n'aurais pas du. La grande majorité de tes titles sont inutiles, car redondant, ils gênent plus qu'ils n'aident. L'attribut title n'a rien à faire sur une image (alt suffit) et doit être utilisé sur les liens uniquement si nécessaire : pour apporter une information supplémentaire à l'intitulé du lien et sans laquelle l'utilisateur serait totalement perdu.
* L'utilisation de h2 et h3 sur le "slogan" puis la liste de mots clés représentant les activités de l'entreprise est une très mauvaise utilisation des éléments de titrages. Ce ne sont pas des titres !
* Les h3 du footer devraient être des h2 dans la logique de la hiérarchie des titres ils sont des sous-titres de l'élément h1 et non de l'élément h2 qui les précède : "travaillons ensemble".
* Il est préférable de regrouper les scripts en aussi peu de fichiers que possible et de les placer en fin de document.
* Une liste serait plus pratique pour la navigation.
* La meta keyword ne sert plus à rien de nos jours et prend donc de la place pour rien dans ton code.
* Les logo "valide W3C" ne font pas tellement professionnel.
* Ce n'est pas vraiment agréable de devoir supprimer le contenu des champs de formulaire pour pouvoir entrer le sien...
@PierreA : Merci! en effet, pour les boutons, je pense qu'un coup de CSS3 ne leur fera pas de mal, ça fera parti des "évolutions"
@Laurie-Anne: Merci de ton retour aussi construit, et de tes remarques, elles seront là aussi prises en compte dans l'"évoultion" du site. Je suis d'accord avec toi pour les h2/h3 qui servent de liste alors que je n'aurais pas dû. Il y a en effet quelques travaux supplémentaires à prévoir (Jquery pour les formulaires, CSS3 ) et du nettoyage ! certains qui étaient sur ma ToDoList, et d'autres auxquels je n'aurais pas pensé.
Merci !
J'aime beaucoup. Site clair et simple qui donne justement envie de prendre contact.
Ça manque peut-être un peu de folie/chaleur au niveau graphique (la combinaison bleu/noir fait un peu froid) mais c'est tout de même propre et très joli.
Bravo et bonne chance !
L'ancien design semblait déjà réussit, celui là l'est tout autant !
Clair, simple, informations bien présentée et facilement accessibles, code valide CSS et HTML, excellent affichage sous IE6... pas grand chose à redire !
Seul petit truc : privilégier du png pour les images du header et du menu, car on sent trop la compression JPG... le png sera plus lourd (quoi que pour le menu, peut-être pas !) mais ça sera bien plus agréable. :)
Très bon travail !
Bon bah moi, j'aime. J'aime beaucoup même. C'est clair, on trouve facilement l'information. J'aimerais pouvoir en faire autant.
Si je voulais être tatillon, je parlerais de l'encodage en iso-8859. Si tu veux t'exporter à l'étranger, pense à l'utf8 de suite ;) .
Très classe et sobre, c'est très joli. =) Même si du coup, c'est peut-être trop sobre (?)
Clair et efficace. Peut-être un peu tristoune, trop sage ou conventionnel ?
L'ensemble est cohérent néanmoins.
Très bon travail, mise en page efficace. L'esthétique est un peu froide et tranchante, mais les contrastes entre la charte du site ( bleu/noir ) et les visuels colorés sont réussis. Sur le plan de la communication, je trouve la flèche avec le " vous " un peu maladroite, redondante : le siège vide suffit à inviter… À ce niveau de qualité, et de référence, les portraits pourraient être plus soignés ( effet d'ombre portée sur celui de Morgan, éclaircir un peu celui de Christelle ). Le troisième portrait manquant fait problème…
@Ariakan972 : je testerai avec du png pour voir ce que ça vaut :)
@Toniob : pour l'UTF-8, j'y ai pensé, mais si je dois m'exporter à l'international, je pense que je referai le site ;)
@designer1959 : merci du jugement sur le contenu ! J'y ai pas mal passé de temps pour trouver/ réutiliser des accroches pertinentes. Je note votre avis sur la flêche, je l'ai précisée afin qu'elle attire le regarde en premier. Pour les photos, de "vraies" photos sont en train d'être réalisées :)
@atelierwebactif,@Ariakan @Toniob, @rionma33,@iManu,@designer1959 : Merci des compliments, il est vrai que je suis adepte de design sobres et épurés au maximum quitte à paraître froid quelques fois. Je prends note de vos remarques constructives.
@Colibr-e : J'ai eu le plaisir de croiser ta critique sur mon site merci beaucoup!
Pour ton site je crois que tout est déjà dit au dessus, je me suis donc interessé principalement au contenu et je dirais simplement deux ou trois choses:
Sur la page service:
[Que vous soyez particuliers, professionnels, agences web, n'hésitez pas à nous contacter. La liste des services cités ci-dessous n'étant pas exhaustive, n'hésitez pas à prendre contact avec nous. ]
Il y a une répétition avec deux fois le n'hésitez pas à prendre contact avec nous.
D'autre part, les entreprises me font souvent la remarque sur le contenu présent sur les sites des web agency et trouvent très souvent dommage qu'il soit rarement exhaustif ou détaillé (sans faire dans l'extrême on est d'accord).
En étayant un peu ton contenu notamment sur la page service ta communication n'en sera que meilleur selon moi. Concernant les couleurs de ton site c'est tous ce que j'aime alors de ce côté là rien à redire, le design en général est très simple et gagnerait à être un peu travaillé encore selon moi (sans frou-frou/bling-bling bien entendu toujours dans l'identité visuelle que tu veux véhiculé)
Un peu de design sur les champs du formulaire de contact serait de bon goût (deux ou trois propriétés css) car sinon ça fait vraiment formulaire de base.
La bandeau noir (le deuxième footer si je puis dire) est inutile selon moi et c'est également dommage pour le devis qui redirige de plus vers le formulaire de contact son utilité en devenant de fait limité.
J'ai également testé d'envoyer un message sans mettre aucune information et là surprise: Votre message a bien été envoyé. Il sera traité par notre équipe dans les meilleurs délais. // Je précise le formulaire était vide! ;) Une petite vérification du dit formulaire s'impose je pense! ;)
Dans l'ensemble j'espère avoir été constructif et je trouve que le site est en très bonne voie, je t'encourage vivement
Bonne continuation
Tom
@Shokojjo Merci beaucoup de ces remarques complètes. En effet, comme tu as pu le constater, il y a quelques éléments que je n'ai pu mettre en place dans les délais (bien que raisonnables) du concours.
La validation du formulaire est en effet déjà disponible sur mon serveur de dev et je la mettrai en place dès la fin du concours.
Merci en tout cas de tes remarques, je prends note!
Bonne chance pour le concours !
Précision sur ma remarque à propos de la flèche et du vous : ce sont les deux que je trouve redondants. Le siège vide me semble suffire à évoquer la place du client, par métaphore. Trop pointer les choses les alourdit parfois. J'ai hésité à trouver le " ! " sur l'image de l'oiseau mais là, ça rajoute une pointe d'énigme. Ce sont des détails mais à ce niveau d'efficacité, tout compte, n'est-ce pas…
Le "Vous" avec la flèche ça peut être interprété comme "Reste à ta place"...
Mais sinon le site à l'air sérieux sans être austère, il fait une bonne première impression et met en confiance.
Bonjour,
Il est bien ce nouveau look, rien à redire ou pas grand chose. Sauf que le cook est celui des meilleurs thèmes professionnels (genre ElegantTheme), donc juste une copie avec quelques modifications de css. Bien pour un site pro, mais pour un concours sur l'effort...
Bonjour Chamamor,
Je me permets de rebondir sur ton commentaire.
Je ne comprends pas trop ta remarque sur "la copie avec quelques modifications de CSS" : si tu avais plus fait attention, tu aurais pu voir que mes CSS sont "faits main" et qu'il ne s'agit pas là d'un thème "elegantTheme" comme tu le sous-entends mais bel et bien d'un design que j'ai travaillé (en tenant compte bien entendu de ce qu'il se fait aujourd'hui comme présentation) .
Bref, comme remarque constructive et argumentée, j'ai vu mieux.
@designer1959 : Merci pour ta précision, j'en prends note !
@Shunkin : pas faux, je ne l'avais pas vu comme ça, du coup, je supprimerai cette flèche à la fin du concours et laisserai le siège vide :)
J'aime bien la nouvelle version. Mais elle est peut-être trop sobre, il manque un petit plus de "folie" à mon avis. Une remarque sur la largeur des certaines phrases qui ne facilitent pas leur lecture.
Sinon, c'est pas mal et je rejoins @Laurie-Anne sur les titles.