1. Les terminaux se diversifient

Beaucoup de téléphones sont devenus intelligents (d'où en anglais le nom de smartphone, mais smart signifie aussi chic, peut-être à cause du prix exorbitant de certains appareils...) et peuvent se connecter à l'internet.

Les tablettes sont à la mode et ont emplis la hotte du père Noël. Connectées elles aussi, elles permettent de consulter des sites depuis son canapé, voire de son lit.

Les ordinateurs portables remplacent de plus en plus les ordinateurs de bureau dont les écrans sont devenus plats, mais surtout plus larges.

2. Les éléments à prendre en compte

La taille de l'écran est bien plus faible pour un téléphone. Celle de certaines tablettes rappelle les écrans historiques des premiers ordinateurs en 640, 800 voire 1000 pixels. À l'opposé, les écrans plats des ordinateurs fixes ou portables ont très souvent une largeur de 1360 pixels et ils peuvent aller jusqu'à 1920 ou 2560 pixels.

Le format d'affichage large en 16 / 9 ou 16 / 10 s'est généralisé pour visionner les films en cinémascope. Horizontalement, dit format paysage, il laisse une marge importante de chaque côté. Les téléphones et les tablettes peuvent aussi basculer verticalement, en format portrait, pour présenter au mieux les informations à lire.

Tablettes et téléphones sont aussi caractérisés par l'absence de souris. L'interaction avec l'écran est rarement remplacée par un fin stylet, presque toujours par des gros doigts pas très précis d'autant que l'affichage est petit.

3. Les solutions possibles

Pour prendre en compte les nouveaux terminaux, il existe quatre catégories de solutions.

Par défaut, quand un site n'est pas adapté pour les téléphones et les tablettes, les navigateurs web de ces matériels affichent une page en réduisant le niveau de zoom pour qu'elle apparaisse intégralement en largeur. C'est très souvent minuscule et bien souvent inutilisable, surtout avec un appareil en disposition verticale, mais l'utilisateur peut agrandir une partie de la page par des mouvements judicieux de ses doigts agiles. La première solution consiste donc simplement à ne rien faire et à laisser les utilisateurs se débrouiller.

Les fabricants de systèmes (Apple, Google, Windows) préconisent le développement d'applications spécifiques, surtout quand les utilisateurs doivent venir les chercher sur leur propre guichet. Cette technique a les défauts des applications réparties déjà connues : une installation préalable sur chaque terminal, avec des mises à jour régulières ou une dégradation de la compatibilité avec les nouveaux systèmes ou de la sécurité ; la délégation de droits sur le terminal et ses données personnelles, créant ainsi des trous de sécurité permanents.

Le développement de sites spécifiques aux téléphones, aux tablettes et aux inventions à venir. Comme la solution précédente, celle-ci demande une charge de travail supplémentaire, souvent disproportionnée avec la qualité obtenue des adaptations.

L'écriture d'un site unique, mais adaptable à tous les écrans et terminaux connectés à l'internet. Les versions actuelles des langages de programmation des sites web permettent d'obtenir une présentation très acceptable d'un même site sur différents supports. Avantages : les développements sont réduits donc plus facile à maintenir et les webmestres n'ont à gérer qu'une seule base d'informations.

Dans tous les cas, une forte réflexion est nécessaire aussi bien sur les plans sémantiques que graphiques pour faire tenir un site sur une surface dix fois moindre que les écrans des ordinateurs pour lesquels le site a été initialement conçu.

Le logiciel projet_a de l'association AIO sait mettre en œuvre sans modification la solution de site unique adaptable. La réalisation de sites spécifiques aux différents types de terminaux tout en partageant la même base de données nécessiterait au minimum une adaptation pour permettre à un générateur de pages de posséder plusieurs codes sources. La fabrication de sites uniques adaptables est donc privilégiée.

4. L'adaptation du site AIO

Le site de l'association AIO http://a-io.eu est désormais adapté aux différents types des terminaux des usagers. Depuis votre ordinateur, pour avoir une idée du rendu sur un petit écran, réduisez progressivement la taille de la fenêtre de votre navigateur : les éléments de la page vont se repositionner au mieux au fur et à mesure, voire disparaitre ou être remplacés par d'autres quand la place disponible sera comptée.

La page d'accueil en trois colonnes, initialement sur 960 pixels de large, a maintenant une largeur maximale de 1200 pixels. Quand la largeur de la fenêtre diminue, la largeur de ces trois colonnes diminuent proportionnellement jusqu'à ce qu'elles deviennent trop petites. Les données sont alors affichées sur deux colonnes, puis sur une seule. Simultanément, trois boutons apparaissent sous le titre pour donner un accès direct aux trois parties de la page d'accueil : les sites, l'association, le logiciel. La taille de la police du titre diminue aussi progressivement et les deux logos disparaissent tour à tour quand l'espace vient à manquer. Les fiches déclenchées par un clic de souris ou un tap sur le nom d'un titulaire de site ont été recadrées pour rester sur la colonne des sites, donc toujours visible sur le petit écran d'un téléphone.

Les pages documentaires internes présentent des évolutions similaires quand la taille de l'écran se réduit. Quand l'affichage est reporté sur une colonne et quand le sommaire de la page existe, celui-ci est placé sous le titre et avant le texte ; le plan du site est rejeté après le texte.

Globalement, les adaptations sont assez réduites. Elles portent toutes sur la feuille de styles du site, à l'exception du cadrage des fiches des titulaires et de la position du sommaire des pages documentaires.

5. Et pour les sites d'artiste ?

Les adaptations à réaliser sur un site d'artiste seront plus importantes, car un tel site a une structure plus complexe que le site portail.

La maquette de chaque type de pages doit être réfléchie pour prendre en compte les contraintes propres à chaque catégorie de terminaux. L'équilibre et le graphisme de la mise en page sont à réanalyser en fonction de la taille des écrans ; les interactions à la souris, inexistantes sur téléphones et tablettes, sont à transposer.

Pour un même contenu de page, il faut donc imaginer les différentes présentations propres à chaque format d'écran.

Plusieurs composants doivent être adaptés :

• le composant de positionnement libre des images doit pouvoir travailler sur plusieurs espaces réduits, affichables en lignes ou en colonnes ;
• le visionneur d'images doit réagir à autre chose qu'à un survol de souris ;
• les flèches de changement de page doivent être plus grosses pour des doigts épais ;
• les menus doivent s'adapter à des espaces ramassés ;
• ...

6. Et les concepteurs de sites ?

Les concepteurs de sites s'appuieront sur les techniques dites de responsive design à base de dimensions variables et de medias queries du CSS, bien documentées sur internet ou en librairie.