Colnet Sito e SEO Immobiliare | P.IVA 10848460019 | Tel. 347.3606898 | info at colnet.it
colnet sito e seo immobiliare su facebookcolnet web marketing immobiliare su google pluscolnet siti web per agenzie immobiliari su twittercolnet seo e posizionamento immobiliare su linkedin
home » sito web, posizionamento siti, seo e web marketing per tutti

Sito Web Responsive: caratteristiche, vantaggi e Responsive Design Test per siti mobile friendly

Un Sito Web Responsive è un sito internet in grado di adattarsi automaticamente alle dimensioni di ogni dispositivo di visulizzazione: web, tv, ipad, smartphone e altri apparecchi mobili.sito web responsive

Sapendo che l'Italia è uno dei maggiori utilizzatori di dispositivi mobili d'Europa, possiamo facilmente comprendere quali e quanti vantaggi possono derivare dall'uso di siti web mobile friendly. Infatti fornire in tempo reale e in modo trasparente al navigatore una versione che si adatta automaticamente alle dimensioni, soprattutto quelle orizzontali, evitando fastidiosi scroll della pagina, aumenta l'usabilità del sito e quindi i tempi di permanenza sullo stesso, con maggiore possibilità di raggiungere il nostro obiettivo.

Prima di continuare verifichiamo se il nostro sito web è responsive, guardando come si adatta alle principali risoluzioni video presenti in commercio, utilizzando il seguente strumento di responsive design test.

Responsive Design Test online per la verifica di Siti Web Responsive

Per il responsive design test, inserisci l'indirizzo web corretto di un sito internet per verificare la capacità di adattarsi intelligentemente alle più comuni risoluzioni video.

Tra le infinite possibilità, vengono prese in esame le principali risoluzioni attualmente in commercio:

  • 240 x 320 tipiche di cellulari o piccoli smartphone
  • 320 x 480 tipiche di smartphone e iPhone
  • 480 x 640 tipiche dei tablet più piccoli
  • 768 x 1024 tipiche degli iPad verticali
  • 1024 x 768 tipiche degli iPad orizzontali
  • risoluzioni superiori tipiche dei monitor per pc

Test di compatibilità di Google per i siti web Mobile Friendlygoogle mobile friendly test per sito web responsive

Anche Google, nell'intento di fornire ai navigatori il miglior servizio possibile, ha recentemente fornito strumenti e incentivi alla realizzazione di siti responsive.

In quest'ottica, Google ha affermato che i siti mobile friendly verranno evidenziati da apposita etichetta nei risultati della ricerca, al fine di informare i navigatori ancora prima di accedere al sito; inoltre Gogle afferma che questo fattore, concorrerà insieme agli altri, a migliorare il posizionamento del sito web sul suo motore di ricerca.

Un sito web è Mobile Friendly per Google se soddisfa alcuni semplici requisiti:

  • evitare l'uso di software e plugin come flash non supportati dai dispositivi mobili
  • utilizzare una dimensione dei caratteri che renda le pagine sempre leggibili senza fare uso di zoom
  • evitare contenuti che rendano necessario uno scroll orizzontale
  • fare in modo che link e pulsanti siano sufficientemente distanziati per poter essere premuti facilmente
  • configurare il tipo di visualizzazione con il meta tag viewport

Per testare la generica pagina del sito web, Google ci mette a disposizione l'apposito strumento di test: https://www.google.com/webmasters/tools/mobile-friendly/

Se hai apportato le modifiche utili a rendere il sito responsive e testato qualche pagina tipo non è necessario verificare tutte le pagine del sito in quanto nel Google Web Master esiste un report che segnala le pagine e il tipo di errore per tutte le pagine dei siti registrati non conformi sotto la voce "Usabilità dei dispositivi mobili" del menù "Traffico di ricerca".

Differenze tra Sito Web Responsive, Sito Mobile e Sito a layout fisso

Prima della diffusione di tecniche di design responsivo, anche a causa della poca compatibilità esistente tra diversi browser, si preferiva individuare una risoluzione ottimale per cui realizzare il sito web e trascurare le altre. La risoluzione ottimale, ovvero quella che andava incontro alle esigenze della gran parte dei navigatori era di 1024 pixel di larghezza e ancor oggi molti siti sono ottimizzati per tale formato, anche se si stanno diffondendo tra i navigatori risoluzioni maggiori.

Adesso invece con la diffusione delle connessioni mobile e la maggior adesione dei produttori di browser agli standard del web, ta cui HTML 5 e CSS 3, risulta più semplice ed importante orientarsi verso un modello responsivo.

Visto che il sito a layout fisso non ha nulla da offrire in più rispetto ad un sito web responsive, resta da capire se possiamo fare a meno tranquillamente anche del Sito Mobile, ovvero un sito studiato e realizzato appositamente per dispositivi mobili. Decidiamolo analizzando vantaggi e svantaggi di ciascuna soluzione.

Sito Web Responsive

  • vantaggi:
    • costi mediamente contenuti di realizzazione
    • gestione, test e manutenzione di un unico sito
  • svantaggi:
    • maggiori difficoltà e vincoli per la realizzazione del sito
    • peso delle pagine mediamente troppo elevato per i dispositivi mobili generalmente meno potenti e con velocità di connessione limitate

Sito con layout fisso

  • vantaggi:
    • costi contenuti di realizzazione
    • semplicità relativa di realizzazione
    • gestione, test e manutenzione di un unico sito
  • svantaggi
    • usabilità da limitata a molto limitata sui dispositivi con risoluzione inferiore a quella ottimale
    • peso delle pagine mediamente troppo elevato per i dispositivi mobili

Sito Mobile

  • vantaggi:
    • maggiore usabilità possibile anche per i dispositivi più piccoli
    • maggiore leggerezza e velocità di caricamento delle pagine
  • svantaggi:
    • costi elevati per la necessità di un secondo sito web con relativa manutenzione
    • complicazioni nel monitoraggio delle visite di 2 siti e nel reindirizzamento in base al dispositivo

Realizzazione di un Sito Web Responsive

Adesso che abbiamo le idee più chiare sull'importanza e sulle potenzialità di un sito web responsive, diciamo qualcosa a proposito della maggior complessità che richiede la realizzazione di un sito web responsive.

Ecco una serie di consigli e avvertimenti per sviluppare un sito web responsive:

  • preferire template a sviluppo verticale con i vari elementi uno sotto l'altro
  • fare in modo che il testo sia sempre leggibile anche sui dispositivi più minuti, preferendo unità di misura del testo come em e rem, che scalano automaticamente, al posto dei classici pixel, anche se ugualmente ben gestiti dai moderni apparacchi mobili
  • utilizzare unità di misura percentuali per i contenitori al posto di quelle fisse in pixel
  • dotare il sito di menù e banner responsive
  • utilizzare i css con le media query che permettono di applicare regole di stile differenti a seconda della risoluzione del dispositivo utente
  • usare i css per nascondere determinati contenitori per risoluzioni via via minori attraverso l'istruzione display: none
  • all'occorrenza fare uso anche di codice javascript per manipolare il contenuto della pagina in base alle dimensioni del dispositivo
  • cercare di limitare al minimo il peso e il numero delle risorse da caricare per andare incontro ai limiti dei dispositivi più piccoli e meno potenti
  • fare in modo che anche le immagini siano responsive utilizzando il nuovo elemento html "picture" o il nuovo attributo "srcset" del tag "img" per specificare differenti formati per differenti risoluzioni e in mancanza, a causa dell'attuale scarsa compatibilità con i browser, l'uso del dimensionamento percentuale dell'immagine con max-width:100% e height:auto

Esempio di Sito Web Responsive e Sito Mobile per Sito Immobiliare

Dopo tante parole, vediamo con un esempio vero quali sono vantaggi e differenze tra un sito web responsive. Non un semplice sito o blog con menù in alto e contenuti di testo e immagini nel corpo della pagina e facilmente adattabile, ma un sito web più complesso come un sito web immobiliare caratterizzato da

  • una home page con vetrina immobiliare e motore di ricerca degli annunci
  • una pagina dei risultati della ricerca immobiliare
  • una pagina di dettaglio immobiliare con form contatti, mappa geografica di geolocalizzazione dell'immobile e galleria fotografica

Il sito web responsive immobiliare oggetto dell'esempio è visualizzabile all'indirizzo demo.colnet.it. Per scoprire le altre caratteristiche del sito visitare la pagina del Sito Web per Agenzia Immobiliare.

La verifica può avvenire semplicemente ridimensionando manualmente il browser, anche se con alcune limitazioni, in quanto alcune proprietà responsive vengono impostate al caricamento della pagina, eventualmente fare in modo di ricaricare la pagina, oppure meglio utilizzando dispositivi di differenti dimensioni o ancora utilizzare lo strumento di responsive desig test online presentato ad inizio pagina.

In seguito possiamo passare ad analizzare il sito mobile immobiliare m.demo.colnet.it per valutarne le differenze. Per scoprire le altre caratteristiche del sito mobile visitare la pagina del Sito Mobile per Agenzia Immobiliare

I cookie permettono di offrire un servizio migliore, utilizzando il sito accetti l'uso di cookie anche di terze parti.infook