Les tutoriels précédents vous ont fait parcourir l'ensemble du processus : construire un site pour ordinateur, puis optimiser ses fonctionnalités.
Mais un site ne se pense pas seulement pour l'écran d'un ordinateur : le mobile est lui aussi incontournable.
Nous allons donc essayer ensemble :
01
Le rendu de la version actuelle
Il faut d'abord savoir comment prévisualiser l'affichage mobile d'un site dans Google AI Studio.
Cliquez sur le logo carré à quatre coins, tout à droite sur l'image, pour afficher la page telle qu'elle apparaît sur l'appareil en cours.
Appuyez ensuite sur la touche F12 du clavier pour faire apparaître l'interface ci-dessous.
Vous pouvez y choisir les dimensions de différents téléphones ou tablettes pour prévisualiser le rendu mobile du site.
Comme le montre l'image, Google AI Studio a déjà discrètement adapté le site au mobile.
Mais sans débogage humain guidé, la version mobile ne parvient toujours pas à afficher sur une seule page toutes les fonctions indispensables.
Les problèmes actuels
Le panneau de sélection des caractères et le panneau d'affichage des caractères ne peuvent pas être entièrement visibles en même temps, ce qui rend l'expérience très fragmentée.
02
Optimiser l'affichage mobile en une phrase
Je lui ai donc précisé une nouvelle fois :
« Sans modifier l'interface ni les fonctionnalités actuelles de la version bureau, adapte cette page au mobile. »
Très vite, il a produit une bien meilleure adaptation : toutes les fonctions de chaque section sont désormais accessibles sur une même page.
Il n'y a pour l'instant que trois sections. Avec cinq ou six, vous pouvez ajouter un bouton de menu et y regrouper les différentes sections.
Cela garde une mise en page claire et facilite l'usage du site : plusieurs avantages d'un seul coup.
Pour d'autres astuces d'adaptation au mobile, interrogez directement l'IA dans la fenêtre de chat.
