Phpgo - design et accessibilité...

Bonjour,

Je planche pour el moment sur le design d'un de mes projets en cours, j'aimerais avoir vos avis, remarques, critiques,... Aussi bien positive que négative.
Je vous demande votre avis à plusieur niveau :
* Design
* Code
* Accessibilité

Le site est visible ici.
Validation :
*XHTML 1.0 Strict
*CSS 2
*AAA
Vous trouverez ici un éventail de screenshots.

Le contenu du site et ses fonctionalité sont encore en construction pour le moement, seule l'espace membre est déjà fonctionnel.

Merci d'avance,

a+

PS: Une dernière petite question, est-ce mieux de définir son DOCTYPE XHTML 1.0 Strict ou 1.1?
Modifié par agilis (08 Aug 2005 - 09:14)

Salut,

Comme tu le verras dans ce petit tableau récapitulatif, le XHTML 1.1 ne devrait pas être servi en tant que text/html.
Or, nous savons qu'un certain navigateur ne prend pas pour l'instant le type mime application/xhtml+xml.

Conséquence : xhtml 1.0 strict (servi en tant que application/xhtml+xml aux navigateurs qui le comprennent et en tant que text/html à celui qui ne comprend pas).
Modifié par Marvin Le Rouge (31 Jul 2005 - 22:42)

A point de vue design, j'ai un peu de mal avec le gros bloc gris, c'est trop massif, trop terne, et ça occupe trop d'espace sur la page.

Je pense qu'il faudrait ne le conserver que pour le titre, en réduisant sa hauteur.

Quant au menu à gauche et au bas de la page, il peuvent rester sur fond blanc ou avoir un fond plus clair, uni.

Voilà pour la petite critique...à voir. Je suis nul en design !

As-tu pensé à coter en % et em ?

Cela gagne en fluidité.

Le bloc gris en haut est effectivement démesuré.

Voici comment je verrais plutôt ta feuille de style :

body {
	font-family:"trebuchet MS", Arial, Verdana;
	[b]font-size:100%;[/b]
	margin:0;
	padding:0;
	background-color:#FBFBFB;
}
#conteneur {
	[b]width:100%;[/b]
	margin-right:auto;
	margin-left:auto;
	[b]margin-top:.2em;[/b]
	background-color:#FBFBFB;
	border:1px solid #B3B3B3;
	background-image:url(../images/fond.png);
	background-repeat:repeat-y;
}
#header {
	[b]height:85px;[/b]
	background-image:url(../images/head.png);
	background-repeat:no-repeat;
        [b]background-position: bottom right;[/b]

}
/* Menu */
#menu {
	float:left;
	[b]margin-left:.5em;[/b]
}
#menu ul {
	margin:0;
	padding:0;
}
#menu ul li {
	font-weight:bold;
	[b]margin-left:2.5em;[/b]
	[b]font-size:1em;[/b]
	color:#666;
	list-style-type:none;
  [b]  line-height:1.5em;
	height:1.2em;[/b]
}
#menu ul li a {
	display:block;
	color:#666;
	[b]padding-left:.2em;[/b]
	text-decoration:none;
  [b]  line-height:1.5em;
	height:1.2em;[/b]
}
#menu ul li a:hover {
	color:#C00;
	background-image:url(../images/trans.png);
	[b]padding-left:.2em;[/b]
	border-left:3px solid #CC0000;
}
/* Footer */
#footer {
	background-image:url(../images/pied.png);
	text-align:center;
	[b]padding-top:.2em;[/b]
	color:#C00;
	font-family:"trebuchet MS", Arial, Verdana;
	font-size:1em;
	clear:both;
	[b]line-height:2em;[/b]
}
/* Contenu */
#contenu {
	background-color:#FBFBFB;
	[b]width:70%;
	margin-right:1em;[/b]
	float:right;
	[b]margin-bottom:1.5em;[/b]
}
img {
	vertical-align:middle;
	border:0;
	margin:2px;
}
p{
	text-indent:2em;
	text-align:justify;
	margin:0;
	padding:0;
	color:#333;
}

/* Liens */
a {
	color:#333;
	text-decoration:underline;	
}
a:hover {
	text-decoration:none;
}

/* Titres */
h1, h2, ul#access {
	display:none;
}
h3 {
	color:#3A4D80;
	border-bottom:1px solid #5387BD;
	background-image:url(../images/elephant.jpg);
	background-repeat:no-repeat;
	[b]padding-left:3em;
	line-height:2.5em;
	font-weight:normal;
	margin-top:1em;
	font-size:1.2em;[/b]
}
h4 {
	color:#3A4D80;
	border-bottom:1px dashed #5387BD;
	[b]margin-left:2em;
	padding-left:.3em;[/b]
}

/* Formulaire */

form input {
	margin-left:30px;
	color:#666;
	width:206px;
	margin-bottom:5px;
}
form input[type="text"], form input[type="password"] {
	border:1px solid #BCBDC0;
	padding-left:5px;
	margin-bottom:5px;
	width:200px;
}
form input.err {
	border:1px solid #C00;
	color:#C00;
}
form div {
	float:left;
}
form p {
	background-color:#E8E8E8;
	padding:5px;
	float:left;
	width:250px;
	margin-left:10px;
}
form p span {
	font-weight:bold;
}
form p.err {
	background-color:#FFF;
	border:1px solid #c00;
}

Il y aurait la cotation du formulaire à revoir, peut-être.

L'idéal serait que les titres des rubriques de menus soient en texte (coté en em) et non en images.

Merci pour vos réponses!

Marvin Le Rouge a écrit :
Conséquence : xhtml 1.0 strict (servi en tant que application/xhtml+xml aux navigateurs qui le comprennent et en tant que text/html à celui qui ne comprend pas).

Comment on fait ca ?
@Laurent Denis > Donc, si j'ai bien compris, c'est pas obligé?

84mickael a écrit :
A point de vue design, j'ai un peu de mal avec le gros bloc gris, c'est trop massif, trop terne, et ça occupe trop d'espace sur la page.

Je pense qu'il faudrait ne le conserver que pour le titre, en réduisant sa hauteur.

Quant au menu à gauche et au bas de la page, il peuvent rester sur fond blanc ou avoir un fond plus clair, uni.

Voilà pour la petite critique...à voir. Je suis nul en design !

Effectivement, le bloc du dessus est fort massif. Je vais donc diminuer sa hauteur. Pour le menu et le footer sur un fond uni, j'ai peur de la transition entre le header et le menu

@jmc > J'aime pas trop les largeur fluide en fait. Surtout que pour le moment, il va pas y avoir de grand textes ou beaucoup de contenu sur ce site là donc j'aimais bien la largeur fixe, je crois que je vais al garder. Par contre, pour la taille du texte, c'est quoi les em? (c'est une unité, c'est tout ce que je sais...) C'est relatif? A quoi?

J'ai remarqué un petit problème dans le menu, quand on agrandit le texte jsuqu'au moment où "Base de données" se met sur deux lignes, ca foire au survol... On peut éviter ca?

jcm a écrit :
L'idéal serait que les titres des rubriques de menus soient en texte (coté en em) et non en images.

Le truc, c'est que j'aime pas trop les polices standart... Laquelle me conseillez-vous? (sans-serif)

Encore merci

agilis a écrit :
Merci pour vos réponses!
Comment on fait ca ?
@Laurent Denis > Donc, si j'ai bien compris, c'est pas obligé?

ce n'est pas du tout obligé.

Pour le faire, on teste l'en-tête HTTP_ACCEPT envoyé par le navigateur au serveur lorsqu'il demande l'envoi d'une page Web :
- Si, dans cet en-tête, le navigateur déclare accepter le type mime application/xhtml+xml, on lui envoie en réponse la page avec ce type mime (indiqué par l'en-tête HTTP Content-Type) et le contenu qui va bien.
- Si, au contraire, le navigateur ne dit rien à propos de ses goûts pour ce type mime, on suppose qu'il n'aime pas ça, et on lui envoie en réponse la page adaptée si nécessaire pour être du XHTML compatible avec HTML, et l'en-tête Content-Type text/html

Actuellement, c'est beaucoup de bruit... pour pas grand chose. Mais il en sera peut-être tout autrement demain, si ce type mime est mieux supporté

agilis a écrit :

Par contre, pour la taille du texte, c'est quoi les em? (c'est une unité, c'est tout ce que je sais...) C'est relatif? A quoi?

ceci (et les critiques en commentaires) peut te renseigner:
http://blog-and-blues.org/weblog/2004/05/24/214-font-size-em
Modifié par Laurent Denis (01 Aug 2005 - 17:19)

agilis a écrit :
. . . . . .

J'ai remarqué un petit problème dans le menu, quand on agrandit le texte jsuqu'au moment où "Base de données" se met sur deux lignes, ca foire au survol... On peut éviter ca?. . . . .

Oui : en supprimant les "height" de toutes les classes "menu".

Dommage pour le fluide...!

jcm a écrit :
Oui : en supprimant les "height" de toutes les classes "menu".

Dommage pour le fluide...!

Ok, je vais essayer ca.
Sinon, quel est le réel avantage du fluide?

Pour l'entete, je crois que je vais pas me casser la tête, je vais laisser comme ca. Pour les em, j'ai survolé l'article, je compte bien le lire plus profondément et utiliser cette unité là.

Encore merci
Modifié par agilis (01 Aug 2005 - 20:25)

agilis a écrit :
Sinon, quel est le réel avantage du fluide?

S'adapter à toutes les résolutions, à tous les agents utilisateurs

Raphael a écrit :

S'adapter à toutes les résolutions, à tous les agents utilisateurs

Et pour le strès grands écrans et les très grandes résolutions? ca devient horrible... Avec 750px de large, c'est compatible en 800x600 avec un écran 17pouces... Il me semble que c'est quand même bien. Qu'entends-tu par agent utilisateur?

agilis a écrit :
Et pour le strès grands écrans et les très grandes résolutions? ca devient horrible...

Tout à fait exact. Les "design fluides" CSS actuels rencontrent rapidement leurs limites, qu'il s'agisse d'aller vers les grandes (grands écrans et projection) ou vers les petits résolutions (mobiles)

Cette limite sera peut-être dépassée à l'aide de nouveaux mécanismes CSS : les media queries (testable actuellement dans Opera), permettant au navigateur de "choisir" parmi plusieurs options de styles en fonction de ses données de résolution, de taille et de couleurs...

En complément, les navigateurs se mettent progressivement à procéder à l'adaptation forcée des données de style et de contenu à la configuration écran (ou papier quand il s'agit d'imprimer) de l'utilisateur : là encore, initiée par Opera avec son système ERA et le procédé "fit-to-width", l'adaptation du contenu est en cours de développement dans le futur Minimo (le futur Firefox pour mobile) et dans le futur IE7

Le développement des media queries par le W3C et des processus d'adaptation du contenu par les différents navigateurs montrent bien que les design fluides... sont loin d'être la solution miracle
Modifié par Laurent Denis (01 Aug 2005 - 21:09)

Qui dois-je écouter? Que dois-je privilégier? Un design fluide ou fixe? D'autres avis?

@Laurent Denis > mobile = PDA ou GSM ?
Modifié par agilis (01 Aug 2005 - 21:12)

Laurent Denis a écrit :
On va peut-être éviter le purisme déplacé ?
Et signaler que :

- s'il est très bien de servir XHTML1.0 comme l'indique Marvin, c'est aussi, en fait, plus compliqué que cela, car le code XHTML doit être dans un cas adapté aux règles de compatibilité HTML, et pas dans l'autre. Ce qui suppose pas mal de modifications.

- servir XHTML1.0 en tant que HTML (type mime text/html, comme sur le site actuel d'agilis), c'est très bien, c'est fait pour, et c'est très simple.

NB : J'avais indiqué le type mime entre parenthèses, car c'était une remarque, et pas l'essentiel de la réponse.. Et j'avais effectivement omis de préciser que cette pratique (bien que je la trouve souhaitable) n'est nullement une obligation (comme le montre d'ailleurs le tableau cité ).

a écrit :

Tout à fait exact. Les "design fluides" CSS actuels rencontrent rapidement leurs limites, qu'il s'agisse d'aller vers les grandes (grands écrans et projection) ou vers les petits résolutions (mobiles)

Alors dans ce cas quels sont les avantages d'un design de largeur fixe.

Un site de 760 de large pour les grands écrans et projection cela ne fait pas un peu ridicule.

Sinon si une feuille de style est prévue dans le cas d'un design fluide pour un média spécifié y a t il autant de limites.

agilis a écrit :
Qui dois-je écouter? Que dois-je privilégier? Un design fluide ou fixe? D'autres avis?

Les design fluides ne résolvent pas le problème du rendu dans les grands et petits écrans (voir ci-dessus), mais en "taille moyenne", ils jouent très bien leur rôle. Mieux que les largeurs fixes.

agilis a écrit :

@Laurent Denis > mobile = PDA ou GSM ?

oui.

agilis a écrit :
Qui dois-je écouter? Que dois-je privilégier? Un design fluide ou fixe? D'autres avis?

Un style fluide permet de mieux gérer les blocs lors du redimensionnement des polices.

Ceci pour les personnes à la vue faible ou qui préfèrent, par confort, des polices de plus grande taille que l'original.

D'après les stats d'un site que j'ai réalisé, avec a priori une taille de police offrant selon moi une bonne lisibilité, 30% environ des visiteurs utilisent une feuille de style spéciale affichant des polices plus grandes.

Lorsque tu arrives sur un site redimensionne les polices : c'est en général catastrophique dès le premier grossissement.

Par ailleurs vois un site en 750 et quelques pixels sur un écran très large : c'est vignette...

Là un redimensionnement des polices peut s'imposer simplement pour accéder aux textes.

L'idéal serait une largeur fluide avec une largeur maximale (max-width). Ce n'est malheureusement pas compatible avec IE, y-a-t-il moyen de feinter?

Pour les mobile, ce n'est des technologies spéciale? On peut visualiser n'importe quel site sur un gsm?

Encore merci

Bonjour,

Je ne viens pas prendre position pour le fluide ou le fixe.
J'aimerais simplement amener un point de réflexion supplémentaire :

Sur grand écran, les sites fluides fournissent des lignes trop longues si le contenu est largement textuel (les journeaux ont inventé le colonnage pour cette raison).
Je suis personnellement amblyope (un seul oeil fonctionnel) et je peine grandement à lire une ligne trop longue, je perds le "fil" et saute à la ligne suivante.
Les futures CSS et les futurs rendus viendront un jour (peut être la semaine prochaine dans 10ans) mais n'est ce pas l'intéret de la séparation du contenu de la forme que de pouvoir revoir le design facilement quand ils seront là ?
Modifié par papyjo (02 Aug 2005 - 10:25)

Un sujet intéressant

Personnellement ce sont les barres de défilement horizontales qui m'horripilent. J'ai béni les designs fluides quand je me suis retrouvé avec un écran 14" 800*600 pendant quelques jours !

Alors oui, je pense que ce qu'il serait intéressant de faire un design qui soit fluide jusqu'à 1024 pixels par exemple, puis fixe ensuite. Ou bien comme le dit papyjo, adopter un système de colonnes (en plus du design fluide) pour les textes.

Des idées pour réaliser ça ?

- Un CSS "fluide" par défaut avec un JavaScript qui récupère la résolution de l'écran et mets le CSS "fixe" si elle dépasse 1024 de large.
- Plusieurs CSS avec un styleswitcher

Bof bof
Modifié par 84mickael (02 Aug 2005 - 10:34)