Cascading Style Summer Refresh 2010
Christophe Béghin par C_Beghin
Voir en ligne http://www.christophebeghin.fr/
Après refresh
Note obtenue : 7.000/10
Voir en ligne http://www.christophebeghin.fr/
Note obtenue : 7.000/10
Les commentaires sont clos.
C'est dans ces moments que j'me dis que j'vais changer
(Maître Gimp)
Commentaires
Bonjour à tous,
Voici donc mon nouveau portfolio tout fraichement sorti des ateliers à l'occasion de Cascading Style Summer Refresh 2010.
Les mots d'ordre de ce projet furent : élégant, contemporain, interactif et accessible.
Pour le développement j’ai fait le choix des nouvelles technologies en utilisant la combinaison CSS3/HTML5/jQuery que j'ai eu plaisir à découvrir tout au long de la conception.
De plus la création d'une version mobile du site me tenait à cœur afin de prendre en compte ces nouveaux médias de plus en plus présents en termes de visites! Et donc de rendre mon site aisément consultable depuis n’importe quel terminal.
J'espère que le changement vous plait, n'hésitez pas à voter pour moi et à me faire des retours et bonne chance à tous les autres candidats!
Bonjour C_Beghin,
Je trouve ton site très class et pro, bravo ! J'aime beaucoup !
:)
Yep !
J'aime beaucoup ton nouveau design, très classe et pro comme dit plus haut.
Dommage que je ne puisse pas voter :s (inscription trop récente)
Le design fait un peu template achetable. :D Mais mince, c'est vraiment classe quand même !!!
Beau boulot !
Valide XHTML/CSS, superbe utilisation de JQuery (j'adore les messages d'erreur du formulaire, ainsi que la page de profil !),... non vraiment nickel !
Une petite sanction pour le non affichage du site sous IE6...
Il n'est pas si compliqué que ça à afficher ce site, je pense qu'il mériterait au moins une version "regardable" même si on enlève des effets. Mais bloquer le site entièrement sous IE6 sans même proposer un lien pour le visionner avec des erreurs, c'est pas génial...
Ma meilleure note en tout cas jusqu'à maintenant ! :)
Bon boulot !
@p0ulpe et @Colibr-e : Merci beaucoup pour vos commentaires, ça me fait chaud au coeur!
@Ariakan972 : Que dire... Merci! Je me suis en effet beaucoup attaché à la qualité du code, à son accessibilité et à la navigation au clavier tout en mettant en place certains effets javascript pour améliorer l'expérience utilisateur, et visiblement ça marche!
Concernant ie6 ça a été un long débat intérieur, car en effet, en réalité le site est utilisable sous ie6 même sans le retoucher (à l'exception près du png), mais ma décision c'est inscrite dans une politique d'avenir pour le confort de tous, internautes et webdesigners.
En tout cas merci de vos commentaires!
Hello,
En effet, les messages du formulaire sont cools :)
L'ensemble fonctionne super bien, même si c'est un peu impersonnel et froid (critique un peu lancée comme ça : en réalité j'aime beaucoup ton design ^^).
Par contre, pour IE6, je suis pas d'accord avec ton message ci-dessus, d'autant plus que ton site fonctionne avec le dinosaure !!! C'est quelque chose à valoriser pour toi ! D'autant que les derniers utilisateurs d'IE6 n'en ont pas vraiment le choix et beaucoup d'entre eux sont au courant que leur navigateur est obsolète mais ne peuvent pas en changer...
C'est joli mais pas très original...
J'aime beaucoup ton site. il est sobre, efficace et bien réalisé. Les effets JS sont sympas et ne font pas du tout "too much". Petite critique sur les couleurs (gris, vert-bleu, noir) que je trouve un peu ternes, mais bon, les goûts et les couleurs... :)
@atelierwebactif : Je suis assez d'accord pour dire que les couleurs sont ternes, et côtés design personnellement je trouve qu'il fait assez template achetable pour reprendre l'expression de @Ariakan972
Sinon dans l'ensemble c'est un bon travail, qui promet de jolie choses pour la suite...
Gros plus sur la validation du formulaire! ;)
Bien dans l'ensemble, mais pour l'accessibilité, on repassera (texte blanc sur fond gris, ça casse les yeux).
Dommage aussi qu'il faille se servir de la barre de scroll horizontale en 1024x768.
Dans l'ensembe des sites proposés au CSSR2010, je pense que c'est le plus abouti en Front-end, sombre et subtile on ne demande rien de plus au web. Allez peut-être un rajout de pictogrammes serait bien venu
Je suis fan des messages d'erreur de ton formulaire de contact (en scripted typo rouge), ça ressemble beaucoup à ce que j'ai fais sur mon blog également (mais pas pour les messages d'erreur de formulaires)
D'autres super trucs d'usabilité:
- le bouton #top qui apparait quand on défile vers le bas
- le menu vertical qui suit l'écran quand on défile vers le bas
Enfin le tout est HTML5, et y'a un message cadeau pour les utilisateurs d'IE6. Bien joué ;-)
@audrasjb : Merci! Ah le débat IE6... Je crois que les webdesigner ont aussi leur rôle à jouer ici, et que de toute manière ceux utilisant toujours ce navigateur ou qui en sont forcés, ne seront certainement pas les potentiels visiteurs de mon portfolio, il ne faut pas non plus perdre cela de vue ;-) C'est vrai que comme je l'ai expliqué ici cela a été un vrai choix de ma part de bloquer ce navigateur, car le site était parfaitement rendu, alors oui peut-être que certains sont attachés à la rétro compatibilité et que cela me sera préjudiciable dans les notations, mais je maintien mon choix.
@juliegri : Je le conçois certes. Mais après plusieurs tentatives infructueuses de réalisations d'un design plus personnel, je me suis tourné vers quelque chose, qui somme toute me ressemble et me défini bien, de plus classe et sobre. Peut-être trop classique en effet, mais je pense efficace!
@atelierwebactif et @Shokojjo : Merci de vos commentaires! En effet le formulaire de contact a été un gros travail, avec validation côté front en js, en back en php (bien entendu...) et surtout envoi en Ajax avec message d'erreur/succès et envoi classique en php (donc rafraichissement de la page) si js désactivé. D'ailleurs tout le site reste consultable avec le js désactivé (sous un navigateur moderne car j'utilise les balises html5), c'était pour moi une condition sine qua non.
@Ericf : Tu as mis le doigt, et ton rang d'expert Accessiweb prenant tout son sens, sur le gros point noir du site... Les contrastes, bien que primordiales pour une bonne lisibilité par tous, sont une chose très difficile à respecter dès lors que l'on souhaite élaborer un peu plus sa composition graphiquement parlant, obtenir un contraste ne serait-ce que AA avec un texte blanc nécessite un fond, non pas relativement, mais TRES foncé... dès lors il faut soit se contenter d'utiliser des textes sombres sur fond clair, ou partir sur un environnement très sombre... Très limitatif. Mais tu seras d'accord avec le fait que l'accessibilité ne se résume pas à cela, et si d'autres problèmes majeurs d'accessibilité sont présents je serai ravi que tu m'en fasses part!
@david-vincent : Un grand merci à toi! Pour les pictos c'est une réflexion que j'ai eu ce soir, en voyant d'autres créas, je me suis rendu compte que mon contenu était un peu trop plat, car uniquement composé de texte, alors oui des pictos/shémas/illustrations auraient en effet pu être un plus! J'y réfléchirai et essayerai de mettre ceci en place une fois le concours terminé ;-)
@CyrilMazur : Ahah J'attendais justement que quelqu'un joue un peu avec ces animations! A mon goût conserver un menu de navigation interne toujours visible est un agrément très plaisant, si ce n'est indispensable pour la navigation sur une page ayant une forte hauteur!
En tout cas merci à tous pour vos commentaires et de donner quelques minutes de votre temps à naviguer sur mon site et à me faire ces retours très enrichissant!
Bloquer l'accès à IE6, c'est la pire erreur à faire pour un designer web...
Entre les titres caché, le contraste insuffisant et les alt vides (sur images porteuses de contenu) on repassera pour l'accessibilité...
@Christophe : oui bien sûr, ce n'est pas moi, qui n'ai aucun talent de graphiste, qui vais te contredire. Et je suis plutôt amateur des chartes graphiques comme la tienne, que j'aime beaucoup, malgré le contraste nettement insuffisant.
Au delà de ces petites imperfections sur ton site, ce que je voudrais pointer du doigt, c'est la mention "site accessible" qu'on voit fleurir un peu partout, à tort, sur des sites qui ne respectent pas des critères élémentaires d'accessibilité.
Partant de ce qui est visible sur ces sites auto-proclamés accessibles, les clients pensent que l'accessibilité n'est qu'une simple formalité et qu'obtenir une labellisation Accessiweb va se faire en 3 ou 4 jours, intégration comprise.
J'en sais quelque chose, j'ai en ce moment 3 projets en cours ou à venir pour lesquels les clients ont demandé une labellisation Accessiweb de niveau Argent. Pour l"un d'entre eux, un ministère, l'affaire devait être réglée en 4 jours (pour une refonte complète de site, une dizaine de gabarits), parce "l'accessibilité, c'est simple et il n'y a pas beaucoup à faire" (écrit dans un mail).
Bref, on s'écarte du sujet, ton site est tout de même de très bonne facture, même si comme Laurie-Anne, je déplore le blocage à IE6.
C'est du très bon boulot point de vue design, sans aucun doute une des meilleures propositions du concours (pour celles que j'ai vues pour le moment).
Néanmoins, elle n'est pas parfaite :
- les alt vides sur la page d'accueil font tâche,
- le site a un scroll horizontal en 1024 (ça gâche le niveau de ta réalisation, surtout que le surf en 1024 est tout à fait possible sur ton site, je pense que c'est une bourde d'inattention),
- pas d'erreur 404 personnalisée ?
- les perfs peuvent être largement et aisément optimisées (mais lisez le tuto sur Alsa nom d'un gadget ! :) ).
Bref, à magnifier !
@Laurie-Anne : " la pire erreur à faire pour un designer web"
C'est ton point de vue ;-). Je ne dénigre pas IE6, et je n'en ai jamais dis de mal, car non, il ne faut pas dire du mal d'IE6 ( ;-) ). Mais après analyse des statistiques de mon ancien portfolio, IE6 ne représentait que 0.8% des visites, provenant toutes d'un accès direct, et donc certainement uniquement lié à des tests sous ce navigateur et très probablement effectué en intégralité par moi-même... Alors un site ne devrait-il pas être conçu en fonction de ses visiteurs potentiels? IE6 a plus de 10 ans, Microsoft eux-même informent les derniers utilisateurs qu'il faut passer à une version plus récente... On a IE7, IE8 et même IE9 maintenant... Alors pourquoi assurer un support IE6, pour "prouver" que je maîtrise l'art de l'intégration? Que je peux coder un site navigable même sur un navigateur peu à l'écoute des standards? What would be the point here?... Je sais bien que tu as une position très ferme sur le sujet et que tu ne changera pas d'avis (d'ici 10 ans peut-être quand même?), mais peux-tu me dire pourquoi faut-il assurer un support IE6 (en considérant que l'argument sur la part de visiteur qui l'utilisent toujours ne tient pas comme démontré précédemment)?
Pour l'accessibilité, je n'ai pas prétendu avoir réalisé un site totalement accessible, loin de là, mais beaucoup d'efforts se sont portés dessus. Bonne navigation au clavier, présence de l'attribut lang, des title explicites, des abréviations soignées etc... Et oui ce n'est pas parfait (notamment les alt des images en page d'accueil qui sont un véritable oubli). Mais ici ton jugement me semble un peu atif. Les titres cachés là aussi ça mérite débat, je suis pour, tu es contre... Mais qui a tort ou raison? ...
En tout cas merci d'avoir pris le temps de regarder ma soumission, même si j'aurais apprécié un commentaire un peu plus détaillé ;-)
@Mr_SATAN : Et bien merci! Content que cela te plaises!
@Ericf : Loin de moi est de prétendre que mon site est accessible en totalité, encore moins répondant à un label... J'ai juste essayé de le rendre accessible dans la mesure du possible et dans le temps imparti ;-) Je déplore aussi le comportement que tu cites dans ton commentaires, et si j'ai pu m'y apparenté alors c'est issu d'un soucis de communication que je vais rectifier au plus vite. Car j'ai connaissance des hautes normes et contraintes qu'un site internet doit respecté pour être véritablement accessible, et les mettre en place nécessite effectivement un long travail et une très grande expertise que je n'ai pas à l'heure actuelle. Disons que sur mon projet j'ai fait un effort vers l'accessibilité en soignant les points cités précédemment ;-)
Merci beaucoup d'avoir pris le temps de me répondre!
@Nico3333fr : Les "alt" sur la page d'accueil : grosse erreur en effet! Mais il vaut mieux des "alt" vides que pas de "alt" du tout!
Le scroll horizontal était nécessaire à cause des messages d'erreur lors de la validation du formulaire de contact en js nécessitant alors une largeur de page d'au moins 1200px. C'est ici un problème de mise en page, l'idée de cette validation m'étant venu qu'une fois le site totalement "designé", c'est dommage en effet...
Page 404, bon sang elle est faite! J'ai du oublié de mettre la règle apache dans le .htaccess quel idiot! Il me semble que l'on a plus le droit de retoucher à son site durant les votes, je la mettrai donc en place à l'issue du concours (si tu veux une url d'accès, je te la fournirai par message privé ;-) )
Pour les perfs, c'est vrai, mon site est en fait resté dans son état de développement, je fais généralement l'optimisation (des js, css, gzip and all) avant la mise en ligne finale, qui pour moi n'interviendra qu'une fois le concours terminé, car je vais et j'espère y apporter des modifications suite à vos commentaires!
En tout cas très content que mon site te plaise!!
C'est classe, sobre, élégant. J'aime ! Avec des ptites touches de js par ci par là bien placées. Bravo pour ce site que je trouve tout simplement efficace =)
Bonjour jeune homme ;)
c'est pas mal du tout, j'aime bien ton logotype (nom et prénom) mais moins la typo de "webdesigner" (trop austère au regard du reste).
Pour la manque de contraste texte/fond, tu peux peut-etre (dsl mes accents circonflexes ne marchent pas) l'atténuer avec une ombre portée sur le texte (ce qui pourrait redéfinir le rapport minimal de contraste texte/fond > à suivre).
Sur l'ensemble du design, c'est propre et dans l'air du temps mais comme déjà dit ça manque un peu d'originalité ;)
Allé hop 5/10! Mais non je plaisante, ça vaut quand meme un peu plus que ça ;)
@rionma33 : Merci beaucoup pour ce commentaire! Tu reprend exactement les adjectifs qui étaient mes mots d'ordre, génial!
@Hermann : Il y a une ombre portée sur le texte, mais très faible il est vrai, je l'ai même affaiblie en cours de route, car justement une ombre trop forte sur un texte d'une taille de 12px (environ) était trop "tranchant" la police devenait trop affinée et donc encore moins lisible :-/ Pas évident ces problèmes de contraste! En tout cas, merci pour ton commentaire ;-)
Simple, efficace, agréable, avec un joli travail sur les détails, personnellement j'aime beaucoup, bravo !
@3arly3F : Merci pour ton commentaire, ça fait plaisir!
N'hésitez surtout pas à soumettre vos critiques (positives comme négatives) c'est avec vos retours que j'arriverai à avancer et à reporter les corrections sur mon site, et implicitement sur mes futurs sites aussi!
En tout cas un grand merci à tout ceux qui ont déjà voté pour mon site et qui ont pris le temps de le commenter!
Je n'avais pas de doute sur la gentillesse et l'implication de la communauté Alsacreations, mais là je suis vraiment ravi!
A bientôt!
J'aime bien les messages d'erreur dans formulaires, même si le fait d'avoir utilisé des images limite leur utilisation (difficile à localiser, toussa).
Les effets sur les ancres pour le menu navigation sont fluides et apportent un sentiment de fluidité.
Sur le portfolio, le scroll bug un peu quand on clique sur une miniature (en tout cas sous Google Chrome).
Niveau design ça fonctionne bien. En revanche, niveau accessibilité, le contraste entre le texte et le fond est vraiment trop faible et risque de rebuter nombre de seniors ou de déficients visuel (ce qui dans mon cas est un peu la même chose ;)))
@C_Beghin : Je viens de lire ton commentaire du 29 sept. dernier sur IE6 et j'approuve totalement. Je n'ai moi même pas du tout assuré une compatibilité IE6 parce qu'à un moment donné, je pense qu'il faut forcer la main des derniers dinosaures du web ! NO MORE IE6 ! A ce sujet, il y a d'ailleurs un wallpaper du mois d'octobre assez réussi sur le thème : http://www.smashingmagazine.com/2010/09/30/de... (le 2ème)
Introduction/
À mon tour d'approuver la position sur IE6, trop d'allégeance nuit, et cette attitude conservatrice de compatibilité à tout crin me fait penser à la position occidentale envers l'ancien bloc de l'Est, les systèmes totalitaires, on le sait, ( et le monopole est totalitaire par essence ) sont maintenus de l'extérieur par trop de diplomatie, vient un temps pour ne plus jouer le jeu de la stupidité. Quel paradoxe de voir tous les défenseurs des standards faire sans cesse autant d'efforts d'adaptabilité pour le navigateur qui s'est moqué des standards pendant si longtemps. Et j'ai dit ailleurs que ceux qui " défendent " IE6 défendent un spectre du passé.
Venons-en au site.
Un excellent travail assurément.
Je supporte très mal deux choses que ce site utilise : les typo avec bords ombrés ou outline, et les sites qui s'étendent sur toute la largeur de l'écran. Mais cette fois, la maîtrise de ces deux paramètres est quasiment réussie.
L'auteur qualifie son travail de " élégant, contemporain ", je le trouve plus classique que contemporain, mais ce n'est pas un reproche, loin de là. Le contemporain, trop souvent est tissé d'effets de mode assez agaçants, et très vite dépassés. Ce que je trouve particulièrement important pour un site de graphisme est l'intégration des visuels, sans que le fond ne prédomine, le folio est particulièrement réussi de ce point de vue. Le travail en graphisme est bon également. J'apprécie très spécialement aussi la qualité des fondus du diaporama, souvent les saccades, les effets de damiers etc. sont médiocres, perturbants, ils sont gérés ici avec efficacité.
La force de ce site est que tout est traité avec un soin égal, par exemple les prises de vue des travaux sur fond bois, où la profondeur de champ est savamment étudiée.
Le motif en haut à droite indique, je suppose, que l'auteur fait partie de l'équipe d'Alsacréations ?
Mes réserves /
L'utilisation de la typo cernée me semble acceptable pour les titres, mais passe mal sur les petites tailles du texte. Les reproches sur la lisibilité sont inappropriés.
Parler à la première personne, à la page d'accueil me paraît une bonne chose et la signature manuscrite, une bonne idée trop peu utilisée sur le web. Néanmoins, à la place de "grâce auquel vous pourrez me découvrir", je préférerai peut-être lire " vous pourrez découvrir mon travail ", c'est un peu différent tout de même. Si je me permets de finasser sur ce détail, c'est que ce texte me paraît soigné et clair dans sa présentation.
Je déplore toujours que l'on suive, souvent par paresse, les mauvaises règles de typographie américaine, alors que la typographie française est bien plus raffinée et SÉMANTIQUE. Je fais allusion aux espaces —insécables— avant les signes " ? ", " ! " et " ; ". À la page d'accueil " bonne visite! " ou à la page projet " de n'importe où! " sont visuellement d'autant plus gênants avec une typo empâtée.
Derniers pinaillages avant le verdict /
Il me semble que la carte de visite Créa2clic a été imprimée en numérique, ou du moins le massicotage n'est pas parfait sur le bas de la carte.
Autodidacte s'écrit sans trait d'union.
On aura bien compris que mes quelques réserves sont mineures. Eh ! Mon bon Monsieur, c'est que lorsque le travail est si bon, les critiques ont bien peu à se mettre sous la dent… Je n'oublie pas de dire que la sobriété des contenus est parfaite, que la structure du site est irréprochable, et en plus, le CV se termine par une pointe d'humour inattendue : " Je possède également le permis B. "
Ayant regardé tous les sites soumis à ce concours, je les note(rai) et commente(rai) tous sans exception, sans ménager mon temps. C'est donc un contentement assez vif de découvrir le travail qui, à mon sens, mérite de remporter ce concours.
'Faut reconnaître le talent. J'ai été ébouli. Rien à redire, sinon que c'est un peu risky de mettre son numéro de portable en textuel, une image aurait sans doute été mieux. Bravo.
C'est classe, pro, j'aime beaucoup. Encore un commentaire pas constructif...;-)