Tailles d'écran et appareils – Duda Support

Les points d'arrêt (appelés tailles d'écran dans l'Éditeur 2.0) sont des plages de pixels qui correspondent à la largeur de différents appareils, tels que desktop, tablette et mobile. Lorsque la largeur d'un appareil se situe dans une plage de pixels prédéfinie, la présentation du site est ajustée de manière à ce que le contenu et la conception soient optimisés pour la taille et l'orientation de l'appareil. Par exemple, si je consulte un site sur un ordinateur desktop, je peux voir le menu complet du site, mais lorsque je consulte le site sur mon appareil mobile, je vois un menu hamburger à la place.

Les points d'arrêt proposés dans l'éditeur sont les suivants :

desktop (1025px-1399px). Il s'agit du point d'arrêt par défaut.
desktoplarge (1400px et plus). Cette fonction n'est disponible qu'en mode "flex" dans l'éditeur classique.
Tablette (768px-1024px)
Mobile (767px et moins). Nous recommandons toujours de vérifier les changements de points de rupture sur un appareil mobile, plutôt que de redimensionner un écran desktop.
Paysage mobile (468px-767px). Cette fonction n'est disponible qu'en mode "flex" dans l'éditeur classique.

Si vous modifiez la conception, la mise en page ou le contenu du point d'arrêt par défaut desktop, les changements sont automatiquement appliqués aux autres points d'arrêt. Si vous modifiez le contenu, par exemple en ajoutant une page widget, en modifiant le texte ou en ajoutant ou supprimant une section, la modification s'applique automatiquement à tous les autres points d'arrêt, quel que soit le point d'arrêt sur lequel la modification a été effectuée. Par exemple, si vous ajoutez une adresse widget au point d'arrêt de la tablette, l'adresse widget sera également ajoutée à tous les autres points d'arrêt.

Toutefois, si vous modifiez la position ou la taille d' un élément sur des points d'arrêt spécifiques, les modifications ne s'appliqueront pas aux autres points d'arrêt. Par exemple, si vous modifiez la taille d'un élément sur le point d'arrêt mobile, la modification ne s'appliquera qu'aux points d'arrêt mobile et paysage mobile et à aucun autre point d'arrêt.

Remplacements par taille d'écran (mode Flex et éditeur 2.0)

Note

Ce contenu s'applique à la fois au mode Flex dans l'éditeur classique et dans l'éditeur 2.0. Pour identifier la version actuelle de l'éditeur, voir Comment identifier la version de l'éditeur utilisée par votre site.

Dans certains cas, il est nécessaire d'ignorer un point d'arrêt. Par exemple, sur le point de rupture principal, une image se trouve à droite d'un paragraphe, mais sur mobile, il faut que l'image soit en haut et le paragraphe en bas.

Voici les modifications que vous pouvez apporter à un élément et où remplacer le point d'arrêt principal :

Alignement
Position
Taille
Espacement

Une fois que vous avez remplacé un point d'interruption, vous ne pouvez pas inverser la modification en changeant de style dans le point d’interruption principal sur le même objet.

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

Note

Vous pouvez masquer certains éléments sur des points d'interruption spécifiques à partir du panneau de calques ou du menu flottant de l'élément. Par exemple, vous pouvez masquer une image sur les appareils mobiles et cela n'affectera pas les autres points d'interruption.

Remarque

Si vous masquez un élément qui contient d'autres éléments imbriqués, tous les éléments imbriqués seront également masqués sur ce point d'interruption. Par exemple, si vous masquez une colonne Flex, cela masquera également les widgets de cette colonne Flex.

Pour masquer un élément sur un point d'interruption spécifique :

Passez au point d'interruption sur lequel vous souhaitez masquer l'élément en cliquant sur l'affichage dans la barre de navigation supérieure.
Cliquez sur l'élément que vous souhaitez masquer.
Cliquez sur l'icône des trois points horizontaux () dans le menu flottant et sélectionnez Masquer sur ce point d'arrêt. Ou dans le panneau des calques, cliquez sur Masquer sur ce point de rupture à côté de l'élément.

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

Note

Ces informations sont spécifiques à l'éditeur classique et ne concernent pas l'éditeur 2.0 (anciennement connu sous le nom d'éditeur All-Flex). Pour identifier la version actuelle de l'éditeur, voir Comment identifier la version de l'éditeur utilisée par votre site.

Presque tous les éléments de l'éditeur, à l'exception de l'en-tête et du pied de page, peuvent être modifiés en fonction de l'appareil en associant le contenu à ce dernier.

Pour modifier du contenu par appareil :

Copiez le contenu que vous souhaitez rendre spécifique à l'appareil. Cliquez avec le bouton droit de la souris sur le widget, cliquez sur copier, puis sur coller.
Cliquez avec le bouton droit de la souris sur l'un des sites widget, sélectionnez Hide on device, puis sélectionnez le site sur lequel vous souhaitez que le site widget soit masqué. Par exemple, si vous choisissez de masquer un bouton sur desktop, le bouton n'apparaît pas sur le site desktop, mais il est affiché sur les sites pour tablettes et pour téléphones portables.
Cliquez sur le contenu original et sélectionnez Masquer sur l'appareil, puis masquez le contenu sur l'appareil ou les appareils sur lesquels vous ne souhaitez pas modifier ce contenu. Par exemple, si vous définissez votre bouton de copie sur Masquer sur desktop, vous définirez le bouton original sur Masquer sur tablette et Masquer sur mobile. De cette façon, vous aurez deux boutons différents ; un qui s'affichera sur desktop et un autre qui s'affichera sur votre tablette et votre mobile.
Si vous souhaitez que le contenu soit différent sur les trois appareils, vous pouvez le copier à nouveau (vous disposez ainsi de trois copies du même contenu) et afficher un bouton différent sur chaque appareil.
Vous disposez à présent de deux (ou trois) contenus similaires, chacun affiché sur un appareil différent. Toute autre modification apportée à ce contenu affecte uniquement l'appareil sur lequel le contenu doit être affiché.

Le contenu caché peut encore apparaître dans le code du site réel (après la publication/réédition). Cela est normal et dû à la technologie utilisée. Lorsque vous masquez un widget, une section ou tout autre contenu de l'éditeur sur un appareil spécifique, nous le masquons à l'aide de CSS Media Queries. Cela signifie que le code HTML (bien que caché sur le site web) existe toujours dans la page web lorsqu'un internaute regarde le contenu. Cela peut parfois poser un problème lorsqu'un outil d'audit qui scanne le site web identifie ce contenu caché, alors que vous pensiez qu'il avait été supprimé de la page.

Passer d'une vue de l'appareil à l'autre

Les sites Web responsive fonctionnent sur ordinateur, tablette et mobile. C'est pour cela que notre éditeur responsive vous permet de prévisualiser chaque affichage du site pendant l'édition. Vous pouvez ainsi vérifier comment apparaît votre site sur différents appareils avant de le publier, ce qui garantit à vos clients une expérience positive quel que soit l'appareil qu'ils utilisent pour consulter le site.

Pour basculer entre les différents affichages, cliquez sur l'un des boutons de l'appareil dans la barre de navigation en haut de l'écran :

Les différents affichages de l'appareil ne correspondent pas à des versions distinctes de votre site. La suppression d'un élément dans un affichage (mobile, par exemple) supprime cet élément de l'ensemble du site (ordinateur, tablette, mobile). Au lieu de le supprimer, effectuez un clic droit sur l'élément et choisissez de le masquer sur un appareil spécifique.

La prévisualisation des appareils n'est pas toujours représentative de ce qui s'affiche réellement sur un appareil. Les caractéristiques telles que les polices, la taille de la fenêtre de l'appareil, l'interface utilisateur ou encore le comportement du navigateur peuvent rendre ces affichages plus ou moins inexacts. Pour visualiser la version la plus précise du site, utilisez un appareil réel.

Edit by Device (Editeur classique)

Note

Les modifications apportées à un appareil apparaissent sur tous les appareils. Par exemple, lorsqu'une ligne est supprimée sur la vue tablette du site, elle sera également absente des vues desktop et mobile du site. En effet, le contenu peut être partagé sur tous les appareils. Cependant, vous pouvez vouloir différencier les contenus qui apparaissent sur les différents appareils. Tu peut utiliser nos fonctions d'édition par appareil pour y parvenir et proposer aux visiteurs de Tu un contenu adapté à l'appareil à partir duquel ils accèdent au site de Tu.

Lorsque vous effectuez des modifications sur un dispositif spécifique, il est souvent nécessaire de changer de vue. Pour plus d'informations, reportez-vous à la section Vues des commutateurs.

Modifications n'affectant pas d'autres dispositifs

De nombreux paramètres indiquent les dispositifs qu'ils affectent. Par exemple, un paramètre peut indiquer Change affects desktop and tablet (Modifier les effets sur et les tablettes), accompagné d'une icône représentant les appareils.

Au sein de l'éditeur, plusieurs modifications peuvent être effectuées sans que cela n'affecte vos appareils mobiles. Elles concernent :

L'espacement (marges et remplissage)
Le positionnement
Largeur
Hauteur
Le fond du site ou de la page
La taille de la police (les modifications n'affecteront pas le texte sur mobile précédemment modifié)
Les modifications apportées à l'en-tête et au pied de page de la vue tablette n'ont pas d'incidence sur la vue bureau et mobile.

Toutes les autres modifications que vous effectuez dans la vue de chaque appareil affecteront les autres appareils.

widget-Changements spécifiques

Alors que certains widgets s'adaptent parfaitement à tous les appareils, il peut y avoir d'importantes différences entre appareils, nécessitant alors la mise en place d'un ensemble de fonctionnalités ou la modification des préférences de design sur chaque appareil.

Ci-dessous, retrouvez une liste de widgets accompagnés de suggestions de design et d'informations concernant l'ajustement de certains widgets en fonction de certains appareils.

Images de fond

Les formats d'image diffèrent selon les appareils, c'est pourquoi il est important d'accorder une attention particulière au design de vos images sur votre site Web. Par exemple, opter pour un arrière-plan pleine page sur une ligne peut vous permettre d'obtenir en bel effet sur un ordinateur. Cependant, ce type d'affichage peut s'avérer inadapté sur un appareil mobile. Cela peut être dû au fait que les ordinateurs sont plus adaptés pour l'affichage d'images de grandes tailles, à l'inverse des appareils mobiles. En vous rendant dans les paramètres du thème du site, il vous est possible de définir un arrière-plan de page différent sur chaque appareil. Nous vous conseillons d'utiliser une image de arrière-plan large pour un affichage sur ordinateur, et une image réduite pour un affichage sur mobile ou tablette.

Widget Slider d'images

Tout comme l'image de arrière-plan, les images que vous sélectionnez pour la version ordinateur du widget Slider d'images peuvent ne pas être adaptées à un affichage sur tablette ou mobile. Deux options s'offrent alors à vous :

Ajustez la taille du cadre afin que le slider s'adapte à l'affichage mobile
Masquez le slider en affichage sur ordinateur et créez une version dédiée à un affichage sur mobile

Images et icônes widget

En version mobile, la taille du widget Image n'est pas automatiquement ajustée. Il vous faudra donc vérifier la manière dont s'affiche ce widget sur les appareils mobiles et apporter les modifications nécessaires, le cas échéant.

hover Effets sur mobile ou tablette

Par rapport aux appareils desktop, les tablettes et les appareils mobiles n'ont pas du tout d'effet hover. Toute disposition ou option de hover est désactivée sur les tablettes et les appareils mobiles.

Widget Plan

Le widget Carte dispose d'options spécifiques à l'appareil pour l'affichage d'un bouton ou d'une carte.

Formulaire de contact widget

Les formulaires de contact s'affichent toujours à raison d'une entrée par ligne sur mobile.

Widget vCita

Le site vCita online scheduling widget a une option qui permet de n'afficher qu'un bouton, sur l'appareil de votre choix.

Tablette réactive (éditeur classique)

Note

En raison de la version d'Apple pour iPad (iPadOS), iPad affiche la même vue que desktop. Cependant, vous pouvez passer à la présentation Responsive desktop-tablet pour vous assurer que toutes les personnalisations sont visibles sur les sites en ligne.

La mise en page responsive affiche l'en-tête de navigation supérieure sur les ordinateurs de bureau plus grands et bascule automatiquement vers l'en-tête du menu latéral lorsque la taille de l'écran est de 1 024 px ou moins. La mise en page de petit écran peut être personnalisée, si nécessaire.

Remarque

Sur la plupart des sites, cette fonctionnalité est automatiquement activée et le bouton ci-dessous n'est pas disponible.
Pour les sites sur lesquels cette option n'a pas été activée, une fois activée, l'option permettant de la désactiver sera supprimée.
L'affichage mobile d'un site créé dans l'éditeur classique, y compris l'en-tête, est déterminé par l'appareil utilisé et non par la taille de la fenêtre du navigateur. Par conséquent, le redimensionnement du navigateur de votre bureau pour simuler une fenêtre de visualisation mobile ne reflétera pas exactement l'apparence du site ou de l'en-tête sur les appareils mobiles. Pour voir la véritable présentation mobile du site, y compris l'en-tête, il est préférable de les visualiser directement sur un appareil mobile.

Pour utiliser une mise en page de site responsive :

Dans le panneau latéral de l'éditeur, cliquez sur Thème, puis sur Disposition du site.
Sous desktop, cliquez sur la case à cocher " Responsive Layout". vous disposez des options suivantes :
- Sélectionnez une mise en page de site pour une taille supérieure à 1 024 px.
- Sélectionnez une mise en page de site pour une taille de 1 024 px et moins.

Après avoir adopté une mise en page réactive, vous pouvez changer de vue dans la navigation supérieure pour afficher Large desktop (plus de 1024px), Small desktop/Tablet (1024px et moins), et Mobile. Pour plus d'informations, reportez-vous à la section Vues des commutateurs.

Remarques importantes sur la tablette réactive

Vous trouverez ci-dessous des informations complémentaires sur la tablette réactive :

Le CSS est le même pour les deux points d'interruption, Grand Desktop et Petit Desktop/Tablette, et vous ne verrez pas de CSS Tablette.
Les transitions sont plus fluides et ne sont pas basées sur les agents utilisateurs.
Si vous avez des éléments masqués sur votre site, veillez à les rendre visibles avant d'activer l'option Mise en page responsive. Pour cela, désactivez l'option Mise en page responsive et affichez tous les éléments masqués. Ensuite, vous pourrez réactiver l'option Mise en page responsive et masquer de nouveau les éléments souhaités.
La personnalisation ne permet plus de distinguer les tablettes. Si vous sélectionnez « desktop », les vues sur tablette s'en retrouvent également affectées.
Notez que les personnalisations de tablette suivantes affichent automatiquement la mise en page du desktop et qu'il n'est pas nécessaire de les personnaliser :
- Mise en page de la galerie de photos
- Règles de personnalisation des tablettes
- Animations