In diesem Vortrag stellt auf der Meet Magento 2013 in Leipzig stellt Moritz Koch, Managing Director von Commerce Plus, die Chancen und Herausforderungen der Umsetzung von Websites und Online Shops im Rahmen von Responsive Design vor.
Ausprägungen, Rahmenbedingungen, Herausforderungen, Best Practices und Projektbeispiele werden diskutiert. Dies als Basis für ein Tipps für den konkreten Entscheidungsprozess Mobile / Responsive Design für einen Website-Relaunch und einigen Details, die es gilt, im Rahmen der Umsetzung zu berücksichtigen.
3. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 3
Beim Responsive Webdesign handelt es sich um einen
gestalterischen und technischen Ansatz zur Erstellung
anpassungsfähiger Websites.
!
Der grafische Aufbau einer „responsiven“ Webseite erfolgt
anhand der Anforderungen des jeweiligen Gerätes, mit
dem die Seite betrachtet wird. Dies betrifft insbesondere
die Anordnung und Darstellung einzelner Elemente, wie
beispielsweise Navigationen, Seitenspalten und Texte.
RESPONSIVE DESIGN
DEFINITION WIKIPEDIA.DE
4. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
DIE TECHNISCHE BASIS
1. Fluid Grid
!
Das Layout, liegt einem
Spaltenraster zu grunde,
welches sich in realtiven Werten
(Prozent, em) an den Browser-
rahmen anpassen.
2. Media Queries
!
Media Queries ermöglichen die
Zuordnung von CSS
Formatierungen aufgrund der
Eigenschaften des verwendeten
Ausgabemediums.
3. Fluid Images
!
Fluid Images beschreibt die
Geräte spezifische Auslieferung
von Bildern (und anderen Media-
Typen).
24. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
EVALUATION
Bei der Evaluation zwischen
einer separaten Mobile Site
und einem Responsive
Design Ansatz sind
verschiedene Aspekte zu
berücksichtigen. Auch eine
Kombination beider
Lösungen ist möglich.
26. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
WEB ANALYTICS & RESEARCH
/ Webanalyse auswerten
/ Vergleichen: Mobile vs. Desktop
/ Achtung: Mobile != Mobile (Mobile isoliert nach Smartphone & Tablet)
/ Welche Auffälligkeiten existieren?
/ Wo sind die größten Unterschiede in der Nutzung?
/ Welche Endgeräte bzw. welche Auflösungen sind relevant?
/ Welche Browser sind relevant?
/ Use Cases erarbeiten
/ Welches Budget steht zur Verfügung?
28. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
BROWSERDEFINITION
FRAGESTELLUNG
/ Auf welche Browser wird konkret optimiert und getestet?
/ Für die Qualitätssicherung müssen Endgeräte & Betriebssystem festgelegt werden
(Aktuell testet C+ auf iPad 2, Nexus 7, iPhone 4S, HTC Sensation XL)
/ Achtung! Mit steigender Komplexität steigt auch der QS-Aufwand
29. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
BREAKPOINTS
Ein Responsive Design
basiert auf sogenannten
Breakpoints, die sich in
Major- und Minor-
Breakpoints gliedern lassen.
Diese werden in
Abhängigkeit von den
Usecases und den
verschiedenen Auflösungen
definiert.
31. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
CONTENT HIERARCHIE
Bei der Priorisierung des Contents sollten folgende Fragen gestellt werden:
/ Was sind die zentralen Inhalte (Aussagen, Angebote) der Seite?
/ Welche Elemente kann ich auf keinen Fall weglassen?
/ Welches sind die Bereiche, die in allen Situationen (Mobile und Desktop) ohne Abstriche
funktionieren müssen?