Sono orgoglioso di annunciare la mia nuova creazione, il miglior sito che abbia mai creato (senza vanto eh). Ad inizio marzo ho completato il sito sundaygrill.com, il sito di “Sunday” la nuova azienda dal volto rinnovato, creativo e fresco che sostituisce MCZGarden. Sunday è un produttore di barbecue leader del mercato europeo.
Il punto chiave di questo sito era dare un’esperienza nuova, fresca ed immediata che facesse comprendere immediatamente i prodotti. In nostro aiuto è arrivato Sebastiano, un designer veneto MOLTO bravo. In quattro e quattr’otto è riuscito ad avere un’idea ed a portarla su Photoshop… Dovevate vederlo, in 30 minuti ha buttato l’idea e creato tutto… Sbalorditivo.
Direte voi… l’idea qual’era? Era semplice: menu minimalista al massimo, una prima pagina con una frase o una news aziendale e poi largo ai prodotti con un’interfaccia semplice che giocasse sul collage: sfondo e prodotto ambientato senza tuttavia averlo “dentro la foto” ma solamente sovrapposto. In questo caso l’immaginazione faceva da padrona.
Ovviamente ci voleva anche il “tocco di classe” per cui, ad un’interfaccia minimalista, si è affiancata un’idea incredibile: far arrivare sfondo, oggetto e prodotto “al volo” con effetto di rallentamento… E’ dura spiegarla a parole ma vedendo il sito capirete dal risultato… :D
Ovviamente “tecnicamente” tutto ciò era possibile crearlo per bene solo in Adobe Flash. Io non amo l’utilizzo di Flash poichè è poco amato dai motori di ricerca e presuppone il possesso del plugin Flash che, anche se con l’arrivo di Youtube è ormai diffusissimo, alcuni non possiedono. Proprio da qui è arrivata la sfida: riuscire a realizzare tutto senza Flash.
Dopo molto tempo a pensare il come, sono riuscito, tramite JQuery, a realizzare tutto, creando anche due plugins dal nulla. Ho utilizzando anche sifr e flir per renderizzare le scritte ed i titoli con il font aziendale da noi scelto.
Dopo tutto questo c’era comunque un problema: il sito richiede Javascript attivato ed i motori di ricerca non lo supportano. Per risolvere tutto ciò ho accentuato la compatibilità ed ho lavorato per realizzare la versione del sito senza l’utilizzo di Javascript. Tutto ciò è stato in più migliorato grazie ad un’ottimizzazione lato SEO in modo da essere più “appetibile” ai motori di ricerca.
La parte dei prodotti è elencata in modo molto chiaro e possiede, sullo stesso stile di MCZ.it, una ricerca per filtrare i prodotti a seconda delle esigenze. Il prodotto in sè è pulito, come descritto precedentemente, con un’effetto di rotazione se si volesse dare uno sguardo a maggiori informazioni.
Ovviamente non poteva mancare l’ottimizzazione. Su questo livello ho lavorato moltissimo su codice, peso e javascript realizzando un sito con pochissime richieste HTTP (una per javascript, una per stile css e le immagini) rendendo il sito una vera e propria scheggia…
Mi sono davvero divertito a creare questo sito, una sfida che sono riuscito a superare e spero di riavere presto in mano un lavoro nato da un’idea creativa che lanci una sfida di programmazione e di studio per me.
Caratteristiche Tecniche
- Sito basato su Zend Framework e creato da zero
- Ottimizzato al massimo per ridurre il peso della pagina via compressioni ed utilizzi di meno immagini. Utilizzo di Google minify per ridurre anche le richieste javascript
- Alta personalizzazione in tutte le cinque lingue della grafica e dei contenuti, gestibili via pannello di amministrazione
- Utilizzo di AJAX in modo non invasivo per permettere maggiore velocità per i possessori di Javascript senza per questo escludere gli altri dalla fruizione dei contenuti.
- Realizzazione di plugin Jquery per la creazione del sito. Grandissimo lavoro sul piano javascript per la realizzazione degli effetti grafici di “sfoglio” e di rallentamento
- Ottimizzazione SEO per titoli, indirizzi pagina, contenuti e fruizione.
- Compatibilità assicurata ai maggiori Browser IE 6+, Safari 2+, Firefox 1.0+ ed Opera 9+, Camino
Immagini.
Link: www.sundaygrill.com
Mi chiamo Marco De Nadai, ho 21 anni e sono da sempre appassionato alle tematiche tecnologiche. Lavoro come webmaster e studio all'università di Udine presso Informatica. [
Komixjam
Sundaygrill
MCZ
Direi un eccellente lavoro, soprattutto per quanto riguarda l’ottimizzazione per le prestazioni!!!
Sarà poi per “deformazione professionale” dovuta alla mia tesi sull’accessibilità del web, a farmi apprezzare anche i testing sui vari browsers…
Unico aspetto “negativo”, è la presenza di un tag ‘div’ non chiuso che fa in modo che il codice non venga validato… Ovviamente non è una critica, magari fossi capace io di usare tutte quelle tecnologie, era solo un appunto nel caso non te ne fossi accorto…
Comunque guardavo bene questo sito (che mi piace un sacco) e ho notato che gestisce le immagini trasparenti (o almeno penso sia così); come hai risolto questo problema per Explorer?? Perché ci sono molte soluzioni, ma nessuna mi convince a pieno… e vista la tua bravura non riesco a resistere dal chiedertelo!!!
PS: complimenti ancora per i tuoi lavori!!!
Intanto grazie per i complimenti. Mi fa moltissimo piacere che tu abbia fatto una tesi sull’accessibilità del web e devo dire che in questo campo si fa poco e purtroppo nemmeno io sono informatissimo ma vorrei tanto esserlo.
Il div è una semplice dimenticanza dovuta all’ultimo aggiornamento della home, appena ritorno al lavoro lo correggo, grazie.
Per il problema di IE 6 ho risolto con http://www.dillerdesign.com/experiment/DD_belatedPNG/
che risolve il problema del background-position. E’ il migliore, secondo me, ma comunque non perfetto ancora.
Ciao ho dato un occhiata al sito, il mio punto di vista? interessante… mi dispiace ma nn posso dire di più…
Home page: cosa centro quel sedere con il pantalone DG in una società che si occupa di cottura outdoor,(proprio in home page) per i primi 5 minuti non riuscivo a capire cosa dovessi toccare per entrare Oddio quelle bandierine messe li (orribile) poi, questo sfondo totalmente bianco(neanche una minima sfumatura!) mi stava facendo venire la congiuntivite…
pagine interne: purtroppo i colori che hai usato sia per roll over dei link sia per i box di descrizione non centrano proprio nulla col sito e tutto un po scarno come grafica(anzi totalemnte assente) avevi iniziato bene in home page per quanto riguarda il font bello grande stile typography perche non hai proseguito?
-Mancano le basi fontamentali per un web design non siste un menu orizzontale e poi quel logo in basso a sinistra che riporta alla home scusa se te lo dico ma è una cosa orribile è una cosa che nn andrebbe MAI fatta…
Scusa se ho fatto tutte queste critiche non prenderle come delle offese ma prendile come critiche costruttive.
E’ vero non ho motivato le mie critiche ma se lo volessi lo farei.
ciao
Mario
e perchè mai dovrei offendermi? E’ il tuo punto di vista. Ti risponderò per punti:
- La foto in home è tratta da un evento dell’azienda, sarà presto dinamica e casuale per non avere sempre la solita foto.
- Per il “non sapere cosa dovessi toccare” mi dispiace ma ci sono 5 links cosa vuoi toccare? :D. Il bianco è bianco… non vedo il problema, se fosse fucsia ti capirei
- I colori per il rollover centrano con il catalogo Sunday, non vedo perchè dovrebbero centrare con qualcosa tipo foto? Tutto Arancio? Scusami ma saprò io cosa c’entra con l’azienda ^^ :D
- le “basi fondamentali per un web design” non dicono che il menu debba essere orizzontale, infatti è verticale a 2 passaggi quindi non necessita nemmeno di un percorso!
- Non so perchè non andrebbe mai fatto un link alla home page dal logo… Ce l’ho in tutti i siti, quindi se mi spieghi magari risolvo ^^
Non hai motivato le tue critiche? Lo hai fatto.
Ciao, ho visto i tuoi lavori e ti volevo kiedere informazioni.
Ho messo il mio vero nome e la mia mail. Non so come contattarti direttamente.
Ciao, Luca.
giusto per avvisarti: ri ho risposto ieri sera via mail
devo dire che questo lavoro è superbemente riuscito e si aggiunge a tutti i precedenti lavori fatti, tra cui cito Komixjam (di cui sono assiduo frequentatore)…
Anchio “lavoro” nel settore di sviluppo template/applicazioni web, quasi per passatempo con alcuni amici con i queli gestiamo un sito per distribuire gratuitamente i nostri piccoli lavoro (basati su joomla)…e riconosco il tuo grande talento, e poi ultima cosa…bellissimo questo sito.
grazie mille
Ciao, (sono lo stesso che ha commentato con “lupo”"…
Sempre basandomi su ciò che vedo qui come lavori e quello visto su http://www.komixjam.it , volevo sapere se era possibile contattarti per avere informazioni e poterti chiedere qualcosa.
info at kerojam.it ^^