Comment optimiser un site Web pour l’affichage sur des appareils mobiles
Configurer l’affichage de la page sur différents appareils dans la zone d’affichage
La zone visible est un paramètre qui détermine quels blocs peuvent ou non être affichés sur certains types d'appareils. Vous pouvez régler ce paramètre dans le panneau Paramètres de n'importe quel bloc.
Pourquoi vous pourriez en avoir besoin et comment cela fonctionne
Si un bloc semble bon sur ordinateur mais pas aussi bon sur mobile, vous pouvez définir la visibilité du bloc sur 980px ou plus. De cette façon, le bloc deviendra orienté bureau et n’apparaîtra pas sur les appareils mobiles.
Après cela, copiez le bloc et optimisez-le pour l’affichage sur mobile en ajustant ses paramètres (ce qui peut impliquer de changer l’image, la police, etc.). Réglez la visibilité du bloc sur « 0-980px ». En conséquence, vous obtiendrez une version mobile du bloc.
En fin de compte, ceux qui accèdent à votre site Web à partir d’un PC verront la version de bureau et les utilisateurs mobiles la version mobile.
La visibilité du bloc est un paramètre que vous pouvez trouver dans le panneau Paramètres de n’importe quel bloc et ajuster pour que le bloc apparaisse ou non sur les appareils avec une résolution d’écran particulière. Par exemple, certains blocs n’ont pas l’air bien sur les tablettes et d’autres sur les téléphones mobiles.
Si un bloc semble bon sur ordinateur mais pas aussi bon sur mobile, vous pouvez définir la visibilité du bloc sur 980px ou plus. De cette façon, le bloc deviendra orienté bureau et n’apparaîtra pas sur les appareils mobiles.
Après cela, copiez le bloc et optimisez-le pour l’affichage sur mobile en ajustant ses paramètres (ce qui peut impliquer de changer l’image, la police, etc.). Réglez la visibilité du bloc sur « 0-980px ». En conséquence, vous obtiendrez une version mobile du bloc.
En fin de compte, ceux qui accèdent à votre site Web à partir d’un PC verront la version de bureau et les utilisateurs mobiles la version mobile.
La visibilité du bloc est un paramètre que vous pouvez trouver dans le panneau Paramètres de n’importe quel bloc et ajuster pour que le bloc apparaisse ou non sur les appareils avec une résolution d’écran particulière. Par exemple, certains blocs n’ont pas l’air bien sur les tablettes et d’autres sur les téléphones mobiles.
Exemple
Nous avons une couverture qui a fière allure sur le bureau, le texte aligné à gauche et l'objet principal à droite. Maintenant, ajustons-le pour qu'il soit également beau sur les appareils mobiles.
Comme on le voit, la couverture est recadrée sur mobile et n'a pas l'air très bien.
Pour l’empêcher d’apparaître sur les appareils mobiles, accédez au panneau Paramètres du bloc de couverture et définissez la visibilité du bloc sur « > 980px ». Maintenant, les utilisateurs mobiles ne le verront plus.
Copiez le bloc.
Ajustez le bloc pour la version mobile : modifiez l’alignement de la photo et du texte.
Maintenant que nous avons défini la visibilité du bloc sur « ≤ 980px », il n’apparaîtra pas sur les appareils avec des écrans plus larges que 980px.
Fait! Maintenant, la couverture s'affiche différemment selon la largeur de l'écran.
Exemples de largeur d'écran pour différents appareils :
iPhone5: 320px
iPhone6: 375px
iPhone6+: 414px
iPad: 1024px
Samsung Galaxy: 360px
Nokia Lumia: 320px
iPhone6: 375px
iPhone6+: 414px
iPad: 1024px
Samsung Galaxy: 360px
Nokia Lumia: 320px
