Google svela Material Design Lite

Webengers

15.07.2015

Web e Design
Mdl

MDL: un semplice framework che porta il Material Design nei siti web.

È di pochi giorni fa la notizia che Google ha annunciato la release del Material Design Lite. Non è tanto, come il nome potrebbe far pensare, una versione più snella del Material Design, quanto piuttosto un framework per implementare più facilmente il Material Design sul proprio sito.
Nell'ultimo anno, sin dalla presentazione all' I/O 2014, la sua implementazione ha gradualmente modificato e imposto il suo stile sui prodotti Google. Tutto, da Google Drive al Sistema Operativo Android sfoggia lo stile minimale del Material Design.
Ed anche la stessa pagina di ricerca di Google ha adottato degli elementi in Material Design. Uno dei principali ostacoli per una diffusione più ampia dei principi del Material Design al di fuori degli stessi prodotti Google è la competizione degli stili imposta dai framework. Ci sono stati tentativi da parte di alcune community di coniugare il Material Design e, per esempio, Bootstrap: e così il Material Design Lite è un tentativo di provvedere ad una implementazione del Material Design secondo le linee guida di Google.



Come usare il Material Design Lite


Codice di implementazione del Material Design, il Material Design Lite (MDL) è una piccola libreria di componenti delle dimensioni di 27Kb, da utilizzare per le pagine Web e per le App. È stato scritto in Sass utilizzando BEM e può essere scaricato da GitHub pet poi essere modificato a seconda delle proprie esigenze. Altrimenti è possibile, come consigliato da Google, importare l'intero framework dal CDN Google.
Si potrà così scegliere gli elementi da integrare ai propri design, o, se si cerca una soluzione ancora più semplice, Google ha messo a punto un theme customizer che permette di effettuare rapidamente modifiche minori per cambiare il framework prima di utilizzarlo.


Che cosa è incluso nel Material Design Lite


Tra le componenti del Material Design Lite troviamo una versione in Material Design dei comuni elementi di Interfaccia Utente, come i box per le scelte multiple, i campi di inserimento testo e pulsanti. Ci sono anche altri elementi UI in Material Design, come card, slider, spinner, e tab.
Il Material Design Lite include anche cinque template: un blog, il tema di android.com, una dashboard, una pagina pesante di testo ed una pagina articolo.



Supporto browser per il Material Design Lite


Il MDL, secondo Google, funzionerà sui browser più diffusi e moderni (Chrome, Firefox, Opera, Microsoft Edge) oltre che su Safari. Questa piccola deviazione sui prodotti Apple ci garantisce che il supporto del MDL da parte delle ultime due versioni di tutti i più famosi browser.
Il Material Design Lite è stato ottimizzato per supportare contenuti di siti pesanti. Il suo core permette la portabilità da un browser all'altro, l'indipendenza tra device ed un approccio alla progettazione graceful degradation. Le prime due sono in linea con le best practice dettate dal design responsive, e anche se negli ultimi anni il metodo di sviluppo graceful degradation è stato oppiantato da uno di progressive enhancement, il legacy support indica che il graceful degradation è ancora un'importante feature.
Il MDL include il test “Cutting the mustard” che deve essere superato prima che le implementazioni JavaScript siano applicate al framework. I browser più datati, come Internet Explorer 9, fallirano il test e sarà servita solo una vesione CSS-only. Browser ancora più vecchi come Internet Explorer 8, non avranno nemmeno il supporto pieno alla versione CSS-only. L'MDL utilizza per esempio Flexbox che ne Internet Explorer 8 o Internet Explorer 9 riescono ad eseguire; nonostante ciò il l'assunto della graceful degradation alla base del MDL permette a Internet Explorer 8 di visualizzare parte del framework correttamente.



Problemi con il Material Design Lite


Numerose problematiche di Use Experience sono state segnalate per il Material Design, e naturalmente il MDL le ha ereditate tutte. Per esempio, uno degli elementi più distintivi del Material Design. Il pulsante flottante risulta frequentemente fuori posizione, e nella sua versione mobile necessita di un tocco in più per essere premuto.
Più in generale, il Material Design Lite è ben fatto, tuttavia ci sono alcuni assunti opinabili; è per esempio l'ennesimo framework che appoggia a JavaScript per il suo layout.
Il Material Design Lite inoltre utilizza un font di default, il Roboto che, anche se è modificabile e sostituibile, non riteniamo che la maggioranza degli utenti ci proverà.
Framework CSS come Bootstrap e Foundation da sempre includono elementi visuali. Tuttavia non hanno uno stile così distinto come il Material Design Lite. Il MDL ha un passo in più rispetto alla maggioranza dei framework per il fatto di possedere un suo stile visivo; è per questo che il Material Design Lite sembra un framework pensato con un progetto dietro.


Dovresti usare il Material Design Lite?


Il Material Design Lite è fondato sul modo in cui Google ritiene che la maggioranza dei siti dovrebbe essere progettata. E anche se non c'è assolutamente alcun indizio che ci possa far affermare che Google costringerà ad utilizzare il MDL, sicuramente se ne avesse la volontà lo farebbe; Google vuole assicurare che i risultati di ricerca che fornisce ai propri utenti siano veloci, puliti e basati su pagine user-friendly, quali miglior modo per far implementare un framework di cui detiene il controllo se non tramite il suo algoritmo?
L'utilizzo di un determinato framework introduce inevitabilmente alcuni elementi presi in prestito. Tuttavia, i framework che hanno avuto più successo sono anche quelli che concedono più flessibilità. Il Material Design Lite differisce nella misura in cui non è un semplice framework ma un framework che favorisce uno specifico stile di design.
Il Material Design, come una guida di design è un ben fatto ed intelligente tentativo di razionalizzare le linee guida di Google all'interno di un brand coerente. Ma al tempo stesso il suo punto debole è proprio l'essere troppo autoreferenziale e specifico per essere applicato oltre la cerchia dei prodotti Google.
Possiamo imparare molte nozioni dal Material Design, ma è solo implementandolo — che è il più grande punto di forza del Material Design Lite — che possiamo provare con mano le sue qualità.

FONTE: http://www.webdesignerdepot.com/2015/07/google-unveils-material-design-lite/

SuccessivoCoca-Cola rimuove il Logo dalle sue Lattine per un'edizione limitata in Medio Oriente

1Coca Cola 1024x768

Commenta questo articolo

facebook
google
X

Iscriviti alla newsletter

Acconsento al trattamento dei miei dati personali dichiarando di aver letto l'informativa sulla Privacy.