Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

SCD13: Shopware goes responsive

4.065 Aufrufe

Veröffentlicht am

Shopware plant in der zweiten Jahreshälfte das Release einer neuen responsive Template-Basis, Sie erfahren in diesem Slot die ersten Infos dazu.

  • Ich bin auch klarer Befürworter von SASS (+ Compass), aber verstehe auch, wenn andere auf LESS schwören.

    Optimal wäre es natürlich, wenn jeder selbst entscheiden könnte. Das würde auch gut zu den angekündigten Vorteilen passen: Stichwort 'Choose your favorite tools'!
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Warum denn LESS und nicht Sass? Gerade in Verbindung mit Compass (welches z.B. Sprites generiert und mit Bildgrößen rechnen kann) übersteigt Sass doch bei Weitem die Möglichkeiten von LESS.

    Wäre echt schade :(
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Gehören Sie zu den Ersten, denen das gefällt!

SCD13: Shopware goes responsive

  1. 1. SHOPWARE GOES RESPONSIVESTEPHAN POHL - CORE ENTWICKLER
  2. 2. DAS PROBLEM
  3. 3. 1000 UND 1 INTERNET-DEVICE...UND ES WERDEN TÄGLICH MEHRCC by 2.0 - andreasdantz
  4. 4. NATIVE APPLIKATION
  5. 5. NATIVE APPLIKATIONNATIVE APPLIKATIONVORTEILE- native Geschwindigkeit- perfekt angepasst ans Endgerät- Distribution über die App-Stores- voller Zugriff auf Gerätefunktionen
  6. 6. NATIVE APPLIKATIONNATIVE APPLIKATIONNACHTEILE- für jedes Betriebssystemeine eigene App- 3 verschiedene Sprachen- externe Zulassung- Kosten / Nutzen FaktorCC by 2.0 -eschipul
  7. 7. WEB APPLIKATION
  8. 8. WEB APPLIKATIONWEB APPLIKATIONVORTEILE- bekannte Web-Technologien- natives Feeling wird nachgeahmt- Erstellung günstiger als native App- keine Installation notwendig- keine externe Zulassung
  9. 9. WEB APPLIKATIONWEB APPLIKATIONNACHTEILE- Benutzer wird verwirrt, da meistanderes Interface- Natives Feeling wird nur imitiert- Anpassungen bei neuen Geräten- meist eigene Subdomain
  10. 10. DIE LÖSUNG
  11. 11. WAS IST RESPONSIVE?SMARTPHONE, TABLET ODER SMART-TV„ONE SITE FOR EVERY SCREEN“Image credit: http://johnpolacek.github.com
  12. 12. DIE LÖSUNG - RESPONSIVE DESIGNQuelle: www.bostenglobe.com
  13. 13. EMOTION GOES RESPONSIVE
  14. 14. DAS SIND UNSERE IDEENWIR BEFINDEN UNS IN DER KONZEPTIONSPHASEUND STELLEN IHNEN UNSER AKTUELLES KONZEPTVOR
  15. 15. DIE 3 SÄULEN DES TEMPLATESCSS JAVASCRIPT HTML
  16. 16. CASCADING STYLE SHEETS
  17. 17. 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
  18. 18. CASCADING STYLE SHEETS - CODE BEISPIEL
  19. 19. JAVASCRIPT
  20. 20. JAVASCRIPT- jQuery (1.9x / 2.x) als Framework- Handlebars.js für Templating- Hoch konfigurierbar- Steuerung durch HTML5 „data“-Attribute- Unit-Test Abdeckung
  21. 21. 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
  22. 22. HTML / SMARTY
  23. 23. HTML / SMARTY- HTML5 als neuer Standard- Widget-basierender Aufbau- drastische Erweiterung der Blöcke- Einheitliches Naming-SchemaBild-Quelle:http://en.wikipedia.org/wiki/HTML5
  24. 24. HTML / SMARTY - CODE BEISPIEL
  25. 25. GRUNT.JSBild-Quelle: http://gruntjs.com
  26. 26. 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
  27. 27. WELCHE VORTEILE HABE ICH DAVON?
  28. 28. WELCHE VORTEILE HABE ICH DAVON?- State-of-the-art Technologie- „Choose your favorite tools“- vereinfachte Workflows- maximale Flexibilität- Aktives Contributing auf github.comBild-Quelle: http://octodex.github.com/front-end-conftocat/
  29. 29. WAS IST IN DER PIPELINE?
  30. 30. BOILERPLATE-TEMPLATE
  31. 31. BOILERPLATE TEMPLATE- komplettes Shopware Template- minimales Styling- jQuery Plugins optional- dient als GrundlageZielplattformen:
  32. 32. EMOTION-TEMPLATE
  33. 33. 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
  34. 34. PLANUNG / ZEITPLANBOILERPLATE-TEMPLATEINTEGRATION GRUNT.JS UND NPMRESPONSIVE EMOTION TEMPLATETEMPLATE MODULE
  35. 35. VIELEN DANK!

×