Demande d'avis sur un design

[Dagnan]

Bonsoir à tous.

J'ai hésité avant de me décider à cliquer sur "nouveau message". En fait je ne savais pas trop où poster ; ici ou dans XHTML & CSS. Vous allez comprendre.

Comme je le disais à la personne* qui m'a fait découvrir ce site, et ce forum, j'ai découvert les standards il y a un an ou deux (aïe ma mémoire), avec OpenWeb, et depuis ce jour je m'efforce de faire des sites respectueux, autant du côté du CSS que du XHTML.

Seulement, on peut remarquer en se baladant sur la toile que de nombreux sites qui essaient ou qui respectent le CSS sont affreusement tristes, ou alors ils se ressemblent tous : très peu d'image, un menu à gauche, et zouplaaaaa. Moi aussi je suis toujours dans cette période Évidemment on trouve toujours des perles...

Justement (et on en vient à mon besoin). Pour un projet assez ambitieux, j'ai besoin d'avoir un site bon niveau code, mais aussi assez agréable à l'oeil.

Or, même si je suis capable de produire quelque chose de "basique", je ne pense pas qu'on puisse qualifier ce que je fais "d'agréable à l'oeil"...

Mon projet ? Ah ah, c'est secret Bon, on va dire que ça serait un gros site à contenu, ayant pour thème les manga, la japanimation, et éventuellement élargi à d'autres phénomènes japonisants.

J'ai pas vraiment envie d'expliquer le comment du pourquoi, notemment répondre à "il existe déjà pleins de sites comme ça, pourquoi ?". Mais je vais juste dire que j'ai envie de faire les choses autrement (mieux serait peut-être prétentieux).

Il faut donc comprendre que c'est un projet (enfin beaucoup plus qu'un projet !) qui me tient à coeur, et que je sais à peu près ce que je compte faire du site.

Vous l'avez compri, je cherche quelqu'un pour m'aider au niveau du design. Ou sinon quelqu'un pour me conseiller, mais quelqu'un de vraiment présent serait plus que le bienvenu. Si en plus cette personne possédait des connaissances niveau manga ou animation, whao ! (inutile de préciser que la maitrise du CSS est nécessaire ).

Donc si vous êtes interessé, ou que vous connaissez quelqu'un susceptible de l'être, merci de répondre à ce topic (et merci d'avoir lu jusque là lol).

Je pense que ça peut être une expérience interessante, à vous de voir.

Bonne soirée (ouf, fini de taper).

* Merci encore

ajout

Rebonsoir

Je me suis baladé un peu sur les forums, et j'ai trouvé le lien de kooliss.net

En fait, pour le design que j'imagine, ça serait un peu du style

http://www.kooliss.net/index.php?act=detail&kit=10

mais au niveau agencement seulement.

Pour ma part je vois plus un style assez pastel pour les couleurs.

Pour reexpliquer mon problème, je ne cherche absolument pas quelque chose de compliqué. Juste pouvoir définir une charte graphique pour le site, et avoir quelques trucs sympa comme un header en image, ou des choses comme ça.

Et pour ceux qui se posent la question de savoir pourquoi je ne fais pas une demande, chez kooliss.net par exemple :

je cherche une personne qui puisse m'aider, et assurer un minimum de continuité, par exemple si je décide de faire évoluer le site. Enfin par quelqu'un qui se contente simplement de traiter ma demande, style "demande classée, au suivant".

Je ne connais pas l'ambiance qu'il règne sur le site en question, et je ne connais pas leur méthodes. C'est pourquoi je préfère avant tout m'adresser sur un forum comme ici

Modifié 15 Août 2004 par Dagnan

[bigornot]

moi, je suis intéressé ...

si tu as assez de photos, je veux bien t'aider ...

je te previens tout de suite : je ne suis pas une pointure en design, mais bon ...

par contre, je pars en vacances vendredi ...

pour 2 semaines ...

mais, à partir du 6 septembre, je suis là tout le temps ...

@+

//edit : j'arrive assez bien à faire des sites corrects en css et en html transitionnal 4.0 ...

Modifié 18 Août 2004 par bigornot

[Dagnan]

Ne le prend pas mal, mais je recherche jutement quelqu'un qui sache se débrouiller en design, et qui maitrise un peu plus que le html 4

Mais ce qui m'embête, c'est que j'aurais voulu pouvoir faire quelque chose avant la fin des vacances.

Je te remercie donc, mais comme me l'a conseillé Monique, je vais essayer de me faire ma maquette, et j'améliorerai en fonction des commentaires.

Je t'invite donc à donner ton opinion dès que j'aurais fais quelque chose de, disons, potable

Merci à toi

[Dagnan]

Bonsoir.

Je me suis finalement mis au travail.

Avant de vous demander votre avis (enfin, sur ce qui a été fait, ce n'est pas fini du tout), je tenais à signaler que j'avais pioché mon inspiration sur un site de BreakDance, celui de Guiant (lien du topic sur le forum), ainsi que quelques partie (adaptées bien entendu) du css de chez DotClear.

Le premier site, c'est surtout pour les couleurs, et l'idée pour la réutilisation du fieldset. Le second, c'est au niveau de l'agencement des blocs, pour pouvoir faire une page extensible en largeur, sans recourir aux positions absolues.

Comme je disais, ce n'est pas fini.

J'ai commenté le fichier css, et au début vous trouverez ma todolist pour ceux que ça interesse

Voilà la bête :

http://dagnan.webzzanine.net/dev/egasuki.org/

J'aimerais donc avoir vos avis sur les couleurs, l'organisation, les zolies nimages (comment vous trouvez mon header ? Je promet, je l'ai fait tout seul ! Les boutons aussi [grâce à un tuto, je suis pas un photoshop addicted ]), tout quoi...

Et surtout la présentation.

Vous remarquerez qu'il existe une différence entre les deux pages présentées (oui y'en a deux, les deux premières du menu). Dans l'une, le titre h2 est contenu dans le cadre, dans l'autre il est à l'extérieur. Vous préférez quoi ?

J'hésite aussi entre utiliser plusieurs cadres pour découper mes parties, ou alors en mettre un (qui servirait de cadre global), et qui contiendrait donc les titres aussi (comme sur la page d'accueil, saut qu'il n'y aurait qu'un cadre, comme pour un article par exemple).

Autre chose : à part Internet Explorer, quels sont les navigateurs qui gèrent mal le format PNG que j'utilise ? Parce que là j'ai fait à chaque fois deux formats d'images, png et gif (pour le logo du haut, c'est traité en php, et les autres c'esr dans le css avec le hack pour que le code ne soit pas interpreté par ie).

J'ai quelques problèmes avec IE? qui réagit bizarrement. Regardez mon commentaire dans le CSS, ligne 61, s'il vous plait.

( je viens de penser, si personne trouve de solutions, ce que je vais faire : en php, si ça détecte IE, hop, echo "<br /><br />"; et le tour est joué... )

Allez, la dernière question

Si vous avez la curiosité de regarder le css, vous verrez que je fais référence à la ligne 148 à l'impossibilité de coller les liens dans le menu. Quelqu'un pourrait m'aider à résoudre cela s'il vous plait ? Mais sinon c'est pas très grave, un pixel d'écrat c'est pas la mort.

Merci d'avoir lu, j'attend vos réponses

Note aux Admins

Ca serait possible que quelqu'un change le topic en "Demande d'avis" SVP ?

Modifié 20 Août 2004 par Dagnan

[LaurentDenis]

Deux remarques :

boutons de navigation

il faut spécifier une largeur pour le <ul> de ton header, sinon tes boutons ne sont pas placés horizontalement dans Opera (ce n'est pas un bug, mais une ambiguïté dans la spécification CSS2). Par exemple, width: 90%;

Menu de navigation

ton titrage n'est pas très fonctionnel dans un lecteur d'écran qui permet de naviguer de titre en titre : le menu composé de <h3> y sera considéré comme une sous-section de #contenu, et ne sera donc accessible qu'en descendant la série de titre <h3> de .cadre. Il manque en fait un <h2>Navigation</h2> :

<div id="menu">
<h2>Navigation</h2>
<h3>Rubrique 1</h3>

Si tu veux le cacher, utilise :

#menu h2 {
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}

ou plus simple :

#menu h2 {
position:absolute;
clip: rect(1px 1px 1px 1px);
}

Mais surtout pas de display:none qui le cacherait aussi dans les lecteurs d'écran...

[Dagnan]

Merci, c'est corrigé.

J'ai mis une longueur fixe pour le ul, puisque ça dépend du nombre d'images, ça passe quand même ? ( on sait jamais Il faudrait que je télécharger, mais déjà tester quand je teste avec IE Je déprime, alors avec Opera )

D'ailleurs, Opera, il gère bien le png ou pas ?

[LaurentDenis]

J'ai mis une longueur fixe pour le ul, puisque ça dépend du nombre d'images, ça passe quand même

C'est bon pour opera7.5x

D'ailleurs, Opera, il gère bien le png ou pas ?

Parfaitement

[sylvain]

Juste une remarque un peu HS sur ton header (qui est bien agréable à regarder d'ailleurs) : as tu des autorisations sur les images que tu as utilisé ? car je ne sais pas si les éditeurs de mangas sont stricts la dessus ou pas, mais en théorie il en faut une.

[Dagnan]

En théorie oui il en faut une.

En théorie il y a des milliers de sites hors la loi (et je pèse mes mots).

Pour le hader, je ne compte rien faire de spécial. S'il y a des problèmes je modifierai, ou supprimerai.

Pour le reste du site, comptant intégrer des images provenant d'originaux, je compte prendre contact pour demander des autorisations, ou au moins en faire part par email. Sinon, ben je me débrouillerai sans.

Pour l'instant, en ce qui concerne les sites, ou les fansubs (sous titres d'anime ), les éditeurs ne disent pas grand chose, sauf exception. Donc vis à vis de la loi, c'est illégal. Mais dans la plupart des cas, et dans la mesure où le site en question vise à faire de la publicité ou promouvoir le produit, les faits sont tolérés (d'ailleurs ça s'applique pour tout, séries télé aussi par exemple).

Question :

C'est possible d'avoir deux background dans un seul conteneur ou pas ?

Modifié 20 Août 2004 par Dagnan

[Dagnan]

J'ai fais quelques modifications :

http://dagnan.webzzanine.net/dev/egasuki.org/

Cependant, est-ce que quelqu'un pourrait m'indiquer comment je pourrai faire pour éviter que le menu soit trop large dans les grandes résolutions (on m'a fait la remarque) ?

Le problème est que si je diminue la largeur, en 800x600 le menu sera trop petit [largeur relative en pourcentages]

Quelqu'un peut m'aider svp ?

A part ça, si vous avez des commentaires, des suggestions, vous gênez pas

[kooliss.net]

Et pour ceux qui se posent la question de savoir pourquoi je ne fais pas une demande, chez kooliss.net par exemple :

je cherche une personne qui puisse m'aider, et assurer un minimum de continuité, par exemple si je décide de faire évoluer le site. Enfin par quelqu'un qui se contente simplement de traiter ma demande, style "demande classée, au suivant".

Je ne connais pas l'ambiance qu'il règne sur le site en question, et je ne connais pas leur méthodes. C'est pourquoi je préfère avant tout m'adresser sur un forum comme ici

Bonjour,

Je suis flatté de voir que notre travail suscite un peu d'interet

Effectivement, nous n'assurons pas le suivi des créations puisque ce sont des "kits" et que par essence, ceux qui téléchargent ont un minimum de connaissances soit en xhtml soit en html. Bien évidemment nous assurons un support si un probleme se pose au niveau du téléchargement mais pas sur l'utilisation qui est faite du kit. Simplement parce que cela nous prendrait trop de temps.

Ceci dit, les kits proposés sont tous valides soit html 4.01 transitional soit xhtml 1.0 strict. On peut donc considérer que le départ se fait sur de bonnes bases. De plus, concernant les kits xhtml, la css est commentée de manière à pouvoir facilement s'y repérer.

[Dagnan]

Bonjour,

Je suis flatté de voir que notre travail suscite un peu d'interet

Effectivement, nous n'assurons pas le suivi des créations puisque ce sont des "kits" et que par essence, ceux qui téléchargent ont un minimum de connaissances soit en xhtml soit en html. Bien évidemment nous assurons un support si un probleme se pose au niveau du téléchargement mais pas sur l'utilisation qui est faite du kit. Simplement parce que cela nous prendrait trop de temps.

Ceci dit, les kits proposés sont tous valides soit html 4.01 transitional soit xhtml 1.0 strict. On peut donc considérer que le départ se fait sur de bonnes bases. De plus, concernant les kits xhtml, la css est commentée de manière à pouvoir facilement s'y repérer.

En fait je ne faisais pas référence aux kits. Je n'ai aucun problème à modifier quelque chose de déjà existant, et j'avais déjà entrepris un travail à peu près similaire sur le kit d'un autre site.

Je parlais plutôt de faire appel au forum du site

Sinon, pas d'avis sur mon site ?

[nalrem]

Salut,

Quelques petits trucs qui pourraient déranger/être améliorés :

- le contraste très peu marqué des boutons de navigation (header)

- toujours sur les boutons, quand on est sur la page concernée, peut être faire changer l'apparence du bouton ? Càd vu qu'on est sur l'accueil, mettre le bouton accueil en enfoncé.

- le titre egasuki.org qui n'est pas détouré transparent et qui provoque donc un affichage de carrés bleu quand on est en faible résolution ou qu'on réduit la fenêtre.

edit : peux etre faut-il aussi se renseigner sur le format png. Il est libre mais il est aussi un peu lourd, et surtout il a été trouvé des failles très recemment quant à ce format (je ne sais pas dans quelle mesure ça a été corrigé).

nalrem

Modifié 30 Août 2004 par nalrem

[Dagnan]

Je vais essayer de voir pour les deux premiers problèmes.

- le titre egasuki.org qui n'est pas détouré transparent et qui provoque donc un affichage de carrés bleu quand on est en faible résolution ou qu'on réduit la fenêtre.

Comment ça ? Le titre est bien transparent, du moins sous un navigateur qui lit correctement le format... Sous IE par contre, j'ai été obligé de bidouiller, pour garder l'image au format png mais 8, mais 16, qui n'accepte pas la transparence (qui de toutes façons n'est pas gérée).

Donc, ceux qui passent par IE, tant pis pour eux

edit : peux etre faut-il aussi se renseigner sur le format png. Il est libre mais il est aussi un peu lourd, et surtout il a été trouvé des failles très recemment quant à ce format (je ne sais pas dans quelle mesure ça a été corrigé).

Tu te trompes mon ami

La faille ne concernait pas le format png lui-même, mais les librairies, donc, y'a aucun problème De plus, le problème a tout de suite été corrigé (vive le monde libre).

Merci pour tes commentaires

Modifié 30 Août 2004 par Dagnan

[nalrem]

Pour le problème de la transparence sous ie, peut être est-il possible d'envisager une detection du navigateur utilisé via php, et si IE est detecté, fournir un header un peu différent ?

[wiko]

Tes boutons menus (accueil, aide...) sont mal détourés, on voit le crénelage dans la partie blanche. Pour ma part, je trouve que les gifs animés comme ça font assez vieillots (mais c'est un point de vue)

[benjiiim]

Je trouve cette maquette sublime !

Très beau travail !

[Guest vchahun]

Tes boutons menus (accueil, aide...) sont mal détourés, on voit le crénelage dans la partie blanche. Pour ma part, je trouve que les gifs animés comme ça font assez vieillots (mais c'est un point de vue) 

Je suppose que c'est le prétendu problème PNG

IE et le PNG, il y a encore des progrès à faire (avec le W3C, même, mais c'est une autre histoire !). Surtout pour les PNG transparents

[Dagnan]

Je vous remercie de vos réponses

Normalement quelqu'un devrait s'occuper du design, mais j'ai pas vraiment eu de nouvelles

Pour le problème de la transparence sous ie, peut être est-il possible d'envisager une detection du navigateur utilisé via php, et si IE est detecté, fournir un header un peu différent ?

C'est bien ce que je fais.

Si IE est détecté, le logo renvoyé est au format gif (j'avais dit png 8, mais je me suis trompé). La raison du détourage grossier est que si je faisais un fond transparent, on le voyait très nettement... Le format gif n'est pas parfait

Tes boutons menus (accueil, aide...) sont mal détourés, on voit le crénelage dans la partie blanche. Pour ma part, je trouve que les gifs animés comme ça font assez vieillots (mais c'est un point de vue) tongue.gif

Hmm, tu dois utiliser Internet Explorer toi

Avec Firefox (Opera aussi je suppose), le support des png est nikel. Les images des boutons sont donc au format png, et on ne voit pas le crénelage.

En revenche, vu que sur IE, le support des png n'est pas top, j'ai du encore une fois utiliser le format gif (pour avoir la transparence).

Mais malheureusement, le détourage des gif n'est pas non plus extraordinaire, ce qui explique le résultat.

Sinon, je n'ai pas compris le terme de "gif animé". Pour moi, un gif animé est un gif qui contient plusieurs images, qui s'affichent à la suite...

Là, ce n'est pas du tout ça. L'image du bouton contient les deux aspect : lorsque la souris est dessus et lorsqu'elle ne l'est pas. Le css permet de faire changer la position de l'image vue, et donc de passer d'un état à un autre (souris dessus ou pas) sans charger une autre image.

benjiiim, merci

Je suppose que c'est le prétendu problème PNG biggrin.gif

IE et le PNG, il y a encore des progrès à faire (avec le W3C, même, mais c'est une autre histoire !). Surtout pour les PNG transparents mad.gif

Il ne me semble pas qu'on voit le crénelage avec Firefox. Je me trompe peut-être.

Sinon, sous IE, comme je l'expliquais, c'est le format gif qui est utilisé, et qui n'est pas très performant pour les détourages compliqués.

Conclusions : arrêtez d'utiliser IE