Cascading Style Summer Refresh 2010
david par david-vincent
Voir en ligne http://www.david-vincent.fr/blog
Après refresh
Note obtenue : 6.050/10
Voir en ligne http://www.david-vincent.fr/blog
Note obtenue : 6.050/10
Les commentaires sont clos.
<br><br> Vivement la <font> des neiges !
(Captain Igloo)
Commentaires
Techniquement remarquable !
Bien qu'IE6 soit tout simplement banni du site (dommage... même si l'illustration est marrante il faut dire !) au lieu d'avoir une version dégradée.
Xhtml valide, JS très bien intégré, j'adore !
Dommage que la CSS ne soit pas valide par contre...
Niveau design, je trouve les textes un peu trop petit sur la gauche, c'est confus.
Le serveur semble avoir du mal aussi, les pages sont longues à charger ! Victime du succès du concours ? :p
Bravo, y'a du bon taff derrière tout ça, même si l'accès aux informations est un peu déroutant !
Les couleurs sont un peu tristes, mais le JS très bien intégré comme le dit Ariakan972 !!
Salut à vous deux, merci avant tout pour ces remarques très pertinentes,
Il est vrai que j'ai pour l'habitude de mettre une invite de mise à niveau des navigateur pour ie6 et ie 5.5 car sans parler uniquement d'intégration, ils me posent fréquemment des problèmes pour les connexions js vers flash et flash vers js. Je sais bien qu'une consigne été de faire une déclinaison dégradé mais généralement je m'arrête sur la version actuel et Vn-1 (IE, FF,opéra, chrome et safari).
Je prends note de vos analyses pour améliorer le site post ccsr2010
@Ariakan972 :
Pour le w3c c'est valide mais en css 3.0 : http://jigsaw.w3.org/css-validator/validator?...
Bon comme beaucoup ont présenté leur refonte pour CCSR2010, je vais en faire de même.
Le CSSR2010 pour moi a été avant l'occasion de développement une nouvelle version de mon portfolio plus proche des tendances et nouveaux standards du web.
Objectifs :
- CMS : wordpress 3.0 entièrement corrigé pluggin maison
- W3C valid sur la couche xhtml
- W3C valid sur la couche css niveau 3
- Optimisation SEO
- Compatibilité navigateur N et N-1 sour Firefox, Opéra, Safari, Chrome et IE (9, 8 et 7) n'avré pour les 5% d'internautes IE6 qui sont quasiment recouvert par les services publics :p
- Intégration de la partie "Réseaux sociaux" sur chaque page et chaque article
- Utilisation des effets de transition par jquery
- Minimisation des zones flash pour l'accessibilité (malgré mon métier de pollueur - du web héhé) mise en place d'un flash avec une connexion javascritp/flash qui devrait évoluer dans le temps.
Graphiquement j'ai volontairement joué sur des noirs, un bleu et rose pastel afin d'éviter de surcharger en couleurs avec la présence important des photos.
Pour plus d'info technique sur le site j'ai publié un article sur ce dernier.
Merci à vous et bonne chance à vous tous pour le CSSR2010 :)
superbe !
les liens en rose, manque souvent de contraste avec le fond ... encore plus le :hover (encore moins lisible) sur ul#menu
un peu de perte de visibilité (sur de petits écrans surtout) en haut qui demande à descendre
... mais sinon, superbe, hin ! (je chipote ;-) )
@titeuf : non non y a que comme ça que ça avance, la tête dans le guidon on perd vite l'objectivité et on s'attarde sur des futilités
Je vais un peu trancher par rapport aux précédents commentaires, mais j'aime moins. La barre du bas mange beaucoup d'espace sur ma petite résolution, le site est assez lent pour que ce soit désagréable (pour changer de page, mais aussi pour dérouler le panneau de présentation), et pour finir je trouve le site un peu triste.
Mis à part ces défauts, il faut reconnaitre qu'il y a du avoir beaucoup de travail derrière tout ça ! J'aime beaucoup qu'on puisse choisir la vue en liste/mozaique/liens.
J'adore ton traitement des icônes des médias sociaux très intéressant, il manque juste un ptit effet, genre quand on leur lui passe dessus ils deviennent un peu plus rose (c juste un exemple), bref qu'il y est un changement d'état.
Et ta typo je la trouve également petite. Un ou deux px de plus ne ferait pas de mal.
Sinon j'aime bien le principe de ton menu qui te fait apparaitre ton "about", sauf que le texte en gris clair sur du blanc c'est peut lisible. Penses au gens qui ont leur ordi mal réglé.
Sinon très jolie refonte web 2.0 très actuel
Design original très sympa, on sent l'effort de recherche créative. Dommage que le doctype ne soit pas html5.
Hello,
Visuellement, ça me plaît pas mal (même si les textes sont tous petits). C'est une belle refonte et un gros travail :)
Par contre, je trouve le site vraiment lourd : le concept "tout en une page" fait que le site met un petit moment avant de se charger et fait (en tout cas chez moi) ralentir les animations jQuery.
Les scripts devraient être regroupés et appelés après le chargement du site.
Il y a beaucoup beaucoup de divisions inutiles ;)
Je n'aime pas trop l'idée de bannir les personnes utilisant ie6, mais j'avoue que ton illustration est sympa et originale :D
>> "(malgré mon métier de pollueur - du web héhé)"
Au moins, tu l'admets !! héhéhé :D
Je note que ce site est une première étape vers un site full flash, c'est dommage et pas forcément nécessaire, mais bon tu fais comme tu le sent ;)
D'un coup d'oeil général : j'aime assez le design et les couleurs ^^ Le design me plaît bien.
(Attention à la grosse faute d'orthographe BienvenuE !)
Sinon après, la page est trèèèès lourde, c'est un peu lassant quand on veut tout voir lol ^^
Ergonomiquement, un peu fouillis on s'y perd. Des textes trop petits oups =)
Côté blanc, la police est trop claire =/
J'aime beaucoup le footer ^^
Il faut absolument que je revois le chargement des données en fait le plus lourd reste avant tout les images du slider, je vais mettre un load sur le onclick.
Merci pour les remarques, intéressantes pour les corrections.
Après en ce qui concerne IE6 je ne changerai pas de position, ce n'est pas parce qu'on vise les 5% d'utilisateurs IE6 souvent présent dans les grandes collectivités où le personnel n'a pas les droit admin pour monter de version, que nous sommes de bons intégrateurs ;).
Hello,
Pas grand chose à dire, c'est sobre et classe ! Par rapport à la version précédente on passe à un univers qui mise sur la technique, c'est plus travaillé et plus soigné.
Pour dire du mal, je rejoins Titeuf, je suis sur mon ordinateur portable et je me sens claustrophobe,il me faut de l'air et de l'espace :-) ( peut-être que la barre du bas peut-être en slide, surtout que je ne voie pas bien ce qu'il y a écrit dessus à cause des faibles contrastes qui ne sont pas visibles sur des écrans de qualités moyennes.). Et puis pour IE6, franchement, ça me gonfle, consulter du web avec un logiciel tout pourrie qui a 9 ans, c'est vraiment abuser.
Enfin bref, quand tu auras fini d'optimiser le code, tu auras une belle bête de course, je suis un peu jaloux de ton univers ...:-)
@vectorskin :
Merci vectorskin pour ces critiques cela fait plaisir que le temps de travail soit reconnus même s'il reste discret.
Artistiquement parlant je suis en train de m'éclater sur le dev du portofolio en flash qui est davantage mon coeur de métier :)
Pour les choix techniques optimisations navigateurs etc... c'est pour moi un une réflexion qui doit porter sur la cible tout comme la teinte graphique quand tu fais une DA, je pense que mon site sera vu sous IE6 que pendant la date du CSSR2010 héhé.
Tu as raison je vais prendre le temps de remettre à plat le site pour optimiser le temps de chargement après le 12 c'est toujours difficile de dégager du temps surtout quand ce pour un site perso :)
encore merci
Je trouve également la page trop lourde: 3 500 Ko rein que pour la page d'accueil, c'est vraiment long pour les connexions poussives (hé oui, tout le monde n'a pas le câble ;))
Je trouve également le pied de page terne et peu lisible.
Mais très beau travail tout de même
Très beau travail, tout autant que la dernière version du site. Cependant, je suis décu de la lourdeur de la page... qui du coup ne rend pas la navigation fluide que ce soit entre les pages ou bien au sein de la page (lorsque j'utilise la scrollbar c'est saccadé... à cause de la quantité de js je suppose)
Très bon travail effectivement !
La première remarque que je ferai est de regretter le temps de téléchargement. Il est vrai que le site est annoncé en version béta, et au vu du travail engagé, restons indulgent à ce sujet. Cela invite toute de même, à mon humble avis, à une réflexion sur l'excès de de technologies Jquery, et je suis plus inquiet encore quand l'auteur annonce une version full flash, mais c'est un point de vue personnel.
C'est vrai qu'un directeur artistique — web — doit faire démonstration de talents, mais je trouve qu'on s'y perd un peu à force de brio, de tout plein de choses bien foutues en elles-mêmes mais avec des contreparties gênantes, telles les petites visionneuses grises pleines de raffinement, mais pour les commentaires textuels, on est tout de même à l'étroit. À la page " Bienvenue " l'utilisation des capitales pour l'ensemble du texte me paraît maladroite, au point de se demander s'il n'y pas une erreur de css uppercase ? J'aime beaucoup le gris clair et la subtilité, mais le confort de lecture demanderait un peu plus de contraste.
Directeur artistique — web — est un métier difficile, parce que la partie web rend la part artistique un peu à l'étroit. Je peux me tromper, mais j'ai l'impression que les prouesses techniques ont laissé le graphisme en retrait. On sent un fort potentiel de ce point de vue, un fourmillement d'idées, mais il manque parfois d'unité. Less is more… But more is parfois indigeste.
Coup de Gueule sur la typo " outline ".
Je suppose que c'est un des apports de html5 / css3 que d'offrir de nouvelles possibilités typographiques, et pour les graphistes c'est un régal !
Certains effets sont plus intéressants que d'autres, et je ne connais pas le nom de cette fonction qui cerne d'un fin très noir les typo, donnant un effet entre " outline " et ombré. J'en ai trouvé de nombreux exemples un peu partout pour le concours, et je les trouve déplorables, on revient à ces horreurs datées des années 70, et au début de l'informatique. Mais qu'un DA utilise ça…………… pitié non, pas ça ! D'autant que la typo en bleu/vert véronèse est serrée, donc moins lisible encore avec cet effet. (penser à l'accent grave sur compétenaces ).
errata /
il fallait écrire " un fin trait noir ".
Première impression... pas mal le design ! Sympa l'effet de switch.
Néanmoins, j'y vois quelques remarques :
- les perfs sont clairement à améliorer : vive la compression gzip, j'ai vu qu'une CSS pouvait gagner 66.8KiB (rarement vu des CSS aussi lourdes !!!), beaucoup de fichiers JS à concaténer, etc...
- j'ai de gros soucis de lisibilité, des titres noirs sur fond foncé, du texte clair sur fond clair, ça manque de contraste,
- de (très) nombreuses fautes d'orthographe/de frappe : "Expreriences", "créer" etc... ça fait pas pro.
- Attention à l'emploi des majuscules, ça fait "je crie".
Sinon, y a des idées sympas çà et là. Je t'encourage à améliorer et magnifier tout cela. ;)
Design très réussi, on voit qu'il y a du travail derrière, néanmoins le site est (beaucoup) trop lourd de mon coté et la navigation est un petit peu saccadée... Mis à par ça, je trouve que trop de js tue le js, j'ai l'impression que tout est animé et dynamique partout... Ça manque un peu de contenu vraiment statique à mon gout
Pour ma part, bien que j'admire le travail fourni, mes yeux ont beaucoup souffert du manque de contraste récurrent sur pratiquement chaque texte. Gris clair sur blanc ou gris foncé sur gris un peu plus foncé, je suis désolée mais je n'ai pas pu continuer la visite (sinon mon ophtalmo va me taper sur les doigts!).
Donc, gros point négatif pour moi... Vraiment dommage !
Ca semblerait assez sympa, si la page n'était pas si longue à s'ouvrir, si les textes étaient moins petits et plus lisibles. C'est dommage.