Responsive-Webdesign-Tutorial
Erstellung einer beispielhaften Unternehmenswebsite - Anforderungen an die Prototypen
Um die (neuen) Möglichkeiten, die Responsive Webdesign bietet, aufzeigen zu können, wird im Rahmen von Kapitel 5 bis 8 eine Website in drei verschiedenen Varianten entwickelt und vorgestellt. Die fertigen Prototypen können online unter Prototypen eingesehen und ausprobiert werden.
Bevor mit der Entwicklung begonnen wird, werden die Anforderungen und der Projektrahmen definiert:
- Fiktiver Auftraggeber ist ein Kleinunternehmen (nicht im Sinne des UStG) aus dem Bereich der Fotografie mit 1-3 Mitarbeitern. Der Auftraggeber möchte ein sehr simples und übersichtliches Design, das gleichzeitig einen seriösen Eindruck auf potentielle Kunden macht.
- Die fiktive Website besteht aus der Startseite und etwa 5-10 Unterseiten. Diese bestehen aus Text und einigen Bildern sowie einem Kontaktformular. Daneben gibt es die Bildergalerie, wo das Unternehmen sein Foto-Portfolio vorstellt.
- Im Rahmen der Arbeit wird die Startseite, eine Unterseite („Dienstleistungen“, reiner Text) und eine Bildergalerie mit Dummy-Bildern entwickelt und gezeigt.
- Da weitere Unterseiten keinen Mehrgewinn in der Erklärung bringen würden, wird darauf verzichtet. Gleiches gilt für das Kontaktformular, das ebenfalls nur vom Hauptthema („Responsive Webdesign“) ablenken würde. Dem interessierten Leser sei die Lektüre der neuen Möglichkeiten von HTML5 im Zusammenhang mit Formularen nahe gelegt.
- Die Layouts könnten leicht in ein Content-Management-System (z.B. Joomla 3.x) bzw. in ein dafür angepasstes Template überführt werden. Das CMS in dieser Arbeit in Grundzügen zu erklären, würde allerdings den Rahmen sprengen. Daneben werden nur sehr wenige Features benötigt, insb. das Menüsystem und das Editieren der Artikel im Backend mit einem WYSIWYG-Editor. Deshalb wurde auf die Umsetzung mit einem CMS verzichtet und die Prototypen enthalten statische Webseiten, deren HTML-Codes sich in nur wenigen Punkten unterscheidet (Seitentitel, Überschriften, Menü-Hervorhebung). Der Leser kann sich so leichter auf das Wesentliche (Änderungen in den Stylesheets / CSS) konzentrieren.
- Das fiktive Unternehmen legt großen Wert darauf, dass die zukünftige Website gut auf mobilen Endgeräten funktioniert. Auch wird vermutet, dass viele mögliche Kunden mit Mobiltelefonen oder „auf dem Sofa“ mit Tablet-PCs nach einem Fotografen suchen („Wo kann ich in nächster Umgebung Passbilder anfertigen lassen?“, „Wer fotografiert meine Hochzeit?“). Die Website muss also auch mit kleineren Auflösungen (Mobiltelefon) gut zurecht kommen.
- Der Auftraggeber stellt es dem Auftragnehmer frei, eine passende technische Lösung zu wählen („Responsive“ ist nicht Pflicht), er möchte aber genau über die Vor- und Nachteile (aus Sicht der Firma und des Endkunden) informiert werden (was in Kapitel 9 erläutert wird).
Für die Arbeit (bzw. den fiktiven Auftragnehmer) ergibt sich nun folgender Schluss: Ausgangspunkt bietet ein klassisches starres 960px-Layout, das in Kapitel 6 vorgestellt wird (= Prototyp A). Um speziell mobile Geräte anzusprechen, wird zusätzlich Prototyp B entwickelt, der eine Abwandlung von A ist und ein starres Layout für eine geringere Bildschirmbreite darstellt (Kapitel 7). Zu A und B gehört noch eine simple PHP-Browserweiche (Abschnitt 7.3), die den HTTP-User-Agent auswertet und dementsprechend zu A oder B weiterleitet. Prototyp A, Prototyp B und die Browserweiche gehören zusammen und bilden die erste Lösungsmöglichkeit. Welche Vor- und Nachteile das mit sich bringt, wird in Kapitel 9 gezeigt.
Eine alternative Lösungsmöglichkeit (Kernthema dieser Arbeit) zeigt Prototyp C. Dieser beinhaltet ein reaktionsfähiges („responsive“) Layout, das beides vereint und gleichzeitig auf kleinen und großen Displays gut funktioniert (Kapitel 8). Es wird jeweils gezeigt, wie die Vorgehensweise bei der Entwicklung aussieht, wichtige Passagen des Quellcodes werden erklärt und welche Überlegungen dahinter stecken.
| Vorheriges Kapitel | Nächstes Kapitel |