In questo articolo troverai informazioni su cos'è un sito responsive, come creare pagine adattabili a cellulari e desktop e quali vantaggi ha per il posizionamento sui motori di ricerca.
Un sito internet responsive o responsivo è un sito che migliora l’esperienza utente in base al dispositivo che utilizziamo per visualizzarlo.
Un sito responsivo agli occhi di un normale utente è un sito web qualunque, e così è giusto che sia. In realtà, se fatto bene, nasconde una tecnologia che permette di renderlo fruibile al miglior modo sui dispositivi più diffusi. Ad esempio, su un pc desktop possiamo leggere gradevolmente un testo impaginato su due o tre colonne, ma su smartphone? Sarebbe una schifezza, perciò deve essere adattato per essere visualizzato ad esempio su una colonna sola.
La stessa cosa vale per le immagini, o per altri elementi presenti nel sito web. Le dimensioni limitate dello schermo degli smartphone inoltre rendono difficile cliccare elementi piccoli o troppo vicini, che magari su desktop non creano alcun problema. Le foto e le immagini risponsive si adattano perfettamente alla larghezza dello schermo e non è necessario zoomare fastidiosamente il contenuto. Immagina di avere un form di contatto con un bottone che permette di inviarti un’email ma che l’utente non riesce a cliccare perché è troppo piccolo. Vuoi perdere un potenziale cliente?
Oppure immagina un sito in cui i testi sono piccoli, non si riesce a capire dove cliccare, dovendo ricorrere a frequenti zoom col risultato che l’utente abbandona immediatamente il tuo sito. Certo, potresti realizzare un sito unicamente per smartphone, ma lasceresti fuori tutti gli altri dispositivi? Per questo motivo, i siti web responsivi permettono di avere un sito unico e di riadattarne automaticamente il layout per migliorarne la fruibilità su ogni dispositivo utilizzato.
Migliorando l’esperienza utente, possiamo fare in modo che i tuoi possibili clienti passino più tempo sul tuo sito web, aumentando la possibilità di conversione.
Se vuoi creare il tuo sito web da solo ti consiglio di trovare un template dal design responsive. Puoi trovare degli ottimi template gratis o a pagamento utilizzando la piattaforma di Wordpress. Prima di scegliere tra i vari temi responsive assicurati che il responsive layout sia ben fruibile per cellulari e per schemi del pc con varie risoluzioni.
Assicurati che il menu si trasformi in modo adeguato adattandosi alle dimensioni dello schermo: solitamente in alto a destra o in alto a sinistra viene visualizzata un'icona con tre righette, detta hamburger menù, che permette di visualizzare la lista delle pagine per mobile. Su dispositivi più grandi si utilizza spesso un menù con voci orizzontali nella parte superiore della pagina.
La magia che permette il cambio di impaginazione in un sito mobile friendly in base alla larghezza del dispositivo è la programmazione di un responsive css. Vengono decisi dal web designer responsive dei break point che stabiliscono della fasce di dispositivi in base alla risoluzione. A queste fasce di larghezza del dispositivo con associate delle regole css .
Dunque il layout responsive html con inserite immagini e testi non cambia, ma vengono richiamate regole diverse in base alla larghezza dello schermo, o per essere più precisi della finestra del browser su cui viene aperta la pagina.
Il break point (o media query) scelti devono tener conto sia delle risoluzioni di schermi più comuni sul mercato sia con quali dispositivi il vostro target di riferimento visualizza le pagine internet. In generale si usa un media query che va da 1px di larghezza a 600px o 700px per cellulari, un break point fino a 1000px per tablet e un ultimo da 1300px in poi per gli schermi del computer; non sono regole fisse e dipendono sempre dal tipo di progetto grafico e dall'evolversi della tecnologia.
Un sito web responsive ha un unico layout che si modifica in base allo spazio della finestra in cui lo stiamo guardando: il browser visualizza il contenuto in base al media query dichiarato nel css.
In un un sito mobile adaptive il server propone la miglior versione per il dispositivo che si collega. Esistono dunque più temi per ogni device.
L'approccio è ben diverso e possiamo concludere in sintesi che il i siti responsive sono più leggeri, più piacevoli nella navigazione e più semplici da modificare e gestire lato Seo. Un sito adattivo può essere utilizzato per progetti che esigono contenuti e layout ad hoc per ciascun dispositivo. È possibile però rendere adaptive un vecchio sito sviluppando una versione nuova per cellulari mentre non è possibile rendere facilmente responsive un sito già fatto.
Con la diffusione degli smartphone e dei tablet, l’utilizzo esclusivo del computer desktop per navigare su internet è ormai un ricordo lontano. Oggi consultiamo quotidianamente le risorse online come quotidiani, email e sicuramente i social network, non più esclusivamente attraverso i pc, ma molto più frequentemente con il nostro smartphone. Addirittura uno studio condotto da Hootsuite, mostra che nel 2018, l’88% degli utenti Facebook italiani vi accede via smartphone.
Per quanto riguarda i siti internet, secondo le ricerche di Comscore, negli ultimi anni il 25% (9,3 milioni) dei 37,3 milioni di italiani che si connettono, ha utilizzato solamente smartphone o tablet, mentre il 24% (9,1 milioni) si è connesso solo tramite PC. Il rimanente 51% degli utenti accede a internet utilizzando entrambi i dispositivi. Se consideriamo che esistono vari modelli di smartphone e tablet con varie dimensioni dello schermo, significa che ognuno di noi vede il sito internet in modo differente.
L’algoritmo di Google che decide in quale posizione mostrare i siti web è segreto, ma qualcosa di lui lo sappiamo. Da qualche anno (precisamente da 21 Aprile 2015), Google ha dato molta importanza ai siti web responsive a discapito dei siti web “vetusti” che non hanno la possibilità di adattarsi agli schermi dei nuovi dispositivi che utilizziamo per connetterci.
Qualche anno fa veniva realizzato un sito versione desktop e uno separato, con versione mobile. Essendo però oggi noto che due siti con i soliti contenuti duplicati vanno incontro a penalizzazione da parte di Google, con la conseguenza di sprofondare in fondo tra i risultati di ricerca, il sito web responsive è diventata la soluzione migliore per risolvere il problema, divenendo un vero e proprio fattore di ranking che influisce sul posizionamento nella SERP.
Vuoi sapere come portare il tuo sito ai primi posti dei motori di ricerca per aumentare le vendite, la generazione di contatti o di richieste di preventivo? Contattaci per parlare direttamente con il nostro Consulente SEO e scoprire tutte le potenzialità del tuo sito web.
Se il tuo sito è molto vecchio, è probabile che non lo sia, ma per esserne certo, Google ha messo a disposizione questo Tool con cui puoi verificarlo. Talvolta non è sufficiente, poiché ti mostra solamente se il sito è ottimizzato per dispositivi mobili e non per mobili e desktop contemporaneamente, ma può darti un’idea. Basta aprire il link e scrivere nella barra il nome del tuo sito.
Se hai bisogno di realizzare un nuovo sito partendo da zero o se pensi di aver bisogno di un restyling del tuo sito web, puoi contattarci a info@chefstudio.it o chiamarci ai recapiti che trovi in basso nel footer e sapremo consigliarti la scelta migliore.
Realizzazione sito web responsive per Agriturismo Orto Bio
Realizzazione sito web responsive per Omega Italy
Creazione sito internet responsive per Woody Lab
Creazione sito professionale responsive per Architetto Marco Bonfigli
Qui a Chef Studio mi occupo di SEO, Art Direction, User Interface Design e Fotografia. Dal 2013 sono Fotografo Certificato Google Maps Street View. Nel tempo libero amo viaggiare e fare un sacco di altre cose che se le elenco non finiamo più. Sono curioso, molto. Mi piace documentarmi e imparare sempre cose nuove.
