La Newsletter è una forma di comunicazione web molto importante che ti permette di interagire con i tuoi clienti se viene correttamente sviluppata.
(altro…)
Hai appena ricevuto l’email di un cliente che ti chiede un sito web responsive, o ti chiede di analizzarlo per poterlo trasformare in un sito web responsive. È uno dei tuoi primi progetti responsive e non hai le idee molto chiare su cosa fare?
Se non sai da dove devi cominciare questo è l’articolo giusto per te.
Molti clienti ci chiedono un sito responsive ma non conoscono i principi su cui si basa la progettazione responsive e quindi non hanno la minima idea di come viene progettato ma è comunque importante renderli partecipi presentando loro il progetto step by step e coinvolgerli nella discussione.
Questo a partire dal 21 Aprile 2015 sarà ancora più importante perché Google ha deciso di dare importanza solo ai siti web responsive e ciò significa che quindi (http://googlewebmastercentral.blogspot.it/2015/02/finding-more-mobile-friendly-search.html) penalizzerà i siti web che non saranno responsive che non saranno più visualizzati tra i risultati di ricerca di google.
Solo questo spiega l’importanza di progettare un sito web responsive!
Compresa l’importanza del responsive web design devi tener conto di alcuni principi fondamentali per poter cominciare a progettare un sito web responsive.
I concetti di cui tener conto sono:
Device Agnostic
In primo luogo tener conto del principio Device Agnostic cioè devi essere consapevole del fatto che sul mercato esistono una miriade di dispositivi mobili e tablet e che non puoi realizzare un design per ogni dispositivo se non vuoi diventar matto! Il consiglio è di prendere in considerazione 3 tipi di risoluzioni maggiori o più importanti: mobile, tablet e desktop
Viewport
Il viewport è la dimensione dello schermo di questi tre dispositivi e per quanto riguarda i dispositivi mobili può essere in versione ritratto (verticale o portrait ) e panorama ( orizzontale o landscape ). Per i dispositivi mobili in versione ritratto la larghezza è di 320px per le versioni panorama è di 480px. Per i tablet invece è di 768px versione ritratto, di 1024px per le versioni panorama. A partire dai 1024 in su possiamo considerare già le versioni desktop.
Ma in tutte le altre risoluzioni cosa accade? Adesso non è importante, lo sarà nella fase di sviluppo del codice quando progetterai un layout che ti permetterà di rendere fluido il contenuto anche nei dispositivi intermedi a quelli scelti prima. Nel momento in cui il contenuto non si adatterà più correttamente dovrai intervenire con le media queries e modificare lo stile. In tal caso grazie al tag viewport il browser sarà in grado di interpretare le media queries ed applicare quelle modifiche di stile solo nelle dimensioni inserite nelle media query.
Il tag viewport stabilisce la dimensione in larghezza del contenuto in base alla larghezza del dispositivo che stiamo utilizzando per visualizzare il sito web. Per esempio nel caso di Safari browser, non facciamo altro che stabilire la larghezza del contenuto alla larghezza dell’iphone poiché di default sulla maggior parte dei cellulari la larghezza del contenuto è più larga del dispositivo stesso per cui dobbiamo scrollare avanti e indietro per vedere il contenuto. Mentre fissando la larghezza del contenuto = alla larghezza del dispositivo width=device-width
Nella fase di progettazione del design sarà quindi importante capire in linea generale e per maggiori dispositivi come sarà il design.
Breakpoints
I breakpoint invece sono definiti punti di rottura in una linea immaginaria orizzontale che va da 0 a 1024px nel nostro esempio. I punti di rottura non sono altro che quei punti in cui lo stile realizzato per una determinata larghezza non è più adatto e quindi in quei punti sono necessari delle ulteriori modifiche per far si che il layout sia visualizzato in maniera corretta. A questi punti di rottura o breakpoint saranno poi nel codice inserite le media query ma adesso non serve parlare di questo.
Vediamo come realizzare il design per questi due risoluzioni e anche nelle risoluzioni intermedie. In linea generale il design va realizzato in questo modo: a risoluzioni più piccole di solito fino a 400 px ( ma non c’è una regola ben precisa, dipende sempre dal tipo di sito web e dai contenuti ) la progettazione viene effettuata secondo un box unico.
Dai 450-500 px il contenuto viene inserito in due box fino di solito a 1024 px mentre per risoluzioni più grandi i box orizzontalmente possono essere anche 3. Per capire meglio osservate il disegno che ho realizzato per voi:
Mediaquery
Le mediaquery come anticipato prima sono dei moduli css3 che ci permettono di creare stili che si adattano alle diverse condizioni ambientali, limitando lo scopo e le regole delle regole css. Prima del 2010 le media query erano utilizzate solo per fornire versioni di stampa ideali del sito web specificando un foglio di stile separato che era efficace solo per la pagina stampata. Dopo nel Maggio 2010 Ethan Marcotte ha introdotto il Responsive Web design descrivendo nel suo articolo come realizzare un progetto responsive che si adatti a tutti i browser che utilizzano le media query
Qui potete trovare la definizione http://www.w3.org/TR/css3-mediaqueries/
Nella fase di progettazione del design, dopo aver assimilato questi concetti puoi cominciare a disegnare il sito web utilizzando queste tecniche di design che non sono tassative, ma è buona prassi attuarle se non tutte almeno 2 di queste.
1# – Sketching
Puoi cominciare a scarabocchiare le prime idee di layout del sito senza troppo entrare nel particolare e definire proprio i box che conterranno gli elementi fondamentali.
Il primo step importante per avere un’idea di quello che stai per realizzare è scarabocchiare su carta le prime idee che ti vengono in mente. Più scarabocchi più hai chance hai di avere una soluzione giusta in mente o l’idea chiara per il tuo progetto. Non devi fare molto in questa fase e non hai bisogno di molto tempo per disegnare diversi box che non saranno perfetti ma non è questo ciò che conta nello sketching. Non è importante il metodo che utilizzi per scarabocchiare, puoi farlo con una matita e con un foglio oppure con un tablet ( ci sono diversi programmi che ti permettono di farlo ) o anche su programmi di grafica. Non è importante mostrare questa fase al cliente perché sono più che altro idee che ti balenano in testa ma che non sono definitive: è il cosiddetto brainstorming. Una volta selezionata l’idea o le idee che ti sembrano più adatte alle esigenze del cliente puoi passare alla seconda fase.
2# – Wireframe
In questa fase ti consiglio di disegnare in maniera più dettagliata quelli che erano dei piccoli box in box più grandi con maggiori dettagli come per esempio con il testo o l’immagine con la descrizione di quello che sarà e della sua funzione. Se poi sei in grado di discutere di ciò con altri membri del team allora il lavoro verso il mockup finale sarà ancora più facile. In questa fase è buona cosa utilizzare anche delle app create per disegnare layout su tablet in modo che possiamo renderci conto di come il sito web sarà realizzato per i dispositivi mobili e smartphone. Io uso per esempio Tayasui Sketches che è uno strumento completo che ti permette di fare qualsiasi tipo di disegno, ma ce ne sono tanti altri.
Mike Rohde famoso sketchnoter nell’articolo scritto per A list Apart “Sketching: The Visual Thinking Power Tool” http://alistapart.com/article/sketching-the-visual-thinking-power-tool ha affermato che :
“Adding sketching to the design process is a great way to amplify software and hardware tools. Sketching provide a unique space that can help you to think differently, generate a variety of ideas quickly, explore alternatives with less risk, and encourage constructive discussions with colleagues and clients”, spiegando tutti gli elementi positivi dello sketching.
In questa fase devi già tenere a mente i maggiori breakpoint su cui si baserà il sito web per esempio: mobile, tablet e desktop e provare ad inserire gli elementi su questi breakpoint. È molto importante anche considerare il contenuto come il testo, la navigazione e le tabelle. Per quanto riguarda il testo è importante considerare non solo la dimensione del testo ma anche lo spazio intorno al testo. Testi grandi e pulsanti grandi sono un target importante ma se diventano piccoli con un sacco di spazio bianco attorno non possono funzionare bene, per questo è importante considerare il tipo di schermo preso in considerazione. Per quanto riguarda il menù invece bisogna considerare altre cose oltre a quelle dette prima e quindi la navigazione può cambiare considerevolmente in base al tipo di risoluzione. Solo grazie all’uso di javascript possiamo creare menù che compaiono al click di una determinata icona e si espandono verticalmente prendendo tutto lo spazio del viewport.
Ecco alcuni esempidi wireframe responsive realizzati con balsamiq
3# – Mockup
Adesso puoi passare alla fase di progettazione di mockup vero e proprio. In questa fase avrai già coinvolto il tuo cliente e quindi sarà facile passare al design definitivo del mockup in tempo breve. I mockup non sono altro che prototipi di layout molto simili al sito web che verrà realizzato su browser. È sempre un elemento statico ma rende l’idea di ciò che sarà il risultato finale. Puoi utilizzare Photoshop, illustrator o anche software creati proprio per realizzare mockup come Balsamiq
Il mockup non è altro che l’evoluzione del wireframe creato e disegnato precedentemente e non sarà più uno sketch in bianco e nero ma mostrerà anche altri elementi fondamentali come i colori, il font e altri stili.
Dopo aver realizzato il mockup finale puoi presentarlo al tuo cliente per l’approvazione o per eventualmente ( cosa più probabile ) apportare delle modifiche. La cosa migliore è quella di coivolgerlo sin dalle prime fasi e spiegargli passo passo perché lo sketch è stato fatto in quel modo perché nel responsive web design alle risoluzioni più piccole il contenuto viene posizionato in box che sono larghi quanto lo schermo e perché magari alcuni contenuti non possono essere visualizzati a risoluzioni piccole.
Di solito il progetto viene presentato in pdf con l’aggiunta degli style tyle introdotti da Samantha Warren che nel suo sito web presenta anche dei layout scaricabili e personalizzabili.
Un software molto utile per progettare mockup responsive è AdobeEdge Reflow che ti permette di creare facilmente diversi mockup grazie ad un ottimo e completo editor grafico che se conosci già software come photoshop o illustrator è molto intuitivo da utilizzare.
Style Til
“Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.
They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.”
Lo style tile è un mockup che raggruppa un insieme di elementi che comunicano l’essenza visiva web del brand. Lei lo inserisce tra lo sketch molto generico ed il mockup troppo preciso. Lo style tile si posiziona proprio al centro di questi due tipi di design del sito web e nel sito web http://styletil.es è spiegato perfettamente come utilizzare questi fogli di stile dal punto di vista grafico.
In questa fase devi tener conto di altri principi fondamentali del Responsive web design che sono:
Gerarchia dei contenuti
Nella versione mobile e desktop devi tener conto dell’importanza dei contenuti e stabilire quali sono i contenuti fondamentali del tuo sito web e che devono essere visualizzati anche in versioni mobile a 320px. Nello stesso tempo, essendo le dimensioni ridotte, devi anche tener conto dei contenuti meno indispensabili ed eventualmente dico eventualmente nasconderli nelle versioni più piccole. È anche possibile che i contenuti siano tutti fondamentali ed in questo caso devi trovare il modo di presentarli anche nelle versioni più piccole nella sua interezza favorendo uno scrolling verticale molto lungo ma con degli accorgimenti come pulsanti ( vai su ) puoi anche realizzare questi tipi di design a scrolling infinito.
È quindi importante stabilire una gerarchia dei contenuti per eventualmente eliminarne alcuni che non sono indispensabili nelle versioni mobile.
Progressive Enhancement
Questo principio è un po’ la conseguenza del principio precedente ed afferma in base al principio di miglioramento progressivo che man mano che le dimensioni del viewport aumentano possiamo aumentare anche i contenuti del sito web grazie al fatto che la larghezza e lo spazio aumentano. È quindi più facile poter posizionare gli elementi in modo orizzontale in base al fatto che i box per esempio da uno potrebbero essere 2.
Mobile First
Mobile First è il principio coniato da Luke Wroblewski per cui progettare il design di un dispositivo mobile non deve essere più successiva alla progettazione desktop ma deve essere realizzata per prima. Perché? Perché i tempi sono cambiati. Adesso la navigazione del web avviene in misura maggiore tramite cellulari e quindi bisogna dare l’importanza giusta a questi tipi di utenti, offrire l’esperienza visiva migliore. L’esempio classico è quello di Facebook che conta oltre 600 milioni di utenti attivi via cellulare e questo ha portato Il boss di Facebook a creare un’esperienza mobile migliore rispetto a quella desktop. Le restrizioni di spazio che ci pone i cellulari fanno si che l’attenzione verso questi dispositivi sia maggiore portandoci a realizzare esperienze molto più belle ed accattivanti. Mentre nel caso opposto ciò non avverrebbe. Il design sarebbe solo una soluzione limitativa fatta senza alcuna attenzione. Oltre a ciò dobbiamo tener anche conto della connessione molto più lenta per i dispositivi mobili che creano delle difficoltà per l’accesso al sito web. Per questo il design deve essere realizzato in modo ottimale e performance per i contenuti mobili. Tenere conto di questi principi già nella fase di design ci porta a realizzare un ottimo progetto finale.
Con questi concetti e tecniche realizzare un sito web responsive è semplice! Ti serve solo un po’ di esercizio pratico. Quali strumenti utilizzi nel Responsive Design? Dillo nei commenti.
In questo video-tutorial parliamo del menù di navigazione. Il menù è la prima cosa che, restringendo il browser, “si rompe” cioè non rispetta gli stili che abbiamo impostato per il menù nella risoluzione desktop.
Nel momento in cui il menù va a capo, è proprio in quel punto che dobbiamo intervenire con la media query ed inserire il nostro menù responsive.
Nelle versioni desktop è di solito realizzato in questo modo orizzontale nell’header avendo tanto spazio a disposizione.
Mentre nelle versioni più piccole siamo senz’altro limitati dallo spazio che è minore e per questo è importante utilizzare qualcosa di pratico e usabile. Questo è proprio dato dall’utilizza di un’icona che indica la presenza di un menù. Come in questo caso:
Vediamo come realizzare questo menù molto pratico nei cellulari e tablet, anche se ultimamente si sta diffondendo anche nelle versioni desktop quando si vuole dare maggior importanza alle immagini ed ecco quindi che il menù si trasforma in una icona.
Impostiamo il menù nell html con una lista non ordinata.
<nav> <ul id="nav" class="menu"> <li><a href="#">Homepage</a></li> <li><a href="#">Chi sono</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Servizi</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contatti</a></li> </ul> </nav>
Impostiamo il nostro stile del menù e dopo possiamo passare ad inserire la nostra icona nell’html utilizzando il carattere unicode ☰ che rappresenta proprio l’icona del menù
Inseriamola prima della lista non ordinata in questo modo:
<a id="nav-menu" class="nav-menu"></a>☰
Poiché l’icona rappresenta il menù nella versione responsive, dobbiamo dopo aver impostato il nostro stile, renderla non visibile nella versione desktop.
Supponiamo che fino a 768 px ( risoluzione tablet portrait ) il nostro menù icona sia visibile e quindi fino a769px sarà visibile il nostro menù il stile orizzontale con le voci visibili. Per cui
#nav-menu{
float:right;
line-height:40px;
margin-right:10px;
color:#fff;
cursor:pointer;
display:none;
}
Dopodiché possiamo inserire la nostra mediaquery che indica che il menù icona sarà visibile da 0px a 768px per cui in questo caso dobbiamo nascondere il menù classico e visualizzare la nostra icona:
.menu{
float:left;
hoverflow:hidden;
width:100%;
height:0;
}
#nav-menu{
display:block;
}
Adesso dobbiamo far si che al click dell’icona compare a discesa il menu ed al click di nuovo scompare
Prima di inserire il nostro codice jQuery però dobbiamo far si che nello stile della mediaquery il menù classico sia così settato:
.menu{
float:left;
hoverflow:hidden;
width:100%;
height:0;
}
con un’altezza pari a 0 e nascosto; mentre la classe nav-aperto con altezza auto:
.nav-aperto{
height:auto;
}
Inseriamo prima il collegamento alla libreria jQuery dal CDN di Google:
in modo che con il nostro codice jQuery inserito prima della chiusura del tag body.
Dopo aver dichiarato pronto il documento e aver settato alcune variabili, grazie alla possibilità di aggiungere una classe (AddClass) e di rimuovere una classe (RemoveClass), facciamo in modo che il menù sia cliccabile e visibile quando aggiungiamo la classe di menù aperto e nascosto quando invece rimuoviamo la classe di menù aperto.
CONCLUSIONI
Prima di concludere, vi segnalo una risorsa molto utile che mostra numerosi esempi responsive web design che contiene un sacco di esempi sul responsive design, ed una sezione è dedicata alla realizzazione del menù responsive.
Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.
Nei miei precedenti articoli ho parlato del layout fluido come layout di base per poter realizzare un sito web responsive. Ma ci sono altri tipi di layout che ci aiutano ad ottenere lo stesso risultato. Per realizzare il nostro sito web responsive possiamo utilizzare anche il sistema di griglie. (altro…)
In questo videotutorial vi spiego come creare contenuti eleganti in un’unica pagina grazie al collegamento tra il menù di navigazione e la sezione aggiungendo uno scrolling verticale armonioso con jquery.
Hai mai realizzato un progetto di grafica o web in cui hai utilizzato un’infografica? Ti hanno mai commissionato un progetto in stile infografica? L’infografica serve davvero? Come si realizza un’infografica?”.
Da quanto tempo non aggiorni il tuo sito web? Sicuramente è una bella soddisfazione disegnare e sviluppare il tuo sito web personale, ma non devi pensare che la tua missione sia terminata.