Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 24. August 2012

Websites in Kacheloptik mit Metro UI CSS

Unter dem Namen Metro hat die neue Oberfläche, die Microsoft mit Windows 8 ein­führt, bereits hohe Wellen geschla­gen. Mittlerweile muss­ten die Redmonder den Begriff Metro auf­ge­ben. Warum das so ist und ob das neue Windows-Design ein Erfolg wird oder nicht, sei ein­mal dahin­ge­stellt. Metro ist jeden­falls in aller Munde. Jetzt kann jeder sei­ne Website eben­falls im Kachel-Style ent­wi­ckeln – dank Metro UI CSS.


Metro UI CSS

Metro UI CSS ent­stammt der Schmiede von Sergey Pimenov, der das CSS-Framework ent­wi­ckelt und unter der MIT-Lizenz ver­öf­fent­licht hat. Dabei über­nahm der Entwickler nicht nur das typi­sche Metro-Design, son­dern auch vie­le 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 umfang­reich umge­setz­te Metro-Design ver­schaf­fen. Auf meh­re­ren Seiten wird dar­ge­stellt, wie Bilder, Formulare, Buttons und die Metro-typi­schen Tiles, wel­che die Windows-Icons ablö­sen sol­len, aus­se­hen und sich bedie­nen las­sen.


Metro-Tiles

Auch das ver­ti­ka­le Scrollen durch die Seite, wie es Metro für Tablets vor­ge­se­hen hat, wur­de über­nom­men. Auf einem ent­spre­chen­den Gerät mit Touchdisplay kann man sich auf die­se Weise sehr schön durch die Seite bewe­gen. Eine alter­na­ti­ve Navigation per Maus wur­de eben­falls inte­griert.


Metro-Buttons

Metro UI CSS: Umgesetzt mit CSS und JavaScript

Realisiert wur­de das Framework per CSS und unter Zuhilfenahme ver­schie­de­ner JavaScript-Bibliotheken. So wird jQuery mit eini­gen Plugins sowie Bootstrap ein­ge­setzt – ergänzt durch eini­ge eige­ne JavaScript-Funktionen.


Metro-Bilddarstellung

Leider gibt es kei­ne Dokumentation zu dem Projekt. Aber eine Demo mit allen Elementen, für die der Metro-Style umge­setzt wur­de, kann her­un­ter gela­den wer­den.  Viele Effekte wer­den ein­fach per Vergabe der ent­spre­chen­den Klassen ange­wen­det. Ein Blick in den Quelltext hilft dabei. Metro UI CSS läuft in fast allen gän­gi­gen Browsern, im Internet Exploder erst ab Version 9.

(dpe)

Denis Potschien

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.

5 Kommentare

  1. Ich fin­de die gan­ze Metro Hysterie ein Wenig über­trie­ben. Kann sein dass es für bestimm­te Websites gut funk­tio­niert.

    Ich arbei­te mit Joomla und, seit Kurzem, WordPress. Ich sehe noch nicht dass ich mei­ne Kunden bei­brin­ge wo sie wel­che Inhalte dar­stel­len kön­nen.

    Müsste für alle Inhalte, die nicht als Hauptinhalt dar­ge­stellt wer­den sol­len, ein Modul kre­ieren. und wenn ein Kunde dann auch nur eine zei­le zuviel schreibt, bricht das Design aus­ein­an­der?

    Tolle sache…

    Ansonsten könn­te man die gan­ze Blöckchen als Link zu Artikeln ver­don­nern, was dann wie­der HTML schrei­ben bedeu­tet, was ein Kunde nicht kann und auch nicht kön­nen muß.

    Meiner Meinung nach ist das viel­leicht als Startseite für Windows drei eine net­te sache, aber für dyna­mi­sche Webseiten, die von Menschen, die in der Hinsicht Laie sind und ledig­lich ihre Firma und Dienstleistung prä­sen­tie­ren und anbie­ten möch­ten, nicht prak­ti­ka­bel.

    mal sehen wie lan­ge die­ser Trend ein Hype bleibt.

    • Heute wo kei­ner mehr Zeit hat und alles schnell gehen muss trift halt Metro UI etwas bes­ser den Nerv. Von die­sem Bunti Bunti halt ich auch nicht viel. Schaut euch doch Bitte mal die­se 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ög­lich bei­des zu machen? Einmal Kacheloptik und für den der die klas­si­sche Optik mag und auch für den freund der Kacheloptik.
    Wenn nur die Kacheloptik im Vordergrund steht, wer­de ich nicht bei Windows blei­ben!

  3. Das hori­zon­ta­le Scrollen gefällt mir gar nicht. Ich kann mir nur schwer vor­stel­len, dass sich das wirk­lich auch auf Desktop-Rechner durch­set­zen wird.

  4. Hmm, Text (Inhalte) kom­men im zukünf­ti­gen Web wohl nicht vor, oder? Klickibunti nann­te man das frü­her, heu­te ist es der neue Trend, von Pinterest bis Metro, Hauptsache der Nutzer wird nicht über­for­dert. Demnächst dann noch mit Mediaqueries noch hoch­auf­lö­send für Retina-Displays. Man hat das Gefühl, hier wird das Fernsehen gera­de neu erfun­den.

Schreibe einen Kommentar zu andre Antworten abbrechen

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