La necessità dell’ora non è un design reattivo ma prestazioni reattive
Il design reattivo ha mostrato diversi problemi di prestazioni negli ultimi tempi. L'ironia è che il design reattivo sta andando abbastanza bene sull'ultima gamma di smartphone, ma niente oltre lo stesso.
Potresti essere confuso poiché la maggior parte degli utenti Web ha smartphone di fascia alta. Tuttavia, una vasta popolazione utilizza ancora dispositivi mobili con uno schermo di dimensioni ridotte in esecuzione su una vecchia versione di Android o iOS e forse solo un feature phone con poche funzionalità. Di conseguenza, il design reattivo non serve un pubblico più ampio come dovrebbe.
La convinzione di lunga data che il design reattivo sia per dispositivi mobili di qualsiasi dimensione dello schermo ha molto a che fare con questo problema. Poiché le prestazioni diminuiscono e l'insoddisfazione aumenta, è necessario guardare oltre il responsive design. L'attenzione dovrebbe invece essere rivolta a garantire prestazioni reattive. Questo post è più o meno lo stesso.
Quindi, la grande domanda è cosa fare?
Scarta il concetto di design desktop-first
Un contributo significativo a questo problema persistente è che l'attenzione è ancora rivolta a un approccio di progettazione desktop-first. L'enfasi è sulla progettazione di un sito Web per un desktop e quindi sulla progettazione per altri dispositivi come smartphone e tablet. Per qualsiasi funzionalità mancante, gli sviluppatori usano generosamente shim e polyfill. Certo, ci sono vaste biblioteche per garantire un rapido sviluppo. Tuttavia, questo non risolve il problema dell'incompatibilità del browser. È giustificato impegnarsi in un concetto di design che non sta dando i risultati desiderati?
Non è molto difficile implementare un approccio di progettazione mobile-first in cui l'obiettivo sarà quello di offrire solo le informazioni previste all'utente mobile sul suo schermo invece di tutte le cose che stanno uccidendo il dispositivo. Luke Wroblewski ha concettualizzato questo approccio progettuale per la prima volta nel 2011 e da allora molti esperti del settore hanno lodato il suo rivoluzionario approccio progettuale.
Più dati, anche se impiegano una frazione di secondo, possono avere un notevole impatto sul tempo di caricamento complessivo. Tuttavia, è anche vero che i siti Web stanno diventando più pesanti con contenuti ricchi di grafica e sempre più persone utilizzano i propri dispositivi mobili per accedervi. Quando un utente digita l'URL di un sito web su un cellulare con uno schermo a bassa risoluzione, il suo scopo è sempre quello di accedere ai contenuti del sito web, ma quello che vive è un incubo. Ciò è dovuto alla difficoltà di navigare tra le infinite pubblicità inutili. Rimuovi tali elementi di contenuto evitabili per consentire all'utente di accedere al contenuto principale. Ciò aumenta il traffico del sito, poiché oltre agli utenti con smartphone di fascia alta, molti accederanno al tuo sito Web tramite dispositivi mobili a bassa risoluzione. Fornire una versione di solo testo ha perfettamente senso se il cellulare ha capacità limitate, ma poi di nuovo, potresti dire che l'esperienza dell'utente viene compromessa. Bene, lo è, ma è comunque meglio che non ricevere alcun contenuto. Almeno in tal caso, gli utenti accederanno alle informazioni di base sul tuo sito. Ha senso progettare un sito Web in modo tale da ridurne la portata potenziale?
Accetterai sicuramente il fatto che aspettare all'infinito solo per controllare un sito web non entusiasma nessuno. Secondo alcuni sondaggi di Akamai e Gomez.com, circa il 50% degli utenti Web si aspetta che un sito Web venga caricato entro 2 secondi o anche meno. Ci sono più possibilità di abbandono del sito se un sito web non si carica nel browser in soli 3 secondi! Inoltre, la maggior parte dei siti di e-commerce al giorno d'oggi ha un gran numero di pulsanti di condivisione social come Facebook, Google Plus, Twitter, LinkedIn, ecc. Sai che questi pulsanti aggiungono più di 500 KB al tuo sito reattivo e ne influenzano le prestazioni? Il solo pulsante Mi piace di Facebook richiede un codice compresso di 270 KB! Richiede anche più richieste HTTP. Invece,
Le prestazioni di un sito Web hanno un impatto diretto sulle prestazioni di un'azienda e un sito Web lento e reattivo non fa mai nulla di buono per un'azienda. Che ci crediate o no, la maggior parte degli utenti mobili non è interessata a fare ricerche o a leggere articoli lunghi. La maggior parte di loro utilizza i propri dispositivi mobili per un facile accesso a Facebook, WhatsApp, Twitter e per concedersi la gioia dello shopping online. Inoltre, il mobile non è più una moda, è il futuro.
Secondo le statistiche dell'ultimo anno di Comscore, il numero di utenti Internet solo da dispositivi mobili negli Stati Uniti è aumentato notevolmente, mentre gli utenti solo desktop sono scesi al 10,6%.
Hai bisogno di dire altro per convincere?
Garantire un degrado aggraziato
Negli ultimi anni, potresti esserti imbattuto nella nuova parola d'ordine nel mondo del design reattivo, ed è "grazioso degrado". Sì, il grazioso degrado implica che anche se una funzionalità non funziona correttamente, dovrebbe fallire in modo da facilitare un'usabilità accettabile. Ciò significa creare un design del sito web per un desktop e poi passare gradualmente a tablet, smartphone e feature phone. Le prestazioni di un design reattivo in cui il sito Web si sta degradando con grazia sono destinate ad essere elevate poiché l'esperienza dell'utente è sempre di prim'ordine. Il sito Web rimarrà funzionante nonostante eventuali carenze e un visitatore rimarrà sicuramente colpito dalla qualità complessiva.
Ora, potresti avere questa domanda nella tua mente: cosa c'è di così affascinante nell'aggraziato degrado. La risposta è semplice. Questo perché rende i tuoi contenuti visibili e leggibili indipendentemente dal browser, il che è un'impresa notevole! Fortunatamente, se stai usando i CSS3, il degrado grazioso diventa un lavoro facile poiché la maggior parte delle proprietà dei CSS3 si degradano automaticamente, ad esempio gli angoli arrotondati diventano quadrati, il testo viene avvolto invece di scorrere in una singola riga, i gradienti diventano colori piatti e molto altro.
Facciamo un esempio di graziosa degradazione. Supponiamo che tu abbia progettato un sito Web reattivo con funzionalità JavaScript e che queste funzionalità non siano supportate dal tuo browser o potrebbero essere disabilitate sul lato del tuo cliente. Quindi, cosa puoi fare per ottenere il contenuto? Bene, in tal caso, il degrado grazioso consente al tuo browser di visualizzare il contenuto all'interno del tag "noscript".
Questo puoi capirlo meglio con la codifica fornita di seguito:
<noscript>
<h1>Dear John, you have encountered a problem!</h1>
<p>Your browser lacks support for JavaScript or is temporarily disabled.
Visit our <a href="/support/browsers/">browser support</a> for help.</p>
</noscript>C'è un altro esempio di grazioso degrado che vorrei condividere, ed è l'utilizzo di HTML5 da parte di YouTube per la riproduzione di video. Supponiamo che il tuo browser non supporti HTML5, il video verrà visualizzato utilizzando Flash e, se anche Flash non è installato, riceverai un messaggio per installare lo stesso sul tuo dispositivo mobile. In entrambi i casi, sarai in grado di guardare il video. Tuttavia, uno svantaggio di questo grazioso degrado è che sebbene le prestazioni siano buone, devi scendere a compromessi con alcuni elementi di design se utilizzi browser obsoleti. Immagino che determinare in anticipo gli elementi visivi essenziali del tuo sito web possa fare il trucco.
Non c'è bisogno di conservare le librerie inutilizzate
Una buona pratica può essere quella di non conservare le librerie che non sono in uso. Sì, è vero che tenere traccia delle librerie utilizzate e di quelle inutilizzate richiede molto tempo, ma ne vale davvero la pena. A volte, potresti aver notato che stai utilizzando solo una singola funzionalità dopo l'inclusione di una libreria. A volte possono essere anche due o tre. Lo strumento più spesso che utilizzo per creare un responsive design è jQuery. In effetti, ci sono molte librerie jQuery che aiutano gli sviluppatori a creare siti Web reattivi. L'inclusione di diverse librerie come le librerie JavaScript solo perché ti sono piaciuti alcuni widget aumenterà in modo significativo il tempo di caricamento della pagina. Tuttavia, sarà una buona pratica analizzare quali librerie sono in uso e in che misura.
Verifica la disponibilità delle funzionalità
Puoi verificare se il tuo dispositivo supporta o meno una determinata funzione prima di attivarla. Ad esempio, accade che sebbene tu abbia installato l'ultima versione di Google Chrome sul tuo telefono Android obsoleto, non visualizzi ancora il tuo sito web. A volte, nel tentativo di caricare un sito Web di questo tipo, il browser si arresta in modo così grave da rendere l'intero dispositivo mobile non rispondente. Devi riavviare il dispositivo e questa è l'ultima cosa che hai desiderato, vero? Molti utenti di determinate applicazioni web stanno già soffrendo a causa di questo problema.
L'indisponibilità di funzionalità sui dispositivi e tuttavia la progettazione di siti Web o applicazioni ha comportato alcuni problemi evidenti come l'arresto istantaneo delle app di Google Hangout sui dispositivi Android in tutto il mondo, indipendentemente dal tipo di browser. Questo nonostante il fatto che l'app fosse un'app leggera. Potresti obiettare che gli utenti utilizzavano una versione precedente degli smartphone Android, ma è anche vero che tali dispositivi sono ancora disponibili sullo scaffale come nuovi di zecca in uno qualsiasi dei negozi di telefonia mobile. Molti utenti di dispositivi mobili affrontano lo stesso problema di prestazioni anche con l'app YouTube e Twitter. Anche un aggiornamento del servizio Android System Webview di Google tramite Google Play blocca molti smartphone fino a diventare una sorta di incubo per gli utenti.
Ottimizza le immagini
Includere immagini di grandi dimensioni visivamente accattivanti è sempre allettante per i designer. Il problema sorge quando non comprimono queste immagini prima di caricarle nel CMS. Ciò è particolarmente vero con più siti di e-commerce sul Web. Secondo la recente ricerca di Radware, le pagine stanno diventando più grandi e circa il 45% dei primi 100 siti di vendita al dettaglio non utilizza la compressione delle immagini. Ciò rende tali siti più ingombranti e, di conseguenza, il tempo di caricamento aumenta, ma come designer puoi evitare il problema.
Crea le immagini con dimensioni più piccole utilizzando uno strumento di ottimizzazione delle immagini adatto. In effetti, tali strumenti sul web non mancano. Alcuni di quelli degni di nota che puoi utilizzare sono Dynamic Drive, Smush it e Riot. Se sei un professionista di Photoshop, puoi anche ottimizzare le dimensioni dell'immagine da solo. Usa una tecnica di compressione intelligente e rimuovila da tutti i metadati ridondanti. Anche la conversione della grafica in PNG, delle immagini ricche di colori in JPEG e di quelle animate in GIF fa il trucco.
Preparato per casi estremi
Quando inizi a progettare, devi aver notato che sei tentato di progettare le pagine che sono più facili. Almeno, questo ti consente di mostrare qualcosa ai tuoi stakeholder. Questo può sembrare bello a prima vista, ma se focalizzi i tuoi sforzi verso gli scenari più impegnativi, all'inizio otterrai un buon risultato.
Ad esempio, una pagina Web contenente alcuni articoli, blog e comunicati stampa. Deve avere anche un titolo. Ora, cosa succederà se lo spazio del titolo che hai pensato di mostrare "Suggerimenti per il Web design reattivo" deve mostrare un titolo "10 suggerimenti e tecniche essenziali per un design di siti web reattivo di successo"? Ora, questo è un caso estremo.
Uno sforzo come quello sopra per ottimizzare le prestazioni del tuo sito Web reattivo sembra invisibile. Tuttavia, questi sforzi producono buoni ritorni con utenti felici e soddisfatti. Puoi avvalerti dell'aiuto di vari strumenti come gli strumenti Pingdom che possono consentirti di monitorare il tempo di caricamento del tuo sito Web reattivo senza sforzo. Non saltare l'aspetto vitale del test per assicurarti che il tuo sito Web reattivo funzioni come previsto. Provalo su quanti più dispositivi reali puoi.
Puoi anche utilizzare risorse come Screenfly che ti consente di testare il tuo sito Web su più risoluzioni dello schermo. Puoi sostenere che tutte queste strategie richiedono una notevole quantità di tempo, ma poi di nuovo, è necessario sudare molto per raccogliere i frutti. Al giorno d'oggi, la creazione di un sito Web reattivo con prestazioni reattive è essenziale, tanto più che Google valuta i siti in base alle loro prestazioni. Se sei un designer o uno sviluppatore, non limitarti a nessuna delle best practice di cui sopra. Dovresti cercare più soluzioni e potresti spingere al massimo per fornire un sito Web che mostri prestazioni reattive.