Responsive Design - flexibel und wandelbar

MEET MAGENTO 2013-06-04 00001110 SlideRESPONSIVE DESIGN

RESPONSIVE DESIGNFLEXIBEL UND WANDELBAR

SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 !2

ALLE AUF EINEN STREICH.


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

http://de.wikipedia.org/wiki/Website

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).

http://www.goldengridsystem.com/


WELCHE AUSPRÄGUNGEN SIND INNERHALB VON RESPONSIVE DESIGN BEKANNT?


FLUID

pullandbear.com


COLUMN DROP

pinterest.com


OFF CANVAS

nixon.com


LAYOUT SHIFTING

truereligionbrandjeans.com


WELCHE RAHMENBEDINGUNGEN SOLLTEN BEI EINER RESPONSIVE DESIGN LÖSUNG BEACHTET WERDEN?


RAHMENBEDINGUNGEN

RESPONSIVE

DESIGN

BANDBREITEFRONTEND-

PERFORMANCE

BROWSER- FÄHIGKEITEN

USECASES

AUFLÖSUNGEN

RETINA, HD

ENDGERÄTE


WAS SIND DIE BESONDEREN HERAUSFORDERUNGEN INNERHALB VON RESPONSIVE DESIGN?


HERAUSFORDERUNGEN

RESPONSIVE

DESIGN

GESTENSTEUERUNG

MULTILEVEL NAVIGATION

CONTENT- HIERARCHIE

LAYER

WERBEMITTELTABELLEN

IFRAMES

FILTER

FORMULARE


WAS SIND DIE BEST PRACTICES AM MARKT?


BEST PRACTICES

Burton Pull & Bear Zalando-Lounge True Religion Suitsupply

Indochino A Book Apart Joop Skinny Ties Strellson


UND WAS HAT COMMERCE PLUS DAZU BEIZUTRAGEN ;-)


OLSEN ONLINE SHOP (PITCH) KONZEPT, DESIGN


TORQUATO ONLINE SHOP KONZEPT, DESIGN & UMSETZUNG


BAYER SIGN AGAINST STROKE KONZEPT, DESIGN & UMSETZUNG


DOLE.DE MARKEN WEBSITE UMSETZUNG


HAWESKO ONLINE SHOP KONZEPT, DESIGN


!

MOBILE IST KEINE FRAGE MEHR, ABER WELCHES IST FÜR MICH DIE RICHTIGE ANTWORT?


EVALUATION

Desktop + Mobile Web-Lösung Responsive Webdesign Native App


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.


WELCHE HILFSMITTEL KÖNNEN BEI DER ENTSCHEIDUNGS-FINDUNG UNTERSTÜTZEN?


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?


OK, RESPONSIVE DESIGN IT IS. WAS SIND DIE NÄCHSTEN SCHRITTE?


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


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.


BREAKPOINT-AUSWAHL

Empfohlenes Breakpoint Set

/ Smartphone Portrait (320)

/ Tablet Portrait (768)

/ Tablet Landscape/ Desktop Minor (1000)

/ Desktop Standard (1280)

Optionale Breakpoints

/ Smartphone Landscape (480)

/ Hires Desktop (1440)

/ HD Dektop/TV (1920)


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?


CONTENT HIERARCHIE Smartphone Tablet Desktop TV...


VERZAHNUNG DES ENTWICKLUNGSPROZESSES

MEET MAGENTO 2013-06-04 00001110 SlideRESPONSIVE DESIGN !34

Moritz Koch Managing Director Commerce Plus GmbH Schäferkampsallee 16 20357 HamburgT +49 40 248 28 701 M +49 160 972 90 939 www.commerce-plus.com [email protected]

http://www.sinnerschrader.de

mailto:[email protected]?subject=

Responsive Design - flexibel und wandelbar

Design

Transcript of Responsive Design - flexibel und wandelbar