In diesem dreiteiligen Blogbeitrag zeigen wir euch, wie man ‚from scratch‘ eine einfache responsive Webseite erstellt. Im ersten Teil wird die Erstellung der Webapp mit dem Framework Twitter Bootstrap demonstriert. Anschließend, im zweiten und dritten Teil dieser Blogserie, optimieren wir die Webanwendung für eine Offline-Verwendung.
Ausgangspunkt für unsere mobile Webseite ist das folgende Szenario: In einem Beispielunternehmen gibt es einen Fuhrpark, der regelmäßig erfasst werden soll. Die Kennzeichen der Fahrzeuge müssen erfassbar sein. Eine Datenbankanbindung ist jedoch vorerst nicht eingeplant.
Im ersten Schritt fertigen wir ein Mockup an, das die Webseite kurz skizziert. Um schnell Mockups zu zeichnen, eignet sich zum Beispiel Microsoft Word mit seinen Zeichenwerkzeugen.
Als nächstes stellen wir sicher, dass auf unserem Rechner die notwendigen Entwicklungswerkzeuge installiert sind. Für die Erstellung dieser Webseite verwenden wir hier Microsoft Visual Studio 2013 in Verbindung mit Google Chrome und dem RIPPLE Plugin zum Testen für das mobile Web.
In Visual Studio 2013 erstellen wir als Projekt eine neue ASP.NET Empty Web Application und importieren die notwendigen Bibliotheken, also Twitter Bootstrap (3.2.0) und JQuery (2.1.1). Wenn es darum geht, eine möglichst leichtgewichtige und vorrangig mobile Webseite zu erstellen, würde ich zu Zepto.js anstatt von JQuery raten. Das Framework hat die exakt gleiche Funktionalität wie JQuery und ist um einiges kleiner, funktioniert aber nur in modernen Browsern, wie dem Internet Explorer 10+.
Die folgende Grafik zeigt die grundlegende Projektstruktur in Visual Studio:
In der Default.html Webseite werden im <head> Bereich die Dateien bootstrap.min.css und die Datei styles.css geladen und vor dem schließenden </body> Tag, die notwendigen JavaScript-Dateien. Im <head> Bereich wird weiter der Metatag Viewport für die Webanwendung gesetzt, um ein optimales Rendering und Zoomverhältnis auf dem Client zu ermöglichen.
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no" />
Das Framework Bootstrap, aus dem Hause Twitter, unterstützt seit der Version 2.0 Entwickler bei der Erstellung von responsiven Webseiten, also der Webentwicklung für unterschiedlichste Auflösungen. Die einzelnen Seitenabschnitte Kopfzeile, Erfassungsmaske und Listenausgabe werden in <div> Elemente eingehüllt, die von Twitter Bootstrap mittels CSS-Klassen bearbeitet werden.
<div class="container-fluid">
<!-- Weitere Elemente -->
</div>
Twitter Bootstrap stellt außerdem eine Vielfalt an Controlls und Grafiken zur Verfügung. Das folgende Codebeispiel zeigt exemplarisch einen Button im Formular:
<button class="btn btn-success" type="submit"><span
class="glyphicon glyphicon-plus"></span></button>
Tabellen können auch mit Twitter Bootstrap responsiv gestaltet werden. Dafür muss einfach das entsprechende Class-Element im HTML angefügt werden.
<div class="table-responsive">
<table class="table table-striped">
<!-- Tablehead und Tablebody -->
</table>
</div>
Die fertige responsive Webanwendung kann schließlich mit dem RIPPLE Plugin in Google Chrome getestet werden. Dazu einfach aus Visual Studio 2013 die Webanwendung mit Google Chrome starten, das Plugin aktivieren und die gewünschte Zielplattform z.B. iPhone 5 wählen und lostesten!
Der Sourcecode für diesen ersten Teil der Blogserie kann auf JSFiddle genauer analysiert werden:
http://jsfiddle.net/KonstantinK/zzuzjfyr/
In Teil 2 und Teil 3 analysieren wir für euch die Offline-Fähigkeit in einer Webanwendung etwas genauer. Sie möchten mehr zu Responsive Design mit CSS und Bootstrap erfahren? Dann sind Sie bei diesem Responsive Design Training richtig.