Le opportunità e le sfide del design reattivo
Ad agosto 2011 il 7,12% di tutti i siti Web di tutto il mondo proveniva da un dispositivo mobile portatile. Ad agosto 2012, tale cifra era salita all'11,78%.
Possiamo letteralmente guardare come tablet e smartphone diventare la nostra scelta predefinita per la connessione a Internet. Le persone si sono abituate da tempo al web come parte essenziale della loro vita, non volendo vivere un altro giorno, nemmeno un altro momento senza essere costantemente connessi.
Questo passaggio dal desktop al mobile richiede che i web designer si concentrino nuovamente. Non necessariamente lontano dal design del desktop, ma certamente verso il design mobile. Esistono diversi modi per accedere a una presenza Web mobile, ad esempio un sito per dispositivi mobili separato o un'app mobile. L'approccio più recente e sempre più popolare è il responsive web design.
Il design reattivo risolve un problema così grande per i web designer che è facile perdere di vista il fatto che sollevi dei problemi.
In questo articolo mi piacerebbe discutere sia le opportunità che le sfide che derivano dal design sensibile. Farò luce su questo nuovo modo di pensare e ti aiuterò a fare una scelta informata per il tuo prossimo progetto.
Opportunità presentate dal responsive web design
Il responsive web design consiste nel mantenerlo semplice. L'idea è quella di creare un sito web per adattarsi letteralmente a tutte le dimensioni dello schermo, sia esso uno schermo desktop o portatile, tablet o smartphone in modalità orizzontale o verticale. I siti web reattivi sono progettati con una griglia flessibile. Usano le media query per determinare le dimensioni dello schermo per ogni singola visita del sito e ridimensionare il contenuto di conseguenza.
Diamo un'occhiata ai vantaggi offerti da un approccio di progettazione reattivo.
1. Bassa manutenzione
Con un design reattivo hai solo bisogno di mantenere un sito web. Mentre il layout cambia, il contenuto rimane lo stesso su diversi dispositivi. Puoi aggiornare simultaneamente il contenuto o correggere i bug per tutti i dispositivi.
Ad esempio, per siti di notizie come breakingnews.com questo è di grande vantaggio Il contenuto in rapida evoluzione e gli aggiornamenti frequenti richiedono una manutenzione molto elevata. Un design reattivo non solo consente di risparmiare tempo, ma anche denaro.
Puoi concentrarti su un singolo sito web e mettere tutte le tue risorse nell'ottimizzazione e nella manutenzione di quel sito. Non è più necessario dare la priorità o gestire separatamente le diverse versioni del tuo sito.
2. Consistenza del marchio
Con un sito Web che funziona su entrambi gli schermi desktop e mobili, troverete molto più facile mantenere un'identità di marchio coerente. Niente più guide di stile che devono essere comunicate tra più parti, come agenzie diverse per le versioni desktop e mobili del tuo sito.
L'aspetto grafico di un sito Web reattivo sarà coerente in tutte le dimensioni dello schermo. spigotdesign.com mantiene un'esperienza di branding unica su tutti i dispositivi. Ciò rende molto facile per le persone riconoscere il sito Web, indipendentemente da dove e come si visita.
3. Usabilità
Il web design reattivo è estremamente intuitivo. I tuoi visitatori non solo possono relazionarsi meglio con il tuo marchio se riconoscono il tuo sito web su dispositivi mobili, ma sanno anche come utilizzarlo. Uno stile coerente e un contenuto coerente sono importanti perché gli utenti non si aspettano che siano diversi solo perché utilizzano un dispositivo diverso.
Un aspetto importante di una buona usabilità è soddisfare le aspettative degli utenti. Se riesci a farlo, avranno meno problemi nella navigazione del tuo sito web. smashingmagazine.com rende molto facile per i loro lettori navigare il sito su tutti i dispositivi, mantenendo un'esperienza utente positiva. Una buona esperienza aumenta la possibilità di una visita ripetuta.
4. Nessun reindirizzamento
Il fatto che tu abbia un solo sito web per tutti i dispositivi significa anche che hai gli stessi URL di pagina per consegnare contenuti a tutti i tuoi utenti. Non devi preoccuparti di reindirizzamenti o incompatibilità tra dispositivi diversi.
Quando promuovi un link, puoi essere certo che le persone possono accedervi direttamente, indipendentemente da dove si trovino o in che modo visitano il tuo sito.
Ad esempio, quando invii newsletter, è molto probabile che i tuoi lettori aprano la tua email su un dispositivo mobile. Non vuoi che debbano passare a un computer desktop o portatile prima che possano aprire i tuoi collegamenti.
Anche i contenuti che promuovi dovrebbero essere disponibili, che si tratti di dispositivi mobili o meno.
5. Tempo di caricamento
Questi visitatori, che accedono al tuo sito Web con una connessione Wi-Fi o via cavo stabile, avranno pochi problemi a scaricare blocchi relativamente grandi di dati, come animazioni speciali o immagini di grandi dimensioni. Gli utenti mobili, invece, che utilizzano connessioni 3G o 4G, saranno grati per il minor numero possibile di dati.
Ancora una volta, siti di notizie, come ad esempio bostonglobe.com sono spesso utilizzati in viaggio, durante un tragitto giornaliero, ad esempio. Il design reattivo consente loro di selezionare contenuti molto specifici per ciascun dispositivo o di pre-comprimere le immagini.
Sfide presentate dal responsive web design
Il responsive web design è un approccio relativamente nuovo al web design mobile. Alcuni dicono che è solo una tendenza, altri dicono che è un nuovo modo di pensare. Personalmente, credo che all'interno del framework del web in rapida e costante evoluzione, tutto può essere considerato una tendenza in un certo senso. Non entriamo troppo in profondità qui. Piuttosto, diamo un'occhiata alle sfide che dobbiamo superare per costruire siti web di successo responsive.
1. Tempo di sviluppo
Probabilmente il punto meno ovvio sulla costruzione di un sito web reattivo è che ci vuole più tempo. Ovviamente, per un normale sito desktop è necessario molto meno tempo di preparazione, meno risorse per costruirlo e anche testarlo richiede meno sforzo.
Di solito è necessario più tempo per convertire un sito Web esistente in uno reattivo piuttosto che crearne uno da zero. Se stai pensando di diventare mobile, e facendo ciò rendendo il tuo sito web reattivo, non sottovalutare il lavoro che dovrai inserire nella versione desktop esistente.
2. Diversi dispositivi rimangono diversi
L'idea che puoi semplicemente creare un sito web che funzioni ugualmente bene su qualsiasi dispositivo è un mito. Certo, c'è solo un set di codice e il tuo sito web rimane lo stesso per quanto riguarda il contenuto e la struttura, ma diversi dispositivi richiedono un modo diverso di pensare.
Le persone esploreranno il tuo sito web in base alle loro esigenze e ai loro obiettivi specifici e per non parlare del loro contesto di utilizzo unico.
Designer da choiceresponse.com hanno chiaramente priorizzato il loro contenuto per l'uso mobile. Mentre la versione desktop può visualizzare un sacco di contenuti contemporaneamente, per schermi più piccoli è necessario sapere esattamente ciò che conta.
Immagina, sei responsabile per un sito di trasporto pubblico. Un utente potrebbe visitare la versione desktop, navigando pazientemente, sperando di trovare un accordo speciale per il suo viaggio di fine settimana. Allo stesso tempo, qualcun altro potrebbe controllare la versione mobile, sperando di scoprire a quale piattaforma avrebbe dovuto correre prima che il suo treno partisse in meno di un minuto.
Un sito Web, due situazioni e due scenari utente completamente diversi. Per creare un'esperienza utente ottimale per tutti i tuoi utenti, devi considerare che le persone utilizzeranno dispositivi diversi in circostanze diverse e con obiettivi diversi.
3. Diversi dispositivi offrono diverse interazioni
La tua versione desktop non differisce solo dalla versione mobile in modo ipotetico, ma anche molto pratico. L'interazione che funziona bene su un dispositivo può essere irrilevante su un altro. Questo perché il modo in cui interagiamo con i dispositivi desktop e mobili è diverso.
Mentre usiamo le scorciatoie da tastiera e un puntatore del mouse molto definito per navigare attraverso un sito Web su un dispositivo, non abbiamo nient'altro che le nostre dita sull'altro.
Mentre la versione desktop di forefathersgroup.com include diversi collegamenti con un effetto di passaggio del mouse, il designer ha usato questi effetti solo per i contenuti che non sono stati inclusi nella versione mobile. Anche in questo caso la priorità del contenuto è molto importante nella progettazione reattiva.
4. Supporto limitato di query multimediali
I siti Web reattivi funzionano con le query multimediali per determinare le dimensioni dello schermo di ogni visitatore e quindi visualizzare il layout corretto.
Il problema qui è che i vecchi browser, in particolare Internet Explorer versione 8 e precedenti, non riconoscono le query multimediali. Attualmente circa il 14% degli utenti del Web in tutto il mondo utilizza ancora IE8. Il 14% è una parte sostanziale del tuo pubblico e, a seconda del tuo target demografico, la cifra potrebbe essere più alta.
Questo non significa che non ci sia modo di visualizzare il tuo sito web su questi browser più vecchi. Devi solo tenerne conto quando lavori con le query multimediali. Esistono diversi modi per evitare il problema, ad esempio l'utilizzo di un foglio di stile completamente separato per IE o la progettazione del sito Web mobile per primo.
Adottare un approccio mobile-first significa che solo gli stili che dovrebbero applicarsi a versioni più ampie del layout sono all'interno di una query multimediale, non quelli per la versione mobile. In questo modo, i browser senza supporto per le query multimediali vedranno solo la versione mobile.
5. Le immagini scalabili perdono i dettagli
Un'altra limitazione del design reattivo è il ridimensionamento delle immagini. Le immagini ridotte perdono rapidamente i dettagli e quindi il loro significato. Fondamentalmente, la vera limitazione qui non è il ridimensionamento in sé, ma il fatto che il ridimensionamento avviene rigorosamente in base alle dimensioni dello schermo e non al contesto.
Sopra oliverrussell.com questo problema è risolto molto bene. Le immagini sono riorganizzate in modo che possano estendersi su tutto lo schermo, se necessario. Questo crea uno spazio sufficiente per impedire la maggior parte delle immagini di essere ridimensionate.
Un'alternativa al ridimensionamento delle immagini potrebbe essere quella di ritagliarle. Tuttavia il loro significato e l'esperienza che ne deriva saranno alla fine alterati.
6. Menu di navigazione
Ultimo ma non meno importante, i menu di navigazione costituiscono una parte importante di qualsiasi sito web. Soprattutto su siti web desktop più complessi, siamo abituati a menu a discesa multi-livello. Sui dispositivi più piccoli troverai sempre spazio a schermo limitato, il che rende la progettazione di menu di navigazione intuitivi una sfida.
I designer di starbucks.com hanno deciso di nascondere il menu di navigazione su schermi di piccole dimensioni per impostazione predefinita. Solo quando si inserisce una piccola icona nell'angolo in alto a sinistra, le diverse categorie di contenuti vengono visualizzate come pulsanti intuitivi.
Su qualsiasi dispositivo, la regola generale è trovare un equilibrio tra un facile accesso alle informazioni e un design discreto. Non reinventare la ruota se non è necessario.
Cose da considerare
In ultima analisi, il fatto di essere reattivo dipende da te, ma se decidi di provarlo, ecco un paio di cose che dovresti prendere in considerazione prima di iniziare.
La preparazione è la chiave
Un accurato web design reattivo inizia molto prima del primo mockup di Photoshop. Anche molto prima del tuo primo wireframe. Una buona preparazione è la chiave del successo del design. Quanto meglio sei preparato, tanto più tempo e denaro risparmerai alla fine.
Poiché il tuo sito web varia in base a dispositivi diversi, devi avere un'idea chiara di come desideri strutturare i tuoi contenuti per ciascuno di questi dispositivi. Più piccolo è il dispositivo, maggiori sono le scelte che devi fare per quanto riguarda la priorità dei tuoi contenuti.
Iniziare da zero
Se hai già un design desktop esistente e stai considerando una presenza mobile per la prima volta, pensaci attentamente.
Puoi riciclare il design dal tuo vecchio sito desktop, ma la modifica del codice potrebbe richiedere più tempo rispetto all'avvio da zero.
Non reinventare la ruota
Ci sono un sacco di strumenti e risorse online per aiutarti a sviluppare un sito reattivo.
Non cercare di reinventare la ruota creando un nuovo approccio. Imparare dagli errori degli altri accelererà considerevolmente i tempi di sviluppo.
Prova, prova e prova di nuovo
Non è una novità, e non dovrebbe essere una sorpresa. Test utente precoci e ripetitivi sono essenziali per qualsiasi progetto di successo, reattivo o meno.
Il diverso comportamento e la sfida di progettare allo stesso tempo sia il touch che i normali schermi richiederanno alcuni test eccessivi. Inizia a testare su tutti i dispositivi che possiedi. Se tutto funziona, prendi in prestito i dispositivi di amici e familiari e mettili alla prova. Ultimo ma non meno importante, visita un negozio di articoli elettrici e prova il tuo sito sui loro dispositivi.
Produci disegni reattivi per i tuoi clienti? Hai risolto questi problemi? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, Internet mobile immagine tramite Shutterstock.