Bevor eine Website mit Framer live geht, lohnt sich ein strukturierter letzter Check. Viele Probleme entstehen nicht beim Design oder Aufbau, sondern kurz vor dem Publish. Genau deshalb ist eine feste Pre-Launch-Routine extrem wertvoll. In diesem Artikel findest du alle Punkte aus meiner Framer-Checkliste, vollständig erklärt und in sinnvoller Reihenfolge.
Startseite korrekt definieren
Zu Beginn solltest du prüfen, ob wirklich die richtige Seite als Startseite definiert ist. Gerade bei Projekten mit mehreren Seiten oder Testversionen passiert es schnell, dass eine falsche Seite als Home gesetzt bleibt. Das führt nach dem Publish oft zu Verwirrung oder einer unvollständigen Darstellung.
Meta-Titel und Meta-Description pflegen
Ein weiterer zentraler Punkt ist die Pflege der Meta-Daten. Jede Seite sollte einen klaren Meta-Titel und eine aussagekräftige Meta-Description haben. Diese Texte entscheiden darüber, wie deine Website in Suchmaschinen dargestellt wird. Zusätzlich helfen saubere Seitennamen dabei, intern die Übersicht zu behalten und später schneller zu arbeiten.
Favicon und Social Preview Images setzen
Direkt damit verbunden sind Favicon und Social Preview Images. Ein fehlendes Favicon wirkt unprofessionell, und ohne Social Preview sieht ein geteilter Link auf WhatsApp, LinkedIn oder Slack leer oder kaputt aus. Beides sollte vor dem Launch unbedingt gesetzt und getestet werden.
Page Settings überprüfen
In den Page Settings solltest du anschließend prüfen, ob Slug, Indexierung, Sharing-Optionen und SEO-Einstellungen korrekt gesetzt sind. Hier entscheidet sich unter anderem, ob eine Seite indexiert wird oder bewusst auf noindex steht, zum Beispiel bei Dankeseiten oder internen Bereichen.
Nicht klickbare Texte korrekt einstellen
Ein oft übersehener, aber sehr wichtiger Punkt betrifft nicht klickbare Texte. Gerade bei Buttons oder interaktiven Elementen markiert sich auf Mobile sonst schnell der Text. Deshalb sollten Texte, die nicht selektierbar sein sollen, bewusst auf „Select: None“ gesetzt werden, um die User Experience zu verbessern.
Saubere Struktur mit wenigen Stacks und klaren Bezeichnungen
Beim strukturellen Aufbau der Seite gilt: so wenig Stacks wie möglich, so viel Klarheit wie nötig. Zu viele verschachtelte Stacks machen Projekte schwer wartbar. Gleichzeitig solltest du alle Ebenen sinnvoll benennen und mit Tags arbeiten, damit du auch nach Wochen oder Monaten sofort verstehst, wie die Seite aufgebaut ist.
Alt-Texte für Bilder ergänzen
Ein weiterer SEO- und Accessibility-Faktor sind Alt-Texte für Bilder. Jedes relevante Bild sollte einen beschreibenden Alt-Text haben, damit Suchmaschinen und Screenreader den Inhalt richtig interpretieren können. Das ist nicht optional, sondern ein wichtiger Qualitätsfaktor moderner Websites.
Unnötige Inhalte entfernen
Vor dem Publish solltest du außerdem konsequent nicht benötigte Seiten, Bilder, Texte und Elemente entfernen oder deaktivieren. Testsektionen, alte Entwürfe oder versteckte Inhalte erhöhen unnötig die Komplexität und können im schlimmsten Fall doch sichtbar werden.
Cookie-Banner einrichten
Sobald Tracking oder externe Dienste im Einsatz sind, gehört ein Cookie-Banner zwingend dazu. Dieser sollte korrekt eingebunden sein und zur Datenschutzstrategie der Website passen, insbesondere im europäischen Raum.
Farben und Typografie sauber anlegen
Ein sauberer Auftritt steht und fällt außerdem mit Farben und Typografie. Alle Farben und Schriftarten sollten zentral angelegt sein. Texte sollten klar hierarchisch strukturiert sein, von H1 bis H6 sowie Absatztexten. Das sorgt nicht nur für Konsistenz, sondern auch für bessere Lesbarkeit und Pflege.
SEO- und Indexierungsdetails prüfen
Bevor du veröffentlichst, lohnt sich ein genauer Blick auf die SEO- und Indexierungs-Einstellungen. Dazu gehören Canonical URLs, saubere Slugs, Sitemap-Generierung und korrekte Robots-Einstellungen. Diese Grundlagen sorgen dafür, dass deine Website technisch sauber in Suchmaschinen erscheint.
Social Sharing testen
Auch der Bereich Social & Sharing sollte nicht vergessen werden. Open-Graph-Titel, Beschreibungen und Vorschaubilder sollten getestet werden, indem du Links bewusst in verschiedenen Tools teilst. So erkennst du sofort, ob alles wie gewünscht angezeigt wird.
Überschriftenstruktur und Content prüfen
Beim Content selbst ist eine klare Überschriften-Hierarchie entscheidend. Jede Seite sollte genau eine H1 haben, darunter logisch aufgebaute H2- und H3-Überschriften. Zusätzlich sollten Call-to-Actions verständlich formuliert und interne Verlinkungen sinnvoll gesetzt sein.
Bilder, Videos und Medien optimieren
Im Bereich Bilder und Medien ist neben Alt-Texten auch die Performance wichtig. Bilder sollten optimiert/komprimiert sein, einheitliche Formate nutzen und Videos bewusst eingebettet werden. Autoplay sollte nur eingesetzt werden, wenn es wirklich Sinn ergibt.
Performance und Animationen kontrollieren
Performance ist generell ein wichtiger Faktor. Zu viele Animationen, zu viele Fonts oder unnötiger Code belasten Ladezeiten und Nutzererlebnis. Scroll-Effekte und Animationen sollten gezielt eingesetzt werden, nicht inflationär.
Barrierefreiheit berücksichtigen
Auch Accessibility spielt eine immer größere Rolle. Kontraste sollten ausreichend sein, Texte gut lesbar, Klickflächen groß genug und Fokus-Zustände sichtbar. Kleine Details entscheiden hier über Qualität.
Responsive Design vollständig testen
Ein vollständiger Responsive-Check ist Pflicht. Desktop, Tablet und Mobile sollten einzeln geprüft werden. Texte müssen sauber umbrechen, Abstände auf Mobile angepasst sein und die Navigation zuverlässig funktionieren.
Navigation und User Experience prüfen
Navigation und User Experience sollten ebenfalls noch einmal bewusst getestet werden. Das Logo sollte zur Startseite verlinken, der Footer vollständig sein und alle internen sowie externen Links korrekt funktionieren.
Formulare und Interaktionen testen
Formulare verdienen besondere Aufmerksamkeit. Kontaktformulare sollten getestet sein, Pflichtfelder korrekt funktionieren, Fehlermeldungen verständlich sein und eine Erfolgsmeldung oder Dankeseite vorhanden sein. Zusätzlich sollte ein Spam-Schutz aktiv sein.
Tracking und Analytics überprüfen
Wenn Tracking eingesetzt wird, müssen Analytics- und Tracking-Tools korrekt eingebunden sein. Google Analytics, Google Tag Manager und Events sollten vor dem Publish getestet werden, idealerweise gemeinsam mit dem Cookie-Banner.
Rechtliche Seiten prüfen
Rechtlich darf ebenfalls nichts fehlen. Impressum, Datenschutzerklärung und Hinweise auf externe Dienste müssen vorhanden und korrekt verlinkt sein.
Finaler Double-Check vor dem Publish
Zum Schluss lohnt sich ein finaler Double-Check. Alle Verlinkungen, Abstände, Größen, Formulare und Interaktionen sollten noch einmal bewusst durchgeklickt werden. Idealerweise testest du die Website zusätzlich auf einem echten Smartphone und in mehreren Browsern.
Erst wenn all diese Punkte geprüft sind, ist deine Framer-Website wirklich bereit für den Go-Live.
