La version mobile du site web

Cela fait quelques semaines maintenant qu’une nouvelle version du site est en ligne !

Cette nouvelle mouture permet une consultation plus aisée sur plate-forme mobile que ce soit sur tablette ou smartphone.

Il y a plusieurs solutions pour adapter un site pour mobile : créer une application à part entière ou partir du site existant. Étant donné le contenu important du site, nous avons préféré opter pour la deuxième solution. Ceci nous a été permis grâce aux Media Queries.

Cette spécification du langage CSS3 offre la possibilité de cibler le type et la taille d’écran pour lesquels nous souhaitons effectuer l’adaptation. Le CSS est un langage permettant de décrire la présentation d’une page HTML. L’adaptation du site n’a pratiquement nécessité que ce langage et a permis un développement rapide.

smartphoneLa disposition du site a dû être repensée afin de s’afficher verticalement. Le script affichant les sous-menus au survol de la souris a été désactivé pour s’adapter à une utilisation tactile. Une des colonnes a été supprimée car elle faisait redondance avec le menu principal. Le but est d’épurer un maximum la version originale afin de réduire les éléments à afficher.

La version tablette permet de consulter les actualités et les informations pratiques dès la page d’accueil. Les actualités ne sont pas disponibles directement sur la version pour smartphone mais via les sous-menus. L’habillage du site a été revu pour chaque mini-site des bibliothèques de la BCU.

L’autre point important à prendre en compte est le Viewport. Il s’agit de la dimension que le navigateur va donner à la page. Ce cas épineux présente des difficultés d’affichage des sites mobiles. En effet, pour un même mobile il existe trois dimensions d’écran. Une que le mobile a réellement, une autre qu’il pense avoir et une dernière qui dépend du navigateur du mobile en question (le fameux Viewport). Il est impératif d’harmoniser ces trois tailles en les définissant les unes par rapport aux autres grâce à la balise HTML : meta.

Pour ceux n’ayant pas de mobile un simple redimensionnement de la fenêtre du navigateur sur ordinateur permet de visualiser cette nouvelle version.

N’hésitez pas à donner vos avis !

 

Moi? Mathilde Delaporte, actuellement stagiaire à la bibnum et étudiante en informatique. Je suis chargée de l’adaptation du site. Ce stage m’a permis d’effectuer mon premier pas dans l’univers des bibliothèques que je compte continuer à explorer.

 

 

 


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *