Optimiser la conception pour le mobile qui n'est pas impacté sur le bureau ?

Pourquoi les changements sur mobile peuvent-ils affecter le bureau ?

GemPages fonctionne sur un principe de conception réactive. Cela signifie que les éléments de votre page s'adaptent automatiquement aux différentes tailles d'écran.

Lorsque vous déplacez ou redimensionnez un élément pour mobile, cela peut également modifier la disposition du bureau, car il s'agit du même élément dans le code.

Vous devez appliquer des techniques spécifiques pour isoler les conceptions de chaque appareil.

Techniques clés pour la personnalisation sur mobile uniquement

Pour concevoir des mises en page uniquement pour mobile sans casser le bureau, envisagez d'utiliser l'une des techniques suivantes dans GemPages, notamment :

• Paramètres de visibilité
• Options de mise en page réactives
• (Avancée) CSS personnalisé

1. Paramètres de visibilité

Cette fonctionnalité vous permet d'afficher ou masquer différents éléments/sections de votre boutique sur des appareils spécifiques (ordinateur de bureau ou mobile).

Exemple :

Vous créez deux sections, A et B. La section A est conçue spécifiquement pour les utilisateurs d'ordinateurs de bureau, tandis que la section B est optimisée pour les appareils mobiles. Vous pouvez configurer la section A pour qu'elle s'affiche uniquement sur les ordinateurs de bureau et la section B pour qu'elle s'affiche uniquement sur les appareils mobiles, en veillant à ce que chaque section soit adaptée à l'appareil concerné sans interférer avec l'autre.

Avantages :

• Il vous permet de créer des mises en page uniques optimisées pour chaque taille d'écran.
• Il est facile de personnaliser sans risquer d'affecter d'autres sections.

Limitations:

Le contenu de votre page est techniquement dupliqué. Bien que cela n'ait pas d'impact significatif sur la vitesse de chargement, il faut en être conscient.

Remarque : Il est préférable de limiter l'utilisation de cette technique à 1 ou 2 sections importantes (comme la section au-dessus du pli) qui nécessitent le plus de personnalisation pour chaque appareil.

Pour plus de détails sur l'affichage/masquage des éléments et des sections sur chaque appareil, reportez-vous à cet article.

2. Ajustements spécifiques aux éléments

GemPages vous permet ajuster l'apparence des éléments en fonction de la taille de l'écran.

Ces paramètres incluent des options permettant d'ajuster la taille de la police, l'alignement, les couleurs, les marges, le remplissage, les arrière-plans, etc.

Exemple :

Vous augmentez la taille de la police d'un titre sur les appareils mobiles pour une meilleure lisibilité, tout en conservant la version de bureau intacte.

Limitations:

Vous ne pouvez ajuster que l'apparence visuelle des éléments, pas leur position. 

Si vous déplacez un élément sur mobile, il se déplacera également sur la version de bureau puisque l'élément est toujours à la même position dans la mise en page globale.

3. Mises en page réactives

En utilisant les paramètres de colonne et de ligne de GemPages, vous pouvez basculer entre les dispositions horizontales pour les ordinateurs de bureau et les dispositions verticales pour les appareils mobiles. 

Cela permet de garantir une conception propre et organisée qui fonctionne bien sur n'importe quelle taille d'écran.

Exemple :

Vous configurez les colonnes pour qu'elles s'affichent côte à côte sur le bureau, mais vous les empilez verticalement sur mobile pour une navigation plus facile.

Avantages :

• Cette approche permet de créer facilement des mises en page qui s’affichent parfaitement sur les ordinateurs de bureau et les appareils mobiles.
• Vous pouvez réorganiser les colonnes dans les lignes, ce qui vous donne plus de flexibilité dans la conception.

Limitations:

Vous ne pouvez modifier que la position de colonnes entières, pas les éléments individuels à l'intérieur des colonnes.

4. Personnalisation avancée : utilisez CSS personnalisé pour mobile

Si vous avez une bonne connaissance du CSS, vous pouvez faire passer votre optimisation mobile au niveau supérieur en ajoutant du code CSS personnalisé. Cela vous permet d'affiner le style et l'apparence d'éléments spécifiques pour les appareils mobiles uniquement.

Exemple :

Vous pouvez écrire du CSS personnalisé pour modifier le style d'un bouton ou ajuster l'espacement des éléments exclusivement pour mobile.

Avantages :

Contrôle total sur le style de n'importe quel élément, vous permettant d'effectuer des ajustements très spécifiques.

Limitations:

Nécessite des connaissances en CSS. Sans cela, il peut être difficile d'implémenter efficacement les personnalisations.

Comment optimiser la conception pour le mobile uniquement ?

Pour optimiser efficacement votre conception, nous vous recommandons l'approche suivante :

• Commencez par le bureau

Commencez par concevoir votre mise en page pour ordinateur. La mise en page mobile héritera de la structure du contenu pour ordinateur ; commencer par là constitue donc une base solide.

• Ajuster les paramètres clés

Utilisez des ajustements spécifiques aux éléments et des techniques de mise en page réactives pour modifier la taille de la police, la couleur, les marges, le remplissage et l'alignement pour les appareils mobiles.

• Appliquer les paramètres de visibilité si nécessaire

Si vous avez besoin d'une mise en page mobile entièrement distincte de celle du bureau, pensez à utiliser Paramètres de visibilité pour créer des sections réservées aux mobiles.

Par exemple, voici un exemple étape par étape utilisant les paramètres de visibilité dans l'onglet Avancé :

Étape 1 : Passer à la vue mobile

Une fois la conception du bureau terminée, cliquez sur l'icône mobile dans la barre d'outils supérieure de GemPages pour prévisualiser l'apparence de votre page sur mobile.

Étape 2 : Dupliquer la section

Cliquez avec le bouton droit sur la section que vous souhaitez personnaliser pour mobile et sélectionnez «Dupliquer. »

• La section originale sera utilisée pour l'optimisation mobile (Section A).
• La section dupliquée sera réservée au bureau uniquement (Section B).

Étape 3: Définissez un élément pour qu'il soit visible sur mobile et l'autre sur ordinateur. Cela vous permet d'appliquer des styles uniques à chacun.

Étape 4 : In le panneau des paramètres sur la gauche, ajustez la taille de la police, l'espacement et d'autres attributs pour la version mobile.

Cela garantit que l'élément est optimisé pour les écrans plus petits sans affecter la conception du bureau.

Questions fréquentes

1. Comment modifier une page pour mobile uniquement dans GemPages ?

Utilisez le bouton d'affichage mobile dans la barre d'outils supérieure pour passer à l'aperçu mobile. Ensuite :

• Ajustez la taille de la police, le remplissage, la marge, etc. pour les appareils mobiles à l'aide de paramètres spécifiques aux éléments.
• Utilisez les paramètres de visibilité pour afficher/masquer des sections sur mobile ou sur ordinateur si vous avez besoin de conceptions distinctes.

2. Pourquoi les modifications que j'effectue sur mobile affectent-elles également la disposition du bureau ?

GemPages adopte une structure responsive design, ce qui signifie que les éléments partagent la même position sur tous les appareils. Pour isoler les modifications mobiles, utilisez les paramètres de visibilité pour dupliquer la section et personnaliser chaque version séparément.

3. Quelle est la meilleure façon de donner à une section une apparence différente sur mobile ?

Il existe deux options recommandées :

• Ajustez les paramètres de style (taille de police, remplissage, marge, alignement) directement dans la vue mobile
• Utilisez les paramètres de visibilité pour créer des versions mobiles uniquement de sections clés telles que Hero ou CTA

4. Puis-je appliquer des images d'arrière-plan différentes pour mobile et ordinateur de bureau ?

Oui. Dupliquez la section et utilisez les paramètres de visibilité pour afficher une version mobile et une autre pour ordinateur. Vous pouvez ensuite définir des images d'arrière-plan différentes pour chaque version.