Esistono molti modi per configurare un sito web per tutti gli schermi. Tra i fattori da considerare vi sono il costo, il tempo necessario per la creazione, le risorse umane e l'infrastruttura a disposizione e le esigenze dei clienti.

Qualunque sia la configurazione che scegli, un principio di base che ti consigliamo vivamente di tenere presente è ospitare tutti i tuoi siti su un solo dominio, ad esempio example.com. In particolare, se il tuo sito per computer desktop è ospitato su example.com, non collocare il tuo sito per dispositivi mobili su un dominio diverso, ad esempio a.com/example.

Utilizza un solo dominio e creerai brand equity e URL equity per i tuoi utenti. Tenendo presente questo principio, esaminiamo i tre modi di base con cui puoi creare un sito web ottimizzato per dispositivi mobili: responsive design, pubblicazione dinamica e un sito per dispositivi mobili completamente a sé stante.

Responsive design

Il responsive web design (RWD) è un'intelligente tecnica di design che utilizza una sola base di codice HTML per tutte le piattaforme. Questo significa che tutti i dispositivi di visualizzazione leggono lo stesso codice dallo stesso URL. I contenuti si ridimensionano da soli in base allo schermo utilizzato, ai punti di interruzione predefiniti e alle griglie fluide.

L'RWD richiede un'attenta pianificazione preventiva. I costi possono essere inizialmente alti, ma una volta definita la strategia specifica per dispositivo, la manutenzione può richiedere un minore utilizzo di risorse.

Vantaggi:

  • Un URL per tutti i contenuti. L'utilizzo di un singolo URL per una serie di contenuti consente agli utenti di interagire, condividere e collegarsi ai tuoi contenuti con maggiore facilità. Inoltre, è più facile per i motori di ricerca scoprire e indicizzare i tuoi contenuti.
  • Un'esperienza utente semplificata. La presentazione di tutti i contenuti è personalizzata e possono ancora essere utilizzate le funzioni specifiche dei dispositivi.
  • Orientamento flessibile. L'RWD permette naturalmente la visualizzazione con orientamento orizzontale o verticale del dispositivo, in base alla preferenza degli utenti.
  • Nessun reindirizzamento. Il tempo di caricamento è ridotto e le prestazioni ne risultano aumentate.

Svantaggi:

  • È richiesta un'attenta pianificazione. Poiché tutto il codice HTML è condiviso, è necessaria un'attenta pianificazione per generare un'esperienza veramente personalizzata ed efficace con risultati ottimali per ogni dispositivo e utente.
  • Errori comuni da evitare:
    Dilatazione dei dati. Non far scaricare agli utenti di un dispositivo mobile immagini a grandezza originale destinate a schermi di grandi dimensioni e a velocità elevate. Prova a ridurre le richieste HTTP e a minimizzare CSS e JavaScript. Carica prima i contenuti visibili e posticipa tutto il resto.

Destinatari:

Le attività commerciali che sono orientate a offrire un'esperienza coerente e possono effettuare pianificazioni olistiche per tutti i dispositivi con un solo team web. Starbucks.co.uk, PCworld.co.uk e TescoBank.com utilizzano tutte questo approccio. L'RWD può essere esteso ai nuovi dispositivi immessi sul mercato e l'URL singolo è ideale per collegare e condividere articoli senza confusione o reindirizzamenti.

Pubblicazione dinamica

Con questo metodo, il server web rileva il tipo di dispositivo che un utente sta utilizzando e successivamente presenta una pagina personalizzata studiata per tale dispositivo. Le pagine personalizzate possono essere realizzate per qualsiasi tipo di dispositivo, dai cellulari ai tablet, fino alle smart TV.

Vantaggi:

  • Un'esperienza utente personalizzata. Ogni utente riceve contenuti e un layout creati appositamente per il suo dispositivo.
  • Modifiche più facili. Puoi adattare i contenuti o il layout alle dimensioni di uno schermo senza dover toccare altre versioni.
  • Caricamento più veloce. Il tuo team può semplificare i contenuti per tempi di caricamento ottimali su ogni dispositivo.
  • URL singolo. Come con il responsive design, la pubblicazione dinamica mantiene tutti gli utenti su un solo URL.

Svantaggi:

  • Sdoppiamento dei contenuti. Più pagine personalizzate è sinonimo di più insiemi degli stessi contenuti. A meno che non utilizzi un CMS sofisticato, mantenere aggiornati i contenuti su tutte le pagine specifiche per dispositivo può essere difficoltoso.

Errori comuni:

  • Rilevamento errato dei dispositivi. I tuoi server dovranno eseguire script per riconoscere tutti i dispositivi disponibili. Questo passaggio previene eventuali problemi, come l'invio da parte del server di un sito ottimizzato per dispositivi mobili agli utenti di tablet. Il tuo webmaster dovrà mantenere la directory aggiornata e correttamente funzionante per evitare un errato rilevamento o interruzioni del servizio. Un altro errore comune è il seguente: il server presuppone un orientamento del dispositivo, più comunemente verticale, ma l'utente potrebbe tenere il dispositivo orientato in modo diverso (ad esempio orizzontale).
  • Esperienze d'uso diverse: se possiedi più siti con aspetto totalmente diverso, potresti confondere gli utenti. Benché sia importante personalizzare il sito in base a ciascuna dimensione di schermo, l'aspetto del tuo brand deve essere riconoscibile in tutti i formati.

Destinatari:

La pubblicazione dinamica è una soluzione che richiede un elevato utilizzo di risorse ed è destinata alle aziende che modificano frequentemente i propri siti web e spesso hanno bisogno di adattare la visualizzazione a un tipo di dispositivo, ad esempio devono modificare solo il sito per dispositivi mobili. Un personale (o fornitore) IT esperto è fondamentale per gestire i diversi e presumibilmente complessi insiemi di codice richiesti per i siti web.

Un sito per dispositivi mobili distinto

Una terza opzione consiste semplicemente nel creare un sito per dispositivi mobili distinto dal sito per computer desktop originale. Il tuo sistema rileva i visitatori da dispositivo mobile e li reindirizza al sito ottimizzato per dispositivi mobili (spesso utilizzando un sottodominio come m.tuonome.com). Solo gli utenti di dispositivi mobili vedranno il sito specifico per dispositivi mobili. Gli utenti di tablet, TV abilitate al Web o altri dispositivi continueranno a vedere il sito per computer desktop originale.

Vantaggi:

  • Un'esperienza utente personalizzata. Avrai la massima libertà di creare un sito per dispositivi mobili distinto, studiato solo per gli utenti di tali dispositivi.
  • Modifiche più facili. Le modifiche ai contenuti o al design possono essere limitate alla versione mobile del sito, senza alcun effetto su altri dispositivi.

Svantaggi:

  • Più URL. La condivisione di una pagina web richiede reindirizzamenti accurati e un'integrazione tra il sito per dispositivi mobili e il sito per computer desktop. I reindirizzamenti portano inoltre a tempi di caricamento delle pagine più lunghi.
  • Sdoppiamento dei contenuti. Avere due insiemi diversi di contenuti può rendere la gestione dei dati più complessa.

Errori comuni:

  • Reindirizzamenti non funzionanti. Quando un utente di dispositivo mobile accede a una pagina per computer desktop che richiede molti clic per essere raggiunta, accertati che non venga reindirizzato alla home page generica per dispositivi mobili. Inoltre, è importante evitare errori specifici per smartphone, ad esempio un URL desktop che reindirizza a un URL per dispositivi mobili non esistente.
  • Annotazioni mancanti. L'annotazione bidirezionale aiuta Googlebot a scoprire i tuoi contenuti e i nostri algoritmi a capire la relazione tra le tue pagine per computer desktop e le tue pagine per dispositivi mobili e a trattarle correttamente.
  • Esperienza utente incoerente. Le persone che guardano il tuo sito per smartphone dovrebbero riconoscervi la stessa attività che vedono sul tuo sito per computer desktop. Questo evita confusione e un'esperienza utente complessiva di scarsa qualità.

Destinatari:

Le attività che per qualche motivo devono gestire il proprio sito per dispositivi mobili in modo indipendente. Ad esempio, alcune attività commerciali potrebbero voler utilizzare un fornitore diverso per il settore mobile o una struttura mobile che semplicemente non sarebbe possibile con l'RWD. Poiché l'impostazione è relativamente semplice e può essere piuttosto conveniente, un sito per dispositivi mobili distinto può essere adatto per le piccole attività commerciali con esigenze più basilari.