Il material design è una tecnica di design ideata da Google che pian piano ha rinnovato tutti i suoi prodotti  trasformandoli in design digitale innovativo, un linguaggio a metà tra flat design e skeumorfismo di Apple.
La parola chiave del material design è proprio “material” che vuol dire materiale cioè oggetto. L ’obiettivo del design materiale è di fare in modo che le interfacce si comportino come degli oggetti reali cercando di adeguarsi ad ogni situazione. L’ideatore di questo progetto Matias Duarte ha affermato che:

Come la carta il nostro materiale digitale si può espandere o restringere riformandosi in modo intelligente. I materiali hanno superfici fisiche e bordi. Cose come ombre e cucitore danno il loro significato di qualcosa che tocchi.

In realtà il material design è un’evoluzione del flat design perché utilizza alcune sue caratteristiche come le palette di colori forti, le forme geometriche primarie e lo spazio largo tra testi.

Il material design è nato qualche anno fà come nuovo strumento per creare esperienze ed emozioni differenti nella progettazione di siti web. Il Design è un modo di pensare, un’esplorazione per capire cosa funziona, richiede collaborazione di diverse figure nel web e persone che lavorano per costruire il material design. Design è un linguaggio di condivisione, una serie di elementi che parlano tra loro in modo chiaro, elementi flessibili tra loro grazie ad ogni dettaglio. Design è “Niente è mai fatto” perché siamo in un mondo di continua evoluzione e continui bisogni.
Material design è un sistema unificato, attraverso la combinazione di materie, risorse, e uomini che collaborano insieme per trovare soluzioni nuovi insieme.

Material.io  è un luogo virtuale dove sono inseriti tutti i lavori realizzati con il material design, con lo scopo di condividerlo e di farlo crescere. Il material Design ti permette di ridefinire gli aspetti della tua interfaccia, dai colori alle animazioni e di realizzarle in modo corretto su ogni dispositivo. Grazie a strumenti come REMIXER puoi fare modifiche in tempo reale grazie alla possibilità di ridefinire il design attraverso il cambiamento di colore, animazione e visibilità senza necessità di modificare il codice o di far ripartire la applicazione.

OBIETTIVI

Il material design ha l’obiettivo di far condividere una serie di principi che vanno dal buon design a quelli di innovazione, di scienza e tecnologia; Questo viene raggiunto attraverso sistemi che realizzano un’esperienza unica per diverse piattaforme e differenti dimensioni di ogni dispositivo. Le regole per i dispositivi mobili sono importanti, ma lo sono anche quelle riguardanti i touch, la voce, il mouse e la tastiera sono input fondamentali.

PRINCIPI

  1. Superfici tattili: le superfici digitali devono essere reali, tangibili, toccabili con uno spessore di 1 dpi (dot per inch). Utilizzando questo spessore unitario vi è la definizione utilizzata di quantum paper. In questo modo gli elementi acquisiscono ombre realistiche perché sono strutturali in modo gerarchico. La suddivisione in livelli migliora l’esperienza utente e fa spostare la sua attenzione su elementi importanti della pagina come i pulsanti o menù di navigazione. Questa è la differenza più importante con il flat design che come dice il nome stesso vuol dire piatto. Il design materiale invece introduce il concetto di profondità e tridimensionale delle superfici delle interfacce ma che rimane sempre semplice con le linee e le forme.
    A seconda della importanza i quantum paper sono disposti ad una diversa altezza facendone cambiare l’ombra generata. Per esempio i pulsanti di navigazione principali vengono messi in primo piano, mentre le strutture a blocchi dell’interfaccia sono posti  più in basso con un’ombra meno consistente.
  2. Animazioni intelligenti: le interfacce non sono statiche e devono però essere sensate e coerenti con l’esperienza dell’utente. Un’animazione deve essere una conseguenza di un gesto e di una intenzione dell’utente quindi devono essere intelligenti. Molto importante è anche che le animazioni partano dal punto in cui l’input è stato dato. Il movimento è significativo ed appropriato, e serve a focalizzare l’attenzione e mantenere continuità. Le transizioni sono efficienti e coerenti.
  3.  Adattabilità: le interfacce grafiche devono essere responsive e cioè adattarsi in modo dinamico ad ogni dispositivo, computer, tablet o cellulare. Un modo per strutturare un’interfaccia di un applicazione utilizzata da ogni dispositivo è creare diverse dimensioni per i blocchi, cioè le card che compongono la grafica. Per esempio al di sotto dei 700 pixel di larghezza dello schermo questo contenuto verrà mostrato in modo diverso rispetto agli schermi più grandi.
  4.  Inchiostro digitale: è la necessità della stampa alle superfici digitali delle interfacce. Tutto quello che viene applicato alle superfici digitali, diventa inchiostro digitale e prende forma reale. Così come avviene nel design stampato, la tipografia svolge un ruolo importante. Google utilizza solo un font di Roboto che ha 8 diversi pesi che ne garantiscono un ampio utilizzo ma non per questo è stato criticato. Dell’inchiostro digitale fanno parte anche i colori e le immagini utilizzate. Google consiglia di non scegliere più di 3 colori o di non utilizzare immagini che non spiegano bene il contesto oppure che non sono di alta qualità.

 

Gli elementi fondamentali di tipografia, griglie, spazio, scala, colore e uso di immagini sono la guida visuale del material design. Questi elementi sono elementi gerarchici. La scelta di colori particolari  hanno lo scopo di creare una superficie in bold che immergo l’utente nella loro esperienza.

LIBRERIA ICONE
Le icone materiali sono belle, deliziose, e facile da usare nei progetti web. Il modo migliore per usarle è quello di utilizzarle come icon-font poiché pesano poco, sono facili da usare, e sono ospitate da google web font.
Una varietà di icone di varie dimensioni e densità possono essere scaricate da questa libreria. Le icone sono disponibili anche

COMPONENTI MATERIALI
I componenti sono precisi, aggiornati periodicamente e open-sources e creano bellissime applicazioni con componenti UI modulari e customizzabili. I componenti sono aggiornati ogni volta e man mano che il Material design si evolve assicurando una programmazione ed implementazione con pixel perfetti. Sono disponibili anche i widget del material design.

STRUMENTI UTILIZZABILI
Ci sono diversi strumenti da poter utilizzare:

  • Gallery: facilitano l’utilizzo ripetitivo del design e ti permettono di catturare feedback sia visuali che di movimento. È possibile annotare e commentare su ogni immagine o video frame, per questo i progetti progrediscono a velocità incredibile;
  • Color tool: si possono creare e condividere palette di colori e misurare il livello di accessibilità  di ogni combinazione di colore;
  • Remixer: aiuta gli sviluppatori ed i designer a configurare e aggiustare il design delle apps in modo collaborativo. Permette facilmente di affinare il design cambiando il colore, le animazioni e la visibilità senza il bisogno di modificare il codice o di far ripartire l’applicazione;
  • Resizer: Vista interattiva che aiuta i designer a provare i breakpoint del design materiale attraverso i dispositivi desktop, mobile e tablet;
  • Device metric: È un esauriente risorsa per dimensioni, e risoluzioni e più dispositivi mobili;
  • Stage: definisce interfacce dinamiche con movimenti interattivi. Ti permette di cambiare il modo di fare design e di costruire esperienze interattive. Stage è uno strumento di design che supera i processi statici di design facilitando un flusso di lavoro più dinamico e sistematico per creare esperienze digitali;

Il material design sta diventando una tendenza molto di moda sia per le forme che per la struttura ed i colori. Google ha saputo creare un unico linguaggio nel mondo del design creando qualcosa di innovativo grazie alla metafora del materiale. Conosci altri siti web realizzati con la tecnica del Material Design? Segnalalo nei commenti.

Per piacere seguici e metti mi piace:

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.

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:

Circa un mese fa ho scitto un articolo per Webhouse che spiega come trasformare un layout fisso in layout responsive. In questo articolo invece parlo del Responsive Web Design come processo fondamentale per la realizzazione di un sito, che va pianificato dal principio adottando un’approccio per punti. I punti per me fondamentali sono 10 e includono sia la fase di progettazione che la fase di design.

(altro…)

Per piacere seguici e metti mi piace: