Google vient de publier quelques ressources à l’intention des développeurs web. Sobrement nommées Material Design Lite, elles permettent la création de sites web reprenant facilement les codes visuels de l’interface mise en avant par l’éditeur depuis l’arrivée d’Android 5.0.
Material Design est un langage visuel, largement mis en avant par Google depuis un an environ. Il regroupe tout un ensemble de règles et permet de moderniser les interfaces, en faisant notamment place au contenu. Le contenant se veut simple, joue avec certains effets de matière et d’ombrage, et propose un « look » globalement plus consistant que ModernUI chez Microsoft (que certains estiment trop dépouillé), ou même que ce que propose Apple depuis iOS 7. Pour cela, Google s'appuie sur une métaphore papier et encre, le contenant étant composé de feuilles de papier à superposer, le contenu d'encre.
Le Material Design envahit peu à peu l’ensemble des produits de Google, y compris sur les autres plateformes. On a pu voir récemment sur iOS le remaniement de l’application Hangouts, dont l'apparence a évolué en s'appuyant sur cette spécification. Mais les systèmes d’exploitation et applications ne suffisent pas à Google, qui propose désormais un petit kit permettant aux développeurs web de donner un air de Material Design à leurs sites.
Material Design Lite, ou MDL, est contenu dans un petit fichier compressé d’à peine 27 ko. Il est utilisable dans de nombreuses solutions (il se veut agnostique) et propose différents éléments qui peuvent être soit utilisés ensemble, soit au contraire séparément. Il s’agit d’éléments « Paper » encapsulés individuellement, et le développeur pourra ainsi utiliser le module spécifique aux graphiques ou aux billets de texte sans utiliser le reste. Des modèles sont par ailleurs fournis.
La seule limitation pour le développeur sera en fait la compatibilité des navigateurs. Google indique en effet qu’il faut des versions relativement récentes pour que les éléments MDL soient pris en charge correctement. Pour des Chrome, Firefox ou Opera qui se mettent à jour continuellement, il n’y aura aucun problème. Pour Safari, il faudra contrôler que l’on a bien installé toutes les mises à jour. Du côté de Microsoft, Google parle d’Edge, qui n’est même pas encore sorti, mais un coup d’œil au tableau de compatibilité montre qu’Internet Explorer 10 et 11 ne causeront aucune difficulté. Dans le cas de la version 9, MDL bascule sur un mode intégralement CSS de manière automatique.
Les développeurs qui s’intéressent à ce kit pourront le télécharger depuis la page de l’annonce.
Commentaires (51)
#1
Les systèmes d’exploitation et les applications, ce n’était pas assez
C’etait l’idée base hein… Depuis son annonce à la IO 2014.
Le probleme c’est que jusqu’à present Google proposait MD pour le web qu’à travers Polymer et Angular, qui sont tous les deux assez connus pour leur lourdeur.
#2
Le MD est horriblement moche. Je sais, les goûts et les couleurs tout ça… mais là ça pique.
#3
#4
#5
Et pour l’accessibilité… ça sera une autre fois (aucun aria-*)
#6
Comment tu dis déjà, axélibilité ?
" />
C’est quoi çe truc
#7
Brace yourself
" />
Material Design web sites clones is coming
#8
#9
#10
NXI: v7 is coming.
#11
Je vais m’y mettre, j’adore ce style d’interface! Merci NXI
#12
C’est ici : http://www.getmdl.io/ ;)
#13
D’un autre coté, je viens de lire le document sur les “règles” du material design, c’est une mine d’or pour une personne qui n’a jamais fait de design. Le document est très complet, de l’aspect graphique jusqu’à la façon d’écrire, de choisir ses mots (j’ai bien aimé la partie ou il est dit de ne pas utiliser “nous” sauf si c’est vraiment un humain qui est derrière)… J’ai envie de dire que c’est presque un exemple qui pourrait servir pour savoir faire un environnement cohérent.
#14
#15
#16
C’est quoi tes reproches exactement ?
#17
#18
#19
Dans tous les cas, c’est plutôt interressant d’avoir une alternative à Bootstrap (qui, il faut bien le dire est quand même bien pratique) . On va avoir droit à la guerre des clones 
" />
#20
Les kits et autres framework graphiques existent depuis que la nuit des temps…
#21
Un point Godwin atteint sur un sujet traitant d’un n-ième framework HTML/CSS/JS il fallait le faire ^^
#22
#23
Apparemment Material Design Lite utilise flexbox (1) plutôt qu’une grille classique (comme Bootstrap) => tres tres bonne nouvelle ! C’est ce qui manque a Bootstrap justement.
Ca utilise Sass au lieu de LESS (Bootstrap). AMHA Sass a gagné la guerre des preprocesseurs CSS, d’autant que la prochaine version de Bootstrap sera écrite directement en Sass.
(1) https://github.com/google/material-design-lite/blob/master/src/grid/_grid.scss
#24
ça date pas de maintenant, tout est devenu lisse sur le web plus personne n’a d’audace :(
#25
Justement, MD n’est pas du flat. Et la nouvelle version de MUI ne change rien au fait style de base très dépouillé.
#26
#27
Il regroupe tout un ensemble de règles et permet de moderniser les interfaces, en faisant notamment place au contenu.
Et c’est pour ça que les deux images dans l’actu ont des espaces vides qui bouffent une place énorme.
Logique.
#28
#29
#30
#31
Je viens de jeter un œil au CSS, les choix sur le structurel, leur implémentation etc., et : bah PureCSS est toujours beaucoup plus efficace et efficient à tout point de vue (perf, rétro-compatibilité, respect des standards) tout en restant moins contraignant.
" />
Je suis vraiment super déçu ; il me reste encore à voir du côté du JS (que pureCSS ne propose pas), mais je suis vraiment pas fan de ce que je vois pour le moment.
#32
#33
#34
#35
#36
#37
#38
#39
Ahah avec plaisir ; prends quand même un certain nombre de choses avec des pincettes (généralement, je précise quand ce sont des ‘à priori’ à creuser), ce n’est qu’une première lecture du contenu. Globalement, et uniquement pour le CSS, ce qui m’a pas plu réside dans :
Pour les deux derniers points, je suis vraiment super étonné : pourquoi avoir mis du JS là où du CSS suffit largement, puisque leur JS ne fait rien de plus que styliser le label (pourquoi ne pas faire un “input[type=“checkbox”]:checked + label” par exemple ?)
Alors je comprends que Twitter Bootstrap soit vraiment la grosse Bertha car son optique est d’être super facile à l’utilisation. Mais là, je comprends ni la prétention (ce n’est pas optimisé du tout comparé à du pureCSS, ce n’est pas rétro-compatible non plus d’ailleurs), ni l’intérêt (c’est très verbeux avec des classes pour tout, partout, et des noms à rallonge, le tout étant globalement restrictif).
#40
(désolé du double-post, mais je ne peux plus éditer le précédent
" /> )
Juste pour préciser : le JS a l’air très lisible pour les habitués à la POO, donc c’est un bon point … MAIS ça oblige à appliquer une forme de surcouche pas forcément optimale ; si le but est d’être optimisé, ça me paraît un peu raté : le JavaScript a son propre paradigme de programmation (je sais jamais comment l’appeler, mais j’aimais bien “objet lié à d’autres objets”), certes particulier et vite bordélique si on est pas rigoureux, mais tout aussi puissant que l’OO, donc autant en profiter.
P.S. : pour préciser sur le “input[type=“checkbox”]:checked + label”, ça implique effectivement que l’input soit placé avant le label, ce qui, en terme de lisibilité, peut être considéré comme un petit peu moins clair qu’un input dans un label, m’enfin ça serait chipoter je trouve :P
#41
Il a encore du taff pour que je l’adopte perso…
#42
Sinon, y’a materializecss.com qui propose un framework CSS simple et stylé pour rentre vos site “Material Design”
#43
#44
#45