Material Design and the Mystery Meat Navigation Problem

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 !

#16212  

https://medium.freecodecamp.com/material-design-and-the-mystery-meat-navigation-problem-65425fb5b52e

Google Fonts est-il le site le plus sexy du web ? - Tech - Numerama

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.

Material Design Input & Textarea focus animation

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.

Material Design Input Text

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.