MEET MAGENTO 2013-06-04 00001110 SlideRESPONSIVE DESIGN
RESPONSIVE DESIGN
FLEXIBEL UND WANDELBAR
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 2
ALLE AUF
EINEN STREICH.
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 3
Beim Responsive Webdesign handelt es sich um einen
gestalterische...
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
DIE TECHNISCHE BASIS
1. Fluid Grid
!
Das Layout, liegt einem
Spalte...
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 5
WELCHE AUSPRÄGUNGEN SIND
INNERHALB VON RESPONSIVE
DESIGN BEKANNT?
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
FLUID
pullandbear.com
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
COLUMN DROP
pinterest.com
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
OFF CANVAS
nixon.com
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
LAYOUT SHIFTING
truereligionbrandjeans.com
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 10
WELCHE RAHMENBEDINGUNGEN
SOLLTEN BEI EINER RESPONSIVE
DESIGN LÖS...
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
RAHMENBEDINGUNGEN
RESPONSI
VE
DESIGN
BANDBREITE
FRONTEND-
PERFORMAN...
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 12
WAS SIND DIE BESONDEREN
HERAUSFORDERUNGEN
INNERHALB VON RESPONSI...
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
HERAUSFORDERUNGEN
RESPONSI
VE
DESIGN
GESTENSTEUERUNG
MULTILEVEL
NAV...
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 14
WAS SIND DIE BEST PRACTICES
AM MARKT?
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
BEST PRACTICES
Burton Pull & Bear Zalando-Lounge True Religion Suit...
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 16
UND WAS HAT COMMERCE PLUS
DAZU BEIZUTRAGEN ;-)
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
OLSEN ONLINE SHOP (PITCH)
KONZEPT, DESIGN
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
TORQUATO ONLINE SHOP
KONZEPT, DESIGN & UMSETZUNG
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
BAYER SIGN AGAINST STROKE
KONZEPT, DESIGN & UMSETZUNG
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
DOLE.DE MARKEN WEBSITE
UMSETZUNG
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
HAWESKO ONLINE SHOP
KONZEPT, DESIGN
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 22
!
MOBILE IST KEINE FRAGE MEHR,
ABER WELCHES IST FÜR MICH DIE
RIC...
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
EVALUATION
Desktop + Mobile Web-Lösung Responsive Webdesign Native ...
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
EVALUATION
Bei der Evaluation zwischen
einer separaten Mobile Site
...
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 25
WELCHE HILFSMITTEL KÖNNEN BEI
DER ENTSCHEIDUNGS-FINDUNG
UNTERSTÜ...
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
WEB ANALYTICS & RESEARCH
/ Webanalyse auswerten
/ Vergleichen: Mobi...
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 27
OK, RESPONSIVE DESIGN IT IS.
WAS SIND DIE NÄCHSTEN
SCHRITTE?
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
BROWSERDEFINITION
FRAGESTELLUNG
/ Auf welche Browser wird konkret o...
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
BREAKPOINTS
Ein Responsive Design
basiert auf sogenannten
Breakpoin...
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
BREAKPOINT-AUSWAHL
Empfohlenes Breakpoint Set
/ Smartphone Portrait...
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
CONTENT HIERARCHIE
Bei der Priorisierung des Contents sollten folge...
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
CONTENT HIERARCHIE
Smartphone Tablet Desktop TV...
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
VERZAHNUNG DES ENTWICKLUNGSPROZESSES
MEET MAGENTO 2013-06-04 00001110 SlideRESPONSIVE DESIGN 34
Moritz Koch
Managing Director


Commerce Plus GmbH

Schäferkamp...
Nächste SlideShare
Wird geladen in …5
×

Responsive Design - flexibel und wandelbar

842 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Design
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
842
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
7
Aktionen
Geteilt
0
Downloads
9
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Responsive Design - flexibel und wandelbar

  1. 1. MEET MAGENTO 2013-06-04 00001110 SlideRESPONSIVE DESIGN RESPONSIVE DESIGN FLEXIBEL UND WANDELBAR
  2. 2. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 2 ALLE AUF EINEN STREICH.
  3. 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. 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).
  5. 5. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 5 WELCHE AUSPRÄGUNGEN SIND INNERHALB VON RESPONSIVE DESIGN BEKANNT?
  6. 6. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 FLUID pullandbear.com
  7. 7. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 COLUMN DROP pinterest.com
  8. 8. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 OFF CANVAS nixon.com
  9. 9. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 LAYOUT SHIFTING truereligionbrandjeans.com
  10. 10. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 10 WELCHE RAHMENBEDINGUNGEN SOLLTEN BEI EINER RESPONSIVE DESIGN LÖSUNG BEACHTET WERDEN?
  11. 11. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 RAHMENBEDINGUNGEN RESPONSI VE DESIGN BANDBREITE FRONTEND- PERFORMANCE BROWSER- FÄHIGKEITEN USECASES AUFLÖSUNGEN RETINA, HD ENDGERÄTE
  12. 12. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 12 WAS SIND DIE BESONDEREN HERAUSFORDERUNGEN INNERHALB VON RESPONSIVE DESIGN?
  13. 13. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 HERAUSFORDERUNGEN RESPONSI VE DESIGN GESTENSTEUERUNG MULTILEVEL NAVIGATION CONTENT- HIERARCHIE LAYER WERBEMITTEL TABELLEN IFRAMES FILTER FORMULARE
  14. 14. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 14 WAS SIND DIE BEST PRACTICES AM MARKT?
  15. 15. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 BEST PRACTICES Burton Pull & Bear Zalando-Lounge True Religion Suitsupply Indochino A Book Apart Joop Skinny Ties Strellson
  16. 16. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 16 UND WAS HAT COMMERCE PLUS DAZU BEIZUTRAGEN ;-)
  17. 17. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 OLSEN ONLINE SHOP (PITCH) KONZEPT, DESIGN
  18. 18. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 TORQUATO ONLINE SHOP KONZEPT, DESIGN & UMSETZUNG
  19. 19. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 BAYER SIGN AGAINST STROKE KONZEPT, DESIGN & UMSETZUNG
  20. 20. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 DOLE.DE MARKEN WEBSITE UMSETZUNG
  21. 21. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 HAWESKO ONLINE SHOP KONZEPT, DESIGN
  22. 22. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 22 ! MOBILE IST KEINE FRAGE MEHR, ABER WELCHES IST FÜR MICH DIE RICHTIGE ANTWORT?
  23. 23. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 EVALUATION Desktop + Mobile Web-Lösung Responsive Webdesign Native App
  24. 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.
  25. 25. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 25 WELCHE HILFSMITTEL KÖNNEN BEI DER ENTSCHEIDUNGS-FINDUNG UNTERSTÜTZEN?
  26. 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?
  27. 27. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 27 OK, RESPONSIVE DESIGN IT IS. WAS SIND DIE NÄCHSTEN SCHRITTE?
  28. 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. 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.
  30. 30. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 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)
  31. 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?
  32. 32. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 CONTENT HIERARCHIE Smartphone Tablet Desktop TV...
  33. 33. SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 VERZAHNUNG DES ENTWICKLUNGSPROZESSES
  34. 34. MEET MAGENTO 2013-06-04 00001110 SlideRESPONSIVE DESIGN 34 Moritz Koch Managing Director 
 Commerce Plus GmbH
 Schäferkampsallee 16
 20357 Hamburg
 
 T +49 40 248 28 701
 M +49 160 972 90 939
 
 www.commerce-plus.com
 moritz.koch@commerce-plus.com

×