Un cheat sheet per il design mobile: design reattivo, servizi dinamici e siti mobili

Aggiornamento dell'editore (luglio 2015): nell'aprile 2015, Google ha apportato un aggiornamento preannunciato all'algoritmo che classifica i risultati della ricerca mobile. La compatibilità mobile di un sito Web è un segnale di posizionamento confermato per le classifiche di ricerca mobile. Prendi nota e rendi il tuo sito web mobile friendly con l'aiuto del seguente articolo.

Abbiamo tutti sentito le statistiche: il 2014 è l'anno in cui più persone accedono a Internet su uno smartphone che su un computer o laptop. Il design mobile è il futuro. Non vuoi che il tuo sito venga lasciato indietro, ma come programmi esattamente per questo Internet sempre più mobile? Ci sono tre opzioni principali, ognuna con i propri vantaggi e svantaggi. In questo post, analizzerò le tue opzioni di prontezza per dispositivi mobili, fornendoti i pro e i contro di ciascuna per aiutarti a scegliere il percorso migliore per il tuo sito Web e la strategia SEO.

Opzione 1: design reattivo

Il design reattivo determina la risoluzione dello schermo su cui viene visualizzata una pagina utilizzando le query multimediali, quindi regola le dimensioni e il layout della pagina in modo appropriato. Google ha dichiarato di preferire il web design reattivo, il che lo rende il peso massimo in questa discussione.

Pro :

1. C'è solo una versione di ogni pagina. La stessa pagina si adatta al tipo di dispositivo che la visualizza (piuttosto che rilevare il tipo di dispositivo e quindi servire contenuti diversi in base a quello). Avere lo stesso HTML e URL su tutti i dispositivi semplifica la manutenzione del tuo sito.
2. Il design reattivo non si basa sul rilevamento dell'agente utente, come fanno le altre due opzioni. Il rilevamento dell'agente utente (ovvero, il rilevamento di quale browser o dispositivo richiede una pagina Web) non è male di per sé, ma non è perfetto e, se si verifica un problema tecnico nel processo, agli utenti potrebbe essere fornita la versione sbagliata del tuo sito. Inoltre, questo evita agli spider dei motori di ricerca di dover eseguire la scansione del tuo sito come diversi user-agent, il che significa che più del tuo sito viene scansionato.
3. Il responsive generalmente si carica più rapidamente nei browser. Poiché tutti i dispositivi ottengono lo stesso contenuto, non esiste alcun processo di possibile reindirizzamento del rilevamento dell'agente utente di richiesta. E chiunque abbia mai avuto fame e abbia cercato un buon ristorante sul proprio smartphone lo sa, la velocità conta.

Contro:

1. Può essere un processo lungo e intenso per riprogettare un sito esistente. Quindi, se hai un grande sito, passare a responsive potrebbe non essere la scelta migliore.
2. A seconda del layout del tuo sito, potrebbe essere semplicemente troppo difficile stipare i contenuti su uno schermo mobile. Siti come NYTimes.com mantengono siti mobili separati perché è più facile suddividere il contenuto che inserirlo in un'unica pagina.
3. Gli elementi di navigazione non sempre si ridimensionano bene; gli elementi al passaggio del mouse non funzionano affatto su un touch-screen. Quindi andare reattivo può significare cambiare la tua navigazione.
4. Ci sono stati casi in cui le pagine reattive con molte immagini sono state caricate più lentamente con il design reattivo. Vorrei sottolineare che questa non è la norma, ma è successo.

Se opti per il design reattivo, tieni presente che vorrai ottimizzare le tue immagini e testare il tuo sito su vari browser e dispositivi (o utilizzare un buon emulatore di user-agent) prima di pubblicarlo.

Opzione 2: servizio dinamico

A volte indicato come "sniffing" dell'agente utente, il servizio dinamico può essere eseguito in due modi ed è difficile da implementare. In effetti, Google delinea alcuni errori comuni commessi con la pubblicazione dinamica. Ciò che fa questa tecnica è rilevare lo user-agent di un visitatore (ovvero, quale dispositivo stanno utilizzando per visualizzare il tuo sito) e quindi reindirizzare a livello di server . Un modo per implementare la pubblicazione dinamica è il reindirizzamento unidirezionale , in cui i collegamenti a un sito per impostazione predefinita vengono reindirizzati al sito desktop, ma i dispositivi mobili vengono reindirizzati dal sito desktop al sito mobile.

Il secondo tipo, il reindirizzamento bidirezionale , ha codice sia sui siti desktop che mobili, assicurando che a qualsiasi visitatore, indipendentemente dal dispositivo, venga servito il contenuto appropriato. (Questi pezzi di codice sono talvolta chiamati tag switchboard.) Implementazione significa inserire un tag rel="alternate" sul desktop, che punta al sito mobile; e, sul sito mobile, inserendo un tag rel="canonical" che punta al sito desktop.

Professionisti:

1. Poiché il reindirizzamento viene eseguito a livello di server, è necessario un solo URL per pagina.
2. La pubblicazione dinamica funziona bene anche per i feature phone . Come definito da PCMag.com, un feature phone è un "cellulare che contiene un insieme fisso di funzioni oltre alle chiamate vocali e ai messaggi di testo, ma non è esteso come uno smartphone". Ad esempio, i feature phone in genere non possono scaricare app, ma di solito hanno alcune funzionalità di navigazione sul Web. Secondo Google, la differenza più grande è che i feature phone non possono elaborare CSS, quindi non possono gestire molto bene il design reattivo. Quindi è importante conoscere il tuo pubblico e che tipo di dispositivi mobili stanno utilizzando.
3. Se desideri avere un insieme separato di parole chiave specificamente per i tuoi utenti mobili, questa opzione ti consentirà di farlo poiché gli utenti mobili e gli utenti desktop vedono ciascuno un codice HTML distinto. (Search Engine Land ha un ottimo articolo che discute le parole chiave specifiche per dispositivi mobili.)

Contro:

1. Il reindirizzamento dinamico raddoppia il lavoro di manutenzione del tuo sito perché imposta un sito separato per dispositivi mobili, con un insieme separato di HTML indicizzato che richiede un progetto SEO separato.
2. Anche l'elenco necessario delle stringhe user-agent richiede una manutenzione costante, poiché è necessario aggiungere nuove stringhe ogni volta che viene rilasciato un nuovo dispositivo mobile.
3. Infine, tieni presente che dovrai utilizzare un'intestazione "Varia HTTP-User Agents" se il tuo sito offre contenuti in modo dinamico. L'intestazione aiuta il contenuto a essere servito correttamente e aiuta i motori a memorizzarlo correttamente nella cache. Google ha dettagli su come aggiungere questa intestazione.

Opzione 3: un sito mobile

Questa opzione, come suggerisce il nome, comporta la creazione di un dominio separato specifico per gli utenti mobili. Gli esempi più comuni sono m.domain.com o mobile.domain.com . È un'opzione popolare per i grandi rivenditori; Bridget Randolph sottolinea che "il 73% dei siti Web classificati nella Top 100.000 di Quantcast ha utilizzato reindirizzamenti URL a un URL specifico per dispositivi mobili". Come la pubblicazione dinamica, questa tecnica prevede lo sviluppo di contenuti specifici per i visitatori che utilizzano un dispositivo mobile; tuttavia, gli URL di un sito per dispositivi mobili separati sono distinti, quindi non esiste un reindirizzamento a livello di server.

Professionisti:

1. Per i siti più grandi con un numero di pagine di centinaia di migliaia o milioni, l'implementazione del design reattivo potrebbe essere semplicemente troppo faticoso. Un sito mobile ti consente di personalizzare l'esperienza dell'utente e creare lentamente un'esperienza mobile unica.
2. Come la pubblicazione dinamica, un sito mobile è migliore per i feature phone rispetto al design reattivo. A seconda dei dati demografici del tuo sito, questo potrebbe non essere un criterio; ma per alcune aziende è una considerazione importante.

Contro :

1. Il tuo sito mobile non trarrà vantaggio da alcun profilo di backlink positivo creato dal tuo sito desktop (a meno che tu non implementi reindirizzamenti bidirezionali). Quindi, se stai cercando di convincere i tuoi utenti mobili a trovarti nella ricerca organica, questa potrebbe essere una vera battuta d'arresto.
2. Il tuo sito mobile richiederà un po' di lavoro SEO extra. Dovrai inviare una Sitemap XML separata a Google e Bing Webmaster Tools. Inoltre, schermi più piccoli significano SERP più piccole, quindi potresti dover modificare i tuoi meta tag. I meta tag specifici per dispositivi mobili dovrebbero essere più brevi di quelli per un sito desktop.

Come puoi vedere, il contenuto è stato drasticamente riformattato e ridotto per renderlo leggibile su un dispositivo mobile.

Nel setacciare tutte queste informazioni per fare la scelta giusta per il tuo sito, non dimenticare di chiederti quanti dei tuoi visitatori utilizzano dispositivi mobili per accedere al sito. Controlla le tue analisi. Se la percentuale totale del traffico mobile è inferiore al cinque percento, probabilmente puoi aspettare per implementare la progettazione mobile. Per adesso. Se le previsioni sono corrette, l'utilizzo dei dispositivi mobili continuerà solo a richiedere sempre più traffico Internet.

Per informazioni su come ottimizzare le tue pagine in termini di velocità e SEO mobile, ti consigliamo di iniziare con queste risorse:

• L'elenco di controllo per SEO e design per dispositivi mobili all-in-one
• 7 Best practice per la navigazione ottimizzata per dispositivi mobili
• Guida SEO: Ottimizzazione SEO e UX mobile
• Ottimizzazione dell'immagine: la cosa numero 1 che puoi fare per migliorare l'esperienza utente mobile
• Guida per dispositivi mobili del webmaster di Google Developers