Web: l’UNIL ne reste pas immobile

par Pascal Waeber, publication web, Ci-UNIL

Depuis mars 2018, le nouveau design de nos sites web institutionnels les rend plus aisés à consulter sur toutes les tailles d’écran.

© Lia Arevadze | Dreamstime.com

Mobilisation générale !

Depuis fin 2016, au niveau mondial une majorité de pages web sont consultées sur un mobile plutôt que sur un ordinateur, et cette tendance ne va pas en faiblissant. Cette statistique est de plus en plus influencée par les pays émergents, dont les milliards d’habitants sont certes toujours peu nombreux à pouvoir s’offrir un ordinateur, mais où la vente de mobiles d’entrée de gamme à moins de 50$ est en plein essor.

© StatCounter

En Occident également, le mobile gagne des parts de marché, et à fin 2016 en Suisse, 40% des pages web étaient consultées depuis un mobile.

Même dans les universités, dont les sites web ont pourtant un contenu plutôt dense et a priori peu aisé à consulter sur un petit écran, cette tendance est clairement marquée. Pour s’en faire une idée plus concrète en chiffres, voici les sites de l’UNIL qui ont été les plus consultés sur mobile entre septembre 2017 et février 2018 :

En Suisse, une majorité des universités et hautes écoles ont adapté leur design web ces dernières années afin de faciliter l’accès à l’information sur mobile. En effet, pour qu’un site puisse être consulté aisément sur toutes sortes d’appareils, il est nécessaire qu’il ait été techniquement conçu ou modifié pour cela. C’est que l’on appelle le responsive web design, dont CiNN vous parlait en 2012 déjà.

A l’UNIL, nous avons progressé par étapes dans ce processus d’adaptation des sites au mobile, qui constitue une tâche de longue haleine :

  • depuis 2013, tous nos sites et blogs de conférences, projets, groupes et associations nouvellement créés sont responsive
  • depuis 2015, nos sites institutionnels (=sites de facultés, départements et services) sont responsive dans une adaptation sommaire, qui représentait une première étape
  • en 2016, les nouveaux sites l’Actu et l’Agenda ainsi que la nouvelle version du portail MyUNIL intègrent nativement le responsive web design
  • en mars 2018, nos sites institutionnels voient leur consultation sur mobile améliorée par une deuxième étape d’adaptation du web design, qui constitue le sujet de cet article.

Changer les roues d’un train en marche

Pour tout web designer qui serait chargé aujourd’hui de concevoir un nouveau site web, il serait aberrant de ne pas y inclure par défaut l’aspect responsive design, tant la consultation sur mobile est répandue. Ce qui est aujourd’hui une évidence ne l’était cependant pas il y a 15 ans, lors de la création de nos plus anciens sites de facultés, instituts et services.

15 ans, c’était 4 ans avant la sortie du premier iPhone… En matière de web, c’est un âge canonique, et bien des aspects ont évolué durant ces années : le design, l’ergonomie, les performances des appareils et des réseaux, et surtout l’apparition et l’essor du mobile. Ceci signifie que souvent la structure et le contenu de ces sites n’ont pas été pensés pour une consultation sur des écrans miniatures qui n’existaient pas encore.

Début 2015, lors d’une première étape d’adaptation au mobile, nous avons rendu l’affichage de ces sites partiellement responsive : le contenu était certes consultable sur un petit écran, mais le menu de navigation, inchangé, s’affichait toujours en premier obligeant l’internaute mobile à scroller avant de trouver le contenu recherché. Cette première étape, même imparfaite, a cependant permis à l’UNIL d’échapper aux fourches caudines du Mobilegeddon (=Mobile Armageddon), à savoir une rétrogradation du pagerank de Google pour les sites dépourvus de version mobile. Le principe d’une deuxième étape, incluant la refonte de la navigation afin d’optimiser l’utilisation sur toutes les tailles d’écran, était pour nous d’ores et déjà prévu.

Mais cette deuxième étape ne s’annonçait pas comme une simple promenade de santé. Car c’est en fait toute la manière de communiquer sur le web qui a progressivement changé : des textes plus courts, des images et des polices de caractères plus grandes, des menus comportant moins d’éléments, etc. Or un projet de refonte complète des contenus de nos 300 sites institutionnels actuels aurait nécessité des ressources considérables et se serait forcément étalé sur une longue période, au vu des 20’000 pages concernées. Il est possible qu’une telle refonte se réalise (au moins partiellement) dans le futur, mais dans l’immédiat l’objectif prioritaire était surtout d’améliorer sans délai la consultation sur mobile de ces sites dans leur état actuel.

Tel est le défi qui se posait à l’équipe web du Centre informatique et d’Unicom : tenter d’adapter au mieux ces 300 sites aux exigences des mobiles, avec un minimum d’interventions à réaliser pour les personnes qui les gèrent (secrétaires, assistants, enseignants, laborants, …), et en faisant en sorte que les visiteurs ne soient pas trop désorientés par ces changements. Ce qui équivaut à peu près à changer les roues d’un train en marche.

Menu hamburger pour tout le monde

Rassurez-vous, le titre de ce paragraphe n’est pas l’intitulé d’une pétition pour faire supprimer le buffet de salade de nos cafétérias 🙂

Le responsive web design a son propre jargon pour désigner les différents composants d’une page web. C’est ainsi que le terme menu hamburger désigne communément l’icône qui symbolise le menu de navigation dans une vue sur mobile.

Le changement apporté au menu de navigation est justement la pierre angulaire du nouveau design de nos sites web. Depuis 2003, ce menu de navigation principal était vertical, et pouvait comporter jusqu’à 11 éléments de premier niveau, répartis en 1 ou 2 blocs. L’adaptation pour laquelle nous avons opté avait pour but de nous rapprocher de ce qui constitue de facto actuellement un standard en matière de navigation : un menu de premier niveau horizontal. Comme ce premier niveau ne pouvait comporter 11 éléments, nous l’avons scindé en 2 blocs, dont l’un dans un menu déroulant.

De ce changement dans le design du menu ont découlé d’autres possibilités de modifications, par exemple une image de page d’accueil occupant toute la largeur de la page, ou encore une boîte de recherche visuellement moins envahissante. En complément, nous avons aussi opté pour une police de caractères plus grande, donc plus lisible, ainsi que pour des composants optionnels tels que des images agencées sous forme de colonnes adaptables à la largeur de l’écran, connues sous le terme de card design dans le jargon du web design.

Un exemple du principe des images en card design

Une fois la maquette de ce nouveau design établi, plusieurs séances d’information ont été organisées pour les responsables des sites web institutionnels, afin de leur expliquer la démarche et les tâches qu’ils auraient à accomplir pour adapter la navigation de leur site à ce changement. Une version de test de leur site avec le nouveau design a également été mise à leur disposition pendant plusieurs semaines, afin qu’ils puissent s’en faire une idée concrète et essayer diverses variantes et possibilités.

Le changement dans la continuité

L’objectif de cette deuxième étape d’adaptation de nos sites web institutionnels aux mobiles était de les faire mieux coller au Zeitgeist, sans pour autant que les personnes qui les visitent régulièrement ne s’y sentent trop égarées. L’avenir nous dira si nous y sommes parvenus. Un mois après sa mise en production, ce premier changement important de design en 15 ans (!) ne semble pas avoir provoqué de tsunami. Ce qui est bon signe. Car si le web design a son jargon, il a aussi ses proverbes. Dont le plus connu est : « Good design is invisible ».

Plus d’informations: