Reindirizzare un sito web in base alla dimensione dello schermo

Reindirizzare un sito web in base alla dimensione dello schermo

Reindirizzare un sito web in base alla dimensione dello schermo con cui gli utenti stanno navigando sulle tue pagine web è importante; e diventa fondamentale quando cerchi di migliorare la User experience (Ux) e le prestazioni del tuo sitoweb.

La dimensione conta ma non è tutto


I migliori cellulari al mondo che si trovano in commercio vantano una risoluzione full hd 1920×1200 ma i web-designer più esperti sanno che è una risoluzione calcolata in maniera diversa da un pc o tv infatti arrivano massimo ad una risoluzione 640×320 poi questa si moltiplica grazie ad un sistema che non sto a spiegare. Quindi le immagini sul mobile non dovranno essere grandi ma profonde a livello di bit, colori e densità di pixel.

Reindirizzare un sito web in base alla dimensione dello schermo

Quindi possiamo dire che la dimensione di uno schermo, però, non coincide con la risoluzione che quindi sarà la nostra unità di misura per fare il Redirect. Conoscere la risoluzione dello schermo è il primo passo per pianificare il nostro lavoro di redirect.

Oltre ad avere la possibilità di reindirizzare gli utenti in base alla risoluzione dello schermo; sarà anche possibile mostrare un messaggio personalizzato in base alla dimensione. offrendo una migliore user experience ai tuoi visitatori.

Come reindirizzare un sito attraverso il file htaccess

Non sai qual’è la risoluzione del tuo schermo? Voi conoscere l’aspect ratio del tuo monitor? la densità dei pixel? la dimensione esatta dello spazio utile all’interno della finestra del browser? Verificalo on-line in modo semplice e veloce.

Strumento per conoscere la risoluzione dello schermo

La risoluzione corrisponde al numero di pixel del monitor, in senso orizzontale e verticale, di cui si compone lo schermo. Questo strumento ci dirà subito sia la risoluzione del tuo monitor che la dimensione effettiva della finestra del tuo browser. Scopri la mia Risoluzione Monitor

risoluzione dello schermo

Conoscere la risoluzione dello schermo per reindirizzare una pagina web

Un altro strumento che ci mostra la risoluzione dello schermo è data da questo tools offerto dal sito inglese Online tool to check screen resolution Uno strumento molto base ma efficace. Personalmente preferisco il primo sito perchè mi offre di conoscere anche la risoluzione effettiva dello schermo.

quale risoluzione schermo

Reindirizzare gli utenti di un blog verso diversi url in base alla risoluzione video del loro schermo.

Attenzione! Il reindirizzamento blog è cosa seria 🙂 non modificare nulla se non ne hai il controllo e la capacità. Lascia fare ai professionisti, se non ti senti sicuro di quello che stai facendo. Se vuoi proprio reindirizzare i tuoi utenti tramite htaccess ti consiglio, comunque, di generare un backup del tuo sito e conservarlo in un posto sicuro, prima di ogni intervento sul codice. l’esperienza personale mi ha insegnato!
Ho testato sul mio Blog di marketing e web design alcuni dei seguenti elementi, ma non l’intero set di regole. Tuttavia, supponendo che sia tutto corretto, potresti provare qualcosa del tipo:

<--! CODICE DA INSERIRE NEL FILE .HTACCESS -->
RewriteEngine On
# Check if this is the noredirect query string
RewriteCond %{QUERY_STRING} (^|&)noredirect=true(&|$)
# Set a cookie, and skip the next rule
RewriteRule ^ - [CO=mredir:0:%{HTTP_HOST},S]
# Check if this looks like a mobile device
# (You could add another [OR] to the second one and add in what you
# had to check, but I believe most mobile devices should send at
# least one of these headers)
RewriteCond %{HTTP:x-wap-profile} !^$ [OR]
RewriteCond %{HTTP:Profile} !^$
# Check if we're not already on the mobile site
RewriteCond %{HTTP_HOST} !^m\.
# Check to make sure we haven't set the cookie before
RewriteCond %{HTTP:Cookie} !\smredir=0(;|$)
# Now redirect to the mobile site
RewriteRule ^ http://m.example.org%{REQUEST_URI} [R,L]

Il codice per modificare l’htaccess ed utile alla completezza di questo tutorial l’ho trovato sul sito
Stackoverflow.com che offre soluzioni per webmaster.
tutorial web design

User Experience cos’è

User experience (Ux) ti offre la possibilità di personalizzare la tua pagina html con immagini e personalizzazioni mirate a chi è abituato a navigare con una sua risoluzione mobile, desktop o tablet.
Migliori prestazioni per un posizionamento migliore sui motori di ricerca.
Le prestazioni di un sito sono sicuramente migliori se ottimizzate per la sua risoluzione; infatti se vogliamo mostrare un’anteprima di un’immagine su un mobile ovviamente non metteremo una immagine 1920×768 come per un desktop ma pubblicheremo un’immagine ottimizzata per mobile 380×150. In questo modo avremo una immagine 16:9 che avrà lo stesso risultato visito e si aprirà velocemente risparmiando 1/3 del suo peso.
Se sei interessato puoi leggere anche un altro dei miei articoli che mette in evidenza il rapporto tra i clienti e usabilità del sito
Se ritieni interessante questo tutorial o ti è piaciuto l’articolo, fammelo sapere lasciando un commento qui sotto e se vuoi premiarmi condividi questo articolo sui tuoi social! Francesco Monaco

Please follow and like us:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

error

Enjoy this blog? Please spread the word :)