ShipPress

Tutoriels

Vérifiez votre site sur Computer, Laptop, Tablet et Phone

La plupart de vos visiteurs verront votre site sur un téléphone, et non sur le grand écran où vous le construisez. L'aperçu de ShipPress peut afficher votre site en quatre largeurs, en un clic. Dans ce tutoriel, je vérifie Pier 7 Coffee sur les quatre tailles, je trouve un petit problème dans le menu sur téléphone et je demande à l'IA de le corriger.

Par Oberon Lai. Je crée ShipPress (Codotx, LLC) : c'est donc notre propre produit. Cette page ne contient aucun lien d'affiliation.

  1. Repérez les quatre tailles dans la barre d'aperçu

    Ouvrez votre site. En haut à droite de l'aperçu, vous trouverez quatre boutons : Computer, Laptop, Tablet et Phone. Survolez-en un pour voir sa largeur :

    • Computer : 1920 px, un grand écran de bureau.
    • Laptop : 1280 px.
    • Tablet : 1024 px.
    • Phone : 480 px.

    La page est affichée à cette largeur réelle. Si elle ne tient pas dans votre fenêtre, ShipPress la réduit pour qu'elle s'y adapte : vous voyez donc toujours toute la largeur. ShipPress se souvient de la taille que vous avez choisie pour chaque site.

    Fenêtre ShipPress avec les boutons Computer, Laptop, Tablet et Phone mis en évidence en haut à droite de l'aperçu.
    Les quatre tailles se trouvent en haut à droite de l'aperçu. Ici, Computer est activé.

  2. Laptop : la taille la plus courante pour les visiteurs sur ordinateur

    Cliquez sur Laptop. Beaucoup de gens naviguent sur un ordinateur portable de 13 ou 14 pouces : c'est donc une bonne vérification de tous les jours. Regardez le menu en haut et les grands titres : sur Pier 7 Coffee, la mise en page reste la même, juste un peu plus resserrée, et le menu tient toujours sur une seule ligne.

    Page d'accueil de Pier 7 Coffee en taille Laptop (1280 px).
    Laptop (1280 px) : même mise en page, un peu plus resserrée.

  3. Tablet : vérifiez les rangées de colonnes et les images larges

    Cliquez sur Tablet. C'est ici que les rangées de trois ou quatre colonnes, les menus longs et les photos larges commencent à être à l'étroit. Faites défiler toute la page, pas seulement le haut : ce sont les sections plus bas que le texte se comprime ou qu'une image est coupée en premier.

    Page d'accueil de Pier 7 Coffee en taille Tablet (1024 px).
    Tablet (1024 px) : le menu tient toujours, la photo est recadrée plus serré.

  4. Phone : ouvrez le menu et parcourez chaque page

    Cliquez sur Phone. Votre site ressemble maintenant à ce que verront la plupart de vos visiteurs. Sur Pier 7 Coffee, le menu du haut devient un bouton MENU, et la photo et le titre s'empilent l'un sur l'autre.

    Ne vous arrêtez pas à la page d'accueil. Utilisez le menu des pages en haut à gauche de l'aperçu (il affiche la page où vous êtes, par exemple Home page) pour aller sur vos autres pages, et sur chacune d'elles :

    • ouvrez le menu, puis refermez-le,
    • faites défiler jusqu'en bas,
    • vérifiez que les prix, les tableaux et les boutons sont faciles à lire et à toucher.
    Page d'accueil de Pier 7 Coffee en taille Phone (480 px), avec un bouton MENU en haut.
    Phone (480 px) : le menu devient un bouton MENU et le contenu s'empile.
    Page Bar Menu en taille Phone : noms des boissons, prix et descriptions dans une seule colonne lisible.
    La page Bar Menu sur un téléphone : la liste des prix se lit bien dans une seule colonne.

  5. Repérez ce qui cloche

    Les petits problèmes passent facilement inaperçus sur un grand écran. Quand j'ai ouvert le menu en taille Phone, son coin supérieur droit affichait deux boutons de fermeture : un grand × et un minuscule × en trop. Cela fonctionne quand même, mais ça fait inachevé, et on ne le voit que sur un téléphone.

    Menu sur téléphone avant et après : à gauche, deux boutons de fermeture dans le coin supérieur droit ; à droite, un seul.
    À gauche : le menu sur téléphone avec deux boutons de fermeture. À droite : après la correction de l'étape suivante.

  6. Dites à l'IA ce que vous voyez, et sur quelle taille

    Décrivez le problème dans le chat avec des mots simples et indiquez sur quelle taille il apparaît. Précisez aussi ce qui doit rester tel quel. J'ai écrit :

    « Sur téléphone, quand j'ouvre le menu, il y a deux boutons de fermeture (x) dans le coin supérieur droit. Gardez-en un seul, et laissez la mise en page sur ordinateur telle qu'elle est. »

    Pendant que le Worker travaille, l'aperçu affiche The AI is changing your site…. Vous pouvez continuer à écrire ; les nouveaux messages passent ensuite. Au bout d'une minute ou deux, le Worker a expliqué ce qu'il avait trouvé (le thème dessinait un deuxième × par-dessus l'icône propre au menu), a supprimé le × en trop et a indiqué que la modification n'affecte que le menu ouvert sur téléphone.

    Chat ShipPress avec la demande concernant les deux boutons de fermeture pendant que l'IA travaille, aperçu en taille Phone.
    La demande dans le chat. L'aperçu reste sur Phone pendant que l'IA travaille.
    La réponse du Worker : il a supprimé le bouton de fermeture en trop et n'a modifié que le style du menu ouvert sur téléphone.
    La réponse du Worker, avec des suggestions pour la suite.

  7. Vérifiez à nouveau sur Phone, puis sur Computer

    L'IA ne peut pas toujours regarder l'écran elle-même : vérifiez donc le résultat vous-même. Restez sur Phone et rouvrez le menu : il n'y a maintenant qu'un seul bouton de fermeture (le côté droit de l'image avant/après ci-dessus). Cliquez ensuite sur Computer et assurez-vous que le grand écran est resté identique. Si une modification ne vous plaît pas, ouvrez History en haut et revenez à la version précédente.

    Page Bar Menu de retour en taille Computer après la correction, identique à avant.
    De retour sur Computer : la mise en page pour ordinateur n'a pas changé.

  8. Astuces

    • Vérifiez chaque page sur Phone avant de passer en Go live, et à nouveau après de gros changements, comme un nouveau design.
    • Indiquez la taille dans votre message (« sur téléphone », « sur tablette »), afin que l'IA ne modifie que cette taille.
    • Pour essayer le site dans une vraie fenêtre de navigateur, utilisez Open in browser en haut à droite de l'aperçu. Pour le voir sur votre propre téléphone, utilisez Share to phone.
    • Si tout va bien sur Phone mais que quelque chose cloche sur Tablet, dites-le : les tailles intermédiaires sont celles que les designs réussissent le moins souvent.