Supporto volontario e collaborativo per Joomla!® in italiano

Template responsive per creare un sito web con Joomla

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
responsiveNella creazione del sito ci sono diverse strade e una delle meno costose e più efficaci è quella di basarsi su un sistema opensource come Joomla e integrare un template, ovvero un modello per le pagine.

Nella scelta del template, una delle principali preoccupazioni deve essere quella di ottenere un sito che sia il più possibile leggibile e accessibile ad un numero sempre maggiore di utenti. A tale proposito, in seguito alla moltiplicazione delle possibilità di navigazione web anche attraverso device mobili e di dimensioni e risoluzioni differenti, diventa fondamentale realizzare delle pagine che siano davvero fruibili anche da smartphones e tablet.


Questa necessità appare chiara se solo si getta uno sguardo agli ultimi dati del Mobile Internet in Italia. Tenendo pur presente che è ancora molta la strada da percorrere, nel biennio 2012 - 2013 la fruizione del web tramite device mobili è cresciuta in modo esponenziale, trainando nuovi business e cementando il successo anche dei tradizionali ecommerce.
Lo spettro di formati e risoluzioni di cui tener conto aumenta ormai di giorno in giorno, imponendo ai creatori di siti web continui adattamenti.

L'esigenza di template che siano correttamente visualizzati anche da mobile è evidente se solo si pensa a come tutti noi agiamo durante la navigazione: se accediamo ad un sito tramite smartphone e questo non è immediatamente visualizzabile, obbligandoci ad utilizzare, quando disponibile, la funzione di ingrandimento (pinch to zoom), siamo portati ad abbandonarlo, alla ricerca di un concorrente che ci consenta una comoda navigazione. In termini numerici la perdita di potenziali contatti è davvero elevata.

Dal punto di vista pratico questo si traduce nell'opportunità di abbandonare la tradizionale architettura web, con misure predefinite ed in genere predefinita per una visualizzazione tramite pc desktop.

In risposta a queste problematiche sono stati introdotti i design adattivi o responsive design, ovvero web design in grado di adattarsi alle dimensioni del browser, modificando in automatico le dimensioni pur mantenendo la perfetta e ottimale leggibilità e fruibilità dei contenuti.
Si è trattato di una vera e propria rivoluzione nell'ambiente web, perché accompagnata da un netto capovolgimento anche delle logiche alla base dell'architettura dei siti.

Il nucleo innovativo di questi template, sono le cosiddette fluid grids, o griglie fluide, che possiamo considerare una sorta di evoluzione dei layout liquidi, che già avevano spopolato negli anni scorsi.
In questo caso, anziché progettare un layout che sia basato su un numero fisso di pixel o su valori percentuali modificabili, si lavora in termini di proporzione: quando un layout viene visualizzato in uno spazio ridotto (com'è quello reso disponibile su un dispositivo mobile) o al contrario, viene ingrandito su una smart tv, tutti gli elementi che lo compongono vengono ridimensionati e riposizionati.

Tra i vari template gratuiti disponibili ho voluto preparare un confronto a distanza tra quelli compatibili con le versioni Joomla 2.5 e 3.0, uno versione desktop e un altro responsive, con tutti i vantaggi che ne conseguono: Dei vari template non responsivi gratuiti in circolazione, merita attenzione Oxygen, caratterizzato da una completa personalizzazione.
Joomla supporta la customizzazione di molteplici parametri e molti di essi possono essere definiti a seconda delle vostre specifiche esigenze.

La versatilità di questo template è ai massimi livelli e lo rende adatto alla realizzazione dei siti più diversi: i moduli possono essere posizionati in ben 48 diverse posizioni, ci sono 100 diversi font e tre varianti di colore, per combinazioni praticamente infinite.

Dopo averlo scaricato dall'indirizzo dello sviluppatore (www.joomla51.com/free-templates) è sufficiente accedere al pannello di controllo del template, selezionando dalla barra superiore del Menu la voce Estensioni --> Template Manager --> Your Template Style.

Tenete presente che quando si installa un template per Joomla come modello predefinito, il sistema provvede ad attribuire lo stile elaborato, quale predefinito per quel modello.

E' possibile bypassare questa limitazione semplicemente utilizzando la funzione "Salva con nome". In tal modo saranno definibili diversi stili, assegnabili a pagine diverse del sito attraverso la scheda di Assegnazione presente nel Menu.

Tutti i principali parametri sono modificabili direttamente dalla pagina di Template Manager, a partire dallo stile, impostabile scegliendo tra le opzioni presentate nel menu a cascata.
Tra le differenti possibilità, sono da segnalare innanzitutto i font: 14 WebSafe e più di 100 di Google, in modo da personalizzare compiutamente ogni elemento della pagina, dal corpo al titolo dell'articolo o del modulo. Ovviamente la scelta include anche i colori dei caratteri.

Template Non Responsive Joomla SEO Ettore Iannella Styling

Nella sezione del Template Manager dedicata al Logo è possibile impostare i parametri relativi all'intestazione e al logo del sito, consentendo un controllo totale su quello che è forse l'elemento portante di ogni web page. Per caricare la propria immagine è sufficiente selezionare il campo Select Image e successivamente posizionarla all'interno della pagina.
Qualora si preferisca un logo testuale, il modello consente anche di disattivare l'opzione di immagine: in questo caso il logo sarà sostituito dal testo digitato (eventualmente accompagnato dallo slogan del brand), che potrà essere poi modificato selezionando font e colore attraverso i selettori dedicati.
Template Non Responsive Joomla SEO Ettore Iannella Logo

Nell'ambito delle Opzioni di Layout, non sarà necessario intervenire sulle dimensioni degli elementi: per impostazione predefinita queste saranno regolate automaticamente a seconda della quantità di moduli definiti e posizionati sulla medesima riga.
Si tratta di una impostazione di default che può tuttavia essere disabilitata per intervenire manualmente e definire la larghezza di ogni singolo elemento della pagina.
Template Non Responsive Joomla SEO Ettore Iannella Layout

Sempre con riferimento al layout è infine possibile impostare la posizione delle colonne laterali, scegliendo di distribuirne l'ingombro su entrambi i lati o su uno soltanto, a destra o a sinistra dell'area dedicata ai contenuti.

Sono ovviamente ammessi gli inserimenti di contenuti multimediali e di pagine social, attraverso l'indicazione dell'URL corrispondente.

Template Non Responsive Joomla SEO Ettore Iannella Social

Per fini specifici, ad esempio legati a Google Analytics, può essere utile aggiungere delle strisce di testo sia a livello della Head che del corpo del modello, all'interno degli appositi campi all'uopo predisposti.

Template Non Responsive Joomla SEO Ettore Iannella Code

Vogliamo trovare un difetto?
Trattandosi, come detto, di un template non responsivo, esso non è mobile friendly e non reagisce automaticamente alle diverse visualizzazioni.
Img courtesy of Oxygen.

Segue...

Autore dell'articolo: Ettore Iannella

Ruolo: Web Marketing Manager

CommentaCommenta questo articolo sul forum

Ultima versione di Joomla!®

downloadVer. 3.8.1 Stabile Italiana
Data di rilascio: 04 Ottobre 2017
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: