Frontend


Als Frontend (auch: Front-End, Front end; deutsch: vorderes Ende) bezeichnet man den Teil einer Website, den der Besucher sehen kann. Es umfasst alle dargebotenen Inhalte, die öffentlich oder für eingeloggte User sichtbar sind.

Ausgestaltung eines Frontends

Das Frontend wird oft auch Benutzeroberfläche (englisch: GUI – Graphic User Interface) genannt, weil es sich um die Oberfläche handelt, die der Besucher zu sehen bekommt und nutzen kann. Das Frontend wird unter hauptsächlich genutzt, um verschiedenste Arten von Inhalten anzuzeigen und die Eingaben des Users dem Backend verfügbar zu machen. Zu den angezeigten Inhalten gehört einerseits der grundsätzliche Aufbau der Website, der beispielsweise die Navigation umfasst. Andererseits umfasst das Frontend Texte, Grafiken, Videos und andere Medien.

Anwendungsbeispiele

Die meisten Softwareanwendungen besitzen ein Frontend. Selbst bei einer Datenbank, bei der ein Großteil der Prozesse im Hintergrund und für den Nutzer unsichtbar abläuft, gibt es eine grafische Benutzeroberfläche, beispielsweise die ausgegebene Tabelle nach einer Datenabfrage. Webbasierte Anwendungssysteme teilen sich heute fast immer in ein Frontend und ein Backend auf. In einem Content Management System bezeichnet man als Frontend die Oberfläche, in der der Besucher die veröffentlichten Inhalte einsehen kann. Bei einem Shopsystem gibt es über das Frontend zusätzlich die Möglichkeit, Waren zu erstehen, sich in einen Newsletter einzutragen, sich beraten zu lassen und vieles mehr. In Foren und Communities können die Benutzer über das Frontend Informationen einsehen und sie zugleich mitgestalten, sich aktiv einbringen und Ratschläge erteilen.

Funktionserweiterung im Frontend

Zusätzlich zur reinen Anzeige von Inhalten können durch verschiedene Programmiersprachen (z. B. CSS, JavaScript) verschiedenste Funktionen in das Frontend integriert werden, beispielsweise Live Chats, Verbindungen zu Social Media Diensten oder die Einblendung von Werbebannern. Bei Webseiten, die häufig Neuerungen bieten, wie es beispielsweise bei einigen Social Media-Diensten der Fall ist, aktualisiert sich das Frontend teilweise automatisch, ohne dass der User hierfür manuell einen Refresh auslösen müssen.


Frontend.png

Konversionsoptimierung im Frontend

Das Frontend einer Website ist maßgeblich für die Konversionen verantwortlich. Es gibt eine Vielzahl von Kriterien, anhand derer im Frontend die Konversionsrate optimiert werden kann:

  • Seitenladezeiten
  • Verfügbarkeit der Website
  • Einsatz von Caching
  • hochwertiges Design der Startseite
  • Einsatz von Gütesiegeln
  • durchgängiger Einsatz von Produktbildern
  • Angebot von Filter- und Suchfunktionen
  • gute Nutzerführung über die Navigation
  • Einsatz von Call-to-Action Elementen
  • übersichtliche und einfache Weitergabe von Informationen

Es ergibt sich eine große Auswahl an möglichen Ansatzpunkten, beispielsweise die Inhalte, das Design, die Nutzerführung, die Präsentation des Angebots, die Navigation, die Usability, die eingesetzten Formulare, die Ladezeiten und viele weitere. Anhand eines prominenten Beispiels zeigt dieses YouTube-Video, wie Conversion-Optimierung im Onlineshop funktioniert.

Die Rolle von Templates für das Frontend

Bei vielen webbasierten Systemen kann das Frontend über den Quellcode individuell angepasst werden. Bei gängigen Content Management- und Shopsystemen ist es zudem möglich, mithilfe vorgefertigter Templates das Design beliebig zu verändern. Dadurch können Shopbetreiber sehr einfach verschiedene Layouts, Anordnungen der Inhaltsblöcke auf der Website und Navigationsmöglichkeiten testen. Diese Systeme zeichnen sich dadurch aus, dass sich die Inhalte dynamisch und ohne Kompatibilitätsprobleme an das gewählte Design anpassen.

Bedeutung für die Suchmaschinenoptimierung

Das Frontend spielt auch für die Indizierung durch Suchmaschinen eine große Rolle. Im Idealfall setzen Websitebetreiber sogenannte SEO-Templates ein, die gewisse Voraussetzungen für eine bessere Indizierung erfüllen. Hierzu gehören beispielsweise:[1]

Einzelnachweise

Weblinks