Screenshot del viewport

Uno screenshot del viewport acquisisce esattamente ciò che è visibile in un determinato momento nella finestra del browser o dell'app, né più né meno. Riflette quindi ciò che una persona vede davvero sullo schermo.

Related workflow terms: Acquisizione dello schermo.

Screenshot del viewport e dell'intera pagina

Il primo comprende soltanto l'area visibile; il secondo tutto il contenuto scorrevole, dall'inizio alla fine. La scelta dipende dallo scopo.

Il viewport è la scelta giusta quando conta lo stato visibile: il contenuto iniziale prima dello scorrimento, una finestra modale, un suggerimento o una posizione precisa nella pagina. L'intera pagina è più adatta quando chi esamina l'immagine deve vedere l'impaginazione completa nel suo contesto.

La maggior parte degli screenshot normali, acquisiti premendo un tasto, riguarda per impostazione predefinita il viewport. Il termine diventa utile per distinguerli dalle acquisizioni a pagina intera o a scorrimento.

Dove si usano gli screenshot del viewport

• Verifiche del contenuto iniziale — mostrano ciò che una persona vede prima di scorrere, con effetti sulla prima impressione e sulle conversioni.
• Acquisizione di finestre modali e dialoghi — documentano popup, suggerimenti e sovrapposizioni che compaiono soltanto nell'area visibile.
• Segnalazioni di errori — registrano esattamente ciò che appare quando si verifica un problema, compresa la posizione di scorrimento.
• Test responsive — acquisiscono la stessa pagina con viewport diverse per verificare il comportamento dell'impaginazione.
• Documentazione dei test A/B — conservano la variante visibile all'apertura della pagina.

Dimensioni del viewport e acquisizione responsive

Le dimensioni del viewport stabiliscono quanto contenuto entra nello schermo. Nei test responsive si usano spesso queste larghezze:

• 1440px — desktop grande
• 1280px — desktop standard
• 1024px — desktop piccolo o tablet grande
• 768px — tablet in verticale
• 375px — dispositivo mobile, simile a un iPhone

Gli strumenti automatici e quelli per sviluppatori del browser permettono di impostare dimensioni personalizzate per simulare questi schermi. È così che si producono screenshot responsive: lo stesso URL viene acquisito a più larghezze per controllare che l'impaginazione si adatti correttamente.

Errori comuni

• Non indicare le dimensioni del viewport. Senza sapere quanto era grande la finestra, è difficile interpretare lo screenshot. Specifica sempre le dimensioni, soprattutto quando condividi l'immagine per una revisione.
• Confondere il contenuto visibile con l'intera pagina. Uno screenshot del viewport può tralasciare elementi importanti più in basso. Se serve il quadro completo, usa l'acquisizione dell'intera pagina.
• Acquisire una finestra di dimensioni insolite. Con una larghezza arbitraria, l'impaginazione potrebbe non corrispondere a ciò che vede davvero il pubblico. Per risultati significativi, usa dimensioni comuni.
• Dimenticare il rapporto tra pixel del dispositivo. Su display ad alta densità, come i Retina, un viewport da 1440px produce un'immagine larga 2880px. Ciò influisce sul peso del file e sulla resa sugli schermi non Retina.