Cascading Style Summer Refresh 2010
Hello Bokeh par annso
Voir en ligne http://www.hello-bokeh.com
Après refresh
Note obtenue : 5.980/10
Voir en ligne http://www.hello-bokeh.com
Note obtenue : 5.980/10
Les commentaires sont clos.
Ça span pour moi !
(Plastic Bertrand)
Commentaires
Waw j'adore ta galerie, très belles photos en passant ^^
coucou annso,
Tes photographies sont superbes, l'ambiance est super !!! j'adore
Hello, merci pour vos commentaire sur mes photos :)
J'espère que j'en aurais aussi concernant la conception du site :p
Superbes photos !
De jolies photos effectivement, un design sobre mais très réussi.
Qq petits efforts à fournir côté performances (y a de bons tutos sur Alsa ! ;) ), un micro-détail qui me gêne : le "à propos" sans accent en haut à droite, ça fait "faute d'orthographe", c'est dommage.
Sinon, pense aux espaces insécables, en bas à gauche, y en a un qui est tout seul à la ligne.
Pas mal sinon ! :)
Merci Nico pour ton commentaire qui porte sur mon site ^^ (même si je reçois avec très grand plaisir vos commentaires sur ma galerie !!).
Je note ta remarque sur les performances. Je m'étais penché un peu sur les histoires de gzip mais pas assez pour le mettre ça en place.
Quand à l'accent et aux espaces insécables, je m'empresserais de corriger ça sitôt le concours fini :)
Quelques points à améliorer :
- Dans le footer le point d'exclamation du Hello bokeh ! se retrouve à la ligne c'est pas terrible! ;)
- J'aurais bien aligné le titre de ton site Hello bokeh ! avec News (le genre de petit détail qui me perturbe! ;) --> avis subjectif
- Très jolies photos mais néanmoins le portfolio est très long à charger c'est donc pas terrible surtout pour un site ou l'ensemble du contenu tourne autour des clichés
- Améliorer ton site avec PageSpeed (plugin de Firebug) ne pourra que t'aider
- Améliorer le chargement de ta galerie avec un Javascript aiderait également aussi d'après moi
- La page A-propos gagnerait à recevoir plus de contenus. En effet sur un grand écran comme le mien la page parait relativement vide
Dans l'ensemble c'est une bonne réalisation et encore une fois de magnifiques photos! Bonne continuation pour la suite annso !
Tom
Hello Annso!
J'ai toujours trouvé qu'un thème sur fond noir c'était challenging. Malheureusement tu as pas réussi le challenge à 100% selon moi (oui je sais, la critique est facile =P):
- du #999 sur fond #000, c'est pas facile à lire, surtout pour ceux qui ont des problèmes de vue (http://etre.com/tools/colourcheck/ tu peux checker ici)
- sur ta page contact, on discerne également mal les inputs text
- je trouve dommage que le footer ne soit pas toujours collé en bas de l'écran
Par contre j'aime:
- le background, globalement ça colle bien à ton domaine de photographe
- le hover JavaScript sur les thumbnails dans ton footer, classy
- le code XHTML1 strict, c'est propre
Salut Annso !!!
Trés jolies photos. Mais je ne vais pas parler de cela !!!! C'est vrai que jouer le fond noir est judicieux pour mettre en avant les photos. Par contre ( cela reste mon avis ) ne jamais utiliser un noir ou un blanc pur !!! les codes #000 et #fff sont pour moi à bannir !!!!!! )
Je trouve que tu aurais du jouer plus sur les types de polices et leur graisse. ( je suis un adepte des grosses polices ...)
Tu aurais peut être du mettre des vignette plus petites pour la galerie ou faire des thèmes.
Mais ton site est trés agréable et peu encore être améliorer. Trés beau travail.
Bone chance à toi et surtout, vive la Lorraine.
Bonne chance à toi
ahhh les design avec photo en arrière plan si bien géré c'est du jolie :D
Superbe ! Design sobre et efficace, juste ce qu'il faut pour mettre ton travail en valeur.
J'ai beaucoup apprécié le mode d'affichage de la galerie, le travail de la typo, le fond de page et la surbrillance au survol de tes vignettes sur la page d'accueil.
Dommage pour les fonds gris sur tes blocs sous IE6.
Félicitations !
Très joli. Le code est bien propre (une ou deux divisions inutiles à mon sens, mais c'est pas la mort).
La galerie est effectivement très bien. Bien vu également de proposer deux modes d'affichage.
Moi non plus je ne suis normalement pas fan des design sombres, mais pour afficher des photos c'est très bien :)
Seul bémol, la navigation clavier semble impossible (config de base XP/FF)...
Bravo, c'est un très, très beau site, très agréable à utiliser malgré quelques petit problèmes de couleur sur les typo.
J'ai aimé
- La simplicité du design qui sert bien les photographies
- Les touches de CSS3 qui soulignent certains éléments (les transparences en particulier)
- L'excellente utilisation du plugin fancybox de jQuery
- La clarté et la simplicité du code, à l'image du design
J'ai moins aimé
- Le contraste typographique (le texte gris sur fond noir ce n'est pas très lisible)
- Le système pour passer d'une photo à l'autre dans la vue en taille réel (les flèches précédente et suivante sont mal placé sur mon écran)
- le formulaire de contact (les typo sont noires sur fond noir !)
Bonjour annso,
J'aime beaucoup vos photos ! Bravo pour le valid W3C!
Sous chrome, dans la galerie photo en taille réelle, le footer vient se positionner sous votre header lorsque l'on charge une image, peut-être qu'en fixant la hauteur de votre div où se chargent les photos, il n'y aurait plus cet effet !
Bonne chance pour le concours !
C'est très réussi. J'aime le côté sobre et sombre.
Il y a effectivement quelques réglages à réaliser, mais dans l'ensemble, beau travail.
Les + : aspect général, validation W3C, ergonomie
Les - : texte gris sur la bulle bleue ciel, texte noir sur les inputs de la page de contact, navigabilité entre les photos (je n'ai pas de flèches de navigation, et peut être ajouter une pagination?)
Bonjour,
Tu voulais des commentaires niveau conception, tu vas être servi : au passage, le design est très sympas, même si c'est dommage pour les polices, surtout pour le titre h1 qui fait petit.
- L'aspect général est plutôt bon, donc ce qui va suivre ne sont que des suggestions d'amélioration toutes petites ;
- Il faut limiter le nombre de fichier externe à appeler, l'idéal c'est de faire une CSS et un JS, je te conseille de minifier les codes (j'avais pas vu que tu as un script qui en charge d'autres avec l'explorateur de code, ce point n'est donc vraiment pas important) ;
J'ai aussi visité la CSS, et j'ai trouvé un truc qui me perturbe, exemple : "#navbar #display-mode", alors que juste "#display-mode" suffit.
Voilà, c'est tout, dans l'ensemble c'est vraiment très bon :) .
Chouette des commentaires :D
@Shokojjo, je note tes remarques très précieusement. Certains seront plus facile à améliorer que d'autres ^^
@CyrilMazur, merci pour ton commentaire. Je réfléchirais à une palette de couleur plus lisible, notamment pour la page de contact qui parait un peu baclée. Pour le sticky footer, j'y avais pensé, mais ça m'avait fatigué d'avance (y a toujours un cas/navigateur ou ça ne marche pas !). Si j'ai le courage, je retenterais, c'est vrai que c'est plus joli sur les grand écrans.
@onlinegraph, je garderais le #000 dans ma palette, car il fait partie de ma photo de fond. Par contre, le #fff, pourquoi pas le faire disparaitre pour du gris clair, ça se discute. Je suis d'accord avec toi pour les polices, ça pourrait être "plus mieux", mais je manque de compétences dans ce domaine.
Par ailleurs, je ne souhaite volontairement pas regrouper mes photos par thèmes, mais plutôt par ordre chronologique. D'abord parce que ça permet de voir une évolution dans le style, et puis c'est tellement triste de cantonner une photo dans une case "paysage", "portrait", "architecture". Surtout qu'on finit inévitablement avec une catégorie "inclassable". Autant ne rien trier !
@sogam : merci :)
@velvet : je t'avoue que je ne me suis pas trop penchée sur le cas d'IE6 comme beaucoup de personnes. M'enfin, faire une feuille de style spéciale pour éviter les fonds gris ne mange pas beaucoup de pain... Je note donc ta remarque pour plus tard :)
@audrasjb, merci, ça me fait toujours plaisir quand on remarque le code sur lequel je me suis beaucoup appliquée ! Je ne sais pas du tout comment gérer la navigation au clavier, mais je ferais au moins l'effort de me renseigner !
@Jep : la remarque sur les couleurs est plutôt récurrente, j'essayerais de résoudre ça du mieux que je peux dès le concours fini. Pour les flèches précédentes/suivantes, peux-tu m'indiquer la taille de ton écran ?
@Colibr-e, merci de remonter ce bug ! Je le corrigerais dès le concours fini.
@mat_dev : je note ton idée de pagination pour un chargement plus rapide. Quand au texte gris sur la bulle bleue ciel, cela dépend de la résolution. Peux-être devrais-je jouer avec les viewports pour éviter cela.
@lightcode : merci pour ton commentaire, j'ai bien noté tes remarques :)
Bonjour
Je trouve ton site très joli, très classe et le fond en accord avec ton nom (après avoir lu la définition de bokeh :)).
Je rejoins les commentaires déjà faits, du coup je n'ai plus grand chose à dire...
j'aime bien les exifs sur les photos, le fait que tu ai mis des pages mentions légales et à propos (à étoffer peut être) et le code très strict :)
Ton site passe bien sous IE7 et IE8.
Ce qui me gène : les tailles de police fixes (sauf le h3 qui est en em) d'autant que ton site est toujours lisible avec l'agrandissement du texte, le texte trop petit et pas assez contrasté, le non fonctionnement de la galerie javascript désactivé.
D'ailleurs pour la galerie (je ne sais pas si c'est faisable), j'aurai trouvé bien que, lorsque l'on arrive par un click sur une des images (dernières photos), la page soit positionné au niveau du haut de la photo pour que l'on est moins à scroller.
Pour la page contact, il me semble qu'il faut signaler que certains champs sont obligatoires.
Pour la meta charset, il me semble aussi avoir lu qu'il vaux mieux la mettre juste sous le head, mais c'est un détail ;)
Bonne chance et bonne continuation
@cilou j'ai préféré faire en sorte qu'un clic sur les dernières photos fasse arriver sur cette photo en grand format. En revanche, c'est une bonne idée que le passage grand format -> miniatures positionne la page au niveau de la photo où l'on était. Je prends bonne note de tes autres remarques, merci de ton commentaire :)
J'ai toujours une vive sympathie pour les sites artistiques ou photographiques, et donc aussi une exigence qui l'accompagne. Au-delà d'un effet de séduction initial, les choses qui me gênent deviennent moins supportables plus je passe du temps à naviguer sur ce site. Les choses ont été dites par onlinegraph, l'utilisation du noir et blanc pur sur un écran est à déconseiller. Je regrette aussi le titre du site un peu coincé en hauteur et en typo petite ET banale. Et plus je regarde les photographies pour elle-même, plus je suis gêné par les spots colorés / bokeh ( jolis en eux-mêmes ). Voici un lot d'impressions qui n'enlève rien à la qualité du travail, mais il y a des sites qui invitent à l'excellence et pas seulement à être " bons ".
Salut,
Globalement le design fonctionne, même si les rapport clair-obscurs ont tendance à être tendus au niveau de l'oeil.
Ce qui me gêne le plus, c'est surtout au niveau de code : <span class="important">Hello bokeh !</span> c'est un peu léger et il vaudrait mieux privilégier un <strong>Hello bokeh !</strong> ou un <em>Hello bokeh !</em>.
Voilà, à part ça, j'aime bien o/
J'aime beaucoup ce genre de sites, et le tiens est vraiment bien.
Petit bémol au niveau du nom du site, un peu simpliste pour le coup et les photos un peu longues à charger pour une connexion moyenne.
Tu ne devrais pas avoir de mal à être dans le top ten cela dit :)
(jolies photos au passage)
Bonjour,
À priori beaucoup de choses ont été déjà dites. Je trouve le site assez bien fait dans l'ensemble mais je ne suis pas trop fan des cadres semi-transparents qui laissent entrevoir l'image de fond.
La mise en page des news cloche un peu : je trouve les lignes de textes un peu longues. Une mise en page deux colonnes pourrait être plus esthétique en plus d'être plus confortable (libre à toi de voir ce qui est à mettre dans "l'autre colonne")
Mais globalement le design reste de bonne facture.
Bon travail dans l'ensemble même si certains points sont à améliorer (en vrac):
- Point d'exclamation à la ligne dans le footer,
- Dans le "à propos" du footer, mettre "depuis 2008" plutôt que "depuis 3 ans" : cela permet d'avoir un site à jour quelle que soit l'année et évite d'oublier de modifier le texte,
- Niveau navigation quand les photos sont agrandies, sur grand écran (1920*1200), le lien de droite n'apparait que lorsque la souris est au milieu de l'image et non à droite. Sur une résolution plus petite, le lien de gauche n'est pas totalement à gauche, alors que celui de droite est totalement à droite. Sur grand écran, je ne l'ai pas vu immédiatement. Et je trouve qu'ils ne sont pas très "joyeux". Pourquoi ne pas reprendre les flèches de la fancybox que tu utilises avec les miniatures?
- Titre du site pas assez mis en valeur par rapport au reste du texte. Utiliser une police différente avec une taille plus importante permettrait de résoudre le problème.
- Page de contact : gros problème de couleur des champs du formulaire (noir sur noir) qui empêche de lire ce que l'on écrit.
- Page d'accueil : je trouve que le mot "News" est de trop. Les articles parlent d'eux-même
- Page "à propos" qui fait doublon avec la section "à propos" du footer. Soit supprimer le "à propos" du footer lorsqu'on visite la page dédiée, soit supprimer la page "à propos" et se contenter de l'article du footer...(personnellement, j'opterais pour la première solution).
- La page "Liens" : une petite description de chaque lien serait la bienvenue, car la page fait un peu "vide".
Bien vu :
- Les deux modes d'affichage des images.
- L'affichage des images du footer avec l'effet au survol.
- La mise en valeur de la page visitée dans le menu principal.
"Sur grand écran, je ne l'ai pas vu immédiatement" . Il fallait lire : "Sur grand écran, je ne les ai pas vus immédiatement" (désolé).