Cascading Style Summer Refresh 2010
JbA par audrasjb
Voir en ligne http://jeanbaptisteaudras.com/
Après refresh
Note obtenue : 6.000/10
Voir en ligne http://jeanbaptisteaudras.com/
Note obtenue : 6.000/10
Les commentaires sont clos.
Ne vaudrait-il pas mieux monter le blanc en neige avec style que mettre le jaune en div avec classe ?
(Joséphine ange gardien)
Commentaires
Salut les alsanautes :)
Ici, le royaume de la sobriété : JbA lave plus blanc que blanc pour son nouveau design :D
Au menu : html5, un peu de css3, une touche de jQuery, une cuillerée de micro-formats, pour un site sans prétentions, si ce n'est de présenter mes différentes activités de façon claire et sans chichis :)
A terme, je passerais tout sous Wordpress, afin de gérer trois parties supplémentaires dont les contenus seront dynamiques : une partie labo avec des expérimentations sur les nouvelles techniques de webdesign (elle existe déjà, mais n'est pas encore chartée), une partie pour mes élèves et une pour mes clients :)
A en voir certaines (alsa)créations des autres membres, je n'attends pas de lauriers particuliers pour cette modeste création ^^ N'hésitez pas à commenter je me ferais un plaisir de corriger ce qui doit l'être au terme du concours :) Allez, je file consulter vos créations !
Plutôt sympa. :)
Dommage pour la validation du CSS, des solutions en framework JS auraient pu être envisageable, surtout qu'il n'y a pas grand chose de "techniquement dur" à réaliser pour laisser ta page valide.
Par contre, je trouve ça bizarre : dans activités universitaires > quelques travaux, le texte est en italique presque tout le temps, ça nuit à la lecture je trouve... C'est normal ?
C'est dommage, tout le reste du site est accès sur sa grande lisibilité ! :)
J'aime bien en tout cas.
Salut Ariakan972, et merci pour tes remarques :)
En ce qui concerne CSS3, je considère que ma feuille de styles est "valide" dans la mesure ou ce sont surtout les préfixes css3 provisoires qui me donnent des erreurs. J'ai aussi voulu profiter des propriétés CSS3 pour m'amuser un peu, et ne pas trop surcharger les pages avec un grand nombre de scripts. Evidemment, il s'agit de mon site perso. Pour un site client en prod, il n'y a pas les mêmes contraintes, et ta remarque est à ce titre tout à fait pertinente ;)
En ce qui concerne les textes en italiques dans mes travaux de recherche, il est d'usage dans les bibliographies scientifiques de passer les titres des publications en italiques :)
Merci pour ton compliment sur la lisibilité de mes pages (sauf pour l'italique, mais c'est voulu..), c'était exactement mon objectif :)
Bien joué, j'aime beaucoup le design minimaliste :)
coucou audrasjb
Sobre mais classe j'aime bien, par contre je suis d'accord avec ariakan972 dommage que le texte prédomine sur tes travaux!
@audrasjb : C'est vrai que tu laves plus blanc que blanc sur ce coup là, mais j'aime les design minimalistes et là faut reconnaître c'est assez réussit! ;)
Bonne continuation et bonne chance pour ton doctorat ! ;)
Simple, clair et joli, bravo
@Franquito :merci beaucoup, moi aussi :)
@anais-id : merci aussi. Je t'avoue que vu le peu de disponibilités dont je dispose pour les prochains mois, je ne cherche pas spécialement à me "vendre", d'où le peu de mentions faites à mes travaux dans la rubrique prestations web. Faut dire que je travaille pas mal en sous-traitance... Pour ce qui est de mes travaux universitaires, comme il s'agit de travaux non publiés, je ne les mets pas plus en valeur que ça, mais je me rends compte que j'ai oublié les liens de téléchargement, je vais les rajouter - sans faire de correctifs css :)
T'inquiète pas que si un jour je publie dans Hermès (une revue CNRS assez prestigieuse et ... inaccessible), je la mettrais en valeur comme il faut !) :
@Shokojjo : Merci beaucoup ! Moi aussi j'aime les design minimalistes :) Pour ce qui est du PhD, ce n'est as une question de chance, mais plutôt de rigueur scientifique, un peu comme la production de bon code xhtml strict... :D
@loicbcn : Merci beaucoup à toi !
Ah, j'ai oublié dans ma présentation : pour les puristes, y a aussi une zoulie page 404 :)
Design dans la tendance minimaliste, c'est sympa!
Malheureusement la police a un peu de mal à passer sur mon poste, dommage car cela nuit à la lisibilité de tout le site!
@TiK : tu pourrais me donner ta config s'il te plaît que je regarde ça ? Merci d'avance :)
Bonjour
Graphiquement, je trouve que cette version est jolie et plus gaie avec juste les petits ronds en couleurs.
Le code est très pro, petits bémols à ce niveau de compétences... les tailles de police en pixels et l'absence d'une feuille de style pour l'impression
@cilou : merci pour ton retour :)
Hum, pour les tailles en pixel, tu as tout à fait raison, j'aurais pu prendre le temps de passer en cadratins c'est clair... mea culpa.
Quant à la feuille de styles destinée à l'impression, je t'avoue que cette feuille de style est prête, j'ai failli la mettre en ligne hier soir en douce mais je me suis dit que ça ne serait pas très correct... elle attendra donc la fin du concours ;-)
AUDRASJB: "Personnellement, je t'ai proposé quelques critiques et tout ce que je reçois comme réponse, c'est un retour sur le pédantisme de ma présentation type CV... Ok. Oui, c'est un site de présentation, mais 1/ là on parle de ton site (fais alors l'effort de plutôt le dire dans mes commentaires alors, c'est plus constructif et sympa)"
OK OK me voila...
Je me permets de me citer pour se remettre dans le contexte:
"le fond est là, déjà ça vaut toutes les présentations pompeuses style curriculum vittae"
En fait on c'est mal comprit, le style de ta présentation est très bien j'ai rien à dire sur l'aspect graphique, c'est nickel. Par contre c'est ta présentation, le contenu que j'ai trouvé pompeux (au sens mélioratif j'entends, ton cv est impréssionnant...) mais par contre, ce contenu ne m'intéresse pas du tout. Il ne m'apporte rien du tout. Moi je met de la musique à disposition gratuitement, elle est entièrement libre de droit et ça je trouve ça intéressant. Je t'ai donc noté (comme tout le monde d'ailleurs) en divisant la notation en deux partie. Une pour le contenu où tu ne marques malheureusement aucun point vu que je n'y est pas trouvé mon compte et une partie présentation du site où je t'ai attribué 3 points sur 5 car je la trouvais bien faite, propre mais manquant quand même un peu d'originalité.
J'ai pas un kilo de pommade à passé désolé, j'espère cependant t'avoir donné un avis différent des autres qui te permetra de voir ton site sous un jour nouveau et qui te donnera peu être envie de meubler les blancs avec un peu de fun et de couleurs. Regarde le site d'anais-id, je l'ai trouvé vraiment sympa celui là malgré que le contenu ne m'interpelle pas plus que ça...
Bonjour,
J'aime bien la présentation, propre, claire, facile de repérer.
Ce que j'aime moins et qui me dérange vraiment, c'est la police de caractères "FolksRegular" pour le texte. Dans le menu, les titres, tout ce qui est texte court ça va, mais pour les textes conséquents je trouve ça très fatiguant à lire.
@negstek : merci d'être passé :) Pour te répondre rapidement, je dirais que chacun d'entre nous se fait sa propre grille de notation. Pour ma part, je note principalement la structuration, la sémantique et le respect des spécifications (que ce soit du HTML5, du XHTML strict, transitionnal voire frameset. La créativité et le design viennent après et permettent de passer d'une bonne note à une très très bonne note ;)
Les contenus proposés par les sites participant aux concours n'influencent donc pas vraiment mes notes. Mais chacun note comme il le sent :)
Concernant ma présentation "pompeuse", ce site n'as pas d'autre ambition que de me présenter et me permettre d'afficher une identité numérique contrôlée en cas de googlage de mon patronyme. Donc oui, pas de musique à proposer en téléchargement :)
Merci pour ton avis :)
@Shunkin : merci pour ton avis aussi :) Pour la famille typo choisie, j'avoue qu'elle me plaît pour l'affichage du texte, mais je me suis aussi rendu compte que suivant les configs, elle n'a pas forcément toujours un rendu très heureux :\
(les utilisateurs de moteurs basés sur webkit sous mac étant comme d'habitude privilégiés par le lissage des polices dû a leur config...)
En tout cas, merci pour ton retour, je vais certainement en tenir compte et peut-être finir par passer à quelque chose de plus classique pour les textes ;)
Pour améliorer l'affichage de la police, du moins sous Safari et Chrome pour Windows, tu peux rajouter :
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
Dans la CSS pour l'élément "body".
Hello Shunkin :)
Ah oui, c'est vrai qu'il y a aussi ces propriétés, je les avais totalement zappées. Merci du rappel :)
Après avoir regardé attentivement ce site, au tout début du concours, j'y reviens pour le commenter après en avoir regardé et commenté une bonne cinquantaine, et avec l'intention de tous les commenter et noter.
Eh bien, mon cher Audrasjb, nonobstant l'agacement de certains de vos commentaires, ici ou là, j'ai le plaisir de vous dire que votre site me plaît bien.
Laver plus blanc que blanc est toujours un pari audacieux, et le résultat est correct, voire plus. Les typos agréables et bien hiérarchisées, la clarté lumineuse des couleurs est bien assortie. Quand on met si peu d'images sur un site comme celui-ci, la seule image qu'on y trouve se doit d'être irréprochable, ce n'est pas le cas, le portrait tronqué, un peu petit, avec ombre portée du flash est à parfaire.
Je suis hésitant concernant le header, et sans en demander trop, il me semble qu'il y manque un petit quelque chose qui ferait la différence. Je communique à l'amateur de blanc les références d'un excellent site ( sur le plan graphique s'entend, le reste étant votre domaine ) : http://www.blancsurblanc.net
Petite question : j'ai d'abord pensé que le courriel en biais était un effet de html 5 / css 3, qui aurait été très bien venu à cet endroit de façon unique, je suppose que c'est une technique anti-spam ?
Dernière remarque, il me semble que concernant votre approche, plutôt que " small is beautiful " la devise appropriée serait celle des minimalistes : " less is more ".
Bonjour,
pour le design, c'est blanc, certes, mais ça peut rappeler le papier que l'on utilise habituellement pour faire les CV, ton site est en quelques sortes ton CV donc ça me semble pas être un mauvais choix. Il y a juste un bug sur IE9, les cercles ne sont pas aligné (je n'ai pas cherché plus loin), à voir si ça vient de toi, ou d'IE9.
Critiquons le code :
- C'est très bon, bonne utilisation d'aria ;
- J'aurais peut-être utilisé au moins une balise article (à la place de <section id="content">), car, pour la page d'accueil notamment, si je le retire de ton site, ce contenu aura toujours un sens.
- Il n'y a qu'un footer dans le site, pourquoi ne pas en profiter pour retirer son ID ?
- "<nav id="retour-en-haut"><a href="#entete" id="vers-le-haut">...</a></nav>" : dans cet exemple, l'ID dans le lien ne sert à rien, tu peux y accéder simplement "#retour-en-haut a", idem dans jQuery. De plus, pour aller en haut, il suffit de mettre href="#" ;
Voilà, c'était juste quelques détails pour dire que ce commentaire n'est pas totalement inutile. Bonne chance !
Salut,
@designer1959 : merci pour les compliments et surtout pour tes remarques :
- pour l'en-tête, moi perso il me va bien mais c'est vrai que c'est vraiment du simplissime ! Je rajouterais peut-être un rappel des couleurs utilisées dans le menu quelquepart, je sais pas... à voir ;
- pour le traitement du diaporama, je crois voir ce que tu veux dire (par contre je ne comprends pas ton allusion à Flash, ou à un flash ??), je t'avoue que c'est vraiment rajouté histoire de, parce que j'étais parti pour juste mettre une liste de références :D
- pour le courriel, c'est une bête image avec un alt (que je pense) approprié. Je n'ai pas eu le temps d'implémenter un formulaire de contact (et puis bon finalement ça m'a permis de rajouter une petite touche colorée supplémentaire ^^)
@lightcode : merci beaucoup pour ces remarques précises :
- merci pour le compliment sur le code et sur l'utilisation d'aria :)
- pour IE9, c'est bizarre ! j'ai tout testé avec IE6-7-8 et tout est à peu près à sa place... ça vient peut-être du fait qu'IE9 est en béta, je sais pas il faudrait que je le télécharge alors....
- pas bête pour l'élément article, j'avoue que sur le coup j'ai plus pensé à utiliser section mais je pense que je suivrais ton conseil une fois le concours fini ;)
- l'id du footer me semble obligatoire car sur les extensions prévues autour de ce petit site, il y a de forte chances que j'ai besoin d'utiliser d'autres éléments footer ;
- l'id dans le lien de <nav>, c'est complétement inutile je suis d'accord, je sais même plus pourquoi je l'ai utilisé ! bizarre :D
Merci encore
Ah oui designer1959, j'ai oublié ma petite précision concernant le "small is beautiful" ;)
En fait, ce concept dépasse largement le cadre du webdesign. Il s'agit d'un emprunt fait à un économiste anglais dont la collection d'ouvrages est disponible en français sous le titre 'Small Is Beautiful - une société à la mesure de l'homme'. Ici, je reprend un peu ce concept (sur lequel je travaille également dans ma thèse) et l'adapte au webdesign... il s'agit donc d'un petit clin d'oeil personnel à un concept que je trouve très stimulant...
Webdesignement parlant, 'less is more' convenait tout aussi bien, je te l'accorde :)
Précisions
Entête /
Pour l'entête, moi aussi ça me va bien, j'ai bien dit : " Je suis hésitant ". J'essaye de concevoir ce qui ferait passer ce site très correct vers l'excellence. Pas sûr que la couleur soit la trouvaille, disons que à ce stade de qualité, il faut y aller en finesse…
Citation /
Pour la devise, j'avais bien lu la référence à l'ouvrage dont je connais surtout le titre mais pas le contenu. " Less is more " est une devise des critiques d'art, ou des artistes minimalistes américains, dont je pense que vous pourriez vous sentir proches. Les minimalistes sont des artistes conceptuels, qui ont écartés l'expressionnisme de l'École de New-York, les recherches sur la matière, etc. au profit d'une recherche dépouillée, synthétique. Ils ont également souvent écarté la couleur de leur langage. Leurs œuvres sont donc très épurées, c'est pourquoi je pense que vous pourriez y être sensible.
Flash /
Je parlais de la prise de vue, dont l'ombre portée me semble être produite par un flash photographique.
Re, designer 1959,
Pour l'entête, j'ai commencé à y réfléchir, et je ne pense effectivement pas non plus que la couleur soit la trouvaille :) Tout à fait d'accord pour y aller en finesse.
Pour la devise, je connais également l'histoire du 'less is more', et je vois le courant artistique lié. Effectivement, c'est un peu le même concept, l'un étant issu de la sociologie et de l'économie politique et l'autre de courants artistiques ;) Du coup, je sais pas si je préfère 'less is beautiful' ou 'small is more' :D
Pour ce que tu appelle "flash" du coup je comprend le problème, mais à ton avis que faire : une simple bordure, une ombre portée plus fine, pas d'ombre ? J'avoue que, séchant un peu sur le sujet, je me suis amusé avec CSS3 sans trop y réfléchir :) J'aurais à coup sur mieux fait de mettre en ligne ma CSS d'impression et de faire la version mobile et mettre mes références sous forme de liste de nom d'entreprises plutôt que de perdre mon temps là-dessus !!
Merci encore pour toutes ces précisions, tes commentaires sont stimulants :)
Flash /
J'ai l'impression que nous ne parlons pas de la même chose…
Je ne parle pas de la bordure de la photo ( en gris clair ), je parle d'un flash utilisé lors de la prise de vue photographique, qui donne une ombre portée à l'intérieur de la photo, sur le mur, ombre colorée qui redouble le profil, et ça dénote du reste du site, très soigné. C'est un infime détail si l'on veut, mais comme c'est le seul visuel du site, on le regarde, du moins, je le regarde… Je conseille un meilleur portrait et peut-être un peu moins microscopique ?
Lorsque tu auras une formule à proposer pour l'entête, fais-signe par un message privé, je réagirai. On peut continuer à dialoguer au-delà du concours.
Hello designer1959,
Ah ! Bah du coup je comprend plus très bien : ces illustrations sont en fait des captures d'écrans numériques directement récupérées et (un tout petit peu) retravaillées dans Photoshop. La plupart du temps, tu as deux captures d'écrans l'une à côté de l'autre pour le même site web présenté. Je ne pense pas avoir rajouté le moindre effet d'ombre portée sur ces images donc du coup je ne vois vraiment pas ce que tu veux dire... Ou alors il peut aussi s'agir d'ombres portées utilisées au sein des maquettes graphiques des sites présentés, mais à ce moment là, bien évidemment, je ne peux rien faire ;)
Pour l'entête, j'ai trouvé une façon de "relever" un peu la chose. Je mettrais ça en ligne la semaine prochaine après le concours, avec mes CSS print et mobile, ainsi qu'un passage des tailles typos en cadratins (trois principaux manques techniques qui m'ont été reprochés (avec raison) ici) :)
C'est depuis le début que nous nous comprenons de travers : je parlais uniquement du portrait de l'auteur du site présenté en page d'accueil, en tout petit (c'est pourquoi j'ai parlé d'un infime détail !). De fait, je découvre les visuels de la rubrique prestations web dont tu dois parler…
Curieux de voir tes essais sur l'entête, quant à la typo, cela a beau être une " norme des standards " j'ai pu constater ici ou là que travailler en " em " ne résout pas tout, loin delà. Personnellement, je continue de travailler en pixels malgré tous les discours à ce sujet qui ne me convainquent pas entièrement en pratique.
Re,
J'AI ENFIN COMPRIS !!! Ok pour le petit portrait, c'est vrai que ça ne rend pas très soigné. Je rajoute à la liste de choses à faire car je bien évidemment entièrement d'accord avec toi ! Pfiu ! désolé pour ma lenteur j'ai eu du mal sur ce coup :P
Pour la typo, je t'avoue que pour des projets clients, je n'ai jamais utilisé les tailles en em (tout comme html5), mais comme il s'agit ici de mon site perso, je peux me le permettre ;)
Les tailles em ne sont pas forcément plus standard que les pixels, ce n'est pas le problème. Par contre ça peut faciliter l'agrandissement des caractères pour une population non négligeable d'internautes.
Comprendre /
C'est à force de dialogue que l'on a une chance de se comprendre enfin. Tant que chacun poursuit son idée, il ne saisit pas que l'autre est ailleurs…
Typo /
Il y a un discours très répandu, et à mon sens trop peu questionné, de la part des partisans des standards considérant qu'utiliser la typo en pixel serait dévalué par rapport à l'utilisation en "em". ( j'ai lu plusieurs commentaires en ce sens pendant le concours ). Moi, je veux bien… Mais à lire avec soin l'ensemble des remarques, j'ai constaté que bien des codeurs en "em" ont largement autant de soucis et parfois plus, d'un écran à l'autre, qu'en utilisant les tailles en pixels. Le vrai problème, irrésolu, est la grande variation des résolutions d'une machine à l'autre.
Très minimaliste... peut-être presque un peu trop à mon goût.
Quelques soucis de contrastes pour ma part, certains textes sont trop clairs à mon goût sur fond blanc. La fonte, bien qu'intéressante, ne me transcende pas (j'ai un peu de mal à la lire, j'ai l'impression qu'elle est "abimée").
Attention, ta zolie page d'erreur 404 bugge... http://jeanbaptisteaudras.com/prestations/ds/... (sifflote ;) )
Bon point pour le "revenir en haut de page", j'apprécie beaucoup.
Ceci dit, c'est pas facile d'être aussi minimaliste, je salue la tentative qui n'est pas facile, et qui est néanmoins... réussie.
Bonsoir
@designer1959 : je pense que les "partisans des standards" se questionnent autant que les autres sur l'utilisa
...sur l'utilisation des pixels ou des em. L'utilisation des tailles relatives pour les textes fait parties des bonnes pratiques et on y adhère ou pas... Moi, tant que des personnes (qui en savent beaucoup plus que moi) n'écrivent pas noir sur blanc que cette pratique est obsolète, je continuerai à coder en em en me disant que, si je peux faciliter la lecture d'une information à un seul internaute de part le monde, je dois le faire.
Un peu de lecture :
http://www.alsacreations.com/article/lire/563...
http://checklists.opquast.com/opquastv2?q=pr%C3%A9sentation (Num 142)