Oggigiorno risultano essere sempre meno le persone ad utilizzare un computer per la navigazione in rete, e sempre più invece, quelle che tendono ad effettuare collegamenti da piccoli dispositivi portatili, quali: laptop, tablet o smartphone. A differenza inoltre di qualche anno fa, questi telefoni cellulari, non vengono utilizzati per essere presenti sui social network, o per aggiornare la propria mail, ma hanno letteralmente preso il posto di tutti quei personal computer, in precedenza utilizzati per esplorare magari siti di testate o anche semplicemente per acquistare online. E’ per tale ragione che da qualche tempo a questa parte, è andata a diffondersi l’esigenza di dare vita ai cosiddetti siti responsive; andiamo a scoprire di cosa si tratta.
Cosa è un sito web responsive e come rendere responsive un sito già esistente
Realizzare un cosiddetto sito web responsive è al giorno d’oggi praticamente necessario, e il tutto consiste nel conferire al sito, attuando delle modifiche nel layout, la possibilità di mutare la sua forma a seconda del dispositivo che l’utente sta usando per la navigazione. Creare un sito dal design responsive, può portare anche a non perdere visitatori che magari, spazientiti dalla noncuranza di un sito web, preferiscono navigare altrove. Ci sono allora delle piccole linee guida che è necessario conoscere per riuscire a realizzare un sito web responsive da zero, o perché no, per riuscire a modificare il proprio vecchio sito adeguandolo ai tempi che viviamo. La prima cosa da tenere in considerazione se avete intenzione di cambiare forma al vostro sito, è quella di scegliere cosa all’utente volete far apparire, il che significa ovviamente che il formato della pagina non andrà a diminuire, ma sarà necessario avviare una certa pulizia, per così dire, degli elementi che in uno schermo di un semplice smartphone possono apparire superflui e non essenziali. Questo significa in poche parole, che su certe pagine dovrete eliminare le immagini e dare la precedenza alle parole, mentre invece su altre dovrete dare la precedenza ad un file audio o video perché più efficace agli occhi di un possibile utente che visita il vostro sito. Una volta realizzato questo procedimento con ogni pagina ed ogni sezione del vostro sito, potete passare alla fase seguente.
Fatto ciò infatti, il secondo passo sarà quello di andare a modificare dall’interno il vostro sito. Ipotizziamo di voler rendere le pagine visibili totalmente per gli smartphone; in tal caso la prima cosa da fare è la seguente: scegliere il layout del sito che fa più si adatta alle vostre esigenze, considerando che di norma, un layout normale parte da 690 pixel. A questo punto di solito all’interno del menù a tendina del vostro sito potete selezionare la voce layout e selezionare per ogni dicitura relativa alla grandezza del testo la cifra 16 pixel, che vi garantirà il rimpicciolimento del testo su ogni dispositivo smartphone. Quella dicitura che avete modificato in precedenza prende il nome in informatica di queries, un piccolo codice alfa numerico che include anche la quantità dei pixel della pagina totale e che per questa ragione, è in grado di adattarlo ai vari formati dei molteplici dispositivi. Questo piccolo codice serve appunto a determinare i pixel che andranno poi a dare origine alla pagina web che intendiamo far visualizzare ai nostri utenti.
Un altro efficace metodo per riuscire a rendere il vostro sito responsive e pertanto adattabile a quanti più dispositivi possibili è la modifica della cosiddetta sezione head, presente sempre all’interno del layout del sito e selezionabile di solito cliccando sulla pagina stessa. A questo punto dovrete inserire all’interno del codice che si aprirà la dicitura viewport, e sarà proprio su questo che si andrà a modificare l’aspetto della vostra pagina web. Ipotizziamo ora che anziché in uno smartphone, avete intenzione di rendere visibile la vostra pagina da un tablet; o in questo caso vi soffermate a modificare la querie come spiegato nel paragrafo precedente, e inserite la dicitura tablet 768 pixel, oppure questa medesima dicitura la potrete inserire all’interno del codice alfa numerico che vi si apre in automatico dall’head del sito. Una volta fatto questo procedimento il vostro sito apparirà alla medesima maniera su questi due dispositivi in questione, ma solo con dimensioni più ridotte.
In alcuni casi una volta inserita la dicitura che si abbina ai pixel del tablet, non sarà difficile notare che la pagina appare praticamente su due colonne differenti; tutto nella norma, perché una volta effettuato l’accesso al sito da un tablet, la pagina in questione apparirà come lo desiderate. L’ultima fase di sistemazione di un sito responsive è quella relativa agli indirizzi html; in sostanza questi indirizzi dovrebbe apparire come inalterati una volta terminato il cambio del sito da normale ad un layout responsive. Nel caso in cui la pagina risulti mancante o vi dia errore, dovrete rifare tutto il procedimento spiegato in precedenza prestando attenzione all’inserimento dei codici numerici. Il sito web responsive è correttamente modificato quando tutti gli indirizzi html si aprono perfettamente e si adattano ai vari formati dei dispositivi mobili che voi stessi avete in precedenza aggiunto.
Come realizzare un sito web responsive da zero
Ovviamente la tecnologia fa passi da gigante, e le linee guida descritte in precedenza vi torneranno utili nel caso in cui abbiate già una base d sito web da modificare come abbiamo visto, semplicemente in maniera manuale ed entrando all’interno dei codici alfa numerici del layout. La cosa è decisamente più semplice se avete invece intenzione di partire a realizzare un sito web responsive da zero, perché tutti questi procedimenti finora descritti in maniera manuale, verranno attuati in maniera automatica grazie a degli appositi software o programmi gratuiti facilmente scaricabili online. In sostanza in meno di tre ore potrete dare vita al vostro sito web responsive visibile alla perfezione su ogni genere di dispositivo elettronico. Il segreto è da rintracciare all’interno dei cosiddetti frameworks; di cosa si tratta? Andiamo a scoprirlo.
La prima scelta di cui vi parliamo equivale alla nota agenzia web Neting, che sul suo sito ufficiale offre servizi completi di realizzazione siti web professionali. Nessun software o app da installare e soprattutto nessuna conoscenza di base necessaria: grazie ad un team di esperti, sarà garantito un lavoro a trecentosessanta gradi che parte dalla creazione del sito internet, per poi procedere con l’ottimizzazione per i motori di ricerca (SEO) e con l’immancabile ottimizzazione responsive per dare comfort a chi accederà al portale tramite dispositivi mobile.
Twitter Bootstrap rappresenta un altro metodo per realizzare un sito o una pagina web responsive partendo da zero e senza avere alcuna precedente base. In sostanza una volta installato il programma all’interno del vostro personal computer, vi basterà semplicemente seguire passo dopo passo la guida del programma per riuscire così a dare vita al vostro sito adatto per qualsiasi tipo di dispositivo elettronico. Twitter Bootstrap è uno dei framework più completi che ha già al suo interno vari sistemi di impaginazione, in maniera tale che così l’utente possa scegliere quello che più si avvicina ai suoi gusti personali. Per poter fare in modo che il vostro software regoli le pagine del vostro sito in base al dispositivo, dovrete prestare attenzione a scaricare la sua versione più recente.
Un’altra soluzione molto semplice in grado di dar vita ad un sito web responsive in men che non si dica, si chiama Foundation tre, e al momento risulta essere praticamente il migliore programma dopo il sopra descritto Twitter Bootstrap. A differenza del precedente permette infatti di modificare radicalmente il sito in pochi minuti, con dei semplici pulsanti che appaiono immediatamente alla prima schermata subito dopo l’apertura, e contiene tra l’altro moltissime idee di siti web responsive già preformati, utili perché qualsiasi utente può in questa maniera realizzare un nuovo sito in men che non si dica, scegliendo anche tra colori, sfondi e tipo di testo in base ai molteplici caratteri disponibili e tra cui scegliere.
Con la medesima funzione è anche scaricabile il framework IPure, che permette di personalizzare in maniera più dettagliata rispetto ad altri, la propria progettazione del sito, in quanto suddiviso già in griglie e con gli spazi per il testo e le immagini da inserire in maniera semplice e veloce. In assoluto però, per agevolare il lavoro anche ai possessori di siti web che poco si intendono di informatica, è stato messo in vendita online un recente framework dal carattere più dinamico e alla portata di tutti, inclusi come abbiamo già detto i meno esperti; stiamo parlando di Base, il sistema che al momento rappresenta il framework più semplice da utilizzare, proprio perché permette di scegliere tra una gamma limitata di opzioni, e ad ogni pagina è facile selezionare il dispositivo portatile per il quale questa va modificata nella sua forma e delle sue estensioni. Tutti i frameworks descritti sono ovviamente scaricabili a pagamento o in maniera gratuita, se vi accontentate di una vecchie versione, direttamente dai siti ufficiali che predispongono il download. Non è dunque complicato, come avete potuto constatare, rendere un sito al passo con i tempi e fare in modo che questo venga visionato ed apprezzato da tutti gli utenti che ogni giorno si apprestano a visitarlo. Nel caso in cui aveste ancora qualche dubbio, sono anche molteplici i video tutorial postati in giro per il web, proprio a dimostrazione passo dopo passo di come è semplice e fattibile in pochi minuti, il passaggio di un sito web a pagina responsive.
