Creare siti webWeb Design

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; diventa fondamentale quando cerchi di migliorare la User experience (Ux) e le prestazioni del tuo sito o del tuo blog. Vediamo quindi come cambiare la risoluzione sito web in base alla risoluzione dello schermo.

La dimensione conta ma non è tutto

dimensioni pagina web
dimensioni pagina web

I migliori cellulari in commercio vantano una risoluzione dello schermo full HD 1920 x 1280 ma i web designer più esperti sanno che è una risoluzione calcolata in maniera diversa da come viene calcolata su un monitor 24 pollici o una TV 4k. infatti, arrivano massimo ad una risoluzione 720×375 poi questa si moltiplica grazie ad un sistema che non sto a spiegare, comunque basato sulla quantità di pixel. Quindi le immagini sul mobile non dovranno essere grandi ma profonde a livello di bit, colori e densità di pixel quindi ai ppi.

Qui trovi le dimensioni pagina web consigliare per mobile.

Iphone 6/7/8 dimensione schermo 375 x 667 Pixel

Galaxy S5 dimensione schermo 360 x 640 Pixel

Iphone X dimensione schermo 812 x 375 Pixel

Huawai P30 dimensione schermo 820 x 375 Pixel

Attenzione questa sarà la dimensione pagina web mostrata sul monitor di uno smartphone non la risoluzione del monitor, che come si vede dalle schede tecniche sono molto più alte. 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

Ottimizzare le immagini del tuo sito web è importante per essere più veloce sul web. Infatti, sapere come ottimizzare le immagini per il web è fondamentale per posizionarsi meglio sui motori di ricerca.

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.

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.

 

In base alle tue esigenze puoi scegliere di dare le dimensioni alla pagina web in pixel o dimensioni fluide in percentuale, aiutandoti attraverso il codice CSS. Se vuoi conoscere i segreti come aprire un blog gratis cosi da non commettere errori sfruttando la mia esperienza, sono sicuro che questo articolo faccia al caso tuo.

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.

Con la user experience Migliori l’usabilità della tua pagina web e la comprensione del tuo sito da parte dei motori di ricerca del tuo sito ottenendo la possibilità di un migliore posizionamento sui motori di ricerca.

Dimensioni pagina web

L’usabilità di una pagina web influisce sulle prestazioni del sito, infatti una migliore ottimizzazione della pagina sarà uguale ad un maggiore posizionamento SEO che vedrai crescere attraverso gli strumenti come Google Analytics o SEOZoom. Se stai ottimizzando delle immagini da inserire nel tuo sito considera sempre le dimensioni della pagina web.

Leggi questa guida se vuoi aprire un blog Google senza commettere errori.

Se stai lavorando su una pagina con dimensione 1920×1024 è per desktop quindi potrai inserire immagini più grandi, se invece lavori su una pagina mobile le tue immagini dovranno avere una dimensione non maggiore a 380px di larghezza. le dimensioni della pagina web è importante per capire come impostare la UX design, adesso che lo sai sono sicuro potrai ottenere migliori risultati in termini di usabilità e posizionamento. Conosci come ottimizzare le immagini per i social, questo articolo può semplificarti la vita.

Se sei interessato puoi leggere anche un altro dei miei articoli che mette in evidenza il web design tendenze 2021 dove potrai studiare e applicare al tuo sito un nuovo look di tendenza.


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

Lascia un commento

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

Iscriviti alla Newsletter ed entra a far parte della nostra community di creativi.

Ricevi eBook, guide e Tutorial Gratis!

Cresci giorno dopo giorno insieme a noi, leggendo gli articoli ed i tutorial sulla tua email.



Seleziona i motivi per i quali posso contattarti:



Puoi annullare l'iscrizione in qualsiasi momento facendo clic sul collegamento a piè di pagina delle nostre e-mail. Per informazioni sulle nostre pratiche sulla privacy, visitare il nostro sito Web.
Sono al corrente che iscrivendomi potrei ricevere consigli, tutorial, articoli e comunicazioni commerciali e informative.
Acconsento al trattamento dei miei dati personali ai sensi dell'articolo 13 del Regolamento (UE) 2016/679 e anche per comunicazioni commerciali e informative su Eventi, Prodotti e Servizi di Monacodesign.it Leggi l'informativa.

Scarica la Guida PDF Gratuita

Come personalizzare il tuo sito WordPress con Bootstrap

Scarica la Guida PDF Gratuita

eBook Come creare un blog gratis di successo

Iscriviti alla Newsletter per cominciare a raggiungere i tuoi obiettivi!