Journal La difficultés à faire des pages Internet vraiment accessible

Posté par .
Tags : aucun
0
30
juil.
2005
Aujourd'hui je me livre à une petite réflexion sur les techniques de mise en page pour un site web.

Je me rend compte de la vraie difficultés que cela représente. Je prend mon cas personnel.

Le site dont je m'occupe, dans sa première version, est mis en page par tableaux, les décalages sont réalisés par une image transparente de 1x1 pixel, bref, que des techniques obsolètes.

Ce n'est pas bien, mais lorsque je l'ai fais, je n'étais pas sensibilisé aux problèmes d'accessibilité. Je testais le site sur IE (je n'étais pas non plus un linuxien, quelle époque !!!). L'avantage des tableaux, c'est qu'il n'y a pas de surprise quand au résultat : identique sur tous les navigateurs graphique.

Dans sa seconde version (en cours de finalisation), j'ai voulu faire un peu plus attention, j'ai choisi xHTML + CSS. J'ai donc commencé par faire les pages sans utiliser de feuilles de styles. Ensuite, j'ai commencé à coder les CSS.

C'est là que les embûches sont apparus. Faut il fixer la mise en page (largeur du body etc...) ou faire quelque chose de fluide ?

J'ai tout d'abord opté pour la seconde solution. J'ai spécifié toutes les dimensions en pourcents. Pas évident car la taille des polices ne varie pas avec la largeur de la fenêtre, ce qui donne des résultats assez surprenant parfois.

Je me dis que la solution est toute simple, à la place des pourcentages, je vais utiliser l'unité em. Avec ça, la taille des éléments suivra la taille de la police. Nouveau problème, comment bien jauger la largeur du body : 100% = ?? em. Pas vraiment pratique.

Finalement, j'en suis revenu à fixer la largeur des éléments. Le body fait 770px de large, comme ça, pas de surprise sur les résolutions 800x600px (le 640x480 est marginal selon les statistiques).
Ce n'est pas la meilleure solution, mais je n'en vois pas d'autre. Chez moi (1280x1024) un tiers de l'écran est vide, c'est un peu dommage...

Et vous, qu'en pensez vous, comment faites vous ?
  • # min/max-truc

    Posté par . Évalué à 6.

    tu peux spécifier une largeur en pourcents, ainsi que spécifier une largeur minimale en unité fixe

    genre

    body {
    width: 70%;
    max-width: 1200px;
    min-width: 600px;
    }

    ca devrait donner une largeur de page qui varie entre 600 et 1200px de large, avec une préférence pour occuper 70% de la largeur de la page.

    ca règle un peu tes problèmes ?

    si tu veux, sur yoyodesign*, t'as la traduc en francais des spécifications officielles du w3c concernant les CSS2 :)


    * http://www.yoyodesign.org/doc/w3c/css2/cover.html(...)
    • [^] # Re: min/max-truc

      Posté par . Évalué à 2.

      C'est une solution, mais si tu veux que ton site marche aussi bien sous IE que sur les navigateurs réçents et conformes, il faudra trouver un palliatif pour IE aux propriétés max-width et min-width, qu'il ne sait pas gérer.

      Par exemple celui-ci, http://www.svendtofte.com/code/max_width_in_ie/(...) ... je ne l'ai pas testé, mais il y a des retours sur C² : http://cybercodeur.net/weblog/commentaires/detailsCarnet.php?idmess(...)

      ++
      Jérémie
      • [^] # Re: min/max-truc

        Posté par . Évalué à 0.

        Le second lien que tu donne ,C2 [1], fait référence à une des sensations qui m'a fait choisir de limiter la largeur de la page.

        Un texte qui prend toute la largeur l'écran est horrible à lire. C'est aussi cela qui fait que prendre tout l'écran n'est pas génial.

        [1] Pourquoi sur mon clavier, je peux pas faire le symbole carré. Quand j'utilise la touche (au dessus de TAB), ça donne ½. Je suis sous Ubuntu Hoary.
        • [^] # Re: min/max-truc

          Posté par (page perso) . Évalué à 2.

          Tu dois utiliser Francais alternatif ...
          Change dans les prefs clavier de Gnome

          Perso, j'utilise ScrollLock pour changer de keymap (entre francais et francais alternatif) justement pour avoir ce ½ qui manque ...
          • [^] # Re: min/max-truc

            Posté par . Évalué à 2.

            Bien vu ! Quel drôle de configuration par défaut...
        • [^] # Re: min/max-truc

          Posté par (page perso) . Évalué à 2.

          Dès qu'on essaie de faire des trucs un peu sophistiqués, ça devient vite compliqué...

          Un site à largeur variable sur lequel j'ai pas mal galéré. Et il reste encore un petit bug sous Safari. Quand à Opera et IE5 j'ai définitivement abandonné... :

          http://chevallier-leguillou.fr/accueil.php3(...)

          En tout cas ça montre qu'on peut faire des trucs intéressants même sans Flash™.
        • [^] # Re: min/max-truc

          Posté par (page perso) . Évalué à 2.

          Un texte qui prend toute la largeur l'écran est horrible à lire. C'est aussi cela qui fait que prendre tout l'écran n'est pas génial.

          Ton texte ne prend pas tout l'écran, il prend éventuellement toute la fenêtre.
          Si ta page se redimensionne suivant la largeur de la fenêtre, c'est l'utilisateur qui choisira ce qu'il veut... et qui réduira éventuellement cette largeur s'il trouve que c'est illisible...

          Python 3 - Apprendre à programmer en Python avec PyZo et Jupyter Notebook → https://www.dunod.com/sciences-techniques/python-3

  • # Mises en page fluide et élastique

    Posté par . Évalué à 5.

    Salut,

    Pour se faire une idée des différentes techniques possibles pour fluidifier son "design", rien de mieux que de se balader sur le web et de regarder les sources des pages qu'on trouve jolies. :)

    Pour la mise en page fluide, un billet tout chaud sur egologie.net donne quelques pistes : http://egologie.net/index.php/2005/07/28/18-mise-en-page-fluide(...) (le site lui même utilise une mise en page liquide/fluide). Une autre technique chez pompage : http://pompage.net/pompe/margesnegatives/(...) .

    Pour la mise en page élastique (la page s'élargit avec l'augmentation de la taille de la police), un joli exemple détaillé ici : http://www.htmldog.com/articles/elasticdesign/demo/(...) .

    Petite pub, mais c'est un site vraiment très bien pour se former aux standards du web, avec pleins de tutoriels et un forum sympa et actif : http://css.alsacreations.com/(...) et http://forum.alsacreations.com/(...)

    Bonne chance :)
    Jérémie.
  • # Une idée toute bête

    Posté par . Évalué à 1.

    J'ai trouvé ça tout à l'heure en réfléchissant un peu :

    Il suffit de fixer (ouh, pas beau !) la taille de la police et ensuite on peut facilement faire quelque chose de variable.

    body {
    font-size: 12px;
    width: 64em; /* 64 * 12px = 768px */
    }

    Dans ce cas, si on redimensionne la taille de la police, tout les éléments suivent, et pourtant on peut caler son site au pixel près.

    Mais ce n'est pas parfais car il faut fixer la taille de la police, et sous IE, impossible de la redimensionner (la police), ce qui pose problème aux personnes malvoyantes.

Suivre le flux des commentaires

Note : les commentaires appartiennent à ceux qui les ont postés. Nous n'en sommes pas responsables.