La guida per professionisti al responsive web design

Contenuto

• Immagini reattive
• Prestazione
• Caricamento condizionale e pigro
• Tipografia reattiva
• Query multimediali in JavaScript
• Miglioramento progressivo
• disposizione
• Layout della griglia CSS
• Finalmente

Il responsive web design sembra incredibilmente semplice. Optare per griglie flessibili per il layout, utilizzare supporti flessibili (immagini, video, iframe) e applicare query multimediali per aggiornare queste misurazioni per organizzare al meglio i contenuti su qualsiasi viewport. In pratica abbiamo imparato che non è proprio così facile. Piccoli problemi che sorgono durante ogni progetto ci tengono a grattarci la testa e, occasionalmente, anche a scolpire trincee con le unghie sulle nostre scrivanie.

Da quando ho iniziato a curare la newsletter Responsive Design Weekly, ho avuto la fortuna di parlare con molti membri della comunità web e ascoltare le loro esperienze. Volevo scoprire esattamente cosa la comunità volesse veramente imparare, quindi ho fatto circolare un sondaggio tra i lettori. Ecco i risultati migliori:

1. Immagini reattive
2. Migliorare le prestazioni
3. Tipografia reattiva
4. Query multimediali in JavaScript
5. Miglioramento progressivo
6. disposizione

Con questi argomenti in mente, ho eseguito una serie di podcast chiedendo ad alcuni dei nostri leader del settore i loro pensieri. Nelle loro risposte, un punto era unanime: concentrati sull'apprendimento delle basi prima di iniziare a preoccuparti di tecniche avanzate e avvincenti. Riportando le cose alle basi, siamo in grado di creare un'interfaccia affidabile per tutti, stratificando le funzionalità quando il dispositivo o il contesto dell'utente lo consentono.

'Allora ... che mi dici di queste tecniche avanzate?' Ti sento chiedere. Penso che Stephen Hay lo abbia riassunto meglio quando ha detto: 'L'ultima tecnica RWD è iniziare non utilizzando alcuna tecnica RWD avanzata. Inizia con contenuti strutturati e costruisci la tua strada. Aggiungi un punto di interruzione solo quando il design si interrompe e il contenuto lo impone e ... il gioco è fatto. "

In questo articolo, inizierò con le basi e aggiungerò livelli di complessità come la situazione lo consente, per costruire queste tecniche avanzate. Iniziamo.

Immagini reattive

I media fluidi erano una parte fondamentale di RWD quando fu definito per la prima volta da Ethan Marcotte. larghezza: 100%; , larghezza massima: 100%; funziona ancora oggi, ma il panorama delle immagini reattive è diventato molto più complicato. Con un numero crescente di dimensioni dello schermo, densità di pixel e dispositivi da supportare, desideriamo un maggiore controllo.

Le tre preoccupazioni principali sono state definite dal Responsive Images Community Group (RICG):

1. La dimensione in kilobyte dell'immagine che stiamo inviando in rete
2. La dimensione fisica dell'immagine che stiamo inviando a dispositivi con DPI elevato
3. L'immagine viene ritagliata sotto forma di direzione artistica per le dimensioni particolari del riquadro di visualizzazione

Yoav Weiss, con l'aiuto di Indiegogo, ha svolto la maggior parte del lavoro sull'implementazione di Blink, il fork di WebKit di Google, e nel momento in cui leggerai questo articolo verrà fornito in Chrome e Firefox. Safari 8 spedirà srcset, tuttavia l'attributo size è solo nelle build notturne e picture> non è ancora implementato.

Con l'arrivo di qualcosa di nuovo nel nostro processo di sviluppo web, può essere difficile iniziare. Esaminiamo un esempio passo dopo passo.

img! - Dichiara l'immagine di riserva per tutti i browser che non supportano le immagini -> src = "horse-350.webp"! - Dichiara tutte le dimensioni dell'immagine in srcset. Includere la larghezza dell'immagine utilizzando il descrittore w per informare il browser della larghezza di ciascuna immagine. -> srcset = "horse-350.webp 350w, horse-500.webp 500w, horse-1024.webp 1024w, horse.webp 2000w "! - Le dimensioni informano il browser del layout del nostro sito. Qui stiamo dicendo per qualsiasi viewport che è 64ems e più grande, usa un'immagine che occuperà il 70% del viewport - >izes = "(min-width: 64em) 70vw,! - Se il viewport non è quello big, quindi per qualsiasi viewport che è 37.5ems e più grande, usa un'immagine che occupa il 95% del viewport -> (min-width: 37.5em) 95vw,! - e se il viewport è più piccolo di quello, allora usa un'immagine che occupa il 100% del viewport -> 100vw "! - ha sempre un alt text. -> alt =" A horse "/>

Dal punto di vista delle prestazioni, non importa se utilizzi min-width o max-width nell'attributo size, ma l'ordine di origine è importante. Il browser utilizzerà sempre la prima dimensione corrispondente.

Inoltre, ricorda che stiamo codificando l'attributo taglie in modo che sia definito direttamente rispetto al nostro design. Ciò potrebbe causare problemi nell'avanzamento. Ad esempio, se riprogetti il ​​tuo sito, dovrai rivisitare tutte le immagini> o immagini> e ridefinire le dimensioni. Se stai usando un CMS, questo può essere superato come parte del tuo processo di costruzione.

WordPress ha già un plugin per aiutare. Definisce lo srcset sulle varietà di immagini standard di WP e consente di dichiarare le dimensioni in una posizione centrale. Quando la pagina viene generata dal database, sostituisce tutte le menzioni su img> e le sostituisce con il markup dell'immagine.

Di base

• Pensa se hai davvero bisogno di includere un'immagine. Il contenuto principale dell'immagine è o è decorativo? Un'immagine in meno significherà un tempo di caricamento più veloce
• Ottimizza le immagini che devi includere usando ImageOptim
• Imposta le intestazioni di scadenza per le tue immagini sul tuo server o file .htaccess (vedi i dettagli in "Prestazioni")
• PictureFill fornisce il supporto polyfill per le immagini

Avanzate

• Lazy load le tue immagini utilizzando il plug-in Lazy Load di jQuery
• Usa HTMLImageElement.Sizes e HTMLPictureElement per il rilevamento delle funzionalità.
• Il plugin avanzato PictureFill WP, che si trova su Github, ti consentirà di definire larghezze di immagini personalizzate e valori di dimensioni

Prestazione

Per ottenere le prestazioni più veloci percepite sulle nostre pagine, abbiamo bisogno di tutto il codice HTML e CSS richiesto per rendere la parte superiore della nostra pagina entro la prima risposta dal server. Quel numero magico è 14kb e si basa sulla dimensione massima della finestra di congestione entro il primo tempo di andata e ritorno (RTT).

Patrick Hamann, responsabile tecnico frontend al Guardian, e il suo team sono riusciti a rompere la barriera dei 1000 ms utilizzando un misto di tecniche frontend e backend. L'approccio del Guardian è garantire che il contenuto richiesto, l'articolo, venga consegnato all'utente il più rapidamente possibile e entro il numero magico di 14 kb.

Diamo un'occhiata al processo:

1. L'utente fa clic su un collegamento di Google a una notizia
2. Una singola richiesta di blocco viene inviata al database per l'articolo. Non sono richieste storie o commenti correlati
3. L'HTML viene caricato contenente Critical CSS
4. nella testa>
5. Viene avviato un processo "Taglia la senape" e vengono caricati tutti gli elementi condizionali basati sulle funzionalità del dispositivo dell'utente
6. Qualsiasi contenuto correlato o che supporta l'articolo stesso (immagini dell'articolo correlato, commenti agli articoli e così via) viene caricato in modo pigro

Ottimizzare il percorso di rendering critico in questo modo significa che head> è lungo 222 righe. Tuttavia, il contenuto critico che l'utente è venuto a vedere rientra ancora nel payload iniziale di 14kb quando gzippato. È questo processo che aiuta a rompere quella barriera di rendering di 1000 ms.

Caricamento condizionale e pigro

Il caricamento condizionale migliora l'esperienza dell'utente in base alla funzionalità del dispositivo. Strumenti come Modernizr ti consentono di testare queste funzionalità, ma tieni presente che solo perché un browser dice di offrire supporto, ciò non significa sempre supporto completo.

Una tecnica consiste nel trattenere il caricamento di qualcosa fino a quando l'utente non mostra l'intenzione di utilizzare quella funzione. Questo sarebbe considerato condizionale. Puoi sospendere il caricamento nelle icone social fino a quando l'utente si posiziona o tocca le icone, oppure potresti evitare di caricare una mappa Google iframe su finestre più piccole in cui è probabile che l'utente preferisca il collegamento a un'applicazione di mappatura dedicata. Un altro approccio è "Tagliare la senape" - vedi riquadro sopra per i dettagli su questo.

Il caricamento lento è definito come qualcosa che intendi sempre caricare sulla pagina - immagini che fanno parte dell'articolo, commenti o altri articoli correlati - ma che non devono essere presenti affinché l'utente inizi a consumare il contenuto.

Di base

• Abilita gzipping per i file e imposta le intestazioni di scadenza per tutto il contenuto statico (netm.ag/expire-260)
• Usa il plugin jQuery Lazy Load. Carica le immagini quando ci si avvicina al viewport o dopo un certo periodo di tempo

Avanzate

• Configura Fastly o CloudFlare. Le reti di distribuzione dei contenuti (CDN) forniscono i tuoi contenuti statici agli utenti più velocemente del tuo server e hanno alcuni livelli gratuiti
• Abilita SPDY per i browser abilitati per http2 per sfruttare le funzionalità http2 come le richieste http parallele
• Social Count consente il caricamento condizionale delle tue icone social
• L'utilizzo dell'API di mappe statiche ti consentirà di cambiare le mappe interattive di Google per le immagini. Dai un'occhiata all'esempio di Brad Frost su netm.ag/static-260
• Ajax Include Pattern caricherà frammenti di contenuto da un attributo data-before, data-after o data-replace

Tipografia reattiva

La tipografia significa rendere i tuoi contenuti facili da digerire. La tipografia reattiva estende questo per garantire la leggibilità su un'ampia varietà di dispositivi e finestre. Jordan Moore ammette che quel tipo è una cosa su cui non è disposto a muoversi. Rilascia una o due immagini se ne hai bisogno, ma assicurati di avere un bel tipo.

Stephen Hay suggerisce di impostare la dimensione del carattere HTML al 100% (leggi: lasciala così com'è) perché ogni produttore di browser o dispositivo rende un valore predefinito ragionevolmente leggibile per una particolare risoluzione o dispositivo. Per la maggior parte dei browser desktop questo è 16px.

D'altra parte, Moore utilizza l'unità REM e la dimensione del carattere HTML per impostare una dimensione minima del carattere per determinati elementi di contenuto. Ad esempio, se desideri che il sottotitolo di un articolo sia sempre 14px, impostalo come dimensione del carattere di base sull'elemento HTML e imposta .byline {font-size: 1rem;}. Mentre ridimensionate il corpo: font-size: per adattarlo alla visualizzazione, non influirete sullo stile .by-line.

Anche una buona lunghezza della riga di lettura è importante: punta da 45 a 65 caratteri. C'è un bookmarklet che puoi utilizzare per controllare i tuoi contenuti. Se stai supportando più lingue con il tuo design, anche la lunghezza della linea potrebbe variare. Moore suggerisce di utilizzare: lang (de) article {max-width: 30em} per coprire eventuali problemi.

Per mantenere il ritmo verticale, imposta il margine inferiore rispetto ai blocchi di contenuto, ul>, ol>, blockquote>, table>, blockquote> e così via, allo stesso modo dell'altezza della tua riga. Se il ritmo viene interrotto con l'introduzione di immagini, è possibile risolverlo aggiungendo Baseline.js o BaselineAlign.js.

Di base

• Basa il tuo carattere sul corpo al 100%
• Lavora in unità em relative
• Imposta i margini all'altezza della linea per mantenere il ritmo verticale nel tuo disegno

Avanzate

• Migliora le prestazioni di caricamento dei caratteri con Enhance.js o il caricamento differito dei caratteri
• Usa Sass @includes per i titoli semantici.
• Spesso è necessario utilizzare lo stile h5 in un widget della barra laterale che richiede il markup h2. Usa i mixin tipografici di Bearded per controllare le dimensioni e rimanere semantico con il codice seguente:

.sidebar h2 {@include header-5}

Query multimediali in JavaScript

Da quando siamo stati in grado di controllare il layout in una varietà di finestre tramite query multimediali, abbiamo cercato un modo per collegarlo all'esecuzione del nostro JavaScript. Esistono alcuni modi per attivare JavaScript su determinate larghezze, altezze e orientamenti di viewport e alcune persone intelligenti hanno scritto alcuni plugin JS nativi di facile utilizzo come Enquire.js e Simple State Manager. Potresti persino costruirlo tu stesso usando matchMedia. Tuttavia, hai il problema di dover duplicare le tue query multimediali in CSS e JavaScript.

Aaron Gustafson ha un trucco preciso che significa che non devi gestire e abbinare le tue query multimediali nel tuo CSS e nel tuo JS. L'idea è venuta originariamente da Jeremy Keith e in questo esempio Gustafson l'ha portata a una piena implementazione.

Usando getActiveMQ (netm.ag/media-260), inserisci div # getActiveMQ-watcher alla fine dell'elemento body e nascondilo. Quindi all'interno del set CSS # getActiveMQ-watcher {font-family: break-0;} alla prima media query, font-family: break-1; al secondo, font-family: break-2; alla terza e così via.

Lo script utilizza watchResize () (netm.ag/resize-260) per verificare se la dimensione del riquadro di visualizzazione è cambiata, quindi rilegge la famiglia di caratteri attiva. Ora puoi usarlo per agganciare miglioramenti JS come l'aggiunta di un'interfaccia a schede a un dl> quando il viewport lo consente, la modifica del comportamento di una lightbox o l'aggiornamento del layout di una tabella dati. Controlla il codice getActiveMQ su netm.ag/active-260.

Di base

• Dimentica JavaScript per diversi viewport. Fornire agli utenti contenuti e funzioni del sito Web in modo che possano accedervi da tutte le finestre. Non dovremmo mai aver bisogno di JavaScript

Avanzate

• Estendi il metodo di Gustafson utilizzando Breakup come elenco predefinito di query multimediali e automatizzando la creazione dell'elenco di famiglie di caratteri per getActiveMQ-watcher

Miglioramento progressivo

Un malinteso comune sul miglioramento progressivo è che le persone pensano: "Oh beh, non posso usare questa nuova funzionalità", ma in realtà è il contrario. Il miglioramento progressivo significa che puoi fornire una funzione se è supportata solo in uno o addirittura nessun browser e nel tempo le persone avranno un'esperienza migliore con l'arrivo di nuove versioni.

Se guardi la funzione principale di qualsiasi sito web, puoi distribuirla come HTML e fare in modo che il lato server si occupi di tutta l'elaborazione. Pagamenti, moduli, Mi piace, condivisione, e-mail, dashboard: tutto può essere fatto. Una volta che il compito di base è stato costruito, possiamo quindi sovrapporre le fantastiche tecnologie, perché abbiamo una rete di sicurezza per catturare quelli che cadono. La maggior parte degli approcci avanzati di cui abbiamo parlato qui si basano sul miglioramento progressivo.

disposizione

Il layout flessibile è semplice da dire, ma ha molti approcci diversi. Crea semplici layout di griglia con meno markup usando: nth-child () selector.

/ * dichiara la prima larghezza del cellulare per la griglia * / .grid-1-4 {float: left; larghezza: 100%; } / * Quando il viewport è almeno 37.5em, imposta la griglia al 50% per elemento * / @media (min-width: 37.5em) {.grid-1-4 {width: 50%; } / * Cancella il float ogni secondo elemento DOPO il primo. Questo mira al 3 °, 5 °, 7 °, 9 ° ... nella griglia. * / .Grid-1-4: nth-of-type (2n + 1) {clear: left; }} @media (larghezza minima: 64em) {.grid-1-4 {larghezza: 25%; } / * Rimuove il precedente clear * / .grid-1-4: nth-of-type (2n + 1) {clear: none; } / * Cancella il float ogni 4 elementi DOPO il primo. Questo ha come obiettivo il 5 °, 9 ° ... nella griglia. * / .Grid-1-4: nth-of-type (4n + 1) {clear: left; }}

Saluta l'uso della posizione e fluttua per i tuoi layout. Sebbene ci abbiano servito bene fino ad oggi, il loro uso per il layout è stato un trucco necessario. Ora abbiamo due nuovi bambini sul blocco che aiuteranno a risolvere tutti i nostri problemi di layout: Flexbox e Griglie.

Flexbox è ottimo per i singoli moduli, controllando il layout di parti di contenuto all'interno di ciascuno dei moduli. Ci sono layout che tentiamo di fornire che possono essere realizzati più facilmente utilizzando Flexbox, e questo è ancora più vero con i siti reattivi. Per ulteriori informazioni, consulta la guida di CSS Tricks a Flexbox o Flexbox Polyfill.

Layout della griglia CSS

La griglia è più per il layout a livello macro. Il modulo di layout Grid ti offre un ottimo modo per descrivere il tuo layout all'interno del tuo CSS. Anche se al momento è ancora in fase di bozza, consiglio questo articolo sul layout CSS Grid di Rachel Andrew.

Finalmente

Questi sono solo alcuni suggerimenti per estendere la tua pratica reattiva. Quando ti avvicini a un nuovo lavoro reattivo, fai un passo indietro e assicurati di avere le basi giuste. Inizia con i tuoi contenuti, l'HTML e le esperienze migliorate a livello su di essi e non ci sarà alcun limite a dove puoi portare i tuoi progetti.

Questo articolo è apparso originariamente nel numero 260 di net magazine.