In questo video tutorial vi parlo della progettazione responsive con sistema di griglia. Per far questo ho realizzato un mini video corso che comprende un totale di 4 video più intro e conclusione. Ho preferito fare in questo modo rispetto alla possibilità di girare un unico video molto lungo. Nei video vedremo come:

  1. Introduzione;
  2. progettare la griglia in photoshop;
  3. impostare la griglia sul browser;
  4. inserire il contenuto;
  5. rendere la griglia responsive;
  6. conclusione;

INTRODUZIONE – 1 VIDEO

In questo primo video vi mostro come realizzare la griglia in photoshop e vediamo come posizionare i contenuti all’interno della griglia. La griglia è un sistema di righe e colonne nei quali poter collocare gli elementi del sito web in modo preciso. Di solito le griglie sono 12 o 16 ma in ogni caso possiamo progettare un sistema di griglie differente in base al tipo di layout. Valutare la scelta è importante già nella fase di progettazione grafica.
Perché è facile inserire i contenuti nella griglia. Perché abbiamo le colonne ed i margini tra le colonne che ci permettono di posizionare in maniera precisa i contenuti e di calcolare le distanze tra essi sia verticalmente che orizzontalmente. Nel mio esempio ho realizzato un sistema di 16 colonne suddivise in un layout di 1440 px. Quindi ho realizzato un sistema che prevede 4 righe e 16 colonne. Nella 4 righe posizioniamo le parti principali del sito: header, gallery, middle, footer. All’interno di queste righe posizioneremo le colonne.

1440 / 16 = 90 px - 20px di margine

PROGETTARE IN PHOTOSHOP – 2 VIDEO

In photoshop ci facciamo un’idea precisa del sistema di griglie che vogliamo progettare sul web. Nel mio esempio ho creato un sistema di 16 griglie suddivise su un layout di 1440px di larghezza. In tal modo suddividendo 1440 / 16 = 90 otteniamo la larghezza della colonna. Ogni colonna poi avrà un margine di 20 px. In termini relativi sul 100% ogni colonna sarà pari a 6,25%. Disegniamo un sistema di griglie di 5 righe all’interno delle quali posizioneremo le nostre colonne.

LE GRIGLIE DA PSD AD HTML – 3 VIDEO

Nel passare da psd ad html è semplice. In questo esempio anziché usare le percentuali e quindi il sistema di misura relativo utilizziamo la proprietà css calc().
La proprietà css calc() ci permette di fare delle vere e proprie operazioni matematiche all’interno del foglio di stile e con molta precisione senza doverle calcolare con la calcolatrice. Inoltre le operazioni matematiche possono essere fatte senza alcun problema, combinando diverse unità di misura come le percentuali ed i pixel o gli ems.

Secondo il classico sistema anziché fare il seguente calcolo:

100% / 16 = 6,25%

1 colonna 6,25%
2 colonne 12,5%
3 colonne 18,75%
4 colonne 25%
5 colonne 31,25%
6 colonne 37,5%
7 colonne 43,75%
8 colonne 50%
9 colonne 56,25%
10 colonne 62.5%
11 colonne 68.75%
12 colonne 75%
13 colonne 81.25%
14 colonne 87.5%
15 colonne 93.75%
16 colonne 100%

Anziché utilizzare questa tecnica usiamo la proprietà calc()
oppure possiamo esprimere il concetto in frazioni con la funzione calc( 100% * 1/1 )

100% * 1/16 = 1 colonna
100% * 2/16 = 2 colonna
100% * 3/16 = 3 colonna
100% * 4/16 = 4 colonna
100% * 5/16 = 5 colonna
100% * 6/16 = 6 colonna
100% * 7/16 = 7 colonna
100% * 8/16 = 8 colonna —— LA META’ CIOE’ 1/2
100% * 9/16 = 9 colonna
100% * 10/16 = 10 colonna
100% * 11/16 = 11 colonna
100% * 12/16 = 12 colonna
100% * 13/16 = 13 colonna
100% * 14/16 = 14 colonna
100% * 15/16 = 15 colonna
100% * 16/16 = 16 colonna

Progettiamo la nostra griglia con questo metodo
Il calcolo si riferisce alla singola colonna. quindi la colonna per esempio 6 ( cioè totale 6 colonne ) è pari a 6 / 16 – 20px dell’ultima colonna + un margine destro di 20px ciascuno

Video 4 – inserire i contenuti e le media queries

Nel precedente video abbiamo realizzato la nostra griglia: le colonne in rosso saranno quelle che avranno i contenuti della nostra pagina. Inserire i contenuti è semplice. Troviamo la nostra colonna all’interno del foglio html e inseriamo ciò che vogliamo. Per esempio nella prima colonna in rosso che è quella formata da 16 colonne e quindi un’intera riga inseriamo i box.

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.

— SCARICA LA RISORSA “COME PROGETTARE UNA GRIGLIA RESPONSIVE”—

Nome *

Email *

Per piacere seguici e metti mi piace:

Quale layout scegliere per la realizzazione di un sito web? Qual è il layout migliore per realizzare un sito web responsive? In questo articolo discutiamo proprio delle differenze tra i tipi di layout e ti darò dei consigli per usare quello che è più adatto alla realizzazione di un sito web responsive. (altro…)

Per piacere seguici e metti mi piace:

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;
}

INSERIMENTO DEL CODICE JQUERY

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.

— SCARICA LA RISORSA “COME REALIZZARE UN MENU’ RESPONSIVE IN 3 SEMPLICI PASSI”—

Nome *

Email *

Per piacere seguici e metti mi piace:

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…)

Per piacere seguici e metti mi piace: