Sviluppare un sito web per diversi device: risoluzione e user-agent

[vc_row][vc_column][vc_column_text]A seguito dell’introduzione dei diversi dispositivi mobili ogni sviluppatore di siti web si è trovato almeno una volta a dover realizzare una interfaccia per le diverse risoluzioni e i diversi browser ragionando in funzione del responsive web design.

Per ottimizzare il proprio metodo di lavoro è opportuno in fase di sviluppo del codice, poter visualizzare il tema grafico e il suo comportamento nelle diverse risoluzioni, ma spesso questo non basta ed è necessario analizzare l’aspetto grafico al variare dello user-agent, per far comparire o scomparire determinati elementi in funzione dei diversi dispositivi o per analizzare il comportamento degli elementi della pagina al variare del browser, a causa della diversa compatibilità con i selettori CSS.[/vc_column_text][vc_message color="info" message_box_style="standard" style="rounded" message_box_color="info" icon_type="fontawesome" icon_fontawesome="fa fa-info-circle" icon_openiconic="vc-oi vc-oi-dial" icon_typicons="typcn typcn-adjust-brightness" icon_entypo="entypo-icon entypo-icon-note" icon_linecons="vc_li vc_li-heart" icon_pixelicons="vc_pixel_icon vc_pixel_icon-alert"]Cos’è lo user-agent

Lo user-agent, in campo informatico, è una applicazione che si collega ad un server. In questo articolo intendo come user-agent i client browser, che navigando su internet si collegano ad un server web, richiedendo una determinata pagina. In particolare, al momento della richiesta, lo user-agent fornisce una stringa testuale al server per far identificare la tecnologia con cui lavora: la stringa testuale fornita dallo user-agent fornirà quindi informazioni come il nome del client, il sistema operativo, la lingua e la versione.

Anche i crawler dei motori di ricerca forniscono uno user-agent per essere identificati, offrendo la possibilità mediante il file robots.txt, di bloccare l’accesso alle pagine web da parte di alcuni bot.[/vc_message][vc_column_text]

Utilizzare i browser per visualizzare i siti a diverse risoluzioni

I browser di ultima generazione per client desktop o notebook offrono strumenti integrati per modificare la risoluzione con cui visualizzare i siti web e nel caso di layout responsive è possibile analizzare il comportamento delle pagine a diverse risoluzioni, in modo da modificare gli stili secondo i nuovi selettori forniti dai CSS3, personalizzando la visualizzazione degli elementi della pagina a seconda del monitor su cui vengono renderizzati.

Sia Chrome che Mozilla Firefox offrono la possibilità di modificare la risoluzione grazie ai tool interni, ma in questo articolo vedremo in particolare le funzionalità offerte dal browser Firefox, su sistema operativo Microsoft.

[bctt tweet="Grazie a Chrome o Firefox possiamo sviluppare un sito web per differenti risoluzioni"]

In particolare con il client della Mozilla, per visualizzare una pagina web a risoluzioni differenti, possiamo:

• Dal menù selezionare Strumenti >> Sviluppo web >> Visualizzazione flessibile (e se non compare il menù ricordatevi di premere il tasto ALT)
• Premere direttamente i tasti di scelta rapida CTRL + SHIFT + M

Come vedrete la visualizzazione dell’area si ridimensionerà in funzione della risoluzione selezionata nella input in alto. Per modificare le diverse risoluzioni non dovrete fare altro che selezionarne una nuova dal menù a discesa.

Così facendo però non possiamo modificare lo user-agent, ma solo la risoluzione. Per risolvere questo inconveniente ci viene in aiuto una estensione aggiuntiva del browser.

Firefox e l’estensione User Agent Switcher

Un componente molto utile, per poter modificare lo user-agent senza dover cambiare browser o device, è una estensione per Firefox, dal nome User Agent Switcher, di cui potete trovare maggiori informazioni sul sito di riferimento.

Questa estensione aggiunge la possibilità di scegliere con che user-agent visualizzare una determinata pagina web. Vediamo insieme come installarla, come utilizzarla e come aggiungere ulteriori user-agent alla scarna lista fornita di default.

[bctt tweet="User Agent Switcher: estensione di #Firefox per usare differenti user-agent"]

Come installare User Agent Switcher

Una volta aperto Firefox dirigiti al link dedicato e premi sul bottone Aggiungi a Firefox. Clicca poi, nel box che si aprirà, sul bottone Installa e aspetta che si completi il processo, che potrebbe richiedere un riavvio di Firefox.

Una volta aggiunta l’estensione ti consiglio di inserirla al menù e per far questo non dovrai fare altro che premere con il bottone destro del tuo mouse sulla barra degli strumenti in alto e selezionare Personalizza dal menù che appare.

Nella finestra che comparirà clicca sull’icona con label Default User Agent e tenendo premuto il tasto sinistro trascina l’icona dove vuoi farla comparire. Io l’ho inserita sul menù sempre visibile in alto in modo da potervi fare accesso velocemente. Premi poi sul bottone in basso a destra Termina personalizzazione.

Come cambiare lo user-agent

Una volta installata questa estensione per poter modificare lo user-agent con cui viene visualizzata la pagina non si dovrà fare altro che:

• Dal menù selezionare Strumenti >> Default User Agent >> user-agent che si intende utilizzare
• Premere sull’icona dello strumento e selezionare lo user-agent con cui si vuole renderizzare la pagina.

Attenzione: la modifica non avviene in tempo reale e una volta selezionato lo user-agent desiderato sarà necessario aggiornare la pagina.[/vc_column_text][td_block_ad_box spot_id="header" spot_title=""][vc_column_text]

Aggiungere ulteriori user-agent allo strumento

Come potrete vedere, una volta installata l’estensione, gli user-agent configurati di default sono pochi, giusto per comprendere le funzionalità dello strumento. Per rendere quindi pienamente operativo questo strumento vi consiglio di aggiungerne di nuovi.

Per far questo è necessario come prima cosa scaricare la lista degli user-agent dal link fornito dallo sviluppatore, una volta aperta la pagina salvatela come file (File >> Salva pagina con nome), dopodiché potrete importarla nell’estensione con le due diverse modalità:

• Dal menù selezionare Strumenti >> Default User Agent >> Edit User Agent.
• Dall’icona dell’estensione selezionare Edit User Agent.

Nella finestra che comparirà premete quindi sul bottone Import, selezionate il file XML precedentemente salvato ed ecco a voi una nuova lista di user-agent.

Quali user-agent ci permette di utilizzare questo strumento

Questa utile estensione, oltre ad utilizzare gli user-agent dei device mobile più utilizzati quali Iphone e smartphone android ci permette di visualizzare le nostre pagine web come se stessimo utilizzando browser differenti (fra cui Chrome, Internet Explorer e Opera) su sistemi operativi diversi (Microsoft, Mac e Linux) velocizzando il nostro lavoro di sviluppo senza dover di volta in volta cambiare ambiente e browser.

Questa estensione in più ci permette di simulare la visualizzazione del nostro sito web da parte dello spider dei più famosi motori di ricerca, per comprendere cosa viene letto e cosa no, utile per i SEO che vogliono comprendere quali risorse sono bloccate a livello di indicizzazione.[/vc_column_text][/vc_column][/vc_row]