Possiamo ora entrare nel vivo iniziando a lavorare sul nostro progetto guida. Per prima cosa metteremo in pratica quanto visto nelle precedenti lezioni a proposito della definizione dei contenuti.
I contenuti
"Il viaggio" è un sito di informazione settoriale dedicato a viaggi, arte e cultura. Offre aggiornamenti quotidiani sotto forma di articoli, segnalazioni veloci e gallerie fotografiche. Nel momento in cui decidiamo di ridisegnare il sito, iniziamo dalla home page e dall'analisi dei contenuti che intendiamo offrire sulla pagina iniziale.
Stiliamo subito una lista degli elementi che ci paiono essenziali:
- Logo
- Navigazione principale
- Sezione contenuti in evidenza (5)
- Sezione ultimi post (5)
- Sezione 'Around you'
- Sezione icone e link social
- Sezione ultimi commenti
- Navigazione secondaria (tag)
- Box di ricerca
- Info di contatto e supporto
Due parole di approfondimento sulle parti più rilevanti:
- La navigazione principale conterrà i link che portano alla home page e a tutte le sezioni/categorie del sito.
- La sezione con i contenuti in evidenza proporrà 5 link a itinerari di viaggio illustrati con contenuti del sito e promossi in collaborazione con un tour operator. Non si tratta di contenuti necessariamente 'freschi' e aggiornati quotidianamente. Sarà implementata tecnicamente tramite uno slideshow di immagini.
- La sezione con gli ultimi post presenta al lettore gli ultimi 5 articoli pubblicati sul sito. In home page ciascun articolo sarà accompagnato da un'intestazione con data e titolo, da un'immagine o da un video, dal primo paragrafo dell'articolo stesso.
- La sezione 'Around you' si rifà all'idea della celebre app AroundMe: sfruttando la geolocalizzazione, suggerirà all'utente i link a 5 articoli di Wikipedia riguardanti luoghi di interesse che si trovano nelle sue immediate vicinanze.
- La sezione con i link social conterrà i riferimenti per seguire "Il viaggio" su Facebook, Twitter, via RSS o tramite la mailing list.
- La navigazione secondaria sarà basata su una lista di link estratti dall'elenco dei tag definiti nel CMS. Sarà suddivisa nelle sezioni 'Città' e 'Regioni'.
- Le informazioni di supporto e contatto saranno poste a livello del footer della pagina.
A questo punto ragioniamo su come questi contenuti possano essere strutturati sulle diverse categorie di device in base alle caratteristiche di questi ultimi. Stabiliamo di suddividere i dispositivi in due macro-categorie: da una parte cellulari e smartphone (mobile), dall'altra tablet e desktop. Basterà creare nuovamente delle liste, questa volta fissando anche la priorità dei vari elementi e l'ordine in cui li presenteremo. Iniziamo dal mobile:
- Logo
- Navigazione principale
- Sezione ultimi post (5)
- Sezione 'Around you'
- Box di ricerca
- Link e icone social
- Info di contatto e supporto
- Sezione contenuti in evidenza
- Sezione ultimi commenti
- Navigazione secondaria (tag)
Sul mobile l'approccio che seguiremo è quello di semplificare al massimo i contenuti, offrendo solo quello che riteniamo essenziale in condizioni di mobilità. Eliminiamo (nascondiamo) dunque la navigazione secondaria, la lista degli ultimi commenti e la sezione con i contenuti in evidenza, dando rilievo agli aggiornamenti quotidiani. Il box di ricerca scivola in basso perché dai dati che possediamo sull'uso del sito da dispositivi mobili abbiamo verificato che gli utenti usano raramente questa funzione. Dopo gli ultimi 5 post inseriamo la sezione 'Around you' che invece proprio in mobilità trova la sua maggiore efficacia e utilità.
Su tablet e desktop la strutturazione dei contenuti sarà invece questa:
- Logo
- Box di ricerca
- Navigazione principale
- Sezione contenuti in evidenza (5)
- Sezione ultimi post (5)
- Sezione icone e link social
- Sezione ultimi commenti
- Navigazione secondaria (tag)
- Info di contatto e supporto
- Sezione 'Around you'
Il box di ricerca ottiene qui una valorizzazione maggiore e sarà collocato, come spesso avviene, nell'header della pagina. Ad essere nascosta, invece, sarà la sezione 'Around you'. Non perché i moderni browser desktop non supportino la geolocalizzazione, ma perché riteniamo che abbia poco senso nel contesto di una navigazione che avviene da una postazione fissa, magari a casa dell'utente.
Stabilire i breakpoint
Fissati questi punti, passiamo a definire i breakpoint.
La scelta è quella di operare secondo l'approccio mobile first. Gli stili di base, dunque, definiranno la presentazione dei contenuti sul mobile, fino ad una larghezza di schermo pari a 768px. Significa anche che non facciamo differenze rispetto all'orientamento del device. Per esempio, su un iPhone il layout sarà identico con orientamento portratit
o landscape
A partire da 768px iniziamo a modellare il layout su colonne e a mostrare le sezioni nascoste per il mobile, operando ulteriori, piccole modifiche a 1024px e a 1200px. Con queste informazioni in mano possiamo già ricavare lo schema di base del nostro foglio di stile:
/* == Stili di base - Mobile first ===== */
Qui vanno gli stili per il mobile
/* == Media queries (breakpoint) ===== */
/* -----------------------------------
IPAD PORTRAIT
------------------------------------ */
@media only screen and (min-width: 768px) {
}
/* -----------------------------------
IPAD LANDSCAPE + NETBOOK
------------------------------------ */
@media only screen and (min-width: 1024px){
}
/* -----------------------------------
DESKTOP
------------------------------------ */
@media only screen and (min-width: 1200px){
}Il passo successivo è quello di mettere mano al markup della pagina.