Sito Mobile: qual è la soluzione migliore?

mobile-cellulare-giorno-e-notte
Prendere in mano lo smartphone è la prima cosa che fai al mattino? Probabile, magari la seconda. App o Browser ormai è questo il punto di contatto principale degli utenti con i mondi digitali dei vari marchi. Ed è per questo che l’attenzione delle imprese al Mobile Browsing è ormai un diktat.
Le soluzioni adottate sono diverse, diverso è l’investimento necessario per ciascuna e il pensiero che ci sta dietro.
Considerando le principali aziende per fatturato in 13 differenti settori analizzate nel corso della Ricerca dell’Osservatorio Mobile B2c Strategy della School of Management del Politecnico di Milano, emerge che il 68% ha un sito responsive, il 15% un mobile site, il 13% un sito adaptive e solo il 4% un sito non ottimizzato.
mobile-browsing-responsive-adaptive-m-site
Ma cosa significa sito responsive, adaptive o m-site? Quali differenze ci sono?
Provo a riassumere:
Quando parliamo di Responsive Web Design (RWD) parliamo di un sito le cui pagine si adattano automaticamente nel momento in cui vengono visualizzate da Mobile piuttosto che da desktop. In termini di sviluppo il codice è uno solo per la versione desktop e mobile e una sola la url che ospita il sito. In generale è più semplice modificare template responsive rispetto ad altri di diverso tipo.
Nel caso dell’Adaptive Web Design (AWD) invece viene utilizzato il server per capire se un sito è visitato da un dispositivo mobile (e quale esso sia) o desktop e questo dà la possibilità di creare e mostrare templates diversi, creati ad hoc, a seconda dello schermo in cui si visualizza. Nel responsive si adatta la pagina, nell’adaptive viene scelto l’url corretto verso cui indirizzare la visualizzazione. A livello pratico, grazie a questo metodo e al fatto che le pagine mobile sono ospitate su un dominio specifico, le stesse possono caricarsi in modo più rapido, elemento che, per utenti con connessioni mobile non sempre rapidissime (rispetto a quelle desktop), si traduce in minore tasso di abbandono del sito legato a possibili lentezze di caricamento. Dai dati dell’Osservatorio emerge come il 46% dei navigatori mobile dichiarano di aver abbandonato un sito non sufficientemente veloce o usabile “spesso” o “qualche volta” durante l’ultimo anno. Un altro vantaggio sta nella possibilità di creare più template a seconda della dimensione dello schermo mobile specifico che, come ci mostra il mercato è e sarà sempre molto variabile (es. iPhone, iPhone plus, iPad mini, iPad). Un grande vantaggio però comporta anche un costo maggiore poiché le ore di sviluppo di due o più codici differenti per ogni dispositivo o macro-famiglia sono superiori a quelle necessarie per lo sviluppo di un sito di tipo responsive.  Questo metodo di design è utilizzato spesso nel caso in cui esistano già siti desktop pre-esistenti e si voglia solo aggiungere a questi una versione mobile con navigazione più efficace rispetto al semplice “rimpicciolimento” della versione desktop (ciò che succede per i siti non-reponsive).
Partendo dall’Adaptive si può arrivare ad un’estrema personalizzazione non solo dei template ma anche delle funzioni di un sito mobile che rispetto a quello desktop può presentare ad esempio menù, call to action o contenuti in parte o completamente differenti pensati dalla versione per schermi desktop o laptop proprio per la fruizione da un dispositivo di dimensioni ridotte. In questi casi parliamo di m-site, siti che si avvicinano molto all’esperienza di navigazione che può essere fatta con un app. Uno degli esempi più famosi è la versione mobile di Facebook ospitata all’indirizzo “m.facebook.com”.
Esiste una soluzione migliore delle altre nel caso in cui non si voglia o non si possa arrivare a sviluppare e sopratutto a promuovere efficacemente un’app proprietaria? No.
Come sempre dipende dai casi. Occorre partire dai contenuti piuttosto che dal servizio che un marchio ha bisogno o intenzione di offrire online e in base a quelli realizzare se l’esperienza fornita per l’utente mobile è sufficientemente efficace già con un sito responsive piuttosto che bisognosa di una serie di personalizzazioni più o meno importanti.
Per un sito vetrina nella maggior parte dei casi una versione responsive è più che sufficiente. Per siti molto strutturati con alberature complesse e, oltre che informazioni, anche funzionalità particolari (es. siti di case automobilistiche con configuratori di un prodotto, siti di e-commerce) vale la pena prendere in considerazione un investimento maggiore in personalizzazione delle versioni per smartphone e tablet.
Chiudo con un’infografica che riassume bene le differenze tra le due tipologie di approccio.
adaptive-vs-responsive-design-differenze
 

I 20 siti di Cucina e Ricette più visitati al mondo a Maggio 2017

Siete in cerca di siti che rappresentino best practice nel settore food? Volete portarvi a casa piccole indicazioni utili a sviluppare il sito web per un brand del settore o un sito per un foodblogger? Sarà bene partire analizzando la classifica dei siti di ricette più visitati al mondo nel settore Cooking & Recipes. Ecco quella del mese di maggio 2017.
Chart-Cooking-Recipes-Best-Website-May2017
Da un’analisi effettuata sui dati Similar Web il primato è chiaro e netto e va al sito CookPad (vedi screenshot sotto) che di fatto si presenta né più e né meno che come un Pinterest verticale sul mondo ricette. Una community di utenti con la possibilità di inserire le proprie creazioni e cercare ovviamente quelle degli altri per parole chiave. C’era n’era davvero bisogno? Le 86 milioni di visite nel mese di Maggio (il 60% provenienti dal Giappone), farebbero rispondere di SI. Non banale rilevare che il 76% del traffico al sito arriva da Mobile.
CookPad - Homepage

Da CookPad copierei il modello pachwork stile Pinterest e l’estrema semplificazione Mobile Oriented.

A proposito di Mobile Oriented vale la pena condividere anche l’impostazione del sito con il maggior numero di visite da mobile nella TOP20 di Maggio. Si tratta di nefisyemektarifleri.com, un sito turco che in realtà forse ha più il demerito di aver una cattiva UX desktop che una straordinaria UX Mobile. Tuttavia anche qui ci sono spunti interessanti.

 nefisyemektarfleri      nefisyemektarifleri recipes

Da Nefisyemektarifleri copierei il menù in evidenza sotto lo slideshow con le Icone esemplificative delle varie voci e la disposizione in lista delle ricette senza nessuna complessità aggiunta.

Altro sito da segnalare è Dianping e, anche se visitandolo ci capirete poco, a meno che non sappiate leggere gli ideogrammi cinesi, di fatto è una best practice per i tempi di permanenza, secondo solo all’Italiano Giallo Zafferano. Il primo di questi due siti è un po’ un outsider in questa classifica in quanto posizionato sul tema recensioni del settore ristorazione (in stile Yelp o TripAdvisor)  e su quello dei buoni sconto alla Groupon. Il secondo, Giallo Zafferano, come sappiamo tutti è un vero e proprio portale per appassionati di cucina con ricette, suggerimenti e una gigantesca coda lunga di Blog indipendenti iscritti al network che hanno proliferato sotto il suo cappello generando il 36% delle visite al sito.
Dianping

Da Dianping copierei la sezione con le offerte in evidenza.

  giallozafferano-blog

Da GialloZafferano copierei Il doppio menù che permette agli utenti di muoversi a livello di portale su tipologie diverse di contenuti e a livello ricetta, con tipologie diverse di portate.

Continuando la rassegna dei siti con le migliori performance in classifica troviamo Delish, il sito con il maggior numero di pagine visite per ogni visita (oltre 6 page/visit). Un sito con un’interfaccia perfetta per il settore con immagini grandi e eye-catching e un’ottima resa sia nella versione Desktop che Mobile.
delish delish_recipes

Da Delish copierei l’approccio da Magazine che alterna le singole ricetta a gallery tematiche contenenti più ricette e la capacità di suggerire altri contenuti contestuali con quello visualizzato facendo restare l’utente sul sito.

Chiudiamo questa mini rassegna di siti di settore con Tudogostoso, il leader brasiliano del settore ricette che si posiziona al primo posto di questa chart per la più bassa frequenza di rimbalzo. Chi arriva sul sito tendenzialmente ci resta probabilmente grazie al mix di contenuti, non solo ricette ma anche articoli sull’alimentazione, e all’importanza data alla community grazie alla possibilità di votare le ricette che finiscono poi in diverse chart.

tudogostoso tudogostoso best recipes tudogostoso users

Da Tudogostoso copierei la presenza del rating delle ricette e la valorizzazione degli utenti (user della settimana)

Chiaramente in questo post ho citato solo alcuni dei siti più noti e visitati del settore. Non è detto che siano i migliori in termini di User Experience o Design, anzi molti hanno limiti evidenti, ma di fatto sono quelli che grazie al posizionamento nei motori di ricerca, alla brand awareness e alle funzionalità sono riusciti a far crescere nel tempo la propria base utenti e la qualità del proprio traffico. Il mio consiglio è di visitare tutti i siti presenti in classifica e tirare giù, come ho provato a fare in questo breve post, una checklist di possibili “cose da imitare”.