UI Designer folgen seit einigen Jahren dem Flat Ansatz. Google bringt eine neue einfach Design Sprache -Material Design- um seine Android Plattform zu gestalten. Relativ neu findet dieses Konzept auch seinen Weg ins Web. Dabei stehen von den Erfindern gleich drei Frameworks zur Verfügung: Polymer, Angular Material und jetzt neu Material Design Lite (MDL).
MDL adressiert die einfache Website und kann am ehesten als Wettbewerber zu Boostrap betrachtet werden. Erste Web Seiten mit den Material Templates finden sich bereits in produktiver Nutzung.
Man erkennt die wenigen aber kräftigen Farben. Information wird in sogenannte Cards gruppiert, die sich optisch durch einen umlaufenden Schatten abheben. Google nennt das Paper Design.
Die Installation des Frameworks erfolgt per Bower oder npm über die Visual Studio 2013 Developer Command Shell.
npm install material-design-lite –save
Die wesentlichen Scripts und Styles finden sich dann im Unterverzeichnis node_modules
Ich halt es mit den Galliern und ignorier die wachsende Besatzung der Welt mit node.js. IIS Express ist auch gut für mich.
In der HTML Seite oder bei ASP.NET Webforms in der Masterpage, werden die Referenzen auf material.css und js gesetzt. Zusätzlich werden noch Icons benötigt, die man lokal im Webserver Verzeichnis speichern oder verlinken kann.
1: <link href="node_modules/material-design-lite/material.css" rel="stylesheet" />
2: <script src="node_modules/material-design-lite/material.js"></script>
3: <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
Das Seitenlayout teilt sich in ein 12 Spalten Grid, basierende auf den üblichen DIV. Alle CSS Klassen beginnen mit mdl- . Eine Seite beschreibt sich mit per <div class="mdl-layout mdl-js-layout ">. Die Spalte über die halbe Seite mdl-cell mdl-cell--6-col.
In der Regel startet der Web Designer mit der Benutzerführung, also dem Menü. Für dieses existieren zwei Varianten, Der Hyperlink basierte Navigation Header und dem Tab Layout das per #Hash Single Page Navigation ausführt.
1: <header class="mdl-layout__header is-casting-shadow">
2: <div class="mdl-layout__header-row">
3: <!-- Title -->
4: <span class="mdl-layout-title">ppedv</span>
5: <!-- Add spacer, to align navigation to the right -->
6: <div class="mdl-layout-spacer"></div>
7: <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
8: mdl-textfield--floating-label mdl-textfield--align-right">
9: <label class="mdl-button mdl-js-button mdl-button--icon"
10: for="waterfall-exp">
11: <i class="material-icons">search</i>
12: </label>
13: <div class="mdl-textfield__expandable-holder">
14: <input class="mdl-textfield__input" type="text" name="sample"
15: id="waterfall-exp" />
16: </div>
17: </div>
18:
19: <div class="mdl-layout-spacer"></div>
20: <!-- Navigation. We hide it in small screens. -->
21:
22: <nav class="docs-navigation mdl-navigation">
23: <a class="mdl-navigation__link " href="HtmlPage1.html">ppedv</a>
24: <a class="mdl-navigation__link" href="news.html">news</a>
25: </nav>
26:
27: </div>
28: </header>
In diesem Beispiel wurde auch noch ein Eingabefeld (Suchfeld) im Header platziert. Dieses erweitert sich automatisch, wenn es den Fokus erhält.
Das Menü verhält sich bei kleineren Screenformaten nicht wie von Bootstrap responsive gewohnt. Es verschwindet ganz und übrig bleibt, die sogenannte Hamburger Schaltfläche. Dazu muss aber ein extra Menü für kleine Bildschirmgrößen definiert werden. Dies wird als Drawer bezeichnet.
1: <div class="mdl-layout__drawer">
2: <span class="mdl-layout-title">Title</span>
3: <nav class="mdl-navigation">
4: <a class="mdl-navigation__link" href="">Link</a>
5: <a class="mdl-navigation__link" href="">Link</a>
6: <a class="mdl-navigation__link" href="">Link</a>
7: <a class="mdl-navigation__link" href="">Link</a>
8: </nav>
9: </div>
Das Drawer Menü klappt in jedem Format von Links in den sichtbaren Bereich.
Im nächsten Schritt werden Daten angezeigt. Dafür kommt eine HTML Tabelle zum Einsatz, die per mdl-grid und mdl-cell DIV platziert werden. Von Bootstrap oder auch Jquery mobile bekannte Badges, finden sich auch in MDL. Die class="mdl-badge" nutzt das Attribut data-badge="4” um einem Text ein optisch per Kreis markierte Infozahl zu verpassen.
Datenlisten haben oft auch die Möglichkeit, neue Datensätze zu erfassen. Der HTML Button wird dabei zu einem Kreisrunden Button mit speziellen Hover Effekten und Icon Symbolik.
1: <button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
2: <i class="material-icons">add</i>
3: </button>
Natürlich gibt es auch rechteckige Buttons, die denen von Bootstrap ähneln.
Die Google Developer haben sich offensichtlich große Mühe gegeben auch für Screenreader (Stichwort Blinde Nutzer) korrekten HTML Code zu unterstützen.
1: <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
2: <thead>
3: <tr>
4: <th class="mdl-data-table__cell--non-numeric">Firma</th>
5: <th>Ort</th>
6: <th>Plz</th>
7: </tr>
8: </thead>
9: <tbody>
10: <tr>
11: <td class="mdl-data-table__cell--non-numeric">
12: <div class="mdl-badge" data-badge="4">ppedv</div>
13: </td>
14: <td>Burghausen</td>
15: <td>84489</td>
16: </tr>
17: <tr>
18: <td class="mdl-data-table__cell--non-numeric">ppedv gmbh</td>
19: <td>Wien</td>
20: <td>1150</td>
21: </tr>
22: <tr>
23: <td class="mdl-data-table__cell--non-numeric">Microsoft</td>
24: <td>Unterschleißheim</td>
25: <td>88885</td>
26: </tr>
27: </tbody>
28: </table>
Optisches Highlight sind Formulare bzw das Verhalten der Eingabefelder. Google Maps Nutzer kennen das schon. Ein INPUT Element wird nur durch einen Unterstrich markiert. Der Labeltext befindet sich auf der Linie. Wenn die Textbox en Fokus erhält wandert animiert, das Label darüber und wird kleiner.
1: <div class="mdl-cell mdl-cell--2-col">
2: <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label textfield-demo">
3: <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample4" />
4: <label class="mdl-textfield__label" for="sample4">Number...</label>
5: <span class="mdl-textfield__error">Input is not a number!</span>
6: </div>
7: </div>
Dieses Element der UI Sprache, den etwas dickeren farbigen Unterstrich, findet man auch in der Tab Komponente wieder.
Die Tabs werden mit mdl-tabs__tab deklariert. Die Steuerung erfolgt per Href und #Hash ID’s. Leider sind deshalb auch keine Hyperlinks möglich, weil es sich um eine reine In-Page Navigation handelt.
Je Tab wird ein Panel benötigt, mit der zum Tab passenden ID.
1: <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
2: <div class="mdl-tabs__tab-bar">
3: <a href="#panel1" class="mdl-tabs__tab is-active">IT Pro</a
4: <a href="#panel2" class="mdl-tabs__tab">Developer</a>
5: <a href="#panel3" class="mdl-tabs__tab">Soft Skill</a>
6: </div>
7: <div class="mdl-tabs__panel is-active" id="panel1">
8: <ul>
9: <li>SQL Server</li>
10: <li>IIS</li>
11: <li>Windows</li>
12: <li>Exchange</li>
13: <li>Lync/Skype</li>
14: <li>TMG</li>
15: </ul>
16: </div>
17: <div class="mdl-tabs__panel" id="panel2">
18: <ul>
19: <li>ASP.NET</li>
20: <li>Webforms</li>
21: <li>Angular JS</li>
22: <li>WPF</li>
23: </ul>
24: </div>
25: <div class="mdl-tabs__panel" id="panel3">
26: <ul>
27: <li>Project</li>
28: <li>SCRUM</li>
29: </ul>
30: </div>
31: </div>
Weil das optisch ein echter Hingucker ist, wünschen sich den Unterstrich manche auch für die Hyperlinks im Navigation Menü. Technisch gesehen ist das nicht schwierig, erfordert aber eine CSS Klasse die dem aktiven Navigation Link zugewiesen werden muss,
In obigen Screenshot ist das umgesetzt (ppedv news). Die Idee dafür und der CSS Code stammt von der MDL Website. Auch dort wird der aktive Bereich so angezeigt, obwohl eigentlich nicht so vorgesehen.
Moderne Websites haben heute gerne überdimensionale Fuß Bereiche. Ursprünglich für Google Search Optimierung (SEO) erdacht, bringt man da heute eine Art alternatives Menü unter. MDL kennt zwei Varianten. Die einzeilige mit class=mdl-mini-footer und einer Linkliste per UL (mdl-mini-footer—link-list). Die zweite Variante ist mehrzeilig und mächtig.
1: <footer class="mdl-mega-footer">
2: <div class="mdl-mega-footer--middle-section">
3: <div class="mdl-mega-footer--drop-down-section">
4: <input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
5: <h1 class="mdl-mega-footer--heading">IT Pro</h1>
6: <ul class="mdl-mega-footer--link-list">
7: <li><a href="#">IIS</a></li>
8: <li><a href="#">Windows Server</a></li>
9: <li><a href="#">SQL Server</a></li>
10: <li><a href="#">Exchange</a></li>
11: </ul>
12: </div>
13: <div class="mdl-mega-footer--drop-down-section">
14: <input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
15: <h1 class="mdl-mega-footer--heading">Dev </h1>
16: <ul class="mdl-mega-footer--link-list">
17: <li><a href="#">Angular.js</a></li>
18: <li><a href="#">ASP.NET</a></li>
19: <li><a href="#">HTML5</a></li>
20: <li><a href="#">WPF</a></li>
21: </ul>
22: </div>
23: <div class="mdl-mega-footer--drop-down-section">
24: <input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
25: <h1 class="mdl-mega-footer--heading">Managment</h1>
26: <ul class="mdl-mega-footer--link-list">
27: <li><a href="#">Scrum</a></li>
28: <li><a href="#">Project</a></li>
29: <li><a href="#">Power Pivot</a></li>
30: <li><a href="#">Sharepoint</a></li>
31: </ul>
32: </div>
33: <div class="mdl-mega-footer--drop-down-section">
34: <input class="mdl-mega-footer--heading-checkbox" type="checkbox" checked>
35: <h1 class="mdl-mega-footer--heading">FAQ</h1>
36: <ul class="mdl-mega-footer--link-list">
37: <li><a href="#">Questions</a></li>
38: <li><a href="#">Answers</a></li>
39: <li><a href="#">Contact us</a></li>
40: </ul>
41: </div>
42: </div>
43: <div class="mdl-mega-footer--bottom-section">
44: <div class="mdl-logo">Title</div>
45: <ul class="mdl-mega-footer--link-list">
46: <li><a href="#">Help</a></li>
47: <li><a href="#">Privacy & Terms</a></li>
48: </ul>
49: </div>
50: </footer>
Man fragt sich was die Checkboxen im HTML Code sollen? Diese dienen dazu bei Small Devices (Smartphone) die Bereiche aufklappbar darzustellen.
Fazit:
Was soll man dazu sagen? Noch ein UI Framework. dazu recht unausgegoren aber mit modernen Style. Alternative sind Modern UI Bootstrap Themes, die aber nicht ganz die Funktion bringen können.