Responsive Webdesign mit Foundation

DemoDownload

Es gibt immer mehr Menschen die das Internet auch Mobil mit ihrem Smartphone nutzen.
Um sich als Webmaster auf diese neue Zielgruppe einzustellen braucht man eine Website die auf mobile Endgeräte zugeschnitten ist und sich auch ohne nerviges hin und her Scrollen intuitv bedienen lässt.
Den Ansatz den die meisten angehen ist es für Smartphones und Tablets eine eigene Website unter einer Subdomain zu betreiben und diese auf die kleinen Bildschirmgrößen optimieren.
Die meisten großen Portale (facebook,twitter,spiegel online, chip online etc.) gehen das Problem auf diese Weise an. Allerdings ist es ein ziemlich großer Aufwand zwei Websites gleichzeitig zu Pflegen.

Damit man diesen Aufwand eben nicht hat kann man auf sog. Responsive Webdesign zurückgreifen, d.h. die Website passt sich automatisch der Bildschirmgröße an und Versteckt eventuell zu große Inhalt oder ähnliches.
Ein schönes Beispiel dafür ist dieser Blog. Wenn man das Browserfenster soweit verkleinert dass es ungefähr der Größe eines Tablets oder Smartphones entspricht, verschwindet das Menü und wird durch einen Navigieren-Button ersetzt.
Außerdem ist die Seitenleiste jetzt unter dem Inhalt angebracht und der Inhalt des Footers ist untereinander angeordnet anstatt nebeneinander. Wer ein Smartphone oder Tablet hat kann auch von diesem einfach mal auf T-Jark.de zugreifen und es sich anschauen. Man merkt es schnell: Es ist wesentlich angenehmer. Nur wie realisiere ich mit möglichst einfach Responsive Webdesign? Hierfür gibt es ein sehr Praktisches CSS Framework: Foundation.

Die Einbindung von Foundation

Die einbindung von Foundation ist, wie bei den meisten Frameworks, denkbar einfach. Man muss einfach das Komplette Dateipaket von Zurb.com runterladen und sämtliche .js und .css-Dateien einbinden welche in den Ordnern zu finden sind. Bei mir sieht das ganze so aus kann bei euch aber wegen der Verzeichnisstruktur abweichen 😉

    <link rel="stylesheet" href="foundation/stylesheets/foundation.css" type="text/css" />
    <link rel="stylesheet" href="foundation/stylesheets/app.css" type="text/css" />
    <script language="javascript" type="text/javascript" src="foundation/javascripts/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="foundation/javascripts/jquery.placeholder.js"></script>
    <script language="javascript" type="text/javascript" src="foundation/javascripts/foundation.min.js"></script>
    <script language="javascript" type="text/javascript" src="foundation/javascripts/app.js"></script>
    <script language="javascript" type="text/javascript" src="foundation/javascripts/jquery.foundation.alerts.js"></script>
    <script language="javascript" type="text/javascript" src="foundation/javascripts/jquery.foundation.accordion.js"></script>
    <script language="javascript" type="text/javascript" src="foundation/javascripts/jquery.foundation.buttons.js"></script>
    <script language="javascript" type="text/javascript" src="foundation/javascripts/jquery.foundation.clearing.js"></script>
    <script language="javascript" type="text/javascript" src="foundation/javascripts/jquery.foundation.forms.js"></script>
    <script language="javascript" type="text/javascript" src="foundation/javascripts/jquery.foundation.joyride.js"></script>
    <script language="javascript" type="text/javascript" src="foundation/javascripts/jquery.foundation.magellan.js"></script>
    <script language="javascript" type="text/javascript" src="foundation/javascripts/jquery.foundation.magellan.js"></script>
    <script language="javascript" type="text/javascript" src="foundation/javascripts/jquery.foundation.mediaQueryToggle.js"></script>
    <script language="javascript" type="text/javascript" src="foundation/javascripts/jquery.foundation.navigation.js"></script>
    <script language="javascript" type="text/javascript" src="foundation/javascripts/jquery.foundation.orbit.js"></script>
    <script language="javascript" type="text/javascript" src="foundation/javascripts/jquery.foundation.reveal.js"></script>
    <script language="javascript" type="text/javascript" src="foundation/javascripts/jquery.foundation.tabs.js"></script>
    <script language="javascript" type="text/javascript" src="foundation/javascripts/jquery.foundation.tooltips.js"></script>
    <script language="javascript" type="text/javascript" src="foundation/javascripts/jquery.foundation.topbar.js"></script>
    <script language="javascript" type="text/javascript" src="foundation/javascripts/modernizr.foundation.js"></script>
    <script language="javascript" type="text/javascript">$(document).foundation();</script>

Damit steht einem das komplette Foundation-Framework sowie einige mitgelieferte Plugins zur verfügung.

Das Prinzp von Foundation

Das Prinzip von Foundation ist relativ einfach zu verstehen: Das Seitenlayout wird auf einem normalem Bildschirm in zwölf gleichgroße Spalten aufgeteilt, bei kleineren Bildschirmen, also mobilen Geräten in vier. Das gesamte Layout der Website basiert auf diesen 12 bzw. 4 Spalten. Wenn man also ein Layout mit drei gleichgroßen Spalten realisieren möchte muss jede dieser Spalten 4 der von Foundation mitgelieferten Spalten enthalten. Das gesamte Layout wird bei Foundation lediglich durch die Verwendung von festgelegten CSS-Klassen gesteuert.

<div class="row">
     <div class="show-for-small mobile-two columns">
     Das hier erscheint nur auf kleinen Bildschirmen 🙂
     </div>
     <div class="four mobile-two columns">
     Das ist sowohl auf großen als auch auf kleinen Bildschirmen sichtbar 🙂
     Auf großen Bildschirmen ist diese Spalte vier Spalten des Rasters breit.
     Auf kleinen 2.
     </div>
     <div class="four mobile-two columns">
     Supertoller Inhalt
     </div>
     <div class="four mobile-two columns">
     weiterer supertoller inhalt
     </div>
  </div>

Anhand dieses Beispiels lässt sich die Funktionsweise von Foundation gut erklären: Jedes der drei Div’s stellt eine Spalte des oben Besprochenen Layouts dar. Durch die zuweisung der Klasse four weiß Foundation dass jedes der Div’s 4 Spalten des Foundation-Rasters einnehmen soll. Das heißt um die Breite eines Elements im Layout zu bestimmen kann man einfach die Zahl an Raster-Spalten als Klasse angeben. Dazu noch die Klasse coloums und Foundation erledigt den Rest. Doch wofür dient die Klasse mobile-two? Ganz einfach: Sie gibt die Breite ds Div’s im mobilen Layout an. Das Prinzip ist genau das gleiche, nur dass beim mobilen Layout eben nur 4 mitgelieferte Spalten von Foundation zur Verfügung stehen und vor die ausgeschriebene, englische Zahl noch ein mobile- kommt. Das ganze als Klasse einsetzen und Foundation stellt das Layout dementsprechend dar. Jede ‚Zeile‘ im Layout wird bei Foundation von einem weiteren Div mit der Klasse row umhüllt. raster Da man bei Founation das komplette Layout der Website mit CSS-Klassen steuert gibt es unmengen an mitgelieferten Klassen. Hier habe ich mal die wichtigsten mit Beschreibung als Kommentar aufgeschrieben:

/* Die Sichtbarkeits-Klassen */
.show-for-small       /* Sichtbar bis zu 768px Bildschirmbreite */
.show-for-medium-down /* Sichtbar ab 1280px Breite und kleiner*/
.show-for-medium      /* Sichtbar zwischen 768px und 1280px Breite */
.show-for-medium-up   /* Sichtbar ab 1280px und Breiter */
.show-for-large-down  /* Sichtbar ab 1440px Breite und kleiner */
.show-for-large       /* Sichtbar zwischen 1280px und 1440px Breite*/
.show-for-large-up    /* Sichtbar ab 1440px Breite und größer*/
.show-for-xlarge      /* Sichtbar ab 1440px Breite */

/* Die hidden-Klassen */
.hide-for-small       /* Nicht sichtbar bis zu einer Breite von 768px */
.hide-for-medium-down /* Ab 1280px und kleiner nicht sichtbar */
.hide-for-medium      /* Zwischen 768px und 1280px nicht Sichtbar*/
.hide-for-medium-up   /* Ab 1280px und breiter nicht sichtbar */
.hide-for-large-down  /* Ab 1440px und kleiner nicht Sichtbar */
.hide-for-large       /* Hidden between 1280px and 1440px */
.hide-for-large-up    /* Ab 1440px und größer unsichtbar */
.hide-for-xlarge      /* Unsichtbar ab größer als 1440px */

/* Die 'Orientierungs'-Klassen */
.show-for-landscape   /* Sichtbar für landscape orientierung(handy quer gehalten wird) */
.show-for-portrait    /* Sichtbar für portrait orientierung(handy hochkant gehalten */
.hide-for-landscape   /* Unsichtbar für landscape orientierung */
.hide-for-portrait    /* Unsichtbar für portrait orientierung */

/* The touch detection classes */
.show-for-touch       /* Sichtbar für geräte mit Touch-Bedienung */
.hide-for-touch       /* Unsichtbar für geräte mit Touch-Bedienung*/

Ich hoffe damit ist die grundsätzliche Funktionsweise von Foundation klar 🙂 Wenn nicht könnt Ihr mich auch gerne via E-Mail oder Kommentar fragen 😉

Die verschiedenen PlugIns

Ein wirklich tolles Feature von Foundation sind die vielen mitgelieferten PlugIns für diverse Praktische Dinge, die natürlich alle Responsive sind 😉

Top-Bar Navigation

Mit der Top-Bar Navigation von Foundation ist es sehr einfach eine schöne Navigation zu Bauen welche man auch auf Touchgeräten gut bedienen kann. Wie eigentlich alle Navigationen baut die Top-Bar auf einer unsortierten Liste auf die durch CSS/Javascript gestaltet wird. Bei Foundation passiert dies wie gewöhnlich durch die Vergabe von vordefinierten Klassen. Die Liste kann beliebig viele Verschachtelungen haben. Hier ein Beispiel mit dem ich die wichtigsten Klassen erkläre:

<nav class="top-bar">
  <ul class="title-area">
    <!-- Title Area -->
    <li class="name">
      <h1><a href="#">Top Bar Titel </a></h1>
    </li>
    <!-- Die Klasse "menu-icon" entfernen um Button zu entfernen.
         Menü löschen um keinen text neben dem Button zu sehen-->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Left Nav Section -->
    <ul class="left">
      <li class="divider"></li>
      <li class="active"><a href="#">Main Item 1</a></li>
      <li class="divider"></li>
      <li><a href="#">Main Item 2</a></li>
      <li class="divider"></li>
      <li class="has-dropdown"><a href="#">Main Item 3</a>

        <ul class="dropdown">
          <li class="has-dropdown"><a href="#">Dropdown Level 1a</a>

            <ul class="dropdown">
              <li><label>Dropdown Level 2 Label</label></li>
              <li><a href="#">Dropdown Level 2a</a></li>
              <li><a href="#">Dropdown Level 2b</a></li>
              <li class="has-dropdown"><a href="#">Dropdown Level 2c</a>

                <ul class="dropdown">
                  <li><label>Dropdown Level 3 Label</label></li>
                  <li><a href="#">Dropdown Level 3a</a></li>
                  <li><a href="#">Dropdown Level 3b</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Dropdown Level 3c</a></li>
                </ul>
              </li>
              <li><a href="#">Dropdown Level 2d</a></li>
              <li><a href="#">Dropdown Level 2e</a></li>
              <li><a href="#">Dropdown Level 2f</a></li>
            </ul>
          </li>
          <li><a href="#">Dropdown Level 1b</a></li>
          <li><a href="#">Dropdown Level 1c</a></li>
          <li class="divider"></li>
          <li><a href="#">Dropdown Level 1d</a></li>
          <li><a href="#">Dropdown Level 1e</a></li>
          <li><a href="#">Dropdown Level 1f</a></li>
          <li class="divider"></li>
          <li><a href="#">See all →</a></li>
        </ul>
      </li>
      <li class="divider"></li>
    </ul>

    <!-- Right Nav Section -->
    <ul class="right">
      <li class="divider hide-for-small"></li>
      <li class="has-dropdown"><a href="#">Main Item 4</a>

        <ul class="dropdown">
          <li><label>Dropdown Level 1 Label</label></li>
          <li class="has-dropdown"><a href="#" class="">Dropdown Level 1a</a>

            <ul class="dropdown">
              <li><a href="#">Dropdown Level 2a</a></li>
              <li><a href="#">Dropdown Level 2b</a></li>
              <li class="has-dropdown"><a href="#">Dropdown Level 2c</a>

                <ul class="dropdown">
                  <li><a href="#">Dropdown Level 3a</a></li>
                  <li><a href="#">Dropdown Level 3b</a></li>
                  <li><a href="#">Dropdown Level 3c</a></li>
                </ul>
              </li>
              <li><a href="#">Dropdown Level 2d</a></li>
              <li><a href="#">Dropdown Level 2e</a></li>
              <li><a href="#">Dropdown Level 2f</a></li>
            </ul>
          </li>
          <li><a href="#">Dropdown Level 1b</a></li>
          <li><a href="#">Dropdown Level 1c</a></li>
          <li class="divider"></li>
          <li><label>Dropdown Level 1 Label</label></li>
          <li><a href="#">Dropdown Level 1d</a></li>
          <li><a href="#">Dropdown Level 1e</a></li>
          <li><a href="#">Dropdown Level 1f</a></li>
          <li class="divider"></li>
          <li><a href="#">See all →</a></li>
        </ul>
      </li>
      <li class="divider"></li>
      <li class="has-form">
        <form>
          <div class="row collapse">
            <div class="small-8 columns">
              <input type="text">
            </div>
            <div class="small-4 columns">
              <a href="#" class="alert button">Search</a>
            </div>
          </div>
        </form>
      </li>
      <li class="divider show-for-small"></li>
      <li class="has-form">
        <a class="button" href="#">Button!</a>
      </li>
    </ul>
  </section>
</nav>

Als erstes wird der Titelbereich mithilfe einer seperaten unsortierten Liste(ul) definiert, der die Klasse title-area mit auf den Weg gegeben wird. Hier kann sowohl als eigenes li-Element der Titel definiert werden der oben rechts in der Navigationsleiste erscheinen soll als auch der Text der neben dem ‚menu‘-Icon (also dem Button den man antippt um das vollständige Menü zu sehen) stehen soll. Für den Titel muss dem li-Element die Klasse name übergeben werden, für den Icon-Text menu-icon. Als nächstes kommt die eigentliche Navigation dran. Diese wird wiederrum in zwei Abschnitte unterteilt:

  1. Links ausgerichtete Menü-Elemente
  2. Rechts ausgerichtete Menü-Elemente

Die beiden Abschnitte sind wiederrum seperate Listen die beliebig viele Hirarchie-Stufen beinhalten können. Sie werden jeweils durch die Klassen left bzw. right markiert und in einen section-Tag mit der Klasse top-bar-section gehüllt. Aus verschachtelten Listen werden automatisch Dropdowns erzeugt sobald das Mutter-Element mit der Klasse has-dropdown und das ul-tag selbst mit der Klasse dropdown ausgestattet wird. Wenn man einen Trennstrich zwischen den einzelnen Menüpunkten braucht kann man diesen einfach als eigenes li-Tag mit der Klasse divider einfügen. Innerhalb des Menüs kann man alle von Foundation vordefinierten Klassen verwenden. Man kann innerhalb der Top-Bar auch Formulare einfügen, muss dann aber das li-Element welches diese beherbergt mit der Klasse has-form ausstatten.

Buttons

Die Klasse button bewirkt dass aus einem Link ein Button gemacht wird. Hier eine kurze Übersicht über die Möglichkeiten um Buttons zu gestalten:

<a href="#" class="button">Standard Button</a>
<a href="#" class="tiny button">Sehr kleiner Button</a>
<a href="#" class="small button">Kleiner Button</a>
<a href="#" class="large button">Großer Button</a>

<!-- Color Classes -->
<a href="#" class="button secondary">Secondary Button</a>
<a href="#" class="button success">Erfolg Button</a>
<a href="#" class="button alert">Alert Button</a>

<!-- Radius Classes -->
<a href="#" class="button radius">Button mit runden Ecken</a>
<a href="#" class="button round">Runder Button Button</a>

<!-- Disabled Class -->
<a href="#" class="button disabled">Disabled Button</a>

buttons

Fazit

Mit Foundation ist es sehr leicht ein Responsive Design zu erstellen. Allerdings ist es kompliziert Damit wirklich individuelle Websites zu erstellen. Viele Touchoptimierte Plugins etc. entkräften diesen Punkt aber. Alles in allem ist Foundation ein sehr Praktisches Framework. So das muss jetzt erstmal reichen 🙂 Vielleicht schreibe ich zu Foundation noch weitere Tutorials denn die Möglichkeiten sind noch lange nicht erschöpft 😉 Bei Fragen einfach über E-Mail oder Kommentare melden 🙂 lt;ul class=“dropdown“

1 Antwort

  1. 7. April 2013

    […] jeder Webmaster Gedanken darüber machen wie er seine Website mobilgerecht gestaltet. Hierfür ist Responsive Webdesign hilfreich. Wie gut es auf mobilen Geräten aussieht und ob alles klappt kann man mit Screenfly sehr […]

Kommentar verfassen