Sites de réference validés XHTML/CSS

[Rockz]

Bonjour,

Nouveau venu dans le monde pieux et ordonné des standards web, je vois pour le moment dans l'association XHTML/CSS le moyen d'obtenir un affichage parfait du site quel que soit la résolution ou la taille de fenêtre (agrandir/restaurer) du navigateur de l'internaute.

Cependant, après avoir consulté les sites XHTML/CSS présentés sur Alsacréations, ces derniers ne suivent pas cet espoir de l'affichage parfait.

Contrairement à OpenWeb, lorsque l'on réduit la fenêtre du navigateur sur le site de Macromedia, les colonnes de texte restent fixes (de ce point de vue, on a même l'impression d'avoir à faire à des tableaux) et l'on voit alors apparaître l'affreux ascensceur horizontal (scrogneugneu ) pour pouvoir aller chercher le reste du texte.

Pourtant, les 2 sites (Macromedia et OpenWeb) utilisent tous 2 les techniques de conteneurs (<div> ou autres).

Quelle est l'explication de ce phénomène ? (Je débute en technique mais kek' ca m'passionne vindiou !)

<w3c>A bientot</w3c>

Modifié 30 Mars 2004 par Rockz

[LaurentDenis]

L'association en question a pour but principal de séparer présentation et contenu, pour obtenir un contenu mieux structuré, plus significatif et plus exploitable.

Un autre but, moins important, est d'obtenir une présentation qui ne dépende pas de fonctionnalités propriétaires de tel ou tel navigateur, et qui soit donc réussi sur tous les navigateurs eux-mêmes respecteux des standards. Pour les navigateurs sans support CSS, le contenu brut accesible sans fioriture.

Quant à vouloir un design parfait dans tous les navigateurs conformes, toutes les configurations d'utilisateurs... Non, pas au sens du même rendu partout :

- C'est illusoire,

- Ce n'est pas "l'esprit" des CSS : il s'agit plutôt d'avoir la garantie que la présentation se dégradera certes, mais correctement, sans effets gênants pour la lecture et sans que l'équilibre du design ne soit remise en cause (design "fluide")

Enfin, pour Macromedia : pour obtenir le design "fluide" ci-dessus, l'erreur à ne pas commettre est d'utiliser des valeurs absolues (px) pour le dimensionnement et le positionnement.

Petit extrait de la feuillede style de Macromedia :

#fma-home,
#homepageStaticFMA {
padding: 0px;
margin: 0px auto;
width: 756px;
height: 208px !important;
height: 202px;
text-align: left;
}

Petit extrait de la feuille de style d'OpenWeb :

#actualite,#articles{
padding:0 2%;
width:100%;
voice-family:"\"}\"";
voice-family:inherit;
width:63%;
}

[Rockz]

Merci Laurent !

J'ai dû me tromper de forum : des réponses si rapides et précises de surcroît, ca ne se trouve que sur PizzaExpressHub

Donc ce design, défini comme "fluide", tient au simple fait que les blocs sont dimensionnés et positionnés en % (relatif) et non en px (absolu) (je te repête pour m'assurer que j'ai bien compris =] et pour bien burriner les neurones une bonne fois pour toutes ).

Ainsi, voyez-vous un interêt à travailler en dimensions "absolues" dès lors qu'on utilise le combo XHTML/CSS ? N'utilisez-vous que des valeurs relatives (%) ?

[Raphael]

Ainsi, voyez-vous un interêt à travailler en dimensions "absolues" dès lors qu'on utilise le combo XHTML/CSS ? N'utilisez-vous que des valeurs relatives (%) ?

L'idéal est effectivement de se débarrasser des tailles fixes... mais c'est souvent difficile pour les sites très graphiques pondus sur photoshop.

Il faut donc "penser" son site dès le départ pour qu'il soit fluide quelle que soit la résolution.

[Monique]

mais c'est souvent difficile pour les sites très graphiques pondus sur photoshop.

Bonjour,

Si j'ai bien compris, c'est un problème qui se pose dans le milieu professionnel, où les différentes étapes de la création d'un site sont confiées à différents spécialistes : le développeur reçoit une maquette préparée par un graphiste et doit la traduire en html/css

[LaurentDenis]

Ne me faites pas dire qu'il faut proscrire les pixels !

Les tailles absolues ont leur rôle, mais pas n'importe où.

Un design peut être fluide avec un position:fixed ou :absolute, en px, ou avec des width en px, si :

- on est en dessous des valeurs critiques qui provoqueront un scroll ou un renvoi de float...

- on s'y prend avec soin.

Ce n'est pas le plus facile ;-)

C'est pourquoi, pour commencer à faire du fluide, il vaut mieux en rester aux em et aux %.

[Rockz]

Sybelius, peux-tu détailler ce que tu entends par "penser son site au départ" ?

J'ai pris l'habitude de faire des maquettes sous Photoshop (tu en parlais) et de jouer à Jo la découpe juste derrière, et je pense pas pouvoir faire du fluide comme çà ..

Quelles règles adoptes-tu ? Quelles sont les pièges à éviter lors d'une conception qui vise un résultat fluide ? (meuh non c'est pas trop large comme question tous liens à ce sujet sont les bienvenus )

[Raphael]

Rockz >

"penser" le site au départ, c'est savoir que chaque élément devra être fluide, redimmensionnable, ainsi que les polices qui s'y trouvent.

Un site très graphique, avec des dimensions fixes posera des problèmes lorsque le polices seront agrandies par exemple.

Il faut donc savoir à l'avance comment va réagir chaque bloc, chaque structure lorsque le site sera redimensionné ou la police agrandie.

En général, il est donc préférable d'utiliser des couleurs de fond, ou des arrière-plans répétables (par exemple une image de 1px de large qui va se répéter dans son conteneur) et de placer des images fixes par-ci par-là... mais pas de design entièrement en images fixes.

[Rockz]

Merci pour la précision