Schnelle Frontend-Entwicklung im Zeitalter der KI

Die Struktur Ihrer Website steht, und das Menü enthält alle passenden Einträge, aber Sie haben noch nicht geklärt, wohin die Einsendungen über das Kontaktformular gehen sollen. Die gemeinsame Kopfzeile muss auf sechs Seiten aktualisiert werden, und jemand muss noch eine Version für die Prüfung durch den Kunden vorbereiten.

Diese Aufgaben bestimmen, wie schnell eine Website produktionsreif ist. Ein Tool, das ein ansprechendes Layout generiert, hilft beim ersten Entwurf. Ein guter Entwicklungsworkflow erleichtert es, spätere Änderungen zu verwalten und zu testen.

Bei der schnellen Frontend-Entwicklung kommen wiederverwendbare Komponenten und Schnittstellen zum Einsatz; sie ermöglicht visuelle Bearbeitung und unterstützt schnelle Feedbackzyklen, wodurch sich die Entwicklungszeit deutlich verkürzt. Low-Code-Tools machen diesen Ansatz möglich, indem sie Ihnen erlauben, Seiten zusammenzustellen und Funktionen zu konfigurieren, ohne jedes Element manuell erstellen zu müssen.

Dieser Leitfaden vergleicht acht Plattformen für verschiedene Projekttypen und erläutert anschließend einen praktischen Workflow in TeleportHQ. Die Beispiele behandeln eine Dienstleistungswebsite und ein mit Daten verknüpftes Verzeichnis. Außerdem zeigen sie, wann Sie Anwendungsfunktionen benötigen, was sich durch deren Ergänzung ändert und wie Sie unnötigen Aufwand vor dem Start vermeiden.

Was schnelle Frontend-Entwicklung umfasst#

Das Frontend bezeichnet den sichtbaren Teil einer Website oder App, mit dem Menschen interagieren. Dazu gehören beispielsweise Seitenlayouts, Menüs und Schaltflächen sowie alle anderen visuellen Elemente. Wenn jemand ein Verzeichnis filtert, ein Formular ausfüllt oder einfach durch eine App oder Website navigiert, interagiert er mit dem Frontend.

Sobald die Anforderungen feststehen, kommt die schnelle Entwicklung ins Spiel: So können Sie Ihre Benutzeroberfläche testen und bei Bedarf überarbeiten. In dieser Phase kann ein visueller Editor einen großen Unterschied machen, etwa wenn einfache Abstände angepasst werden müssen. Eine wiederverwendbare Karte oder Komponente kann Dutzende separat gepflegter Layouts ersetzen und die Arbeit noch weiter beschleunigen.

Die Geschwindigkeit sollte für die gesamte Aufgabe gemessen werden. Erfassen Sie, wie viel Zeit es dauert, eine Seite zu erstellen, ihre Funktionen einzurichten und bei der Überprüfung festgestellte Probleme zu beheben. Ein erster Entwurf, der nur fünf Minuten dauert, kann dennoch erheblichen Nachbearbeitungsaufwand erfordern, wenn seine Inhaltsstruktur oder sein mobiles Layout ungeeignet ist.

Stellen Sie sich ein Schulungsunternehmen mit 30 Kursen vor. Die erste Anforderung ist ein durchsuchbares Kursverzeichnis mit Anfrageformularen. Wird jede Kurskarte einzeln erstellt, bedeutet jede Designänderung wiederholte Arbeit. Eine gemeinsame Karte, die mit den Kursdatensätzen verknüpft ist, ermöglicht es dem Team, das Design einmalig zu ändern und Kursinformationen als Daten zu pflegen.

Dieses Beispiel verdeutlicht auch den Unterschied zwischen der schnellen Entwicklung einer Website und einer umfassenderen Anwendungsentwicklung. Ein öffentliches Verzeichnis stellt Informationen dar. Ein Lernportal, das den Lernfortschritt speichert, benötigt Benutzerkonten und Zugriffsregeln. Beide haben ein Frontend, doch beim zweiten Projekt müssen mehr Entscheidungen zum Verhalten und zur Datenhoheit getroffen werden.

Wählen Sie Ihre Tools danach aus, was Sie entwickeln möchten#

Die Wahl des passenden Entwicklungstools hängt davon ab, was Sie entwickeln, welche Ressourcen Ihnen zur Verfügung stehen und welche Infrastruktur Sie betreiben. Low-Code-Plattformen sind für unterschiedliche Aufgaben konzipiert. Einige unterstützen Designer beim Erstellen von Websites, während andere Entwickler visuelle Bearbeitungsmöglichkeiten zu bestehenden Apps hinzufügen lassen. Plattformen für interne Tools konzentrieren sich auf Aufgaben wie die Datenverwaltung und die Automatisierung täglicher Abläufe.

In diesem Artikel vergleichen wir Tools, die mehr oder weniger dieselben Funktionen bieten, sich jedoch in ihrem Ansatz zur Webentwicklung unterscheiden. Sie alle unterstützen die schnelle Webentwicklung, setzen sie aber auf ihre eigene Weise um. Die Empfehlungen stützen sich auf dokumentierte Funktionen und die Eignung für das jeweilige Projekt, nicht auf gemessene Geschwindigkeitsvergleiche.

1. TeleportHQ für Websites und Web-Apps#

TeleportHQ kombiniert KI-Generierung mit einem visuellen Editor und bietet zugleich Hosting- und Veröffentlichungsoptionen, sodass keine Abhängigkeit von externen Hosting-Anbietern entsteht. Mit dem KI-Assistenten können Sie mit einer einfachen Eingabe beginnen und Ihr Projekt Schritt für Schritt ausbauen, eine Vorlage verwenden oder ein Figma-Design importieren. Für komplexere Projekte ermöglicht TeleportHQ die Erstellung ausgefeilter Workflows, Websites und Apps, die eine Authentifizierung erfordern, sowie alles dazwischen.

Bei einem Dienstleistungsunternehmen sollten Sie zunächst Seiten erstellen, die das Angebot erklären und Anfragen erfassen. Passen Sie die generierten Inhalte an das tatsächliche Unternehmen an und testen Sie anschließend das Formular. Legen Sie bei einem Verzeichnis zuerst die Datensätze fest und verbinden Sie sie mit einem wiederverwendbaren Layout. Diese Projekte erfordern eine unterschiedliche Vorbereitung, selbst wenn ihre visuellen Stile ähnlich sind.

Die wichtigste Entscheidung, die Sie früh treffen sollten, betrifft den Projekttyp. Geeignete Websites können mit einem kostenpflichtigen Tarif als Code heruntergeladen werden, während Web-Apps auf dem Hosting von TeleportHQ laufen und nicht als vollständiger Anwendungscode exportiert werden können. Die aktuelle Produktübersicht führt die verfügbaren Projekttypen auf; die Exportbedingungen werden später in diesem Leitfaden erläutert.

Wählen Sie TeleportHQ, wenn Sie die Website in einem einzigen visuellen Workflow erstellen und warten möchten. Wenn ein bestehendes Softwareprodukt in einem bestimmten Repository verbleiben muss, prüfen Sie vor der Auswahl eines Builders die Integrations- und Eigentumsanforderungen.

2. WeWeb für benutzerdefinierte Anwendungsoberflächen#

WeWeb unterstützt die visuelle Entwicklung von Benutzeroberflächen und Workflows und bietet integrierte Daten- und API-Funktionen sowie Verbindungen zu externen Backends. Die aktuelle Dokumentation beschreibt einen Full-Stack-Builder. Ein älterer Vergleich, der das Tool ausschließlich als Frontend-Lösung bezeichnet, ist daher unvollständig.

Ein geeignetes Evaluierungsprojekt ist ein Kundenportal, in dem Nutzer Datensätze einsehen und Änderungen übermitteln. Beginnen Sie mit einem Datensatztyp und einem Nutzerablauf. Prüfen Sie, wie die Benutzeroberfläche Daten erhält und wie das System festlegt, auf welche Datensätze eine Person zugreifen darf. Diese Details sind aussagekräftiger als eine Demonstration, die nur Beispieldiagramme enthält.

WeWeb ist eine Überlegung wert, wenn das Anwendungsverhalten im Mittelpunkt des Projekts steht. In den häufig gestellten Fragen wird außerdem erläutert, dass Änderungen am exportierten Quellcode getrennt von der Bearbeitung in der visuellen Plattform erfolgen. Wenn Ihr Team zwischen manuellen Codeänderungen und visuellen Anpassungen wechseln möchte, sollten Sie diesen Arbeitsablauf festlegen, bevor Sie sich festlegen.

3. Plasmic für bestehende React-Projekte#

Plasmic ermöglicht Teams die visuelle Entwicklung mit ihren vorhandenen React-Komponenten und Datenquellen. Das macht das Tool relevant, wenn Entwickler die Anwendung bereits betreuen und andere Mitwirkende innerhalb dieser Umgebung Benutzeroberflächen zusammenstellen sollen.

Stellen Sie sich ein Softwareunternehmen mit freigegebenen Preiskarten und Kontoelementen vor. Entwickler können die Komponenten für die visuelle Bearbeitung vorbereiten. Anschließend können Designer Seiten mit diesen festgelegten Elementen gestalten. Der Nutzen hängt von der Qualität der Komponentenbibliothek und den darin verfügbaren Optionen ab.

Plasmic sollte getestet werden, wenn der Erhalt der bestehenden Codebasis eine feste Anforderung ist. Planen Sie Zeit für die anfängliche Integration und die Einrichtung der Komponenten ein. Eine visuelle Arbeitsfläche kann Komponenten mit unklaren Abhängigkeiten oder einer bestimmten vorausgesetzten Seitenstruktur nicht ausgleichen. Der Schnellstart für Entwickler bietet einen Einstieg in die Integration mit Frameworks.

4. Builder.io für visuelle Content-Workflows#

Der visuelle Editor von Builder.io ermöglicht es Teams, Seiten und Abschnitte mit wiederverwendbaren Inhalten und benutzerdefinierten Komponenten zusammenzustellen. Die Dokumentation behandelt responsive Vorschauen, Zusammenarbeit und Inhaltstests. Diese Funktionen sind nützlich, wenn ein Marketingteam häufig Änderungen an einer von Entwicklern betreuten Website vornehmen muss.

Entwickler können beispielsweise einen freigegebenen Testimonial-Abschnitt und einen Preisblock bereitstellen. Ein Kampagnenredakteur kann sie anordnen und die zulässigen Inhalte ändern, ohne jedes Mal eine neue Seite entwickeln lassen zu müssen. Legen Sie fest, welche Eigenschaften Redakteure steuern dürfen, bevor Sie die Komponenten freigeben.

Builder.io bietet auch codeorientierte Funktionen. Legen Sie daher fest, welchen Produkt-Workflow Sie bewerten. Eine visuelle CMS-Integration und eine generierte Codeänderung stellen unterschiedliche Anforderungen an Prüfung und Bereitstellung. Bei inhaltsintensiven Projekten sollten Sie beurteilen, wie schnell Redakteure nach der Ersteinrichtung routinemäßige Aktualisierungen vornehmen können.

5. Webflow für Marketing- und CMS-Websites#

Das visuelle CMS von Webflow verbindet Content-Management mit visuellem Seitendesign. Es ist eine geeignete Option für Unternehmenswebsites, auf denen Redakteure Artikel veröffentlichen oder strukturierte Fallstudien pflegen müssen, ohne jedes Seitenlayout neu zu erstellen.

Starten Sie ein Testprojekt mit echten Inhalten. Erstellen Sie eine Fallstudie mit einem langen Titel und mehreren Abschnitten und bitten Sie anschließend die für Aktualisierungen zuständige Person, sie zu bearbeiten. So zeigt sich, ob das Inhaltsmodell und die Bearbeitungserfahrung zum Team passen. Eine ausgefeilte Startseite allein sagt wenig über den laufenden Pflegeaufwand aus.

Webflow unterstützt HTML-, CSS- und JavaScript-Einbettungen, führt diese Einbettungen jedoch nicht serverseitig aus. Ermitteln Sie bei Anforderungen an Anwendungen die jeweils passenden Webflow-Funktionen oder externen Dienste. Betrachten Sie ein Kunden-Dashboard als eigenständige technische Anforderung, auch wenn es das visuelle Design der Website übernehmen soll.

6. Retool für interne Geschäftsanwendungen#

Retool wurde für interne Geschäftstools entwickelt. Die Plattform verbindet sich mit Datenbanken und APIs, führt Abfragen aus und unterstützt Workflows direkt in den Apps. Aktuell gibt es zwei Möglichkeiten, eine App zu erstellen. Der neue App-Builder setzt auf KI: Sie beschreiben die App im Chat-Tab, woraufhin React-Quellcode generiert wird, den Sie im Code-Tab prüfen und bearbeiten können. Klassische Apps werden im Drag-and-drop-Editor erstellt, in dem Sie vorgefertigte Komponenten auf einer Arbeitsfläche anordnen. In der Retool-Dokumentation bezeichnet „Apps“ nun den neuen Builder und „klassische Apps“ den älteren. Prüfen Sie daher, welchen Builder eine Anleitung beschreibt. Einige Funktionen sind nur in einem der beiden verfügbar. So funktioniert die MCP-Integration von Retool beispielsweise mit dem neuen Builder, nicht aber mit klassischen Apps. Retool-Mobil-Apps werden weiterhin im Drag-and-drop-Editor im klassischen Stil erstellt. Assist, der KI-Assistent für klassische Apps, wurde am 30. September 2026 aus dem klassischen Builder entfernt. Bestehende klassische Apps können weiterhin vollständig bearbeitet werden. Laut Retool ist ihre Umwandlung in den neuen Builder in den Tarifen Team, Business und Enterprise kostenlos.

Ein Support-Team muss möglicherweise Kundendatensätze suchen und einen Kontostatus korrigieren. In diesem Fall sind klare Bedienelemente und zuverlässige Datenverarbeitung weitaus wichtiger als eine ausgefeilte Optik. Lassen Sie die Personen, die diese Aufgabe erledigen, die Oberfläche ausprobieren, und prüfen Sie, was geschieht, wenn eine Anfrage fehlschlägt.

Retool eignet sich am besten, wenn die Hauptnutzer Beschäftigte sind, die auf bereits vorhandene Systeme des Unternehmens zugreifen müssen. Richten Sie Berechtigungen ein, bevor Sie Schreibvorgänge verbinden. Eine Schaltfläche, die einen Datensatz aktualisiert, sollte einen eindeutigen Zweck und ein vorhersehbares Ergebnis haben – insbesondere, wenn dieser Datensatz in andere Systeme einfließt.

7. FlutterFlow Studio für mobile Anwendungen#

FlutterFlow Studio bietet visuelle Entwicklung für Flutter-Anwendungen sowie benutzerdefinierten Code und herunterladbare Flutter-Projekte in kostenpflichtigen Tarifen. Es unterstützt iOS und Android sowie die Bereitstellung im Web.

Ziehe es in Betracht, wenn eine mobile Anwendung zu den zentralen Ergebnissen gehört. Eine Kunden-App, die Menschen regelmäßig auf ihren Smartphones nutzen, kann andere Anforderungen an Interaktion und Bereitstellung haben als eine öffentliche Service-Website. Bewerte frühzeitig die tatsächliche mobile Nutzung, einschließlich der Bildschirme, die Nutzer immer wieder durchlaufen müssen.

Die technische Entscheidung ist bedeutsam. Flutter folgt einem anderen Entwicklungsansatz als eine herkömmliche HTML- oder React-Website. Kläre, wer den benutzerdefinierten Code wartet und wie sich die Webversion verhalten soll. Wenn dein Hauptziel eine suchmaschinenorientierte Marketing-Website ist, vergleiche zunächst einen speziell für Websites entwickelten Baukasten, bevor du dich für einen mobilorientierten Entwicklungsansatz entscheidest.

8. Appsmith für interne Open-Source-Tools#

Appsmith ermöglicht es dir, mit vorgefertigten Widgets Benutzeroberflächen zu erstellen, sie mit Datenbanken und APIs zu verbinden und JavaScript für benutzerdefinierte Logik zu verwenden. Die Kernplattform ist Open Source und steht unter der Apache-2.0-Lizenz. Die kostenlose Community-Edition kannst du ohne Nutzerbegrenzung auf deiner eigenen Infrastruktur betreiben. Alternativ kannst du die verwaltete Cloud von Appsmith nutzen, deren kostenloser Tarif auf fünf Nutzer beschränkt ist. Dank der Git-Integration kannst du Apps in einem Repository versionieren; die Repository-Begrenzungen hängen jedoch vom Tarif ab.

Ein praxisnaher Test ist eine kleine Verwaltungsoberfläche, die Datensätze ausliest und eine begrenzte Anzahl von Feldern aktualisiert. Verwende realistische Daten und überprüfe die Berechtigungen mit einem Konto ohne Administratorrechte. Erfasse sowohl den Aufwand für die Wartung der Abfragen als auch die Zeit für die Gestaltung der Benutzeroberfläche.

Appsmith ist eine Überlegung wert, wenn dir Open Source oder Self-Hosting wichtig ist. Beim Self-Hosting fallen keine Lizenzgebühren an, aber dein Team ist für Upgrades, Backups und Sicherheitsupdates verantwortlich.

Die Angaben zur Lizenz, zur unbegrenzten Nutzerzahl der Community-Edition, zur Begrenzung des kostenlosen Cloud-Tarifs auf fünf Nutzer und zu den Git-Repository-Begrenzungen stammen aus Bewertungen und Preisübersichten von Drittanbietern, die zwischen Juni und September 2026 veröffentlicht wurden. Ich konnte diese Angaben nicht auf der Preisseite von Appsmith selbst überprüfen. Da sich Tarifgrenzen häufig ändern, solltest du die Seite vor der Veröffentlichung prüfen. Beziehe auch diese Verantwortung in deine Entscheidung ein. Appsmith lässt sich eher mit Plattformen für interne Tools wie Retool vergleichen als mit Tools, die hauptsächlich für öffentliche Marketingseiten gedacht sind.

Eine vollständige Besucherreise festlegen#

Lege vor der Erstellung einer Website fest, welche Aufgabe Besucher erledigen sollen. Für das Schulungsunternehmen könnte die erste Besucherreise so aussehen: einen passenden Kurs finden, die Details lesen und eine Anfrage senden. Du kannst diese Reise bewerten, ohne sofort Lernkonten oder Zahlungsabwicklung einzurichten.

Verfassen Sie für jeden Teil eine kurze Abnahmebeschreibung. Das Verzeichnis muss aktuelle Kurse anzeigen. Jede Karte muss zur richtigen Detailseite führen. Die Anfrage muss genügend Kontext enthalten, damit das Team antworten kann. So können Prüfende gezielt das Verhalten überprüfen, statt zu fragen, ob die Website fertig wirkt.

Trennen Sie Anforderungen für den Start von späteren Wünschen. Ein geplantes Lernportal gehört in die Projektbeschreibung, muss aber den Start eines öffentlichen Kursverzeichnisses nicht verzögern. Wenn beim Start hingegen kostenpflichtiger Zugang erforderlich ist, muss die anfängliche Architektur dies unterstützen. Wird ein notwendiges Kontosystem auf später verschoben, führt das zu vermeidbaren Neuentwicklungen.

Halten Sie für jede Seite die Hauptzielgruppe und die nächste Aktion fest. Eine allgemeine Dienstleistungsseite kann zu einer Anfrage führen. Eine Kursdetailseite sollte Besuchenden helfen zu entscheiden, ob der Kurs für sie geeignet ist. Diese Vorbereitung gibt der KI und Ihrem Team konkretere Anhaltspunkte als eine allgemeine Bitte um eine moderne Website.

Entscheiden Sie zwischen Website und Web-App#

TeleportHQ unterscheidet zwischen Website-Projekten und Web-Apps. Eine Website kann normale Formulare und verknüpfte Daten enthalten, ohne dadurch zu einer Web-App zu werden. Anwendungsfunktionen, die über die Plattform ausgeführt werden, etwa Authentifizierung oder Workflows, ändern den Projekttyp.

Diese Unterscheidung wirkt sich sowohl auf die Bereitstellung als auch auf die spätere Wartung aus. Laut der Dokumentation zum Code-Export, erfordert der Export einer Website einen kostenpflichtigen Pro- oder Premium-Arbeitsbereich sowie eine passende Rolle als Teammitglied. Web-Apps können unabhängig vom kostenpflichtigen Tarif nicht als Code heruntergeladen werden.

Setzen Sie eine Datenbankverbindung nicht mit einer vollständigen Anwendung gleich. Ein Verzeichnis kann öffentliche Kursdatensätze auslesen, ohne Benutzerkonten bereitzustellen. Ein Lernendenportal benötigt Regeln dazu, welche Person auf welche Informationen zugreifen darf. Im Leitfaden zu Datenquellen wird ausdrücklich erklärt, dass die bloße Verbindung einer Quelle das Projekt nicht umwandelt.

Eine ausführlichere Erklärung zur Bereitstellung von Seiten finden Sie unter statischen und dynamischen Websites. Unterscheiden Sie diese architektonische Betrachtung von den Abrechnungs- und Projektkategorien einer Plattform. Entscheidend ist in der Praxis, welche Funktionen Ihr konkretes Projekt nutzt und welche Anforderungen damit verbunden sind.

Erstelle eine hilfreiche erste Version#

Erstelle Seiten auf Grundlage eines konkreten Briefings#

Wähle in TeleportHQ zunächst „+ New Project“ und dann „Presentation Website“ aus. Klicke anschließend auf „Generate with AI“. Beschreibe das Unternehmen und nenne die benötigten Seiten. Bei der Einrichtung kannst du außerdem Designpräferenzen auswählen. Folge dem Leitfaden zur KI-Websitegenerierung für die aktuelle Schrittfolge.

Ein hilfreiches Beispielbriefing könnte so aussehen:

Erstelle eine Website für ein Unternehmen, das kleinen Betrieben professionelle Schulungen anbietet. Füge die Seiten „Startseite“, „Kurse“, „Über uns“ und „Kontakt“ hinzu. Die wichtigste Aktion ist eine Anfrage zu einem Kurs. Verwende klare Kursbeschreibungen und einen zurückhaltenden visuellen Stil. Achte auf eine einheitliche Navigation. Verwende gekennzeichnete Platzhalter, wenn keine Unternehmensangaben vorliegen.

Prüfe die Ergebnisse auf sachliche Richtigkeit, bevor du das Design verfeinerst. Ersetze erfundene Kursbeschreibungen und entferne unbelegte Aussagen. Kontrolliere, ob die vorgeschlagene Navigation zu den tatsächlich erstellten Seiten passt. Eine fehlende Seite lässt sich leichter korrigieren, bevor du Kampagnenmaterialien damit verlinkst.

Wähle einen Einstiegspunkt für Web-Apps oder Online-Shops, wenn diese Funktionen zum vereinbarten Umfang gehören. Der Leitfaden zur Generierung von Web-Apps beschreibt diesen Weg. Erläutere die erforderlichen Funktionen ausdrücklich, damit die erste Version den Bedürfnissen der Besucher entspricht.

Vorhandene Designs importieren#

Wenn das Layout bereits in Figma freigegeben wurde, kannst du es als Ausgangspunkt verwenden. Wähle die entsprechenden Frames aus, starte das TeleportHQ-Plugin und klicke auf „Export as a new project“. Im Figma-Importleitfaden erfährst du auch, wie du Objekte in ein bestehendes Projekt kopierst.

Bereite das Quelldesign sorgfältig vor. TeleportHQ empfiehlt die automatische Layoutfunktion von Figma, um bessere Importergebnisse zu erzielen. Prüfe nach dem Import die Elementstruktur und teste schmalere Bildschirmbreiten. Eine Designdatei vermittelt die visuelle Absicht, aber eine funktionierende Website benötigt auch eine funktionierende Navigation und ein festgelegtes Ziel für jedes Formular.

Importiere zunächst einen repräsentativen Abschnitt, bevor du ein ganzes Design übernimmst. Wähle eine lange Überschrift oder eine wiederholte Karte, damit du schwierige Fälle früh beurteilen kannst. Die Anleitung für KI-gestütztes Design-to-Code bietet zusätzlichen Kontext dazu, wie sich visuelle Vorlagen in bearbeitbare Website-Layouts umwandeln lassen.

Verwende gemeinsam veränderte Elemente wieder#

Erstelle gemeinsame Komponenten für Elemente, die sich wiederholen und einheitlich bleiben sollen. Navigation und Fußzeilen sind anschauliche Beispiele. Auch eine Kurskarte lässt sich gut wiederverwenden, wenn ihre Struktur gleich bleibt, während sich ihr Inhalt ändert. Einmalige redaktionelle Abschnitte sind möglicherweise als gewöhnliche Elemente einfacher zu pflegen.

TeleportHQ unterscheidet zwischen einer Hauptkomponente und ihren Instanzen, also den Kopien, die auf Seiten platziert werden. Änderungen an der Hauptkomponente werden auf ihre Instanzen übertragen. Bearbeitbare Eigenschaften, sogenannte Props, ermöglichen es, für jede Instanz andere Inhalte zu verwenden. Der Komponentenleitfaden erläutert diese Zusammenhänge und die Auswirkungen, wenn eine Instanz von ihrer Komponente gelöst wird.

Wenn du eine Kurskarte gestaltest, kläre zuerst die Inhalte, bevor du mit dem Layout experimentierst. Entscheide, wo Titel und Kurzbeschreibung stehen sollen, und lege dann den Buttontext sowie sein Ziel fest. Probiere die Karte mit echten Beispielen aus. Ein Titel mit zwei Wörtern verrät nicht viel darüber, wie das Layout mit einem Kursnamen aus acht Wörtern zurechtkommt.

Widerstehe dem Drang, für jede kleine visuelle Anpassung eine neue Komponente zu erstellen. Überlege stattdessen, ob sich der Unterschied einfach durch eine bearbeitbare Eigenschaft abbilden lässt oder ob wirklich eine andere Struktur erforderlich ist. Eine überschaubare Anzahl von Komponenten, die sich auf einen Blick verstehen lassen, ist für die nächste Person, die Inhalte bearbeitet, viel einfacher zu verwenden als Dutzende beinahe identische Varianten.

Wiederverwendbare Vorlagen beschleunigen die Arbeit an der Benutzeroberfläche auch deshalb, weil sie bereits getroffene Designentscheidungen auf die nächste Seite übertragen. Wertvoll ist eine Vorlage durch eine durchdachte Struktur und Änderungen, die sich wie erwartet verhalten – nicht durch die schiere Anzahl der verfügbaren Varianten. Bevor du ein ganzes Projekt darauf aufbaust, teste sie mit deinen eigenen Inhalten.

Verknüpfe Daten, bevor du Layouts kopierst#

Gib Datensätzen eine klare Struktur#

Ein Verzeichnis lässt sich leichter pflegen, wenn seine Inhalte als Datensätze vorliegen. Lege für das Kursbeispiel Feldnamen fest, bevor du sie mit der Benutzeroberfläche verknüpfst. Die folgende Tabelle ist ein vorgeschlagenes Inhaltsmodell und kein verbindliches TeleportHQ-Schema.

Fügen Sie repräsentative Datensätze hinzu, bevor Sie den Entwurf fertigstellen. Verwenden Sie mindestens eine längere Zusammenfassung und einen Datensatz, bei dem ein optionales Feld fehlt. Legen Sie fest, wie diese Fälle dargestellt werden sollen. Wenn alle Beispiele ideale Inhalte enthalten, deckt die Layoutprüfung keine Probleme auf, die bei der alltäglichen Pflege auftreten.

TeleportHQ unterstützt eine eigene Datenbank und externe Quellen, darunter SQL-Datenbanken und Tabellen. Wählen Sie die Quelle, die Ihr Team zuverlässig pflegen kann. Eine vorhandene Kursdatenbank kann geeignet sein, wenn sie bereits die Informationen verwaltet. Für ein kleines öffentliches Verzeichnis ist möglicherweise ein einfacherer Workflow für die Inhaltspflege sinnvoll.

Überprüfen Sie eine API-Antwort, bevor Sie mit dem Styling beginnen#

Eine API ist eine Schnittstelle, über die Software Daten abruft oder Aktionen ausführt. Eine REST-API verwendet üblicherweise Webanfragen und gibt strukturierte Daten wie JSON zurück. Öffnen Sie in TeleportHQ „Datenquellen → Datenquelle hinzufügen → REST-API“, geben Sie die Adresse ein und konfigurieren Sie die erforderlichen Anforderungseinstellungen.

Verwenden Sie „Fetch data from API“, um die Antwort vor dem Speichern zu prüfen. Die Anleitung zur REST-API-Verbindung behandelt Methoden und Autorisierung sowie Caching. Betrachten Sie die Beispieladressen als Platzhalter. Ihr Projekt benötigt einen Endpunkt, der tatsächlich die erforderlichen Datensätze bereitstellt.

Prüfen Sie in dieser Phase die Struktur der Antwort. Wird die Kursliste direkt zurückgegeben oder ist sie in einem anderen Objekt verschachtelt? Sind die Bilder vollständige URLs? Verfügt ein Kurs über eine stabile Kennung? Wenn Sie diese Fragen vor dem Gestalten beantworten, vermeiden Sie ein Layout, das von Feldern abhängt, die der tatsächliche Dienst gar nicht bereitstellt.

Prüfen Sie auch die Anforderungen an die Aktualität. Eine Kursbeschreibung kann zwischengespeicherte Inhalte vertragen, während eine zeitkritische Verfügbarkeitsangabe möglicherweise anders behandelt werden muss. Legen Sie das Verhalten bewusst fest und testen Sie eine Aktualisierung in der tatsächlichen Datenquelle. Dass die Daten einmal korrekt angezeigt werden, sagt noch nicht aus, wie künftige Änderungen erscheinen.

Eine Karte pro Datensatz verknüpfen#

Mit dem Array Mapper von TeleportHQ können Sie ein Layout für eine Datensatzliste wiederholen. Fügen Sie ihn über Elements → List → Array Mapper hinzu, verbinden Sie die Datenquelle und gestalten Sie darin den wiederholten Inhalt. Die Anleitung zu Listenelementen erklärt die Einrichtung.

Verknüpfen Sie Titel und Bild mit dem aktuellen Listenelement. Ein häufiger Fehler besteht darin, jede Karte mit der ersten Zeile der Datenquelle zu verknüpfen. Das Layout wird dann zwar korrekt wiederholt, aber auf jeder Karte werden dieselben Informationen angezeigt. In der Dokumentation zur Datenbindung wird der Unterschied zwischen einem festen Datensatz und dem aktuellen Element erläutert.

Prüfen Sie die Zuordnung anhand mehrerer bewusst unterschiedlicher Datensätze. Vergleichen Sie den angezeigten Titel mit dem zugehörigen Bild und Linkziel. Wenn sich beim zweiten Kurs die Seite des ersten Kurses öffnet, ist die Liste zwar optisch vollständig, funktioniert aber nicht richtig. Korrigieren Sie die Zuordnung, bevor Sie weitere Datensätze oder visuelle Effekte hinzufügen.

Sobald die einfache Liste funktioniert, fügen Sie nur die Steuerelemente hinzu, die Besucher benötigen. Eine Filterung nach Kategorien kann bei einem umfangreichen Katalog sinnvoll sein. Eine Seitennummerierung ist hilfreich, wenn eine lange Liste schwer zu überblicken ist. Zusätzliche Steuerelemente schaffen weitere Zustände, die getestet werden müssen. Jedes sollte daher einem klaren Nutzerbedürfnis dienen.

Formulare und Workflows an die Aufgabe anpassen#

Für einfache Anfragen gewöhnliche Formulare verwenden#

Eine Serviceanfrage kann mit einem Standardformular beginnen. Fragen Sie die Informationen ab, die für eine Antwort erforderlich sind, und erklären Sie, was nach dem Absenden passiert. Wenn das Vertriebsteam nur eine E-Mail-Adresse und eine Nachricht benötigt, können mehrere zusätzliche Pflichtfelder für Besucher unnötigen Aufwand bedeuten.

Fügen Sie in TeleportHQ ein Formularelement oder einen vorgefertigten Formularabschnitt hinzu und konfigurieren Sie anschließend die Felder. Beim Hosting über TeleportHQ sind Einsendungen unter Growth → Forms verfügbar. Die Anleitung zur Formularerstellung erläutert die Einrichtung und bestätigt, dass ein gewöhnliches Formular allein eine Website nicht in eine Web-App umwandelt.

Testen Sie eine erfolgreiche Übermittlung und eine ungültige Eingabe. Prüfen Sie sowohl die gespeicherten Werte als auch die Meldung, die Besuchern angezeigt wird. Wenn der Anfrage ein Kursname zugeordnet werden soll, vergewissern Sie sich, dass das Team den richtigen Kurskontext erhält. Eine überzeugend aussehende Bestätigung beweist nicht, dass die vorgesehenen Informationen angekommen sind.

Das Hosting beeinflusst diese Entscheidung. Die integrierte Formularverarbeitung von TeleportHQ unterstützt die für das Projekt vorgesehenen gehosteten Adressen und die verbundene benutzerdefinierte Domain. Wenn Sie die Website exportieren und anderswo hosten, müssen Sie einen anderen Formularverarbeitungsdienst einrichten. Nehmen Sie diesen Ersatz in den Übergabeumfang auf, statt erst nach dem Umzug der Website festzustellen, dass er fehlt.

Workflows für Anwendungsabläufe hinzufügen#

Verwenden Sie einen Workflow, wenn die Anforderung eine festgelegte Abfolge von Aktionen umfasst. Beispielsweise könnte eine Anfrage einen Datenbankeintrag erstellen und anschließend eine Benachrichtigung senden. Beschreiben Sie den Auslöser und das erwartete Ergebnis, bevor Sie die Abfolge konfigurieren. So lässt sich das Verhalten leichter überprüfen.

Öffnen Sie in TeleportHQ das Bedienfeld „Workflows“ und fügen Sie einen Workflow hinzu. Wählen Sie anschließend den Auslöser und die Schritte aus. Die Anleitung zur Workflow-Erstellung erläutert, dass jeder hinzugefügte Workflow eine Website in eine Web-App umwandelt. Diese Umwandlung ist dauerhaft und hebt den Code-Download auf – sogar bei einem Workflow mit einer einfachen Oberflächenaktion.

Für einen einfachen Tab oder einen aufklappbaren Abschnitt können Sie stattdessen den Seiten- oder Komponentenstatus verwenden. Ein Status speichert einen Wert, etwa ob ein Abschnitt geöffnet ist. Diese lokalen Statuswerte lassen sich in Website-Projekten nutzen, ohne einen Workflow hinzuzufügen. Wählen Sie die Funktion passend zur Aktion aus, bevor Sie den Projekttyp ändern.

Für Datenbankvorgänge dokumentiert die Plattform Schritte wie „Create Item“ und „Update Item“. Folgen Sie der Anleitung zu Datenbank-Workflows und wählen Sie die Quelle aus und ordnen Sie die Werte zu. Prüfen Sie bei einer Aktualisierung vor dem Testen mit wichtigen Daten, welchen Datensatz der Filter auswählt.

Für eine Kursanfrage wird folgende Konfiguration vorgeschlagen:

1. Verwende das Absenden des Formulars als Auslöser.
2. Daten hinzufügen → Element erstellen und die Anfragentabelle auswählen.
3. Ordne die übermittelte E-Mail-Adresse und die Kurskennung den entsprechenden Zielspalten zu.
4. Warte auf das Datenbankergebnis, bevor du einen Schritt ausführst, der den neuen Datensatz benötigt.

Sobald ein Workflow die Übermittlung verarbeitet, speichert das Formular keine Einsendungen mehr über den üblichen Forms-Prozess. Füge einen expliziten Speicherschritt hinzu, wenn du die Anfrage aufbewahren möchtest. Teste den Workflow mit einem gekennzeichneten Testdatensatz und prüfe anschließend die Zieltabelle, um zu bestätigen, was tatsächlich gespeichert wurde.

Plane neben dem Erfolgsfall auch den Fehlerfall. Was soll der Besucher sehen, wenn ein Datensatz gespeichert wird, aber eine Benachrichtigung fehlschlägt? Wie findet das Team die Anfrage? Diese Fragen gehören in die Workflow-Spezifikation. So wird verhindert, dass eine teilweise ausgeführte Aktion fälschlich als vollständiger Fehlschlag oder Erfolg verstanden wird.

Responsives Verhalten mit echten Inhalten testen#

Responsives Design passt die Benutzeroberfläche an unterschiedliche Bildschirmbreiten an. In TeleportHQ werden Stile vom größten aktivierten Breakpoint auf kleinere Bildschirme übertragen. Anschließend kannst du Anpassungen für schmalere Bildschirme vornehmen. Der Leitfaden zum responsiven Design erläutert diese Vererbung und die verfügbaren Breakpoint-Einstellungen.

Gehe den wichtigsten Nutzungspfad bei jeder relevanten Bildschirmgröße durch. Prüfe, ob der Kurstitel gut lesbar bleibt und die Anfrage-Schaltfläche leicht zu finden ist. Öffne die mobile Navigation und fülle das Formular aus. Diese Aktionen zeigen mehr als ein statischer Screenshot des oberen Seitenbereichs.

Teste neben den voreingestellten Ansichten auch Zwischenbreiten. Ein Layout kann auf einem großen Monitor und einem schmalen Smartphone korrekt aussehen, aber dazwischen scheitern. Achte auf abgeschnittenen Text und horizontales Scrollen. Prüfe wiederkehrende Komponenten sorgfältig, denn ein einzelner Layoutfehler kann viele Seiten gleichzeitig betreffen.

Berücksichtigen Sie beim Testen auch extreme Inhalte. Für eine längere übersetzte Bezeichnung ist möglicherweise mehr Platz nötig. Auch ein Kurs ohne Bild sollte eine brauchbare Karte ergeben. Entscheiden Sie, ob für das fehlende Bild ein Platzhalter angezeigt oder das Bildfeld im Layout weggelassen werden soll. Setzen Sie diese Entscheidung im gesamten Verzeichnis einheitlich um.

Halten Sie Überprüfungen konkret und überschaubar#

Ein gemeinsam genutzter Editor hilft nur, wenn alle ihre Zuständigkeiten kennen. Bestimmen Sie eine Person für die Freigabe der Inhalte und eine weitere für die Prüfung des Besuchererlebnisses, sofern diese Rollen im Team vorhanden sind. Legen Sie fest, wer veröffentlichen darf. Andernfalls wird eine Seite möglicherweise korrekt bearbeitet, aber veröffentlicht, bevor ihr Verhalten geprüft wurde.

TeleportHQ bietet Rollen für Mitwirkende mit unterschiedlichen Berechtigungen. Redakteure können Inhalte und Seiten bearbeiten, während für Designeinstellungen und die Veröffentlichung andere Berechtigungen erforderlich sind. Lesen Sie die Übersicht zu Rollen und Berechtigungen durch, bevor Sie einen Kunden oder Teamkollegen einladen, und unterscheiden Sie zwischen Projekt- und Arbeitsbereichszugriff.

Formulieren Sie Feedback als beobachtbares Problem. „Bei schmaler Bildschirmbreite überlappt der Kurstitel die Dauer“ gibt einem Redakteur eine klar nachvollziehbare Aufgabe. „Verbessere die Karten“ lässt das erwartete Ergebnis offen. Nennen Sie die betroffene Seite und Bildschirmgröße und beschreiben Sie, was eine erfolgreiche Korrektur bewirken soll.

Halten Sie jede Überprüfungsrunde überschaubar. Eine Layoutprüfung sollte abgeschlossen sein, bevor mehrere Personen dieselben Abschnitte umschreiben. Testen Sie nach der Freigabe der Inhalte den gesamten Ablauf erneut, denn eine längere Bezeichnung oder ein anderer Link kann sich auf die Benutzeroberfläche auswirken. Eine klare Reihenfolge der Entscheidungen beschleunigt die Zusammenarbeit.

Veröffentlichen Sie eine Version, die Sie getestet haben#

Verwenden Sie eine Staging-Website, um Änderungen außerhalb des Editors zu überprüfen. TeleportHQ stellt auf seinem Hosting eine separate Staging-Adresse bereit. Öffnen Sie „Veröffentlichen“, wählen Sie „Staging“ aus und veröffentlichen Sie dort die zu prüfende Version. In der Anleitung zum Staging erfahren Sie, wie Sie den getesteten Build mit „Live schalten“ in die Produktionsumgebung übernehmen.

Geben Sie den Prüfenden eine kurze Abnahme-Checkliste. Bitten Sie sie, den wichtigsten Anfrageablauf durchzugehen und konkrete Fehler zu melden. Prüfen Sie interne Links und sehen Sie sich das Ergebnis des veröffentlichten Formulars an. Wenn das Verzeichnis externe Daten abruft, vergewissern Sie sich, dass in dieser Umgebung die erwarteten Datensätze angezeigt werden.

Die Verfügbarkeit einer Staging-Umgebung bedeutet nicht, dass jede externe Integration separate Testdaten verwendet. Klären Sie vor einer Überprüfung, wohin Übermittlungen und Workflow-Aktionen geleitet werden. Verwenden Sie eindeutig erkennbare Testdatensätze, damit das Team Prüfaktivitäten von echten Anfragen unterscheiden kann. Entfernen Sie diese Datensätze nach Abschluss des Tests.

Der dokumentierte Staging-Workflow gilt für das Hosting von TeleportHQ. Für Projekte, die über ein persönliches Vercel-Konto veröffentlicht werden, ist eine andere Einrichtung erforderlich. Wenn Sie eine exportierte Codebasis verwenden, richten Sie Vorschauen und Freigabeprüfungen innerhalb dieses Hosting-Workflows ein, statt davon auszugehen, dass der Staging-Prozess des Builders auch für die exportierten Dateien gilt.

Funktionen in kurzen, überprüfbaren Zyklen verbessern#

Schnelle Iterationen funktionieren am besten, wenn jede Änderung einen konkreten Zweck hat. Angenommen, Besucher rufen Kursseiten auf, senden aber nur selten Anfragen. Prüfen Sie zunächst, ob das Formular funktioniert und ob der nächste Schritt klar ist. Die gesamte Website zu ändern, bevor Sie den grundlegenden Ablauf überprüft haben, würde die Auswertung erschweren.

Gehen Sie nach einem wiederholbaren Prozess vor:

1. Dokumentieren Sie das beobachtete Problem und die betroffene Seite.
2. Legen Sie fest, welches Verhalten Sie nach der Änderung erwarten.
3. Aktualisieren Sie die kleinste relevante Komponente oder den kleinsten relevanten Abschnitt.
4. Testen Sie die Änderung mit repräsentativen Inhalten und auf verschiedenen Bildschirmgrößen.
5. Prüfen Sie die Staging-Version vor der Veröffentlichung.
6. Überprüfen Sie das Ergebnis, nachdem genügend relevante Nutzung stattgefunden hat.

Die Wiederverwendung ist in diesen späteren Zyklen besonders wertvoll. Eine überarbeitete gemeinsame Karte kann alle Kursauflistungen verbessern. Ein eindeutig benanntes Feld kann Verwirrung bei Inhaltsaktualisierungen verhindern. Kleine strukturelle Entscheidungen beim ersten Aufbau wirken sich auf die Geschwindigkeit jeder späteren Überarbeitung aus.

KI kann bei einer gezielten Überarbeitung helfen, doch der Auftrag muss klar eingegrenzt sein. Eine hilfreiche Anweisung wäre: „Kürze diese Kursbeschreibung auf etwa 40 Wörter. Behalte die Zulassungsvoraussetzungen und die angegebene Dauer bei.“ Prüfe das Ergebnis vor der Veröffentlichung anhand des Ausgangsmaterials. Sprachliche Flüssigkeit ist kein Beleg für sachliche Richtigkeit.

Halte fest, was geändert wurde. Notiere den Grund und das Veröffentlichungsdatum und vergleiche das entsprechende Ergebnis, sobald genügend Daten vorliegen. Bei einer Website mit wenig Besuchern kann direktes Feedback zur Benutzerfreundlichkeit Probleme früher aufdecken als eine kurzfristige Veränderung der Konversionsrate. Wähle Belege, die zur tatsächlichen Nutzungsintensität passen.