Vorheriger Artikel Nächster Artikel

Responsive Webdesign kann er auch, der Werkzeugkasten Foundation 2.0

Zurb ist eine Webdesignagentur aus Kalifornien. Ursprünglich zur Beschleunigung ihrer eigenen Arbeit erschufen sie Foundation, ein Fundament für das Rapid Prototyping, aber auch das schlüsselfertige Bauen von Websites. In der Version 2.0 stellen sie es unter der MIT-Lizenz für jedermann zur kostenlosen Nutzung bereit.

Responsive Webdesign kann er auch, der Werkzeugkasten Foundation 2.0

Foundation: Enthält, was Zurb am häufigsten braucht

Foundation ist weder ein klassisches Framework, noch eine bloße Library, noch ein Boilerplate. Foundation passt in keine Schublade. Es ist ein bisschen von allem, ein Werkzeugkasten, gemacht mit dem Ziel, (Zurbs) Websitedesign rationeller zu gestalten. Dabei legten die Entwickler bei Zurb großen Wert auf die Nutzbarkeit für das Design auf möglichst vielen Geräten. Foundation kann für das genutzt werden, obschon es sich funktional dafür nicht unbedingt in den Vordergrund drängt, mithin kein Spezialist in dieser Frage ist.

Foundation: Laut Homepage auf allen Geräten mit Bildschirm daheim

Der Werkzeugkasten unterstützt die Entwicklung für die modernen Desktopbrowser, auch der Internet Exploder ist ab Version 7 mit im Boot. Die Mobilbrowser Safari und der Webkit-Browser Androids können ebenfalls mit Foundation bedient werden. Sogar der bislang nicht existente “Chrome for Android” findet sich in der Kompatibilitätsübersicht.

Erfahrene Webdesigner werden nicht an allen Stellen mit den in Foundation verfügbaren Funktionalitäten einverstanden sein. So implementiert es beispielsweise Eric Meyers Standard-Reset, eine im Großen und Ganzen bewährte Lösung, aber recht brachiale Methode, die vielfach mittlerweile durch Verfahren der Normalisierung, wie etwa im Rahmen von normalize.css ersetzt wird.

An anderen Stellen implementiert Foundation ganz konkrete Lösungen für ganz konkrete Probleme, so etwa einen jQuery-Slider namens Orbit und ein jQuery-Tool namens Reveal für die Implementation modaler Dialoge. Das ist nicht die klassische Vorgehensweise eines Framework, führt aber jedenfalls schnell zum Ziel. Zurb geht pragmatisch vor.

Foundation: Die Bestandteile in Kürze

Die Verwendung von Foundation ähnelt der Verwendung einer Boilerplate, also eines Templates für das Webdesign. Durch Modifikation der Foundation entsteht die Kundenwebsite. Im Einzelnen kümmert sich Foundation um folgende Aspekte:

Basis-Typografie

Foundation kommt mit Styles für die wesentlichen HTML-Elemente. Auch Tabellen und Navigationstabs erhalten einen sinnvoll modernen Look.

Layout-Grid

Das in Foundation verwendete Grid orientiert sich am klassischen 12 Spalten Layout und wird in ähnlicher Weise wie das 960.gs fast natürlich-sprachlich definiert. So würde man ein zweispaltiges Layout über die volle Breite mit .six.columns .six.columns definieren. Ihr erratet leicht, wie andere Kombinationen zu definieren sind. Offsets werden an die Definition gehängt, z.B. .six.columns.offset-by.three

Das Grid ist semi-liquid, also nach oben begrenzt, nach unten fluid. Dies ist ein klassischer Ansatz im responsive Webdesign. Wer sich einen Überblick über die Grundlagen verschaffen will, sollte diesen t3n-Beitrag lesen.

Spezielle CSS-Klassen können verwendet werden, um bestimmten Content nur auf bestimmten Geräten zu zeigen. Derzeit möglich ist die Verwendung von “show-on-desktops”, “show-on-tablets” und “show-on-phones”.

Sogenannte Block Grids, im Grunde UL-Elemente, sind ebenfalls im Wesentlichen für die Verwendung auf mobile Geräten geeignet. Sie lassen sich so arrangieren, dass sie die Breite des Gerätes ausnutzen, respektive sich an die Breite des Gerätes anpassen und sich bei geringster Breite übereinander stapeln.

Buttons

Foundation bringt diverse schicke Styles für Buttons mit, die sich nicht nur, aber insbesondere im mobilen Webdesign ausnehmend gut machen. Die Verwendung der Buttonstyles ist grundsätzlich out of the box gedacht, kann aber nach Belieben angepasst werden.

Foundation: Die "nice" Buttons

Formulare

Die Herangehensweise gefällt mir. Formularfelder werden mit Klassen ausgestattet, die natürlich-sprachlich die Länge des Feldes definieren, so etwa

<input type="text" class="small input-text" />

Feldvalidation wird ebenso über Klassen gesteuert. Das Labeling ist inline möglich. Die Definitions-Syntax erlernt man in weniger als zwei Minuten.

Reveal und Orbit: jQuery-Plugins im Bundle

Reveal ist ein, auch separat erhältliches jQuery-Plugin für die Implementation modaler Dialogfenster. Als modal bezeichnet man ein Fenster, wenn es nach seiner Initiierung, etwa als Popoup, den sonstigen Inhalt überlagert und erst wieder freigibt, wenn eine Aktion innerhalb des Dialogfensters ausgeführt wurde. Das von Zurb entwickelte Plugin ist mit 1,75 kb sehr klein und wie die anderen Bereiche der Foundation einfach zu implementieren.

Foundation: Bestandteil Reveal, auch separat erhältliches jQuery-Plugin

Auch Orbit, das Slider-Plugin, in der Foundation, steht separat für die Nutzung via jQuery bereit. Das 4kb große Plugin folgt dem Konzept der einfachen, fast natürlichsprachlichen Implementation der anderen Bestandteile der Foundation.

Foundation-Bestandteil Orbit, ein schicker jQuery-Slider

Wem die ganze Zeit schon der Firmenname Zurb im Ohr klingelt, dem kann geholfen werden. Zurb machte vor einiger Zeit mit dem jQuery-Plugin Raptorize von sich reden.

Fazit: Foundation ist im Grunde ein solider Startpunkt für eine moderne Website, wenn man sich auf die Konventionen der Entwickler einlassen will. Sicherlich ist mit dem Produkt schnell eine Website erstellt. Ein Prototyp lässt sich in kürzester Zeit bauen. Auf der anderen Seite verleitet Foundation zu einem bestimmten Designstil, der sich an den Möglichkeiten des Produkts orientiert und weniger an den eigenen kreativen Ideen oder den Bedürfnissen des Kunden. Verfechter von mehr Vielfalt im Web werden sich von daher weniger mit Foundation anfreunden können.

Die aktuellen News auf t3n zum Thema:

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Eine Antwort
  1. von Jens am 22.10.2011 (09:54 Uhr)

    tolles Tool, werd ich auf jeden Fall probieren! Danke

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Responsive Webdesign
Grid – Eine einfache Einführung in Responsive Webdesign
Grid – Eine einfache Einführung in Responsive Webdesign

Willst du schnell den Einstieg in Responsive Webdesign finden oder die Basics auffrischen? Mit diesem Tutorial ist beides kein Problem. » weiterlesen

t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“
t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“

Möchte man für unterschiedliche Geräte anpassungsfähige Websites erstellen, ist „Responsive Webdesign“ das Stichwort. Um sich damit vertraut zu machen, ist Designern und Entwicklern das Buch … » weiterlesen

Responsive Webdesign verkaufen: So sieht der optimale Workflow aus
Responsive Webdesign verkaufen: So sieht der optimale Workflow aus

Mit „Responsive Webdesign“ werden oft nur die technischen Komponenten in Verbindung gebracht – wie Breakpoints, Responsive Images und progressive Enhancement. Kein Wunder, dass RWD-Projekte zum … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 37 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen