Home » AR » Erfolgreiche Magento Shops brauchen durchdachte Architekturen
Frontend Architektur

Erfolgreiche Magento Shops brauchen durchdachte Architekturen

Lange Zeit wurde das Thema Frontend auf Entwicklungsseite nicht allzu kritisch gesehen. Ein wenig HTML und CSS konnte ja jeder. Mit steigender Komplexität von Frontendstrukturen und Technologien steigen jedoch die Anforderungen an die Entwicklung.

 

Anforderungen an Frontend-Entwickler

Ihre Aufgabe ist es, Design-Vorlagen in anspruchsvolle Templates und Funktionen umzusetzen und sie optimal in die Shopoberfläche zu integrieren. Für die Gestaltung moderner Magento Shops auf Basis der Enterprise Edition sind umfangreiche Kenntnisse in HTML5, CSS3 aber auch in verschiedenen Frameworks oder Javascript-Bibliotheken wie jQuery nötig. Hinzu kommt neben der Umsetzung von Responsive Webdesign auch der Einsatz der Präprozessoren SASS und LESS. Erfahrungen in diesen Bereichen und idealerweise ein Grundverständnis für PHP sind notwendig.

 

Einsatz von SASS und LESS in Magento Shops

Diese Sprachen sind von Entwicklern für Entwickler gemacht und erleichtern den Umgang mit CSS. Mit SASS und LESS lassen sich vorab Variablen und Logiken definieren, was in CSS so nicht möglich ist. Anstatt wiederkehrende Elemente im Frontend immer wieder neu zu definieren, kann dies nun quasi an einer zentralen Stelle erfolgen, was den Programmieraufwand und die Fehleranfälligkeit wesentlich reduziert. Mehr dazu gibt es auch in meinem Vortrag auf der Meet Magento am 12. Mai.

 

Frontend Architekten = Ingenieure, Designer und noch mehr

Für den sinnvollen Einsatz von LESS/SASS gilt das gleiche wie für alle anderen Methoden und Technologien in der Frontendentwicklung. Man muss immer die gesamte Struktur einer Seite vor Augen haben. Ein gutes Design über alle Bereiche, nutzerfreundliche Features und ein hohes Maß an Customizing aufgrund von individuellen Kundenwünschen machen moderne Magento-Shops – egal ob B2C oder B2B – zu wirklich komplexen Angelegenheiten. Diese Komplexität gilt es zu begreifen und auf allen Ebenen zu steuern. Dazu braucht es im Einzelnen:

  • eine saubere Programmierung und klare Strukturierung des Frontends
  • das technologische Know-how und die Methodensicherheit
  • eine eindeutige Trennung von Entwicklungsaufgaben und deren sinnvolle Verteilung
  • das Verständnis für die Design-Vorlagen und die Fähigkeit, sie in Code zu übertragen
  • die Verbindung von strategisch-wirtschaftlichem und operativem Denken

Projekte brauchen einen rationalen Ansatz

Eine Forderung an Frontend Architekten ist etwa, dass Elemente so aufgebaut sind, dass sie jederzeit wiederverwendet werden können. Der initiale Aufwand ist dabei etwas höher, da man von der konkreten Aufgabenstellung abstrahieren und globaler denken muss. Nehmen wir beispielsweise eine kundenindividuell gestaltete Tabelle zur Darstellung von Produktgruppen. Wo wird ein ähnliches Element noch eingesetzt? Wo kann die Struktur noch Anwendung finden? Vielleicht bei Produktinformationen oder Serviceübersichten? Das Element muss also so definiert werden, dass es sich nicht nur in diesem Anwendungsfall, sondern auch in ähnlichen Fällen sinnvoll verwenden lässt – am besten auch über das eine Kundenprojekt hinaus.

Dazu hat sich bei uns als Best Practice durchgesetzt, die Frontentwicklung von Anfang an – also schon im Konzept und Design – zu berücksichtigen und sie auch nicht losgelöst von anderen Projektschritten oder Entwicklungsaufgaben zu sehen. Als Resultat können wir die Qualität unserer Projekte stetig verbessern.

 

Quer denken – straight handeln

So kommt schon viel zusammen, was es beim Thema Frontend zu beachten gilt. Das besonders faszinierende am Job des Frontend Architekten ist aber die Notwendigkeit über vorhandene Methoden und bekannte, erprobte Strukturen hinaus zu denken. Es geht darum, auch mal neue Wege zu beschreiten und etablierte Standards hinter sich zu lassen. Das haben wir etwa mit der Entwicklung unserer Boilerplate realisiert, bei der wir den Einsatz der Magento-Templates und Styles innovativ weiterentwickelt haben.

 

Wollen Sie mehr über das Thema wissen? In unserem Whitepaper „E-Commerce-Projekte erfolgreich umsetzen“ erläutern wir Ihnen alles zum Thema Aufbau einer E-Commerce-Plattform und der damit verbundenen Digitalisierung.

 

Laden sie sich die PDF-Datei jetzt kostenlos herunter!

Whitepaper "E-Commerce-Projekte erfolgreich umsetzen"

 

Ihr Kontakt

Hartwig Göttlicher
Head of Business Development
KI-Agenten im Einzelhandel: Die Zukunft der Automatisierung 
Roboterhand schiebt einen kleinen Einkaufswagen mit Paketen – Symbol für KI-Agenten im Einzelhandel bzw. intelligente Automatisierung im Einzelhandel.

Entdecke, wie KI-Agenten den Einzelhandel revolutionieren – mit Automatisierung, Personalisierung und Wettbewerbsvorteilen für Händler!

Digitalisierung Baubranche: So funktionieren erfolgreiche Onlineshops für den Baustoffhandel
Ein Mitarbeiter des Baustoffhandels prüft digitale Bestellprozesse am Laptop – Beispiel für die Digitalisierung in der Baubranche

Erfahren Sie, wie Digitalisierung die Baubranche verändert – mit Best Practices zu Onlineshops im Baustoffhandel. Jetzt hier lesen!

Kostenoptimierung im digitalen Vertrieb: Erfolgreich Servicekosten im After Sales senken
Eine Person im grauen Anzug hält ein Smartphone in der Hand. Über dem Gerät sind zwei Infografiken eingeblendet: Links ein steigendes Balkendiagramm mit dem Begriff „Quality“ und einem nach oben gerichteten Pfeil, rechts ein fallendes Diagramm mit dem Begriff „Cost“ und einem abwärts gerichteten Pfeil. Die Visualisierung symbolisiert Kostenoptimierung im digitalen Vertrieb – durch höhere Qualität bei gleichzeitig sinkenden Kosten, etwa durch Prozessautomatisierung im After Sales.

Entdecken Sie, wie Prozessautomatisierung & Self-Service-Portale Ihre After-Sales-Kosten optimieren & die Kundenzufriedenheit steigern!

Wie funktioniert die Anbindung von SAP ERP und Magento E-Commerce Plattform?
Hand tippt auf virtuellen SAP-Button

Jetzt erfahren, wie die Integration des SAP ERP in eine Magento E-Commerce Plattform optimal und effizient gelingt!

B2B Kundenbindung: Welche erfolgreichen Maßnahmen setzt der Großhandel im E-Commerce ein?
Collage aus Bildern, die Beschäftigte unterschiedlicher Branchen bei der Arbeit zeigen.

Maßnahmen zur Kundenbindung spielen im B2B Großhandel eine entscheidende Rolle für den Erfolg. Jetzt hier valantic Beispiele aus der Praxis!

B2B Online-Shop: Die 5 wichtigsten Anforderungen für Erfolg
Zwei Mitarbeitende in Werkstattumgebung analysieren gemeinsam Daten auf einem Laptop – sinnbildlich für die Digitalisierung im B2B bzw. für den Weg zum zukunftssicheren B2B Online-Shop.

Erfahren Sie, welche 5 Faktoren für den B2B Online-Shop 2025 entscheidend sind – von Self-Service bis Systemintegration. Jetzt informieren!

Personalisierung: Volles Potenzial mit Adobe Journey Optimizer
Eine Frau arbeitet konzentriert an einem Holztisch mit Laptop, Smartphone und Unterlagen. Auf dem Laptop ist eine grafische Benutzeroberfläche zu sehen, auf dem Smartphone eine Nachricht oder Anwendung. Die Szene symbolisiert datenbasiertes und kanalübergreifendes Arbeiten. Der Adobe Journey Optimizer, in dem es in dem Blogbeitrag geht, ermöglicht solche vernetzten Echtzeit-Interaktionen.

Personalisierung mit Adobe Journey Optimizer, Adobe Analytics und Adobe Target – volles Potenzial nutzen. Lesen Sie hier die Details!

B2B-Marketing neu gedacht – präzise, relevante Kundenansprache mit Adobe Marketo Engage 
Im Vordergrund hängt eine große, eingeschaltete Glühbirne mit sichtbarem Glühfaden von der Decke herab. Sie ist scharf fokussiert und leuchtet warm. Im unscharfen Hintergrund sitzen mehrere Personen an einem Tisch zusammen, offenbar in einer Besprechung oder Diskussion. Die Wand hinter ihnen ist dunkelblau gestrichen, die Atmosphäre wirkt konzentriert und kreativ.

Adobe Marketo Engage automatisiert Ihre Prozesse im B2B-Marketing und steigert die Lead-Qualität. Lesen Sie hier die Details!

Über den Autor