[amateur] une photographie par semaine

edit 31 juillet 2013
-----------------------------

Bonjour à tous,

du nouveau pour mon site worldisbeautiful.net !

Suite aux votes effectués sur awwward de la 1ere version, j'ai décidé de revoir les points qui semblaient pêcher sur les notes données, le design et ce qu'ils appellent "usability" (si c'est facilement utilisable ou non, j'imagine).
Du coup je me suis lancé dans une refonte et je suis assez content du résultat. C'est beaucoup mieux surtout sur les technologies mobiles.
Le design est sur ton blanc, nouveau logo plus sympa, un curseur plus intuitif pour la transition 3D.
J'ai adapté la navigation proposée par Marilou de Codrops (génial en passant).

Vous pouvez jeter un œil sur des captures écrans de la 1ere version :
photo - photo verso - carte - galerie - à propos

Je vous propose même une petite vidéo de présentation :
http://www.youtube.com/watch?v=oDVSkPW_D_I


Merci pour vos critiques !



-----------------------------
message d'origine
-----------------------------

Bonjour à tous

Je développe un nouveau site avant tout par plaisir et aussi pour apprendre à maîtriser davantage quelques technologies web, CSS3 en particulier pour celui-ci.
L'idée c'est de proposer, chaque lundi, la photographie d'un splendide paysage et les informations associées au lieu de la prise de vue ainsi que sur l'auteur du cliché. Le site permet également de voir les photos des semaines précédentes.

worldisbeautiful.net

Le site est en développement, actuellement ce sont des photos personnelles qui sont proposées mais elles ne seront plus là quand je lancerai le site, c'est uniquement pour tester le fonctionnement. Je prévois de le lancer le 1er avril si je reçois toutes les autorisations à temps (droit d'auteur sur les photographies).

En ce qui me concerne, je suis du genre "touche à tout" mais mon job c'est le développement web (PHP entre autres).

Tous les avis, critiques sont bienvenus !

Merci.
Modifié par worldisbeautiful (30 Oct 2015 - 16:29)

Bonsoir,
le design est plutôt sympa, par contre je n'avais pas fait gaffe qu'il fallait descendre pour avoir plus de contenu... Et, bug, je suis sur la dernière version de GC et j'ai ça qui s'affiche :

a écrit :
C'est dommage !

Votre navigateur ne supporte pas les quelques technologies plutôt cool présentes sur notre site !
Pourquoi ne pas vous mettre à jour ?
Nous vous suggérons les navigateurs qui supportent pleinement les technologies de notre site.

Le fait de devoir descendre pour le contenu c'est ce qui se passe quand le navigateur ne gère pas les transition 3D CSS3 et également quand javascript n'est pas actif.

Je suppose que tu bloque le javascript avec Chrome ...

De mon côté il faut que j'affiche un message différent si le problème viens de JS et non pas du support CSS3
Je vais voir pour afficher un visuel indiquant qu'il y a du contenu plus bas.

Merci pour le retour !
Modifié par worldisbeautiful (16 Mar 2013 - 19:34)

Bonsoir,
non, le Javascript est activé, je suis sur Chrome 25.0.1364.172...

Johan_Clbrt a écrit :
Bonsoir,
non, le Javascript est activé, je suis sur Chrome 25.0.1364.172...

Intéressant, j'ai la même version de chrome et aucun soucis.
J'vais essayer de voir ce qu'il pourrait se passer

Très réussi, mais :

- Le bouton du menu (avec trois bandes, type Bootstrap), n'a aucun effet ?
- Le design de la page "A propos" tranche avec le reste (et est trop bariolé).
- Le lien de retour au slider s'intitule "retour sur worldisbeautiful.net"... alors qu'on y est déjà!
- "Eh ! Vous êtes trop impatient, il n'est pas encore l'heure !" Euh... Pas besoin de m'agresser

En tout cas, bravo!

Bonjour,

- J'ai retiré le lien sur le bouton à 3 bandes, je le garde comme visuel pour indiquer qu'il y a un sous-menu qui s'ouvre et pour pouvoir être touché/tapé sur les mobiles.
- Retour sur wib.net est changé.
- Je suis d'accord avec la page "à propos" je vais voir pour faire quelque chose de plus propre.
- Je laisse le message "agressif", moins d'informel ça fait du bien de tps en tps

Pour le soucis avec Chrome plus haut, j'ai passé le chargement des scripts externes en asynchrone, je pense que cela pouvait venir de ça. Je galère avec le widget twitter avec leur nouvelle version !

Merci pour le retour
Modifié par worldisbeautiful (17 Mar 2013 - 16:10)

HS: vive la Normandie !
(Papy vit à Lestre, au Hameau de Tollevast )
Un petit sujet sur St-Vaast la Hougue bientôt ?

Juste en passant, le lien sous les tweets (#worldisbeautiful) n'est pas mis en forme...

6l20 a écrit :
HS: vive la Normandie !
(Papy vit à Lestre, au Hameau de Tollevast )
Un petit sujet sur St-Vaast la Hougue bientôt ?

Je suis de Ouistreham mais je connais très bien cette partie du Cotentin

6l20 a écrit :
Juste en passant, le lien sous les tweets (#worldisbeautiful) n'est pas mis en forme...

Oui, c'est le widget Twitter qui me pose des soucis, je cherche une solution.
C'est un problème de javascript pas de mise en forme.

Hello,

J'allais faire des compet' de Judo à Ouistreham...quand j'étais petit
J'ai parcouru ton site (j'adore Barfleur et le Cotentin en général)

Il devrait suffir de rajouter des règles de style pour le lien puisqu'il dispose d'une classe spécifique, non ?

a.twitter-timeline

6l20 a écrit :
Il devrait suffir de rajouter des règles de style pour le lien puisqu'il dispose d'une classe spécifique, non ?

a.twitter-timeline

Non ce n'était pas un problème de CSS mais un problème de javascript qui est résolu, le widget twitter doit apparaître comme il faut maintenant.

worldisbeautiful a écrit :

Non ce n'était pas un problème de CSS mais un problème de javascript qui est résolu, le widget twitter doit apparaître comme il faut maintenant.

Effectivement, le widget apparait comme il convient.

Bonjour,

Un site bien rafraichissant. J'aime beaucoup le Cotentin.

La page à propos est trop chargée et elle devient beaucoup plus agréable à lire lorsque je réduis la fenêtre (quand les blocs s'empilent).
La meta-keywords ne sert pas à grand chose.

Il y a des erreurs au validateur (pour la page d'index).

Sur Chrome pas de problème.

Sur Iphone (portrait): c'est moyen. Comme c'est une version beta j'imagine qu'il faut attendre.

6l20 a écrit :
J'allais faire des compet' de Judo à Ouistreham

Alsa est bien gardé. Faut pas chercher des noises aux Modos.

Bonsoir,

j'ai complètement revu l'aspect des pages annexes "à propos" et "galerie". Ça me parait plus clair et plus aéré.

Keywords supprimés, j'ai corrigé ce que j'ai pu sur le validateur, les autres erreurs sont apportées par les scripts externes.

J'essaie d'introduire un visuel pour montrer qu'il y a du contenu plus bas quand le CSS3 n'est pas supporté mais pour l'instant c'est pas trop ça.

Sur mobile en version portrait, si tu as des idées je suis preneur. Difficile de faire quelque chose de propre quand il s'agit d'afficher de la photographie qui plus est de paysage donc au format ... paysage

Merci pour le retour !

Sur Iphone le texte est mangé et le menu est trop petit et peu accessible.

Le site vient tout juste d'être lancé !
http://worldisbeautiful.net

J'ai modifié beaucoup de chose depuis, en particulier la navigation.
J'ai encore besoin de tester davantage mais le résultat sur les mobiles devrait être correct

Le site fonctionne bien pour moi (mac, chrome). L'effet permutation est bien mis en valeur et surprend, les infos sont claires tout comme la mise en page très actuelle. Les icones façon "appareil photo" sont efficaces et fonctionnelles, les photos (2 à l'heure actuelle) sont superbes et les auteurs sont cités comme il se doit. L'ensemble fait très pro. Bref, un très joli site qui démarre.

Bravo !
Modifié par spongebrain (05 Apr 2013 - 17:49)

Bonjour à tous,

du nouveau pour mon site worldisbeautiful.net !

Suite aux votes effectués sur awwward de la 1ere version, j'ai décidé de revoir les points qui semblaient pêcher sur les notes données, le design et ce qu'ils appellent "usability" (si c'est facilement utilisable ou non, j'imagine).
Du coup je me suis lancé dans une refonte et je suis assez content du résultat. C'est beaucoup mieux surtout sur les technologies mobiles.
Le design est sur ton blanc, nouveau logo plus sympa, un curseur plus intuitif pour la transition 3D.
J'ai adapté la navigation proposée par Marilou de Codrops (génial en passant).

Vous pouvez jeter un œil sur des captures écrans de la 1ere version :
photo - photo verso - carte - galerie - à propos

Je vous propose même une petite vidéo de présentation :
http://www.youtube.com/watch?v=oDVSkPW_D_I

Merci pour vos critiques !
Modifié par worldisbeautiful (01 Aug 2013 - 05:26)

Bonjour,

Sans hésiter, je préfère la première version.

Les pictogrammes inspirés de l'appareil photo d'un baroudeur et directement accessibles étaient bien plus pertinents et ergonomiques. Tout de suite, ça racontait une histoire. Peut-être aurait-il fallu les optimiser un poil (taille, design ??), le site était déjà superbe.

Cet espèce de menu sur le côté avec un accès dans le coin où tout disparait (façon réglages de Chrome), je trouve que c'est une régression sur le plan ergonomique et conceptuel (graphique), en plus de vous retrouver avec un menu impersonnel comparé au précédent qui racontait une histoire autour du thème de la photo. Vous perdez beaucoup au change.

Le plus gênant, ce sont les flèches avant/après, elles n'ont rien à faire dans le menu imbriqué dans le coin et devraient être accessibles directement. On devrait passer d'une image à l'autre sans même se demander où cliquer. En plus la date a disparu, elle fait partie de l'idée de base, il n'est pas envisageable de l'enlever. Si vous enlevez tout, on se retrouve sur une page avec une photo, point. C'est votre concept qui part en vrille. Qui ira voir dans le carré gris du coin pour savoir de quoi il en retourne ? Pas tout le monde…

Par contre j'aime assez la flèche "recto/verso" quand on glisse sur l'image. Difficile de faire plus explicite. Et pourquoi ne se transformerait-elle pas en flèche "gauche" et "droite" en approchant des bords latéraux pour passer d'une photo à l'autre ? Une flèche qui s'adapte en fonction de la zone de l'écran ? Ça serait compliqué à mettre en place ?

Le logo, bof ! J'aime bien le dessin de l'arbre mais le lien avec le site ne me saute pas à la figure. Surtout ce que j'aime moins, c'est la typo manuscrite trop tarabiscotée et les gribouillis verts du bas. C'est trop compliqué pour être un logo. J'aurai préféré quelque chose de plus en rapport avec l'univers initialement développé, la photo. Quelque chose d'ultra simple et efficace autour de la photo (décliné en monochrome blanc pour l'intégrer partout ?), plutôt qu'une illustration à la "Ushuaia" qui complique le concept et qui de plus ne s'intègre pas à votre maquette hyper épurée. La preuve, vous n'avez pas placé cet arbre dans votre mise en page, il dénoterait.
Un bon logo, doit pouvoir rester lisible et efficace à moins d'un centimètre de large et en une seule couleur. L'idée d'un logo dans le style pictos d'appareil photo était plus pertinent, et à mon avis plus efficace et puissant.

Je reste néanmoins fan de ce site au nom magique qui figure dans mes favoris et que j'ai déjà consulté plusieurs fois. Je pense qu'il y a un réel potentiel pour ce site. Affirmez-vous plutôt que de diluer le concept avec des outils "à la mode".

Et si la formule idéale était de prendre le meilleur des deux versions ?



Edit:
Je n'ai pas testé sur smartphone. C'est peut-être là que le design pêchait ? Ceci dit, on profite vraiment de ce site sur un écran panoramique confortable. Un paysage aussi joli soit-il sur une dalle de 4", ça présente un intérêt limité. Sur tablette ok, on a déjà une carte postale… Dans ce cas les pictos de navigation de la version 1 étaient peu être trop petits ? Ce concept est optimal sur les moniteurs et au pire, les tablettes. Je ne pense pas qu'il faille s'appesantir sur les smartphones, du moment que ça marche, ça sera déjà pas mal. Et si ce nouveau menu n'apparaissait que sur les petits formats ?
Je pense qu'il faut inciter les internautes à visiter ce site sur un moniteur confortable, pour en prendre toute la mesure. Un message pourrait apparaitre sur smartphone par exemple ?
Modifié par spongebrain (02 Aug 2013 - 09:53)

Bonjour,

Moi aussi je préférais la première version.
Sur celle-ci, je suis paumé question utilisation, donc ergonomie.

Par contre, elle est parfaite sur mobile. Comme quoi le cerveau réagit différemment suivant l'interface devant laquelle il se trouve. Question de conditionnement j'imagine.

Si j'étais à votre place et que je devais prendre une décision en 2mn, j'opterais pour un découpage en 2 parties : version desktop : l'ancienne, version mobile : la nouvelle. Ensuite, séparation par détection ou bien media queries, à vous de voir en fonction de l'architecture.

Un détail : je me fais piéger à chaque fois en cliquant sur suivant alors que j'arrive logiquement sur la dernière photo. Sur la nouvelle version, il est plus difficile alors de revenir en arrière car il n'y a plus précédent et suivant dans le menu. On peut faire "précédent" avec le navigateur, mais comme les options existent dans le menu, on cherche là cette possibilité. Je vais alors sur "Galerie", alors que sur la page "Eh vous êtes trop impatient..." je souhaiterais juste un lien me permettant de revenir en arrière, un peu comme sur une 404 où l'on pourrait choisir où aller.

Je conclurai en disant que c'est une problématique que l'on rencontre fréquemment sur certains sites où la version mobile est extrêmement bien pensée : le site développé en think mobile first devient en réalité du think mobile only. Mais ceci n'est que mon avis.