Web-Design-Checkliste für Ihre Website

Web-Design-Checkliste für Ihre Website

Pre-Launch-Checkliste

Es ist nur allzu leicht, etwas zu übersehen (oder kaputt zu machen) während der vielen Hin- und Hergespräche, Kunden-Feedback-Sitzungen und anderen Design-Iterationen, die Sie durchlaufen. Aus diesem Grund haben wir die folgende Web-Design-Checkliste erstellt, die Ihnen dabei hilft, alle Designfehler zu überprüfen.

Überprüfen Sie zu Beginn unbedingt Ihre:

  • Abstände: Sind die Abstände auf der gesamten Website konsistent (d. h., haben Sie sich an das 8-Px-Raster gehalten oder haben Sie einen 18-Px-Abweichler hineingelassen)? Haben alle Elemente genug Platz zum Atmen?
  • Farben: Haben Sie sich an eine konsistente, harmonische Farbpalette gehalten? Sind alle Instanzen der Marke Blau tatsächlich die Marke Blau? Haben Sie globale Farbfelder verwendet?
  • Schattierungen: Wenn Sie Schlagschatten verwendet haben, ist die Lichtquelle für jeden einzelnen konsistent? Haben Sie die gleichen Weichzeichner-, Deckkraft- und Spreizungswerte verwendet?
  • Typografie: Ist Ihr Font Stack logisch und konsistent (d.h. gibt es einen Grund, warum dieses Element in einer Sans gesetzt ist)? Sind Ihre Überschriftengrößen konsistent? Haben Sie korrekte (nicht unechte) Kursiv- und Fettschrift verwendet? Sehen alle Textverknüpfungen richtig aus? Ist der gesamte Text sowohl verständlich als auch lesbar?
  • Bildmaterial: Sehen irgendwelche Bilder unscharf, verpixelt oder anderweitig seltsam aus? Sind irgendwelche Bilder kaputt oder wahnsinnig groß, was die Dateigröße angeht? Haben alle nicht-dekorativen Bilder Alt-Tags?
  • Logo: Es ist (normalerweise) nur ein weiteres Bild, aber es ist so wichtig, dass es einen eigenen Schritt rechtfertigt. Ist es die aktuellste Version? Ist es gestochen scharf (nicht verschwommen oder verpixelt)?

Sobald Sie diese ersten visuellen Überprüfungen durchgeführt haben, sollten Sie sicherstellen, dass das Erscheinungsbild Ihrer Website auf jedem Bildschirm konsistent und funktional ist.

Browserübergreifende Darstellung

Verschiedene Browser können Ihre Website auf unterschiedliche Weise darstellen. Daher ist es wichtig, Ihre Website in verschiedenen Browsern zu testen. Werfen Sie einen Blick auf die Browser-Statistiken von W3, um zu sehen, worauf Sie Ihre Tests konzentrieren sollten. (Wenn Sie allerdings an einem Re-Design arbeiten, sind die Browser-Nutzungsstatistiken nützlicher).

Während dieses Prozesses (und dem nächsten, beim Testen mit mehreren Geräten) sollten Sie sicherstellen, dass Ihre Layouts, Typografie, Navigation und andere Designelemente richtig angezeigt werden.

Die Elemente, die sich in den verschiedenen Browsern am meisten unterscheiden und daher am wichtigsten zu überprüfen sind, sind:

  • Schriftarten
  • Farben/Farbverläufe
  • Bilder
  • Logo

Geräteübergreifendes Erscheinungsbild

Es gab noch nie so viele webfähige Geräte wie heute, und damit einhergehend eine erstaunliche Vielfalt an Bildschirmgrößen. Wenn Sie es richtig anstellen, sollte Ihre Website auf jeder Bildschirmgröße gut dargestellt werden, aber überprüfen Sie es auf jeden Fall noch einmal.

Dies ist auch der Punkt, an dem die mobile Navigation entscheidend ist. Testen Sie unbedingt, wie gut sich der Benutzer auf einem Touchscreen-Gerät auf der Website bewegen kann, und stellen Sie sicher, dass beim Gerätewechsel nichts verloren geht.

Bildoptimierung

Bilder und Grafiken sind ein wichtiges Element vieler Websites, daher sollten Sie sicherstellen, dass sie richtig angezeigt werden, insbesondere auf all den ultra-hochauflösenden Geräten (wie Apples Retina-Bildschirmen) da draußen.

Als Faustregel gilt, dass Sie Ihr Bild in der doppelten Größe hochladen, in der es auf Ihrer Website angezeigt werden soll. In manchen Fällen können Sie zwei Bilder hochladen: eine Version in tatsächlicher Größe für Geräte mit geringerer Auflösung und eine doppelt so große Version für Geräte mit hoher Auflösung.

Und warum? Weil je größer das Bild ist, desto langsamer wird Ihre Seite geladen und desto schlechter wird die Benutzererfahrung (was sich auch negativ auf die Suchmaschinenoptimierung auswirkt, worauf wir später noch eingehen werden).

Schauen Sie sich unseren ausführlicheren Artikel über Bildoptimierung an, wenn Sie noch mehr darüber erfahren möchten.

Testen der Website-Funktionalität

Design und Funktionalität gehen zwar Hand in Hand, aber isolieren Sie beide, um sicherzustellen, dass die Website sowohl so aussieht, wie sie entworfen wurde, als auch die beabsichtigte Leistung erbringt.

Integrationstests

Dies ist super wichtig und kann von einer schnellen Aufgabe bis zu einer riesigen Aufgabe reichen, je nachdem, wie viele Integrationen Sie haben. Erstellen Sie sich eine Liste mit den neu hinzugefügten, damit Sie sie später nicht vergessen.

Einige gängige Integrationen zum Testen könnten sein:

  • Web-Formulare (prüfen Sie, ob die Formulare funktionieren und ob die übermittelten Informationen an die richtige Stelle weitergeleitet werden)
  • Autoresponder
  • Marketing-E-Mails (MailChimp, Constant Contact, HubSpot, Drip-Kampagnen, usw.)
  • RSS-Feeds
  • E-Commerce
  • CRM
  • CMS

Link-Tests

Dies kann ein echter Knackpunkt sein, einfach weil die meisten Websites Dutzende (wenn nicht Hunderte) von Links haben. Meistens gibt es ein oder zwei Links, die nirgendwo hinführen, und es ist wichtig, diese zu finden, bevor es Ihre Endbenutzer tun.

Einige der wichtigsten zu überprüfenden Links sind:

  • Links in der oberen Navigation
  • Links in der Fußzeile
  • Logo (typischerweise Links zur Startseite)
  • Links zu sozialen Medien (Facebook, Twitter, etc.)

Anstatt all dies manuell zu tun, empfehlen wir, einen Link-Crawler wie den ahrefs Backlink Checker, das Chrome-Plugin Check My Links oder Screaming Frog (das sich auch hervorragend für SEO-Audits eignet) zu verwenden.

Content Bearbeitung

Der Content ist König, und der Testprozess sollte fit für einen sein. Typischerweise beinhaltet dies, dass sichergestellt wird, dass alle Inhalte aktualisiert und genehmigt wurden. Ich kann Ihnen nicht sagen, wie viele Websites ich gefunden habe, die noch irgendwo einen lorem ipsum-Absatz haben.

Wenn Sie Content-First-Design praktizieren, sollten Sie den endgültigen Inhalt bereits fertiggestellt haben, so dass Sie sich auf eine feinere Überprüfung konzentrieren können, wie z.B. die Überprüfung auf Rechtschreib- und Grammatikfehler.

An dieser Stelle ist es auch wichtig zu erwähnen, dass es in Ordnung ist, wenn Beiträge nachträglich geändert werden. Kunden, Teammitglieder oder Sie selbst können den Text jederzeit über ein CMS anpassen. Das Hauptziel hier ist es, sicherzustellen, dass der Content Ihrer Website kein völliges Kauderwelsch ist.

Suchmaschinenoptimierung (SEO)

Das Analysieren und Optimieren Ihrer Website nach der Veröffentlichung ist ein nie endender Prozess. Und Sie müssen die semantische Struktur Ihrer Website von Anfang an berücksichtigen. Das bedeutet aber nicht, dass Sie nicht von einer SEO-Überprüfung profitieren können, bevor Sie veröffentlichen.

Genaueres über SEO-Optimierung oder auch die häufigsten SEO-Fehler können Sie in diesen Beiträgen nachlesen.

Weitere Beiträge unserer Website rundum das Thema Webdesign:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.