Un sito responsive è un tipo di sito web realizzato in modo che venga ben visualizzato su ogni dispositivo, è quindi necessario per rendere il sito accessibile ad ogni utente che lo visita. L’utilità di un sito web responsive è quella di mostrare i contenuti proporzionati rispetto lo schermo usato, ma come si fa a creare un sito responsive? Bisogna conoscere la codifica o usare un CMS, tutto questo lo vediamo oggi.
Cosa significa sito responsive o sito web responsivo
Se dovessimo fare una ricerca su Internet, tra le altre, troveremmo una pagina di Wikipedia che definisce così il design responsive:
Il design responsivo, o responsive web design (RWD), indica una tecnica di web design per la realizzazione di siti in grado di adattarsi graficamente in modo automatico al dispositivo coi quali vengono visualizzati (computer con diverse risoluzioni, tablet, smartphone, cellulari, web tv), riducendo al minimo la necessità dell’utente di ridimensionare e scorrere i contenuti.
Una descrizione che spiega perfettamente cosa fa la tecnica responsive e che quindi facciamo nostra.
Partendo da qui vediamo perché ogni moderno sito web dovrebbe essere responsive e soprattutto come crearlo.
Perché bisogna creare siti web responsive
Innanzitutto appare chiaro che un sito web non realizzato con design responsivo avrà vita molto breve, non tanto per il rischio di essere hackerato quanto per il motivo opposto. Sarà infatti talmente male posizionato nelle SERP che nemmeno gli hacker lo troveranno.
Attenzione però, perché se stai pensando di rinunciare alla tecnica responsive per evitare degli attacchi non stai facendo la scelta migliore, infatti gli utenti che navigheranno il tuo sito probabilmente lo vedranno bene solo con schermi di una certa dimensione ma malissimo con tutti gli altri.
Questa non è certo una bella maniera di presentarsi né di offrire i contenuti del sito a possibili clienti, soprattutto per determinati professionisti o attività che fanno nel proprio nome o marchio un segno di riconoscimento.
Ad esempio non possono rinunciare ad avere un sito responsive professionisti e attività come:
- medici e studi medici o ambulatori odontoiatri
- avvocati e studi legali o notai
- negozi e attività commerciali di vario tipo.
Quindi vale la pena rischiare di perdere credibilità per il timore di incappare in qualche problema? Direi di no, anche perché di sistemi per proteggere un sito web ce ne sono in abbondanza.
SUGGERIMENTO DI LETTURA
Riguardo i sistemi per garantire la sicurezza dei siti WordPress trovi i miei consigli in un precedente articolo, aumentare la sicurezza dei siti WordPress in 10 punti guida, potrebbe interessarti leggerlo.
Un sito web non responsive è poco leggibile e difficoltoso da navigare
Un altro svantaggio derivante dal non avere un sito responsive è l’impossibilità di cliccare in modo preciso sui link quando il testo è troppo piccolo e vicino ad altri link (capita spesso su smartphone e tablet con i link inseriti nel footer o nella sidebar).
In questo caso l’utente è costretto a zoomare in continuazione la pagina per cliccare il link desiderato, rendendo la consultazione del sito poco gradevole e invogliando all’abbandono.
Il motivo principale per creare un sito responsive è quindi quello di realizzare un sito web mobile-friendly, (letteralmente amico dei dispositivi mobili), capace di proporzionarsi automaticamente alle grandezze degli schermi. Adattandosi a loro permettere una buona navigazione anche a chi usa smartphone, tablet o altro.
In fondo, a cosa serve un sito web se non che a farsi conoscere nel migliore dei modi dal pubblico che desideriamo?
Google vuole che i siti siano responsive e penalizza chi non lo è
Se non ti bastassero questi motivi a convincerti che è indispensabile creare un sito responsive sappi che ormai da diversi anni (dal 2015) Google chiede massima attenzione nello sviluppo dei siti web, dando priorità alla visualizzazione dei siti da dispositivi mobili.
A conferma di questo sappiamo che Google a partire dal 2018 effettua i suoi calcoli prima su dispositivi mobili (smartphone e tablet) e poi su quelli desktop. É il concetto di first mobile.
Vogliamo allora farci nemico il caro motore di ricerca? Direi che non è il caso. Anche perché non è solo Google a chiedere ai siti di avere queste caratteristiche ma anche gli altri motori di ricerca, a partire da Bing ormai tutti considerano primaria la UX da mobile.
D’altra parte il superamento della navigazione da mobile rispetto a quella da desktop non è un dato recente ma già di qualche anno fa.
Se hai a cuore la visibilità del tuo sito è perciò indispensabile che ti adegui a questa tendenza, così facendo eviterai anche di perdere una grossa fetta di pubblico e possibili clienti.
Nel caso poi che tu voglia far realizzare ad altri il tuo sito e il budget a disposizione sia limitato, fai attenzione alle offerte che trovi online, soprattutto quando si tratta della creazione di un sito web economico ad un prezzo super stracciato. Questi, oltre ad essere prodotti poco professionali non sono quasi mai siti responsive, quindi diffida.
Come si ottiene il design responsive di un sito web
Bene, a questo punto vorrai sapere come realizzare il tuo sito responsivo per non restare fermo al palo. Fondamentalmente ci sono due modi, quelli che ti dicevo in apertura del post:
- scrivere a manina il codice necessario,
- usare un CMS come WordPress.
Ho perciò due notizie per te, una buona e una cattiva, quella cattiva te la do subito così non ci pensiamo più, per quella buona devi avere ancora un po’ di pazienza.
La notizia cattiva è che per realizzare un sito web responsive da codice dovrai lavorare sui CSS e usare l’HTML responsive, in particolare devi saper impostare le media query con i suoi breakpoint e le viewport. Ovviamente dovrai poi scrive tutto il codice CSS necessario per proporzionare i contenuti. Chiaro no?
Se non hai mai avuto modo di sporcarti le mani con l’HTML e i CSS probabilmente no e anche se lo fosse, come vedi, comporta un bel po’ di lavoro. Se quindi sei a digiuno di questi linguaggi e vuoi creare il tuo sito responsive ti toccherà metter mano a dei manuali o recuperare delle risorse da Internet.
Come impostare una pagina web responsiva
Ad ogni modo e giusto per darti un’infarinatura ti accenno cosa bisogna fare. Si tratta innanzitutto d’inserire sotto il tag “head” di ogni pagina che vuoi rendere responsive il comando che vedi nell’immagine sotto, quello indicato dalla freccia verde.
É codice HTML e informa il browser che la pagina deve adattarsi alla massima larghezza del dispositivo in uso (la viewport). Spetta poi a noi occuparci di proporzionare la visualizzazione impostando nel CSS i breakpoint corretti per i tipi di dispositivi attraverso le media query.
Alcuni esempi di breakpoint impostati da media query:
@media (max-width: 1200px) { tuo codice } /* per desktop e portatili */
@media (min-width: 768px) and (max-width: 990px) { tuo codice } /* per tablet più ampi*/
@media (max-width: 768px) { tuo codice } /* per tablets più piccoli*/
@media (max-width: 500px) { tuo codice } /* per smartphone*/
I valori di max-width sono i breakpoint, ovvero le dimensioni di schermo che quando lette dal browser impongono le regole di visualizzazione per quei device. Le regole non sono altro che il codice che hai scritto (quello contenuto nelle parentesi graffe) nel tuo file CSS: è lui che imposta le visualizzazioni delle pagine.
Come vedi creare siti web responsive operando direttamente sul codice non è per niente banale e non può essere spiegato in modo esaustivo in un solo articolo (ne servirebbe una serie), ma se desideri farlo o ne hai la necessità voglio darti una mano.
Qui sotto trovi infatti un elenco di risorse utili ad imparare a realizzare un sito web responsive o quanto meno per iniziare a metterci le mani.
Risorse per imparare a creare siti web responsive con il codice
Per farti risparmiare un po’ di tempo ho cercato per te delle risorse utili per imparare a codificare un sito responsive, puoi iniziare con questi video pubblicati su YouTube.
Se invece preferisci leggere un testo che tratta l’argomento responsive prova visita queste pagine web:
- Cosa sono i siti responsive
- Guida pratica di responsive web design su HTML.it
- Guida al responsive web design
Naturalmente esistono tantissime altre risorse su Internet che parlano di RWD (Responsive Web Design), se le conosci e vuoi suggerirle agli utenti del nostro sito puoi scriverlo nei commenti, è molto gradito!
L'alternativa alla creazione di un sito web responsive
Non è ancora la buona notizia di cui parlavo prima ma ci stiamo avvicinando.
Si tratta infatti di un modo alternativo alla creazione di un sito web responsive che permette la visualizzazione dei siti in modo proporzionato (o meglio, adattato) al variare degli schermi dei dispositivi.
Per farla breve, per realizzare un sito web con una visione ottimale senza usare tecniche responsive abbiamo a disposizione anche un’altra soluzione, esistono infatti i siti web realizzati con metodi adaptive.
In questi siti come dice il nome stesso, i contenuti si adattano allo schermo dell’utente. Hanno dei limiti però e infatti non garantiscono la perfetta visione delle pagine su tutte le grandezze di schermo.
La tecnica adaptive implica infatti la realizzazione di formati diversi del sito, generalmente tre. Uno per pc desktop (che comprende anche gli schermi dei portatili), un altro per smartphone e uno per tablet, il ché significa dover creare almeno tre versioni diverse del sito (con effetti sulla SEO che devono essere verificati una volta online).
Come funzionano i siti web adaptive
Come funzionano i siti adaptive? É presto detto.
Con questo sistema il server web dove è caricato il sito decide quale versione offrire all’utente, questo grazie ad uno script che comunica con il browser e da cui riceve le informazioni sul tipo di dispositivo connesso.
Quindi nel caso che il dispositivo abbia uno schermo che non corrisponde a nessuno dei formati realizzati dallo sviluppatore del sito non ci sarà una versione corretta da mostrare. A quel punto il browser userà la versione che più si avvicina alla grandezza dello schermo del device.
Se ci pensi è limitativo, perché nel caso che in futuro nascano nuovi dispositivi e con questi venga visitato il sito in questione, quest’ultimo sarà visualizzato male.
Facciamo un esempio senza andare troppo avanti nel tempo.
Nel caso di visita ad un sito adaptive da una smart tv (o web tv, ormai diffusissime), e quindi ipotizzando uno schermo di almeno 45 pollici, il sito sarà visualizzato con la versione adaptive studiata per i pc desktop e quindi con proporzioni non consone.
É quindi una tecnica da evitare? Oppure è un’alternativa valida? É meglio puntare solo su tecniche responsive o possiamo considerare il design adaptative una buona scelta?
Lo vediamo subito.
Meglio creare un sito web responsive o un sito adaptive?
In effetti è la domanda delle cento pistole. Nel senso che non c’è una risposta univoca ma come spesso accade dipende dalle situazioni. In alcuni casi la scelta migliore è creare un sito responsive, in altre sarà più indicato puntare sul design adaptive.
In particolare quando si parla di grossi siti, ad esempio quelli d’informazione, i contenuti studiati per desktop non possono essere presentati allo stesso modo su smartphone o tablet.
In questo caso è da preferire la metodologia adaptive che consente di realizzare versioni differenti con una quantità di contenuti diversa per ogni dispositivo.
Com’è facile immaginare si tratta di aziende che possono contare su molte risorse economiche, umane e tecniche, in quanto la realizzazione di siti diversi richiede investimenti di tempo e denaro importanti, nonché capacità di sviluppo, conoscenze SEO e molto altro.
Se invece il sito aziendale da realizzare ha la necessità di mostrare a chiunque lo navighi le stesse informazioni e contenuti, un sito responsive è la scelta giusta. Economica e perfetta per avere una visione ottimale delle pagine su tutti i dispositivi.
La scelta finale spetta quindi a chi deve realizzare il sito, appoggiandosi all’agenzia web di riferimento o al professionista che provvederà alla sua creazione.
Dovranno prendere in considerazioni i vari aspetti che definiscono il progetto web e valutare di comune accordo qual é la soluzione migliore.
Come creare un sito responsive con WordPress
Finalmente è arrivato il momento che aspettavi, quello della buona notizia!
Hai pazientato finora ma tutto questo era necessario, senza le informazioni che hai letto probabilmente ora non sapresti quanto è importante avere un sito web responsive e non avresti idea delle difficoltà tecniche per realizzarlo.
Ebbene con WordPress tutte le complicazioni dello sviluppo di un sito responsive svaniscono come d’incanto. Non è una magia ma è la grandezza di questo CMS che mai finirà di stupirci.
In fondo se agenzie web come SitiWeb-WP e tante altre esistono è anche per le potenzialità che WordPress riesce a dare a chi lo usa come base di sviluppo, ma questo è un altro discorso.
Sei pronto a creare il tuo sito web responsive? Ottimo, iniziamo.
Preparati a creare il tuo sito responsive con WordPress
Innanzitutto devi installare e configurare WordPress sul tuo pc o nell’hosting che hai sottoscritto, quindi dopo aver eseguito tutte le operazioni preliminari ora devi scegliere il tema grafico da usare nel sito.
Hai tre vie a disposizione, la prima e più semplice è quella di usare il tema fornito di default con l’installazione (attualmente con WordPress 6.1.1 hai il tema Twenty Twenty-Three), studiato appositamente da Automattic per essere conforme alla nuova release 6.1 di WordPress.
Personalmente ti consiglio di optare per qualcosa di diverso, perché seppur sviluppati in modo impeccabile i temi standard hanno dei limiti nelle funzionalità rispetto quelli commerciali o free.
Scegli il tema responsive per il tuo sito WordPress
Per scegliere il tema responsive del tuo sito prendi quindi una delle altre due strade: acquista un tema commerciale da uno dei portali online dedicati alle risorse per WordPress, oppure entra nella dashboard di wordpress.org e scegli uno dei temi a disposizione tra gli oltre 10.000 pubblicati.
Nel primo caso hai a disposizione più di un portale specializzato nella vendita di temi WordPress responsive. Una volta entrato in uno di questi, per facilitarti la ricerca, puoi impostare dei filtri. Seleziona quello che più ti piace e quindi verifica cosa dichiara il costruttore del tema, se ti convince procedi all’acquisto.
I siti di vendita temi WordPress più conosciuti e usati sono:
- www.themeforest.net
- www.templatemonster.com
- www.elegantthemes.com
Se però non ti senti ancora pronto all’acquisto puoi cercare il tema dall’interno della tua dashboard di WordPress oltre che da quella ufficiale di wordpress.org indicata sopra.
Qui, proprio perché l’esigenza di avere un sito responsive è sentita da tutti, troverai solo template grafici realizzati in modo responsivo. Per toglierti però ogni dubbio, nella casella di ricerca dei temi scrivi la parola responsive.
Verifica quindi nella presentazione di ogni tema quanto viene fornito e inizia a provarli, infine scegli e installa quello che ti ha convinto di più e che sembra adatto all’argomento del tuo sito web.
Bene, ora che hai scelto e caricato il tema grafico che vuoi usare (stupisciti), il tuo lavoro per creare un sito web responsive è terminato.
Creare un sito responsive con WordPress è semplice da non credere
Come hai visto, anche in questo caso WordPress permette di risolvere in modo semplice ciò che i metodi classici di sviluppo web non consentono. Tutte le impostazioni HTML e CSS che servono per fare un sito web responsivo vengono infatti fornite di base nei suoi template.
Naturalmente esistono ulteriori sistemi per affinare la visualizzazione delle tue pagine, ad esempio se conosci il linguaggio dei CSS puoi inserire del codice con l’opzione CSS personalizzato, quella che trovi in ogni pannello di personalizzazione del tema.
Resta il fatto che qualsiasi scelta tu faccia riguardo il template da usare nel sito, questo al 99% sarà responsive, senza che tu abbia fatto nessuno sforzo se non quello di metter mano al portafogli nel caso di acquisto di un tema commerciale.
L’importanza di fornire un sito responsive ad utenti e Google
Conclusioni
Quando si decide di creare un sito web per la propria azienda o attività è importante fare subito le scelte migliori per non trovarsi da lì a poco a dover metter mano per delle modifiche.
Una delle scelte più importanti è proprio quella di chiedere allo sviluppatore di turno di fornirci un sito web responsive, una richiesta giustificata dall’uso massiccio dei dispositivi mobili e dall’importanza che Google da a questa caratteristica.
Abbiamo quindi visto che per realizzare siti responsive c’è più di una strada, ma come dimostrato e facilmente verificabile, l’uso di WordPress può accelerare notevolmente la creazione.
Chi realizza i temi di WordPress si sostituisce infatti agli sviluppatori nell’impostazione grafica, togliendo preoccupazioni riguardo la scrittura del codice e facendo risparmiare decine di ore di lavoro.
In conclusione, se vuoi realizzare il tuo prossimo sito web con la certezza che sia responsive, usare WordPress è decisamente una scelta consigliata, senza dimenticare di affidare lo sviluppo a degli esperti per garantirsi il miglior risultato possibile.
SitiWeb-WP è un'agenzia web di Milano specializzata in WordPress
Ci occupiamo di tutto quello che riguarda la presenza online di aziende, professionisti e attività commerciali.
Siamo specialisti nella realizzazione di siti web professionali con WordPress, servizi di assistenza, manutenzione e gestione siti. Se hai bisogno di un restyling possiamo intervenire, così come ottimizzarlo in chiave SEO per renderlo visibile nei motori di ricerca.
Per maggiori informazioni contattaci!