Tailles d'écran et appareils

Les points de rupture (breakpoints, aussi appelés tailles d'écran) sont des plages de pixels qui correspondent à la largeur des différents appareils : ordinateur, tablette et mobile. Lorsque la largeur d'un appareil se situe dans la plage d'un point de rupture, la mise en page du site s'ajuste pour optimiser le contenu et le design selon la taille et l'orientation de l'appareil. Par exemple, sur ordinateur, le visiteur voit le menu complet du site, tandis que sur mobile, il voit un menu hamburger à la place.

Voici les points de rupture proposés par l'éditeur :

• Desktop (1025 px à 1399 px). C'est le point de rupture par défaut.
• Wide desktop (1400 px et plus). Disponible uniquement en flex mode dans Classic Editor.
• Tablet (768 px à 1024 px)
• Mobile (767 px et moins). Nous recommandons toujours de vérifier les changements du point de rupture mobile sur un véritable appareil mobile, plutôt qu'en redimensionnant un écran d'ordinateur.
• Mobile landscape (468 px à 767 px). Disponible uniquement en flex mode dans Classic Editor.

Lorsque vous modifiez le design, la mise en page ou le contenu du point de rupture desktop par défaut, les changements s'appliquent automatiquement aux autres points de rupture. Une modification de contenu (ajout d'un widget, modification de texte, ajout ou suppression d'une section) s'applique automatiquement à tous les autres points de rupture, quel que soit celui sur lequel vous l'avez effectuée. Par exemple, si vous ajoutez un widget sur le point de rupture tablette, il apparaîtra aussi sur tous les autres.

En revanche, si vous modifiez la position ou la taille d'un élément sur un point de rupture précis, le changement ne s'applique pas aux autres. Par exemple, si vous modifiez la taille d'un élément sur le point de rupture mobile, le changement ne concernera que les points de rupture mobile et mobile landscape, et aucun autre.

Remplacements par taille d'écran (Flex Mode et Editor 2.0)

Remarque : Ce contenu s'applique à la fois au flex mode dans Classic Editor et à Editor 2.0.

Il arrive que vous ayez besoin de remplacer les réglages d'un point de rupture. Par exemple, sur le point de rupture principal, une image se trouve à droite d'un paragraphe, mais sur mobile, vous voulez l'image en haut et le paragraphe en dessous.

Voici les modifications que vous pouvez apporter à un élément pour remplacer le point de rupture principal :

• Alignement
• Position
• Taille
• Espacement

Une fois qu'un point de rupture est remplacé, vous ne pouvez plus annuler ce changement en modifiant le style du même objet sur le point de rupture principal.

Masquer sur une certaine taille d'écran (Flex Mode et Editor 2.0)

Remarque : Ce contenu s'applique à la fois au flex mode dans Classic Editor et à Editor 2.0.

Vous pouvez masquer certains éléments sur des points de rupture précis depuis le panneau Calques ou depuis le menu flottant de l'élément. Par exemple, vous pouvez masquer une image sur mobile sans que cela affecte les autres points de rupture.

Remarque : Si vous masquez un élément qui contient d'autres éléments imbriqués, ces derniers seront également masqués sur ce point de rupture. Par exemple, si vous masquez une flex column, les widgets qu'elle contient seront aussi masqués.

Pour masquer un élément sur un point de rupture précis :

1. Passez au point de rupture concerné en cliquant sur la vue correspondante dans la barre de navigation supérieure.
2. Cliquez sur l'élément à masquer.
3. Cliquez sur l'icône à trois points horizontaux du menu flottant, puis sélectionnez l'option pour le masquer à ce point de rupture. Vous pouvez aussi utiliser la même option à côté de l'élément dans le panneau Calques.

Masquer sur une certaine taille d'écran (Classic Editor)

Presque tout dans l'éditeur, à l'exception de l'en-tête et du pied de page, peut être modifié appareil par appareil en rendant le contenu spécifique à chaque appareil.

Pour modifier le contenu par appareil :

1. Copiez le contenu que vous souhaitez rendre spécifique à un appareil. Faites un clic droit sur le widget, cliquez sur copier, puis sur coller.
2. Faites un clic droit sur l'un des widgets, sélectionnez l'option pour masquer selon l'appareil, puis choisissez l'appareil sur lequel le masquer. Par exemple, masquer un bouton sur ordinateur le retire de la version ordinateur tout en le conservant sur les versions tablette et mobile.
3. Cliquez sur le contenu d'origine, sélectionnez l'option pour masquer selon l'appareil, puis masquez-le sur les appareils où vous ne voulez pas modifier ce contenu. Par exemple, si vous avez masqué le bouton copié sur ordinateur, masquez le bouton d'origine sur tablette et mobile. Vous obtenez ainsi deux boutons différents : l'un affiché sur ordinateur, l'autre sur tablette et mobile.
4. Si vous voulez un contenu différent sur les trois appareils, copiez-le à nouveau (pour disposer de trois copies au total) afin d'afficher un bouton différent sur chaque appareil.
5. Vous disposez maintenant de deux (ou trois) éléments de contenu distincts, chacun affiché sur un appareil différent. Toute nouvelle modification apportée à ce contenu n'affectera que l'appareil sur lequel il est configuré pour s'afficher.

Le contenu masqué peut rester présent dans le code du site en ligne (après publication ou republication). C'est normal et lié à la technologie utilisée. Lorsque vous masquez un widget, une section ou tout autre contenu pour un appareil précis, le masquage s'effectue via des CSS Media Queries. Autrement dit, le code HTML (bien que masqué à l'écran) existe toujours dans la page. Cela peut parfois poser problème : un outil d'audit qui analyse le site détectera ce contenu masqué, même si vous pensiez l'avoir retiré de la page.

Basculer entre les vues des appareils

Les sites responsives fonctionnent sur ordinateur, tablette et mobile. C'est pourquoi l'éditeur responsive vous permet de prévisualiser le site dans chacune de ces vues pendant la modification. Vous pouvez ainsi vérifier le rendu sur les différents appareils avant de publier, et garantir une bonne expérience à vos visiteurs quel que soit l'appareil utilisé.

Pour changer de vue, cliquez sur l'un des boutons d'appareil dans la barre de navigation supérieure.

Les différentes vues ne sont pas des versions distinctes de votre site. Supprimer un élément dans une vue (par exemple mobile) le supprime de tout le site (ordinateur, tablette et mobile). Plutôt que de le supprimer, faites un clic droit sur l'élément et choisissez de le masquer sur un appareil précis.

Les aperçus par appareil ne reflètent pas toujours fidèlement ce que vous verriez sur un véritable appareil. Les polices, la taille de la fenêtre, l'interface et le comportement du navigateur peuvent tous introduire des écarts plus ou moins importants. Pour obtenir le rendu le plus fidèle, vérifiez sur un appareil réel.

Modifier par appareil (Classic Editor)

Les modifications apportées à un appareil apparaissent sur tous les appareils. Par exemple, si vous supprimez une ligne dans la vue tablette, elle disparaîtra aussi des vues ordinateur et mobile, car le contenu est partagé entre tous les appareils. Vous pouvez toutefois vouloir différencier le contenu affiché selon l'appareil. Les fonctions de modification par appareil vous le permettent : vos visiteurs voient alors un contenu adapté à l'appareil depuis lequel ils consultent votre site.

Lorsque vous modifiez le contenu d'un appareil précis, il est souvent nécessaire de changer de vue. Pour en savoir plus, consultez la section « Basculer entre les vues des appareils » ci-dessus.

Modifications qui n'affectent pas les autres appareils

De nombreux réglages indiquent les appareils qu'ils concernent. Un réglage peut par exemple afficher « Change affects desktop and tablet », accompagné d'une icône représentant les appareils.

Plusieurs modifications peuvent être effectuées dans l'éditeur sans affecter la version mobile :

• L'espacement (marges et marges intérieures)
• Le positionnement
• La largeur
• La hauteur
• L'arrière-plan du site ou de la page
• La taille de police (sans effet sur le texte déjà modifié en version mobile)
• Les modifications de l'en-tête et du pied de page dans la vue tablette n'affectent pas les vues ordinateur et mobile

Toute autre modification effectuée dans une vue d'appareil affectera les autres appareils.

Modifications propres à certains widgets

Si certains widgets fonctionnent parfaitement sur tous les appareils, les écarts importants entre appareils imposent parfois des fonctionnalités ou des choix de design différents selon l'appareil.

Voici une liste de widgets accompagnés de suggestions de design et de remarques pour les adapter à certains appareils.

Images d'arrière-plan

En raison des grandes différences de format entre appareils, il faut soigner la façon dont vous concevez les images de votre site. Un arrière-plan pleine page sur une ligne peut par exemple être superbe sur ordinateur et déplorable sur mobile, car les écrans d'ordinateur conviennent mieux aux images larges, contrairement au mobile. Vous pouvez définir un arrière-plan de page (Page background) différent par appareil dans les réglages du thème du site. Il est recommandé d'utiliser une image large pour l'ordinateur et une image étroite pour le mobile ou la tablette.

Widget Slider

Comme pour l'image d'arrière-plan, les images choisies pour la version ordinateur du widget slider peuvent rendre moins bien sur tablette ou sur ordinateur. Il est recommandé de :

• Ajuster la taille du cadre du slider pour qu'il s'adapte au mobile, ou
• Masquer le slider sur ordinateur et créer une version spécialement conçue pour le mobile.

Widgets Image et Icon

La taille du widget image n'est pas ajustée automatiquement dans la version mobile. Vérifiez sur vos appareils mobiles les endroits où le widget image est utilisé afin d'apporter les ajustements nécessaires.

Effets de survol sur mobile ou tablette

Contrairement aux ordinateurs, les tablettes et les mobiles n'ont pas d'effet de survol. Toute disposition ou option liée au survol est désactivée sur ces appareils.

Widget Map

Le widget Map propose des options par appareil pour choisir s'il s'affiche sous forme de bouton ou de carte.

Widget Contact Form

Sur mobile, les formulaires de contact affichent toujours un champ par ligne.

Widget vcita

Le widget de prise de rendez-vous en ligne vcita propose une option permettant de n'afficher qu'un bouton, sur l'appareil de votre choix.

Tablette responsive (Classic Editor)

Depuis la sortie d'iPadOS par Apple, les iPad affichent la même vue que les ordinateurs. Vous pouvez toutefois passer à la disposition responsive desktop-tablette pour que toutes vos personnalisations soient visibles sur les sites en ligne.

La disposition responsive affiche l'en-tête de navigation supérieur sur les grands écrans et bascule automatiquement vers l'en-tête à menu hamburger dès que la taille d'écran atteint 1024 px ou moins. La disposition des petits écrans peut être personnalisée si nécessaire.

Remarque :

• Sur la plupart des sites, cette fonctionnalité est activée automatiquement et l'option mentionnée ci-dessous n'est pas disponible.
• Pour les sites où elle n'était pas activée, une fois activée, l'option pour la désactiver disparaît.
• La vue mobile d'un site créé dans Classic Editor, en-tête compris, dépend de l'appareil utilisé et non de la taille de la fenêtre du navigateur. Redimensionner votre navigateur d'ordinateur pour simuler un affichage mobile ne reflétera donc pas fidèlement le rendu réel du site ou de l'en-tête sur mobile. Pour voir la véritable présentation mobile, en-tête compris, il vaut mieux les consulter directement sur un appareil mobile.

Pour utiliser les dispositions de site responsives :

1. Dans le panneau latéral, cliquez sur Thème.
2. Cliquez sur Site Layout.
3. Sous Desktop, cliquez sur l'option Responsive Layout. Vous disposez des options suivantes :
   • Choisir une disposition de site pour les écrans de plus de 1024 px.
   • Choisir une disposition de site pour les écrans de 1024 px et moins.

Après être passé aux dispositions responsives, vous pouvez changer de vue dans la barre de navigation supérieure pour afficher Large Desktop (plus de 1024 px), Small Desktop/Tablet (1024 px et moins) et Mobile. Pour en savoir plus, consultez la section « Basculer entre les vues des appareils » ci-dessus.

Remarques importantes sur la tablette responsive

Voici quelques informations complémentaires sur la tablette responsive :

• Le CSS est identique pour les points de rupture Large Desktop et Small Desktop/Tablet ; vous ne verrez pas de CSS spécifique à la tablette.
• Les transitions sont plus fluides et ne reposent pas sur les User Agents.
• Si votre site contient des éléments masqués, assurez-vous qu'ils sont visibles avant d'activer Responsive Layout. Pour corriger la situation, désactivez Responsive Layout et réaffichez tous les éléments masqués. Vous pourrez ensuite activer Responsive Layout et masquer de nouveau les éléments souhaités.
• La personnalisation n'affiche plus d'appareil tablette. Sélectionner l'ordinateur affecte aussi les vues tablette.
• Les personnalisations de tablette suivantes affichent automatiquement la disposition ordinateur : il est inutile de les personnaliser :
  • Les dispositions de galerie de photos
  • Les règles de personnalisation pour tablette
  • Les animations