Essai Zen Garden : http://univers-fusco.com/tests/zengarden/metro.html

Bonjour,

Je suis en train de réaliser un essai de design fixe pour Zen Garden, un peu particulier, car je suis parti sans trop savoir ce que je voulais faire. Je n'avais que le thème général : le métro.

Pour le moment, le design possède un code CSS spécifique pour les MOSe (Mozilla Opera Safari Ehancement), afin d'exclure les vieux IE et navigateurs affiliés (pour lequels je ferais un design clin d'oeil - quelque chose qui évoque une casse de métro, le rebut, quelque chose de dépassé...).

J'ai essayé de le tester avec divers navigateurs (sur mon PC, ou via des sites de captures d'écrans) :

Konqueror 3.3.2 : à retester, peut-être un léger décalage des liens du footer (sur le panneau d'affichage)
Opera 8.50 : semble ok
Galeon 1.3.20 : idem konqueror
Firefox 1.0.4 : semble ok
Firefox 1.0.5 : ok
Opera 9 : ok
Mozilla 1.7.8 : semble ok
MSIE 7 bêta 2 : ok
Safari 2.0.3 : semble ok


J'aimerais votre avis, savoir ce que vous en pensez, ou si vous voyez des trucs qui clochent... si ça reste lisible (espacement des paragraphes, hauteur de ligne, couleurs...), etc.

Je redonne l'adresse : metropolitan.


(Les images d'entête et de bas de page sont assez lourde pour le moment.
Si vous voyez un gros problème de décalage, pourriez-vous donner votre OS/navigateur ?)
Modifié par (27 May 2006 - 18:44)

Salut,

Je trouve une contradiction entre le côté "à plat" du filet orange qui serpente autour des paragraphes, et l'effet bouton 3D sur les titres des rubriques.

Ce "serpent" orange me semble un peu lourd, et comme il sert aussi de bordure au site, on a l'impression que certains paragraphes sont "exclus du site"... La différence d'épaisseur entre les verticales et les horizontales me dérange fortement graphiquement, mais il s'agit d'un avis personnel.

A améliorer je pense, mais l'ambiance voulue reste sympa malgré tout.
Modifié par Mikachu (27 May 2006 - 19:38)

a écrit :
Je trouve une contradiction entre le côté "à plat" du filet orange qui serpente autour des paragraphes, et l'effet bouton 3D sur les titres des rubriques.

Ouep ! Remarque judicieuse en y repensant.
Il faudrait peut-être que je retravaille ça comme la photo du haut, avec du grain, à plat, et un jeu d'ombres...

Concernant le "serpent" (marrant ça ) il est venu par hasard (au début, la bordure droite était identique à la gauche, avec le fond des titres collés à gauche.)
J'ai testé des couleurs plus sombre, ce qui atténue cette "lourdeur", mais je n'étais pas convaincu. Faudra que je reteste encore.

Merci Mikachu !

Je crois que je vais laisser dormir ce design une journée, le temps d'avoir un regard neuf.


Edit -

a écrit :
avec le fond des titres collés à droite.)

Il fallait lire "à gauche", mais bon... il était temps que je lâche le PC.
Modifié par (27 May 2006 - 20:25)

Mais de rien, en même temps pas évident d'arriver à caler son design sur un code étranger. J'aimerai moi même faire une feuille de style pour Zen Garden, mais pour l'instant j'ai déja du mal à caler mon design sur mon propre code

Pas vu de problème dans Konqueror 3.4.3 (du moins rien de directement visible). Je dirais qu'il n'y a pas de problème de ce côté là.

Une remarque sur le design : c'est intéressant, mais je trouve que la double barre orange est un peu too much. Lorsqu'elle "ondule", ça ne saute pas aux yeux, mais autour des images d'en-tête et de pied de page, c'est assez flagrant. Il faudrait peut-être prévoir une petite subtilité sur ce point (même un effacement progressif d'une des deux barres oranges pourrait suffir à supprimer cette impression d'enfermement).

Deuxième remarque : le principe de la barre orange qui alterne d'un côté puis de l'autre des blocs de texte est sympa, mais j'aurais conservé un alignement du texte de ces blocs. C'est à dire : que la bordure orange soit à gauche ou à droite, le bloc de texte a les même limites latérales.

Deux points de design, et c'est vrai que c'est assez subjectif.
Je pense que le deuxième serait intéressant à tester, si tu ne l'as pas encore fait.

Perso j'aime beaucoup, mis à part la bordure orange qui serpente, je suis fan du reste. L'ambiance et les couleurs sont sympas, impec.

Petite remarque: je vois que tu as utilisé l'exemple dispo sur le site, il faut savoir que la version en ligne est un tantinet différent, il y a une phrase en plus en bas de page, donc à considérer eventuellement pour son design. TU peux tester avec le contenu tel quel en ligne en ajoutant l'url de ta CSS à l'adresse :
http://www.csszengarden.com/?cssfile=http://CSSDENEKO.CSS

Voilà et encore félicitations

Salut,
Sur la photo du bas, ne serait-ce pas la station Arts et mériers ? ligne 11...
Concernant la graphie, le "serpent orange" me laisse perplexe...
Modifié par fredmac (28 May 2006 - 01:07)

Bonjour,

Merci pour les remarques !

Oui fredmac, Arts et métier, une de mes stations préférées à Paris. Elle me fait toujours penser à Jules Verne. (Je voulais quelque chose de clinquant.)

Broadcastor, j'avais d'abord utilisé le balisage normal du site, et pas celui destiné aux essais. Le code est également différent au niveau des liens du premier menu qui ne sont pas tous alignés (exit les "samples #n"). Je crois que je vais le reprendre pour travailler...

Concernant tes remarques mpop, je suis assez d'accord. Surtout que ce serpent me pose problème sur un point : les barres horizontales du haut sont fournies par le fond des titres H3, mais la dernière est constituée par la bordure du dernier bloc de texte (bordure sur le bloc div associé).
Ainsi, impossible de lui appliquer une marge négative à gauche pour l'aligner sur les autres sans décaler aussi le texte... du coup, cette dernière bordure n'est pas alignée.
Si j'aligne les blocs de texte, elle posera problème...

Du coup, et vu que vos remarques se rejoignent (contre ce serpent), je vais essayer autre chose pour voir.
Modifié par (28 May 2006 - 07:30)

neko a écrit :
Ainsi, impossible de lui appliquer une marge négative à gauche pour l'aligner sur les autres sans décaler aussi le texte... du coup, cette dernière bordure n'est pas alignée.
Si j'aligne les blocs de texte, elle posera problème...

Je pensais plutôt à des blocs avec à chaque fois une bordure à gauche et une bordure à droit, de même largeur, et un padding à gauche et un à droite. Ensuite, il suffit de jouer sur les couleurs de bordures (blanc ou orange) pour créer l'effet voulu, tout en gardant un alignement du texte.

Ou alors, si on ne veut pas rajouter une bordure "vide", agrandir le padding du côté qui n'a pas de bordure, par exemple. Mais bon, la première solution me semble bien.

Au passage je suis au boulot et je teste avec le IE 6.0.29 et ... surprise la feuille css n'est pas chargée!
J'espère avoir fait un peu avancer le smilblik

Uhuhhhh ayehhh il s'est laché.

Bon j'étudie le truc et je reviens éditer mon message.

Aymeric, eh oh eh oh on rentre du boulot...

EDIT : juste une question en passant, ne m'étant jamais interessé au css Zen garden, je suppose que la structure initiale du fichier html ne doit pas être modifiée? Et le CSS y'a des directives spécifiques?
Modifié par AymericJ (29 May 2006 - 17:21)

AymericJ a écrit :
je suppose que la structure initiale du fichier html ne doit pas être modifiée?

Oui.

AymericJ a écrit :
Et le CSS y'a des directives spécifiques?

Il me semble que c'est carte blanche.
Par contre il y a peut-être une demande de compatibilité entre navigateurs…
Modifié par mpop (29 May 2006 - 17:06)

Je trouve le design sympa mais comme a dit fredmac le serpent orange est p-e à modifier un peu pour que c'est l'air un peu moins carré
Modifié par Shikamaru (29 May 2006 - 17:58)

Bonsoir,

commandant a écrit :
Au passage je suis au boulot et je teste avec le IE 6.0.29 et ... surprise la feuille css n'est pas chargée!
J'espère avoir fait un peu avancer le smilblik

Oui et non .

a écrit :
Pour le moment, le design possède un code CSS spécifique pour les MOSe (Mozilla Opera Safari Ehancement) (...)

J'avais fait en sorte que IE 6 et consort ne puissent pas lire la feuille de style.

a écrit :
Il me semble que c'est carte blanche.

Ça l'est, mais ils demandent de ne pas trop abuser des CSS3, et de ne pas oublier les CSS1.

a écrit :
Par contre il y a peut-être une demande de compatibilité entre navigateurs…

Si on fait un design élitiste, il faut juste prévoir une version compatible pour les navigateurs déficients.

Au fait, le lâche le orange pour le noir et blanc : http://univers-fusco.com/tests/zengarden/metro2.html (pas encore fini, hein).

Le noir et blanc est sympa. Par contre, je regrette un peu la disparition de la deuxième image, qui développait l'univers graphique annoncé par la première.

Et la disparition du serpentin (qui moi ne me gênait pas du tout…) m'embête un peu, car maintenant c'est presque trop dépouillé au niveau des blocs de texte. Mais bon, je suppose que tu es en train de travailler dessus.

Bonjour,

a écrit :
je regrette un peu la disparition de la deuxième image, qui développait l'univers graphique annoncé par la première.

Je ne l'avais pas encore remise. Il s'agit d'une autre vue de la même station : Arts et métiers.

a écrit :
Et la disparition du serpentin

Il est de retour, mais différemment. Je pense que c'est un peu mieux.

La version noire me semble terminée, pouvez-vous me redonner votre avis ?

J'ai placé le serpentin via des sélecteurs on compris par IE 6. Il avait du mal et je n'avais pas envie de trop m'embêter avec lui.

Je ne suis pas sûr du résultat de la police des textes sur Mac ou Linux. (Mon site de capture favori ne veux rien savoir, et comme il est tard, on verra demain.)

(La version orange.)
Modifié par (30 May 2006 - 02:09)

Salut,

Franchement excellent, un tout petit effet de survol avec un orange ou un rouge orangé pour contraster discrètement la navigation ca serait tip top ^^

C'est intéressant de voir comme le noir et blanc t'as orienté vers des choix mettant en avant les silhouettes et la typographie un peu brute (textes en grosses lettres blanc sur noir), tandis que le orange est plus lueur diffuse, panneaux lumineux, etc.

Globalement, j'aime bien les deux.
Je confirme mon idée que l'alignement des blocs de texte est une bonne chose, tandis que la présence du serpentin permet de "briser" en partie la rigidité de cet alignement. Quoique, dans le cas du desing orange ça n'est pas vraiment aligné, mais ça marche plutôt bien malgré tout.

Il y a pas mal de choses que j'aime bien dans le noir et blanc, en particulier tout le menu de droite, et l'image du bas qui est pas mal avec cet angle symétrique à celui de l'image du haut. Par contre, j'aime bien la couleur orangée…

Bref, pas de vote significatif à apporter. Au suivant.

Ça alors, des amis insomniaques !
Merci d'être repassé ici.

Je tenterai demain... heu, je veux dire un peu plus tard, une version "orangée" au survol pour le menu, Mikachu.
Modifié par (30 May 2006 - 09:36)

Voici le design (final) que je viens de soumettre : metropolitain.
(C'est la couleur au survol des liens qui a changée.)
Vu que ça va prendre un peu de temps avant d'avoir une réponse, j'ai le temps de plancher sur un autre.
Encore merci pour vos avis et remarques.
Modifié par (30 May 2006 - 13:35)