[Pro] Site de photo

Hello tout le monde,

J'ai fais ce site pour ma copine photographe et j'ai décidé de me faire plaisir avec en faisant joujou avec les nouvelles avancées actuelles (media-queries, vous pouvez essayer de redimensionner la fenêtre, HTML5, CSS3, etc.)

http://www.luciebremeault.com/

Même si je sais que AlsacréationS est plutôt tourné accessibilité, étant donné qu'il s'agit là d'un site de photos de mode j'estime que l'accessibilité n'est pas trop utile vu que l'essence du site est graphique.
Ce que j'aimerais surtout c'est vos avis et vos conseils concernant les optimisations possibles, surtout niveau performances où là je sais que c'est assez lamentable (photos super grandes obliges).

Pour ceux que ça intéresse, j'ai commencé à monter un genre de preloader en js visible ici :
http://beta7.oromeomonromeo.com/fashion

Je me tâte à l'utiliser sachant que c'est mieux niveau UI car ça montre le chargement mais que du coup on ne voit rien avant que tout ne soit chargé.

Merci.

a écrit :
j'estime que l'accessibilité n'est pas trop utile vu que l'essence du site est graphique

Avec ce genre de raisonnement on est loin de l'accessibilité effectivement
Y a quand même des labels dans ton formulaire de contact, c'est déjà un premier pas vers l'accessibilité.
Y a absolument pas de texte, donc le contenu c'est tes images, tu pourrais mettre déjà des alt.
Le splash screen ne sert à rien je trouve.


Concernant ton site, avant de faire joujou, faire bien quand même. Les i-frames aux attributs obsolètes en html5, y a mieux non?
Et puis un site sans footer à l'heure actuelle, c'est pas très mode justement.
Je ne vois pas l'intérêt du HTML5 pour ce site, à part effectivement une petite envie de l'intégrateur.

Performance: Aie Aie !
Avec mon wifi ça lague à mort, j'ai le temps d'aller me faire un café avant de voir les photos qui sont relativement belles par contre, moi qui apprécie la photo de mode, j'ai aimé ma visite.

Tu serais sous Wordpress, tu aurais un plugin type smush it pour réduire le poids des photos en une seule fois.


EDIT: utilise le service yslow qui répertorie tout ce qu'il y a à savoir sur la performance de ton site.
Modifié par jmlapam (24 Nov 2011 - 20:36)

moi je trouve le site pas mal...avec quelques bémols

- y a rien dans ton code qui permet un référencement...

- tes images ne sont pas protégées (watermark) et j'en ai vite repéré les URLs dans ton code html et j'ai pu en télécharger une. Je suis sensible à ça étant photographe moi aussi.

- ça ne se pose pas trop chez moi (j'ai une connexion 20 mega), mais le temps de chargement doit être assez lourd (dixit jmlapam) - les images sont assez bien optimisées mais elles sont grandes (en terme de dimensions en pixel)

- tes images sont redimensionnées par le navigateur, et sur un 24" en 1920x1200 en plein écran, on va avoir du sur-échantillonnage à la volée.... (voir image jointe A=photo à 100% - B photo agrandie)

- ensuite si ta copine vise un public PRO de la photo, elle devrait soigner sa sélection d'images: par exemple sur celle de l'exemple joint ici, la bague du modèle est complétement cramée (surexposée) et devient une tache blanche. sur les premières photos de la section fashion, le modèle est collé au fond et produit une ombre disgracieuse. En photo ce sont deux erreurs de débutant, sans que ce soit insultant bien sur car les autres photos sont très belles...

- pour le code je ne suis pas assez familier avec html5 pour juger et d'ailleurs je me demande pourquoi tu as choisis html5 qui propose d'organiser la sémantique ( <header> <article> ... etc.) alors que justement dans ton site il n'y a rien qui se rattache à la sémantique.

Moi j’essaierais de faire en sorte que les images ne soient pas agrandies pour préserver les artefacts. Sinon le site est très agréable à regarder..

@jmlapam :

Merci pour ton retour.

Pour les alt, je vais essayer de mettre un peu de texte mais y a rien à dire de spécial sur les photos, à part peut-être le nom du mannequin et son agence mais bon, on va pas sur un site de photo pour ça, je vais tout de même mettre ça en place.

Pour l'iframe, c'est le like de facebook, je vais regarder si ils proposent autre chose comme façon de l'intégrer.

Moi non plus j'aime pas le splash mais tu sais les femmes...

Sinon oui pour les photos j'utilise justement un truc comme ça mais de toute façon les sites de photo affichent des photos énormes et longues à charger, je pense que là le problème vient plutôt de l'UI qui ne fait pas attendre le visiteur mais lui donne l'impression que ça lague, alors qu'avec un pourcentage ou autre au moins il verrait que quelque chose se passe.

Je vais bidouiller tout ça, merci.



@lionel_css3 :

Oui pour le référencement c'est pour l'instant limité à l'url rewriting, les title et les meta.
Je ne veux pas mettre de watermark parce que c'est pas classe même si en effet ça permet de protéger un peu.
Faudrait que je vois si avec apache je ne peux pas en coller un quand quelqu'un fait du hotlinking ou les télécharge.

Pour la bague cramée, elle m'a dit qu'elle avait vu mais qu'elle était tellement blanche qu'il aurait fallu la prendre à part et ça l'emmerdait.

Pour le reste je vais regarder, j'ai bien essayé d'éviter trop de sur-échantillonnage mais en html on a peu de contrôle là-dessus.

Skoua a écrit :
Moi non plus j'aime pas le splash mais tu sais les femmes...

Oui ? Les femmes ?

Je doute que le splash soit une question féminine. Quand au fait de l'aimer ou pas là n'est pas le problème. Si ton amie tiens à le conserver, c'est surement parce qu'elle n'a pas eu d'explication sur les problèmes que cela peut poser vs. les avantages

Les problèmes : c'est l'assurance de perdre des visiteurs.

Les avantages : aucun.

Laurie-Anne a écrit :
Oui ? Les femmes ?

Je doute que le splash soit une question féminine. Quand au fait de l'aimer ou pas là n'est pas le problème. Si ton amie tiens à le conserver, c'est surement parce qu'elle n'a pas eu d'explication sur les problèmes que cela peut poser vs. les avantages

Les problèmes : c'est l'assurance de perdre des visiteurs.

Les avantages : aucun.

Le problème c'est que les femmes savent souvent ce qu'elles veulent et la mienne en l'occurence veut son splash screen malgré mes explications.