iMETland
Trattamento microbico ed elettrochimico per le acque reflue

Progetto grafico del designer Giulio Bordonaro, sviluppato per la media agency Youris.com.

Alla complessità degli standard attualmente presenti in altri progetti, questo sito prevede l’utilizzo del parallax nella sola homepage. Questa dinamica viene disattivata sui device mobili, per ovviare a diverse problematiche, tra cui i touch events, pur mantenendo un perfetto assetto nel responsive design. Elementi di testo, perfettamente gestibili in autonomia dal cliente nel backend, sono animati allo scorrere del sito, in entrata ed uscita dai due fianchi del browser, mentre fotografie in full-width vengono animate verticalmente con scroll armonico.

Nelle sezioni interne di News ed Events sono presenti il caricamento continuo di altri post, mediante Load More, e la libreria Masonry per una gestione fluida ed ottimizzata dell’allineamento dei post a griglia.
Le immagini cover dei post sono sempre vincolate solo in larghezza sul template category, mentre la loro altezza varia in proporzione, rendendo l’altezza complessiva di ciascun articolo diversa, esaltando così le caratteristiche del Masonry.

La larghezza massima del sito varia da full-width per elementi come le foto della home e delle pagine interne ad un abbondante a 1600px.
Il sito comprende un’area news, una events, alcune pagine istituzionali di presentazione del progetto ed un’area contatti.

Grazie al PHP, in WordPress i post degli eventi futuri e passati sono automaticamente suddivisi; anche se la data del post di un evento è futura il post viene comunque visualizzato (a differenza degli standard WordPress), permettendo al project manager di ordinare correttamente i post anche di eventi futuri. Sempre per i post della categoria Events vi sono alcuni custom fields, tra cui uno dedicato alla geolocalizzazione dell’evento, con mappa personalizzata con le API v.3 di Google Maps , visibile nel template del single post.

Homepage su iPad Mini, aperta all'altezza della sezione "News & Events"
Homepage su iPhone 6, con vista del grafico circolare
Homepage su MacBook Air
Singolo evento geolocalizzato su Google Maps, visualizzato su iMac
Logo su fondo bianco
Mood della homepage, sezione News & Events