SlideShare ist ein Scribd-Unternehmen logo
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
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
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).
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ÖSUNG BEACHTET
WERDEN?
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
RAHMENBEDINGUNGEN
RESPONSI
VE
DESIGN
BANDBREITE
FRONTEND-
PERFORMANCE
BROWSER-
FÄHIGKEITEN
USECASES
AUFLÖSUNGEN
RETINA, HD
ENDGERÄTE
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 12
WAS SIND DIE BESONDEREN
HERAUSFORDERUNGEN
INNERHALB VON RESPONSIVE
DESIGN?
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
HERAUSFORDERUNGEN
RESPONSI
VE
DESIGN
GESTENSTEUERUNG
MULTILEVEL
NAVIGATION
CONTENT-
HIERARCHIE
LAYER
WERBEMITTEL
TABELLEN
IFRAMES
FILTER
FORMULARE
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 Suitsupply
Indochino A Book Apart Joop Skinny Ties Strellson
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
RICHTIGE ANTWORT?
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110
EVALUATION
Desktop + Mobile Web-Lösung Responsive Webdesign Native App
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.
SlideMEET MAGENTO 2013-06-04RESPONSIVE DESIGN 00001110 25
WELCHE HILFSMITTEL KÖNNEN BEI
DER ENTSCHEIDUNGS-FINDUNG
UNTERSTÜTZEN?
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?
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 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
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.
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)
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?
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ä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

Weitere ähnliche Inhalte

Andere mochten auch

Semana 22
Semana 22Semana 22
Semana 22
colegiommc
 
Metamorfosis del creyente en Cristo
Metamorfosis del creyente en CristoMetamorfosis del creyente en Cristo
Metamorfosis del creyente en Cristo
Carmen Nereira
 
Magazin E! Energiewende Baden-Württemberg
Magazin E! Energiewende Baden-WürttembergMagazin E! Energiewende Baden-Württemberg
Magazin E! Energiewende Baden-Württemberg
Melanie Peschel
 
Presentacion de vicentinas2014 editable (1)
Presentacion de vicentinas2014   editable (1)Presentacion de vicentinas2014   editable (1)
Presentacion de vicentinas2014 editable (1)
Voluntariado A IC
 
Fachveranstaltung Mobile Business Insights – Wie erreichen wir unseren Kunden...
Fachveranstaltung Mobile Business Insights – Wie erreichen wir unseren Kunden...Fachveranstaltung Mobile Business Insights – Wie erreichen wir unseren Kunden...
Fachveranstaltung Mobile Business Insights – Wie erreichen wir unseren Kunden...
Namics
 
Taller1 "FORTALECIÉNDONOS COMO ORGANIZACIÓN "
Taller1 "FORTALECIÉNDONOS COMO ORGANIZACIÓN "Taller1 "FORTALECIÉNDONOS COMO ORGANIZACIÓN "
Taller1 "FORTALECIÉNDONOS COMO ORGANIZACIÓN "
Yesi IP
 
Presentacion musica
Presentacion musicaPresentacion musica
Presentacion musica
Daniel Bolaños Nvz
 
Cédulas inteligentes en Panamá
Cédulas inteligentes en PanamáCédulas inteligentes en Panamá
Cédulas inteligentes en Panamá
Carmen Nereira
 
Keynote Studip Zukunftsworkshop
Keynote Studip ZukunftsworkshopKeynote Studip Zukunftsworkshop
Keynote Studip Zukunftsworkshop
Ralf Stockmann
 
Trevall àsia
Trevall àsiaTrevall àsia
Trevall àsiasomelsde6
 
Camilita
CamilitaCamilita
Camilita
Yamilled Garcia
 
2015 Domingo XV T.O.
2015 Domingo XV T.O.2015 Domingo XV T.O.
2015 Domingo XV T.O.
Voluntariado A IC
 
Semana23
Semana23Semana23
Semana23
colegiommc
 
treffn erklärt
treffn erklärttreffn erklärt
treffn erklärt
treffn
 
Sistemas de-informacion11
Sistemas de-informacion11Sistemas de-informacion11
Sistemas de-informacion11
oreanass
 
Gesundheit und Tourismus am Beispiel der Ferienwelt Winterberg
Gesundheit und Tourismus am Beispiel der Ferienwelt WinterbergGesundheit und Tourismus am Beispiel der Ferienwelt Winterberg
Gesundheit und Tourismus am Beispiel der Ferienwelt Winterberg
FerienweltWinterberg
 

Andere mochten auch (18)

Semana 22
Semana 22Semana 22
Semana 22
 
Metamorfosis del creyente en Cristo
Metamorfosis del creyente en CristoMetamorfosis del creyente en Cristo
Metamorfosis del creyente en Cristo
 
Die berge von osterreich
Die berge von osterreich Die berge von osterreich
Die berge von osterreich
 
Magazin E! Energiewende Baden-Württemberg
Magazin E! Energiewende Baden-WürttembergMagazin E! Energiewende Baden-Württemberg
Magazin E! Energiewende Baden-Württemberg
 
Presentacion de vicentinas2014 editable (1)
Presentacion de vicentinas2014   editable (1)Presentacion de vicentinas2014   editable (1)
Presentacion de vicentinas2014 editable (1)
 
Niemeicki
NiemeickiNiemeicki
Niemeicki
 
Fachveranstaltung Mobile Business Insights – Wie erreichen wir unseren Kunden...
Fachveranstaltung Mobile Business Insights – Wie erreichen wir unseren Kunden...Fachveranstaltung Mobile Business Insights – Wie erreichen wir unseren Kunden...
Fachveranstaltung Mobile Business Insights – Wie erreichen wir unseren Kunden...
 
Taller1 "FORTALECIÉNDONOS COMO ORGANIZACIÓN "
Taller1 "FORTALECIÉNDONOS COMO ORGANIZACIÓN "Taller1 "FORTALECIÉNDONOS COMO ORGANIZACIÓN "
Taller1 "FORTALECIÉNDONOS COMO ORGANIZACIÓN "
 
Presentacion musica
Presentacion musicaPresentacion musica
Presentacion musica
 
Cédulas inteligentes en Panamá
Cédulas inteligentes en PanamáCédulas inteligentes en Panamá
Cédulas inteligentes en Panamá
 
Keynote Studip Zukunftsworkshop
Keynote Studip ZukunftsworkshopKeynote Studip Zukunftsworkshop
Keynote Studip Zukunftsworkshop
 
Trevall àsia
Trevall àsiaTrevall àsia
Trevall àsia
 
Camilita
CamilitaCamilita
Camilita
 
2015 Domingo XV T.O.
2015 Domingo XV T.O.2015 Domingo XV T.O.
2015 Domingo XV T.O.
 
Semana23
Semana23Semana23
Semana23
 
treffn erklärt
treffn erklärttreffn erklärt
treffn erklärt
 
Sistemas de-informacion11
Sistemas de-informacion11Sistemas de-informacion11
Sistemas de-informacion11
 
Gesundheit und Tourismus am Beispiel der Ferienwelt Winterberg
Gesundheit und Tourismus am Beispiel der Ferienwelt WinterbergGesundheit und Tourismus am Beispiel der Ferienwelt Winterberg
Gesundheit und Tourismus am Beispiel der Ferienwelt Winterberg
 

Ähnlich wie Responsive Design - flexibel und wandelbar

Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website
Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen WebsiteMobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website
Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website
André Goldmann
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
Sven Wolfermann
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
denkwerk GmbH
 
Mobile SEO Grundlagen
Mobile SEO GrundlagenMobile SEO Grundlagen
Mobile SEO Grundlagen
André Goldmann
 
Kleiner Blick auf CSS3
Kleiner Blick auf CSS3Kleiner Blick auf CSS3
Kleiner Blick auf CSS3
Jens Grochtdreis
 
Digital Media Night - Responsive Web Design
Digital Media Night - Responsive Web DesignDigital Media Night - Responsive Web Design
Digital Media Night - Responsive Web Design
Virtualtrends
 
Microfrontends zur Rettung - Frontends auf Anwendungsebene modularisieren
Microfrontends zur Rettung - Frontends auf Anwendungsebene modularisierenMicrofrontends zur Rettung - Frontends auf Anwendungsebene modularisieren
Microfrontends zur Rettung - Frontends auf Anwendungsebene modularisieren
Mark Lubkowitz
 
Responsive Design | Fluid | Mobile
Responsive Design | Fluid | MobileResponsive Design | Fluid | Mobile
Responsive Design | Fluid | Mobile
CS2 AG
 
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & WordpressWP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
KirstenSchelper
 
Webinar: Responsive Design
Webinar: Responsive DesignWebinar: Responsive Design
Webinar: Responsive Design
kuehlhaus AG
 
Responsive Tracking - DC13
Responsive Tracking - DC13Responsive Tracking - DC13
Responsive Tracking - DC13
Henry Zeitler
 
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014  (de)datenwerk Kochbuch: Webdesign- Trends 2014  (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk innovationsagentur
 
Mobile friendly websites on SMX 2016
Mobile friendly websites on SMX 2016Mobile friendly websites on SMX 2016
Mobile friendly websites on SMX 2016
André Goldmann
 
Voquz IT Solutions Unternehmenspräsention
Voquz IT Solutions UnternehmenspräsentionVoquz IT Solutions Unternehmenspräsention
Voquz IT Solutions Unternehmenspräsention
Voquz Group
 
Responsive Design by Peter Grosskopf
Responsive Design by Peter GrosskopfResponsive Design by Peter Grosskopf
Responsive Design by Peter Grosskopf
Peter Grosskopf
 
CIS mobile Die mobile Anwendung für Ihr Vertriebsteam
CIS mobile Die mobile Anwendung für Ihr VertriebsteamCIS mobile Die mobile Anwendung für Ihr Vertriebsteam
CIS mobile Die mobile Anwendung für Ihr Vertriebsteam
Pascal Dequito
 
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...fabianmoritz
 
Conversionoptimierung durch Verbindung von E-Commerce und Content Elementen
Conversionoptimierung durch Verbindung von E-Commerce und Content ElementenConversionoptimierung durch Verbindung von E-Commerce und Content Elementen
Conversionoptimierung durch Verbindung von E-Commerce und Content Elementen
Stephan Sigloch
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
Conny Stier
 

Ähnlich wie Responsive Design - flexibel und wandelbar (20)

Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website
Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen WebsiteMobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website
Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
 
Mobile SEO Grundlagen
Mobile SEO GrundlagenMobile SEO Grundlagen
Mobile SEO Grundlagen
 
Kleiner Blick auf CSS3
Kleiner Blick auf CSS3Kleiner Blick auf CSS3
Kleiner Blick auf CSS3
 
Digital Media Night - Responsive Web Design
Digital Media Night - Responsive Web DesignDigital Media Night - Responsive Web Design
Digital Media Night - Responsive Web Design
 
Microfrontends zur Rettung - Frontends auf Anwendungsebene modularisieren
Microfrontends zur Rettung - Frontends auf Anwendungsebene modularisierenMicrofrontends zur Rettung - Frontends auf Anwendungsebene modularisieren
Microfrontends zur Rettung - Frontends auf Anwendungsebene modularisieren
 
Responsive Design | Fluid | Mobile
Responsive Design | Fluid | MobileResponsive Design | Fluid | Mobile
Responsive Design | Fluid | Mobile
 
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & WordpressWP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
 
Webinar: Responsive Design
Webinar: Responsive DesignWebinar: Responsive Design
Webinar: Responsive Design
 
Responsive Tracking - DC13
Responsive Tracking - DC13Responsive Tracking - DC13
Responsive Tracking - DC13
 
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
datenwerk Kochbuch: Webdesign- Trends 2014  (de)datenwerk Kochbuch: Webdesign- Trends 2014  (de)
datenwerk Kochbuch: Webdesign- Trends 2014 (de)
 
Mobile friendly websites on SMX 2016
Mobile friendly websites on SMX 2016Mobile friendly websites on SMX 2016
Mobile friendly websites on SMX 2016
 
Voquz IT Solutions Unternehmenspräsention
Voquz IT Solutions UnternehmenspräsentionVoquz IT Solutions Unternehmenspräsention
Voquz IT Solutions Unternehmenspräsention
 
Responsive Design by Peter Grosskopf
Responsive Design by Peter GrosskopfResponsive Design by Peter Grosskopf
Responsive Design by Peter Grosskopf
 
CIS mobile Die mobile Anwendung für Ihr Vertriebsteam
CIS mobile Die mobile Anwendung für Ihr VertriebsteamCIS mobile Die mobile Anwendung für Ihr Vertriebsteam
CIS mobile Die mobile Anwendung für Ihr Vertriebsteam
 
Responsive Design Whitepaper
Responsive Design WhitepaperResponsive Design Whitepaper
Responsive Design Whitepaper
 
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
 
Conversionoptimierung durch Verbindung von E-Commerce und Content Elementen
Conversionoptimierung durch Verbindung von E-Commerce und Content ElementenConversionoptimierung durch Verbindung von E-Commerce und Content Elementen
Conversionoptimierung durch Verbindung von E-Commerce und Content Elementen
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 

Responsive Design - flexibel und wandelbar