Auf der Website bekommst du auch einen guten Eindruck, was sich geändert hat. Unter anderem neue Formen und neue Animationen.

Was ich am spannendsten finde: dynamische Farben.

Google hat in Android 12 ein Algorithmus integriert, der Farbtöne aus dem Wallpaper der Nutzer:innen extrahiert, die vom UI verwendet werden können. So bekommen die Apps eine persönlichere Note.

Ich habe kein Android-Gerät, deswegen konnte ich das Feature noch nicht selbst ausprobieren.

Umsetzung für Webseiten?

Bisher ist Material You hauptsächlich für Android vorgesehen, es wird aber eine Frage der Zeit sein, dass auch an Web gedacht wird. Webseiten haben keine direkte Möglichkeit, den Wallpaper vom Betriebssystem abzugreifen.

Möglicherweise wird Google für Chrome die Theme-Farben als CSS-Variablen liefern, sodass Webentwickler:innen diese einfach nutzen können. Andere Chromium-Browser (wie Edge) könnten diese API dann ebenfalls erhalten.

Übergangslösung

Ich habe ein wenig experimentiert und Farben aus dem Standard-Wallpaper aus macOS Monterey mit Hilfe von Adobe Color extrahiert.

Den Dark Mode habe ich ebenfalls berücksichtigt:

In nächsten Schritten könnte man mit JavaScript herausfinden, welches Betriebssystem verwendet wird und jeweils Farben der Standard-Wallpaper anwenden.

Oder man erlaubt, Benutzer:innen ein Bild zum Analysieren hochzuladen/auszuwählen. Das halte ich allerdings für einen nicht sehr eleganten Ansatz.

html_bones ist ein kleines Werkzeug für Web-Entwickler, die schnell mit einem neuen Web-Projekt starten wollen.
Aus eine Reihe an häufig genutzten HTML-Elementen, können die benötigten Komponenten aus- und abgewählt werden.

So erhältst du schnell ein HTML-Grundaufbau, welchen du auch für später speichern kannst.

Es ist keine Anmeldung oder Registrierung notwendig.
Jetzt starten »

Änderungen zur vorherigen Version

Während v1.x vor allem mit PHP lief, läuft v2.1 ausschließlich client-seitig. Das heißt: Weniger Laden.
Denn mit PHP musste für jede Auswahl eine neue HTTP-Anfrage gestellt und bearbeitet werden. Das kostete viel Zeit, vor allem, weil man höchst wahrscheinlich mehrere Elemente hintereinander an- und abwählen möchte.

v2.1 dagegen läuft ausschließlich mit HTML, CSS und JavaScript. Das hat allerdings auch Nachteile, da ich so mehr auf die Browserkompatibilität achten musste. So gibt es mit IE leider immer noch einen Bug, den ich nicht lösen konnte (das UTF-8-Meta-Element kann nicht ausgewählt werden).

Das Design: Materialize

Ich bin zwar ein riesen Bootstrap-Fan, hier wollte ich aber mal ein anderes CSS-Framework testen: Materialize CSS.

Wie sich bereits heraushören lässt, basiert Materialize auf das Material Design von Google. Zu diesem Zeitpunkt befindet sich das Framework allerdings noch im Alpha-Status.

• Materialize Website
• Materialize auf GitHub