Divites, spanites, classites, identitites, cellulites... Merci Raphaël

Du bienfait que m'a apporté le livre "CSS 2 Pratique du Design Web"


Bonjour,

Ayant voulu réaliser le site de ma société de documentation technique, technico-commerciale et commerciale "LCP Communication technique", j'ai d'abord utilisé des méthodes considérées comme obsolètes ou ne correspondant pas aux règles de l'art :

image d'arrière-plan réalisée sous Illustrator puis tranchée en tableaux,

utilisation d'iframes,

programmation des aspects dynamiques à l'aide d'instructions Javascript de base (OnClick, OnMouseOver, GetElementByID, parent.nom_iframe.location... , sans compter le code Javascript placé par Dreamweaver),

etc.,

ce qui m'a valu un "Arf ! " ironique de Florent lorsque j'ai commencé à poser des questions sur ce forum et à expliquer les approches et techniques que j'utilisais.

J'ai alors voulu réaliser le site en xhtml strict / CSS pour me plier aux règles de l'art préconisées.
Me rendant compte que les informations d'explications éparses que je recueillais sur la Toile et sur ce forum n'étaient pas suffisantes pour me guider face aux difficultés auxquelles je me heurtais, j'ai fait l'acquisition de l'ouvrage "CSS 2 Pratique du Design Web" d'un certain Raphaël Goetter.


Au-delà des indications techniques concernant les instructions CSS, et qui m'ont été fort utiles, cet ouvrage m'a apporté trois fondements précieux :

Le premier fondement concerne la séparation rigoureuse entre le contenu et la mise en forme.
Dans le métier de la rédaction technique, ce concept devient de plus en plus primordial et modifie en profondeur nos pratiques et techniques. J'étais donc particulièrement sensible aux arguments présentés par Raphaël et ai, progressivement, phase après phase, cherché à atteindre pour le site de ma société un niveau de séparation maximal.

Le deuxième fondement que l'ouvrage m'a apporté est de donner un sens à la structure du code html afin que celle-ci puisse être d'emblée comprise, notamment par un robot de moteur de recherche. Par exemple, préférer pour la mise en exergue de mots les balises <strong> et <em> plutôt qu'une balise <span> sans grande signification structurelle.

Le troisième fondement vient de la recommendation de ne pas nommer les éléments, de réduire autant que possible les structures de type <div> ou <span>, de ne nommer que des éléments parents, ou, mieux, ancêtres, et uniquement lorsque cette identification est véritablement nécessaire.


C'est peut-être cette recommandation qui a le plus modelé en profondeur ma façon de penser et d'écrire le code et le contenu même du site. Progressivement, par phases successives — à chaque fois que j'épurais le code en supprimant des identifiants, des <div> ou des <span> non indispensables, je me rendais compte que je pouvais aller encore plus loin dans ce travail d'épurement — j'ai appris à rendre le code le plus essentiel et le plus signifiant possible : www.lcpcomtech.com


Les deux pages qui, à mon sens, illustrent le mieux cet effort de réduction du code à son niveau le plus strict, et qui sont le plus marquées par les préconisations de Raphaël, sont les pages "ce que nous vous apportons" et "nos réalisations".

Dans la première, deux listes identiques dans leur structure sont mises en forme de façons totalement différente.

Dans la seconde, pour chaque item, le nom de la société, son domaine d'activité, le ou les deux paragraphes décrivant la prestation réalisée sont définis par les seules balises <dt> et <dd>.


Maintenant j'ai appris à appliquer la démarche inverse : j'écris le code html sans le moindre identifiant et n'en place que lorsque leur présence permet de ne pas alourdir inutilement le code CSS.


Pour ces deux pages, je ne pense pas pouvoir aller plus loin dans la réduction du code. Si toutefois, vous trouvez ailleurs des possibilités de réduction élégante, je suis preneur et vous en suis d'avance reconnaissant.

Bien sûr, je suis très loin d'atteindre le niveau technique et créatif d'une bonne partie d'entre vous.
Par ailleurs, je n'ai pas encore appris les techniques permettant de naviguer dans le site à l'aide du seul clavier — comment en particulier faire apparaître les fenêtres de survol de la page "ce que nous vous proposons"? — et mon site ne prévoit pas (encore) l'accessibilité aux personnes handicapées.


Ce travail d'épurement ne s'est toutefois pas fait sans difficultés : la technique XHTLM / CSS est en effet, à ce que j'ai pu expérimenter, extrêmement sensible à la moindre erreur de compréhension de fond, et les résultats après une modification, conséquente ou non, du code peuvent rapidement devenir incompréhensibles pendant plusieurs heures, voire une ou deux journées.

Les principales difficultés que j'ai rencontrées lors des phases successives d'amélioration du code concernent

- le positionnement : il faut en permanence bien faire attention à la référence de positionnement d'un élément, la référence effective n'étant pas toujours celle qu'on croît

- la transmission non contrôlée, par le biais de différents héritages, de styles attribuant à un élément des caractéristiques non désirées (j'avais en permanence l'impression de subir des courts-circuits de surface)

- le fait qu'un problème peut être généré par un élément tout autre que celui qu'on vient de modifier et à un tout autre endroit du listing CSS (il faut donc savoir ne pas se fixer sur le code modifié, la plupart du temps juste, et chercher ailleurs la raison d'un résultat aberrant ou non désiré)

Enfin, petit détail stupide, mais qui a son importance, surtout lorsqu'on est fatigué : se souvenir qu'une page xhtml possède deux composantes : la page xhtml elle-même, et la feuille CSS associée. Ne pas oublier donc de les sauvegarder toutes les deux avant de tester les modifications du code ! (Je ne sais combien de fois je me suis retrouvé interloqué devant l'écran face à un résultat pour le moins inattendu avant de comprendre que, concentré sur une des deux composantes, j'avais oublié de sauvegarder l'autre.)


J'arrêterai ici mon long "debriefing" en remerciant tous ceux qui, sur ce forum et sur les autres d'Alsacréations, ont répondu avec pédagogie à mes questions de néophyte.

Et merci grandement à toi, Raphaël, de m'avoir, à travers ton livre, si bien guidé dans ma démarche et de m'avoir permis de consolider la maîtrise professionnelle de mon métier. Je crois que rarement l'acquisition d'un livre m'a apporté autant de fondements. Merci.

Boris
Modifié par Felipe (07 Dec 2009 - 14:25)

Salut,

Il y avait un sujet sur ce genre de retour, mais je ne le trouve plus, il a peut être disparu. Enfin bref tant pis.

a écrit :
je n'ai jamais rencontré de personnes présentant un handicap important.

Il ne faut pas oublier que tout handicap est important pour la personne qui en souffre, aussi minime soit-il. Et cette personne n'en parle pas forcément autour d'elle.

Au fait je déplace ton sujet dans le bar, où il a plus sa place.

Salut,

Il n'est pas forcément plus lourd de prendre en compte IE6, car à l'aide des commentaires conditionnels tu peux spécifier des styles qui ne seront pris en compte que par lui. Donc tu n'alourdira en rien le code pour la majorité des utilisateurs.

Par contre le choix de la police de caractère en pixels est une grosse erreur d'accessibilité, qui peut facilement être évitée avec une unité relative telle que les em ou les %. Sans forcément dénaturer la mise en page, du moins pas plus que sur un navigateur moderne. La différence se doit d'être acceptable, tant qu'elle est prévue dans ton design, et qu'elle ne gène pas l'accès à l'information.

Concernant l'intégrité de l'information, si des alternatives à l'information existent lorsque celle ci est substituée, il ne devrait pas y avoir de problème. Cela veut dire utiliser les attributs alt lorsque c'est nécessaire pour retranscrire une information contenu dans une image, utiliser l'attribut longdesc quand nécessaire, bien renseigner les tableaux pour les rendre navigables à l'aide des attributs caption ou summary ainsi que les entêtes (<th>). L'utilisation de l'attribut title aussi, mais dans une moindre mesure car son utilisation est plus délicate.

Concernant la consultation d'un site à l'aide du clavier, il faut surtout que la CSS ne lui nuise pas, en ne supprimant pas le focus sur les liens par exemple.

Ravi que mes propos puissent t'être utiles.

cadbor a écrit :
Pour ce qui est de la lecture par un assistant pour mal-voyants, est-ce que le fait que les pages soient structurées lorsque CSS est désactivé suffit à permettre une lecture fiable par ces dispositifs ?

C'est la base mais cela ne suffit pas. Il faut par ailleurs veiller à ne pas utiliser de techniques inaccessibles. Par exemple, une de ces techniques est l'utilisation de texte en images (images qui portent des textes, notamment pour des logos, titres ou boutons), lorsque les images sont placées en background CSS.
Une information accessible présentée sous la forme d'une image, c'est:

<img alt="L'information en question" src="...">

et pas autre chose.

cadbor a écrit :
comment en particulier afficher des popus de survol avec le clavier ?[/cadbor]
Par exemple en les affichant lors du focus ou du clic sur un lien donné.

[quote=cadbor]N'ayant jamais eu l'occasion de rencontrer parmi mes prospects et clients des interlocuteurs présentant une difficience visuelle ou motrice rendant la lecture d'un site difficile ou impossible, je reconnais que je suis insuffisament sensibilié à ce problème.

La prise en compte de l'accessibilité, en plus d'être indispensable pour tous les travaux web d'un service public ou service d'une collectivité territoriale, c'est aussi un bon moyen d'améliorer la qualité générale d'un site et de sa gestion. À ce sujet, on pourra lire par exemple: http://openweb.eu.org/articles/qualite_impose

cadbor a écrit :
Afin de rester maître de la mise en page, j'ai exprimé la taille des caractères en pixels, ce qui ne permet pas d'agrandir le texte. J'ai cependant estimé que cette lacune pouvait facilement être contournée par la fonction de loupe dont disposent les navigateurs actuels.

Personnellement je désactive le mode loupe car je le trouve vraiment peu pratique. La loupe, fournie par windows, est également problématique car elle réduit l'écran de moitié. L'utilisation de % et em te laisse tout autant maitre de ta mise en page, elle nécessite juste une petite période d'adaptation.

cadbor a écrit :
(Je n'ai pas utilisé d'instructions "alt" pour acompagner les figures utilisées pour le logo, la devise commerciale et les onglets, mais ai préféré des instructions "span" — les rares du site — non affichées.)

Grosse erreur. Désactive les images tout en laissant les styles CSS activés et tu comprendra le problème.

cadbor a écrit :
Reste le problème de l'utilisation exclusive de la souris. Pour l'instant, faute de savoir précisément comment procéder, je n'ai pas intégré dans les feuilles CSS l'utilisation du clavier — comment en particulier afficher des popus de survol avec le clavier ? —, mais je compte le faire lorsque j'aurai la possibilité de repenser mon code.

Pour les survol, s'ils ne sont pas gérer en JS, normaleme ils ne doivent pas poser problème ; s'ils sont gérer en JS alors il faut priviléger, par exemple, onFocus à onMouseOver.

cadbor a écrit :
N'ayant jamais eu l'occasion de rencontrer parmi mes prospects et clients des interlocuteurs présentant une difficience visuelle ou motrice rendant la lecture d'un site difficile ou impossible, je reconnais que je suis insuffisament sensibilié à ce problème.

T'as pas un collègue myope ? Pique lui ses lunettes et sert t'en comme cobaye (bon s'il a une myopie de moins de 2 dyoptre, il sera pas très utile )

cadbor a écrit :
J'ai donc pris le risque commercial, à mon sens minime, de réaliser le site en le rendant compatible IE7 et IE8, avec bien sûr un message ad hoc dans le cas où le site est affiché en IE6.

À partir du moment où le risque est connu et pris en compte, il n'y a pas de problème. Ce que je te conseille c'est de surveiller tes stats, si tu constate un fort % de visites via IE6 alors il faudra recadrer le tir.

Pour le message d'avertissement, oublie, il fait plus de mal que de bien ; et le visiteur sais déjà que son navigateur est une antiquité.

Laurie-Anne a écrit :

T'as pas un collègue myope ? Pique lui ses lunettes et sert t'en comme cobaye (bon s'il a une myopie de moins de 2 dioptries, il sera pas très utile )

Merci, d'abord, pour toutes tes réponses. Je répondrai au fur et à mesure, ainsi qu'aux interventions laissées pour l'instant en suspend.

Je n'ai pas besoin de chercher un cobaye myope. Je suis moi-même myope à 7,5 dioptries et travaille sur un écran HDMI 24" utilisé en 1920 x 1200. Avec mes lunettes, j'ai une vision parfaite.

Par contre, j'ai fait l'essai de lire ta réponse sans les lunettes.

Le choc ! Je ne commence à déchiffrer le texte qu'à la 14ème ou 15ème action de zoom, et me retrouve avec des lignes partielles de 4 ou 5 mots avec la nécessité de manier en permanence l'ascenseur horizontal, que j'ai d'ailleurs du mal à trouver.

Je savais que me retrouver sans lunettes m'interdit de travailler devant mon écran, du moins avec cette résolution. Je n'avais cependant jamais fait le test de travailler devant cet écran, avec cette résolution, sans lunettes. L'impossibilité est quasi totale.

Comme je l'indiquais dans une intervention précédente, j'ai vu des personnes travailler devant un écran de 21" avec une résolution de 600x800. J'ai donc prévu une largeur de lecture compatible avec cette résolution. Mais si même un écran large et une résolution faible ne suffisent pas ? Comment une personne ayant une telle déficience visuelle non corrigée, même partiellement, peut-elle travailler ? Je ne sais absolument pas comment je pourrais faire quoi que ce soit sur un ordinateur si je n'étais pas simplement myope bénéficiant d'une bonne correction.

Or le travail sur ordinateur ne consiste pas seulement à parcourir des sites Internet dont les concepteurs ont eu la courtoisie de penser à ceux pour lesquels la lecture peut être difficile, voire représenter une véritable souffrance. Quid des traitements de texte, des tableurs ? (Excel par exemple est limité à 400 %. Sans mes lunettes, toujours sur cet écran et avec cette résolution, je ne distingue pas le contenu des cellules, et je ne suis pas sûr qu'un écran de 600x800 et un zoom de 400 % me le permettraient !)

J'écrivais maladroitement qu'en 23 ans de métier, je n'avais jamais rencontré parmi le public d'entreprise que je côtoie de personnes présentant un handicap important. Dois-je comprendre que je ne les vois pas tout simplement parce que elles n'ont pas la possibilité de travailler en entreprise ?


Le livre de Raphaël et ces échanges m'apportent un quatrième fondement, bien plus profond que les trois fondements professionnels que je décrivais dans mon premier courrier : celui de me rendre compte, que souffrant d'un handicap qui semble banal — des myopes, il y en a un nombre considérable ! —, j'ai la chance de pouvoir aisément le corriger. Que c'est précieux des lunettes !

Merci de m'apprendre cette vérité essentielle.

Boris

cadbor a écrit :
Comment une personne ayant une telle déficience visuelle non corrigée, même partiellement, peut-elle travailler ?

Soit elles utilisent un lecteur d'écran, soit elle utilisent la loupe de grosoft, soit elles agrandissent les textes. Dis toi que -2.5 ce n'est pas "énorme" comme myopie.
Modifié par Laurie-Anne (07 Dec 2009 - 18:38)