Mis à jour dans Sparkle 2.8

In English

Auf Deutsch

In Italiano

Appareils

‍Les appareils de taille différentes ne sont pas rares, une fraction significative de la population mondiale regarde le Web sur les appareils mobiles.

‍Sparkle s’en occupe en vous permettant de choisir une position différente pour tous les éléments de la page, suivant les tailles d’appareils populaires.

‍Bien que la taille des appareils soit affichée dans le popup des appareils, il ne s'agit pas d'un mécanisme permettant de choisir la taille qui convient à votre contenu. Le monde multi-appareils dans lequel nous vivons signifie que vous devez rendre le contenu utilisable par tous les appareils possibles.

‍Sparkle en fait un sujet avancé optionnel que vous pourrez aborder plus tard dans le développement de votre site, une préoccupation qui peut venir après avoir défini "ce qui doit aller sur le site", en plus de la mise en page sur un seul appareil.

‍Il est utile de réaliser qu’un site réactif est la somme de toutes les mises en page, au lieu de combattre les limitations d'un seul appareil. 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é", de sorte que le contenu de la page sera dézoomé pour être entièrement visible et que l'utilisateur pourra pincer pour le zoomer.

‍L'inconvénient de cette approche est que les moteurs de recherche le signalent de plus en plus comme un élément négatif.

‍Ajouter plusieurs appareils

‍La façon dont vous pouvez penser à plusieurs appareils est comme les différentes fenêtres sur une maison, vous voyez le même contenu, mais la forme de la fenêtre est différente.

‍Par conséquent, l'ajout d'éléments sur un seul appareil entraînera l'ajout des mêmes éléments à tous les appareils, la suppression d'éléments les supprimera de tous les appareils. Cela signifie également que vous devrez revoir 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, de sorte que vous pouvez par exemple placer deux images côte à côte sur un bureau, mais les empiler sur une disposition mobile.

‍Un processus rapide

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

‍Nous pouvons profiter de cette fonctionnalité en observant qu'en général, seuls la mise en page du bureau et la mise en page mobile seront radicalement différentes, vous n'avez 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:

  • ‍• n'ajoutez que la disposition portrait du téléphone mobile (320 pixels de large) ;
  • ‍• parcourez chaque page de votre site et réorganisez le texte et d'autres éléments ;
  • ‍• si vous avez utilisé correctement les styles de texte, vous pouvez définir une nouvelle taille de texte sur l'appareil mobile, appliquer au style et elle ne s'appliquera qu'à l'appareil actuel, redimensionnant instantanément tout votre texte ;
  • ‍• une fois que la mise en page fonctionne correctement sur toutes les pages de la disposition 320, vous pouvez revenir au popup des appareils et ajouter tous les appareils, ils seront très probablement construits de manière raisonnable car ils seront mis à l'échelle à partir du appareil le plus proche, nécessitant peut-être des ajustements mineurs 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, vous trouverez du texte mis à l'échelle pour s'adapter à l'appareil. Par exemple: vous avez une taille de police de 15 points dans un format 960px et un appareil 320px est ajouté, la police sera mise à l'échelle à une taille de 5 points. Les styles sont également modifiés pour refléter l'échelle. Cependant, le même nom de style a une taille de police spécifique au appareil, donc lorsque vous modifiez un style dans un appareil, les autres appareils ne seront 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 cacher un élément sur des appareils plus petits, ou utiliser un élément avec des propriétés de 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 construisez un site multi-appareils, la disposition 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 un bureau et des navigateurs mobiles affichant tous les deux la prévisualisation en direct, vous devez décocher la case "Uniquement l’aperçu sur l'appareil courant".

S'il vous plait, signalez toute lacune dans la documentation et nous la corrigerons dès que possible !

Copyright © 2019 River SRL 

IT06208340486 — REA FI-609716

This site uses cookies. Some are essential to make our site work; others help us improve the user experience and display third party content. By using the site, you agree to our site sending these cookies. Read our privacy policy to learn more or opt out.