Aller à: contenu | haut | bas | recherche
 
 
Vous êtes iciUNIL > Centre informatique > Services au personnel > Sites web > Web mobile

Web mobile

Le web sur un smartphone ou une tablette | Questions/réponses sur les sites Jahia (pour visiteurs et éditeurs) | Questions/réponses sur les sites Jahia (pour éditeurs)
 

Le web sur un smartphone ou une tablette

web-mobile-header.jpg
© olly - Fotolia

La consultation de sites web sur smartphones ou tablettes est en plein essor. Pour en savoir plus sur le "responsive web design" (ensemble des techniques qui facilitent la consultation des sites web sur de petits écrans), lisez cet article.

Actuellement, l'adaptation à une consultation sur mobile des sites web hébergés par le Ci-UNIL se présente ainsi:

  • La plupart des sites WordPress (=sites d'événements, conférences, associations, projets de recherche, etc.) sont dejà "responsive", et donc adaptés à une consultation sur les smartphones et tablettes. Depuis début 2013, tous les modèles graphiques mis à disposition sur nos serveurs WordPress sont adaptés aux mobiles.
     
  • Depuis janvier 2015, les sites Jahia (=sites des facultés, instituts, services et unités de l'UNIL) sont "responsive", dans une forme provisoire très simple, qui sera améliorée ces prochains mois. Cette première version est encore un "work in progress" perfectible, qui connaîtra diverses améliorations durant le courant de l'année 2015.

En parallèle, nous travaillons également à améliorer l'affichage sur mobile des pages web et applications ne faisant pas partie de ces sites: bases de données, moteurs de recherche, etc.

Le passage à un affichage optimisé sur les mobiles est un travail de longue haleine, vu le nombre (et parfois l'ancienneté) des sites web et applications de l'UNIL à adapter. Même si tout n'est pas parfait du premier coup, nous comptons sur votre compréhension. Cetta adaptation au web mobile est un objectif très important pour nous, et nous poursuivrons dans le long terme les efforts nécessaires pour cela.

exemple_desktop.png
Exemple d'une page vue sur un ordinateur…

exemple_mobile.png
…et la même page vue sur un mobile: l’affichage s’adapte automatiquement à la largeur de l’écran
(illustration: © diversepixel – Fotolia)

TOP ^

Questions/réponses sur les sites Jahia (pour visiteurs et éditeurs)

Depuis le 22 janvier 2015, je vois apparaître sur mon ordinateur un étrange menu de navigation en haut des pages web de l'UNIL. Comment m'en débarrasser ?

Vous voulez parler de ce menu ?

rwd-desktop.png

 

Dans le cadre de nos travaux visant à produire une version "responsive" de nos sites Jahia, nous avons modifié le codage HTML et CSS de nos templates. Chez certains utilisateurs, le cache de leur navigateur peut avoir conservé en mémoire une ancienne version de la feuille de style. Cela se manifeste par l'affichage du menu de navigation encadré en rouge ci-dessus, qui n'est pas censé apparaître dans l'affichage sur desktop.

Pour résoudre ce problème, il vous suffit de vider le cache de votre navigateur, comme expliqué ici​.

Pourquoi le menu de navigation apparaît-il entièrement déployé dans la version mobile, au lieu d'être compacté derrière une jolie icône "menu" qui permettrait de le faire apparaître ?

Cette amélioration est prévue dans une prochaine étape. En attendant, le menu de navigation horizontal en haut de page permet de sauter directement au début du contenu.

Certains sites affichent dans leur version desktop un menu déroulant à droite du bandeau de titre (par exemple liste des instituts pour certains sites de facultés). Pourquoi pas la version mobile ?

Cette amélioration est prévue dans une prochaine étape.

Quand bascule-t-on de l'affichage desktop à l'affichage mobile ?

Le "breakpoint" est à 801 pixels: si vous consultez un site Jahia UNIL sur un écran ou une fenêtre large de 800 pixels ou moins, vous voyez l'affichage mobile. Si votre écran ou votre fenêtre dépasse 800 pixels de large, vous voyez la version desktop. En consultant un site depuis un iPad, vous pouvez ainsi passer d'un affichage à l'autre en basculant du mode portrait (vertical) au mode paysage (horizontal).

On voit ailleurs de superbes sites pour mobiles. Pourquoi les nôtres paraissent-ils si rustiques en comparaison ?

La plupart des sites qui s'affichent bien sur un mobile ont été conçus dès leur origine avec une ligne graphique pensée pour s'adapter à plusieurs largeurs d'écran (desktop, tablette, smartphone), et ceci le plus souvent avec l'aide d'un "framework responsive" (comme par exemple Twitter Bootstrap).

Or dans le cas de nos sites, nous devons composer avec la base existante: une ligne graphique dont l'agencement global a été conçu en 2002, et des contenus de sites qui ont été saisis dès 2003, soit plusieurs années avant que l'on parle du responsive design, une notion apparue en 2011. Nous avions le choix entre:

  1. décider de ne rien changer à nos sites avant le prochain changement de la ligne graphique web UNIL, qui n'inerviendra pas dans l'immédiat
  2. ou décider de faire sans tarder une adaptation sommaire à l'affichage mobile de nos sites, afin de faciliter dès maintenant leur consultation par une catégorie d'utilisateurs qui croît rapidement.

C'est la 2ème voie que nous avons choisie.

Il est bien clair que la prochaine version de la ligne graphique web UNIL intégrera directement l'aspect mobile, et donnera par conséquent un résultat bien meilleur que la version actuelle.

Pourquoi fournir dès maintenant un affichage sur mobile pas encore optimisé ? N'aurait-il pas été préférable d'attendre de disposer d'une version plus aboutie ?

Comme nous l'expliquons au début de cette page, le passage à un affichage optimisé sur les mobiles est un travail de longue haleine, vu le nombre et l'ancienneté des sites à adapter. Or nous n'avons qu'un seul environnement de développement web pour nos sites Jahia, que nous utilisons pour plusieurs projets en parallèle. Par conséquent nous ne pouvons disposer que d'une seule version qui intègre tous les développements en cours simultanément. Et nous sommes donc contraints d'appliquer le principe du Release early, release often.

TOP ^

Questions/réponses sur les sites Jahia (pour éditeurs)

Est-il possible de "prévisualiser" la version mobile des pages que l'on édite ?

Non, car l'affichage mobile n'est disponible que sur le serveur de consultation (www.unil.ch) et non pas sur le serveur d'édition (editjahia.unil.ch), où il perturbait l'affichage de certaines fonctionnalités.

Certaines pages s'affichent de manière décevante dans la version mobile. Est-il possible d'améliorer cela ?

La manière de gérer la présentation des contenus a beaucoup évolué au fil du temps depuis les débuts de Jahia en 2003, notamment sur l'utilisation de tableaux, ou sur le positionnement des images par rapport au texte. Certaines options de mise en page sont bien adaptées à l'affichage sur mobile, et d'autres moins.

Nous préparons actuellement une liste de recommandations et de bonnes pratiques dans ce domaine. Vous pourrez ainsi vous y référer et appliquer ces techniques à vos contenus si vous voulez optimiser l'affichage sur mobile de votre site.

Quel pourcentage de visiteurs de nos sites y accèdent à partir d'un mobile ?

Nous serons bientôt en mesure de fournir quelques statistiques globales pour les sites de l'UNIL. Des statistiques nationales du printemps 2013 montraient déjà que la moitié des Suisses consultaient régulièrement des sites depuis leur mobile (source). Il est certain que cette proportion n'a pas diminué en 2015, bien au contraire.

TOP ^

Recherche:
 Go
 
rss/atom
Amphimax  -  CH-1015 Lausanne  -  Suisse  -  Tél. +41 21 692 22 11  -  Fax +41 21 692 22 05
Swiss University