Comment optimiser un site web pour qu'il puisse être consulté sur des appareils mobiles ?
Définir l'affichage de la page sur différents appareils dans la zone de visualisation
La zone visible est un paramètre qui détermine quels blocs peuvent ou ne peuvent pas être affichés sur certains types d'appareils. Vous pouvez ajuster ce paramètre dans le panneau Paramètres de n'importe quel bloc.
Pourquoi vous pouvez en avoir besoin et comment cela fonctionne
Si un bloc est bien visible sur un ordinateur de bureau mais pas sur un appareil mobile, vous pouvez régler la visibilité du bloc sur 980px ou plus. De cette manière, le bloc sera orienté vers l'ordinateur de bureau et n'apparaîtra pas sur les appareils mobiles.
Ensuite, copiez le bloc et optimisez-le pour l'affichage sur mobile en ajustant ses paramètres (ce qui peut impliquer de modifier l'image, la police, etc.). Réglez la visibilité du bloc sur "0-980px". Vous obtiendrez ainsi une version mobile du bloc.
Au final, les personnes qui accèdent à votre site web à partir d'un ordinateur 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 que vous pouvez ajuster pour que le bloc apparaisse ou non sur les appareils ayant une résolution d'écran particulière. Par exemple, certains blocs ne s'affichent pas bien sur les tablettes et d'autres sur les téléphones portables.
Si un bloc est bien visible sur un ordinateur de bureau mais pas sur un appareil mobile, vous pouvez régler la visibilité du bloc sur 980px ou plus. De cette manière, le bloc sera orienté vers l'ordinateur de bureau et n'apparaîtra pas sur les appareils mobiles.
Ensuite, copiez le bloc et optimisez-le pour l'affichage sur mobile en ajustant ses paramètres (ce qui peut impliquer de modifier l'image, la police, etc.). Réglez la visibilité du bloc sur "0-980px". Vous obtiendrez ainsi une version mobile du bloc.
Au final, les personnes qui accèdent à votre site web à partir d'un ordinateur 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 que vous pouvez ajuster pour que le bloc apparaisse ou non sur les appareils ayant une résolution d'écran particulière. Par exemple, certains blocs ne s'affichent pas bien sur les tablettes et d'autres sur les téléphones portables.
Exemple
Nous avons une couverture qui a fière allure sur un ordinateur de bureau, avec le texte aligné à gauche et l'objet principal à droite. Nous allons maintenant l'ajuster pour qu'elle soit également belle sur les appareils mobiles.
Comme nous le voyons, la couverture est recadrée sur mobile et n'est pas très belle.
Pour éviter qu'il n'apparaisse sur les appareils mobiles, accédez au panneau Paramètres du bloc de couverture et réglez la visibilité du bloc sur "> 980px". Désormais, les utilisateurs d'appareils mobiles ne le verront plus.
Copier 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 dont la largeur d'écran est supérieure à 980px.
C'est fait ! La couverture s'affiche désormais différemment en fonction de 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
