Responsive OXID Shops
Ressourcen sparen, Umsätze steigern
Überblick
1. Ausgangslage
2. Vorraussetzungen
3. Herausforderungen und Kompromisse
4. Responsive Frameworks
5. Beispielhaf...
■ Desktop-Shops auf Smartphones:
"Alter Wein in neuen Schläuchen"
■ Klassische Shops gehen an mobiler
Realität vorbei
■ Na...
■ HTML & CSS3: Basis für moderne
Umsetzungen
■ CSS3 Media Queries bilden das
Breakpoint-Grundgerüst
■ JavaScript Bibilothe...
■ Das Gestaltungsraster (Grid) erlebt seine Wiedergeburt
■ Konzeptionelles Vorgehen: Layouts sind Pflicht!
■ Skalierbare u...
■ Rapid Prototyping
■ Copy & Paste essentieller
Funktionen und Elemente
■ Qualitätssicherung durch
Strukturvorgaben (HTML ...
Zentrale Features S
Tools/Components
Flexible Mobile Grids
Ordering Syntax
Block Grids
Visibility Klassen
Touch (z.B.: Swi...
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
■ Pro...
■ Hover-Bedienelemente > Klick-/Tap-Elemente
■ Das Lazy Loading verhält sich anders, "onscroll"
wird später gefeuert
■ "un...
■ Ganzehitliches Tracking:
Analyse über Viewports und OS
■ Google-Empfehlung für Mobile:
Responsive!
■ Größere HTML-Strukt...
Ressourcen & Umsätze
WIN-WIN
■ Einsparung eines mobilen
Templatesatzes
■ Ganzheitlicher (kürzerer!)
Entwicklungsstrang für Agentur und
Shopbetreiber
■ ...
skinnyties.com
■ iPhone Umsatz + 377.6%
■ iPhone Conversion + 71.9%
■ Alldevice Umsatz + 42.4%
■ Alldevice Conversion + 42.4%
■ Bounce Ra...
■ OXID Ökosystem im Umschwung zu
responsive Frameworks
■ Natives OXID Template?
■ WBL "Azurb"-Templatesatz in Q3
○ Weitere...
Ihre Ansprechpartner
Daniel Beerden
Geschäftsführender Gesellschafter
Telefon: 0211 - 942 120 31
Mobil: 0151 - 253 54 700
...
■ http://conversionxl.com/how-responsive-design-boosts-mobile-conversions/
■ https://www.facebook.com/questions/3693421564...
Upcoming SlideShare
Loading in …5
×

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

1,263 views
1,133 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,263
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Responsive OXID Shops Ressourcen sparen, Umsätze steigern
  2. 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. 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. 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. 5. ■ Das Gestaltungsraster (Grid) erlebt seine Wiedergeburt ■ Konzeptionelles Vorgehen: Layouts sind Pflicht! ■ Skalierbare und erfassbare Inhalte (Text, Bild, Media) Herausforderungen und Kompromisse
  6. 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. 7. Zentrale Features S Tools/Components Flexible Mobile Grids Ordering Syntax Block Grids Visibility Klassen Touch (z.B.: Swipe) Bootstrap vs Foundation Yeti FTW
  8. 8. Basic Responsiveness "Responsive on the go"
  9. 9. ellapaul.de
  10. 10. Advanced Responsiveness "Responsive Concepts"
  11. 11. art-mobil-shop.de
  12. 12. Full Responsiveness "Responsive Transformers"
  13. 13. emmas-enkel.de
  14. 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. 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. 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
  17. 17. Ressourcen & Umsätze WIN-WIN
  18. 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
  19. 19. skinnyties.com
  20. 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. 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. 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. 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

×