Canvaslay-outs ontwerpen voor verschillende schermgroottes

U kunt canvaslay-outs ontwerpen die op apparaten van verschillende grootten passen, zodat de inhoud in de browser wordt geoptimaliseerd voor elke schermresolutie.

Onderwerpen:

Het ontwerpen van canvaslay-outs voor weergave op apparaten met verschillende schermgrootten

U kunt canvaslay-outs ontwerpen die op apparaten van verschillende grootten passen, zodat de inhoud in de browser wordt geoptimaliseerd, bijvoorbeeld op een mobiele telefoon, tablet of laptop.

Canvaslay-outs optimaliseren voor verschillende schermgrootten

Wanneer u een werkmap opent op apparaten van verschillende grootten, wordt de schermgrootte van het canvas aan de hand van de standaardwaarden van de browser naar de schermgrootte van de browser geschaald. Als de grootte van de browser wordt aangepast, kan de zichtbaarheid van details in visualisaties beïnvloeden. Zo kunnen bijvoorbeeld de gegevens in een spreidingsgrafiek, een warmtekaart of de meeste meetgegevens in een tegelvisualisatie moeilijk leesbaar zijn, waardoor cruciale informatie onmogelijk te zien valt.

Wanneer u de grootte van het canvas in een browser verkleint, kunnen visualisaties te klein worden om de gegevens goed weer te geven.
De afbeelding toont een verkleind canvasscherm in een browser, waarin sommige visualisaties te klein zijn om de gegevens ervan goed te kunnen zien.

Als auteur kunt u onderbrekingspunten voor het canvas ontwerpen, zodat de weergave van visualisaties bij een verkleind canvasscherm wordt aangepast aan de nieuwe schermgrootte. Als bijvoorbeeld de beschikbare schermgrootte te klein is om er een volledige visualisatie op weer te geven, kunt u de visualisatie herschikken of verbergen, zodat u beter met de kleinere schermgrootte kunt werken. U kunt verschillende schermgrootten en lay-outs voor canvassen opgeven door onderbrekingspunten voor canvassen te gebruiken. Hierbij staat ieder onderbrekingspunt voor een verschillende indeling van visualisaties die voor elke schermgrootte wordt weergegeven.

Een geoptimaliseerd canvas voor een onderbrekingspunt van een kleinere schermgrootte bevat visualisaties die opnieuw zijn gerangschikt. Zo kan er beter op het kleinere apparaat worden gekeken.
In deze afbeelding wordt een geoptimaliseerde visualisatie getoond die is gemaakt met een onderbrekingspunt voor een apparaat met een kleinere schermgrootte.

U kunt een schuifbalk gebruiken om de schermgrootten te definiëren wanneer gebruikers een canvas bekijken op apparaten met verschillende grootten. U kunt bijvoorbeeld de weergave van de visualisaties wijzigen door de locatie, grootte of zichtbaarheid op het canvas opnieuw te rangschikken.

Wanneer u een onderbrekingspunt toevoegt aan een canvas, bepaalt het onderbrekingspunt voor de schermgrootte hoe de visualisaties worden weergegeven op het apparaat met die schermgrootte. U kunt visualisaties opnieuw positioneren, verwijderen of de grootte ervan aanpassen voor het onderbrekingspunt van een canvas. Zo kunt u de weergave van visualisaties voor gebruikers optimaliseren. U kunt voor elk onderbrekingspunt verschillende visualisatieconfiguraties opgeven. De verschillen voor elk onderbrekingspunt worden alleen voor de gebruiker weergegeven als de resolutie van de schermgrootte van de browser overeenkomt met de schermgrootte van het onderbrekingspunt waarvoor de wijzigingen zijn aangebracht.

Canvaslay-outs ontwerpen voor weergave op verschillende apparaten

U kunt onderbrekingspunten voor canvassen maken om te bepalen hoe visualisaties worden weergegeven voor consumentgebruikers op apparaten met verschillende schermgroottes. U kunt bijvoorbeeld verschillende onderbrekingspunten instellen om de weergave op een browser van een mobiele apparaat, tablet of laptop te optimaliseren.

Pictogram voor zelfstudie Zelfstudie

  1. Ga op de beginpagina met uw muis op een werkmap staan en klik op Acties. Selecteer vervolgens Openen.
  2. Klik op Bewerken om de werkmap weer te geven voor bewerking.
  3. Vouw het canvas uit tot de maximumgrootte in Canvaseigenschappen en stel de Lay-out in op 'Automatisch aanpassen'. Klik daarna op OK.
  4. Klik in de voettekst op Responsieve canvaseditor om de editor te openen. Hierin kunt u onderbrekingspunten definiëren om zo het canvas op verschillende apparaten te tonen.
    Responsieve canvaseditor

  5. Een onderbrekingspunt voor het canvas instellen:
    • Een onderbrekingspunt toevoegen op de huidige positie van de schuifbalk : klik op de schuifbalk en schuif deze tot de waarde (in pixels) voor de schermgrootte die u wilt gebruiken voor dit onderbrekingspunt.
      Sleep de schuifbalk tot de vereiste breedte, weergegeven in pixels.

      Klik daarna op Onderbrekingspunt toevoegen Klik op het pictogram 'Onderbrekingspunt toevoegen' om een onderbrekingspunt toe te voegen op de positie van de schuifbalk. om het onderbrekingspunt toe te voegen op de huidige positie van de schuifbalk.
    • Een waarde handmatig invoeren voor een onderbrekingspunt: klik op Het menu van de responsieve canvaseditor openen en klik daarna op Onderbrekingspunt toevoegen. Voer een nummer in het veld Positie in waarvoor u dit onderbrekingspunt wilt.
      Voer een positie handmatig in om een onderbrekingspunt toe te voegen.

  6. Herhaal de vorige stap om extra onderbrekingspunten voor het canvas toe te voegen.
  7. Visualisaties opnemen in of uitsluiten van ieder onderbrekingspunt voor het canvas:
    • Klik met de rechtermuisknop op het onderbrekingspunt voor het canvas dat u wilt beheren (Een onderbrekingspunt voor het canvas en de markering hiervoor) en klik op Onderbrekingspunt beheren.
      Gebruik het dialoogvenster 'Onderbrekingspunten beheren' om visualisaties op te nemen in of uit te sluiten van dit onderbrekingspunt voor het canvas.

    • Klik op een visualisatie in de lijst om deze op te nemen in of uit te sluiten van het canvas voor dit onderbrekingspunt voor het canvas. Klik daarna op OK.
      Gebruik het dialoogvenster 'Onderbrekingspunten beheren' om visualisaties en dashboardfilters op te nemen in of uit te sluiten van het canvas voor dit onderbrekingspunt.

  8. Optioneel: Maak een visualisatie en voeg deze toe aan een onderbrekingspunt door gegevens te selecteren in het deelvenster 'Gegevens' en de visualisatie toe te voegen aan het canvas.
    De nieuwe visualisatie wordt alleen toegevoegd aan het huidige onderbrekingspunt. U kunt echter de visualisatie toevoegen aan andere onderbrekingspunten op het canvas door de visualisatie voor dat onderbrekingspunt te selecteren in het dialoogvenster 'Onderbrekingspunten beheren'.
  9. Optioneel: Optimaliseer de weergave van de visualisaties voor een onderbrekingspunt voor het canvas.
    U wilt de weergave optimaliseren van inhoud op een kleiner apparaat, zoals een mobiel.
    • Visualisaties herschikken: klik op de visualisaties en sleep ze naar een nieuwe positie.
    • Visualisaties optimaliseren: gebruik het deelvenster 'Eigenschappen' om onnodige inhoud te verbergen, zoals de titel of legenda.
    Wanneer u visualisaties optimaliseert voor een onderbrekingspunt, worden deze wijzigingen niet toegepast op andere onderbrekingspunten in het canvas.
  10. Klik op Opslaan.