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 di eccezionale.

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 piccole dimensioni 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 gocciolano e l'insoddisfazione aumenta, è necessario guardare oltre il design reattivo. L'obiettivo dovrebbe essere invece quello di garantire una performance reattiva. Questo post è più o meno lo stesso.

Quindi, la grande domanda è cosa fare?

Elimina il concetto di design desktop-first

Un contributo significativo a questo problema persistente è che l'attenzione è ancora concentrata su 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 utilizzano generosamente spessori e polyfill. Naturalmente, 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 approccio progettuale rivoluzionario.

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 loro dispositivi mobili per accedervi. Quando un utente digita l'URL di un sito Web su un dispositivo mobile con uno schermo a bassa risoluzione, il suo obiettivo è sempre quello di accedere al contenuto del sito Web, ma ciò che sperimenta è un incubo. Ciò è dovuto alla difficoltà di navigare tra le infinite pubblicità inutili. Rimuovere tali elementi di contenuto evitabili per consentire all'utente di accedere al contenuto principale. Ciò aumenta il traffico del sito, poiché a parte gli 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 funzionalità limitate, ma ancora una volta, 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 eccita nessuno. Secondo alcuni sondaggi di Akamai e Gomez.com, circa il 50% degli utenti Web si aspetta fortemente 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 viene caricato 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, utilizza i pulsanti di condivisione social basati sugli URL in quanto una dimensione così enorme influisce inevitabilmente sul tempo di caricamento del tuo sito Web reattivo anche se la connessione mobile è veloce.

Le prestazioni di un sito Web hanno un impatto diretto sulle prestazioni di un'azienda e un sito Web reattivo lento 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 leggere articoli lunghi. La maggior parte di loro utilizza i propri dispositivi mobili per un facile accesso a Facebook, WhatsApp, Twitter e per godersi la gioia dello shopping online. Inoltre, il mobile non è più una tendenza, è il futuro.

Secondo le statistiche di Comscore dello scorso anno, il numero di utenti Internet solo mobili negli Stati Uniti è aumentato notevolmente mentre gli utenti solo desktop sono ridotti al 10,6%.

Hai bisogno di dire altro per convincere?

Garantire un degrado grazioso

Negli ultimi anni, potresti esserti imbattuto nella nuova parola d'ordine nel mondo del design reattivo ed è "degrado aggraziato". Sì, il degrado grazioso implica che, anche se una funzionalità non funziona correttamente, dovrebbe fallire in modo da facilitare un'usabilità accettabile. Ciò significa creare un sito Web design per un desktop e quindi passare gradualmente a tablet, smartphone e feature phone. Le prestazioni di un design reattivo in cui il sito Web si sta degradando con grazia è destinato ad essere elevato poiché l'esperienza dell'utente è sempre di prim'ordine. Il sito web rimarrà funzionale nonostante eventuali carenze e un visitatore sarà sicuramente colpito dalla qualità complessiva.

Ora, potresti avere questa domanda nella tua mente che cosa c'è di così affascinante nel degrado grazioso. La risposta è semplice. Questo perché rende i tuoi contenuti visibili e leggibili indipendentemente dal browser, il che è un'impresa notevole! Fortunatamente, se stai usando CSS3, il degrado aggraziato diventa un lavoro facile poiché la maggior parte delle proprietà di CSS3 si degrada 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 grazioso degrado. Supponiamo di aver progettato un sito Web reattivo con funzionalità JavaScript e queste funzionalità non sono supportate dal tuo browser o potrebbero essere disabilitate dal 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 capire meglio con la codifica data di seguito:

[xhtml]
<no script>
<h1>Caro John, hai riscontrato un problema!</h1>
<p>Il tuo browser non supporta JavaScript o è temporaneamente disabilitato.
Visita il nostro <a href="/support/browsers/">assistenza browser</a> per assistenza.</p>
</noscript>
[/xhtml]

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 installarlo sul tuo dispositivo mobile. In entrambi i casi, potrai 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 stai utilizzando 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 usate e di quelle non utilizzate 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ù utilizzato per creare un design reattivo è 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à notevolmente il tempo di caricamento della tua pagina. Tuttavia, sarà una pratica precisa analizzare quali biblioteche sono in uso e in che misura.

Verifica la disponibilità delle funzionalità

Puoi verificare se il tuo dispositivo supporta o meno una determinata funzionalità prima di attivarla. Ad esempio, succede 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 del genere, il browser si blocca così gravemente 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 provocato alcuni problemi evidenti come l'arresto anomalo 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 di smartphone Android, ma è anche vero che tali dispositivi sono ancora disponibili immediatamente come nuovi in ​​qualsiasi negozio di telefonia mobile. Molti utenti di dispositivi mobili devono affrontare lo stesso problema di prestazioni anche con l'app YouTube e Twitter. Anche un aggiornamento del servizio Webview del sistema Android di Google tramite Google Play blocca molti smartphone facendoli diventare una sorta di incubo degli 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 Web 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 si impegna nella compressione delle immagini. Ciò rende tali siti più ingombranti e, di conseguenza, il tempo di caricamento aumenta, ma come designer puoi evitare il problema.

Rendi le immagini di dimensioni inferiori utilizzando uno strumento di ottimizzazione delle immagini adatto. Non c'è, infatti, carenza di tali strumenti sul web. Alcuni dei più importanti che puoi utilizzare sono Dynamic Drive, Smush it e Riot. Se sei un professionista in 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. A prima vista può sembrare piacevole, ma se concentri 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 accadrà se lo spazio del titolo che hai pensato di mostrare "Suggerimenti di progettazione Web reattiva" deve mostrare un titolo "10 suggerimenti e tecniche essenziali per una progettazione di siti Web reattiva 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 rendimenti 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 più dispositivi reali che puoi.

Puoi anche utilizzare risorse come Screenfly che ti consentono di testare il tuo sito Web su più risoluzioni dello schermo. Si può obiettare che tutte queste strategie richiedono una notevole quantità di tempo, ma poi, di nuovo, è necessario sudare a fondo per trarne 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 migliori pratiche di cui sopra. Dovresti cercare più soluzioni e potresti spingere al massimo per fornire un sito Web che mostri prestazioni reattive.