Websites in Kacheloptik mit Metro UI CSS

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

 Sponsorenliebe

Endlich smarte Buchhaltung!

We Billing

Unter dem Namen Metro hat die neue Oberfläche, die Microsoft mit Windows 8 einführt, bereits hohe Wellen geschlagen. Mittlerweile mussten die Redmonder den Begriff Metro aufgeben. Warum das so ist und ob das neue Windows-Design ein Erfolg wird oder nicht, sei einmal dahingestellt. Metro ist jedenfalls in aller Munde. Jetzt kann jeder seine Website ebenfalls im Kachel-Style entwickeln – dank Metro UI CSS.


Metro UI CSS

Metro UI CSS entstammt der Schmiede von Sergey Pimenov, der das CSS-Framework entwickelt und unter der MIT-Lizenz veröffentlicht hat. Dabei übernahm der Entwickler nicht nur das typische Metro-Design, sondern auch viele Effekte – wie das Einblenden von Bildunterschriften oder Switch-Buttons.

Metro UI CSS: Umfangreiches Framework

Auf der Demoseite des Projektes kann sich jeder selbst einen Überblick über das umfangreich umgesetzte Metro-Design verschaffen. Auf mehreren Seiten wird dargestellt, wie Bilder, Formulare, Buttons und die Metro-typischen Tiles, welche die Windows-Icons ablösen sollen, aussehen und sich bedienen lassen.


Metro-Tiles

Auch das vertikale Scrollen durch die Seite, wie es Metro für Tablets vorgesehen hat, wurde übernommen. Auf einem entsprechenden Gerät mit Touchdisplay kann man sich auf diese Weise sehr schön durch die Seite bewegen. Eine alternative Navigation per Maus wurde ebenfalls integriert.


Metro-Buttons

Metro UI CSS: Umgesetzt mit CSS und JavaScript

Realisiert wurde das Framework per CSS und unter Zuhilfenahme verschiedener JavaScript-Bibliotheken. So wird jQuery mit einigen Plugins sowie Bootstrap eingesetzt – ergänzt durch einige eigene JavaScript-Funktionen.


Metro-Bilddarstellung

Leider gibt es keine Dokumentation zu dem Projekt. Aber eine Demo mit allen Elementen, für die der Metro-Style umgesetzt wurde, kann herunter geladen werden.  Viele Effekte werden einfach per Vergabe der entsprechenden Klassen angewendet. Ein Blick in den Quelltext hilft dabei. Metro UI CSS läuft in fast allen gängigen Browsern, im Internet Exploder erst ab Version 9.

(dpe)

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

6 Kommentare

  1. Ich finde die ganze Metro Hysterie ein Wenig übertrieben. Kann sein dass es für bestimmte Websites gut funktioniert.

    Ich arbeite mit Joomla und, seit Kurzem, WordPress. Ich sehe noch nicht dass ich meine Kunden beibringe wo sie welche Inhalte darstellen können.

    Müsste für alle Inhalte, die nicht als Hauptinhalt dargestellt werden sollen, ein Modul kreieren. und wenn ein Kunde dann auch nur eine zeile zuviel schreibt, bricht das Design auseinander?

    Tolle sache…

    Ansonsten könnte man die ganze Blöckchen als Link zu Artikeln verdonnern, was dann wieder HTML schreiben bedeutet, was ein Kunde nicht kann und auch nicht können muß.

    Meiner Meinung nach ist das vielleicht als Startseite für Windows drei eine nette sache, aber für dynamische Webseiten, die von Menschen, die in der Hinsicht Laie sind und lediglich ihre Firma und Dienstleistung präsentieren und anbieten möchten, nicht praktikabel.

    mal sehen wie lange dieser Trend ein Hype bleibt.

  2. Warum ist es nicht möglich beides zu machen? Einmal Kacheloptik und für den der die klassische Optik mag und auch für den freund der Kacheloptik.
    Wenn nur die Kacheloptik im Vordergrund steht, werde ich nicht bei Windows bleiben!

  3. Das horizontale Scrollen gefällt mir gar nicht. Ich kann mir nur schwer vorstellen, dass sich das wirklich auch auf Desktop-Rechner durchsetzen wird.

  4. Hmm, Text (Inhalte) kommen im zukünftigen Web wohl nicht vor, oder? Klickibunti nannte man das früher, heute ist es der neue Trend, von Pinterest bis Metro, Hauptsache der Nutzer wird nicht überfordert. Demnächst dann noch mit Mediaqueries noch hochauflösend für Retina-Displays. Man hat das Gefühl, hier wird das Fernsehen gerade neu erfunden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.