Direkt zum Inhalt springen Direkt zur Navigation springen Direkt zum Footer springen

Frontend - so sieht's dann aus.

Frontendentwicklung ist heutzutage mehr als HTML und CSS. Vor allem responsive und adaptive Designs erfordern ein hohes Maß an Planung und Genauigkeit.

Die Entwicklung des Frontends erfolgt bei mir immer mit einem Frontendprototypen. Dadurch kann der Kunde bereits vor Integration in das CMS die Website in verschiedenen Geräten, Auflösungen betrachten. Hier können Sie zum Beispiel den Frontendprototypen dieser Webseite ansehen (normalerweise ist der Prototyp natürlich vor fremdem Zugriff geschützt). Javascriptfunktionen sind bereits integriert und der Kunde erhält frühzeitig ein "Look and Feel" seiner Website. Ein Prototyp erleichtert außerdem die spätere Umsetzung in TYPO3.

Ich arbeite mit SASS und eigens entwickelten Buildprozessen, um das Deployment und die Integration zu vereinfachen und Änderungen schnell umsetzen zu können. Selbstverständlich werden alle Dateien minifiziert und konkateniert, um Ladezeiten gering zu halten.

Der Prototyp umfasst folgende Tasks:

  • Kompilierung der Sass Dateien zu CSS mit Autoprefixing
  • Kompilierung von Javascript mit babel, Bündelung mit Browserify, Parsing, Minifying, Compressing und Beautyfying mit Uglify
  • Zusammenfassung von SVG Icons und Bildern zu einem svg Sprite
  • Zusammenfassung von Bildern (png, jpg, usw.) zu einem png Sprite
  • Deployment der HTML Dateien, CSS und Javascript auf Live oder Development Server

Das besondere an meinem Prototypen ist, dass er sich hervorragend mit TYPO3 versteht. Normalerweise funktioniert die Entwicklung einer Website so:

  • Design geht vom Designer ins Frontend
  • Frontend baut ein eigenes Markup für den Prototypen
  • Markup geht ans Backend

Im letzten Schritt muss also das Markup in TYPO3 komplett angepasst werden. Dieser Schritt entfällt bei mir, weil ich das originäre Markup verwende, wie es TYPO3 ausspuckt. Alles aus einer Hand sozusagen und dadurch schlank und schnell.

Ich arbeite nach dem Prinzip "Mobile First". Dabei wird also zunächst für mobile Geräte entwickelt und dann die Bildschirmauflösungen hoch gedreht. In diese Richtung zu arbeiten ist effektiver, als mit den Desktop Varianten zu beginnen.