[Intermédiaire] Ishimaru Design v6 - Avis avant intégration

Bonjour,

Je suis présentement en train de travailler sur la prochaine version de mon site Ishimaru Design. Pour la future version, j'ai fait un tout nouveau webdesign pour remplacer l'actuel qui se fait vieux, et j'ai pris l'occasion pour revoir complètement l'ergonomie. En effet, les styles et les tutoriels GIMP étaient mis en avant, mais ça n'en est pas de même pour les MODs et petits hacks, ainsi que les tutos autres que les tutos GIMP. J'ai donc décidé de diviser tout ça plus clairement en m'inspirant un peu d'Alsacréations. Des accès de différentes manières (barre des sous-rubriques, fil d'ariane, etc.) pemettent une souplesse dans la navigation. Aussi, je voulais un truc qui collait mieux à l'exotisme du nom, d'où le bambou (qui évoque l'Asie), tout en restant dans mon style de prédilection, soit le style moderne. Et par choix, j'ai opté pour un design à largeur fixe de 980px, parce que quand t'essaies d'aligner plusieurs blocs d'une galerie, que ce soit en div ou en tableaux, ça devient vite galère avec les variations, soit parce que ça finit par se mettre n'importe comment (les div), soit parce que ça fait un gros espace vide à côté (les tableaux). Et élargir des blocs alors que le contenu est à largeur fixe, là aussi, ça fait de grands espaces vides quand la page est très large. Et il y a aussi le côté graphique qui entre en ligne de compte dans mon choix.

Pour le moment, je n'ai fait que le codage HTML et CSS et donc, ce que je vais vous montrer sont des démos statiques, car je veux être sûre que je suis sur la bonne voie avant de commencer l'intégration dans le site qui utilise le moteur du forum.

Et autres notes :
- J'ai surtout testé sous Firefox 3.6 et Chromium, mais puisque j'ai quelqu'un qui est sous FF2 (il trouve FF3 trop lourd), j'ai mis un correctif dans le CSS pour la gestion de la propriété inline-block utilisée dans le menu en haut à droite.
- Je suis sous Linux, et même si j'ai gardé XP à côté, mes moyens pour tester sous les différentes versions d'IE sont assez limités : je n'ai qu'IE7, et mon Multiple IEs n'est plus fonctionnel. Quant à la virtualisation, c'est difficilement pensable avec ma config (l'espace disque surtout).
- J'uilise les arrondis CSS3 pour les blocs du corps de la page (ex: les quatre blocs de l'accueil), les boutons du formulaire de connexion rapide. J'ai bien essayé de mettre en place un script correcteur pour IE, mais j'ai un souci avec le bouton Envoyer, et celui qui a bien accepté de tester m'a conseillé de laisser tomber les scripts. Donc pour le moment, j'ai laissé le code là (sur index.html), mais je l'ai commenté pour le désactiver en attendant de décider si je garde le correctif ou non.
- Et pour les PNGs, je n'ai pas (encore) mis de script correcteur pour IE6. Peut-être que j'en mettrai, peut-être que j'en mettrai pas, mais d'un autre côté, j'ai encore 9.5% des visiteurs qui utilisent encore IE6, selon les stats de janvier : -http://ishimaru-design.servhome.org/awstats/awstats.ishimaru-design.servhome.org.2011-02.browserdetail.html?month=01&year=2011&output=browserdetail&config=ishimaru-design.servhome.org
mais d'un autre côté, je me demande s'il n'y en a pas une partie qui serait en fait des robots puisque j'ai des visites de robots spammeurs même si peu d'entre eux arrivent à passer la question/réponse à l'inscription.
- Le CSS n'est pas encore optimisé, je ferai un nettoyage en temps et lieu pour optimiser tout ça (ex: réunir les propriétés d'arrondis identiques, enlever les lignes commentées, etc.)

Voilà pour les précisions.

Voici maintenant les pages de démo que j'ai faites et que je soumets à vos avis avant l'étape de l'intégration.

Voici un aperçu de la page d'accueil :
http://ishimaru-design.servhome.org/tests/ishimaru-v6/index.html

En version connecté :
-http://ishimaru-design.servhome.org/tests/ishimaru-v6/connecte.html

Page des news :
-http://ishimaru-design.servhome.org/tests/ishimaru-v6/news.html

Accueil des ressources :
-http://ishimaru-design.servhome.org/tests/ishimaru-v6/ressources.html

Page spécifique à une catégorie :
-http://ishimaru-design.servhome.org/tests/ishimaru-v6/phpbb3.html

Une liste des styles :
-http://ishimaru-design.servhome.org/tests/ishimaru-v6/styles-phpbb3.html

Détails d'un style :
-http://ishimaru-design.servhome.org/tests/ishimaru-v6/pro_ubuntu.html

Une liste de MODs et hacks
-http://ishimaru-design.servhome.org/tests/ishimaru-v6/mods-cb.html

Détails d'un MOD/Hack :
-http://ishimaru-design.servhome.org/tests/ishimaru-v6/anniv-index.html

Accueil des tutoriels :
-http://ishimaru-design.servhome.org/tests/ishimaru-v6/tutoriels.html

Une liste de tutoriels :
-http://ishimaru-design.servhome.org/tests/ishimaru-v6/tutos-gimp.html

Plan du site :
-http://ishimaru-design.servhome.org/tests/ishimaru-v6/plan.html

Et deux exemples de pages "fixes" :
-http://ishimaru-design.servhome.org/tests/ishimaru-v6/apropos.html
-http://ishimaru-design.servhome.org/tests/ishimaru-v6/servhome.html

Quant à la partie Forum, ça se fera quand je commencerai l'intégration dans CB.


Merci d'avance !

Ishimaru
Modifié par Laurie-Anne (12 Feb 2011 - 12:23)

Bonjour Ishimaru, je n'ai pas testée les pages de façon approfondies mais je n'ai rien détectée de spécial non plus sauf sur IE 6 mais ça tu le sais déjà...

Deux choses m'ont cependant frappée, d'abord le contraste des caractères et la couleur verte.

J'aime le design et cette couleur mais je me demande s'il n'y aurait pas moyen d'ajouter un petit quelque chose de complémentaire à cette couleur. Peut-être pour les icônes du menu ou bien pour l'entête ?

Je crois que tu aurais intérêt aussi à accentuer le contraste des caractères.

Finalement, tu as quelques petites erreurs de validation. Des coquilles à corriger...

En effet, pour les erreurs de validations, je n'avais pas fait gaffe ^^" J'avais vérifié quelques bouts durant le codage, mais j'avais oublié de vérifier chacune des pages une fois le tout fini, mettons qu'on tend à oublier de valider quand on connaît ce qu'il faut faire et ne pas faire en XHTML strict. J'avais donc oublié de le faire une fois les pages mises en ligne.
Je viens donc de corriger chacune des pages et elles sont maintenant toutes valides.

Quant à une complémentaire, je me demandais si l'ajout de touches d'orange à certains endroit ne risquait pas de faire bizarre avec les différentes variantes de teintes de vert (vert forêt, vert jaunâtre, vert bleuté). Parce que dans le design actuel, j'ai bien des touches d'orange, mais les verts ont pas mal la même teinte (seule la valeur variait vraiment).

IshimaruChiaki a écrit :
Quant à une complémentaire, je me demandais si l'ajout de touches d'orange...

Si tu prends par exemple le vert foncé de l'entête et que tu cherches son complémentaire, ce ne sera pas orange.

Voir sur Color Scheme Designer. Je crois que tu peux trouver une couleur qui pourrait amener un petit plus à ton design et qui ne fera pas nécessairement bizarre. Tu peux adapter tes teintes de vert avec ce complément de toutes façons.
Modifié par Mabelle (12 Feb 2011 - 13:48)

Bonjour,

IshimaruChiaki a écrit :
mettons qu'on tend à oublier de valider quand on connaît ce qu'il faut faire et ne pas faire en XHTML strict.

Si tu développes avec Firefox, tu peux installer l'extension Html Validator. Ensuite, tu vas dans les options de l'extension et tu peux mettre Algorithme : Les deux.

Ça permet de voir en un coup d'oeil si la page affichée comporte des erreurs grâce aux indications en bas à droite du navigateur. En double-cliquant sur les indications, tu peux avoir plus de détails sur les erreurs.
Modifié par Tony Monast (12 Feb 2011 - 17:59)

Mabelle a écrit :


Si tu prends par exemple le vert foncé de l'entête et que tu cherches son complémentaire, ce ne sera pas orange.

Voir sur Color Scheme Designer. Je crois que tu peux trouver une couleur qui pourrait amener un petit plus à ton design et qui ne fera pas nécessairement bizarre. Tu peux adapter tes teintes de vert avec ce complément de toutes façons.

Et si je te dis que lors de la création du design actuel, j'avais essayé de mettre du rouge, on m'avait suggéré de l'orangiser un peu en me disant que les complémentaires ne marchaient pas toujours dans l'harmonie des couleurs ? J'ai déjà eu droit à une discussion animée à ce sujet, et je n'ai pas envie de rembarquer dans ça et de me retrouver une fois de plus mêlée !
D'ailleurs, je te post le lien d'un billet que j'avais écrit sur mon ancien blog il y a un an et demi : http://zone-libre.overblogger.com/carnet-de-bord-b1/La-bichromie-en-webdesign-Pas-facile-d-y-arriver-b1-p5541.htm
(je viens de republier les commentaires qui s'étaient remis en attente, je ne sais pas pourquoi ils s'étaient dévalidés...)

IshimaruChiaki, tu nous demandes un avis sur ton design, ce que je t'ai donné.

Pour le reste, à toi de voir et de décider. Ce n'est pas parce que quelqu'un te donne un avis ou te fait un commentaire que tu dois absolument le suivre. Tu réfléchis et tu prends ce qui te convient. Pas besoin d'embarquer dans des discussions animées, que ce soit sur alsacréations ou un autre forum...