Incorporamento Responsivo

Un incorporamento responsive è uno snippet di [codice di incorporamento](/glossary/embed-code) che scala automaticamente il contenuto incorporato per corrispondere alla larghezza e all'altezza del contenitore padre o dello schermo del visitatore. A differenza degli [iframe](/glossary/iframe) a dimensioni fisse che creano barre di scorrimento orizzontali o lasciano spazi vuoti, gli incorporamenti responsive usano larghezze percentuali e tecniche CSS aspect-ratio per riempire lo spazio disponibile in modo fluido. Il contenuto mantiene le sue proporzioni sia che il contenitore sia largo 1440 pixel su un monitor desktop o 375 pixel su uno smartphone. Questo approccio garantisce che [flipbook](/glossary/flipbook), documenti, video o contenuti interattivi incorporati appaiano correttamente su tutti i dispositivi senza ridimensionamento manuale o codice specifico per dispositivo.

I lettori accedono ai contenuti da una vasta gamma di dispositivi e dimensioni dello schermo. Se un flipbook incorporato trabocca su mobile, i lettori devono scorrere orizzontalmente — un segnale forte che la pagina non è ottimizzata. Se l'incorporamento appare minuscolo su un monitor widescreen, il contenuto diventa illeggibile. Entrambe le situazioni aumentano il tasso di rimbalzo e compromettono la credibilità della pagina ospitante. Gli incorporamenti responsive eliminano questi problemi, mantenendo le pubblicazioni professionali e accessibili ovunque. Proteggono anche i [Core Web Vitals](/glossary/core-web-vitals) del sito riservando lo spazio di layout corretto prima del caricamento del contenuto, prevenendo il [Cumulative Layout Shift](/glossary/cls).

FlipLink genera codici di incorporamento responsive pronti all'uso per ogni flipbook e documento pubblicato. Copiate lo snippet dalle opzioni di condivisione della pubblicazione e incollatelo in qualsiasi sito web, blog o CMS. L'[iframe](/glossary/iframe) si adatta automaticamente alla larghezza del contenitore, e il visualizzatore flipbook scala le pagine di conseguenza. Il codice di incorporamento include il [lazy loading](/glossary/lazy-loading) per impostazione predefinita, quindi il flipbook si carica solo quando scorre nella visualizzazione, mantenendo la pagina veloce. Potete anche usare la funzionalità [Immagine Cliccabile Incorporata](/features/clickable-image-embed) per posizionare una miniatura che apre il visualizzatore responsive completo al clic — utile quando volete mostrare un'anteprima senza caricare immediatamente il visualizzatore completo.

Gli incorporamenti responsive funzionano tipicamente attraverso una di due tecniche CSS: - **Contenitore aspect-ratio** — un `div` wrapper con proprietà CSS `aspect-ratio` (es. `aspect-ratio: 16 / 9`) e `width: 100%`. L'iframe interno è impostato per riempire completamente il wrapper. Questo è l'approccio moderno ed è supportato da tutti i browser attuali. - **Padding-bottom hack** — una tecnica più vecchia dove il wrapper usa `padding-bottom` come percentuale (es. `56.25%` per 16:9) per creare l'altezza corretta in rapporto alla larghezza. L'iframe è posizionato in modo assoluto all'interno. Questo metodo è ancora ampiamente usato per la retrocompatibilità. Il codice di incorporamento di FlipLink utilizza l'approccio aspect-ratio con un fallback, garantendo compatibilità tra browser. Le proprietà CSS chiave sono `width: 100%`, `height: auto` e `border: none` sull'iframe, combinate con l'aspect ratio del wrapper. Il risultato è un incorporamento che occupa l'intera larghezza del contenitore e scala l'altezza proporzionalmente.

- **Posizionare l'incorporamento in un contenitore con larghezza limitata** — se incollate il codice in una sezione a larghezza piena, il flipbook si estenderà per riempire l'intero [viewport](/glossary/viewport). Usate una colonna di contenuto o un wrapper max-width per mantenerlo a una dimensione di lettura confortevole. - **Evitare di impostare altezze fisse in pixel** — questo vanifica lo scopo dell'incorporamento responsive. Lasciate che l'aspect ratio controlli automaticamente l'altezza. - **Testare su più dimensioni di schermo** — visualizzate la pagina su desktop, tablet e telefono per confermare che l'incorporamento scala correttamente. La simulazione dispositivi dei DevTools del browser funziona bene per controlli rapidi. - **Usare il lazy loading per incorporamenti sotto la piega** — il codice di FlipLink include il lazy loading per impostazione predefinita, ma se personalizzate il codice, mantenete l'attributo `loading="lazy"` per evitare di rallentare il caricamento iniziale. - **Un incorporamento per sezione del viewport** — incorporare più flipbook in una singola vista di scorrimento può sovraccaricare i lettori e rallentare la pagina. Distanziateli o usate un [incorporamento immagine cliccabile](/features/clickable-image-embed) per permettere ai lettori di scegliere quale pubblicazione aprire.

1. **Pubblicare il flipbook** — il codice di incorporamento è disponibile solo dopo la pubblicazione 2. **Copiare il codice di incorporamento** — accedere alle opzioni di condivisione della pubblicazione e copiare lo snippet responsive 3. **Incollare nella pagina** — aggiungere il codice all'editor HTML del sito, al blocco embed del CMS o al widget del page builder 4. **Verificare la larghezza del contenitore** — assicurarsi che l'elemento padre abbia una larghezza definita (percentuale o max-width) affinché l'incorporamento sappia quanto renderizzare 5. **Anteprima su tutti i dispositivi** — controllare le viste desktop, tablet e mobile per confermare lo scaling proporzionale 6. **Controllare la velocità della pagina** — eseguire un audit Lighthouse per confermare che l'incorporamento non impatti negativamente tempi di caricamento o punteggi di layout shift 7. **Considerare il whitelisting dei domini** — usare il [whitelisting dei domini](/glossary/domain-whitelisting) per limitare quali siti web possono incorporare le pubblicazioni

Un incorporamento responsive garantisce che il flipbook appaia correttamente su ogni schermo senza dimensionamento manuale o adattamenti specifici per dispositivo. È il modo più semplice per inserire pubblicazioni interattive su qualsiasi sito web mantenendo un'esperienza professionale e veloce per ogni lettore.