Hai realizzato una versione del sito web ottimizzata per i dispositivi mobili e ora hai bisogno di reindirizzare automaticamente tutti gli utenti verso di questa, ma non sai come fare? Cerchi metodi per indirizzare i visitatori con smartphone ad un sottodominio o a un’altra posizione del tuo sito?
La navigazione internet dai dispositivi mobili, quali smartphone e tablet, oramai è di gran lunga preferita a quella da classici dispositivi fissi e computer.
Questo è un fatto noto, e nel tempo i siti web sono stati costretti a adattarsi alle nuove esigenze e richieste degli utenti con dispositivi mobili.
Questo processo di conversione ha richiesto molto tempo da parte degli sviluppatori per ideare nuove soluzioni esclusive per questi apparecchi, integrando nuove features, migliorie e tecnologie. Basti pensare a Google AMP, le versioni mobile-friendly realizzate esclusivamente per smartphone.
Le soluzioni adottate però, non sono mirate solo alla migliore navigabilità o visualizzazione del contenuto, ma anche per velocizzare i tempi di caricamento delle pagine su dispositivi che buona parte del tempo sono privi di una connessione stabile e veloce.
In questi casi infatti, non basta esclusivamente riadattare o convertire il vecchio sito desktop per i piccoli schermi, ma nella stragrande maggioranza dei casi è necessario ricreare il sito rimuovendo buona parte degli elementi, lasciando solo l’essenziale.
Molti sviluppatori optano per la creazione di un sottodominio dedicato, con il compito di ospitare soltanto la versione mobile del sito.
Esempio: da www.facebook.com, a m.facebook.com (m è il dominio di terzo livello per mobile).
Ti stupirà sapere che questa è la parte più semplice del processo, che con un po’ di pazienza e di tempo è possibile portare a termine facilmente. Il problema infatti sorge al momento della pubblicazione, dovendo reindirizzare automaticamente solo gli utenti da smartphone alla nuova versione mobile.
In questo articolo di mostreremo alcuni dei migliori metodi per il reindirizzamento automatico del sito alla versione per smartphone.
Come accennato precedentemente, il problema principale di possedere una versione per dispositivi mobili del sito è quello di riuscire a reindirizzare automaticamente gli utenti che navigano con smartphone (e tablet), mantenendo i visitatori “desktop” alla versione originale, in modo che ognuno di essi potrà godere della migliore esperienza di navigazione possibile.
Scavando più a fondo nel problema, noteremo che la difficoltà di questo processo non è nemmeno il reindirizzamento automatico degli utenti, ma il riconoscimento di tutti i dispositivi mobili e degli user-agent (e browser web) in uso.
Non è sempre consigliato infatti programmare script e funzioni mirate a distinguere ogni user-agent esistente, ma esistono anche altri metodi per rendere il lavoro degli sviluppatori web più semplice.
Vediamo ora come fare.
Se il tuo sito è realizzato con WordPress, non perdere troppo tempo alla ricerca di soluzioni complesse. Installa la versione AMP del sito con uno dei tanti plugin esistenti e in poco tempo avrai la versione mobile ottimizzata del sito.
Leggi la guida: Installare AMP in WordPress.
Cloudflare è il miglior amico del nostro sito web, che esso sia realizzato in WordPress, Joomla, Drupal o scritto manualmente. Abbiamo già parlato di questa piattaforma nell’articolo: Come bloccare gli attacchi di Brute Force al sito e a WordPress.
Con Cloudflare possiamo sfruttare gratuitamente la potenza del proprio CDN, aumentare la sicurezza globale del sito e ottenere molti strumenti utili e interessanti per l’ottimizzazione.
Potrebbe interessarti: Come registrare un sito in Cloudflare
Tra questi troviamo il reindirizzamento automatico dei visitatori a un’altra posizione del sito, come un sottodominio.
Questa soluzione è molto efficace ed è gestita interamente da Cloudflare, levandoci il problema di torno. Di contro ci sono dei requisiti da rispettare per mettere in pratica il reindirizzamento con Cloudflare.
In quest’ultimo punto la procedura di creazione di un sotto dominio può cambiare in base all’hosting, e dovrai modificare anche i rispettivi record DNS A e AAAA da Cloudflare.
Ti consiglio di creare il sottodominio prima di registrare il sito su Cloudflare, così da evitare il passaggio della modifica dei DNS, che erediterà in automatico.
A questo punto, dopo aver completato la procedura di registrazione con Cloudflare, puoi procedere con l’istruzione di reindirizzamento in questo modo:
Ora non ti resta che attendere che le modifiche vadano online. Potresti riscontrare problemi di connessione nelle prime ore.
Fai dei test per controllare che il reindirizzamento avvenga in maniera automatica.
Con JavaScript possiamo programmare il nostro sito affinché gli utenti mobile vengano dirottati alla versione ottimizzata per smartphone, questo è possibile in diversi modi.
L’uso di JavaScript però è limitato e non sempre efficace al 100%, perché può essere disattivato/bloccato dal browser e non eseguito.
Gli script che possiamo integrare sono basati sul rilevamento del dispositivo in uso (o user-agent, che come abbiamo già detto non è sempre il migliore dei modi); oppure sul rilevamento delle dimensioni dello schermo (Schermi con larghezza minore di 1200px sono ovviamente smartphone).
All’attivazione degli script è possibile eseguire i comandi preferiti, che sia un reindirizzamento ad un URL predisposto con la versione mobile o un cambio di stile CSS.
Ad esempio nascondendo gli elementi non necessari con l’attributo display:none.
Non si consiglia comunque di procedere in questo modo, perché le risorse esterne, i fogli di stile, i file .js e tutti gli altri elementi verrebbero comunque caricati dal browser, rallentando la pagina web allo stesso modo.
Gli script in questione sono i seguenti:
if ((navigator.userAgent.match(/(iphone)|(ipod)|(ipad)|(android)|(blackberry)|(windows phone)|(symbian)/i))){
location.replace("https://m.miosito.it");
//o altro codice...
}if(window.innerWidth < 1280){
location.href = "https://m.miosito.it";
// o altro codice
}Integra uno di questi script sul fondo del documento html interessato, nel tag “script“. Ora tutti gli utenti da smartphone verranno reindirizzati nella pagine indicata nel campo location.href.
Al posto di location.href puoi inserire qualunque altro codice desideri, come il cambio del CSS degli elementi.
Hai problemi o domande? Scrivici nei commenti e ti aiuteremo.
Leggi anche: Tecniche per velocizzare il sito web.
Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!
Articoli recenti:
Mostra commenti
Ciao Simone complimenti per l'articolo
Sono interessato per dei sottodomini, mi spiego... se l'utente si collega ad un sottodominio dal pc, dovrebbe comparire una schermata da me personalizzata con un immagine oppure semplicemente un testo dove invita l'utente ad utilizzare lo smartphone per visualizzare la pagina interessata, ovviamente la cosa se possibile non essere bypassata facilmente, oppure se disponibile un plugin oppure tramite qualche codice, che se l'utente si connette al sito lo vede in versione mobile, insomma un modo per portare la persona sullo smartphone non visualizzare il sito da pc.
La cosa è possibile in maniera non troppo difficile? grazie mille
Ciao Luigi.
Affronterò la tua richiesta nel prossimo articolo, cercherò di fornirti diverse soluzioni per il tuo problema.
Un saluto :)
Ciao Simone, grazie mille
Attendo il nuovo articolo :)
A te Luigi:
Come impedire agli utenti desktop di visualizzare un sito
Per qualsiasi informazione, sono a disposizione. :)