Ein Beispiel für eine mit Material Design Lite erstellte Webseite.

Grafik: Google

Ein Blog-Design mit Material Design Lite.

Grafik: Google

Während Material Design unter Android ein voller Erfolg ist, haben sich die Design-Richtlinien von Google im Web bisher nur wenig verbreitet. Nun entfernt der Softwarehersteller eine entscheidende Hürde: Mit Material Design Lite gibt es eine abgespeckte Variante der Spezifikationen, die ohne jegliche Zusatzbibliotheken oder Javascript-Frameworks implementiert werden kann.

Basis

Bei MDL reichen also normales HTML, CSS und Javascript, um die UI-Elemente entsprechend zu stylen. Nicht zuletzt ist dadurch der Ressourcenverbrauch deutlich niedriger als beim vollen Material Design, das in der Web-Variante die Polymer-Bibliothek als Basis verwendet.

Zu den einzelnen Design liefert Google passende Templates. In einem Blog-Posting auf Medium zeigen die Google-Designer einige Beispiele für damit erstellte Layouts.

Browser-Support

Das Material Design Lite arbeitet laut Google mit allen aktuellen Browsern zusammen, also Chrome, Firefox, Opera, Microsoft Edge, Internet Explorer 10+ und Safari. Für ältere Browser wie den IE9 wird auf pures CSS zurückgegangen. (apo, 7.7.2015)