Was bedeutet Frontend?

Mit dem Begriff Frontend wird der Bereich einer Website oder eine Software-Anwendung bezeichnet, den der Nutzer zu sehen bekommt und mit dem er interagiert. Das Wort Frontend ist englischen Ursprungs und bedeutet in die deutsche Sprache übersetzt so viel wie „vorderes Ende“. Im Gegensatz hierzu gibt es das sogenannte Backend, das im Hintergrund einer Website oder App angesiedelt ist und für den normalen Nutzer nicht sichtbar ist. Vom Frontend ist insbesondere im Bereich der Softwareentwicklung die Rede, wo eine strikte Einteilung zwischen dem sichtbaren und dem verborgenen Teil einer Anwendung gemacht wird. Der sichtbare Bereich einer Webanwendung wird auch oft als Benutzeroberfläche oder GUI (Graphic User Interface) bezeichnet. Dort werden dem Besucher der Website Inhalte und Bedienelemente präsentiert. Darüber hinaus nimmt der vordere Bereich auch alle Eingabe des Anwenders auf und leitet diese dann zur Verarbeitung an das Backend weiter. Das Frontend umfasst also alles, was die Nutzer sehen können, inklusive aller Inhalte und Navigationselemente.

Benutzeroberflächen und GUIs

Heutzutage kommt keine Software– oder Webanwendung mehr ohne ein dediziertes Frontend aus. Jede Anwendung muss eine Benutzeroberfläche bereitstellen, über die Nutzer mit der jeweiligen App interagieren. Im Kontext des World Wide Web setzen sich Apps aus einem Front- und einem Backend zusammen. Falls Sie als Nutzer vom Frontend eines Content-Management-Systems sprechen, dann wird damit die grafische Oberfläche Website gemeint, auf der die Besucher die veröffentlichten Inhalte zu sehen bekommen.

Das Frontend ermöglicht in einem Webshop die gesamte Kaufabwicklung zu realisieren – von der Suche nach einem bestimmten Produkt durch den Einsatz von Filtern, über die Ablage des Produkts in einer Wunschliste oder im Warenkorb bis hin zur Auswahl der Zahlungsmethode und der erfolgreichen Erfüllung der Bestellung. Nicht immer muss ein Frontend in manueller Arbeit am Quellcode an die individuellen Anforderungen angepasst werden. Für alle modernen Content-Management-Systeme gibt es Vorlagen (Templates), die sich schnell und einfach auf das bestehende CMS aufspielen lassen. Durch den Einsatz solcher Templates können Shopbetreiber unterschiedliche Layouts testen und implementieren, ohne dass dafür viel Programmierarbeit nötig ist.

Dynamische Frontends mit multimedialen Inhalten

Moderne Frontends, die mit aktuellen Technologien wie Angular oder React erstellt werden, sind keinesfalls unbedingt mehr statisch. Durch den Einsatz von JavaScript und CSS können Anwendungen innerhalb eines Frontends realisiert werden. Bei vielen Websites aktualisieren sich bestimmte Teile der Seite automatisch, ohne dass der Besucher die Webseite neu laden muss. Diese und ähnliche Funktionalitäten werden schnell ersichtlich, wenn man zum Beispiel einen Blick auf den oberen Teil der Twitter-Timeline wirft. Wenn es um die Optimierung der Konversion innerhal eines Onlineshops geht, dann ist das Frontend in der Regel die erste Anlaufstelle für Veränderungen. Dabei kommt der Anordnung der Navigationselemente und der für die Konversion entscheidenden Buttons und Call-to-Action-Banner eine bedeutende Rolle zu. Betreiber von Webshops denken bei der Frontend-Optimierung auch oft über die richtige Platzierung von Gütesiegeln, Bilder und Videos nach. Darüber hinaus gehören auch die Optimierung der Ladezeit und des Cachings der Website zu den Frontend-Optimierungsmaßnahmen.

Die Bedeutung des Frontends für die Suchmaschinenoptimierung (SEO)

Das Frontend hat einen beachtlichen Einfluss auf die Bewertung einer Webpräsenz durch Google und Co. Die meisten vorgefertigten Templates für CM-Systeme sind mit sämtlichen Voraussetzungen für ein suchmaschinenoptimiertes Frontend versehen. Ein Frontend, das einer Suchmaschinenoptimierung unterzogen wurde, beginnt mit einem sauberen und übersichtlichen HTML-Code, einer Robots.txt und den entsprechenden URLs. Duplicate Content sollten Sie unbedingt vermeiden, da Sie sonst ein schlechteres Ranking in den SERPs bei Google und Co. riskieren. Außerdem sollten Flash-Inhalte und Framesets ebenfalls nach Möglichkeit gemieden werden, da solche Inhalte von den Suchmaschinen-Bots nicht ausgelesen und analysiert werden können. Eine übersichtliche interne Verlinkung, die Einbindung einer Sitemap sowie die Implementierung einer Breadcrumb-Navigation (Brotkrümelnavigation) erleichtern dem Suchmaschinen-Crawler den Content der Website genauer zu verstehen und sie besser zu indexieren. Eine sinnvoll eingebundene Breadcrumb-Navigation hilft auch den Nutzern, einfacher und schneller auf der Website zu navigieren. Da Usability bei Google als wichtiger Rankingfaktor gilt, muss auch im Sinne der Suchmaschine die Webpräsenz mit einer möglichst optimierten Usability ausgestattet sein.

Ein modernes Frontend sollte außerdem schlank sein und schnelle Ladezeiten der Website ermöglichen. Dies ist heutzutage sehr wichtig, da immer mehr User mobil im World Wide Web unterwegs sind und somit keine performante DSL-Leitung zur Verfügung steht. Des Weiteren sollte eine jede Seite im Rahmen des Frontends mit einer Meta-Description und einem Titel versehen sein, da diese Informationen in den SERPs angezeigt werden und für die Suchmaschinenoptimierung dementsprechend wichtig sind.

Zusammenfassend betrachtet ist das Frontend der Teil einer Webseite, den ein normaler Anwender ohne große Programmierkenntnisse nutzen kann. Im Gegensatz zum Backend, bei dem Programmierkenntnisse Vorraussetzung sind.