Realizzare un sito web per il mobile, significa rendere i contenuti adattabili automaticamente alla risoluzione degli schermi degli smartphone o tablet in modo da permettere la corretta visione dei testi senza dover effettuare zoom e lavorando con lo scroll verticale per semplificarne la visione.

Per creare un sito web mobile si può intervenire in due modi:

• realizzare un sito su misura che si va ad affiancare al sito web tradizionale
• rendere il sito principale adattabile alle varie piattaforme e risoluzioni

Il primo caso può essere utile se si vuole realizzare un sito web in versione mobile con contenuti differenti da quello tradizionale, o se il tradizionale ha contenuti in Adobe Flash, o più semplicemente perché il cliente non vuole reinvestire su quello tradizionale per motivi prettamente economici.

Il secondo caso, un unico sito adattabile, è quello su cui volevo soffermarmi per parlare delle soluzioni che attualmente sto adottando.

Ho iniziato ad utilizzare il framework CSSGRID che consiste nell’uso di una griglia che può essere composta da un massimo di 12 colonne realizzata in HTML5 e l’uso delle media query con i CSS3 per diversificare gli stili grafici in base alle risoluzioni dei monitor o dei dispositivi mobili. Il sito realizzato con cssgrid ha una dimensione massima in larghezza di 1140 pixel che si adatta per display con risoluzioni inferiori poiché lavora sempre con div che hanno la larghezza definita in percentuale. Per risoluzioni inferiori ai 768 pixel il sito e le colonne create si vanno a posizionare una sotto l’altra creando una navigazione verticale e permettendo la personalizzazione grafica utilizzando appunto le istruzioni media query per diversificare il CSS.

In certi casi può non essere sufficiente l’uso del cssgrid perché può essere necessario produrre contenuti comunque differenti anche in fase di creazione della pagina, quindi lato server. Per questo tendo ad abbinare il cssgrid alla classe PHP Mobile_Detect che permette di effettuare, con delle semplici chiamate ad alcuni metodi, il controllo del dispositivo utilizzato e quindi la diversificazione lato server del codice prodotto.

Recentemente ho applicato queste soluzioni per i seguenti siti:
www.diatechpharmacogenetics.com
www.labline.it
www.subissati.it
www.simonevolpini.info/fblog/

HTML5, php e siti web in versione mobile is a post from: Simone Volpini

“Queste Storie” nasce dall’esperimento di sei amici appassionati di fotografia ma anche di scrittura nelle sue molteplici forme, dalla poesia al brano di narrativa, dal testo di una canzone all’aforisma. Decidono così di realizzare una mostra fotografica che non sia una semplice esposizione, ma una vera e propria installazione che coniughi fotografia, poesia e brani tratti da testi di letteratura con musica e vino. Un evento multisensoriale che appaga vista, udito, olfatto e gusto, accompagnando il pubblico in un meraviglioso viaggio alla scoperta dell’emozione.

“Queste Storie” sono i 13 frammenti di vita degli autori scelti dai sei fotografi Maria Eleonora Camerucci, Paola Fortuna, Stefania Secondini, Georgia Spaccapietra, Cristina Torelli e Simone Volpini. Si spazia da Bukowski ad Alda Merini, da Silvia Plath a Marinetti, da Pessoa a Zanzotto, solo per citarne alcuni.

I brani interpretati dall’attrice Milena Gregori verranno rappresentati attraverso videoproiezioni degli scatti dei fotografi. Ci saranno pause musicali che vedranno protagonisti gli allievi della scuola di musica Pergolesi di Jesi, ed infine una degustazione di vini dell’azienda Vignamato.

L’evento si svolgerà Sabato 31 Marzo alle ore 18,00 in prima rappresentazione, e verrà replicato Domenica 1 Aprile sempre alle 18.00.
La mostra fotografica che vedrà esposti gli scatti più significativi dei sei fotografi, sarà aperta da Venerdì 30 Marzo a Domenica 1 Aprile con il seguente orario: Venerdì 30 Marzo dalle 17,30 e negli altri giorni dalle ore 10.00 alle 13.00 e dalle 17.00 alle 20.30

“Queste Storie” – mostra fotografica is a post from: Simone Volpini

Cliente: ENERGY RESOURCES Geo-Comfort Srl

Sito web di ER GeoComfort, società del gruppo Energy Resources. L’azienda, con sede in Jesi, si occupa della realizzazione di impianti termici, idrici e di condizionamento innovativi.

Il progetto è stato sviluppato in collaborazione con Barbara Bonci che ne ha realizzato lo studio grafico. Per quanto riguarda l’aspetto tecnico è stato utilizzato il CMS proprietario per poter rendere autonomo il cliente nella gestione dei contenuti testuali e fotografici.

Tecnologie: HTML5, CSS3, PHP, MySQL, Javascript (JQuery)

Web Design Barbara Bonci

ER Geo-comfort is a post from: Simone Volpini

Cliente: SO.TE.L.Q.I. Snc

Nuovo sito web di SO.TE.L.Q.I., società per l’applicazione delle tecniche logistiche, qualitative ed informatiche, con sede a Genova.

Il progetto realizzato in collaborazione con Ilaria Mauric ha avuto come obiettivo lo sviluppo di un sito web aggiornabile interamente dal cliente e con la possibilità di fruire dei suoi contenuti anche con dispositivi mobili (smartphone, tablet).

Per questo ho realizzato le pagine in HTML5/CSS3 facendo uso del framework 1140 CSS Grid per poter rendere l’intero sito web adattabile a qualsiasi risoluzione dei display e utilizzato il CMS da me realizzato per dare la possibilità al cliente di gestire in completa autonomia tutti i contenuti, testuali e fotografici.

Tecnologie: HTML5, CSS3, PHP, MySQL, Javascript (JQuery)

Progetto e Web Design Ilaria Mauric

SO.TE.L.Q.I. is a post from: Simone Volpini

Cliente: Diatech Pharmacogenetics S.r.l.

In collaborazione con la Bimind S.a.S. è stato realizzato il nuovo sito web per la Diatech Pharmacogenetics, azienda che si occupa di ricerca farmacogenetica, la disciplina che studia la risposta individuale ai farmaci in base alle mutazione genetiche di ogni singolo paziente.

Il design dell’interfaccia grafica del sito web, realizzato dalla The Best Raffaello, è stato studiato per permettere la corretta navigazione del sito oltre che per PC e tablet, anche per dispositivi mobile (smartphone). Ho realizzato le pagine in HTML5/CSS3 facendo uso di 1140 CSS Grid per poter rendere l’intero sito web adattabile a qualsiasi risoluzione dei monitor o display.

Tutto il sito multilingua è gestibile in completa autonomia dal cliente, grazie all’uso del CMS proprietario che ne semplifica la gestione delle pagine, foto ed allegati.

Tecnologie: HTML5, CSS3, PHP, MySQL, Javascript (JQuery)

Web Design The Best Raffaello

Diatech Pharmacogenetics is a post from: Simone Volpini

Cliente: Igienstudio S.r.l.

Igienstudio è un’area scientifica al servizio delle aziende e degli enti per la consulenza, progettazione, scelta e controllo delle tecnologie a tutela dell’ambiente, della sicurezza nei luoghi di lavoro e dell’igiene degli alimenti.

Il sito web è stato realizzato in collaborazione con Luca Celli, Project Manager, e The Best Raffaello per il web design.

Per il progetto si è fatto uso del CMS proprietario per semplificare la gestione, da parte del cliente, dei contenuti delle pagine (testi, immagini e allegati).

Igienstudio is a post from: Simone Volpini

Cliente: Former Worlds

Da un’idea di Stefano Dominici del Museo di Storia Naturale di Firenze, formerworlds.com è una guida per vedere come la terra e le forme di vita si siano evolute nel tempo.

Il progetto è stato realizzato in collaborazione con Ilaria Mauric e permette la navigazione del pianeta per ere geologiche con la possibilità di consultare video, gallerie fotografiche e animazioni di alcuni siti geologici e le loro variazioni rispetto alle precedenti ere.

Ho costruito un CMS su misura che permette al cliente di gestire i contenuti testuali e multimediali (video Vimeo e oggetti Adobe Flash) in base alle singole ere geologiche ed il tutto viene poi visualizzato su una personalizzazione di Google Maps, che permette di visionare e muoversi all’interno delle 13 mappe, una per ogni era geologica.

Web design: Ilaria Mauric

Former Worlds is a post from: Simone Volpini

Cliente: Compendium S.r.l.

Lavoro: realizzazione del sito internet istituzionale dell’azienda Compendium S.r.l.

Questo lavoro è il primo progetto realizzato in collaborazione con due nuovi partner, Kontagio e Ilaria Mauric.
Compendium è un’azienda di consulenza per le imprese che vogliono ottimizzare i costi e le spese aziendali per settori come trasporti, imballaggi, telefonia ed energia.

Mi sono occupato della realizzazione delle pagine in XHTML e CSS e dell’installazione e personalizzazione del CMS proprietario per rendere autonomo il cliente nella gestione della sezione news del sito.

Tecnologie: XHTML, PHP, MySQL, Javascript

Comunicazione e contenuti: Kontagio
Web design: Ilaria Mauric

Sito web Compendium.it is a post from: Simone Volpini

Si utilizza un’immagine di grandi dimensioni, per esempio 1920×1200 pixel che è una delle risoluzioni maggiori che possiamo trovare nei monitor più recenti di 21 o 24 pollici, che possa coprire l’intero schermo. Mentre il contenuto principale del sito continua a rimanere in una “gabbia” di dimensioni inferiori (generalmente 960 pixel di larghezza), per assicurare la perfetta visibilità anche in quei monitor che supportano la risoluzione minima di 1024 pixel di larghezza (presente anche nei più recenti netbook con monitor a 10 pollici).

Di solito l”immagine viene gestita tramite i CSS e inserita come background del tag <body>:

body { background: url(immaginedisfondo.jpg) no-repeat 0 50% #fff }

immaginedisfondo.jpg sarà posizionata come sfondo della pagina, rimarrà centrata orizzontalmente (0 50%) e quando il contenuto della pagina è superiore alle dimensioni dell’immagine e comporta uno scroll verticale per leggerne i contenuti, lo sfondo assumerà il colore bianco #fff.
Con questo tipo di posizionamento ci assicuriamo che la parte centrale dell’immagine sia sempre visibile a tutte le risoluzioni, con l’inconveniente che a risoluzioni inferiori (1024 pixel) non vedremo una parta ampia  della foto.

Per ovviare a questo problema si può utilizzare un’altra tecnica che rende adattabile la dimensione della foto alla risoluzione della finestra del browser permettendo così di avere sempre una visione completa dell’immagine.
Prendendo spunto dall’articolo e dagli esempi segnalati da Julius Design, si inserisce l’immagine all’interno dell’HTML con lo specifico tag img

<img class=”bg” src=”immaginesfondo.jpg” alt=”" />

e poi si assegna il seguente stile CSS:

img.bg {

position: fixed;

top: 0;

left: 0;

width: 100%;

min-width: 1024px;

z-index: -9999;

}

che posiziona l’immagine sullo sfondo (position: fixed; z-index:-9999) con una larghezza che si adatta alla finestra del browser (width: 100%). L’immagine rimarrà sempre proporzionata perché non abbiamo dato nessun vincolo all’altezza.
Il min-width serve per bloccare il ridimensionamento della foto quando la finestra del browser assume dimensioni inferiore ai 1024 pixel.

P.S: non funziona con Internet Explorer 6 (IE6).

Siti web con immagini di background adattabili a qualsiasi risoluzione is a post from: Simone Volpini

Cliente: Teatro Pirata

Lavoro: realizzazione del nuovo sito web della compagnia teatrale in collaborazione con Capolinea.it.

Dal 1993 Teatro Pirata produce spettacoli teatrali e si occupa della direzione artistica di rassegne e laboratori teatrali.
Il sito web della compagnia è stato realizzato facendo uso del CMS Capolinea@Interlink con l’implementazione del sistema di creazione della newsletter, per permettere al cliente di gestirne i contenuti in completa autonomia (news, rassegne, spettacoli, etc.) e segnalare le novità, gli orari degli spettacoli e il calendario delle tournée attraverso il mailing.

Tecnologie: XHTML, PHP, MySQL, Javascript (JQuery)

Web design e XHTML/CSS: Capolinea.it

Teatro Pirata is a post from: Simone Volpini