SlideShare ist ein Scribd-Unternehmen logo
1 von 35
SHOPWARE GOES RESPONSIVE
STEPHAN POHL - CORE ENTWICKLER
DAS PROBLEM
1000 UND 1 INTERNET-DEVICE
...UND ES WERDEN TÄGLICH MEHR
CC by 2.0 - andreasdantz
NATIVE APPLIKATION
NATIVE APPLIKATION
NATIVE APPLIKATION
VORTEILE
- native Geschwindigkeit
- perfekt angepasst ans Endgerät
- Distribution über die App-Stores
- voller Zugriff auf Gerätefunktionen
NATIVE APPLIKATION
NATIVE APPLIKATION
NACHTEILE
- für jedes Betriebssystem
eine eigene App
- 3 verschiedene Sprachen
- externe Zulassung
- Kosten / Nutzen Faktor
CC by 2.0 -
eschipul
WEB APPLIKATION
WEB APPLIKATION
WEB APPLIKATION
VORTEILE
- bekannte Web-Technologien
- natives Feeling wird nachgeahmt
- Erstellung günstiger als native App
- keine Installation notwendig
- keine externe Zulassung
WEB APPLIKATION
WEB APPLIKATION
NACHTEILE
- Benutzer wird verwirrt, da meist
anderes Interface
- Natives Feeling wird nur imitiert
- Anpassungen bei neuen Geräten
- meist eigene Subdomain
DIE LÖSUNG
WAS IST RESPONSIVE?
SMARTPHONE, TABLET ODER SMART-TV
„ONE SITE FOR EVERY SCREEN“
Image credit: http://johnpolacek.github.com
DIE LÖSUNG - RESPONSIVE DESIGN
Quelle: www.bostenglobe.com
EMOTION GOES RESPONSIVE
DAS SIND UNSERE IDEEN
WIR BEFINDEN UNS IN DER KONZEPTIONSPHASE
UND STELLEN IHNEN UNSER AKTUELLES KONZEPT
VOR
DIE 3 SÄULEN DES TEMPLATES
CSS JAVASCRIPT HTML
CASCADING STYLE SHEETS
CASCADING STYLE SHEETS
- LESS als Präprozessor
- PURE als Framework
- Widget-basierende Styles
- * { box-sizing: border-box }
Bild-Quelle:
http://en.wikipedia.org/wiki/CSS3
CASCADING STYLE SHEETS - CODE BEISPIEL
JAVASCRIPT
JAVASCRIPT
- jQuery (1.9x / 2.x) als Framework
- Handlebars.js für Templating
- Hoch konfigurierbar
- Steuerung durch HTML5 „data“-Attribute
- Unit-Test Abdeckung
JAVASCRIPT / OPEN SOURCE
- unabhängige Plugins
- Eigenes Repository für jQuery Plugins
- Installation über „npm“
- Ausführliche Dokumentation
- MIT / GPL als Dual-Lizenz
- gehostet auf github.com
HTML / SMARTY
HTML / SMARTY
- HTML5 als neuer Standard
- Widget-basierender Aufbau
- drastische Erweiterung der Blöcke
- Einheitliches Naming-Schema
Bild-Quelle:
http://en.wikipedia.org/wiki/HTML5
HTML / SMARTY - CODE BEISPIEL
GRUNT.JS
Bild-Quelle: http://gruntjs.com
GRUNT.JS - DIE VORTEILE
- Automatisierung der häufigsten Tasks
- Erstellen neuer Templates / Plugins
- Konkatenierung und Kompression
- Code-Qualität prüfen
- Erweiterbarkeit über Packages
- Dependency-Managment über „npm“
Bild-Quelle: http://gruntjs.com
WELCHE VORTEILE HABE ICH DAVON?
WELCHE VORTEILE HABE ICH DAVON?
- State-of-the-art Technologie
- „Choose your favorite tools“
- vereinfachte Workflows
- maximale Flexibilität
- Aktives Contributing auf github.com
Bild-Quelle: http://octodex.github.com/front-end-
conftocat/
WAS IST IN DER PIPELINE?
BOILERPLATE-TEMPLATE
BOILERPLATE TEMPLATE
- komplettes Shopware Template
- minimales Styling
- jQuery Plugins optional
- dient als Grundlage
Zielplattformen:
EMOTION-TEMPLATE
BOILERPLATE TEMPLATE
- Fluid-Layout (Prozent-basierend)
- HTML5 und CSS3 basierend
- Natural Breakpoints
- kategorisiert in 4 Geräte-Klassen
- Template Backend Modul
- Farb-Anpassungen
- Live-Preview der Frontend-Widgets
- Einfache Anpassungen durchführen
PLANUNG / ZEITPLAN
BOILERPLATE-TEMPLATE
INTEGRATION GRUNT.JS UND NPM
RESPONSIVE EMOTION TEMPLATE
TEMPLATE MODULE
VIELEN DANK!

Weitere ähnliche Inhalte

Andere mochten auch

20 internet marketing trend 2009
20 internet marketing trend 200920 internet marketing trend 2009
20 internet marketing trend 2009
PROACTIVE BRAND
 
Social Media Narrative Assignment
Social Media Narrative AssignmentSocial Media Narrative Assignment
Social Media Narrative Assignment
Alexis Daman
 
02 boberg iaea roll front development & expl
02 boberg iaea   roll front  development & expl02 boberg iaea   roll front  development & expl
02 boberg iaea roll front development & expl
Monatom Mgl
 

Andere mochten auch (19)

Wg website-ppt-9.17.16
Wg website-ppt-9.17.16Wg website-ppt-9.17.16
Wg website-ppt-9.17.16
 
Nouveautés de Zabbix 3.0 - Paris Monitoring meetup #2
Nouveautés de Zabbix 3.0 - Paris Monitoring meetup #2Nouveautés de Zabbix 3.0 - Paris Monitoring meetup #2
Nouveautés de Zabbix 3.0 - Paris Monitoring meetup #2
 
20 internet marketing trend 2009
20 internet marketing trend 200920 internet marketing trend 2009
20 internet marketing trend 2009
 
Planificación prezi
Planificación preziPlanificación prezi
Planificación prezi
 
Digital storytelling for education
Digital storytelling for educationDigital storytelling for education
Digital storytelling for education
 
Social Media Narrative Assignment
Social Media Narrative AssignmentSocial Media Narrative Assignment
Social Media Narrative Assignment
 
Lady
LadyLady
Lady
 
Ur-Energy September 2016 Corporate Presentation
Ur-Energy September 2016 Corporate PresentationUr-Energy September 2016 Corporate Presentation
Ur-Energy September 2016 Corporate Presentation
 
paragraph
paragraphparagraph
paragraph
 
Ur-Energy April 2016 Corporate Presentation
Ur-Energy April 2016 Corporate PresentationUr-Energy April 2016 Corporate Presentation
Ur-Energy April 2016 Corporate Presentation
 
Caderno 01 politica nacional de desenvolvimento urbano
Caderno 01   politica nacional de desenvolvimento urbanoCaderno 01   politica nacional de desenvolvimento urbano
Caderno 01 politica nacional de desenvolvimento urbano
 
02 boberg iaea roll front development & expl
02 boberg iaea   roll front  development & expl02 boberg iaea   roll front  development & expl
02 boberg iaea roll front development & expl
 
World cup 2011
World cup 2011World cup 2011
World cup 2011
 
Developing a body paragraph - Level 1
Developing a body paragraph - Level 1Developing a body paragraph - Level 1
Developing a body paragraph - Level 1
 
2015 European Insurance CRO survey – Findings and key themes
2015 European Insurance CRO survey –  Findings and key themes2015 European Insurance CRO survey –  Findings and key themes
2015 European Insurance CRO survey – Findings and key themes
 
Capella Space Week 7 H4D Stanford 2016
Capella Space Week 7 H4D Stanford 2016Capella Space Week 7 H4D Stanford 2016
Capella Space Week 7 H4D Stanford 2016
 
Real Estate Survey November 2015 “: Junge Deutsche träumen vom Reihenhaus“
Real Estate Survey November 2015 “: Junge Deutsche träumen vom Reihenhaus“Real Estate Survey November 2015 “: Junge Deutsche träumen vom Reihenhaus“
Real Estate Survey November 2015 “: Junge Deutsche träumen vom Reihenhaus“
 
SCD 13: Alexander Graf - SEO oder doch etwas Neues
SCD 13: Alexander Graf - SEO oder doch etwas NeuesSCD 13: Alexander Graf - SEO oder doch etwas Neues
SCD 13: Alexander Graf - SEO oder doch etwas Neues
 
Atelierspaziergang 2012.pdf
Atelierspaziergang 2012.pdfAtelierspaziergang 2012.pdf
Atelierspaziergang 2012.pdf
 

Ähnlich wie SCD13: Shopware goes responsive

Einführung in Puppet und Vagrant
Einführung in Puppet und VagrantEinführung in Puppet und Vagrant
Einführung in Puppet und Vagrant
s0enke
 
Skalierung & Performance
Skalierung & PerformanceSkalierung & Performance
Skalierung & Performance
glembotzky
 

Ähnlich wie SCD13: Shopware goes responsive (20)

Vagrant, Puppet, Docker für Entwickler und Architekten
Vagrant, Puppet, Docker für Entwickler und ArchitektenVagrant, Puppet, Docker für Entwickler und Architekten
Vagrant, Puppet, Docker für Entwickler und Architekten
 
Ionic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf SteroidenIonic 2 - Hybridapps auf Steroiden
Ionic 2 - Hybridapps auf Steroiden
 
Einführung in Puppet und Vagrant
Einführung in Puppet und VagrantEinführung in Puppet und Vagrant
Einführung in Puppet und Vagrant
 
Deployment von Entwicklungsumgebungen eines TYPO3-Intranets mit Vagrant
Deployment von Entwicklungsumgebungen eines TYPO3-Intranets mit VagrantDeployment von Entwicklungsumgebungen eines TYPO3-Intranets mit Vagrant
Deployment von Entwicklungsumgebungen eines TYPO3-Intranets mit Vagrant
 
Citrix Fit4Cloud Reihe: Citrix XenServer in der Cloud
Citrix Fit4Cloud Reihe: Citrix XenServer in der CloudCitrix Fit4Cloud Reihe: Citrix XenServer in der Cloud
Citrix Fit4Cloud Reihe: Citrix XenServer in der Cloud
 
Continuous Delivery with ansible
Continuous Delivery with ansibleContinuous Delivery with ansible
Continuous Delivery with ansible
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 
Fehleranalyse in SCCM
Fehleranalyse in SCCMFehleranalyse in SCCM
Fehleranalyse in SCCM
 
Joomla
JoomlaJoomla
Joomla
 
Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
Gewinnung von OPEN SOURCE Techniken für junge UnternehmenGewinnung von OPEN SOURCE Techniken für junge Unternehmen
Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
 
Skalierung & Performance
Skalierung & PerformanceSkalierung & Performance
Skalierung & Performance
 
Apache DeviceMap - Web-Dev-BBQ Stuttgart
Apache DeviceMap - Web-Dev-BBQ StuttgartApache DeviceMap - Web-Dev-BBQ Stuttgart
Apache DeviceMap - Web-Dev-BBQ Stuttgart
 
BizSpark goes Cloud
BizSpark goes CloudBizSpark goes Cloud
BizSpark goes Cloud
 
Desktop Containers 12: Next Generation of ZENworks Application Virtualization
Desktop Containers 12: Next Generation of ZENworks Application VirtualizationDesktop Containers 12: Next Generation of ZENworks Application Virtualization
Desktop Containers 12: Next Generation of ZENworks Application Virtualization
 
Webanwendungen - Installation, Konfiguration und Administration
Webanwendungen - Installation, Konfiguration und AdministrationWebanwendungen - Installation, Konfiguration und Administration
Webanwendungen - Installation, Konfiguration und Administration
 
Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )
Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )
Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )
 
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
 
Deployment 2.0
Deployment 2.0Deployment 2.0
Deployment 2.0
 
Dnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyondDnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyond
 
Azure Notebooks
Azure NotebooksAzure Notebooks
Azure Notebooks
 

Mehr von shopware AG

SCD13: Verwendung und Erweiterbarkeit der Rest-API
SCD13: Verwendung und Erweiterbarkeit der Rest-APISCD13: Verwendung und Erweiterbarkeit der Rest-API
SCD13: Verwendung und Erweiterbarkeit der Rest-API
shopware AG
 
SCD13: Die technische Roadmap von Shopware 4
SCD13: Die technische Roadmap von Shopware 4SCD13: Die technische Roadmap von Shopware 4
SCD13: Die technische Roadmap von Shopware 4
shopware AG
 

Mehr von shopware AG (11)

SCD 13: Johannes Altmann - 13 Schritte zur Unwiderstehlichkeit
SCD 13: Johannes Altmann - 13 Schritte zur UnwiderstehlichkeitSCD 13: Johannes Altmann - 13 Schritte zur Unwiderstehlichkeit
SCD 13: Johannes Altmann - 13 Schritte zur Unwiderstehlichkeit
 
SCD 13: Paypal: Neue produkte und Funktionen für Händler
SCD 13: Paypal: Neue produkte und Funktionen für HändlerSCD 13: Paypal: Neue produkte und Funktionen für Händler
SCD 13: Paypal: Neue produkte und Funktionen für Händler
 
SCD 13: Paypal - Wie "Mobile" den Handel verändert
SCD 13: Paypal - Wie "Mobile" den Handel verändertSCD 13: Paypal - Wie "Mobile" den Handel verändert
SCD 13: Paypal - Wie "Mobile" den Handel verändert
 
SCD 13: Wie wirken sich die angebotenen Zahlarten auf die Konvertierung aus?
SCD 13: Wie wirken sich die angebotenen Zahlarten auf die Konvertierung aus? SCD 13: Wie wirken sich die angebotenen Zahlarten auf die Konvertierung aus?
SCD 13: Wie wirken sich die angebotenen Zahlarten auf die Konvertierung aus?
 
SCD13: Agile Entwicklung bei der shopware AG
SCD13: Agile Entwicklung bei der shopware AGSCD13: Agile Entwicklung bei der shopware AG
SCD13: Agile Entwicklung bei der shopware AG
 
SCD13: Template Startup
SCD13: Template StartupSCD13: Template Startup
SCD13: Template Startup
 
SCD13: jQuery-Plugin-Entwicklung
SCD13: jQuery-Plugin-EntwicklungSCD13: jQuery-Plugin-Entwicklung
SCD13: jQuery-Plugin-Entwicklung
 
SCD13: Frontend-Tests mit Sikuli
SCD13: Frontend-Tests mit SikuliSCD13: Frontend-Tests mit Sikuli
SCD13: Frontend-Tests mit Sikuli
 
SCD13: Shopware 4 - Shopware Backend Module ganz einfach
SCD13: Shopware 4 - Shopware Backend Module ganz einfachSCD13: Shopware 4 - Shopware Backend Module ganz einfach
SCD13: Shopware 4 - Shopware Backend Module ganz einfach
 
SCD13: Verwendung und Erweiterbarkeit der Rest-API
SCD13: Verwendung und Erweiterbarkeit der Rest-APISCD13: Verwendung und Erweiterbarkeit der Rest-API
SCD13: Verwendung und Erweiterbarkeit der Rest-API
 
SCD13: Die technische Roadmap von Shopware 4
SCD13: Die technische Roadmap von Shopware 4SCD13: Die technische Roadmap von Shopware 4
SCD13: Die technische Roadmap von Shopware 4
 

SCD13: Shopware goes responsive

Hinweis der Redaktion

  1. - tausende Internetfähige Geräte - fast täglich erscheinen neue Geräte - verschiedenste Auflösungen, Seitenverhältnisse und Pixeldichte
  2. - welche Lösungswege gibt es
  3. - höchste Geschwindigkeit - natives Interface - Verkauf über App-Stores - GPS, Adressbuch, Kamera usw.
  4. - pro OS eigene App schreiben - 3 verschiedene Programmiersprachen - Objective-C (iOS), Java (Android + BlackBerry), C# (Windows Phone) - Zulassung im App-Store -- Updates können langsamer zur Verfügung gestellt werden -- App kann rejected werden - sehr hoher Kosten-Faktor
  5. - wir sind hier zum Großteil Web-Entwickler, gibt es hier eine Lösung passende Lösung für uns?
  6. - bekannte Techniken -- CSS, HTML, Javascript - natives Feeling kann nachgeahmt werden -- meist über ein Framework - Erstellung ist günstiger, da nicht pro OS eigene App - keine Installation und externe Zulassung wie native App
  7. - Interface wechselt meist zwischen Webseite und Web-Applikation -- siehe Screenshot von Macy‘s -- natives Feeling wird nur imitiert, was sich für den Benutzer immer langsamer anfühlt -- bei neuen Geräten muss die Web-App meist angepasst werden - Beim Sharing wird man ggf. auf die mobile Seite geleitet
  8. - ...es muss doch eine Lösung für das Problem geben? - Responsive Design
  9. Vorteile: - gleiche Code-Basis - keine ständigen Updates wegen neuen Geräten - Look‘n‘Feel und CI konsistent zwischen den Geräten
  10. - Berühmtestes Beispiel - Boston Globe - es werden alle Endgeräte bedient
  11. - ...was haben wir vor?
  12. - im Folgenden unsere Ideen zum Thema - wir suche den Austausch mit euch
  13. - schauen wir uns die 3 Säulen des Shopware Templates doch genauer an
  14. - Präprozessor für CSS - Variablen, Verschaltelungen, Mixins - unabhängige Styles - border-box zum einfacheren Layouting - Anpassbarkeit ist wichtig, weshalb wir die Selektoren-Tiefe stark verringern werden
  15. - wir haben bis dato unsere Plugins immer selbst geschrieben - Templating in Javascript ist umständlich, da bieten Systeme wie Handlebars.js eine wesentliche Erleichterung - generische Plugins, die eine Vielzahl von Konfigurationsmöglichkeiten bieten - Steuerung erfolgt teilweise mit HTML5-“data„-Attributen -- Twitter-Bootstrap als Beispiel - Unit-Tests mit Jasmine zur Qualitätssteigerung
  16. - das Thema Open Source ist uns wichtig - Wir wollen uns noch mehr in die Richtung bewegen -- wie gerade schon gesagt, wesentlich unabhängiger -- eines Repository auf shopware.de -- NPM-Repo zur Installation -- Landingpage mit ausführlicher Dokumentation -- MIT / GPL
  17. - Verweis auf Jakobs Talk Dependecy Managment in Javascript - Verweis auf meinen jQuery Plugin Talk