Comment optimiser un site web pour les appareils mobiles ?

Définir l'affichage de la page sur différents appareils dans la zone de visualisation
Tilda-Les mises en page des sites web sont automatiquement adaptées aux tablettes, aux smartphones, aux netbooks, aux ordinateurs portables et aux ordinateurs de bureau.
Vous pouvez également modifier la taille des encadrements pour les mobiles, ajuster la visibilité des blocs pour différents appareils, concevoir votre propre mise en page réactive à l'aide de l'éditeur Tilda's Zero Block , ou désactiver le mode adaptatif du site web pour les mobiles.
Ссылки :

Réglage de la visibilité des blocs
Comment concevoir différentes versions d'un bloc sur mobile et sur ordinateur de bureau.
Lire la suite

Ajustement des encadrements pour les mobiles
Comment modifier la taille des intercalaires pour les versions mobiles ?
En savoir plus

Votre propre version de site web responsive
Comment concevoir votre propre version mobile en utilisant l'éditeur Zero Block
En savoir plus

Désactiver le mode adaptatif du site web
Comment désactiver la version adaptative du site web pour différentes résolutions d'écran ?
En savoir plus
Bloquer la visibilité sur Différents dispositifs

Zone visible/Visibilité des blocs est un paramètre qui détermine quels blocs peuvent ou ne peuvent pas être affichés sur certains types de dispositifs. 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 apparaît bien sur un ordinateur de bureau, mais moins bien sur un appareil mobile, vous pouvez régler la visibilité du bloc sur 980 px ou plus. De cette manière, le bloc sera orienté vers l'ordinateur de bureau et n'apparaîtra pas sur les appareils mobiles. (русская версия отличается - Si un bloc spécifique (tel qu'une section de héros) est bien présenté)


Ensuite, copiez le bloc et optimisez-le pour l'affichage sur mobile en ajustant ses paramètres (ce qui peut impliquer de changer l'image), police de caractères, etc.) Réglez la visibilité du bloc sur "0-980px". Vous obtiendrez ainsi une version mobile du bloc. taille de la police ???

En fin de compte, 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 n'apparaisse pas 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. (русская версия отличается - есть уточнение, что это именно gamme, c'est-à-dire différentes valeurs pour les paramètres - и дублируется)

Il n'est pas nécessaire de modifier la visibilité de tous les blocs. Vous pouvez le faire uniquement pour les blocs dont la photo est mal découpée ou si le bloc que vous avez sélectionné n'est pas adapté à la version mobile.
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. Maintenant, nous allons l'ajuster pour qu'elle soit également belle sur les appareils mobiles. (русская версия отличается)

Regardez à quoi ressemble la version mobile du site web. Comme nous le voyons, la couverture/photo 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 ! Désormais, la section couverture/héros s'affiche 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

(отличается порядок версий)

Ajustement des cadrages pour les mobiles
Dans n'importe quel bloc, ouvrez l'onglet Paramètres, cliquez sur l'icône près des options "Remplissage supérieur" et "Remplissage inférieur", et spécifiez les remplissages pour un appareil mobile.
Ajuster le Responsive Design en Zero Block

Vous pouvez ajuster le bloc pour qu'il soit adapté à différents appareils en le convertissant en Zero Block à l'aide d'une option dans l'onglet Paramètres du bloc. Cette option est disponible dans la plupart des blocs maintenant/en ce moment (уточняется, что это сейчас пока что в доступе или что уже есть ???)

Une fois le bloc converti, vous pouvez ajuster manuellement son apparence pour cinq types d'écran en fonction de la plage de largeur. Pour en savoir plus sur la manière d'ajuster le responsive design sur Zero Block , consultez la rubrique "Zero Block: Comment créer un bloc personnalisé" et "Zero Block: Responsive Design" articles.
Désactiver le mode adaptatif du site web
Si vous désactivez le mode adaptatif, la page s'affichera sur un téléphone portable comme sur un ordinateur de bureau. Pour ce faire, vous devez cocher la case "Désactiver l'affichage mobile" dans le menu Paramètres de la page → Additionnels, et republier la page.
La version du site web adaptée aux appareils mobiles se trouve à gauche, et le site web dont le mode adaptatif est désactivé se trouve à droite.
Fabriqué le
Tilda