Progettare layout dello sfondo per dimensioni di schermo diverse

È possibile progettare layout dello sfondo adatti a dispositivi di diverse dimensioni al fine di ottimizzare i contenuti nel browser per tutte le dimensioni di schermo.

Argomenti:

Informazioni sulla progettazione di layout dello sfondo da visualizzare su dispositivi con dimensioni di schermo diverse

È possibile progettare layout dello sfondo adatti a dispositivi di diverse dimensioni per ottimizzare i contenuti nel browser, ad esempio su un dispositivo portatile, un tablet o un laptop.

Ottimizzare il layout dello sfondo per dimensioni di schermo diverse

Quando si apre una cartella di lavoro su dispositivi di dimensioni diverse, le dimensioni dello schermo dello sfondo vengono scalate in base alle dimensioni dello schermo del browser mediante le impostazioni predefinite del browser. Il ridimensionamento del browser mediante la riduzione delle relative dimensioni può influire sulla capacità di vedere i dettagli nelle visualizzazioni. Ad esempio i dati in un grafico a dispersione o in una mappa cromatica oppure la maggior parte dei dati di misura in una visualizzazione casella possono diventare difficili da leggere, rendendo impossibile la visione di informazioni importanti.

Quando si riducono le dimensioni dello sfondo in un browser, le visualizzazioni possono diventare troppo piccole per mostrare correttamente i dati.
Questa immagine mostra uno schermo dello sfondo di dimensioni ridotte visualizzato in un browser dove alcune visualizzazioni sono diventate troppo piccole per mostrare correttamente i dati.

Gli autori possono progettare breakpoint dello sfondo in modo che quando le dimensioni dello schermo dello sfondo vengono ridotte, li rendering delle visualizzazioni viene modificato in base alle nuove dimensioni dello schermo. Ad esempio, se le dimensioni dello schermo disponibili sono troppo piccole per mostrare una visualizzazione completa, è possibile riordinare o nascondere la visualizzazione in modo da lavorare meglio con dimensioni dello schermo inferiori. È possibile specificare dimensioni e layout dello schermo dello sfondo diverse utilizzando breakpoint dello sfondo, dove ogni breakpoint rappresenta una disposizione diversa delle visualizzazioni mostrate per ciascuna dimensione di schermo.

Uno sfondo ottimizzato per un breakpoint con dimensioni dello schermo inferiori contiene visualizzazioni riordinate per facilitare la visione sul dispositivo più piccolo.
Questa immagine mostra una visualizzazione ottimizzata creata utilizzando un breakpoint per un dispositivo con una dimensione dello schermo inferiore.

È possibile utilizzare un dispositivo di scorrimento per definire le dimensioni dello schermo per quando gli utenti consumer visualizzano gli sfondi su dispositivi di dimensioni diverse. Ad esempio, è possibile modificare il modo in cui vengono mostrate le visualizzazioni cambiandone la posizione, le dimensioni o la visibilità sullo sfondo.

Quando si aggiunge un breakpoint a uno sfondo, le dimensioni dello schermo del breakpoint determinano il modo in cui le visualizzazioni vengono mostrate con tali dimensioni di schermo. È possibile riposizionare, ridimensionare o rimuovere le visualizzazioni per il breakpoint di uno sfondo al fine di ottimizzare il modo in cui le visualizzazioni vengono mostrate agli utenti. È possibile specificare configurazioni di visualizzazione diverse per ciascun breakpoint e tali differenze vengono visualizzate solo per l'utente consumer quando la risoluzione delle dimensioni dello schermo del browser corrisponde alle dimensioni dello schermo del breakpoint per cui vengono apportate le modifiche.

Progettare layout dello sfondo da visualizzare su dispositivi diversi

È possibile creare breakpoint dello sfondo per determinare come appaiono le visualizzazioni agli utenti consumer su dispositivi con diverse dimensioni di schermo. Ad esempio, è possibile impostare breakpoint diversi per ottimizzare la visualizzazione in un browser di dispositivo portatile, un tablet o un laptop.

Icona Esercitazione Esercitazione

  1. Nella Home page passare il puntatore del mouse su una cartella di lavoro, fare clic su Azioni, quindi selezionare Apri.
  2. Fare clic su Modifica per visualizzare la cartella di lavoro per modificarla.
  3. Espandere lo sfondo fino alle dimensioni massime e in Proprietà sfondo impostare il Layout su Adattamento automatico e fare clic su OK.
  4. Nel piè di pagina fare clic su Editor sfondi rispondenti per aprire l'editor in cui è possibile definire i breakpoint per visualizzare lo sfondo su dispositivi diversi.
    Editor sfondi rispondenti

  5. Impostare un breakpoint dello sfondo come indicato di seguito.
    • Aggiungere un breakpoint in corrispondenza della posizione corrente del dispositivo di scorrimento: fare clic e trascinare il dispositivo di scorrimento fino al valore in pixel corrispondente alla dimensione dello schermo che si desidera utilizzare per questo breakpoint,
      Trascinare il dispositivo di scorrimento fino alla larghezza necessaria indicata in pixel.

      quindi fare clic su Aggiungi breakpoint Fare clic sull'icona Aggiungi breakpoint per aggiungere un breakpoint nella posizione corrente del dispositivo di scorrimentoper aggiungere il breakpoint nella posizione corrente del dispositivo di scorrimento.
    • Inserire manualmente un valore per un breakpoint: fare clic su Apri il menu Editor sfondi rispondenti, quindi su Aggiungi breakpoint e immettere un numero nel campo Posizione per la posizione in cui si desidera aggiungere il breakpoint.
      Inserire manualmente una posizione per aggiungere un breakpoint

  6. Ripetere il passaggio precedente per definire ulteriori breakpoint dello sfondo.
  7. Includere o escludere le visualizzazioni per ciascun breakpoint dello sfondo come indicato di seguito.
    • Fare clic con il pulsante destro del mouse sul breakpoint che si desidera gestire (Un breakpoint dello sfondo e relativo indicatore), quindi fare clic su Gestisci breakpoint.
      Utilizzare la finestra di dialogo Gestisci breakpoint per includere o escludere le visualizzazioni per ciascun breakpoint dello sfondo.

    • Nella lista fare clic su una visualizzazione per escluderla o includerla nello sfondo per questo breakpoint, quindi fare clic su OK.
      Utilizzare la finestra di dialogo Gestisci breakpoint per escludere o includere le visualizzazioni e i filtri dashboard dallo sfondo per questo breakpoint.

  8. Opzionale: Creare una visualizzazione e aggiungerla a un breakpoint selezionando i dati dal riquadro Dati e aggiungendoli allo sfondo.
    La nuova visualizzazione viene aggiunta solo al breakpoint corrente, tuttavia è possibile aggiungerla ad altri breakpoint sullo sfondo selezionando la visualizzazione dalla lista nella finestra di dialogo Gestisci breakpoint per tale breakpoint.
  9. Opzionale: Ottimizzare come appaiono le visualizzazioni per un breakpoint dello sfondo.
    È possibile ottimizzare il contenuto da visualizzare su un dispositivo di dimensioni inferiori, come un dispositivo portatile.
    • Ridisporre le visualizzazioni; fare clic sulle visualizzazioni e trascinarle in una nuova posizione.
    • Ottimizzare le visualizzazioni: utilizzare il riquadro Proprietà per nascondere contenuti non necessari, come il titolo o la legenda.
    Quando si ottimizzano le visualizzazioni per un breakpoint, tali modifiche non si applicano ad altri breakpoint nello sfondo.
  10. Fare clic su Salva.