Perché devi iniziare a praticare lo sviluppo mobile-first
Pubblicato: 2015-01-12Se hai provato a codificare un sito Web reattivo, ti sei imbattuto in questo problema: cambi una piccola e semplice proprietà CSS e altera il layout su diverse dimensioni dello schermo.
Questo ti costringe a controllare e ricontrollare che il valore del margine più recente non abbia danneggiato il sito per tablet o telefoni. Ovviamente, puoi facilmente risolvere questo problema con sostituzioni specifiche per dimensioni dello schermo diverse. Ma nel corso di un progetto, i file CSS si riempiono di eccezioni ai problemi. Poi ci sono eccezioni per le eccezioni, che poi hanno un'eccezione per l'eccezione dell'eccezione.
Si complica rapidamente e finisci per combattere il tuo stesso codice, consumando molte ore di progetto e perdendo lentamente la tua sanità mentale.
Ma non temere! Lo sviluppo mobile first è qui per salvarti da mal di testa, eccezioni di eccezioni e caricamento lento delle pagine.
Cosa succede con desktop-first dev
Inizialmente lo sviluppo per la versione desktop di un sito web responsive va contro il flusso naturale di un documento CSS. I file CSS vengono letti in modo lineare dall'alto verso il basso, quindi ogni proprietà CSS viene sovrascritta da qualsiasi nuovo stile applicato più in basso nel documento.
Sviluppando per schermi di grandi dimensioni e quindi aggiungendo gli stili mobili più in basso nel documento CSS, compaiono due problemi:
- Eventuali modifiche apportate allo stile del desktop (più in alto nel documento) modificheranno la modalità di visualizzazione del sito per dispositivi mobili se il nuovo stile non viene sovrascritto in modo esplicito per il sito per dispositivi mobili. La creazione di righe extra di CSS frivoli consuma molte ore di progetto e va contro il principio del codice DRY.
- I dispositivi mobili iniziano a caricare una pagina eseguendo il rendering di tutto lo stile del desktop. Una volta che la versione desktop pesante ha terminato il rendering, viene applicato lo stile mobile. Questo carica risorse extra, il che significa che i dispositivi mobili impiegano ancora più tempo per fornire una pagina completamente caricata.
È qui che entra in gioco lo sviluppo mobile-first per salvare la situazione. Questo metodo incoraggia il corretto ordine CSS (da mobile a desktop dall'alto verso il basso), assicurando che un dispositivo applichi le informazioni di cui ha bisogno solo quando ne ha bisogno.
Diamo un'occhiata ad alcune soluzioni a questi problemi.
Che aspetto ha il rendering del dispositivo mobile
Le immagini sono facilmente i maggiori contributori alle dimensioni di un sito Web, impiegando un'eternità per il download se un dispositivo non è connesso al Wi-Fi. Rimuovere le immagini extra dal tuo stile mobile è la cosa migliore che puoi fare per migliorare la velocità di un sito.
Passare prima ai dispositivi mobili significa offrire solo alcune piccole immagini ai dispositivi mobili. Nell'esempio seguente, ho creato lo stesso documento CSS implementato con metodi desktop e mobile first.
Se stai utilizzando il metodo desktop-first, i dispositivi mobili verranno visualizzati nel seguente ordine:
- Leggi il primo stile.
- Scarica l'immagine grande (di prossima sostituzione).
- Rendi l'elemento.
- Leggi lo stile mobile.
- Scarica l'immagine piccola (sostituendo quella grande).
- Rendi di nuovo l'elemento.
Tuttavia, se viene utilizzato il metodo mobile-first, il dispositivo esegue il rendering in questo ordine:
- Leggi il primo stile.
- Scarica l'immagine piccola.
- Salta lo stile solo desktop (poiché non si applica).
- Rendi l'elemento una volta.
Non solo il sito Web ha meno passaggi da eseguire prima di fornire una pagina finita al browser, ma rimuove anche le chiamate extra alle immagini frivole che non vengono utilizzate!
Tieni presente che le query multimediali passeranno da larghezza massima a larghezza minima con lo sviluppo mobile-first. Le query di larghezza massima si applicheranno a tutti i dispositivi di dimensioni inferiori a 1000 px, mentre le query di larghezza minima si applicheranno a dispositivi superiori a 1000 px.
Il passaggio a larghezza minima crea una barriera che impedisce al nuovo stile che scriviamo per dispositivi più grandi di influire sull'aspetto del sito su dispositivi più piccoli. Ciò aumenta la velocità di caricamento dei tuoi siti Web reattivi, assicurando al tempo stesso che qualsiasi modifica all'interno della query multimediale solo desktop non influisca sul layout del dispositivo mobile. È una vittoria per tutti!
Smettila di combattere te stesso
Diciamo che stiamo lavorando a un progetto il cui file CSS è commentato in tre parti principali: desktop, tablet e dispositivi mobili.
Sfortunatamente abbiamo seguito il metodo desktop-first e il sito si sta caricando lentamente per i telefoni. Abbiamo provato a ridimensionare le immagini, aggiungere la memorizzazione nella cache del browser e persino ridurre al minimo l'HTML (lordo). Ma il sito continua a funzionare per i visitatori per la prima volta e deve essere risolto.
Dato che abbiamo costruito il nostro sito con il metodo desktop-first, il nostro CSS sarebbe simile a questo per il nostro elemento .header: 
Il nostro obiettivo è ridurre la quantità di styling inviata ai dispositivi mobili. Per iniziare, dobbiamo fare un inventario di ciò che viene applicato a un elemento, prendendo nota quando stiamo sovrascrivendo i nostri stili.
Innanzitutto, passiamo a un approccio mobile-first. Renderemo mobile il nostro stile predefinito, non richiesto dai media (nota: non farlo in produzione, interromperà il sito e renderà i tuoi clienti scontrosi). 
Diamo di nuovo un'occhiata alle nostre immagini poiché hanno il maggiore impatto sulla velocità del nostro sito.
Poiché non stiamo caricando uno sfondo sui dispositivi mobili, possiamo eliminare quella proprietà. Aggiungeremo le immagini per dispositivi più grandi in un secondo momento, quando sarà effettivamente necessario. Lo stesso vale per la proprietà margin-bottom, lasciandoci con solo due proprietà che devono effettivamente essere applicate per dispositivi mobili!
Passando alla sezione della tavoletta, dovremo spostare gli attributi di sfondo e il riempimento dallo stile del desktop allo stile della tavoletta, poiché la tavoletta è la sezione successiva che verrà renderizzata.
Ricorda, il nostro obiettivo è sovrascrivere una proprietà solo se cambia e aggiungere nuove proprietà solo quando la modifica deve avvenire, come mostrato nell'immagine seguente: 
Molto meglio! Esaminando come un dispositivo mobile renderebbe il nostro CSS appena ottimizzato, diventa subito evidente l'impatto che lo sviluppo mobile first ha sui dispositivi più piccoli rispetto al metodo desktop first.
Lavora in modo più intelligente, non più difficile
Lo sviluppo desktop-first crea più problemi di quanti ne risolva. “Il passaggio a un metodo di sviluppo mobile first ti consente di lavorare in modo intelligente, non duro. "
Durante lo sviluppo di siti reattivi, tieni presente che, per impostazione predefinita, verrà visualizzato tutto ciò che non è all'interno di una query multimediale. Facendo in modo che lo stile predefinito (non richiesto dai media) si adatti ai dispositivi mobili, consentiamo l'invio della minor quantità possibile di informazioni al dispositivo che è più facilmente influenzato dalle dimensioni dei siti web.
Desktop e tablet sono collegati a una connessione Internet veloce il 99,999% delle volte, consentendo il passaggio di grandi quantità di informazioni ad alta velocità. È più probabile che i telefoni carichino informazioni su connessioni Internet lente. Adattare i tuoi fogli di stile per ospitare i dispositivi più sensibili ti consente di offrire ai clienti il miglior sito Web possibile.