Introduzione al responsive web design: pseudo-elementi, media query e altro

Al giorno d'oggi, il tuo sito Web sarà visitato da un'ampia varietà di dispositivi: desktop con monitor di grandi dimensioni, laptop di medie dimensioni, tablet, smartphone e altro ancora.

Per ottenere un'esperienza utente ottimale come ingegnere front-end, il tuo sito dovrebbe adattare il suo layout in risposta a questi vari dispositivi (ad esempio, alle loro varie risoluzioni e dimensioni dello schermo). Il processo di risposta alla forma del dispositivo dell'utente viene chiamato (avete indovinato) responsive web design (RWD).

Perché vale la pena dedicare del tempo a studiare esempi di web design reattivi e spostare la tua attenzione su RWD? Alcuni web designer, ad esempio, fanno del loro meglio per garantire un'esperienza utente stabile su tutti i browser, spesso trascorrendo giornate intere ad affrontare piccoli problemi con Internet Explorer.

Questo è un approccio sciocco.

Mashable ha definito il 2013 l'anno del responsive web design. Come mai? Oltre il 30% del loro traffico proviene da dispositivi mobili. Prevedono che questo numero potrebbe raggiungere il 50% entro la fine dell'anno. Nel web in generale, nel 2013 il 17,4% del traffico web proveniva da smartphone. Allo stesso tempo, l'utilizzo di Internet Explorer, ad esempio, rappresenta solo il 12% di tutto il traffico del browser , in calo di circa il 4% rispetto a questo periodo dell'anno scorso (secondo alle scuole W3). Se stai ottimizzando per un browser specifico, piuttosto che per la popolazione globale di smartphone, ti manca la foresta per gli alberi. E in alcuni casi, questo può fare la differenza tra successo e fallimento: il design reattivo ha implicazioni per tassi di conversione, SEO, frequenze di rimbalzo e altro ancora.

L'approccio Responsive Web Design

Ciò che viene comunemente ignorato su RWD è che non si tratta solo di regolare l'aspetto delle tue pagine web; invece, l'obiettivo dovrebbe essere quello di adattare logicamente il tuo sito per l'utilizzo su diversi dispositivi. Ad esempio: l'utilizzo del mouse non offre la stessa esperienza utente, ad esempio, del touchscreen. Non sei d'accordo? Il tuo layout mobile e desktop reattivo dovrebbe riflettere queste differenze.

Allo stesso tempo, non vuoi riscrivere completamente il tuo sito per ciascuna delle decine di diverse dimensioni dello schermo su cui potrebbe essere visualizzato: un simile approccio è semplicemente impossibile. Invece, la soluzione consiste nell'implementare elementi di progettazione reattiva flessibili che utilizzano lo stesso codice HTML per adattarsi alle dimensioni dello schermo dell'utente.

Da un punto di vista tecnico, la soluzione sta in questo tutorial di responsive design: utilizzo di media query CSS, pseudo-elementi, layout di griglia flessibili e altri strumenti per adattarsi dinamicamente a una determinata risoluzione.

Query sui media nel design reattivo

I tipi di media sono apparsi per la prima volta in HTML4 e CSS2.1, che hanno consentito il posizionamento di CSS separati per lo schermo e la stampa. In questo modo è stato possibile impostare stili separati per la visualizzazione di una pagina dal computer rispetto alla sua stampa.

 <link rel="stylesheet" type="text/css" href="screen.css" media="screen"> <link rel="stylesheet" type="text/css" href="print.css" media="print">

o

 @media screen { * { background: silver } }

In CSS3, puoi definire gli stili a seconda della larghezza della pagina. Poiché la larghezza della pagina è correlata alle dimensioni del dispositivo dell'utente, questa funzionalità consente quindi di definire layout diversi per dispositivi diversi. Nota: le media query sono supportate da tutti i principali browser.

Questa definizione è possibile attraverso l'impostazione delle proprietà di base: max-width , device-width , orientation e color . Sono possibili anche altre definizioni; ma in questo caso le cose più importanti da notare sono la risoluzione minima (larghezza) e le impostazioni di orientamento (orizzontale vs. ritratto).

L'esempio CSS reattivo riportato di seguito mostra la procedura per avviare un determinato file CSS rispetto alla larghezza della pagina. Ad esempio, se 480px è la risoluzione massima dello schermo del dispositivo corrente, verranno applicati gli stili definiti in main_1.css.

 <link rel="stylesheet" media="screen and (max-device-width: 480px)" href="main_1.css" />

Possiamo anche definire stili diversi all'interno dello stesso foglio di stile CSS in modo che vengano utilizzati solo se vengono soddisfatti determinati vincoli. Ad esempio, questa parte del nostro CSS reattivo verrebbe utilizzata solo se il dispositivo corrente avesse una larghezza superiore a 480px:

 @media screen and (min-width: 480px) { div { float: left; background: red; } ....... }

"Zoom intelligente"

I browser mobili utilizzano il cosiddetto "zoom intelligente" per fornire agli utenti un'esperienza di lettura "superiore". Fondamentalmente, lo zoom intelligente viene utilizzato per ridurre proporzionalmente le dimensioni della pagina. Ciò può manifestarsi in due modi: (1) zoom avviato dall'utente (ad esempio, toccando due volte lo schermo di un iPhone per ingrandire il sito Web corrente) e (2) visualizzando inizialmente una versione ingrandita di una pagina Web su carico.

Dato che possiamo semplicemente utilizzare le query multimediali reattive per risolvere qualsiasi problema a cui potrebbe essere mirato lo zoom intelligente, è spesso desiderabile (o addirittura necessario) disabilitare lo zoom e garantire che il contenuto della tua pagina riempia sempre il browser:

 <meta name="viewport" content="width=device-width, initial-scale=1" />

Impostando initial-scale 1, controlliamo il livello di zoom della pagina iniziale (ovvero, la quantità di zoom al caricamento della pagina). Se hai progettato la tua pagina web in modo che sia reattiva, il tuo layout fluido e dinamico dovrebbe riempire lo schermo dello smartphone in modo intelligente senza richiedere alcuno zoom iniziale.

Inoltre, possiamo disabilitare completamente lo zoom con user-scalable=false .

Larghezza pagina

Supponiamo che tu stia cercando di fornire tre diversi layout di pagina reattivi: uno per desktop, uno per tablet (o laptop) e uno per smartphone. Quali dimensioni della pagina dovresti scegliere come target di interruzione (ad es. 480 px)?

Sfortunatamente, non esiste uno standard definito per le larghezze della pagina da scegliere come target, ma vengono spesso utilizzati i seguenti valori reattivi di esempio:

• 320px
• 480px
• 600px
• 768px
• 900px
• 1024px
• 1200px

Tuttavia, esistono diverse definizioni di larghezza. Ad esempio, da 320 in su ha cinque incrementi di media query CSS3 predefiniti: 480, 600, 768, 992 e 1382px. Insieme all'esempio fornito in questo tutorial di sviluppo Web reattivo, potrei enumerare almeno altri dieci approcci.

Con uno qualsiasi di questi ragionevoli insiemi di incrementi, puoi scegliere come target la maggior parte dei dispositivi. In pratica, di solito non è necessario gestire separatamente tutti i suddetti esempi di larghezze di pagina: sette risoluzioni diverse sono probabilmente eccessive. Nella mia esperienza, 320px, 768px e 1200px sono i più comunemente usati; questi tre valori dovrebbero essere sufficienti per il targeting rispettivamente di smartphone, tablet/laptop e desktop.

Psuedo-Elementi

Basandosi sulle query multimediali reattive dell'esempio precedente, potresti anche voler mostrare o nascondere determinate informazioni in modo programmatico in base alle dimensioni del dispositivo dell'utente. Fortunatamente, anche questo può essere ottenuto con CSS puro, come descritto nel tutorial qui sotto.

Per cominciare, nascondere alcuni elementi ( display: none; ) può essere un'ottima soluzione quando si tratta di ridurre il numero di elementi sullo schermo per il layout di uno smartphone, dove lo spazio è quasi sempre insufficiente.

Ma oltre a ciò, puoi anche diventare creativo con pseudo-elementi CSS (selettori), ad esempio :before e :after . Nota: ancora una volta, gli pseudo-elementi sono supportati da tutti i principali browser.

Gli pseudo-elementi vengono utilizzati per applicare stili specifici a porzioni specifiche di un elemento HTML o per selezionare un determinato sottoinsieme di elementi. Ad esempio, lo pseudo-elemento :first-line ti permette di definire gli stili esclusivamente sulla prima riga di un determinato selettore (ad esempio, p:first-line si applicherà alla prima riga di tutti i p ). Allo stesso modo, lo pseudo-elemento a:visited ti permetterà di definire gli stili su tutte le a con link precedentemente visitati dall'utente. Chiaramente, questi possono tornare utili.

Ecco un semplice esempio di design reattivo in cui creiamo tre diversi layout per un pulsante di accesso, uno per desktop, tablet e smartphone. Sullo smartphone avremo un'icona solitaria, mentre il tablet avrà la stessa icona accompagnata da “Nome utente”. Infine, per il desktop, aggiungeremo anche un breve messaggio di istruzioni ("Inserisci il tuo nome utente").

 .username:after { content:"Insert your user name"; } @media screen and (max-width: 1024px) { .username:before { content:"User name"; } } @media screen and (max-width: 480px) { .username:before { content:""; } }

Usando solo gli pseudo-elementi :before e :after , otteniamo quanto segue:

Per ulteriori informazioni sulla magia degli pseudo-elementi, Chris Coyier ha un buon articolo su CSS-Tricks.

Quindi, da dove dovrei iniziare?

In questo tutorial, abbiamo stabilito alcuni degli elementi costitutivi del responsive web design (ad esempio media query e pseudo-elementi) e abbiamo presentato alcuni esempi di ciascuno. Dove andiamo da qui?

Il primo passo da compiere è organizzare tutti gli elementi della tua pagina web in varie dimensioni dello schermo.

Dai un'occhiata alla versione desktop del layout presentato sopra. In questo caso, il contenuto a sinistra (il rettangolo verde) potrebbe fungere da una sorta di menu principale. Ma quando sono in uso dispositivi con una risoluzione inferiore (ad esempio, un tablet o uno smartphone), potrebbe avere senso che questo menu principale venga visualizzato a tutta larghezza. Con le media query, puoi implementare questo comportamento come segue:

 @media screen and (max-width: 1200px) { .menu { width: 100%; } } @media screen and (min-width: 1200px) { .menu { width: 30%; } }

Sfortunatamente, questo approccio di base è spesso insufficiente poiché il tuo front-end cresce in complicazioni. Poiché l'organizzazione dei contenuti di un sito spesso differisce in modo significativo tra le versioni per dispositivi mobili e desktop, l'esperienza dell'utente alla fine dipende dall'uso non solo di CSS reattivi, ma anche di HTML e JavaScript.

Quando si determinano layout reattivi per dispositivi diversi, sono importanti diversi elementi chiave. A differenza delle versioni desktop in cui abbiamo spazio sufficiente per il contenuto, lo sviluppo per smartphone è più impegnativo. Più che mai è necessario raggruppare contenuti specifici e definire gerarchicamente l'importanza delle singole parti.

Anche i vari usi dei tuoi contenuti sono importanti. Ad esempio, quando il tuo utente ha un mouse, può posizionare il cursore sopra determinati elementi per ottenere maggiori informazioni, quindi tu (come sviluppatore web) puoi lasciare alcune informazioni da raccogliere in questo modo, ma questo non sarà il caso quando l'utente è su uno smartphone.

Inoltre, se lasci i pulsanti sul tuo sito che poi vengono visualizzati sugli smartphone come più piccoli di un dito tipico, creerai incertezza nell'utilizzo e nella sensazione del tuo sito. Si noti che nell'immagine sopra, la visualizzazione Web standard (a sinistra) rende alcuni elementi completamente inutilizzabili se visualizzati su un dispositivo più piccolo.

Tale comportamento aumenterà anche le possibilità che il tuo utente commetta un errore, rallentando la sua esperienza. In pratica, ciò può manifestarsi con una diminuzione delle visualizzazioni di pagina, un minor numero di vendite e un minore coinvolgimento generale.

Altri elementi di design reattivi

Quando si utilizzano media query, si dovrebbe tenere a mente il comportamento di tutti gli elementi della pagina, non solo quelli che vengono presi di mira, specialmente quando si utilizzano griglie fluide, nel qual caso (al contrario delle dimensioni fisse) la pagina sarà completamente riempita in qualsiasi dato momento, aumentando e diminuendo proporzionalmente la dimensione del contenuto. Poiché le larghezze sono impostate in percentuale, gli elementi grafici (cioè le immagini) possono essere distorti e alterati in un layout così fluido. Per le immagini, una soluzione è la seguente:

 img { max-width: 100% }

Altri elementi dovrebbero essere trattati in modo simile. Ad esempio, un'ottima soluzione per le icone in RWD è usare IconFonts.

Qualche parola sui sistemi a griglia fluida

Quando discutiamo del processo di adattamento completo del design, spesso osserviamo un'esperienza visiva ottimale (dal punto di vista dell'utente). Tale discussione dovrebbe includere il massimo utilizzo facilitato, l'importanza degli elementi (basata sulle regioni delle pagine visibili), la lettura facilitata e la navigazione intuitiva. Tra queste categorie, uno dei componenti più importanti è la regolazione della larghezza del contenuto . Ad esempio, i cosiddetti sistemi a griglia fluida hanno elementi impostati, cioè elementi basati su larghezze relative come percentuali della pagina complessiva. In questo modo, tutti gli elementi del sistema di web design reattivo si adattano automaticamente alle dimensioni della pagina.

Sebbene questi sistemi a griglia fluida siano strettamente correlati a ciò di cui abbiamo discusso qui, sono in realtà un'entità completamente separata che richiederebbe un tutorial aggiuntivo per discuterne in dettaglio. Pertanto, menzionerò solo alcuni dei principali framework che supportano tale comportamento: Bootstrap, Unsemantic e Brackets.

Conclusione

Fino a poco tempo l'ottimizzazione del sito web era un termine riservato esclusivamente alla personalizzazione delle funzionalità basate su diversi browser web. Oltre all'inevitabile lotta con i diversi standard di browser che dobbiamo affrontare oggi, questo termine ora presuppone l'adattamento ai dispositivi e alle dimensioni dello schermo anche con un web design reattivo. Per tagliarlo sul Web moderno, il tuo sito deve sapere non solo chi lo sta visualizzando, ma anche come .