L’uso di dispositivi mobili per navigare sul Web continua a crescere a un ritmo astronomico e questi dispositivi sono spesso vincolati dalle dimensioni del display e richiedono un approccio diverso alla disposizione dei contenuti sullo schermo.
Il responsive web design, originariamente definito da Ethan Marcotte in A List Apart , risponde alle esigenze degli utenti e dei dispositivi che stanno utilizzando. Il layout cambia in base alle dimensioni e alle capacità del dispositivo. Ad esempio, su un telefono gli utenti vedrebbero il contenuto mostrato in una visualizzazione a colonna singola; un tablet potrebbe mostrare lo stesso contenuto in due colonne.
Esiste una moltitudine di diverse dimensioni dello schermo su telefoni, “phablet”, tablet, desktop, console di gioco, TV e persino dispositivi indossabili. Le dimensioni dello schermo cambiano continuamente, quindi è importante che il tuo sito possa adattarsi a qualsiasi dimensione dello schermo, oggi o in futuro. Inoltre, i dispositivi hanno diverse funzionalità con cui interagiamo con loro. Ad esempio, alcuni dei tuoi visitatori utilizzeranno un touchscreen. Il moderno design reattivo considera tutte queste cose per ottimizzare l’esperienza per tutti.
Imposta la visualizzazione #
Le pagine ottimizzate per una varietà di dispositivi devono includere un tag meta viewport nell’intestazione del documento. Un tag meta viewport fornisce al browser istruzioni su come controllare le dimensioni e il ridimensionamento della pagina.
Per tentare di fornire la migliore esperienza, i browser mobili visualizzano la pagina alla larghezza dello schermo del desktop (di solito circa 980px, anche se questo varia tra i dispositivi), quindi cercano di migliorare l’aspetto del contenuto aumentando le dimensioni dei caratteri e ridimensionando il contenuto per adattarlo allo schermo . Ciò significa che le dimensioni dei caratteri potrebbero apparire incoerenti agli utenti, che potrebbero dover toccare due volte o pizzicare per ingrandire per vedere e interagire con il contenuto.
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
L’utilizzo del valore meta viewport width=device-widthindica alla pagina di corrispondere alla larghezza dello schermo in pixel indipendenti dal dispositivo. Un pixel indipendente dal dispositivo (o dalla densità) è una rappresentazione di un singolo pixel, che su uno schermo ad alta densità può essere costituito da molti pixel fisici. Ciò consente alla pagina di ridisporre il contenuto in modo che corrisponda a diverse dimensioni dello schermo, indipendentemente dal rendering su un piccolo telefono cellulare o su un grande monitor desktop.
Vedi questo esempio su Glitch .
Alcuni browser mantengono costante la larghezza della pagina quando si ruota in modalità orizzontale e ingrandiscono invece di ridisporre per riempire lo schermo. L’aggiunta del valore initial-scale=1indica ai browser di stabilire una relazione 1:1 tra i pixel CSS e i pixel indipendenti dal dispositivo indipendentemente dall’orientamento del dispositivo e consente alla pagina di sfruttare l’intera larghezza orizzontale.
_____________________
Attenzione : per garantire che i browser meno recenti possano analizzare correttamente gli attributi, utilizzare una virgola per separare gli attributi.
Il controllo Non ha <meta name="viewport">tag con widthoinitial-scale Lighthouse può aiutarti ad automatizzare il processo per assicurarti che i tuoi documenti HTML utilizzino correttamente il meta tag viewport.
Garantire un viewport accessibile #
Oltre a impostare un initial-scale, puoi anche impostare i seguenti attributi nella finestra:
minimum-scalemaximum-scaleuser-scalable
Quando impostati, possono disabilitare la capacità dell’utente di ingrandire la visualizzazione, causando potenzialmente problemi di accessibilità. Pertanto, non consigliamo di utilizzare questi attributi.
Ridimensiona il contenuto nella finestra #
Sia sui dispositivi desktop che sui dispositivi mobili, gli utenti sono abituati a scorrere i siti Web in verticale ma non in orizzontale; costringere l’utente a scorrere orizzontalmente oa rimpicciolire per vedere l’intera pagina si traduce in un’esperienza utente scadente.
Quando si sviluppa un sito per dispositivi mobili con un tag meta viewport, è facile creare accidentalmente contenuti di pagina che non si adattano perfettamente al viewport specificato. Ad esempio, un’immagine visualizzata con una larghezza maggiore della finestra può far sì che la finestra scorra orizzontalmente. Dovresti regolare questo contenuto per adattarlo alla larghezza della finestra, in modo che l’utente non debba scorrere orizzontalmente.
Il contenuto non è dimensionato correttamente per il viewport Il controllo di Lighthouse può aiutarti ad automatizzare il processo di rilevamento del contenuto in eccesso.
Immagini #
Un’immagine ha dimensioni fisse e se è più grande della finestra causerà una barra di scorrimento. Un modo comune per affrontare questo problema è quello di dare tutte le immagini di una max-widthdelle 100%. Ciò farà sì che l’immagine si rimpicciolisca per adattarsi allo spazio che ha, nel caso in cui le dimensioni della finestra siano inferiori all’immagine. Tuttavia, poiché max-width, anziché widthis 100%, l’immagine non si allungherà più della sua dimensione naturale. È generalmente sicuro aggiungere quanto segue al tuo foglio di stile in modo da non avere mai problemi con le immagini che causano una barra di scorrimento.
img {
max-width: 100%;
display: block;
}Aggiungi le dimensioni dell’immagine all’elemento img #
Quando si utilizza, max-width: 100%si sovrascrivono le dimensioni naturali dell’immagine, tuttavia si dovrebbero comunque utilizzare gli attributi widthe heightsul <img>tag. Questo perché i browser moderni utilizzeranno queste informazioni per riservare spazio per l’immagine prima che venga caricata, questo aiuterà a evitare cambiamenti di layout durante il caricamento del contenuto.
Disposizione #
Poiché le dimensioni e la larghezza dello schermo in pixel CSS variano notevolmente tra i dispositivi (ad esempio, tra telefoni e tablet e persino tra telefoni diversi), il contenuto non dovrebbe fare affidamento su una particolare larghezza della finestra per il rendering.
In passato, questo richiedeva elementi di impostazione utilizzati per creare layout in percentuale. Nell’esempio seguente, puoi vedere un layout a due colonne con elementi flottati, dimensionati in pixel. Una volta che la finestra diventa più piccola della larghezza totale delle colonne, dobbiamo scorrere orizzontalmente per vedere il contenuto.
Usando le percentuali per le larghezze, le colonne rimangono sempre una certa percentuale del contenitore. Ciò significa che le colonne si restringono, invece di creare una barra di scorrimento.
Le moderne tecniche di layout CSS come Flexbox, Grid Layout e Multicol rendono molto più semplice la creazione di queste griglie flessibili.
Flexbox #
Questo metodo di layout è ideale quando si dispone di una serie di elementi di dimensioni diverse e si desidera che si adattino comodamente in una o più file, con gli oggetti più piccoli che occupano meno spazio e quelli più grandi che ne occupano più spazio.
.items {
display: flex;
justify-content: space-between;
}In un design reattivo, puoi utilizzare Flexbox per visualizzare gli elementi come una singola riga o spostati su più righe man mano che lo spazio disponibile diminuisce.
Maggiori informazioni su Flexbox .
Layout griglia CSS #
CSS Grid Layout consente la creazione diretta di griglie flessibili. Se consideriamo l’esempio float precedente, invece di creare le nostre colonne con le percentuali, potremmo usare il layout della griglia e l’ frunità, che rappresenta una parte dello spazio disponibile nel contenitore.
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}La griglia può anche essere utilizzata per creare layout di griglia regolari, con tutti gli elementi che si adattano. Il numero di tracce disponibili verrà ridotto man mano che le dimensioni dello schermo si riducono. Nella demo di seguito, abbiamo tutte le carte che si adattano a ciascuna riga, con una dimensione minima di 200px.
Maggiori informazioni sul layout della griglia CSS
Layout a più colonne #
Per alcuni tipi di layout è possibile utilizzare Layout a più colonne (Multicol), che può creare numeri reattivi di colonne con la column-widthproprietà. Nella demo qui sotto, puoi vedere che le colonne vengono aggiunte se c’è spazio per un’altra 200pxcolonna.
Usa le query multimediali CSS per la reattività #
A volte sarà necessario apportare modifiche più estese al layout per supportare una determinata dimensione dello schermo rispetto a quanto consentito dalle tecniche mostrate sopra. È qui che le query multimediali diventano utili.
Le media query sono semplici filtri che possono essere applicati agli stili CSS. Semplificano la modifica degli stili in base ai tipi di dispositivo che visualizzano il contenuto o alle caratteristiche di quel dispositivo, ad esempio larghezza, altezza, orientamento, capacità di passare il mouse e se il dispositivo viene utilizzato come touchscreen.
Per fornire stili diversi per la stampa, devi scegliere come target un tipo di output in modo da poter includere un foglio di stile con stili di stampa come segue:
<!DOCTYPE html>
<html lang="en">
<head>
…
<link rel="stylesheet" href="print.css" media="print">
…
</head>
…In alternativa, puoi includere stili di stampa all’interno del tuo foglio di stile principale utilizzando una media query:
@media print {
/* print styles go here */
}È anche possibile includere fogli di stile separati nel file CSS principale utilizzando la @importsintassi @import url(print.css) print;, tuttavia questo utilizzo non è raccomandato per motivi di prestazioni. Vedere Evitare le importazioni CSS per maggiori dettagli.
Per il web design reattivo, in genere interroghiamo le funzionalità del dispositivo per fornire un layout diverso per schermi più piccoli o quando rileviamo che il nostro visitatore sta utilizzando un touchscreen.
Query multimediali basate sulla dimensione dell’area visibile #
Le query multimediali ci consentono di creare un’esperienza reattiva in cui vengono applicati stili specifici a schermi piccoli, schermi grandi e ovunque. La caratteristica che stiamo rilevando qui è quindi la dimensione dello schermo e possiamo testare le seguenti cose.
width(min-width,max-width)height(min-height,max-height)orientationaspect-ratio
Tutte queste funzionalità hanno un eccellente supporto del browser, per maggiori dettagli, incluse le informazioni sul supporto del browser, vedere larghezza , altezza , orientamento e proporzioni su MDN.
La specifica includeva test per device-widthe device-height. Questi sono stati deprecati e dovrebbero essere evitati. device-widthe device-heighttestato per la dimensione effettiva della finestra del dispositivo che non è stata utile in pratica perché potrebbe essere diversa dalla finestra che l’utente sta guardando, ad esempio se ha ridimensionato la finestra del browser.
Media query basate sulla capacità del dispositivo #
Data la gamma di dispositivi disponibili, non possiamo presumere che ogni dispositivo di grandi dimensioni sia un normale computer desktop o laptop o che le persone utilizzino solo un touchscreen su un dispositivo di piccole dimensioni. Con alcune aggiunte più recenti alle specifiche delle query multimediali, possiamo testare funzionalità come il tipo di puntatore utilizzato per interagire con il dispositivo e se l’utente può passare il mouse sugli elementi.
hoverpointerany-hoverany-pointer
Prova a visualizzare questa demo su diversi dispositivi, come un normale computer desktop e un telefono o un tablet.
Queste nuove funzionalità hanno un buon supporto in tutti i browser moderni. Scopri di più sulle pagine MDN per hover , any-hover , pointer , any-pointer .
Usando any-hovere any-pointer #
Le funzionalità any-hovere il any-pointertest se l’utente ha la capacità di passare il mouse o utilizzare quel tipo di puntatore anche se non è il modo principale con cui interagisce con il proprio dispositivo. Fai molta attenzione quando li usi. Forzare un utente a passare a un mouse quando utilizza il touchscreen non è molto amichevole! Tuttavia, any-hovere any-pointerpuò essere utile se è importante capire che tipo di dispositivo ha un utente. Ad esempio, un laptop con touchscreen e trackpad dovrebbe corrispondere a puntatori grossolani e fini, oltre alla capacità di librarsi.
Come scegliere i punti di interruzione #
Non definire punti di interruzione in base alle classi di dispositivi. La definizione di punti di interruzione in base a dispositivi, prodotti, marchi o sistemi operativi specifici oggi in uso può portare a un incubo di manutenzione. Invece, il contenuto stesso dovrebbe determinare come il layout si adatta al suo contenitore.
Scegli i punti di interruzione principali iniziando in piccolo, quindi lavorando su #
Progetta prima il contenuto in modo che si adatti a uno schermo di piccole dimensioni, quindi espandi lo schermo fino a quando non diventa necessario un punto di interruzione. Ciò consente di ottimizzare i punti di interruzione in base al contenuto e di mantenere il minor numero possibile di punti di interruzione.
Lavoriamo con l’esempio che abbiamo visto all’inizio: le previsioni del tempo. Il primo passo è fare in modo che le previsioni appaiano buone su un piccolo schermo.
Quindi, ridimensiona il browser finché non c’è troppo spazio bianco tra gli elementi e la previsione semplicemente non sembra così buona. La decisione è alquanto soggettiva, ma soprattutto 600pxè sicuramente troppo ampia.
Per inserire un punto di interruzione in 600px, crea due media query alla fine del tuo CSS per il componente, una da utilizzare quando il browser è 600pxe sotto e una per quando è più largo di 600px.
@media (max-width: 600px) {
}
@media (min-width: 601px) {
}Infine, refactoring il CSS. All’interno della media query per a max-widthof 600px, aggiungi il CSS che è solo per schermi piccoli. All’interno della media query per una min-widthdi 601pxadd CSS per schermi più grandi.
Scegli punti di interruzione minori quando necessario #
Oltre a scegliere i punti di interruzione principali quando il layout cambia in modo significativo, è anche utile regolare le modifiche minori. Ad esempio, tra i punti di interruzione principali può essere utile regolare i margini o il riempimento su un elemento o aumentare la dimensione del carattere per renderlo più naturale nel layout.
Iniziamo ottimizzando il layout del piccolo schermo. In questo caso, aumentiamo il carattere quando la larghezza della finestra è maggiore di 360px. Secondo, quando c’è abbastanza spazio, possiamo separare le temperature alte e basse in modo che siano sulla stessa linea invece che una sopra l’altra. E rendiamo anche le icone del tempo un po’ più grandi.
@media (min-width: 360px) {
body {
font-size: 1.0em;
}
}
@media (min-width: 500px) {
.seven-day-fc .temp-low,
.seven-day-fc .temp-high {
display: inline-block;
width: 45%;
}
.seven-day-fc .seven-day-temp {
margin-left: 5%;
}
.seven-day-fc .icon {
width: 64px;
height: 64px;
}
}Allo stesso modo, per gli schermi di grandi dimensioni è meglio limitare alla larghezza massima del pannello di previsione in modo che non consumi l’intera larghezza dello schermo.
@media (min-width: 700px) {
.weather-forecast {
width: 700px;
}
}Ottimizza il testo per la lettura #
La teoria della leggibilità classica suggerisce che una colonna ideale dovrebbe contenere da 70 a 80 caratteri per riga (da circa 8 a 10 parole in inglese). Pertanto, ogni volta che la larghezza di un blocco di testo aumenta di circa 10 parole, prendi in considerazione l’aggiunta di un punto di interruzione.
Diamo uno sguardo più approfondito all’esempio di post del blog sopra. Sugli schermi più piccoli, il carattere Roboto 1emfunziona perfettamente dando 10 parole per riga, ma gli schermi più grandi richiedono un punto di interruzione. In questo caso, se la larghezza del browser è maggiore di 575px, la larghezza ideale del contenuto è 550px.
@media (min-width: 575px) {
article {
width: 550px;
margin-left: auto;
margin-right: auto;
}
}Evita semplicemente di nascondere il contenuto #
Fai attenzione quando scegli quale contenuto nascondere o mostrare a seconda delle dimensioni dello schermo. Non nascondere semplicemente il contenuto solo perché non puoi adattarlo allo schermo. La dimensione dello schermo non è un’indicazione definitiva di ciò che un utente potrebbe desiderare. Ad esempio, eliminare il conteggio dei pollini dalle previsioni del tempo potrebbe essere un problema serio per chi soffre di allergie primaverili che hanno bisogno delle informazioni per determinare se possono uscire o meno.
Visualizza i punti di interruzione delle query multimediali in Chrome DevTools #
Una volta impostati i punti di interruzione delle query multimediali, vorrai vedere come appare il tuo sito con loro. Puoi ridimensionare la finestra del browser per attivare i punti di interruzione, ma Chrome DevTools ha una funzione integrata che rende facile vedere come appare una pagina sotto diversi punti di interruzione.
Per visualizzare la tua pagina sotto diversi punti di interruzione:
Apri DevTools e quindi attiva la Modalità dispositivo . Questo si apre in modalità reattiva per impostazione predefinita.
Per visualizzare le query multimediali, apri il menu Modalità dispositivo e seleziona Mostra query multimediali per visualizzare i punti di interruzione come barre colorate sopra la pagina.
Fai clic su una delle barre per visualizzare la tua pagina mentre la query multimediale è attiva. Fare clic con il pulsante destro del mouse su una barra per passare alla definizione della query multimediale.