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!