Cadre commun d’interopérabilité et résolutions d’écrans

Pour le bénéfice de tous, et dans l’espoir d’avoir des commentaires, je me suis permis de recopier un message que j’ai transmis aujourd’hui à la liste des Webmestres du gouvernement du Québec. 

Ainsi, mon collègue Patrick Parent et moi avons reçu une question d’un collègue oeuvrant dans un ministère concernant les règles du Cadre commun d’interopérabilité (CCI) du gouvernement du Québec, qui commence à dater un peu (2005) au sujet de la résolution d’écran.

Ainsi, tel qu’il le fait remarquer, la règle e170 du CCI se lit comme suit:

Il désirait donc savoir s’il y avait eu une mise à jour de cette norme.

Ma réponse, toute personnelle, est: non, je ne le crois pas.

Je tiens à rappeler que le Programme d’identification visuelle du gouvernement du Québec (PIV), qui lui date de 2001, stipule que nos sites doivent être en 800×600
et que le bandeau ne doit pas faire plus de 760px. Benoît Girard avait diffusé
sur le site Webmaestro une version mise à jour du PIV (ou bonifiée) qui autorisait, entre autre, l’utilisation d’un «bandeau extensible» (liquid design):

«Les ministères et organismes peuvent aussi utiliser le bandeau extensible développé par le service de l’identification visuelle. Ce bandeau a été déposé dans les valises des organisations, dans le site du Programme d’identification visuelle.»

Depuis, je n’ai pas rien vu de nouveau comme règle, standard ou norme émanant d’une organisation centrale. Quelqu’un a vu quelque chose?

Maintenant, qu’en est-il?

Vous êtes probablement familiers avec tout ce qui se passe dans le monde du Web au niveau des résolutions d’écrans. Ainsi, nous avons nos bons vieux ordis de bureau ou portables, avec des résolutions généralement de plus de 1024×768, auxquels s’ajoutent les tablettes qui commencent à intégrer le «Retina display», comme le iPad 3 (2048 pixels de large sur un écran de 10po de diagonale, ça commence à frapper fort!).

Finalement, on retrouve la gamme des petits et moyens appareils, de 3 à 7po de diagonale, qui ont des résolutions natives parfois surprenantes. Bref, on a un écosystème assez riche. Comment le CCI peut-il donc encore s’appliquer aujourd’hui? Sacrée bonne question!

Des stats? et hop!  (sources Wikipedia, MS et
W3School)

  • plus de 70% des écrans sont utilisés avec une résolution supérieure à 1024px de largeur;
  • Le format 800×600 est maintenant relégué à 5.11% des utilisateurs;
  • On retrouve des résolutions très petites (320×480) dans le top 10 (bon, 10e place, mais quand
    même…);
  • Il y a un éventail de résolutions assez vaste (plus de 4000!!!) – mouais, assez biz, vous ne
    trouvez pas?

Ah! le Responsive design

Doit-on encore parler de résolutions d’écrans? Doit-on encore «canner» nos sites dans des largeurs fixes? Je vous réfère ici à une approche assez récente, dont vous aurez certainement entendu parler, soit le «Responsive Design», ou design adaptatif en
franglais. Je vais en discuter prochainement dans un billet sur EGouvQuebec, mais pour l’instant, ce que vous devez savoir c’est que cette approche propose de faire des sites qui vont s’adapter selon la largeur de l’écran de l’utilisteur.

Ainsi, un site sur un gros écran de 1600×1200 (ou en format 16×9 avec une super résolution de 2048×1152 ou tout autre multiple) pourrait s’afficher de façon aussi bien optimisée que sur un petit téléphone, car le contenu, l’affichage, les polices de caractère, l’organisation de l’information s’adapte à la demande.

Un exemple? Allez voir le site Smashing Magazine dans
autre chose que IE6 ou 7 et jouez avec la largeur de la fenêtre, vous verrez le contenu s’adapter selon des paramètres définis par les designers du site. Cool, hein?

Ok, et on fait quoi avec les infos dans le CCI?

Je ne suis pas dans le secret des dieux, je crois qu’il serait pertinent qu’une personne responsable du dossier intervienne et nous dise ce qu’il en est de ce standard (s’il en est un) et si une version améliorée aux stéroïdes est sur le point de naître…

Bref, en favorisant une approche de type Responsive design, on vient régler le cas des résolutions d’écrans «cannées»… mais attention, cette approche n’est pas la panacée! je vous expliquerai dans le merveilleux article que je n’ai maintenant plus le choix d’écrire pour EGouv! argh!

Standard sur l’accessibilité des sites Web gouvernementaux

Hier avait lieu un WebÉducation traitant du standard sur l’accessibilité des sites Web gouvernementaux. Ça fait un bout de temps que ce projet dure, et il commence à porter fruit.

Pour les intéressés, le processus de normalisation gouvernemental est long, découpé en trois phases principales:

  1. Première rédaction – comité restreint
  2. Consultation élargie
  3. Adoption et mise en place

Hier, les membres du comité restreint et les responsables nous ont présenté le travail fait en une année, soit la phase 1. Le standard devrait passer en consultation élargie cet automne et être théoriquement approuvé au printemps 2009…

Bon, ok, mais ça donne quoi, ce standard? Dans les faits, même si je n’étais pas membre du comité restreint, j’ai pu donner mon grain de sel et, surtout, prendre connaissance des trois documents. Alors la présentation d’hier était plus une formalité…

Malgré tout, Jean-Marie D’amour et Denis Boudreau nous ont fait des présentations fort intéressantes sur le contenu et l’interprétation à faire du standard.

L’application du standard peut d’ores et déjà se faire dans nos organisations. Nous avons un bon bout de chemin de fait, il ne reste qu’à optimiser certaines pratiques, mais surtout à former les développeurs pour que ceux-ci s’assurent de respecter les bonnes pratiques et normes.

Finalement, ce standard va être un bon outil pour forcer tous les intervenants à bien travailler!

Aparté: j’ai proposé à Jean-Marie et Denis de valider l’accessibilité de SAGIR… peut-être que ça donnerait de l’eau au moulin pour refaire ce système complètement inutilisable!

Agrandir ou réduire le texte…

Le fameux petit bouton que certains mettent sur leur site Web, vous savez, une p’tite image «A+» avec une autre «A-», ou encore un texte réduire/agrandir le texte? Vous vous en remémorez quelques uns?

Je ne cesse de dire que c’est obsolète, ridicule, pathétique! Eh bien voici que Joe Clark tape sur le clou!

«…we don’t want to give them [utilisateurs occasionnels du Web], or anyone, the impression that text size can be changed only on those unusual sites that have a little icon onscreen.»

Il en est de même pour la foutue imprimante permettant d’imprimer la page correctement. Faites une CSS en conséquence! ça va régler le problème!

Bref, pourquoi toujours réinventer la roue?

Discussion sur les CSS… dans l’autobus!

Hier soir, en revenant chez moi après une longue journée de travail (elles sont très longues dernièrement… heures supp! argh!), donc, dans l’autobus, j’ai entendu deux personnes discuter de CSS.

Ça peut sembler anodin comme ça, mais pensez-y… un autobus plein de gens qui ne comprennent rien de rien à ce que disent deux passagers sauf vous, le designer, dans le coin, qui ne peut s’empêcher de tendre l’oreille… Or, voilà qu’un commentaire m’a tittillé. Il était alors question d’un problème d’affichage (fort probablement dans IE, à ce que j’en ai déduit) lorsqu’un de leurs collègue (ou je ne sais trop) mettait le fameux «truc xml en haut de page». Je n’ai pas pu me retenir plus longtemps…

Je suis allé les rejoindre et ai expliqué ce bogue connue de IE, si c’en est un… oui, c’en est un… m’enfin. Vous connaissez certainement, non? bah… si ce n’est pas le cas, voici un bref résumé (un résumé est bref par définition, non? est-ce là un pléonasme?):

Bon, la fameuse déclaration xml, ce «truc xml en haut de page», est, théoriquement, nécessaire pour toute page en xhtml (1.0 ou 1.1). Je ne lancerai pas le débat sur la présenc ou non de cette déclaration. Or, il y a un petit problème avec cette déclaration, en fait, juste dans ie (6, pour le 7, je ne l’ai pas encore essayé). Dès qu’elle est présente, ce dernier se met en mode quirks, il va donc interpréter de façon bizarre, quirks, les CSS.

Est-ce souhaitable? ça dépend. Si vous avez conçu votre site sans doctype ou avec cette déclaration XML depuis le début, c’est un moindre mal, car vous avez fait des hacks de CSS tout le temps pour que le tout s’affiche à peu près correctement dans ie vs FF.

Par contre, si vos CSS sont conçues selon les standards Web, il y a fort à parier que le fameux quirks mode vous donne de sacré maux de tête. La solution? pas trop géniale, mais il devient alors préférable de ne pas mettre de déclaration xml pour les pages en xhtml. Si tel est le cas, n’oubliez surtout pas la balise meta pour l’encodage des caractères dans le head:

<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />

J’ai juste trouvé décevant de ne pas avoir eu le temps d’élaborer plus longueemnt avec ces deux collègues dans le bus. Disons que le temps est un peu serré pour expliquer les origines du quirks mode et des différences d’interprétation des fureteurs… Bah, avec de la chance, ils liront peut-être mon blog?

Web Éducation(s)

Demain aura lieu un autre Web Éducation où il sera question des normes. Malheureusement, mon emploi du temps étant hyper chargé ces dernière semaines (mon blog s’en ressent…), je ne pourrai pas y être! argh!

J’aurais bien aimé savoir comment se trame le dossier des normes d’accessibilité au gouvernement du Québec, ou la nouvelle version du Cadre commun d’interopérabilité, mais ce sera pour une autre fois on dirait…

Parlant d’une autre fois, il y a un autre Web Éducation, en décembre cette fois, le 12 pour être précis. J’en ai déjà parlé ici, mais il y a un changement. Ce n’est plus moi qui donnera la conférence, j’ai dû me tourner vers des remplaçants (et pas les moindres!).

Ce seront Yannick Pavard et Yan Bodain, respectivement de TC2L et du CRIM qui animeront cette journée dédiée entièrement aux CSS et à leur utilisation. Ça fait suite à la série de présentations que j’ai donnée l’an dernier, à la même période.

La journée sera divisée en deux, soit l’avant-midi où Yannick nous présenta la norme et la nomenclature des CSS, histoire de s’assurer que tous auront les mêmes bases. Yan nous présentera, en après-midi, l’application de ces normes pour arriver à faire certaines choses concrètes avec les CSS, par exemple, ces fameuses pages entièrement positionnées sans tableaux.

La journée s’adresse aux personnes qui veulent comprendre ce que sont les CSS, aux graphistes qui trop souvent font des maquettes graphiques sans même avoir ouvert un fichier HTML et à ceux qui bidouillent des CSS sans trop comprendre ce qu’ils font (ce qui est normal dans un certain sens… le support par les fureteurs n’étant pas constant).

Suivra une demi-journée, en janvier prochain, où je ferai une présentation d’une heure trente à peu près (ça reste à confirmer), où je présenterai certains trucs et mes méthodes de travail, principalement entre Photoshop et les CSS, pour optimiser mes images et mes feuilles de styles. J’y présenterai aussi les méthodes de travail mises en place chez nous au cours de l’été dernier.

J’espère avoir du temps d’ici là pour travailler sur la présentation… argh!!