SlideShare ist ein Scribd-Unternehmen logo
Responsive OXID Shops
Ressourcen sparen, Umsätze steigern
Überblick
1. Ausgangslage
2. Vorraussetzungen
3. Herausforderungen und Kompromisse
4. Responsive Frameworks
5. Beispielhafte Umsetzungen
6. Responsive meets OXID
7. SEO, SEA und Tracking
8. Ressourcen & Umsätze
7. Ausblick
RESPONSIVE?
■ Desktop-Shops auf Smartphones:
"Alter Wein in neuen Schläuchen"
■ Klassische Shops gehen an mobiler
Realität vorbei
■ Native Shop-Apps werden kaum
akzeptiert/genutzt und bedürfen
Schnittstellen-Entwicklung
■ Mobile Templates: Redundanzen
und Nachteile in allen Bereichen
Ausgangslage
■ HTML & CSS3: Basis für moderne
Umsetzungen
■ CSS3 Media Queries bilden das
Breakpoint-Grundgerüst
■ JavaScript Bibilotheken erweitern den
Funktionsumfang hin zu einer Web-App
■ Idealerweise:
Verzicht auf ältere Browser (< IE9)
■ Keine Angst vor komplexeren HTML
Strukturen
Vorraussetzungen
■ Das Gestaltungsraster (Grid) erlebt seine Wiedergeburt
■ Konzeptionelles Vorgehen: Layouts sind Pflicht!
■ Skalierbare und erfassbare Inhalte (Text, Bild, Media)
Herausforderungen und Kompromisse
■ Rapid Prototyping
■ Copy & Paste essentieller
Funktionen und Elemente
■ Qualitätssicherung durch
Strukturvorgaben (HTML Grid)
■ Mobility Klassen (Visibility) und
Breakpoints
■ Browser- und Testsicherheit
Responsive Frameworks
Zurb
Foundation
Skeleton
Zentrale Features S
Tools/Components
Flexible Mobile Grids
Ordering Syntax
Block Grids
Visibility Klassen
Touch (z.B.: Swipe)
Bootstrap vs Foundation
Yeti FTW
Basic Responsiveness
"Responsive on the go"
ellapaul.de
Advanced Responsiveness
"Responsive Concepts"
art-mobil-shop.de
Full Responsiveness
"Responsive Transformers"
emmas-enkel.de
■ Erweitern der OXID Templates um
Responsive-Strukturen
■ OXID Standard: Beibehaltung des
Klassen und ID-Konstruktes
■ Proportional identische Bildformate
(Einsatz von oxEqualizer möglich)
■ JS-Kompatibilität zwischen OXID jQuery
und dem Framework
■ Umbau "absolute" positionierter Elemente
Responsive meets OXID
■ Hover-Bedienelemente > Klick-/Tap-Elemente
■ Das Lazy Loading verhält sich anders, "onscroll"
wird später gefeuert
■ "unmobile" Payments ausschließen
○ Visibility-Klasse
○ User-Agent Kontrolle
■ Üblicher Performance-Guide
○ Reduktion und Kompression JavaScript
○ Reduktion und Kompression CSS
○ HTML sparen
Responsive meets OXID
■ Ganzehitliches Tracking:
Analyse über Viewports und OS
■ Google-Empfehlung für Mobile:
Responsive!
■ Größere HTML-Strukturen wirken
sich nicht zwingend negativ aus
■ Ausspielung unterschiedlicher
Anzeigenformate über z.B. Adwords
SEO, SEA, Tracking
Ressourcen & Umsätze
WIN-WIN
■ Einsparung eines mobilen
Templatesatzes
■ Ganzheitlicher (kürzerer!)
Entwicklungsstrang für Agentur und
Shopbetreiber
■ Steigerung der Conversion durch
komfortable Checkout-Prozesse
■ Zukunftssichere, weil
geräteunabhängige Basis
Ressourcen & Umsätze
skinnyties.com
■ iPhone Umsatz + 377.6%
■ iPhone Conversion + 71.9%
■ Alldevice Umsatz + 42.4%
■ Alldevice Conversion + 42.4%
■ Bounce Rate - 23.2%
Umsatz & Conversion
nach Umstieg auf Responsive
■ OXID Ökosystem im Umschwung zu
responsive Frameworks
■ Natives OXID Template?
■ WBL "Azurb"-Templatesatz in Q3
○ Weiterentwicklung zur Web-App
○ Verkürzter Checkout-Prozess
○ Retina-Support (High DPI)
Ausblick
Ihre Ansprechpartner
Daniel Beerden
Geschäftsführender Gesellschafter
Telefon: 0211 - 942 120 31
Mobil: 0151 - 253 54 700
E-Mail: d.beerden@wbl-konzept.de
Björn Lange
Geschäftsführender Gesellschafter
Telefon: 0211 - 942 120 30
E-Mail: b.lange@wbl-konzept.de
WBL Konzept GmbH
Bilker Straße 34
40213 Düsseldorf
■ http://conversionxl.com/how-responsive-design-boosts-mobile-conversions/
■ https://www.facebook.com/questions/369342156499228/
■ http://twitter.github.io/bootstrap/scaffolding.html
■ http://foundation.zurb.com/docs/
■ http://www.getskeleton.com/
■ http://view.jquerymobile.com/1.3.1/dist/demos/
■ http://tjvantoll.com/2012/08/19/onscroll-event-issues-on-mobile-browsers/
■ http://googlewebmastercentral.blogspot.de/2012/06/recommendations-for-building-
smartphone.html
■ http://googlewebmastercentral.blogspot.de/2012/04/responsive-design-harnessing-
power-of.html
Quellen

Weitere ähnliche Inhalte

Andere mochten auch

04 presentation - code of conduct - final
04   presentation - code of conduct - final04   presentation - code of conduct - final
04 presentation - code of conduct - final
soly1991
 
The Electricity Saving Family - a case study
The Electricity Saving Family - a case studyThe Electricity Saving Family - a case study
The Electricity Saving Family - a case study
SEA - Sustainable Energy Advice Ltd
 
First impressions of SparkR: our own machine learning algorithm
First impressions of SparkR: our own machine learning algorithmFirst impressions of SparkR: our own machine learning algorithm
First impressions of SparkR: our own machine learning algorithm
InfoFarm
 
Emprendimiento tecnológico y ciberseguridad
Emprendimiento tecnológico y ciberseguridad Emprendimiento tecnológico y ciberseguridad
Emprendimiento tecnológico y ciberseguridad
Raúl Díaz
 
Presentacion 2012 Carpinteria, Mobiliario Y Mampara
Presentacion 2012 Carpinteria, Mobiliario Y MamparaPresentacion 2012 Carpinteria, Mobiliario Y Mampara
Presentacion 2012 Carpinteria, Mobiliario Y Mampara
Jesus Sombrero
 
Como generar energía infinita toroide jesus
Como generar energía infinita toroide jesusComo generar energía infinita toroide jesus
Como generar energía infinita toroide jesus
supernovaceil
 
Plan de Limpieza y Sanitización
Plan de Limpieza y SanitizaciónPlan de Limpieza y Sanitización
Plan de Limpieza y Sanitización
Inesita Cordova
 
CE11 bautista marcos
CE11 bautista marcosCE11 bautista marcos
CE11 bautista marcos
Marcos Bautista
 
Innovación en servicios y mercados de gas natural. Fernando Impuesto
Innovación en servicios y mercados de gas natural. Fernando ImpuestoInnovación en servicios y mercados de gas natural. Fernando Impuesto
Innovación en servicios y mercados de gas natural. Fernando Impuesto
Funseam - Fundación para la Sostenibilidad Energética y Ambiental
 
Inocencio melendez julio la adecuada identificación, tipificación, asignaci...
Inocencio melendez julio la adecuada identificación, tipificación, asignaci...Inocencio melendez julio la adecuada identificación, tipificación, asignaci...
Inocencio melendez julio la adecuada identificación, tipificación, asignaci...
INOCENCIO MELÉNDEZ JULIO
 
Programacion didactica
Programacion didacticaProgramacion didactica
Programacion didactica
Germán Lopez-Rey Fortuna
 
Trabajo Final Proyecto TICs
Trabajo Final Proyecto TICsTrabajo Final Proyecto TICs
Trabajo Final Proyecto TICs
dareyesp
 
ROHINIE.COM: GRATIS Twitter Erfolg 2011 von Doc Goy
ROHINIE.COM: GRATIS Twitter Erfolg 2011 von Doc GoyROHINIE.COM: GRATIS Twitter Erfolg 2011 von Doc Goy
ROHINIE.COM: GRATIS Twitter Erfolg 2011 von Doc Goy
ROHINIE.COM Limited
 
Actividad1 unidadiii mtsm
Actividad1 unidadiii mtsmActividad1 unidadiii mtsm
Actividad1 unidadiii mtsm
Tere Segura
 
Aprender a dibujar con el lado derecho del cerebro - Betty Edwards
Aprender a dibujar con el lado derecho del cerebro - Betty EdwardsAprender a dibujar con el lado derecho del cerebro - Betty Edwards
Aprender a dibujar con el lado derecho del cerebro - Betty Edwards
Efraín Buitrago
 
Taller de medallas
Taller de medallasTaller de medallas
Taller de medallas
joseluisalonsoruiz
 
Nachweis sommerlicher Wärmeschutz: Simulationen von Loggien
Nachweis sommerlicher Wärmeschutz: Simulationen von LoggienNachweis sommerlicher Wärmeschutz: Simulationen von Loggien
Nachweis sommerlicher Wärmeschutz: Simulationen von Loggien
Vorname Nachname
 
Eine Stadt 2 Millionen Chancen - Diskurs zu Kapitel 11 am #govcamp 2015
Eine Stadt 2 Millionen Chancen - Diskurs zu Kapitel 11 am #govcamp 2015Eine Stadt 2 Millionen Chancen - Diskurs zu Kapitel 11 am #govcamp 2015
Eine Stadt 2 Millionen Chancen - Diskurs zu Kapitel 11 am #govcamp 2015
Peter Kühnberger
 

Andere mochten auch (19)

04 presentation - code of conduct - final
04   presentation - code of conduct - final04   presentation - code of conduct - final
04 presentation - code of conduct - final
 
The Electricity Saving Family - a case study
The Electricity Saving Family - a case studyThe Electricity Saving Family - a case study
The Electricity Saving Family - a case study
 
First impressions of SparkR: our own machine learning algorithm
First impressions of SparkR: our own machine learning algorithmFirst impressions of SparkR: our own machine learning algorithm
First impressions of SparkR: our own machine learning algorithm
 
Emprendimiento tecnológico y ciberseguridad
Emprendimiento tecnológico y ciberseguridad Emprendimiento tecnológico y ciberseguridad
Emprendimiento tecnológico y ciberseguridad
 
Presentacion 2012 Carpinteria, Mobiliario Y Mampara
Presentacion 2012 Carpinteria, Mobiliario Y MamparaPresentacion 2012 Carpinteria, Mobiliario Y Mampara
Presentacion 2012 Carpinteria, Mobiliario Y Mampara
 
Como generar energía infinita toroide jesus
Como generar energía infinita toroide jesusComo generar energía infinita toroide jesus
Como generar energía infinita toroide jesus
 
Plan de Limpieza y Sanitización
Plan de Limpieza y SanitizaciónPlan de Limpieza y Sanitización
Plan de Limpieza y Sanitización
 
Keskaegsed linnad
Keskaegsed linnadKeskaegsed linnad
Keskaegsed linnad
 
CE11 bautista marcos
CE11 bautista marcosCE11 bautista marcos
CE11 bautista marcos
 
Innovación en servicios y mercados de gas natural. Fernando Impuesto
Innovación en servicios y mercados de gas natural. Fernando ImpuestoInnovación en servicios y mercados de gas natural. Fernando Impuesto
Innovación en servicios y mercados de gas natural. Fernando Impuesto
 
Inocencio melendez julio la adecuada identificación, tipificación, asignaci...
Inocencio melendez julio la adecuada identificación, tipificación, asignaci...Inocencio melendez julio la adecuada identificación, tipificación, asignaci...
Inocencio melendez julio la adecuada identificación, tipificación, asignaci...
 
Programacion didactica
Programacion didacticaProgramacion didactica
Programacion didactica
 
Trabajo Final Proyecto TICs
Trabajo Final Proyecto TICsTrabajo Final Proyecto TICs
Trabajo Final Proyecto TICs
 
ROHINIE.COM: GRATIS Twitter Erfolg 2011 von Doc Goy
ROHINIE.COM: GRATIS Twitter Erfolg 2011 von Doc GoyROHINIE.COM: GRATIS Twitter Erfolg 2011 von Doc Goy
ROHINIE.COM: GRATIS Twitter Erfolg 2011 von Doc Goy
 
Actividad1 unidadiii mtsm
Actividad1 unidadiii mtsmActividad1 unidadiii mtsm
Actividad1 unidadiii mtsm
 
Aprender a dibujar con el lado derecho del cerebro - Betty Edwards
Aprender a dibujar con el lado derecho del cerebro - Betty EdwardsAprender a dibujar con el lado derecho del cerebro - Betty Edwards
Aprender a dibujar con el lado derecho del cerebro - Betty Edwards
 
Taller de medallas
Taller de medallasTaller de medallas
Taller de medallas
 
Nachweis sommerlicher Wärmeschutz: Simulationen von Loggien
Nachweis sommerlicher Wärmeschutz: Simulationen von LoggienNachweis sommerlicher Wärmeschutz: Simulationen von Loggien
Nachweis sommerlicher Wärmeschutz: Simulationen von Loggien
 
Eine Stadt 2 Millionen Chancen - Diskurs zu Kapitel 11 am #govcamp 2015
Eine Stadt 2 Millionen Chancen - Diskurs zu Kapitel 11 am #govcamp 2015Eine Stadt 2 Millionen Chancen - Diskurs zu Kapitel 11 am #govcamp 2015
Eine Stadt 2 Millionen Chancen - Diskurs zu Kapitel 11 am #govcamp 2015
 

Ähnlich wie Responsive OXID Online Shops by WBL Konzept - Ressourcen sparen, Umsätze steigern

SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
André Scharf
 
Hybris und Sitecore - Der Commerce Connect im Einsatz
Hybris und Sitecore - Der Commerce Connect im EinsatzHybris und Sitecore - Der Commerce Connect im Einsatz
Hybris und Sitecore - Der Commerce Connect im Einsatz
comspace GmbH & Co. KG
 
Cloud-Nutzung aus Anwendersicht, Thomas Witt, Infopark
Cloud-Nutzung aus Anwendersicht, Thomas Witt, InfoparkCloud-Nutzung aus Anwendersicht, Thomas Witt, Infopark
Cloud-Nutzung aus Anwendersicht, Thomas Witt, Infopark
CloudOps Summit
 
Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)
Koombea
 
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
adesso AG
 
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"Stephan Hamberger
 
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag EditionAm Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Jens Grochtdreis
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
Conny Stier
 
Landingpage-Designs die wirklich funktionieren
Landingpage-Designs die wirklich funktionierenLandingpage-Designs die wirklich funktionieren
Landingpage-Designs die wirklich funktionieren
ConversionBoosting
 
Responsive Websites aus SEO-Sicht – MobileTechCon 2016
Responsive Websites aus SEO-Sicht – MobileTechCon 2016Responsive Websites aus SEO-Sicht – MobileTechCon 2016
Responsive Websites aus SEO-Sicht – MobileTechCon 2016
André Scharf
 
SAP IdM Wartungsende 2027... und was nun?
SAP IdM Wartungsende 2027... und was nun?SAP IdM Wartungsende 2027... und was nun?
SAP IdM Wartungsende 2027... und was nun?
IBsolution GmbH
 
Webinar: Mobile Shop Optimierung - was wirklich wichtig ist
Webinar: Mobile Shop Optimierung - was wirklich wichtig istWebinar: Mobile Shop Optimierung - was wirklich wichtig ist
Webinar: Mobile Shop Optimierung - was wirklich wichtig ist
wasmitweb GmbH
 
Back to the Frontend – aber nun mit Microservices
Back to the Frontend – aber nun mit MicroservicesBack to the Frontend – aber nun mit Microservices
Back to the Frontend – aber nun mit Microservices
André Fleischer
 
Mobile SEO - Basics und wichtige Faktoren für die mobile Suche
Mobile SEO - Basics und wichtige Faktoren für die mobile SucheMobile SEO - Basics und wichtige Faktoren für die mobile Suche
Mobile SEO - Basics und wichtige Faktoren für die mobile Suche
get traction GmbH
 
2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc
Daniel Fisher
 
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John MuñozSmartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
John Muñoz
 
Nefos - Effizienzplus für den Vertrieb: Weltweite Salesforce-Einführung bei...
Nefos - Effizienzplus für den Vertrieb: Weltweite Salesforce-Einführung bei...Nefos - Effizienzplus für den Vertrieb: Weltweite Salesforce-Einführung bei...
Nefos - Effizienzplus für den Vertrieb: Weltweite Salesforce-Einführung bei...Salesforce Deutschland
 
Enterprise UI
Enterprise UIEnterprise UI
Enterprise UI
gedoplan
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
Jens Grochtdreis
 
2013 OS E-Commerce Magento OXID Shopware
2013 OS E-Commerce Magento OXID Shopware2013 OS E-Commerce Magento OXID Shopware
2013 OS E-Commerce Magento OXID Shopware
Björn Schotte
 

Ähnlich wie Responsive OXID Online Shops by WBL Konzept - Ressourcen sparen, Umsätze steigern (20)

SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016SEO im Web Development - webinale 2016
SEO im Web Development - webinale 2016
 
Hybris und Sitecore - Der Commerce Connect im Einsatz
Hybris und Sitecore - Der Commerce Connect im EinsatzHybris und Sitecore - Der Commerce Connect im Einsatz
Hybris und Sitecore - Der Commerce Connect im Einsatz
 
Cloud-Nutzung aus Anwendersicht, Thomas Witt, Infopark
Cloud-Nutzung aus Anwendersicht, Thomas Witt, InfoparkCloud-Nutzung aus Anwendersicht, Thomas Witt, Infopark
Cloud-Nutzung aus Anwendersicht, Thomas Witt, Infopark
 
Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)
 
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
 
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
 
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag EditionAm Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
Landingpage-Designs die wirklich funktionieren
Landingpage-Designs die wirklich funktionierenLandingpage-Designs die wirklich funktionieren
Landingpage-Designs die wirklich funktionieren
 
Responsive Websites aus SEO-Sicht – MobileTechCon 2016
Responsive Websites aus SEO-Sicht – MobileTechCon 2016Responsive Websites aus SEO-Sicht – MobileTechCon 2016
Responsive Websites aus SEO-Sicht – MobileTechCon 2016
 
SAP IdM Wartungsende 2027... und was nun?
SAP IdM Wartungsende 2027... und was nun?SAP IdM Wartungsende 2027... und was nun?
SAP IdM Wartungsende 2027... und was nun?
 
Webinar: Mobile Shop Optimierung - was wirklich wichtig ist
Webinar: Mobile Shop Optimierung - was wirklich wichtig istWebinar: Mobile Shop Optimierung - was wirklich wichtig ist
Webinar: Mobile Shop Optimierung - was wirklich wichtig ist
 
Back to the Frontend – aber nun mit Microservices
Back to the Frontend – aber nun mit MicroservicesBack to the Frontend – aber nun mit Microservices
Back to the Frontend – aber nun mit Microservices
 
Mobile SEO - Basics und wichtige Faktoren für die mobile Suche
Mobile SEO - Basics und wichtige Faktoren für die mobile SucheMobile SEO - Basics und wichtige Faktoren für die mobile Suche
Mobile SEO - Basics und wichtige Faktoren für die mobile Suche
 
2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc2007 - Basta!: Nach soa kommt soc
2007 - Basta!: Nach soa kommt soc
 
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John MuñozSmartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
 
Nefos - Effizienzplus für den Vertrieb: Weltweite Salesforce-Einführung bei...
Nefos - Effizienzplus für den Vertrieb: Weltweite Salesforce-Einführung bei...Nefos - Effizienzplus für den Vertrieb: Weltweite Salesforce-Einführung bei...
Nefos - Effizienzplus für den Vertrieb: Weltweite Salesforce-Einführung bei...
 
Enterprise UI
Enterprise UIEnterprise UI
Enterprise UI
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
 
2013 OS E-Commerce Magento OXID Shopware
2013 OS E-Commerce Magento OXID Shopware2013 OS E-Commerce Magento OXID Shopware
2013 OS E-Commerce Magento OXID Shopware
 

Responsive OXID Online Shops by WBL Konzept - Ressourcen sparen, Umsätze steigern

  • 1. Responsive OXID Shops Ressourcen sparen, Umsätze steigern
  • 2. Überblick 1. Ausgangslage 2. Vorraussetzungen 3. Herausforderungen und Kompromisse 4. Responsive Frameworks 5. Beispielhafte Umsetzungen 6. Responsive meets OXID 7. SEO, SEA und Tracking 8. Ressourcen & Umsätze 7. Ausblick RESPONSIVE?
  • 3. ■ Desktop-Shops auf Smartphones: "Alter Wein in neuen Schläuchen" ■ Klassische Shops gehen an mobiler Realität vorbei ■ Native Shop-Apps werden kaum akzeptiert/genutzt und bedürfen Schnittstellen-Entwicklung ■ Mobile Templates: Redundanzen und Nachteile in allen Bereichen Ausgangslage
  • 4. ■ HTML & CSS3: Basis für moderne Umsetzungen ■ CSS3 Media Queries bilden das Breakpoint-Grundgerüst ■ JavaScript Bibilotheken erweitern den Funktionsumfang hin zu einer Web-App ■ Idealerweise: Verzicht auf ältere Browser (< IE9) ■ Keine Angst vor komplexeren HTML Strukturen Vorraussetzungen
  • 5. ■ Das Gestaltungsraster (Grid) erlebt seine Wiedergeburt ■ Konzeptionelles Vorgehen: Layouts sind Pflicht! ■ Skalierbare und erfassbare Inhalte (Text, Bild, Media) Herausforderungen und Kompromisse
  • 6. ■ Rapid Prototyping ■ Copy & Paste essentieller Funktionen und Elemente ■ Qualitätssicherung durch Strukturvorgaben (HTML Grid) ■ Mobility Klassen (Visibility) und Breakpoints ■ Browser- und Testsicherheit Responsive Frameworks Zurb Foundation Skeleton
  • 7. Zentrale Features S Tools/Components Flexible Mobile Grids Ordering Syntax Block Grids Visibility Klassen Touch (z.B.: Swipe) Bootstrap vs Foundation Yeti FTW
  • 14. ■ Erweitern der OXID Templates um Responsive-Strukturen ■ OXID Standard: Beibehaltung des Klassen und ID-Konstruktes ■ Proportional identische Bildformate (Einsatz von oxEqualizer möglich) ■ JS-Kompatibilität zwischen OXID jQuery und dem Framework ■ Umbau "absolute" positionierter Elemente Responsive meets OXID
  • 15. ■ Hover-Bedienelemente > Klick-/Tap-Elemente ■ Das Lazy Loading verhält sich anders, "onscroll" wird später gefeuert ■ "unmobile" Payments ausschließen ○ Visibility-Klasse ○ User-Agent Kontrolle ■ Üblicher Performance-Guide ○ Reduktion und Kompression JavaScript ○ Reduktion und Kompression CSS ○ HTML sparen Responsive meets OXID
  • 16. ■ Ganzehitliches Tracking: Analyse über Viewports und OS ■ Google-Empfehlung für Mobile: Responsive! ■ Größere HTML-Strukturen wirken sich nicht zwingend negativ aus ■ Ausspielung unterschiedlicher Anzeigenformate über z.B. Adwords SEO, SEA, Tracking
  • 18. ■ Einsparung eines mobilen Templatesatzes ■ Ganzheitlicher (kürzerer!) Entwicklungsstrang für Agentur und Shopbetreiber ■ Steigerung der Conversion durch komfortable Checkout-Prozesse ■ Zukunftssichere, weil geräteunabhängige Basis Ressourcen & Umsätze
  • 20. ■ iPhone Umsatz + 377.6% ■ iPhone Conversion + 71.9% ■ Alldevice Umsatz + 42.4% ■ Alldevice Conversion + 42.4% ■ Bounce Rate - 23.2% Umsatz & Conversion nach Umstieg auf Responsive
  • 21. ■ OXID Ökosystem im Umschwung zu responsive Frameworks ■ Natives OXID Template? ■ WBL "Azurb"-Templatesatz in Q3 ○ Weiterentwicklung zur Web-App ○ Verkürzter Checkout-Prozess ○ Retina-Support (High DPI) Ausblick
  • 22. Ihre Ansprechpartner Daniel Beerden Geschäftsführender Gesellschafter Telefon: 0211 - 942 120 31 Mobil: 0151 - 253 54 700 E-Mail: d.beerden@wbl-konzept.de Björn Lange Geschäftsführender Gesellschafter Telefon: 0211 - 942 120 30 E-Mail: b.lange@wbl-konzept.de WBL Konzept GmbH Bilker Straße 34 40213 Düsseldorf
  • 23. ■ http://conversionxl.com/how-responsive-design-boosts-mobile-conversions/ ■ https://www.facebook.com/questions/369342156499228/ ■ http://twitter.github.io/bootstrap/scaffolding.html ■ http://foundation.zurb.com/docs/ ■ http://www.getskeleton.com/ ■ http://view.jquerymobile.com/1.3.1/dist/demos/ ■ http://tjvantoll.com/2012/08/19/onscroll-event-issues-on-mobile-browsers/ ■ http://googlewebmastercentral.blogspot.de/2012/06/recommendations-for-building- smartphone.html ■ http://googlewebmastercentral.blogspot.de/2012/04/responsive-design-harnessing- power-of.html Quellen