Catégorie: "HTML & CSS"

Design sans tableaux: C'est pas encore ça!

Mon précédent post sur le sujet a reçu un certain traffic dont beaucoup de visiteurs parlant plutôt l'anglais. (Merci à Erik!)

Du coup je me suis dit que j'allais écrire un article entier en anglais cette fois: Tableless Design: Not ready for prime time!. L'objectif de cet article est de montrer un exemple de pourquoi la mise en page HTML sans tableaux n'est pas encore vraiment prête pour être utilisée dans tous les cas de figure, contrairement à ce qu'en pensent un nombre grandissant de personnes... Read more!

Valid XHTML...

Je pense que l'on sous-estime systématiquement la rigueur nécessaire à la production de code XHTML valide... nos browsers sont TELLEMENT permissifs! :'(

Personnellement je m'en suis rendu compte en collant ce petit logo en bas de chacune de mes pages:
Valid XHTML 1.0!

On a si vite oublié un caractère accentué par ici ou un & par là... voire un / en fin de balide IMG... Le bouton sur chaque page aide à les vérifier... mais je dois avouer que je n'ai pas eu le courage de les faire vraiment toutes... :-/

Ceci dit, ma plus grosse perte de temps a été d'essayer de rendre valide les pages de blog, lesquelles contiennent des tags RDF permettant théoriquement aux clients de découvrir automatiquement l'adresse de trackback. Pas moyen de les faire accepter au validateur. Ca s'est fini entre commentaires HTML... comme préconisé par Movable Type...

PS: ah oui, à voir aussi: la méthode b2 pour rendre le RDF valide: si HTTP_USER_AGENT contient 'W3C_Validator' alors on n'envoie pas le RDF... PFOUAH! 8|

Tableless design

Vous avez peut être remarqué que les entêtes de pages et la navigation de ce site ont très légèrement changé... c'est le résultat de longues contorsions CSS pour supprimer tous les tableaux inutiles de ce site! (C'est à la mode! :P )

En fait, c'était plus un exercice de style qu'une réelle conviction que les tableaux doivent être définitivement bannis comme technique de mise en page HTML. Enfin plus précisément: oui IDEALEMENT il ne faudrait pas utiliser de tableaux à de seules fins de mise en page et tout faire en CSS, mais je pense que les implémentations actuelles de CSS dans les navigateurs les plus courants sont insuffisantes pour obtenir les résultats voulus. Alors certes, j'y suis (à peu près) arrivé mais ce fut beaucoup plus compliqué qu'avec des tableaux. On ne peut pas espérer, dans ces conditions, que la majorité des webdesigners se mette "à la page"!

PS pour les mordus: Je voulais que mes "rollovers" de navigation aient tous la même largeur. C'est ça qui complique tout (voir code source...) Si je m'étais contenté d'une largeur proportionnelle au texte celà aurait été enfantin (Je ne comprends d'ailleurs pas pourquoi Mark à fait tout un foin de ses onglets -- proportionnels évidemment! :>> ). Par ailleurs, je voulais que le tout soit redimensionnable en fonction de la taille de police choisie par l'utilisateur (et même sous IE). Finalement, il me reste un problème: du contenu invisible à droite de la boite de titre de la page. C'est gênant (enfin, je pinaille...), car il fait apparaitre un ascenseur en bas de page avant l'heure lorsque l'on réduit la largeur de la fenêtre! Si vous savez faire disparaitre ça (sans provoquer de retour à la ligne du titre dans certains browsers), vous êtes probablement un Dieu vivant du CSS pratique! :D

Petite astuce IE...

On peut (aussi) afficher le code source en tapant view-source: dans l'adresse avant http: ;)

Communautés en ligne

Je viens de lire un article tellement intéressant de Joel on Software sur les communautés en ligne que j'ai pensé devoir absolument le signaler ici! :P

C'est en anglais mais explique particulièrement bien la raison d'être des communautés et ce qui permet qu'elles fonctionnent bien ou mal ou pas du tout...