Screenshot responsive

Uno screenshot responsive acquisisce una pagina web con più larghezze del viewport, per esempio desktop, tablet e mobile, e mostra come il layout si adatta alle diverse dimensioni dello schermo.

Related workflow terms: Screenshot del viewport, Screenshot di una pagina intera.

Perché servono gli screenshot responsive

Il responsive web design fa sì che una pagina cambi aspetto e comportamento in base alla larghezza del viewport. Un layout corretto a 1440px può rompersi a 375px. Gli screenshot responsive documentano queste differenze, così designer, sviluppatori e addetti al controllo qualità possono verificare ogni dimensione prevista.

Non è la stessa cosa che ridimensionare il browser e valutarlo a occhio. Gli screenshot creano una prova visiva permanente da confrontare, condividere e archiviare. Sono particolarmente utili quando una modifica deve essere approvata da chi non sta osservando la pagina in tempo reale.

Dimensioni comuni del viewport

Di solito si acquisisce un piccolo gruppo di breakpoint standard:

• 1440px — monitor desktop grande
• 1280px — desktop o portatile standard
• 1024px — desktop piccolo o tablet grande in orizzontale
• 768px — tablet in verticale
• 375px — smartphone di classe iPhone
• 360px — smartphone di classe Android

Le misure esatte dipendono dai breakpoint del progetto. L'importante è acquisire alle larghezze in cui cambia il layout, non a valori casuali.

Come acquisire screenshot responsive

Il metodo manuale consiste nel ridimensionare la finestra del browser, oppure usare l'emulazione dei dispositivi in DevTools, e acquisire ogni larghezza. È sufficiente per un controllo occasionale, ma non per molte pagine.

Il metodo automatico usa browser headless o strumenti che accettano un elenco di larghezze e acquisiscono lo stesso URL a ogni misura in una sola serie. Alcuni crawler per siti web lo fanno direttamente: fornisci l'URL e i viewport desiderati e ottieni tutte le immagini.

Errori comuni con gli screenshot responsive

• Acquisire soltanto la versione desktop. Senza test su mobile e tablet, i problemi dei viewport piccoli restano invisibili finché non li segnalano gli utenti.
• Usare larghezze non standard. Una misura casuale potrebbe non attivare gli stessi breakpoint incontrati dagli utenti reali. Usa i breakpoint CSS del progetto o larghezze diffuse dei dispositivi.
• Non confrontare prima e dopo. Questi screenshot sono più utili affiancati, prima e dopo la modifica. Senza confronto è difficile capire se il nuovo layout sia corretto o abbia introdotto una regressione.
• Dimenticare l'orientamento orizzontale. Tablet e telefoni possono essere ruotati. Se il layout deve funzionare in entrambe le direzioni, acquisiscile entrambe.