Beschreibung

Responsive Webdesign – Best Practice Workflow

1. Einleitung
1.1        Motivation
1.1.1      Wie verändern neue Endgeräte den Aufbau von Webseiten?
1.1.2      Die Entwicklung des mobilen Web
1.1.3      Besuchererlebnisse auf verschiedenen Endgeräten
1.1.4      Leistungsmerkmale und Erwartungen
1.2          Problemstellung
1.2.1      Wie verändert sich der Webentwicklungsprozess für Agenturen?
1.2.2      Wie werden Betreiber in den Entwicklungsprozess eingebunden?
1.2.3      Kann auch der Besucher in den Entwicklungsprozess integriert werden?
1.3          Zielsetzungen
1.3.1      Aufbau eines erfolgreichen Workflows bei der Entwicklung von Responsive Webdesign für Agenturen.
1.3.2      Aufzeigen, wie der Betreiber aktuell und idealerweise in den Entwicklungsprozess integriert wird.
1.3.3      Lösungsansatz für die Integration von Besuchern in den Entwicklungsprozess.
1.4          Aufbau und Methodik

2. Den Besucher und seine Bedürfnisse erkennen
2.1          Strategieebene – Besucherbedürfnisse
2.2          Umfangsebene – Funktionsspezifikationen / Inhaltsanforderungen
2.3          Strukturebene – Interaktionsdesign / Informationsarchitektur
2.4          Rasterebene – Informationsdesign
2.5          Oberflächenebene – Sensorisches Design

3. Techniken für die Umsetzung von mobilen Webseiten
3.1          Mobile Apps (Applikationen) – Anwendungsprogramme
3.1.1      Native Apps
3.1.2      Web Apps
3.2          Eigenständige, mobile Webseiten
3.3          Webseiten mit Responsive Webdesign
3.4          Zusammenfassung und Modellwahl

4. Was ist Responsive Webdesign?
4.1          Eine Webseite ist kein Papier und das Internet kein Buch
4.2          Responsive Webdesign – Die Veränderung in der Webentwicklung
4.2.1      Besucherkontext
4.2.2      Arbeiten mit flexiblen Gestaltungsrastern
4.2.3      Media Query, ein Modul aus der CSS3 Spezifikation
4.2.4      Progressive Enhancement und Mobile First

5. Modelle und Entwicklungsprozess-Analogien
5.1          Wasserfallmodell
5.1.1      Traditionelle Webentwicklung nach dem Wasserfallmodell
5.2          Spiralmodell kombiniert mit Prototypen
5.3          Agiler Webentwicklungsprozess nach dem Spiralmodell
5.4          Zusammenfassung und Prozesswahl
5.4.1      Gegenüberstellung der beiden analysierten Prozessmodelle

6. Der neue Entwicklungsprozess für Responsive Webdesign – Best Practice Workflow
6.1          Bausteine für den agilen Prozess in der Webentwicklung
6.2          Strategie, Planung und Analyse-Prozess
6.2.1      Planungsphase
6.2.2      Webseitenanalyse
6.2.3      Contentplanung – Inhaltsinventar
6.2.4      Suchmaschinenoptimierung
6.2.5      Funktionalitäten
6.2.6      Informationsarchitektur
6.2.7      Zusammenfassung
6.3          Sketch – Prototyp – Design – Test – Optimierung – Performance-Prozess
6.3.1      Sketch Design mit Inhalt
6.3.2      Definition der Breakpoints
6.3.3      Prototype Mockup im Browser
6.3.4      Testphase Prototyp 1 – Browser Mockup Screenshots
6.3.5      Webseitendesign
6.3.6      Umsetzung in HTML5 und CSS3
6.3.7      Testphase Prototyp 2 – Browser Screenshots Responsive Webdesign
6.3.8      Aufbau der Testumgebung
6.3.9      Testphase Prototyp 3 – Responsive Webdesign im Browser Desktop & Mobile
6.3.10    Testphase Prototyp 4 – Responsive Webdesign Usability und Accessability
6.3.11    Testphase Prototyp 5 – Final Browser Desktop und Mobile A/B Tests
6.3.12    Zusammenfassung
6.4          Launch Webseite – Webanalyse – Controlling
6.4.1      Design Guidelines
6.4.2      Betreibertraining
6.4.3      Implementierung Analytics und Zielvorgaben
6.4.4      Controlling
6.4.5      Zusammenfassung

7.Schlussfolgerungen / Ausblick

Abbildungsverzeichnis

• Tabellenverzeichnis

• Literaturverzeichnis – Responsive Webdesign – Best Practice Workflow