Template Composite per WebSite X5 Evolution 11

E' ormai da qualche mese che la priorità per chi gestisce un sito web è rendere fruibile le proprie pagine sui dispositivi mobile, causa la mail perentoria che Google ha inviato a chi ha creato un sito non mobile friendly:

I sistemi Google hanno testato 126 pagine del tuo sito e riscontrato che il 100% delle pagine presenta errori critici di usabilità sui dispositivi mobili. Gli errori in queste 126 pagine incidono notevolmente sulla modalità di utilizzo del tuo sito web da parte degli utenti di dispositivi mobili. Tali pagine non verranno considerate ottimizzate per i dispositivi mobili dalla Ricerca Google e verranno quindi mostrate e posizionate adeguatamente per gli utenti di smartphone.

Chi utilizza WebSite X5, che attualmente non crea template responsive, si trova alle strette. Nelle numerose discussioni aperte sul sito ufficiale di supporto lo staff indica come strada percorribile quella di creare una doppia versione del sito, mobile e desktop. Questa soluzione ha dei limiti: si tratta di due siti a layout fisso e ogni aggiornamento dei contenuti deve essere riportato su entrambi i progetti.

Noi, già con il template Alpines, abbiamo sperimentato una strada alternativa, anche se non di semplice attuazione: aggiungere le media queries nei CSS del template generato dal programma. Occorre un po' di dimestichezza con i linguaggi di base, ma il risultato è a nostro avviso accettabile: il sito ha una larghezza massima prefissata, al di sotto della quale è responsive.

Ecco il secondo esperimento, Composite, template monopagina scaricato da templatemo.com e adattato per WebSite X5 Evolution 11 (11.0.6.27).

Il template originale è rilasciato sotto licenza Creative Commons 4.0. Per quanto riguarda il nostro adattamento leggi i termini di utilizzo.

DEMO

Il template utilizza il Google Font "Open Sans". Prima di importare il progetto occorre inserire il file .ttf nella sezione "Preferenze" del programma. Oltre che da Google Font, è possibile scaricare il file dalla pagina ReadMe della demo del template online.

Questo il codice @import da noi utilizzato:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300);

Per personalizzazioni è necessario consultare i file custom.css e custom.js: tutti i blocchi di codice sono commentati per permettere una facile lettura ed eventuale modifica.
Sono stati utilizzati Oggetto Testo, Oggetto Codice HTML e Oggetto Modulo Invio E-mail. Si fa presente che la variazione degli oggetti all'interno della pagina, sia nel tipo che nella posizione, potrebbe comportare una revisione sostanziale delle regole CSS.

Qui il file .iwzip da scaricare: DOWNLOAD

Per problemi di visualizzazione o difficoltà incontrate nelle personalizzazioni, contattateci a questo indirizzo quellidelcucuzzolo@altervista.org oppure attraverso i commenti di questo post.


Aggiornamento del 15/05/2015:

• modificati i files custom.js e custom.css per permettere l'inserimento, nelle immagini della sezione Portfolio, delle varie tipologie di collegamento previste dal programma (ad esclusione di "Suono")