quand vous creez un site mise en page css

[Mado]

vous le dessinez d'abord sur papier?

et quand vous le faite en ùise en page absolue au pixel pres, vous faites comment?

je galere alors des conseils seraent les bien venus

merci

marie

[LaurentDenis]

vous le dessinez d'abord sur papier?

Chacun a sa méthode... Les uns font un croquis papier, d'autres un visuel dans un photoshop quelconque, d'autres démarrent directement l'écriture de la CSS une fois la structure HTML établie.

et quand vous le faite en ùise en page absolue au pixel pres, vous faites comment?

Ne pas faire de mise en page absolue au pixel près serait déjà un bon point de départ

En effet:

- elles nécessitent de prendre en compte et de gérer individuellement les bugs de positionnement et de dimensionnement propre à chaque navigateur... pour constater finalement qu"il en reste souvent un où "ça coince".

- elles ne peuvent pas tenir compte de la variété des configurations propres à chaque utilisateur, qui combinent leurs configurations au niveau de l'OS, au niveau du navigateur et des styles utilisateurs éventuels. Une mise en page de ce type échoue systématiquement pour un nombre imprévisible de visiteurs...

La gestion la plus "saine" de l'interopérabilité (restitution de la page dans tous les medias et dans toutes les configurations locales) consiste au contraire à "laisser du jeu", en particulier dans le dimensionnement et le positionnement. Le rendu différera selon les utilisateurs... mais en limitant considérablement les risques de "casse".

Bref, ne figez pas vos pages pour un "utilisateur type" : celui-ci n'existe pas

[Guest meta nando]

Salut Mado,

Soit il y a déjà un cahier des charges soit un topo de ce que le client veut.

Après ça, personnellement, pour commencer je ne fais aucun plan.

Je n'ai pas Photoshop, et avec Gimp je suis un vrai bleu, j'éviter de faire de la haute voltige graphique. Miser sur le rapport des couleurs et des formes.

J'écris la page HTML le plus simplement possible, minimiser les DIV, SPAN, BR, HR, pour plus de clarté. Je met le texte à chaque fois dans un conteur (P, DD, DL...). Par exemple un BR dans P peuvent être remplacés par deux P, donc une double prise en CSS.

A partir de là je cogite le rendu graphique et, je me connais, je ne fais pas de croquis. On peut faire sans, c'est une question de tempérament et de méthode.

Comme je m'en souviens jamais je consulte des tutriels de mise en page (Modèles Alsacréations; Tutoriels ElMoustiko; ...). Le plus dur (en dehors de l'inspiration) c'est bien sûr IE. Il faut tester et retester.

Il faut minimiser les hacks. Utiliser seulement ceux qui seront ignorés quand IE sera redevenu bon.

Traiter dans des fichiers HTML à part les parties complexes (menus, en-tête...) puis les ré-intégrer au document.

Eviter de donner en même temps des valeurs aux padding, margin, border, avec width ou height, ça met en jeu le modèle de boîte MS.

Et puis, tu le sais dèjà, voir et revoir les classiques: Openweb; Pompage.net; Opquast; blog and blues...

[LaurentDenis]

J'écris la page HTML le plus simplement possible, minimiser les DIV, SPAN, BR, HR, pour plus de clarté.

Ne pas hésiter à utiliser <hr> pour séparer les sections principales de la page : la lisibilité dans les navigateurs textes est nettement améliorée avec ce séparateur.

Eviter de donner en même temps des valeurs aux padding, margin, border, avec width ou height, ça met en jeu le modèle de boîte MS.

En fait, il s'agit plutôt d'éviter d'appliquer des padding et/ou des bordure à un élément, pour que sa taille finale affichée soit identique dans les deux modes de rendu CSS (celui propre à IE et celui de CSS1) : les margin n'entrent pas dans ce calcul de dimension des boîtes.

Et puis, tu le sais dèjà, voir et revoir les classiques: Openweb; Pompage.net; Opquast; blog and blues...

Arf ! Me voilà en bien impressionnante compagnie !

[Guest meta nando]

En fait, il s'agit plutôt d'éviter d'appliquer des padding et/ou des bordure à un élément, pour que sa taille finale affichée soit identique dans les deux modes de rendu CSS (celui propre à IE et celui de CSS1) : les margin n'entrent pas dans ce calcul de dimension des boîtes.

Autant pour moi, ce sont les parties "visibles" d'une boîte qui sont mises en jeu

[bigornot]

moi, je fais direct sur photoshop, puis, je découpe, puis, je refais tout en améliorant, je redécoupe, je parfais le code, et voilà.

[thierryf]

Bonjour,

Moi je fais un croquis pour me permettre d'organiser un peu mes idées.

Mais, quoi qu'on en dise, il n'y a pas 36 000 possibilités et si tu navigues un peu sur le web tu verras que 5 ou 6 types de présentation reviennent le plus souvent. Les présentations vraiment originales sont très peu nombreuses.

Donc les idées de base ce sont, j'utilise tout l'écran ou je mets le site dans un cadre ? Je place où le menu (en général 2 possibilités) ? Je fais combien de colonnes (en général 2 ou 3 ) ? Je place où mes illustrations (souvent une grande bande image en haut ou sur le coté).

En fait, la première étape de mon travail consiste à regarder d'autres sites qui me plaisent pour m'en inspirer. Ensuite, je fais un croquis, ensuite j'attaque le CSS et le HTML, en passant souvent de l'un à l'autre. C'est en général là que je trouve quelques idées (parfois elles viennent de mes erreurs) qui me sont propres.

Evidemment, je n'ai pas parlé du choix de la police de caractère et de la couleur qui se fait en général lors de cette dernière étape, et je dois dire que c'est là où vraiment les feuilles de style sont géniales. Une police (y compris sa taille) ou une couleur peuvent vraiment beaucoup changer à laspect d'un site.

Bon courage.

[Denis]

Personnellement, je gribouille d'abord sur un bout de papier, découpant chacune des parties de mon interface en blocs de HTML.

Comme j'ai généralement un photoshop officiel sous les yeux (produit par un designer de mon équipe), je déconstruit en code ce qu'il a organisé visuellement. Je créé ensuite, bloc par bloc, le HTML - avec un soucis de sémantique - dans des contenants (divs) que je positionne dans un fichier HTML qui deviendra mon gabarit de travail. Je passe d'abord un gros coup d'accessibilité, je m'assure que tout est conforme et valide. Ce n'est que lorsque tout mon code HTML est généré et prévu que je commence à l'organiser visuellement (intégrer les images, faire la CSS, etc.). C'est généralement là que plaisir commence, à prendre en considération les exigences de tous ces navigateurs.