<C²: webløg />

Courriel - email address

Avatar Bleizig

mercredi 05 novembre 2003
par Bleizig

CSS à la carte

Vous aviez sûrement remarqué depuis un p'tit bout de temps maintenant quelques icônes à gauche de l'écran qui pouvaient laisser penser qu'un jour vous pourriez régler l'affichage de CYBERcodeur selon vos goûts. Et bien voilà, les premiers réglages sont enfin disponibles, vous pouvez maintenant :

  • Faire disparaitre la colonne de droite
  • Maximiser l'affichage pour utiliser pleinement tout l'écran

De plus ces réglages seront sauvegardés pour tous ceux qui n'ont rien contre les cookies. Si vous souhaitez voir d'autres aspects de la feuille de style paramétrables à souhaits ou si vous avez des remarques, suggestions sur ces premiers réglages, c'est par ici.

Bleizig | 2003.11.05 @ 02:12

Alors, qu'en pensez-vous ?

Voici ce que vous aviez à en dire... vos impressions, recueillies à vif.

2003.11.05 @ 09:36 par Emmanuel

Hello,

je préfère passer ma suggestion en commentaire, plutôt qu'en courriel, afin d'en faire profiter les lecteurs :

Pour la mise en page sur une colonne ainsi qu'en mode plein écran, je m'attendais à du 'fluide' or la largeur de page est toujours fixe (avec un width ou min-width en jetant rapidement un oeil sur la CSS).

Je pense à ça parce que je me pose exactement la même question sur la refonte de mon site :-)

Haut retour au début de la page

2003.11.05 @ 10:29 par Bleizig

Je ne suis pas sûr de completement comprendre ce que tu veux dire par 'fluide': est-ce du au fait qu'il y a un acces serveur a chaque changement de style?

Pour ce qui est de la largeur de la page, en plein ecran elle prend vraiment tout l'espace ecran sur plusieurs resolutions que j'ai testees ... aurais-tu un rendu different?

Haut retour au début de la page

2003.11.05 @ 10:30 par Anubis

Bravo Denis pour cette constante recherche de l'optimisation de l'expérience utilisateur ! (Ah si tous les développeurs étaient comme toi...)

Enfin juste un petit bémol à tout ça:

Ton système permet de modifier l'affichage client, alors pourquoi ne pas utiliser des technologies client ? Allez je sors le mot tabou: Javascript.

En effet, tu utilises des technologies serveur afin de modifier l'expérience client. Pourtant je ne pense pas du tout que cela soit utilisable sur autre chose qu'un navigateur.

Or forcer le rechargement de la page sur des dispositifs ne disposant pas de connexion large bande illimités (comme les portables) me semble être totalement injustifié.

Mais d'un aspect plus général, utiliser des technologies serveur pour modifier l'expérience de l'utilisateur final en matière de présentation (styleswitcher, configuration) me semble être injustifié à partir du moment où on ne connait pas le résultat sur autre chose que le navigateur.

Haut retour au début de la page

2003.11.05 @ 10:31 par Anubis

Roh zut !

Désolé Fabien, je t'ai encore confondu avec Denis !

Il faudra vraiment que vous mettiez quelquechose en place afin de mieux différencier vos billets ;-).

Haut retour au début de la page

2003.11.05 @ 10:39 par Bleizig

C'est pas grave, c'est pas la premiere fois que ca m'arrive et mon petit doigt me dit que c'est pas la derniere.
Il va falloir que l'on songe serieusement un trouve un signe distinctif plus frappant (genre avatar).

Tu as tout a fait raison sur l'utilisation du javascript et j'avais prevu d'optimiser ce changement de style par l'utilisation de scripts sans pour autant penaliser les utilisateurs l'ayant desactive.

Haut retour au début de la page

2003.11.05 @ 10:48 par Emmanuel

Je me suis exprimé peu clairement :-)

Je voulais parler de la souplesse de la mise en page lorsque l'on redimensionne la fenêtre, que l'on affiche son historique ou ses favoris dans un menu à gauche de l'écran du navigateur.

La mise en page est semi-rigide au sens ou, dans les petites largeurs, l'ascenseur horizontal apparait vite et sort de l'écran.

Autant je me dis que sur la CSS par défaut, c'est un parti pris, autant pour le mode plein écran et une colonne, je m'attendais à voir la souplesse complète des boites en largeur.

Et ça me fait toujours autant marrer de passer l'Atlantique pour écrire à quelqu'un 40-50 km à ma droite... On se prend un verre à Pont-Aven ? ;-)

Haut retour au début de la page

2003.11.05 @ 10:56 par Bleizig

Ok, je saisis maintenant (il fallait que je chauffe le neurone).
C'est un bon point et il doit surement y avoir une solution quelque part ;-)

Par contre, pour ce qui est du verre a Pont-Aven, ca va etre un peu dur puisque bien que venant de Lorient, j'habite depuis un peu plus de deux ans a Austin ... je suis donc plutot a quelques milliers de km a ta gauche (de l'aut d'cote d'Brest quoi ;-).

En revanche, je serais de retour au pays pour les vacances de Noel alors je serais ravi de faire un detour par la cite des peintres ;-)

Haut retour au début de la page

2003.11.05 @ 11:27 par CYBERcodeur

Bon d'accord les copains, c'est pas optimal mais c'est déjà un sacré bon pas dans la bonne direction non ? ;)

Ça fait un petit moment que je voulais faire un truc du genre, de vraiment pousser la flexibilité de l'interface à son maximum afin de bien laisser à l'utilisateur le choix de présenter le contenu à sa guise. Avec Bleizig ces derniers jours, nous avons passé à travers la liste des points à surveiller et zou, c'est en place.

Bien sûr, il y a de la place à l'amélioration, mais je crois que c'est un bon départ. Lorsque l'optimisation de l'espace à utiliser sera pleinement exploité de la manière la plus propre possible (il n'y a pas que le fait que ça soit valide qui compte, il y a aussi le fait de choisir le meilleur outil pour faire le travail), nous pourrons enfin nous relancer dans la création de nouvelles interfaces alternatives comme nous offrions auparavant. Une ou deux de plus au moins, mais toutes basées sur un modèle de flexibilité permettant toujours autant de paramétrisation.

Et pour ce qui est de l'avatar, c'est en route, la réflexion est lancée, il faut simplement trouver le meilleur moyen de représentativité pour ne pas allourdir l'interface inutilement avec nos bouilles, que celles-ci soient véritables ou non. ;)

Haut retour au début de la page

2003.11.05 @ 12:40 par sébastien

Juste une petite remarque : sous Moz, la colonne de droite a disparu... Feature ou test unitaire passé à la trappe ? ;-)))

[Sinon, je veux bien pousser jusqu’à Pont-Aven aussi, s’il y a de la Guinness à la clé]

Haut retour au début de la page

2003.11.05 @ 13:00 par Bleizig

'sous Moz, la colonne de droite a disparu'
tu veux dire que meme en utilisant l'icone situee juste en dessous de 'vous etes ici' tu ne peux pas la faire reapparaitre?

T'inquiete pas, la Guiness ainsi que de nombreuses bieres Bretonnes coulent a flot a Pont-Aven (et ailleurs ;-)

Haut retour au début de la page

2003.11.05 @ 13:57 par sébastien

Oui. En fait, l’icône sert à passer en 1 colonne, mais la page est déjà en 1 colonne. Capture ?

Haut retour au début de la page

2003.11.05 @ 13:59 par CYBERcodeur

Oui capture bien sûr, mais aussi un sérieux coup de balai dans ta mémoire cache juste au cas. :)

Haut retour au début de la page

2003.11.05 @ 15:19 par Pascal Grouselle

Vraiment... épatant !!

Juste une toute petite retouche possible : en 800x600, sous IE5 (qu'il m'arrive aussi d'utiliser, j'assume...), le menu du haut de la page ne tient pas sur une seule ligne. De ce fait l'item 'Consultation' est relégué à la ligne, sous 'C2:weblog'. Mais il empiète de 2 ou 3 mm sur les boutons de la première ligne.

Sans doute la solution se trouve-t-elle du côté des marges du body. (? - je ne suis pas un pro)

Sur ma page en construction
http://perso.wanadoo.fr/p... ,
afin d'éviter ce genre de chose lorsque l'utilisateur réduit sa fenêtre, j'ai appliqué aux <li> de mon menu horizontal une line-height de 30px. Histoire de dormir plus tranquille !

Haut retour au début de la page

2003.11.05 @ 15:58 par Bleizig

Merci d'avoir pointe ce probleme, j'ai rectifie un peu le tir afin que les elements du menu soient maintenant lisibles mais je ne les ai pas separes completement car augmenter le line-height change de trop le design sous Firebird.
Cependant, j'espere que ca reglera temporairement ton probleme ;-)

Haut retour au début de la page

2003.11.05 @ 16:54 par Pascal Grouselle

Toujours sous IE5, et en 800x600, ton bouton 'Consultation' est à présent tout juste en dessous de 'C2 : weblog'. Il n'y a plus de chevauchement, mais les deux sont encore collés l'un contre l'autre. Ceci étant, ce n'est pas un problème pour moi ;-)

Haut retour au début de la page

2003.11.05 @ 18:30 par sylozof

Je me permet de détourner l'utilisation de cette borne de commentaire pour faire du bug-report. ;-)

En fait, quand on visualise les commentaires et qu'on veut changer de feuille de style en cliquant sur les fameux boutons, on a une page d'erreur du style 'vous ne pouvez pas atteindre cette page directement'.

En fait j'ai remarqué que l'url d'une page de commentaire a la forme
http://cybercodeur.net/we...
Donc on utilise le fichier detailsCarnet.php et on passe le paramètre idmessage avec la valeur de l'id du message dans la base.
Mais quand on clique sur un lien de changement de style, l'url est de ce style
http://cybercodeur.net/we...
Il y a bien le detailsCarnet.php, mais il manque le paramètre idmessage. Du coup, le fichier ne sait plus sur quelle page de commentaire il faut aller, et ça plante. Je pense que tu sais facilement comment corriger le truc.

Haut retour au début de la page

2003.11.05 @ 18:40 par Bleizig

Arghhhh ... j'avais pas pense a ca. Bon je regle ca le plus vite possible ;-)

Merci beaucoup de prendre le temps de nous faire part des bugs que vous rencontrez ou de vos commentaires sur les fonctionnalites du site en general, c'est vraiment sympa.

[Edit] : Ca y est, le probleme est regle pour la majorite des cas.

Haut retour au début de la page

2003.11.05 @ 20:41 par Olivier

Autres bugs qui n'ont pas échappé à mon oeil de lynx, sur Panther :

'Vous êtes ici : Page d'accueil' est jamais updaté.

Le lien de la maximisation a des problèmes et parfois peut donner le résultat inverse. Le lien est un peu bizarre : ?maximise=non&maximise=oui
C'est oui ou c'est non, tu veux ou tu veux pas ?

Haut retour au début de la page

2003.11.05 @ 20:59 par Bleizig

'C'est oui ou c'est non, tu veux ou tu veux pas ?'
lol ... c'est fixé maintenant ;-)

Haut retour au début de la page

2003.11.06 @ 02:13 par s t e f

Sur le JS pour fixer les préférences, plutôt que côté serveur (la suggestion d'Anubis) :

Je serais assez pour aussi, ça règle même souvent des problèmes qu'on n'imagine pas, comme quand l'utilisateur est caché derrière un proxy hyper conservateur (plus de détails à l'occasion, j'ai déjà eu l'heur de constater un comportement arbitraire dans l'entreprise que je fréquente).

Mais le JS a un souci aussi. Tenez, supposons que je mette une ancre dans une page. Et que vous ayez décidé d'utiliser parmi les CSS que je propose, celle qui affiche des plus grosses tailles de polices. Et que j'aie implémenté une gestion de CSS alternative avec une méthode Javascript. Mettons que je m'appellerais Jeffrey Zeldman par exmeple, pour prendre un cas concret.

Hé bien voilà le cycle d'affichage de la page :
- chargement
- descente à l'emplacement exact de l'ancre
- chargement fini (événement onload), chargement de la bonne CSS

Oui mais : la bonne CSS, elle fait un ou deux pixels de plus en hauteur.

Résultat : mon ancre est reléguée hors-page, plus bas que ce que mon navigateur peut afficher.

J'ai signalé le (pseudo-)bug il y a un moment à Zeldman, mais sans retour pour l'instant (il reçoit trop de mails, le pauvre).

Voilà une saisie d'écran :

La page avec la CSS par défaut :
http://notabene.f2o.org/m...

... et la même page qui vient de charger la CSS alternative :
http://notabene.f2o.org/m...

Je n'ai pas encore de solution à proposer, mais encore une fois, le script serveur lui-même pose des problèmes dans des circonstances particulières. Je ne sais pas si je dois développer ici, dites-moi ce que vous en pensez...?

Haut retour au début de la page

2003.11.06 @ 06:16 par sylozof

Bleizig > en rapportant mon bug, j'ai carrément oublié de dire que ce système est vraiment sympa et pratique, désormais j'affiche le site sur toute la page, c'est bien plus confortable dans mon cas.
Ce n'est pas une grande découverte parce que j'avais déjà vu ce principe sur d'autres sites, mais on en ressent à chaque fois les bienfaits. :)

Haut retour au début de la page

2003.11.06 @ 07:24 par Bleizig

sylozof>'désormais j'affiche le site sur toute la page, c'est bien plus confortable dans mon cas'
Je suis exactement dans le meme cas, j'aime bien avoir tout mon espace ecran exploite.

s t e f>Ca n'est pas vraiment une solution mais plutot une bidouille: je supposes que tu as un selecteur pour changer de feuille de style. Tu as donc la certitude que l'utilisateur se trouvait dans un certain intervalle (au niveau defilement vertical) au moment ou il a change de style. Tu pourrais donc dans un premier temps calculer les positions du selecteur par rapport au haut de la page sur chaque style que tu proposes et jouer avec pour repositionner l'utilisateur: genre s'il etait avant a 180px et que le selecteur se trouve a la position 200px sur le style 1, quand il changera pour le style 2, pour lequel tu sais que le selecteur arrive a la position 400px, tu n'as plus qu'a le faire defiler vers une position 'estimee' a 360px...

Haut retour au début de la page

2003.11.06 @ 08:49 par Bobe

Ahh, /me s'est empressé d'utiliser l'option 'maximiser'
Félicitations pour ces aménagements très pratiques :)

Et en effet, ce serait interessant d'utiliser le javascript pour ça (tout en laissant la gestion coté serveur au cas où).

Haut retour au début de la page

2003.11.06 @ 09:00 par CYBERcodeur

C'est intéressant tout de même de constater les préférences de chacun quant à l'interface. :)

Nous avons eu, Fabien et moi, de longs débats sur le design de CYBERcodeur.net dernièrement, justement parce qu'il préférait largement maximiser l'espace et que je préférais le conserver dans le format par défaut actuel. D'une certaine manière, c'est basé sur des goûts tout à fait personnels et depuis les premières heures de ce site, la recherche du parfait compromis entre mon intentionalité et vos attentes a toujours été au coeur de mes préoccupations.

Je crois que nous sommes en train de définir quelque chose de très intéressant, à savoir un premier pas vers une flexibilité appréciable de l'interface, qui pourrait nous mener très loin... Prochaine étape, modifier la police et la taille utilisée dans le site, ensuite, peut-être un sélecteur de couleurs ?

Avec quelques feuilles de style aletrnatives, on peut en faire des choses ! Quelqu'un doute t-il encore de l'intérêt des CSS ? ;)

Haut retour au début de la page

2003.11.06 @ 09:16 par Bobe

hep :)

'Je crois que nous sommes en train de définir quelque chose de très intéressant, à savoir un premier pas vers une flexibilité appréciable de l'interface, qui pourrait nous mener très loin... Prochaine étape, modifier la police et la taille utilisée dans le site, ensuite, peut-être un sélecteur de couleurs ?'

Attention à ne pas se substituer à un mécanisme déja existant. Le principe des feuilles de style utilisateur est là pour ça.
Certes, il faut bidouiller dans un fichier et c'est donc moins 'séduisant' (d'autant que tout le monde n'a pas de connaissances en CSS) mais si on fournit à qui veut de nombreux exemples de règles à mettre dans sa feuille utilisateur, ça devrait pas poser de difficulté.

J'en parlais justement ce matin:
http://webnaute.net/Journ...

Donc quelques effets simples à placer sur son site, c'est fun et utile, mais pour une utilisation plus poussée, utilisons ce qui existe déja :)

Haut retour au début de la page

2003.11.06 @ 09:40 par Bleizig

Bobe, ton article est tres interessant, j'ai appris pas mal de choses.

Cependant, comme tu l'as mentionne, changer sa feuille de style utilisateur est loin d'etre a la portee de tout le monde. Je pense donc qu'offrir un moyen convivial et tres simple de changer la fonte utilisee ou deux trois couleurs par ci par la repondra a un certain besoin actuellement inexistant. Jusqu'au jour ou Firebird, toujours a la pointe du progres, offira un moyen visuel d'editer sa feuille de style.

Haut retour au début de la page

2003.11.06 @ 10:21 par Anubis

Je suis d'accord avec Fabien sur le fait que donner une solution simple à l'utilisateur est toujours une bonne solution.

Il est vrai que cela fait double emploi avec la feuille de style utilisateur dans le principe de base. Mais je pense que la feuille de style utilisateur est plutôt réservée à des modifications générales sur tous les sites (mat parlait de min-font-size), alors que cette expérience est vraiment destinée à rendre la consultation du visiteur plus argéable.

Bravo à vous deux pour cette (bonne) utilisation à l'extrème des styles alternatifs.

Haut retour au début de la page

2003.11.06 @ 10:52 par CYBERcodeur

Exact. Il faut comprendre que toutes les entourloupettes que nous mettons en place n'ont pas pour but de remplacer une feuille de style alternative, mais bien de simplement permettre d'optimiser une CSS donnée aux besoins variables des utilisateurs, pour un plus grand confort.

Construire des designs différents est autre chose complètement ET recquiert une feuille de style séparée, mais basée sur la même dynamique pour permettre le même type de paramétrisation. C'est rien de nouveau quand on y pense bien, mais c'est quelque chose de réalisable et de fait, devrait être exploité pour le plus grand bonheur des utilisateurs... :)

À mon sens, changer deux ou trois couleurs, une famille ou une taille de police, ou encore, faire disparaître une section sur un même design n'est pas forcément le travail d'une autre feuille de style... Est-ce que le fait que le design actuel, en blanc sur fond noir, mériterait une autre CSS ? Je ne crois pas, puisque c'est exactement la même structure de présentation.

Par contre, changer radicalement le positionnement des boites, ce le serait et mériterait tout à fait une CSS alternative. Autrement dit, je propose d'arrêter des faire des CSS alternatives pour changer des couleurs et les utiliser pour des expériences radicalement différentes de l'interface, à partir d'un même ensemble de données initiales, et maximiser la flexibilité d'une CSS en permettant la paramétrisation de ses composantes plus 'cosmétiques'.

En passant, dans la catégorie des petits faits divers dont tout le monde se fout sauf moi, ce billet vient officiellement de devenir le billet le plus commenté de l'histoire de CYBERcodeur. :)

Haut retour au début de la page

2003.11.06 @ 17:27 par sébastien

Et moi je suis condamné à ne plus pouvoir voir CYBERCodeur avec son menu... :(

Je pense que c’est une histoire de cache puisque j’ai fait l’expérience chez un de mes camarades qui n’était jamais venu en ces lieux (il y est allé de son petit signet, d’ailleurs), mais j’ai beau passer de Moz à Firebird, c’est tout pareil. Quelque chose me dit que ça cache in between, sur le long chemin qui mène de chez vous à chez moi/ma boîte...

Bobe :

C’est exactement le sujet de mon cours de ce matin sur les CSS ! À noter en CSS 1, !important de l'auteur de la page a priorité sur le !important du lecteur : http://www.w3.org/TR/REC-...

Cependant, je ne le perçois pas comme toi : je ne vois pas l’utilisation de la feuille de style utilisateur comme un double emploi avec les feuilles de style alternatives. Une feuille de style utilisateur ne participe pas de la même démarche qu’offrir à ses lecteurs une autre apparence. L’utilisateur peut décider de vouloir voir un site d’une certaine manière (encore faut-il qu’il en ait les compétences, comme dit Bleizig) qui lui sera tout à fait personnelle. Le webmestre peut lui décider d’offrir plusieurs apparences à ses utilisateurs, avec dans l’esprit l’ergonomie et l’esthétique qui lui sont propres. La démarche met en jeu deux acteurs différents dont les attentes ne sont pas du tout les mêmes. L’un doit contenter une population, l’autre n’a à se soucier que de ses besoins et envies. Pas du tout la même conception.

L’intérêt principal que je vois aux feuilles de style utilisateur est, par exemple, de forcer la taille des caractères en plus gros, ou d’utiliser des couleurs particulières qui peuvent permettre à une personne atteinte de daltonisme de lire dans les couleurs qui lui sied. Bien sûr je pourrais me refaire CYBERCodeur en jaune et vert (au hasard), mais je préfère voir ce qu’ils me proposent pour apprécier pleinement leur design. Éventuellement, j’irai remettre le tout en Georgia, parce que je préfère. :)

Haut retour au début de la page

2003.11.06 @ 17:40 par sylozof

Moi j'utilise pour l'instant une CSS alternative pour que tous les morceaux de code s'affichent avec la police Monaco (dispo sur Mac) en 9px. Le code devient très lisible.

Mais par contre, je ne crois pas que l'utilisation d'une CSS alternative soit adaptée pour masquer par exemple le volet droit de ce site. Il faudrait fouiller dans le code source pour voir quelle est l'id de la div correspondante à ce volet, puis ajouter dans notre CSS une règle qui masque ce volet. Pas pratique.
Et puis si jamais il y a un autre site qui a une div nommée pareil, celle-ci sera alors masqué à notre insu.

Donc les CSS alternatives se limitent à gérer les polices (taille, famille, couleur), et éventuellement enlever les bannières de pub en Flash
http://standblog.com/blog...
http://www.macosxhints.co...

Enfin c'est ce que je pense, maintenant je ne suis sûr de rien (comme jamais d'ailleurs). ;-)

Haut retour au début de la page

2003.11.07 @ 01:31 par s t e f

Ce que rapporte Sébastien est très probablement exactement ce à quoi je faisais référence. Proxies très conservateurs.

Par ailleurs, Bleizig:
<q>Ca n'est pas vraiment une solution mais plutot une bidouille: je supposes que tu as un selecteur pour changer de feuille de style. Tu as donc la certitude que l'utilisateur se trouvait dans un certain intervalle (au niveau defilement vertical) au moment ou il a change de style.</q>

Tu imagines le bazar à calculer...? Pour ma part j'avoue que, simplement, ça ne m'encourage pas à utiliser un style-switcher en JS...

En réalité tu n'as la certitude de rien : le visiteur ne change pas la CSS en plein milieu de page. C'est le navigateur qui, ayant fini de charger la page, affiche la bonne CSS onload(). Ça sent plutôt le casse-tête, tout ça...

Haut retour au début de la page

2003.11.07 @ 01:58 par sébastien

s t e f :

Je me souviens avoir eu le problème sur un site développé il y a quelques années en Irlande – où même les proxies sont conservateurs, donc. Après la mise en ligne de leur tout nouveau site, c’était toujours l’ancien site « développé » (avec Word) qui apparaissait ! Bon, ça me rassure, je n’ai donc pas sombré dans une dimension parallèle...

Haut retour au début de la page

Les commentaires et trackbacks sont désormais fermés. Pour toute remarque, vous pouvez toujours nous contacter.

Pisteur (Trackback)