Da Psd ad Html: come progettare una griglia responsive

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:
alederobertis75
info@alessandraderobertis.it
Nessun Commento

Pubblica un commento