Kategorien
Design UI/UX

Rapid Prototyping mit dem Foundation-Framework

Webdesigner kennen das Problem. Der Kunde will schon in einem frühen Stadium etwas Vorzeigbares und auch Bedienbares sehen. Da reicht kein Bild, das aus Photoshop oder anderen Grafiksoftwares exportiert wurde. Er will was zu klicken haben, was im Übrigen völlig verständlich ist. Foundation kann den Webdesigner bei diesem Problem unterstützen. Denn es ist tatsächlich relativ schnell möglich, damit mehr als nur ein Mockup zu erstellen.

Vergleich des Beispiels auf dem IPhone und einem normalen Browser

Am Besten probiert man das natürlich selber aus und wir wären nicht Dr.Web, wenn wir nicht zufällig ein Beispiel parat hätten. Um dieses Beispiel nachvollziehen zu können, benötigt man Foundation. Dieses laden Sie bitte von der Download-Seite herunter, wobei Sie sich auch gleich Ihre Wunsch-Konfiguration zusammenstellen könnten. Nachdem Foundation runtergeladen ist, öffnen Sie bitte die mitgelieferte index.html und löschen jegliches Beispiel-Markup aus dem Body-Bereich, sprich: Der Bereich zwischen body und /body ist jetzt leer..

Eine Beispiel-Website entsteht

In unserem Beispiel geht es darum, eine Startseite für ein Unternehmen zu erstellen. Basierend auf dem Prinzip: „Make things as simple as possible, but not simpler“ wollen wir eine einfache, strukturierte Webseite mit klaren Handlungsanweisungen für den User erstellen.

Beginnen wir mit der Navigation. Diese wird in diesem Beispiel den Namen des Unternehmens tragen und vier Navigationspunkte haben. In der Navigationsleiste ganz rechts sollte man sich noch anmelden können. Auf eine Suche verzichten wir zunächst. Das Anmeldefenster sollte sich in einem Modal öffnen und die Möglichkeit bieten, eine Kundennummer und ein Passwort einzugeben. Außerdem benötigen wir einen Button zum Absenden des Formulars und einen Button, wenn man das Passwort vergessen hat.

Zuerst wird die Struktur der Navigation aufgebaut:

<div class="row">
  <div class="twelve columns">
    <nav class="top-bar">
      <ul>
        <li class="name"><h1><a href="#">Title</a></h1></li>
        <li class="toggle-topbar"><a href="#"></a></li>
      </ul>
      <section>
        <ul class="left">
          <li><a href="#">Startseite</a></li>
          <li><a href="#">Produkte</a></li>
          <li><a href="#">Unternehmen</a></li>
          <li><a href="#">Kontakt</a></li>
        </ul>

        <ul class="right">
          <li><a href="#" data-reveal-id="loginModal">Anmelden</a></li>
        </ul>
      </section>
    </nav>
  </div>
</div>

Zunächst legen wir ein umschließendes div mit der Klasse row an, welches ein 12 Spalten großes Div beinhaltet. Dort befindet sich die Navigation mit der Klasse top-bar. Der Rest ist eigentlich ziemlich selbsterklärend. Die Navigationspunkte neben dem Titel sind links angeordnet und haben daher die Klasse left. Der Punkt „Anmelden“ soll ganz rechts in der Navigationsleiste stehen und bekommt noch das data-Attribut data-reveal-id, welches man gleich für das Modal-Fenster zum Anmelden benötigt.

 

Foundation Navigation
Foundation Navigation

 

Dieses Modal besteht im Grundgerüst aus einem Div mit einer eindeutigen ID, über die das Modal später aufgerufen werden kann und einer Klasse reveal-modal, damit das Framework weiß, dass der Inhalt des Div Teil eines Modals ist. Im Modal wird eine h3-Überschrift angelegt, danach das Formular für Passwort und Kundennummer.

<div id="loginModal" class="reveal-modal">
    <h3>Login</h3>
    <div class="row">
        <div class="two mobile-one columns">
            <label class="right inline"><div class="hide-for-small">Kundennr.:</div><div class="show-for-small">KNR:</div> </label>
        </div>
        <div class="ten mobile-three columns">
            <input type="text" placeholder="000000" class="eight" />
        </div>
    </div>
    <div class="row">
        <div class="two mobile-one columns">
            <label class="right inline"><div class="hide-for-small">Passwort:</div><div class="show-for-small">PW:</div> </label>
        </div>
        <div class="ten mobile-three columns">
            <input type="text" class="eight" />
        </div>
    </div>
    <div class="row">
        <div class="two mobile-one columns">

        </div>
        <div class="ten mobile-three columns">
            <input type="submit" class="button small success">
            <a href="#" class="button small alert">Passwort vergessen ?</a>
        </div>
    </div>
</div>

Damit die Formulare auch auf mobilen Browser gut aussehen und bedienbar sind, braucht man ein paar Anpassungen. Das Label bekommt hier die zusätzlich die Klasse mobile-one und die Felder die Klasse mobile-three, damit diese auch auf dem mobilen Browser nebeneinander existieren. Dadurch entsteht aber der Effekt, dass sich Label und Eingabefeld überschneiden auf einige Geräten. Dafür nutzt man die Klassen show-for-small und hide-for-small, um für mobile Geräte Kurzfassungen der Labels anzeigen zu können. Das sollte man allerdings noch optimieren, würde aber hier den Rahmen sprengen. Zu beachten ist noch, dass das Markup für das Modal aus Performance-Gründen immer am Ende des Quellcodes im body-Bereich stehen sollte.

Foundation Login Modal
Foundation Login Modal

Damit ist die Gestaltung der Navigation und des LogIn abgeschlossen und wir kümmern uns um den Bereich mit Logo und Slider. Hier soll ein prominentes und daher großes Logo links vom Slider entstehen. Als Bildersatz verwende ich im Beispiel den Dienst von placehold.it, über den wir bei Dr. Web hier ausführlich berichteten.

Foundation Slider und Logo
Foundation Slider und Logo

Für diesen Bereich baut man ein Grid aus einem 4 und einem 8 Spalten großen Element auf. Im Element mit der Größe 4 wird das Logo platziert, hier einfach als img-Tag ausgeführt, und im größeren Element wird sich der Slider wiederfinden. Das Ganze wird von einem row-Div umschlossen.

Der Slider ist so aufgebaut, dass er nur ein Div mit der Klasse featured benötigt, in welchem die jeweiligen Bilder definiert werden. Also alles ziemlich unkompliziert gehalten. Das Logo sollte man bei mobilen Geräten ausblenden, da es sonst zu viel Platz wegnimmt. Alternativ könnte man eine kleinere Grafik einbinden. Das fertige Markup kann dann zum Beispiel so aussehen:

<div class="row">
    <div class="four columns hide-for-small">
        <img src="http://www.placehold.it/283x248&text=Firmenlogo" />
    </div>
    <div class="eight columns">
        <div id="featured">
            <img src="http://www.placehold.it/1200x500&text=slide" />
            <img src="http://www.placehold.it/1200x500&text=slide" />
            <img src="http://www.placehold.it/1200x500&text=slide" />
        </div>
    </div>
</div>

Im abschließenden Inhaltsbereich sollte sich ein Einführungstext und darunter zwei kleinere Texte befinden. Außerdem kommt noch eine Sidebar dazu, mit Markenzeichen der Partner.

Foundation Content
Foundation Content

Dazu bauen wir einfach wieder ein Div mit der Klasse row. Darin sollte ein Div mit 8 und ein Div mit 4 Spalten enthalten sein. Im Div mit 8 Spalten werden die Texte platziert. Dieser wird wiederum mit 2 Divs der Klasse row verschachtelt. Im ersten wird ein Grid mit nur einer Spalte von der Größe 12 angelegt und im zweiten ein Grid mit 2 gleich großen Spalten, also jeweils mit der Größe 6.

Die jeweiligen Spalten kann man nun mit Inhalt befüllen. Im Beispiel verwende ich eine h3-Überschrift und einen Absatz mit Text, der 50 Wörter lang ist.

In der Sidebar mit der Größe von 4 Spalten wird nun ganz simpel eine Überschrift integriert und darunter 4 Bilder mit der passenden Größe. Das Ergebnis kann beispielhaft so aussehen:

<div class="row">
    <div class="eight columns">
        <div class="row">
            <div class="twelve columns"><h3>Willkommen<small> auf unserer Seite</small></h3><p>Lorem ipsum dolor sit amet,
                consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
                gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div>
        </div>
        <div class="row">
            <div class="six columns"><h3>Willkommen<small> auf unserer Seite</small></h3><p>Lorem ipsum dolor sit amet,
                consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
                gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div>
            <div class="six columns"><h3>Willkommen<small> auf unserer Seite</small></h3><p>Lorem ipsum dolor sit amet,
                consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
                gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div>
        </div>
    </div>
    <div class="four columns">
        <h3>Unsere Partner</h3>
        <img src="http://www.placehold.it/300x100&text=Partnerlogo" />
        <img src="http://www.placehold.it/300x100&text=Partnerlogo" />
        <img src="http://www.placehold.it/300x100&text=Partnerlogo" />
        <img src="http://www.placehold.it/300x100&text=Partnerlogo" />
    </div>
</div>

Was jetzt noch fehlt, sind, neben der Optimierung, um eine gewisse Performance zu gewährleisten, zum Beispiel ein Fußbereich mit weiteren Informationen. Aber das sollte man nun anschließend problemlos selbst bewältigen können.

Vergleich des Beispiels auf dem IPhone und einem normalen Browser
Vergleich des Beispiels auf dem iPhone und in einem normalen Browser

Die Ergebnisse der Seite sehen auf verschieden Geräten doch schon annehmbar und auch vorzeigbar für einen Kunden aus. Zumindest ist das meine subjektive Ansicht. Und viel Zeit beansprucht das Ganze auch nicht wirklich. Foundation ist offenbar auf dem Wege, seine Beliebtheit und Verbreitung weiter zu steigern.

(dpe)

Von Sven Schannak

ist ein leidenschaftlicher Web-Entrepreneur, freiberuflicher Web-Entwickler und stolzer Coding-Monkey.

4 Antworten auf „Rapid Prototyping mit dem Foundation-Framework“

Schreibe einen Kommentar zu Olafson Antworten abbrechen

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