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

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

8. Basic Responsiveness
"Responsive on the go"

9. ellapaul.de

10. Advanced Responsiveness
"Responsive Concepts"

11. art-mobil-shop.de

12. Full Responsiveness
"Responsive Transformers"

13. emmas-enkel.de

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

17. Ressourcen & Umsätze
WIN-WIN

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. skinnyties.com

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