Die ultimative Webflow Pre-Launch Checkliste für deine Webseite

Wenn du das erste Mal eine Webseite für dich selbst oder einen Kunden erstellst, gibt es einige Schritte, die du vor der Veröffentlichung beachten solltest. Die folgende Design-Checkliste hilft dir dabei, den Prozess zu erleichtern und keinen wichtigen Schritt zu vergessen.

‍

Projekt Setup

Kleine Projekteinstellungen die eine große Wirkung haben.

• Favicon & Webclip: Lade dein eigenes Favicon und Web Clip Icon hoch
• Zeitzone: Stelle eine Zeitzone für deine Webseite ein
• Sprachcode: Füge einen Sprachcode in deine Webseite ein, de = Deutsch, en = Englisch etc.
• Webflow Branding: Schalte das Webflow Branding aus
• Erweiterte Veröffentlichungsoptionen: Aktiviere SSL und minimiere HTML, CSS & JS
• Custom Fonts: Lade eigene Schriften als Webformat wie WOFF in das Projekt

‍

Design

Basic Design Elemente aus dem Webflow Designer für den Aufbau deiner Webseite.

• Style Guide: Lege einen Styleguide für dein Projekt an (bei größeren Projekten empfohlen)
• Globale Headings: Lege Größen & Zeilenabstände deiner Überschriften fest
• Globale Farben: Lege die Farbwerte für dein Projekt fest
• Globale Buttons: Style deine Buttons und lege einen Hover-Effekte fest
• Sektionen & Container: Lege Sektionen und Container mit Margin und Padding an
• Navigation: Lege eine Navigation an und verlinke Unterseiten
• Footer: Lege einen Footer an und verlinke Unterseiten/Kontaktmöglichkeiten/Social-Media
• Symbole: Nutze für wiederverwendbare Elemente wie den Footer Symbole
• Weißraum: Überprüfe deine Webseite auf einheitliche und ausreichende Abstände
• Formular: Gestalte das Formular mit allen zugehörigen Zuständen und hinterlege eine Kontakt-E-Mail in den Projekteinstellungen

Usability

Durch eine verbesserte Usability finden sich Besucher leichter zurecht und bleiben länger auf deiner Webseite.

• Link-Check: Prüfe ob alle Links funktionieren
• Kontakt-Check: Prüfe ob alle Kontaktmöglichkeiten wie E-Mail-Telefon und Social Media richtig verlinkt sind
• 404-Fehlerseite: Personalisiere die Fehlerseite für deine Besucher und leite sie zurück zur Startseite
• Hover-Effekte und Interaktionen: Hinterlege bei interaktiven Elementen Hover-Effekte und erstelle Ladeanimationen
• Burger-Menü: Hinterlege eine passende Navigation für Tablet- und Mobilgeräte
• Responsives Verhalten: Überprüfe das responsive Verhalten deiner Webseite auf schmaleren Bildschirmen 
• Browser-Text: Überprüfe die Darstellung deiner Webseite auf verschiedenen Browsern 

Suchmaschinenoptimierung

Die Suchmaschinenoptimierung (SEO) hilft deiner Webseite besser von Suchmaschinen durchsucht zu werden und ermöglicht ein höheres Ranking.

• Webflow Domain Indizierung: Deaktiviere die Indizierung der Webflow Domain
• Website Sitemap: Aktiviere die automatische Generierung der Sitemap
• Google Search Console: Füge deine Google Search ID ein (Falls benötigt)
• Standard Domain: Setze die URL mit www. am Anfang als deine Standard Domain
• 301 Redirects: Richte Umleitungen für alte URLs ein (Falls benötigt)
• Headline Struktur: Achte bei jeder Seite auf den richtigen Einsatz der H1–H6 Überschriften
• Alt Tags: Hinterlege bei allen Bildern einen passenden Beschreibungstext
• Meta Titel & Beschreibung: Hinterlege für jede Seite passende Meta Titel und Beschreibung
• Open Graph Einstellungen: Hinterlege Titel, Beschreibung und ein Bild für Social Media-Plattformen

‍

Barrierefreiheit

Ermöglicht den leichteren Zugang deiner Webseite für Menschen mit Beeinträchtigungen und Technologien wie Screen-Readern.

• Ausreichender Kontrast: Prüfe ob ein ausreichendes Kontrastverhältnis zwischen Vordergrund & Hintergrund besteht
• Lesbare Textgröße: Achte darauf dass deine Texte auf jedem Breakpoint klar und gut lesbar sind
• Alt Tags: (Siehe Alt Tags SEO)
• Beschreibende Link-Titel: Verwende eine eindeutige Beschreibung bei Texten für Links

‍

Performance

Mit Webanalysen kannst du wertvolle Informationen über deine Webseite erhalten und diese in Zukunft verbessern.

• Analytic Tool: Integriere ein Analytic Tool deiner Wahl, um Besucherstatistiken zu erhalten
• Performance Tool: Teste die Ladegeschwindigkeit deiner Webseite
• Entferne unbenutzte CSS-Klassen und Interaktionen: Bereinige alle nicht verwendeten Styles mithilfe des Stylemanagers‍
• Bildgrößen: Optimiere die Dateigröße deiner Bilddateien für schnellere Ladezeiten