Il web design reattivo è già la parola d'ordine del decennio ed è ideale per il mondo connesso a più schermi in cui viviamo. Tuttavia, il compromesso è dovuto alle dimensioni dei file più grandi.
Ciò ha spinto alcuni esperti a dire che, come agli albori di Flash, il responsive design è qualcosa su cui tutti potremmo essere entusiasti senza una buona ragione. Tuttavia, mentre al momento ci sono problemi di prestazioni, questi possono essere superati in una certa misura con alcune piccole regolazioni, compressione e ridimensionamento delle immagini.
Il design reattivo carica tutti gli stessi elementi HTML per ogni dispositivo, compresi quelli destinati alla consegna di tablet e desktop. Ciò significa che tutti i contenuti vengono spesso consegnati, incluse immagini e script, indipendentemente dal dispositivo su cui vengono visualizzati.
Uno studio effettuato l'anno scorso ha mostrato che l'86% dei siti reattivi attualmente online fornisce una pagina desktop completa ai dispositivi mobili. Questa è chiaramente una tendenza alla tecnica di progettazione che deve essere affrontata, se vogliamo fermare il progresso di pagine web gonfiate.
Al momento, il responsive design sta aumentando le dimensioni delle pagine e questa è la tendenza che deve essere affrontata, soprattutto se si considera che il 57% degli utenti mobili se ne andrà se il sito non viene caricato entro 3 secondi.
Per coloro che hanno già un design in atto e che vogliono ora ottimizzare, Mobitest può essere usato per misurare le prestazioni al fine di andare avanti e affrontarlo. Naturalmente, quando si pianifica un progetto, l'ottimizzazione sarà più semplice da eseguire in questa fase e le prestazioni dovrebbero sempre essere considerate una parte essenziale del design, piuttosto che un ripensamento.
Per migliorare le prestazioni, è necessario ridurre la dimensione delle pagine e delle risorse caricate. Questo può essere effettuato utilizzando varie tecniche, senza alterare seriamente l'aspetto del sito.
La prima cosa da considerare è come assicurarsi che solo le risorse necessarie siano inviate al dispositivo di destinazione. Questo può essere fatto riducendo al minimo il numero di richieste HTTP, in modo che l'utente spenda meno tempo in attesa del caricamento del DOM. Questo può a sua volta essere fatto comprimendo le risorse CSS e Javascript, per le quali strumenti come Bussola - un framework di authoring CSS open source - può essere usato. Ciò consente agli sviluppatori di creare markup più puliti e creare sprite ed estensioni con il minimo sforzo.
Per quanto riguarda JavaScript, strumenti come UglifyJS può essere usato, che comprime il codice.
Questo può essere considerato una tecnica importante quando si tratta di design reattivo, in quanto può essere utilizzato per assicurarsi che gli utenti mobile e smartphone non scarichino gli aspetti del sito che lo rallentano o che non useranno.
Il caricamento condizionale può essere utilizzato per impedire il caricamento di tutti i tipi di contenuti, inclusi widget sociali, immagini, mappe e molto altro. È importante notare a questo punto che il sito dovrebbe essere accuratamente testato in ogni fase dell'ottimizzazione, in modo che sia facile vedere cosa ha fatto la differenza mentre si procede.
Sappiamo tutti che le immagini sono solitamente responsabili della quantità maggiore di kilobyte in una pagina web. È anche possibile affermare che le immagini progettate per un browser desktop subiscono una sottoperformance quando vengono consegnate a un dispositivo mobile.
Se un sito ha anche molti contenuti legacy, questo influenzerà ancora di più le prestazioni e sarà necessario implementare un modo per impedire il caricamento di questo contenuto. Mentre questo può essere fatto modificando il markup cambiando gli elementi src o img, la soluzione PHP Immagini adattive è probabilmente più facile. Il software rileva le dimensioni dello schermo e crea automaticamente, memorizza nella cache e fornisce le immagini HTML incorporate ridotte in scala, senza la necessità di modificare il markup. Per essere utilizzato in combinazione con le tecniche di Fluid Image, è una soluzione pratica e che farà risparmiare molto tempo. Le immagini adattive utilizzano un file htaccess, un file php e una riga singola di Javascript per determinare le dimensioni dello schermo dei visitatori del sito.
Vale anche la pena di pensare al testo, poiché questo si avvolge naturalmente quando il dispositivo viene ristretto e potrebbe causare problemi di visualizzazione. FitText è uno strumento che può aiutare a risolvere questo problema, un plugin jQuery che aggiorna automaticamente la dimensione del carattere, con opzioni per le dimensioni minima e massima consentite.
Questo è l'ideale per i titoli che possono essere visualizzati male su un dispositivo mobile e consente di ignorare la dimensione del carattere specificato da CSS3. Tuttavia, FitText è destinato esclusivamente ai titoli e non deve essere utilizzato all'interno del testo di paragrafo.
Sebbene il design reattivo abbia i suoi problemi, proprio come qualsiasi tecnica o tecnica relativamente nuova, vale comunque la pena scegliere di costruire un sito in questo modo. Nessuno vuole andare indietro e, anche se potrebbe essere più facile costruire un sito Web mobile, è molto meglio essere il più innovativo possibile.
Google è d'accordo, il loro consiglio è utilizzare il responsive design come il modo migliore di progettare per dispositivi mobili. Ovviamente per i giganti della ricerca, questo significa che hanno solo un URL da sottoporre a scansione, piuttosto che numerosi URL per quello che è essenzialmente lo stesso sito, quindi è davvero nei loro interessi.
Tuttavia, in questo periodo di condivisione sociale ha anche senso, dato che gli utenti mobili possono condividere una pagina con qualcuno che usa un desktop. Per creare un'esperienza uniforme, questo dovrebbe fornire lo stesso contenuto.
Oltre a ciò, avere un sito reattivo migliora la produttività della forza lavoro dato che c'è essenzialmente molto meno da fare. Questo vale per i contenuti, gli aggiornamenti e la SEO, in quanto ciò dovrà essere effettuato separatamente se vengono creati diversi siti.
I dispositivi mobili e i tablet stanno diventando la norma per connettersi a Internet e navigare in questa, quasi, era post-PC. Le vendite di tablet in tutto il mondo sono aumentate vertiginosamente in un solo anno, più che raddoppiando in quel momento e con molti consumatori che ora scelgono diversi dispositivi con Android e iOS.
Non c'è dubbio che il design reattivo finora abbia un impatto positivo, nonostante le preoccupazioni legate alle prestazioni. Secondo un rapporto , che ha chiesto ad alcuni dei migliori marchi del mondo come avere un sito reattivo abbia avuto un impatto sul traffico, le visite su tutti i dispositivi sono aumentate considerevolmente.
Questo ha comportato un aumento medio del 23% da parte dei visitatori di dispositivi mobili e un tasso di rimbalzo inferiore del 26%, con i visitatori che hanno trascorso circa il 7,5% di tempo in più sui siti rispetto a quanto visto in precedenza.
O'Neill, il rivenditore di abbigliamento da surf di tendenza, segnala un tasso di conversione del 65,7% superiore su iPad e iPhone come risultato dello sviluppo di un sito reattivo. Questo ha rappresentato una crescita del fatturato del 101,2% su questi dispositivi da solo.
Per quanto riguarda i dispositivi Android, il tasso di conversione è stato addirittura migliore, con un enorme 407,3%, con un'enorme crescita del 591,4%. Un tasso di conversione più piccolo è stato riscontrato su dispositivi non mobili, sebbene la crescita fosse ancora visibile.
Questo è solo uno dei marchi che pubblicano le loro cifre ed è abbastanza difficile ottenere i dati dagli altri in questo momento, tanto quanto lo era l'impatto dei social media un paio di anni fa. Tuttavia, va in qualche modo a dimostrare che i ritorni dalla progettazione di un sito Web reattivo possono essere notevoli.
Tenendo presente ciò, quale ulteriore motivo ha bisogno di un progettista per iniziare a progettare in modo responsabile per i propri clienti e cercare di assicurarsi che si comportino nel miglior modo possibile? Non ce n'è uno, e quei designer che non vogliono prendersi la briga di imparare come progettare, costruire e ottimizzare un sito utilizzando tecniche reattive potrebbero ritrovarsi nella polvere.
Il 67% degli utenti dichiara di aver acquistato tramite un sito per dispositivi mobili e si ritiene che l'utilizzo di Internet da dispositivo mobile supererà quello del desktop entro il prossimo anno. Tenendo presente tutto ciò, è facile capire perché le aziende diventeranno sempre più interessate alle migliori soluzioni web mobili che possono offrire.
Il design reattivo potrebbe essere ancora agli inizi, ma sembra chiaro che la domanda del mercato lo farà crescere rapidamente, quindi vale la pena imparare quanti più aspetti possibile della disciplina ora.
Quali tecniche hai utilizzato per ottimizzare i siti reattivi? La fornitura di contenuti alternativi annulla i vantaggi del design reattivo? Fateci sapere nei commenti.