Frontend-Entwicklung

Was ist Frontend-Entwicklung?

Das Frontend (kurz "FE") umfasst alle für den Nutzer einer Website im Browser sichtbaren, bzw. erfahrbaren Bestandteile. Frontend-Entwicklung befasst sich demzufolge mit allen technischen Komponenten, die diese Darstellung ermöglichen.

Diese sind:
  • Der Seitenquellcode (HTML)
  • Das Styling (CSS)
  • Die Scripte (JavaScript)
Die Aufgaben der Frontend-Entwicklung:
  • Das Aufbereiten von Daten aus dem Backend in eine für den Endnutzer lesbare/geeignete Struktur in Templates
  • Das Stylen der im Template aufbereiteten Daten gemäß der Design-Anforderungen
  • Das einsetzen von Scripten zur Dynamisierung der Inhaltsausgabe

Frontend-Entwicklung ist hierbei vom Frontend-Design, bzw. Webdesign abzugrenzen.
Frontend-Design konzentriert sich vorrangig auf die Erarbeitung des Designs, während sich die Frontend-Entwicklung mit der technische Umsetzung des angelieferten Designs befasst.

Da ich selber kein Webdesigner bin, setze ich in der Regel ausschließlich angelieferte Screendesigns um.
Gerne vermittle ich Ihnen den Kontakt zu einem kompetenten Webdesigner aus meinem Netzwerk.

 

Anforderungen an zeitgemäße Frontend-Entwicklung

Erstaunlicherweise werde ich auch heute noch oft gefragt, ob die von mir gebauten Websites später auch auf mobilen Endgeräten anzeigbar sind. Hierauf antworte ich mit einem eindeutigen: "Ja!"

Websites auf mobilen Endgeräten in angemessener Art und Weise anzuzeigen gehört schon seit Jahren zum Standard. Einige halten die Aussage "Mobile first." noch immer für eine trendige Idee, jedoch spiegelt diese schlichtweg eine alltägliche Best Practise wieder.

Ich setze alle Projekte generell responsive um. Die Entscheidung ob Fixed- oder Fluid-Grid überlasse ich dabei meinen Kunden, bzw. den verantwortlichen Designern.

Anfragen zur Umsetzung von Adaptive-Designs lehne ich in der Regel ab, da dieser Ansatz zum einen nicht mehr dem Zahn der Zeit entspricht und zum anderen in seinem Nutzen nicht seinem Aufwand gerecht wird.

 

CSS-Preprozessoren, Build-Tools, Template-Engines

Modulare Entwicklung

Mit Hilfe ausgewählter CSS-Preprozessoren, Build-Tools und Template-Engines lässt sich ein modulares Feature-Management realisieren.

Dieses bringt diverse Vorteile mit sich:
  • Einzelne Frontend-Features lassen sich als eigenständige Einheiten integrieren und wieder entfernen.
  • Abhängigkeiten von Modulen lassen sich sauber auflösen.
  • Fehler lassen sich leichter finden, da der zuständige Code schnell identifiziert ist.
  • Ergänzungen zu bestehenden Features sind schnell realisierbar.
  • Das schreiben von Styles und Templates wird für Entwickler durch diverse Hilfsmittel und optimierte Schreibweisen signifikant erleichtert.
Build-Tools nehmen im allgemeinen folgende Aufgaben wahr:
  • Kompilierung von Assets mit Hilfe von Preprozessoren.
  • Kombinieren von Assets.
  • Komprimieren und optimieren von Assets.

Die Verarbeitung von Frontend-Assets durch Build-Tools ist ein wesentlicher Hebel zur Optimierung der Seitenladezeit. Statt viele einzelne Style- oder Script-Dateien zu laden, welche ggf. nicht komprimiert und optimiert sind, können dem Nutzer hoch optimierte Dateien bereitgestellt werden, die nur einen Bruchteil an Bandbreite im Vergleich zu den ursprünglichen Assets benötigen.

Durch eine module Entwicklung lassen sich Features mit komplexen Anforderungen schnell und isoliert aufbauen, testen und integrieren. Hierzu zählen auch externe Dienste, die via API integriert werden, wie etwa Video-Dienste, Google-Services oder Social-Media-Integrationen.

 

Prototyping & Theme-Erstellung

In manchen Fällen ist es sinnvoll das Frontend unabhängig vom Backend zu entwickeln. Hierzu zählen mitunter das Prototyping und die Theme-Erstellung.

Beim Prototyping ist es das Ziel den "Look and Feel", die Funktionalität oder diverse Usability-Fragestellungen für ein geplantes oder ein zu erweiterndes Projekt zu skizzieren. Das Ergebnis kann u.a. als Präsentationsmedium (z.B. für Investoren-Pitches) oder für wichtige Planungsentscheidungen herangezogen werden.

Im Aussehen sind Prototypes eher reduziert, in manchen fällen sogar annähernd komplett ungestyled. Je nach zu erfüllenden Kriterien werden nur spezifische Aspekte ausgearbeitet. Als sogenannter Click-Dummy sind Menüpunkte und andere Interaktionspunkte anklickbar und veranschaulichen so z.B. User-Wege und Usability-Hürden. Frontend basierte Key-Features können in ein Applikationsskelett eingebettet und fokussiert aufgebaut werden.

Die Theme-Entwicklung geht einen Schritt weiter als das Prototyping. Über den puren Click-Dummy hinaus werden Styles und andere Frontend-Feature nicht nur skizziert, sondern komplett ausgearbeitet. Sollte eine Backend-Anbindung geplant sein, wird diese auf allen Ebenen bei der Erstellung der Komponenten berücksichtigt, ohne dass das tatsächliche Backend angebunden wird.

Ein übliches Szenario, in dem eine Theme-Erstellung sinnvoll sein kann, ist eine Situation, in der das Backend auf noch unbestimmte Zeit nicht zur Anbindung zur Verfügung steht. Dies kann mitunter bei einem Relaunch der Fall sein, bei dem Frontend- und Backend-Entwicklung zeitgleich gestartet werden sollen, um zu einem geeigneten Zeitpunkt miteinander verheiratet zu werden.

Beide Bereiche setze ich seit 2013 regelmäßig für diverse Kunden um. In einem kleinen Custom-Framework erarbeite ich Step-by-Step Struktur und Feel von Websites oder Web-Applikationen. Verzeichnisstrukturen, Asset-Management, Templates und Routings sind hierbei oft am Ziel-Backend (Framework oder CMS) orientiert.

Es kommt mir meine Erfahrung mit den unterschiedlichsten CMS und Frameworks zu gute, die jeweils mit diversen spezifischen Frontend-Anforderungen aufwarten, als auch gute Erfahrungen in der Zusammenarbeit mit anderen Entwickler-Teams. Eine gute Zusammenarbeit mit dem Backend-Team ist darüber hinaus von Anfang an erforderlich, um Backend-Anforderungen rechtzeitig in den Frontend-Aufbau zu übernehmen und den Merge-Prozess bereits frühzeitig regelmäßig durchzuspielen.

 

Vorzüge:

  • Zeitlich versetzter Start der Umsetzung (Frontend zu Backend) möglich
  • Keine tiefe Einarbeitung in eine ggf. bereits existierende Backend-Infrastruktur zwingend notwendig
  • Frontend-Entwicklung braucht nicht das ggf. komplexe Gesamtprojekt um zu starten
  • Kein Zugang zu kritischer/sensibler Backend-Infrastruktur notwendig (Daten-Sicherheit)
  • Seperater Pitch für Backend- und Frontend-Umsetzung möglich (nur die besten aus jedem Fachbereich)

Nachteile:

  • Zusammenfügen von Frontend und Backend erfordert ggf. manuelle Anpassungen an Assets und Templates, bedingt durch problematische Backend-Anforderungen (z.B. Templating in Typo3), wodurch Mehraufwände entstehen können

Mail-Templates

Von System-Mails bis hin zu komplexen Newslettern setze ich leicht anpassbare und hoch kompatible E-Mail-Templates um.

  • Desktop- und Mobile-Optimiert
  • Multi-Part-Mails (HTML + Plain-Text)
  • Modularer Aufbau der Content-Abschnitte
  • Leichte Content- & Style-Anpassungen
  • Kompatibel zu externen Mail-Services (z.B. MailChimp)

Newsletter-Kampagne geplant?