Une page mobile est une deuxième copie, étroite, d'une page, conçue uniquement pour les téléphones. Vous la créez avec une largeur de 480 pixels, puis vous reliez votre page pour ordinateur à cette page. Quand quelqu'un ouvre la page pour ordinateur sur un téléphone, EverWeb l'envoie automatiquement vers la page mobile. Votre conception pour ordinateur reste exactement telle qu'elle est.
Dans quels cas l'utiliser
- Une maison d'hôtes a créé son site Web dans iWeb et aime son apparence. Elle veut que les visiteurs sur téléphone voient les tarifs et un bouton Book (réserver) sans avoir à zoomer.
- Un plombier veut une version téléphone de sa page d'accueil tenant sur un seul écran : numéro de téléphone, zone d'intervention et formulaire de contact.
- Une chorale veut que les dates de ses concerts soient lisibles sur un téléphone, tandis que les pages complètes pour ordinateur restent telles quelles.
Page mobile ou page adaptative ?
Utilisez des pages mobiles si votre site Web est en Mise en page centrée et que sa conception vous plaît. Si vous repartez de zéro ou si vous avez beaucoup de pages, les pages Adaptatif ne demandent qu'une seule conception par page. Consultez Dois-je refaire le design de mon site Web EverWeb pour les appareils mobiles ?
Pour vérifier le type de votre page, sélectionnez une page et allez dans Inspecteur > Paramètres de page > Mise en page. Elle doit indiquer Mise en page centrée. Ne changez pas la Mise en page d'une page existante : cela peut réorganiser votre conception, et vous ne pouvez pas annuler ce changement.
1. Ajouter la page mobile
- Cliquez sur Ajouter une page dans la barre d'outils.
- Dans le sélecteur de modèles de thème (Theme Template Chooser), utilisez le menu de filtre pour n'afficher que les modèles Largeur fixe, choisissez votre thème et sélectionnez son style de page Mobile. Cliquez sur Sélectionner.
- Renommez-la pour pouvoir la reconnaître, par exemple Accueil Mobile.
Votre thème n'a pas de style Mobile ? Ajoutez n'importe quelle page en Mise en page centrée et réglez Largeur du contenu : sur 480 dans Inspecteur > Paramètres de page > Mise en page.
Si vos pages utilisent un Modèle maître, donnez à vos pages mobiles leur propre Modèle maître de 480 pixels de large. Une page prend la largeur de son Modèle maître. Consultez Placer le même en-tête, le même menu et le même pied de page sur toutes les pages avec une page maîtresse.
2. La configurer comme page pour téléphone
La page mobile étant sélectionnée, allez dans Inspecteur > Paramètres de page :
- Dans Paramètres mobiles, laissez Page mobile sur Aucun et cochez Cette page est réservée aux appareils mobiles. Cela indique aux moteurs de recherche qu'il s'agit de la version téléphone de votre page pour ordinateur, et non d'un doublon.
- Décochez Inclure la page dans le menu de navigation, pour que la page mobile n'apparaisse pas dans votre menu pour ordinateur.
3. Ajouter votre contenu
Copiez depuis la page pour ordinateur ce dont les visiteurs sur téléphone ont besoin (Édition > Copier, puis Édition > Coller sur la page mobile), et empilez-le sur une seule colonne.
- À garder : votre logo, votre numéro de téléphone, votre adresse, vos horaires d'ouverture, la photo principale et les boutons pour lesquels les gens viennent.
- À simplifier : les colonnes côte à côte, les tableaux larges, les longs textes et les images décoratives.
- Placez chaque paragraphe dans sa propre Zone de texte. Une seule grande Zone de texte fait que le texte se resserre ou se chevauche sur un téléphone.
- Rendez les boutons assez grands pour être touchés, et le texte plus grand que sur votre page pour ordinateur.
Le menu : ajoutez une Barre de navigation, allez dans Inspecteur > Réglages des widgets et cochez Barre de navigation réactive sous Options réactives. Sur une page de 480 pixels, elle s'affiche sous la forme d'un bouton de menu (trois lignes). Elle répertorie vos pages pour ordinateur : quand un visiteur sur téléphone en touche une, cette page l'envoie vers sa propre page mobile, si elle en a une.
4. Relier la page pour ordinateur à la page mobile
- Sélectionnez la page pour ordinateur.
- Allez dans Inspecteur > Paramètres de page > Paramètres mobiles.
- Réglez Page mobile sur Une de mes pages, puis choisissez la page mobile dans Page.
Répétez les étapes 1 à 4 pour chaque page que vous voulez sur les téléphones. Les pages sans page mobile s'ouvrent toujours à la largeur ordinateur sur un téléphone.
5. Tester, puis publier
- Cliquez sur Aperçu dans la barre d'outils, choisissez Preview QR Code (aperçu par code QR) et scannez le code avec l'appareil photo de votre téléphone. Votre téléphone et votre ordinateur doivent être sur le même réseau Wi-Fi. Ouvrez la page pour ordinateur : elle doit basculer vers la page mobile.
- Allez dans Fichier > Publier le site entier.
- Vérifiez sur votre téléphone, dans une fenêtre de navigation privée.
Seuls les écrans de moins de 700 pixels de large, c'est-à-dire les téléphones, sont envoyés vers la page mobile. Les tablettes et les ordinateurs voient la page pour ordinateur.
Pages protégées par mot de passe
Simple Password protège des répertoires. Gardez chaque page et sa page mobile du même côté : les pages mobiles des pages publiques en dehors du répertoire protégé, et les pages mobiles des pages protégées à l'intérieur. Sinon, les visiteurs sur téléphone se voient demander un mot de passe sur une page publique. Consultez Puis-je protéger mon site Web par un mot de passe ? Simple Password et Membership Sites
Deux pages à tenir à jour
Chaque modification d'une page pour ordinateur, comme de nouveaux tarifs ou de nouvelles dates, doit aussi être faite sur sa page mobile. Si cela devient trop lourd, envisagez des pages adaptatives.
Problèmes fréquents
| Ce que vous voyez | Ce qu'il faut faire |
|---|---|
| Un téléphone affiche toujours la page pour ordinateur | Vérifiez que les Paramètres mobiles de cette page renvoient vers la bonne page mobile, publiez, puis vérifiez dans une fenêtre de navigation privée |
| Un téléphone demande un mot de passe | La page mobile se trouve dans un répertoire protégé. Sortez-la de ce répertoire, ou faites pointer la page pour ordinateur ailleurs |
| Un iPad affiche la page pour ordinateur | C'est le fonctionnement prévu : seuls les téléphones sont envoyés vers la page mobile |
| Un élément apparaît sur toutes les pages mobiles | Il se trouve sur le Modèle maître mobile. Modifiez-le ou supprimez-le à cet endroit |
| Le texte se chevauche ou se resserre | Placez chaque paragraphe dans sa propre Zone de texte. Taille de Police Minimum est destinée aux pages adaptatives : laissez-la donc à 0 ici |
Articles associés
- Mon site Web s'affiche mal sur un téléphone : comment fonctionne le mobile dans EverWeb
- Dois-je refaire le design de mon site Web EverWeb pour les appareils mobiles ?
- Mon site Web s'affiche bien sur mon ordinateur, mais il est coupé ou désordonné sur mon téléphone
- Créer une page adaptative avec des conteneurs pour qu'elle s'empile proprement sur un téléphone
- Puis-je protéger mon site Web par un mot de passe ? Simple Password et Membership Sites