Une petite critique du Material Design, et de certains de ses problèmes récurrents.

Concernant le « mystery button » y a un truc qu’il faut pas oublier, c’est qu’une même icône a une signification basée sur le contexte, de l’application. Et ça, ce n’est pas un bug, c’est bien une feature !

Interface parfaite… je ne sais pas (leur sélecteur de couleur me semble un peu inapproprié, presque grossier quand on voit le reste), mais le moins qu’on puisse dire est que c’est réussi, oui.

Ensuite, à quel prix : en regardant le code source (le DOM), on constate que ce n’est pas du HTML5 de base : ils ont pratiquement tout refait avec des div et des éléments faits maison. C’est légal, en HTML5 on peut tout à fait faire ça, mais bon, il y a plus « satisfaisant intellectuellement » que de faire sauter toutes les limites.

Quoi qu’il en soit, j’aime énormément le Material Design, et j’ai hâte de voir ce que Google et ses artistes nous réservent pour plus tard.

Une bonne bibliothèque d’icônes Material/Flat.

Voir aussi ça : https://github.com/google/material-design-icons
Les icônes Material proposées par Google (en CC-By facultative).

Et encore un, ici pour l’effet du « ripple », l’espèce de vague qu’on a quand on clique dessus.

Finalement j’ai repris le codepen avec l’animation utilisant le background.

Je l’ai nettoyé et amélioré pour qu’il fonctionne partout, sur les input et les textarea de la même façon.

En soi c’est très simple, vous regarderez le commentaire sur la page.

Ici un autre, utilisant une animation sur le background (donc pas besoin d’ajouter une HR), qui se décale de gauche à droite au focus et de droite à gauche au blur. Très ingénieux là aussi.