La realizzazione di un minisito dedicato al lancio di un prodotto rivolto ad un target molto giovane, con un numero limitato di contenuti ma dal forte impatto visivo, ci ha dato l’opportunità di lavorare con strumenti e tecniche dedicate soprattutto al front end e all’esperienza utente.
L’animazione in stile cartoon dell’homepage racconta una storia che introduce al personaggio (un simpatico piccolo mostriciattolo) e al suo mondo.
All’interno sono presenti piccoli webgames che aumentano l’interazione degli utenti e altre sezioni che contengono elementi multimediali (video, suoni, materiali scaricabili) e pagine di presentazione del prodotto.
Requisito chiave del progetto era la realizzazione di un sito che prevedesse l’adattamento del layout ad ogni dispositivo senza tuttavia avere delle dedicate desktop/mobile, mantenendo però lo stesso livello di funzionalità su tutti i principali browser moderni e, soprattutto, su dispositivi mobili, sia cellulari che tablet, anche in mobilità.
Il sito è infatti dedicato ad un pubblico vasto ed eterogeneo, con più di 15 versioni nazionali, ed è attestato su una dozzina di domini internet.
Per aumentare la soddisfazione dei suoi giovani utilizzatori, però, era altresì necessario che il sito avesse componenti interattive, animate e multimediali (video, suoni, giochi interattivi).
Scartato l’uso degli strumenti di animazione web tradizionali (es.Adobe Flash) per incompatibilità con alcuni dispositivi (in particolare con il mondo Apple iPhone/iPad) e esclusa l’idea di realizzare filmati troppo pesanti, per evitare problemi di traffico dati sui dispositivi mobili, si è deciso di puntare in modo massivo sulle moderne tecnologie web, in particolare su animazioni HTML5/CSS3 e l’ecosistema di librerie JavaScript dedicate all’animazione e al multimedia.
Un framework di sviluppo PHP ha consentito la separazione netta tra logica, layout e contenuti. Il sito è infatti fruibile in con contenuti specifici per alcune nazioni, ed è quindi stato essenziale mantenere l’indipendenza dei contenuti dal codice per una agevole gestione multilingua.
Poichè il lancio commerciale del prodotto avviene in momenti diversi nelle varie aree geografiche, abbiamo inoltre realizzato pagine “under construction” con un countdown e il logo animato che potessero fare da “teaser” per il prodotto, anticipandone lo stile senza svelarlo.
Per le analytics del sito, abbiamo integrato Google Analytics con tecniche specifiche che consentono di identificare le modalità di fruizione dei contenuti interattivi (animazioni e giochi).
Il sito è ospitato su server dedicati nella farm Netdream.
Tecnologie adottate
- HTML5
- CSS3
- Javascript
- PHP
- Netdream Dedicated Hosting
Il sito web
www.xenotoy.com
