Eine responsive Web-App – Teil 2

Vom Wireframe zum HTML5-Konzept

Henning über Webdesign

Hat der erste Teil des Tutorials noch das Konzept unter die Lupe genommen, gilt es jetzt, aus diesem abstrakten Konstrukt etwas digital Greifbares herauszuarbeiten.

In einem ersten Schritt wird die semantische Struktur des Colorculators definiert, bevor in Schritt 2 die ersten kosmetischen Anpassungen erfolgen. Die nachfolgende Abbildung zeigt den Weg und Ziel des Tutorials…

Eine responsive Web-App – Teil 2: Vom Wireframe zum HTML5-Konzept

Der Worte sind nun genug gewechselt, los geht’s…

Das Layout

Das in Teil eins skizzierte Modell lässt sich grob in 4 Teile untergliedern:

  • Layout-Container #container
  • Header
  • Output-Felder #output
  • Input-Tasten #hexpad

Semantisch lässt sich die Struktur mit folgender HTML5 Struktur abbilden:

<section id="container">
   <header>
   ...
   </header>
   <ul id="output">
   ...
   </ul>
   <ul id="hexpad">
   ...
   </ul>
</section>

Mit dieser Struktur lässt sich der responsive Ansatz gut umsetzen. Der #container bildet die äußere Begrenzung, welche auch die Maße für die entsprechenden Ausrichtungen (landscape, portrait) vorgibt.

Sowohl Tastatur, als auch auch die Ausgabefelder entsprechen einer Baumstruktur, die als zusammenhängende Einheit dargestellt werden sollen. Solche Gefüge lassen sich mit ungeordneten Listen ul nachbilden.

Slogan, Claim und Verbindungsanzeige werden im header verpackt.

Nachdem der Rahmen spezifiziert ist, können weitere Details integriert werden, wie die einzelnen Tasten (0 nach F) und die eigentlichen Ausgabefelder. Das nachfolgende Markup entspricht dem späteren Gerüst:

<section id="container">
   <header>
      <h1>COLORCULATOR</h1>
   </header>
   <ul id="output">
      <li id="hex" class="outputfield">
         <span class="label">hex</span>
         <b>#</b>
         <span id="value"></span>
      </li>
      <li class="outputfield">
         <span class="label">rgb</span>
         <span id="rgb-value"></span>
      </li>
      <li class="outputfield">
         <span class="label">hsl</span>
         <span id="hsl-value"></span>
      </li>
      <li id="preview" class="outputfield">clear</li>
   </ul>
   <ul id="hexpad">
      <li class="number">0</li>
      <li class="number">1</li>
      <li class="number">2</li>
      <li class="number last">3</li>
      <li class="number">4</li>
      <li class="number">5</li>
      <li class="number">6</li>
      <li class="number last">7</li>
      <li class="number">8</li>
      <li class="number">9</li>
      <li>a</li>
      <li class="last">b</li>
      <li>c</li>
      <li>d</li>
      <li>e</li>
      <li class="last">f</li>
   </ul>

Die Struktur enthält schon Klassen und IDs für die späteren CSS-Zuweisungen.

CSS anflanschen

Die grobe Struktur steht, jetzt ist es an der Zeit das Layout in Form zu bringen. Noch bleiben die responsiven Features außen vor.

Reset

Um möglichst bei allen Browsern auf dem gleichen Level aufzusetzen, wird ein minimales Reset angewendet und für alle Elemente padding und margin auf 0 gesetzt.

* { margin: 0; padding: 0; }

Wer sich umfangreicher über Reset CSS Files informieren möchte, sollte mal bei Eric Mayer vorbeischauen.

Body

Der Body-Bereich spielt eine entscheidende Rolle, da hier das Fundament für die Schriftgröße gelegt wird, die im Weiteren die Basis für das responsive Design bilden wird. Wir setzen die font-size auf 100%, was in etwa einer Schriftgröße von 16px entspricht.

Weiterhin wird das CSS3 Flexible Box Model Feature verwendet, mittels dessen die vertikale Zentrierung des Colorculators vorgenommen wird. An dieser Stelle zeigt sich schon der zurzeit leider noch notwendige prefix-Horror (-moz, -webkit). JavaScript Libraries wie Prefix Free können dabei allerdings Abhilfe schaffen. In diesem Tutorial wird auf den Einsatz der Library verzichtet.

body { 
   font: 100%/1.5 "Helvetica Neue" , Helvetica, Arial, Sans-Serif; 
   background: #333; 
   -webkit-user-select: none; 
   display: -moz-box; 
   -moz-box-orient: horizontal; 
   -moz-box-pack: center; 
   -moz-box-align: center; 
   display: -webkit-box; 
   -webkit-box-orient: horizontal; 
   -webkit-box-pack: center; 
   -webkit-box-align: center; 
   display: box; 
   box-orient: horizontal; 
   box-pack: center; 
   box-align: center; 
   -webkit-box-flex: 1; 
   -moz-box-flex: 1; 
   box-flex: 1;
   max-width: 200em; 
}

Tastatur

Die HEX-Tastatur bildet das Kernelement unseres Designs. Die Ausmaße des Keypads haben Einfluss auf die weiteren Elemente. Die Optik der Liste muss ein wenig angepasst werden in dem der list-style abgedreht wird. Die Tasten (li) erhalten einen 5px margin nach rechts und unten. Die initiale Größe einer Taste beträgt 50px – Höhe und Breite. Daraus ergibt sich eine Gesamtbreite der Tastatur von 220px, da jeweils die letzte Taste keinen margin auf der rechten Seite besitzt. Mittels float:left werden die Tasten innerhalb der Liste zu Reihen à 4 Tasten angeordnet, da durch die Breite des Container-Elements von 220px nach den besagten 4 Tasten umgebrochen wird.

Um ein paar CSS3 Features auszuprobieren, bekommen die Tasten noch abgerundete Ecken mit einem Radius von 5px. Einen :hover-Effekt gibt’s auch noch dazu…

#hexpad { 
   list-style: none; 
}
#hexpad li { 
   margin: 0 5px 5px 0; 
   -moz-border-radius: 5px; 
   -webkit-border-radius: 5px; 
   border-radius: 5px; 
   text-transform: uppercase; 
   float: left; 
   text-align: center; 
   background: #444; 
   color: #fff; 
   -webkit-tap-highlight-color: #F39; 
   height: 50px; 
   width: 50px; 
   line-height: 50px;
} 
#hexpad li:hover { 
   background: #F39 !important; 
   color: #fff !important; 
   cursor: pointer; 
}
.last { 
   margin-right: 0px; 
}
.number { 
   background-color: #666; 
}

Container

Kommen wir jetzt zum Container-Element, das innerhalb der DOM eigentlich vor der Tastatur angesiedelt ist.
Nachdem die Außenmaße der Tastatur bekannt sind, wird, wie bereits beschrieben, die Breite des Containers mit der Breite der Tastatur gleichgesetzt. Die horizontale Zentrierung des Containers wird durch den auto-Wert der äußeren margins gewährleistet.

#container { 
   margin: 0 auto; 
   width: 220px; 
}

Output Felder

Die Ausgabefelder sind Listenelemente und benötigen dem entsprechend eine kleine Überarbeitung. Ebenso wie bei den Tastenfeldern wird der list-style auf none gesetzt. Da wir schon wissen, wie hoch eine Tastenreihe ist, können wir an dieser Stelle den Feldern die gleiche Höhe (50px) wie den Tasten zuweisen. Für die vertikale Zentrierung des Textes innerhalb des Feldes wird die line-height auf den selben Wert gesetzt.

#output { 
   list-style: none; 
}
.outputfield { 
   height: 50px; 
   line-height: 50px; 
   background: #fff; 
   text-align: right; 
}
.label { 
   float: left; 
   margin-left: 5px; 
   text-transform: uppercase; 
   color: #666; 
}

Eye Candy

Ein wenig Eye-Candy kann bekanntlich nichts schaden und daher wird das HEX-Feld noch mit einer umgeklappten Ecke geschmückt. Wie man einen solchen Effekt erzielt, wird im WWW sehr häufig beschrieben. Ich habe mich von einer Variante von Nicolas Gallagher inspirieren lassen.
Es ist in erster Instanz notwendig, das HEX-Feld relativ zu positionieren, um das Pseudo-Element nachher absolut positionieren zu können. Die eigenliche Ecke ist ein Pseudo-Element – :before -, das in der rechten oberen Ecke des Feldes positioniert wird. Dieses Element hat weder Höhe noch Breite. Die Magie ist ein übermäßig dicker Rahmen. Die Dicke des Rahmens hat direkten Einfluss auf die Größe der gefalteten Ecke. Der rechte Rahmen bekommt die Farbe des Hintergrundes und ist somit unsichtbar, der untere Rahmen wird in ein leichtes Grau getaucht, was ihn besser vom weißen Hintergrund des HEX-Feldes abhebt. Ein dezenter Schatten und noch den gleichen border-radius wie dem HEX-Feld zuweisen, und fertig…

#hex { 
   position: relative; 
}
#hex:before { 
   content: ""; 
   position: absolute; 
   top: 0; 
   right: 0; 
   border-style: solid; 
   background: #eee; 
   -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); 
   -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); 
   box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); 
   display: block; 
   width: 0; 
   border-width: 8px; 
   border-color: #333 #333 transparent transparent; 
   -webkit-border-bottom-left-radius: 5px; 
   -moz-border-radius: 0 0 0 5px; 
   border-radius: 0 0 0 5px; 
}

Die Hauptüberschrift (h1) wird bei dieser Gelegenheit ebenfalls noch ein wenig angepasst und in das Design integriert.

h1 { 
   font-size: 10px; 
   line-height: 32px; 
   color: #e0e0e0; 
}

Zusammenfassung und Ausblick

Das war Teil 2 der Saga und ein, noch statischer, Colorculator [Demo] ist bereits zu erkennen.

Der nächste Teil befasst sich mit dem JavaScript, das wir für die Farbkonvertierungen und die eigentlichen Funktionen des Colorculators benötigen. Ein wenig jQuery Vorkenntnisse werden vorausgesetzt.

Die Quellen des Tutorials gibt’s auf github – so, use the fork ;)

Informationen über den Autor

Henning

...ist ein User Interface und User Experience Designer. Nebenbei Frontend Developer für Web-, Desktop- und mobile Plattformen. Mit mehr als 10 Jahren professioneller Projekterfahrung schreibt er zu den Themen Webdesign, -trends und -programmierung – eben fullstack! Follow @kingfries