Wikini

DiscussionStyleWikiNiParDefaut

PagePrincipale :: DerniersChangements :: DerniersCommentaires :: ParametresUtilisateur :: Vous êtes ec2-54-235-6-60.compute-1.amazonaws.com
<< ChasseAuxBoguesNouveauStyle NouveauStyleWikini DiscussionStructureXHtmlWikini? >>

Style par défaut des pages de Wikini


L'objectif de cette page est de discuter de l'aspect esthétique de Wikini par défaut afin de le rendre plus attractif. Bien évidemment tout le monde peut prendre part aux discussions et apporter ainsi sa touche à Wikini.

Notez bien que l'on ne parle ici que de l'aspect par défaut, celui qu'on obtient lorsqu'on vient d'installer Wikini.

Aller voir les maquettes sous forme de dessin à la page MaquettesStyleWikiniParDefaut? et sous forme de page web à la page MaquetteHtmlStyleWikiniParDefaut?.

Motivation


La motivation vient principalement de la comparaison avec d'autres outils du même type (Wordpress et DotClear par exemple) et de la lecture récente d'un livre de design web "Le zen des CSS", co-écrit par le créateur de CSS Zen Garden lui-même... En outre, ayant eu récemment à choisir un moteur de blog, je suis intimement convaincu que les 2 principaux critères de sélection sont la simplicité d'utilisation et l'esthétique.

Plan de bataille


Il m'apparaît maintenant assez clairement qu'il faut d'abord s'attaquer au graphisme du style par défaut de Wikini et ses possibilités de modifications avant de s'attaquer au codage Html/CSS comme discuté dans les pages LaurentLunatiSkin et JmPhilippePropositionsCSS.

Plus exactement :

Eventuellement on fait 1 ou 2 styles supplémentaires pour prouver que le XHtml codé permet bien de bouger ce qu'on a dit en 2. Ce serait même presque obligatoire d'en faire un sans images pour les sites qui s'adressent à des visiteurs principalement en bas débit.

Il faudrait aussi prévoir une série de tests d'accéssibilité sur le plan sémantique (avec http://webxact.watchfire.com/, http://www.cynthiasays.com/ et http://wave.webaim.org/) et sur le plan visuel notamment pour le daltonisme (recommandations du w3c et http://colorfilter.wickline.org/ pour des simulations).

Critique du style par défaut


Aspect global


L'impression immédiate que laisse Wikini est pour moi la densité : texte écrit petit, s'étirant sur toute la largeur, lignes très proches les unes des autres, absence de marges importante sur les bords, pas de graphisme, pas de menu latéral pour diviser la largeur de page, titres avec lettres serrées les unes contre les autres, beaucoup de soulignés... Bref surtout du texte et pas de fil directeur évident.

Sur l'aspect global les conseils émis dans le livre cité plus haut sont les suivants :

Codage Html/CSS


Pour les navigateurs en mode texte - donc pour l'accessibilité, il vaut mieux placer la section contenant le texte de la page (bloc div) en début de code Html. Cela évite de parcourir la liste des liens potentiellement longue pour y arriver et surtout à chaque page à lire !

Pour faciliter un peu le travail des graphistes web, il vaut mieux passer WikiNiEnHTMLStrict afin de forcer InternetExplorer 6.0 en mode plus proche des standards. Ainsi il ne reste que les IE 5.5 et 5.0 de réellement extravagants par rapport aux standards (malheureusement pas par rapport à la part de marché, encore que...).

Discussions


Je (GreGoire?) recommande de faire plusieurs feuilles de style:

Oui je n'en ai pas parlé dans la section du dessus Codage Html - CSS, mais j'aurais certainement dû. En fait la discussion sur ce sujet est déjà ouverte sur la page RendreModulairesLesFeuillesDeStyle et... ne fait pas (pas encore ?) l'unanimité. Pour ma part cela devient de plus en plus inévitable d'organiser la structure des styles car :
De ce fait il est très souhaitable que Wikini adopte une structure de fichiers souple et ouverte pour les thèmes. D'ailleurs j'ai ajouté un couplet en rapport avec ces réflexions à la page RendreModulairesLesFeuillesDeStyle sans plus de succès... Sauras-tu être plus convainquant que moi ? -- JmPhilippe

Que peut-on faire ?


Aller voir les maquettes à la page MaquettesStyleWikiniParDefaut?.

Mise en page


Je propose que Wikini adopte une mise en page classique dans le web actuel d'une zone de contenu de largeur fixe, centrée dans la fenêtre du
navigateur et avec une marge à droite et à gauche minimale généreuse. Les menus seraient placés dans une colonne de la zone de contenu, à droite ou à gauche (il semble que ce soit plus courant de la trouver à gauche toutefois). La zone de copyright resterait en bas de page.

Esthétisme


Pour le choix des couleurs, le bleu est vraisemblablement la couleur sans risques quelle que soit la nationnalité du lecteur.

Pour le graphisme, sans entrer dans le débat du logo Wikini (voir DiscussionLogoPourWikini), on peut ajouter quelques images pour agrémenter le texte. Par exemple le titre du Wiki pourrait être placé dans une image (un rectangle aux coins arrondis avec effet de lumière et d'ombre), la zone de contenu pourrait avoir une ombre, les puces des listes pourraient être remplacés par des icônes (notamment dans le menu).

Ergonomie


Dans cette section une liste de fonctionnalités rattachées à l'espace de la page où tout un chacun pourrait proposer une amélioration graphique/pratique/fonctionnelle, puis un vote pour une exploration de la faisabilité de cette nouveauté.

Problèmes posés par Wikini


Texte des liens sans espace

NB: ce problème est discuté sous un autre angle dans la page TitreAlternatifPourChaquePage dans laquelle on trouvera une référence au problème posé ici pour la mise en page.

De nombreux liens de la page mais en dehors de la zone de texte sont composés d'un assemblage de lettres sans espace (PagePrincipale, DerniersChangements, DerniersCommentaires, ParametresUtilisateur par exemple). Ceci pose un problème de mise en page car on peut se trouver avec un mot de 50 lettres totalement insécable puisque sans espace. Comment alors prévoir suffisamment de place dans le design ?
Certes on peut facilement remplacer les liens en question par un texte (DerniersCommentaires devient Derniers commentaires) de sorte que le seul problème qui subsiste est celui du nom des pages créées par les utilisateurs. Notamment celui du titre de la page.

Description du site

Il n'y a pas de texte décrivant le site. Si le nom du site est un peu compact, voire sans rapport direct avec le contenu, comment savoir de quoi il s'agit ? Il faudrait donc pouvoir définir ce texte descriptif dans les paramètres de Wikini afin de l'afficher près du nom du site.

Texte de copyright

Sauf erreur de ma part, il doit manquer dans le pied de page une zone où revendiquer les droits de copie du texte du wiki.

Marquage erroné des paragraphes

Le tag P n'est pas utilisé et des tags BR sont utilisés (à tord) à la place. Outre l'aspect sémantique des choses, que certains peuvent voir comme un problème de puristes, ceci a l'inconvénient de ne pas pouvoir régler normalement l'espacement des paragraphes dans les CSS. En effet, dans la logique Html, c'est la marge verticale des paragraphes qui doit servir à aérer le texte entre les paragraphes. Cependant, dans le Wikini actuel, il faudrait jouer sur la hauteur du BR, ce que je n'ai jamais pratiqué...

Absence de logo

Certes wikini.net n'a pas (encore ?) de logo. Ce n'est pas une raison pour considérer que les sites basés sur Wikini n'en ont pas non plus ! Donc il faudrait ajouter un tag IMG dans l'entête pour placer un éventuel logo.

Problèmes de conception courants


Couleur du texte et du fond

J'ai eu plusieurs remarques sur mes wikinis, parce que la couleur blanche du fond de la page, n'etais pas confortable pour la lecture, (sur mes pages j'ai donc mis un fond gris moche, en attendant une solution plus esthetique) --Err404?

Marges en pixels, en em ou en %

Mieux vaut faire des marges en % pour que celles-ci s'adaptent à la taille de la fenêtre de navigation. Ceci est nettement préférable car sinon celui qui navigue en 640*480 aura l'impression que c'est trop compressé, alors que celui qui navigue en 1280*1024 ou même plus gardera son impression que c'est trop large... -- LordFarquaad

Largeur de la zone de texte

Pour la largeur de la zone de texte, en fait il est de notoriété publique qu'il ne faut pas dépasser un certain nombre de mots par ligne (12 à 15 je crois) car sinon c'est plus pénible à lire. L'explication est qu'au-delà, cela oblige les yeux à effectuer des mouvements latéraux trop amples, d'où une lecture moins rapide et donc perçue comme plus difficile. Je sais que cela conduit à allonger les pages verticalement mais si tu fais bien attention, dans les journaux, on écrit en multiples colonnes finalement assez étroites pour cette raison... -- JmPhilippe

Discussions




LordFarquaadASuivre
Il n'y a pas de commentaire sur cette page. [Afficher commentaires/formulaire]