Frontend.

Das Frontend ist alles, was im Browser eurer Besucher passiert. Dazu gehören Aufbau und Gestaltung der Seiten, Navigation, Formulare, Bilder und Animationen. Technisch besteht es aus HTML, CSS und JavaScript. Das Gegenstück ist das Backend, das auf dem Server Daten speichert und verarbeitet. Für Unternehmen zählt das Frontend doppelt: Es prägt den ersten Eindruck der Marke und entscheidet, wie schnell und bedienbar die Website ist.

So funktioniert das Frontend

Der Browser lädt Dateien vom Server und setzt daraus die Seite zusammen. Laut MDN kümmert sich Code im Browser vor allem um Aussehen und Verhalten der Seite, etwa Layout, Navigation und das Prüfen von Formulareingaben. Er hat kaum Zugriff auf das Betriebssystem des Geräts. Weil niemand steuern kann, welchen Browser ein Besucher nutzt, gehört laut MDN der saubere Umgang mit unterschiedlicher Browserunterstützung zu den Kernaufgaben.

Viele moderne Websites bauen Teile der Seite erst per JavaScript im Browser auf. Google kann solche Seiten laut eigener Dokumentation rendern, nennt serverseitiges Rendering oder Pre-Rendering aber weiterhin eine sehr gute Option, weil Seiten dadurch für Nutzer und Crawler schneller werden und nicht alle Bots JavaScript ausführen können.

Worauf ihr im Unternehmen achten solltet

Messt das Frontend auf echten Geräten, nicht am Firmenrechner. Große Bilder, Schriften und Skripte kosten am Handy die meiste Zeit. Die Core Web Vitals zeigen, wie schnell und stabil eure Seiten bei Besuchern laden.

Verlasst euch bei Formularen nicht auf die Prüfung im Browser. MDN warnt ausdrücklich, dass sich Prüfungen im Browser leicht umgehen lassen. Eingaben müssen zusätzlich auf dem Server geprüft werden.

Denkt Barrierefreiheit von Anfang an mit. Kontraste, Tastaturbedienung und verständliche Beschriftungen entstehen im Frontend. Wie eure Seite dabei abschneidet, zeigt der BFSG-Check. Ein Design-System sorgt dafür, dass Bausteine überall gleich funktionieren.

Räumt externe Skripte regelmäßig auf. Chat-Widgets, Tracking und eingebettete Karten laufen alle im Frontend. In Relaunch-Projekten sehen wir oft, dass sich über die Jahre viele solcher Einbindungen angesammelt haben, von denen niemand mehr weiß, wofür sie da sind.

Häufige Fragen zum Frontend

Was macht ein Frontend-Entwickler? Er setzt das Design in HTML, CSS und JavaScript um, sorgt für eine saubere Darstellung auf allen Bildschirmgrößen und bindet Daten aus dem Backend oder einer Schnittstelle ein.

Ist Frontend dasselbe wie UI-Design? Nein. UI-Design legt fest, wie die Oberfläche aussieht. Das Frontend ist die technische Umsetzung, die im Browser läuft.

Lässt sich das Frontend austauschen, ohne alles neu zu bauen? Teilweise. Bei einem Headless-Ansatz ist das Frontend vom Inhaltssystem getrennt und lässt sich unabhängig erneuern. Bei klassischen Systemen hängen Design und Inhaltspflege enger zusammen.

Wie euer Frontend auf Besucher wirkt und wo es hakt, zeigt euch der Design-Check.