Responsive-Webdesign-Tutorial (Vorwort, Einleitung, Kapitel 1, 2, 3, 4, 5, 6, 7, 8, 9, 10)

Vorgehensweise bei der Entwicklung

Bevor es an die Entwicklung der Prototypen in Kapitel 4 bis 8 geht, erläutert dieser Abschnitt noch wichtige Design-Prinzipien und -Abläufe.

4.1. „Mobile First“ vs. „Desktop First“

Es gibt zwei konkurrierende Ansichten und Vorgehensweisen bei der Entwicklung einer reaktionsfähigen Webseite. Bei „Desktop First“ wird mit der Desktop-Ansicht gestartet (könnte etwa eine bestehende Webseite sein) und diese in eine reaktionsfähige Variante umgewandelt. Von der gewöhnlichen Größe ausgehend (z.B. 960 Pixel Breite) wird für kleinere und größere Auflösungen entwickelt und getestet.

Bei einem neuen Projekt steht auch der Ansatz „Mobile First“ zur Verfügung, wo bei der kleinsten Auflösung (geringste Breite) begonnen wird. Dieser „kleinste gemeinsame Nenner“ soll dabei helfen, auf die wichtigsten Inhalte und Funktionen zu fokussieren, was auch eine schlankere (weniger überladene) Desktop-Ansicht bringen soll.

Gründe für „Mobile First“ können sein:

• Mehr mobile Geräte in Zukunft:
  Smartphones und Tablets werden beliebter und könnten für viele sogar Hauptzugangs-Gerät zum Internet werden. Zahlreiche Käufe im Internet werden von mobilen Endgeräten getätigt (wichtig für Online-Shops).
• Konzentration auf das Wesentliche:
  Weniger Bildschirmfläche (und Platz) zwingt die Beteiligten dazu, sich die wichtigsten Business-Ziele und Inhalte einer Website genauer zu überlegen.
• Zusätzliche Features von mobilen Geräten:
  Funktionen wie Ortsbestimmung sind im Desktop-Bereich nicht (oder oft nicht so exakt) möglich.
• Progressive Enhancement:
  „Mobile First“ entspricht der Vorgehensweise von Progressive Enhancement, wo schrittweise die Funktionalität erweitert wird (mit Fähigkeiten des Webbrowsers¹Ein simples Beispiel sind runde Ecken mit der CSS-Eigenschaft border-radius. Wird sie von einem Webbrowser unterstützt, zeigt dieser abgerundete Ecken an. Falls nicht, gewöhnliche Ecken. Mit den Fähigkeiten des Browser (Progressive Enhancement) wird das Design schöner bzw. die Webseite bietet mehr Funktionen. In jedem Fall bleibt der Inhalt aber zugänglich.).
• Mobiler Kontext und technische Limitationen:
  Mobilfunknetze haben oft – noch – einen geringeren Datendurchsatz und höhere Latenzzeiten (als Festnetz-Verbindungen), die Geräte weniger Rechenleistung als am Desktop. Hinzu kommt der Nutzungskontext bzw. die Umstände, unter denen eine Website aufgerufen wird (Zeitdruck, Lichteinfall). Von – als Folge – schnellen Ladezeiten, Klarheit und Übersicht profitiert selbst die größere Desktop-Ansicht.

4.2. Abläufe, Entwicklung und Tests

Zillgens empfiehlt in seinem Buch folgenden – auf Responsive Webdesign abgestimmten – Ablauf bei der Entwicklung einer Website:

1. Planen:
   
   Die wichtigsten Inhalte (Struktur) und Funktionalität werden geplant.
2. Prototyp entwickeln:
   
   Der Entwickler erstellt einen ersten HTML-Dummy, Basis ist die linearisierte Form der Inhalte.
   Gestalten:
   
   Parallel – oder zuvor – arbeitet der Designer an ersten Gestaltungsentwürfen (für die grundlegenden Elemente).
3. Wiederholen und Testen:
   
   In mehreren Zyklen arbeiten Entwickler und Designer zusammen und verbessern schrittweise einzelne Bereiche. Währenddessen wird die Webseite auf zahlreichen Bildschirmgrößen (und Geräten / Browsern) getestet.
4. Ausliefern
   
   Sind alle Anforderungen erfüllt (und der Auftraggeber zufrieden), wird das Projekt abgeschlossen bzw. produktiv geschaltet.



Vorheriges Kapitel

Nächstes Kapitel