Oggi mi permetto di farmi auto-pubblicità , condividendo con voi questa mia creazione: Hotel Villa Danci di Borghetto Santo Spirito.
VAI AL SITO
Il sito e’ stato sviluppato in HTML5 e CSS3 con animazioni in jQuery sviluppate da me. Il form e’ sempre in HTML5, ed e’ lo stesso usato in questo articolo.
Il problema più “grosso” durante lo sviluppo e’ stato adattare le animazioni e il sito per gli schermi più piccoli (1024px) dove, di fatto , il menu’ principale andava fuori dallo schermo. Ho risolto usando i CSS3 Media Query, creando di fatto un foglio di stile indipendente per i 1024px in questo modo:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 1024px)" href="css/small.css" />
Oltre a questo ho dovuto ovviamente adattare le varie animazioni con jQuery grazie a IF (screen.witdh > 1024) . E’ stato un lavoro abbastanza lungo ma alla fine il risultato penso che meriti =D
Per i font ho usato i CDN di Google per rendere il progetto meno lento nel caricamento (e in parte ci sono riuscito), anche se ovviamente progetti così grafici e pieni di animazioni risultano pur sempre lenti rispetto a un sito “standard”. Per il form ho usato anche il sistema di validazione di jQuery per evitare email “vuote” inviate tramite Internet Explorer <9 .
Il sito risulta molto usabile anche in IE8, con immagini un pò piu’ scattose rispetto ad altri browser ma pur sempre usabile. A coronare il tutto, oltre a un lavoro accurato di SEO, ho implementato la cache con .htaccess, salvando le immagini (quelle che scorrono dietro in particolare) nella cache del browser per essere caricate istantaneamente ad un eventuale ritorno del visitatore.
Uno dei difetti che vedo ancora e’ purtroppo la velocità di caricamento iniziale, che complice Aruba, a volte e’ abbastanza lenta (anche se non e’ così esasperante). Con Page Speed e il controllo della cache ho ottenuto un punteggio di 86/100, direi un buon compromesso!
Voi che ne pensate? Ogni commento e’ ovviamente, ben accetto per migliorare!
bello mi piace =)
Grazie Giacomo!
ho appena trovato un piccolo bug >,<
http://i53.tinypic.com/j58air.png
se apri la pagina poi clicchi sul piu per mostrare la descrizione e successivamente clicchi su home succede come sull'immagine =(
Si hai ragione xD vedrò di correggerlo a breve ! grazie!
niente ^^
niente male ! 😉
grazie mille!
animazioni non create da te… su non prenderti i meriti che non puoi…
plugin usato: supersized
http://buildinternet.com/project/supersized/slideshow/3.2/demo.html
ti concedo un po’ di html 5 ma non prenderti i meriti di lavori altrui.
Ciao Michele, prima di scrivere cose del genere bisognerebbe sapere di cosa si parla o quantomeno analizzare BENE la pagina. Le animazioni create da me non sono ovviamente supersized con il quale ho gestito il semplice slide dietro, bensì tutte le animazioni del menu e dell’apparizione del testo presenti nel sito e molto altro (form etc)…forse non hai navigato nel sito 😉
Trovi tutte le animazioni di mia proprietà che gestiscono il menu, appear contenuti e la pagina analizzando l’html della pagina sotto questo commento html “Script Animazioni by Riccardo Mel” dentro il tag head. ovviamente il source è compresso.
P.s Tutte le web agency usano plugin consolidati, creare TUTTO da zero ogni volta sarebbe un suicidio. Fatti un giro su Web Design Awards e vedrai di cosa parlo 😉
P.Ps se ancora non mi credi (non che mi importi molto a dire il vero =D) aggiungimi in privato che ti mostro il codice proprietario delle animazioni così ti fai un’idea, la prossima volta però controlla meglio prima di “sparare a zero” su qualcuno.
Saluti !
stupendo, interessanti le animazioni e la soluzione per gli schermi piccoli … (y)