Responsive Webdesign – Best Practice Workflow – eBook

0.00 CHF

Responsive Webdesign
Best Practice Workflow

von Karin Hirschi

1. Auflage 2015
ISBN 978-905413-91-5

Artikelnummer: 978-3-905413-91-5 Kategorie: Schlüsselwort:

Inhaltsübersicht vom BPX-Buch

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

Autorin: Karin Hirschi, MAS in Online Marketing Management
Als Expertin in Online Marketing bringe ich Kunden aus verschiedenen Unternehmen und Branchen erfolgreich ins Internet. Langjährige Berufserfahrung in den Bereichen Marketing Strategie, Konzeption, Design und Entwicklung von Webseiten. Fachgebiete: Responsive Webdesign, Suchmaschinen Optimierung, Social Media Marketing, E-Mail Marketing

Profile von Karin Hirschi:

Website www.onlineforyou.ch
LinkedIn https://www.linkedin.com/in/karinhirschi
XING https://www.xing.com/profile/Karin_Hirschi
Google+ https://plus.google.com/u/0/+KarinHirschi_1/

Das Internet ist heute immer, ständig und überall. Trends und Zahlen verdeutlichen, wie wichtig die einheitliche Darstellung eines Unternehmens im Internet ist. Dies erfordert zugleich eine Optimierung für die verschiedenen Endgeräte und Bildschirmgrössen, denn ohne positive Erfahrung wird ein Sucher nicht zum Besucher und erst recht nie zum Kunden.
Dieses E-Book beschäftigt sich mit dem Best Practice Entwicklungsprozess für Responsive Webdesign – dem noch jungen Ansatz in der Webentwicklung. Die Fragestellung basiert auf den Aspekten:
• Wie verändert sich der Webentwicklungsprozess für Agenturen?
• Wie werden Betreiber in den Entwicklungsprozess eingebunden?
• Kann auch der Besucher in den Entwicklungsprozess integriert werden?
Ziel ist es, den Aufbau eines erfolgreichen Workflow für Agenturen bei der Entwicklung von Responsive Webdesign Webseiten aufzuzeigen und herauszuarbeiten, wo Betreiber und Besucher in den Entwicklungsprozess integriert werden können.
Im theoretischen Teil werden die Bedürfnisse der Besucher erarbeitet sowie Techniken für die Umsetzung von mobilen Webseiten und Responsive Webdesign erklärt.
Wie in der Softwareentwicklung stösst man auch bei der Entwicklung von Responsive Webdesign Webseiten nach dem traditionellen Wasserfallmodell schnell an Grenzen. Risiken werden zu spät erkannt und können nachträglich nur sehr aufwendig und kostenintensiv korrigiert werden.
Responsive Webdesign Webseiten fordern aufgrund der Komplexität ein iteratives und inkrementelles Vorgehen. Fehlerkorrekturen in der Planungsphase verursachen ca. 100mal weniger Kosten, als die Behebung in Umsetzungsphase.