RD_portfolio_606-segno

Design per il sito web di Segno

News, Web Design

Dopo una meritata pausa estiva eccoci a descrivere uno dei nostri ultimi progetti di web design. Come nel caso di Gossip Firenze, non vogliamo solo recensire un nostro lavoro, ma esaminando le problematiche che ci si sono presentate, e descrivendo come le abbiamo risolte utilizzando le migliori pratiche, speriamo che la nostra esperienza sia di qualche valore alla community dei web designer.

Il progetto in questione è il sito web realizzato per l’agenzia di comunicazione Segno, di Firenze, dove collabora anche il nostro Niccolò Fulignati. Segno è un’agenzia che può vantare clienti d’altissimo profilo: da brand d’alta moda come Stefano Ricci all’ospedale pediatrico Meyer.

I principali requisiti per il design di questo sito web sono quindi:

  • Un look accattivante, senza tempo e minimalista;
  • Un’interfaccia coinvolgente basata su soluzioni originali;
  • Il design di ogni pagina deve essere ideato ed implementato caso per caso;
  • L’immagine è importante, ma il sito deve essere accessibile e il SEO non deve risentire affatto delle scelte di design.

Soluzioni di Design e CSS

Immagini di sfondo a tutto schermo

Tutte le pagine del sito web, e le loro immagini di sfondo, si espandono al 100% della finestra del browser, una caratteristica comune in siti che trattano di design.

Web Design - Portfolio Segno

A causa della struttura di container che ci siamo imposti per realizzare il nostro sistema di navigazione, le nostre possibilità di scelta per soluzioni di ridimensionamento delle immagini di sfondo erano piuttosto limitate. Ne abbiamo provate molte, e alla fine quella che ci ha dato il risultato più soddisfacente è questa, trovata su css-tricks.com:

#home {
	background: url(/img/bg/home.jpg) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
  	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.img/bg/home.jpg', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/bg/home.jpg', sizingMethod='scale')";
}

La proprietà CSS3 background-size:cover assicura che l’immagine occupi sempre il 100% dello spazio, sia per orizzontale che per verticale, tagliando l’eventuale porzione di immagine in eccesso, e funziona su tutti i browser moderni. Per IE 8 e precedenti il fantastico filtro Microsoft si occupa di un fallback che non rende quanto la soluzione CSS, ma fa il suo lavoro in maniera decente.

Navigazione orizzontale e verticale

La navigazione all’interno delle pagine del sito avviene cliccando tasti che tramite effetto ‘slide’, fanno scorrere le pagine rivelando quelle adiacenti. Sul Web è pieno di soluzioni pre-made che permettono navigazioni per orizzontale o per verticale, ma il nostro sito scorre in entrambe le direzioni, ed è stato necessario sviluppare una soluzione ad hoc.

Ci siamo basati sul più semplice e versatile plugin per lo scrolling: jQuery ScrollTo, piegandolo al nostro scopo. Non entrerò nel dettaglio a riguardo perché richiederebbe un articolo a se, ma per chi fosse interessato il nostro codice javascript é sufficientemente commentato da poterne capire facilmente il funzionamento.

Responsive Web Design

Tramite l’utilizzo di CSS media queries il contenuto del sito web si adatta riducendo o ingrandendo la finestra del browser, fino a risultare completamente navigabile e leggibile anche con uno smartphone o un tablet. Abbiamo scelto di non mostrare le pesanti immagini di sfondo alla risoluzione minore, perché sarebbero risultate troppo lente da caricare tramite rete mobile.

Animazioni CSS3

Il design del sito è impreziosito da animazioni realizzate in CSS3, come la G del menu che si riflette al passaggio del mouse, l’animazione di caricamento e quella delle foto dello staff nella pagina ‘Who’.

Caricamenti in AJAX

Ok, questa intestazione può sembrare un pò criptica ai più. Ma lasciate che vi spieghi.

Un sito composto da pagine con immagini a tutto schermo, che scorrono tra loro, e quindi senza caricamento del browser tra una e l’altra, sarebbe risultato lento da caricare tutto in una volta, specialmente sugli smartphone.

Ma se avessimo creato e caricato le pagine separatamente sarebbe stato impossibile ottenere l’effetto di scorrimento.

Ecco perchè abbiamo implementato il caricamento dinamico del contenuto delle pagine tramite richieste AJAX. Sono richieste che non causano il caricamento completo di una pagina, ma solo del contenuto al suo interno, evitando la ‘flashata’ bianca di caricamento del browser, e rendendo all’utente una navigazione fluida al pari delle applicazioni desktop.

In pratica all’inizio viene caricato lo ‘scheletro’ del sito, con tutti i contenitori delle pagine-slide al loro posto, ma vuoti. Poi, appena l’utente clicca su un tasto che punta a una determinata pagina, tramite una richiesta AJAX il contenuto di questa viene caricato al volo in pochi attimi, per poi far partire l’animazione di scorrimento. Quando l’animazione di scorrimento è finita e l’utente visualizza solo la pagina nuova, il contenuto di quella vecchia viene eliminato, figo no?

Come fa Google ad indicizzare un sito AJAX?

Beh, normalmente non può farlo. Google, come gli altri motori di ricerca, è solamente in grado di navigare di pagina in pagina tra collegamenti normali, non può leggere e interpretare il codice javascript contenente le richieste AJAX. Abbiamo trovato che Google consiglia di sviluppare parallelamente al sito una versione dotata di link statici, di modo che sia possibile per i suoi crawler indicizzare tutte le pagine del sito web.

Per ottenere questo ci siamo serviti di alcune guide:

http://developers.google.com/webmasters/ajax-crawling/

http://www.seomoz.org/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate

Conclusioni

Il sito web che abbiamo realizzato per lo Studio Segno rappresenta il nostro meglio in quanto a Web Design e Development ad Hoc. Mai tante righe di codice sono fuoriuscite dalle nostre tastierine minimaliste Apple da designer, e mai abbiamo realizzato un design di un sito cosí liberamente. Ci siamo prefissati di fare qualcosa di creativo senza restrizioni tecniche (a parte il tempo), e senza basarci su un CMS, ed è stato un processo senza dubbio divertente e gratificante.

1 commento per “Design per il sito web di Segno”

  1. Davide

    bravi

I commenti sono chiusi.