Denis Potschien 24. August 2012

Websites in Kacheloptik mit Metro UI CSS

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

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.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

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.

    • Heute wo keiner mehr Zeit hat und alles schnell gehen muss trift halt Metro UI etwas besser den Nerv. Von diesem Bunti Bunti halt ich auch nicht viel. Schaut euch doch Bitte mal diese Seite an in Ruhe an. Ist nicht typisch Metro aber gut bis sehr gut gemacht http://www.chrisly.org/
      Viel Spaß und Danke

  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.

Tut uns leid, aber die Kommentare sind geschlossen...

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück