Quelques mots concernant la navigation. Aujourd'hui il n'est plus possible de faire un site internet sans tenir compte des différents supports de lecture (smartphone, tablette, PC...). Et même si le site reflet du web a été conçu de manière ultra simplissime (un bandeau, un menu, du texte, on l'a fait exprès pour notre démonstration!) il n'empêche que le rendu lisible sur le plus petit support des smartphones impose un travail d'adaptation en fonction des options que l'on se fixe au départ. Et c'est l'objet de ce commentaire que de vous présenter ces choix et pourquoi nous avons fait ceux-là et pas d'autres.
Tout d'abord, pour notre démonstration, on suppose que vous êtes sur votre ordinateur de bureau.
- 1) En ce qui concerne le bandeau. Comme vous l'imaginez, il est déjà impossible de mettre un bandeau de 750 pixels sous forme d'image ou d'animation (comme c'est notre cas) dans un téléphone qui fait 300/400 pixels de largeur en moyenne.
- 2) Ensuite, il est, où il était, il n'y a encore pas si longtemps, encore plus difficile de faire fonctionner sur un smartphone le format d'animation que nous avons choisi car les mobiles ne le lisaient pas où ne le lisaient plus. Cela n'est heureusement plus le cas aujourd'hui.
- 3) Ensuite, en raison du poids de l'élément en kilo-octets, on ne peut pas installer des images ou des animations sur un téléphone qui vont mettre un temps infini à charger. Il faut que ce soit léger.
Cela fait trois obstacles à surmonter dans le bandeau.
Ensuite, le menu. Il est simple mais on le voulait tel qu'il est réalisé avec des petits ombrages pour la police de caractère et on ne voulait faire aucune concession à la source pour qu'il soit facilement adaptable sur le smartphone. Au passage, c'est avec ce type de contraintes à la source que l'on voit si souvent pulluler des sites qui sont uniformes (certains disent minimalistes) et qui se ressemblent tous.
Les solutions :
Le bandeau :- En ce qui concerne le bandeau, nous avons décidé de le faire disparaître dans sa forme actuelle, de le découper en deux, d'en faire deux animations distinctes avec un format différent, d'un poids honorable pour le smartphone et disposé verticalement plutôt qu'horizontalement.
- Même destin que pour le bandeau. Nous avons décidé de le faire disparaître également mais avec une solution qui permette de garder le style de police adopté au départ. Nous l'avons donc remplacé par un menu qui est caché en dessous du téléphone et qui, de cette façon, ne prend aucune place dans l'espace déjà très étroit qu'il nous reste pour gérer le contenu de la page. Un certain nombre de gens gardent leur menu en passant d'un statut horizontal à un statut vertical. C'est une question de choix mais à notre sens si le menu vertical commence par manger tout l'écran cela ne facilite pas la consultation. L'espace est précieux. C'est là que vient à notre secours le petit hamburger que vous voyez dans le coin gauche. Il est inutile dans la lecture sur ordinateur mais une solution géniale pour le smartphone. De cette façon, le premier menu a disparu mais il est relayé par le menu caché sous le premier écran et on y a accès par le bouton du hamburger.
Dernière étape :
- Le passage de la disposition ordinateur à la disposition smartphone. C'est le travail du navigateur à condition de lui fournir les bonnes instructions. C'est-à-dire décider à partir de quelle taille on déclenche le changement pour se retrouver dans la disposition smartphone. Là encore, il y a des choix à faire. Sachant que même avec un petit écran (comme une tablette) tous les menus horizontaux devraient arriver à tenir dans leur longueur, il ne restait plus qu'à gérer le format smartphone un peu étendu compte tenu des appareils de plus en plus grands. Nous avons retenu comme valeur de changement le seuil de 500 pixels. C'est-à-dire que nous avons précisé au navigateur qu'en dessous d'une fenêtre de 500 pixels, il faut procéder au remaniement de la disposition (en termes techniques, cela s'appelle "déterminer le point de rupture"). On aurait pu opter pour des valeurs propres pour le menu et pour le bandeau mais compte tenu des raisons que l'on a expliqué, nous les avons réglé pour migrer ensemble.
Travaux pratiques
- Maintenant, passons aux travaux pratiques. Vous allez pointer votre curseur de souris sur le bord droit de votre fenêtre, et quand vous aurez la petite flèche dans les deux sens qui vous indiquera que vous pouvez vous servir de votre souris pour procéder à la réduction, vous vous lancez tout doucement à tirer la fenêtre sur la gauche de manière à bien voir ce qui se passe. Et là, comme disent les enfants, "magie, magie", vous vous retrouvez à 500 pixels exactement avec une fenêtre tout en hauteur de 4 à 5 cm environ et sur laquelle sont sauvegardées vos deux animations verticales pour rappeler l'esprit de conception initiale ainsi que le texte qui s'est adapté dans la foulée (c'est en restant dans ce petit format que vous pourrez recourir au menu par le hamburger). C'est ce que l'on appelle dans le jargon de développeur une page (un site) "responsive" puisque ce problème de formats a été tellement important qu'il a donné lieu à une véritable branche de design qui s'appelle le "responsive design".
Comme vous le constatez, et ce sera le mot de la fin, la simplicité de la page de reflet du web est tout apparente car pour répondre aux impératifs de "responsive design", elle a nécessité tout un travail dans les coulisses du site où cela a à s'exprimer en codage informatique "responsive".