Appareils

Les appareils de taille différente ne sont pas rares, une fraction significative de la population mondiale navigue sur le Web avec des appareils mobiles.

Sparkle s’en occupe en vous permettant de choisir une position différente pour tous les éléments de la page, en fonction des tailles d’appareils les plus répandues.

Bien que la taille des appareils soit affichée dans la fenêtre contextuelle popup des appareils, il ne s’agit pas d’une fonctionnalité permettant de choisir la taille qui convient à votre contenu. Nous vivons dans un monde multi-appareils, c’est pourquoi votre contenu doit être exploitable par tous les appareils possibles.

Ce sujet est optionnel et destiné à une utilisation avancée, vous pourrez donc l’aborder plus tard dans le développement de votre site. Vous pourrez y réfléchir après avoir défini « ce que doit contenir le site », en plus de la mise en page sur un seul appareil.

Plutôt que de lutter contre les limitations d’un seul appareil, vous devriez considérer un site réactif comme un ensemble de toutes les mises en page. D’un autre côté, si vous n’avez qu’une seule mise en page, la mise en page du PC de bureau de 960 pixels de large est la plus universelle, c’est pourquoi c’est la version par défaut de Sparkle.

Un seul appareil

Si vous n’ajoutez pas plusieurs appareils à votre site Web, Sparkle générera une mise en page fixe unique, qui par défaut est une mise en page de bureau de 960 pixels de large. Le code du site contiendra des instructions pour que les navigateurs mobiles agissent en mode « compatibilité », afin que le contenu de la page soit dézoomé pour être entièrement visible et que l’utilisateur puisse zoomer en écartant ses doigts.

L’inconvénient de cette approche est que les moteurs de recherche le considèrent de plus en plus comme un élément négatif.

Ajouter plusieurs appareils

L’utilisation de plusieurs appareils s’apparente à regarder l’intérieur d’une maison depuis différentes fenêtres. Le contenu est le même, mais la forme de la fenêtre est différente.

Par conséquent, l’ajout d’éléments sur un appareil entraînera l’ajout des mêmes éléments sur tous les appareils. La suppression d’éléments les supprimera de tous les appareils. Cela signifie également que vous devez vérifier la position d’un élément nouvellement ajouté sur d’autres appareils.

Sparkle vous permet de modifier la position des éléments et les propriétés du texte pour chaque appareil. Vous pouvez par exemple placer deux images côte à côte sur affichage pour ordinateur de bureau, mais les empiler sur une mise en page mobile.

La mise en page d’un appareil peut être dans l’un des quatre états suivant :

  • Absente : la mise en page de l’appareil n’est pas enregistrée sur le fichier de projet et n’est pas publiée.
  • Non publiée : la mise en page de l’appareil est enregistrée sur le fichier de projet, mais n’est pas publiée.
  • Mise en page personnalisée : la mise en page de l’appareil est enregistrée, publiée et peut être personnalisée.
  • Mise à l’échelle automatique : la mise en page de l’appareil est publiée, mais elle ne peut pas être modifiée, car elle est automatiquement générée en se basant sur la mise en page la plus proche.

Un flux de travail rapide

Lorsque vous ajoutez un appareil, Sparkle met à l’échelle tous les éléments pour qu’ils s’adaptent au nouvel appareil, et ce, à partir de l’appareil dont la taille est la plus proche.

Dans les faits, seules la mise en page du bureau et la mise en page mobile sont radicalement différentes, vous n’avez donc pas besoin d’avoir cinq mises en page différentes.

La façon la plus rapide de créer des mises en page pour tous les appareils est de procéder comme suit. En supposant que vous avez terminé et que vous êtes satisfait de la mise en page par défaut de 960 pixels de large :

  • ajoutez uniquement l'affichage pour téléphone mobile au format portrait (320 pixels de large) ; 
  • consultez chaque page de votre site et réajustez la disposition du texte et des autres éléments ; 
  • si vous avez utilisé des styles de texte correctement, vous pouvez définir une nouvelle taille de texte sur l’appareil mobile, l’appliquer au style, ce qui redimensionnera instantanément tout votre texte, uniquement sur l’appareil actuel ; 
  • une fois que votre mise en page fonctionne correctement pour la version 320 pixels, vous pouvez retourner à la fenêtre contextuelle et ajouter tous les appareils, puisqu’ils seront mis à l’échelle depuis l’appareil dont le fonctionnement est le plus proche du leur, ce qui nécessitera peut être quelques menus ajustements ici et là.

Ceci est un exemple de la différence de mise en page, une mise en page dézoomée sur la gauche, une vue à 100 % sur la droite.

Texte et appareils

Lorsque vous ajoutez un nouvel appareil, le texte est mis à l’échelle pour s’adapter à l’appareil. Par exemple : vous avez une taille de police de 15 dans un format 960 px et un appareil de 320 px est ajouté, la police sera mise à l’échelle avec une taille de 5. Les styles sont également modifiés pour refléter la mise à l’’échelle. Cependant, le même nom de style a une taille de police spécifique à l’appareil, donc lorsque vous modifiez un style dans un appareil, les autres appareils ne sont pas affectés par ce changement.

Nous vous suggérons de vérifier et éventuellement d’ajuster les styles avant de commencer à travailler sur un appareil nouvellement ajouté.

Différences entre les appareils

Dans certains cas, vous pouvez vouloir masquer un élément sur des appareils plus petits, ou utiliser un élément avec des propriétés différentes.

Cela peut se produire soit parce qu’un élément n’est pas approprié pour mobile, soit parce que vous avez besoin d’un élément avec des propriétés différentes sur un appareil différent.

Pour cela, vous pouvez utiliser la case à cocher « Voir sur cet appareil » pour afficher/masquer sélectivement les éléments.

Aperçu et appareils

Une subtilité de l’aperçu est que lorsque vous développez un site multi-appareils, la mise en page affichée dépend de la largeur du navigateur. Pour limiter la confusion, l’aperçu ne montre que l’appareil actuel. Mais si vous voulez prévisualiser le fonctionnement du site une fois publié, ou si vous avez des navigateurs bureau et mobiles affichant la prévisualisation en direct, vous devez décocher la case « Aperçu sur l’appareil actuel uniquement ».

Sparkle's device control
Sparkle's device control, multi device
An example of a desktop layout viewed on a mobile device
An example of a mobile layout on a mobile device

Mis à jour pour Sparkle 3.1

In English

Auf Deutsch

In Italiano

S’il vous plait, signalez tout défaut dans la documentation et nous le corrigerons dès que possible !

Sparkle combine une approche tout-en-un, une interface lisible et une volonté absolue de produire des sites Web extrêmement performants et optimisés pour les moteurs de recherche (SEO). 

Tout ça dans une puissante application Mac native. 

Rien ne s’en approche.

Copyright ©2021 River SRL

IT06208340486 — REA FI-609716

Ce site utilise des cookies. Certains sont essentiels au fonctionnement de notre site ; d’autres nous aident à améliorer l’expérience utilisateur et afficher le contenu de tiers. En utilisant ce site, vous acceptez l’envoi de ces cookies par notre site. Lisez notre Politique de confidentialité pour en savoir plus ou refuser.