Responsive OXID Online Shops by WBL Konzept - Ressourcen sparen, Umsätze steigern
- 1. Responsive OXID Shops Ressourcensparen, 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 aufSmartphones: "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 FlexibleMobile Grids Ordering Syntax Block Grids Visibility Klassen Touch (z.B.: Swipe) Bootstrap vs Foundation Yeti FTW
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14. ■ Erweitern derOXID 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.
- 18. ■ Einsparung einesmobilen 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.
- 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 Ökosystemim 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ührenderGesellschafter 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