Checkliste für eine gute Webseite

Was ist zu beachten, bevor man mit der Webseite online geht??

Print Friendly, PDF & Email

Checkliste für eine gute Webseite

 

Was kann man auf einer Webseite an Inhalten & Elementen einbauen?

Funktionelles und Inhalte

  • Startseite, aber keine Willkommensseite.
    Soll Einstieg und einen Überblick über die Navigation und Inhalte bieten.
  • Überblick über die Produkte bzw. angebotenen Dienstleistungen, auch mit Details in den Unterseiten
  • Referenzen, Messeauftritte bzw. Projekte
  • Das Team mit Positionen und Zuständigkeiten
  • Kontaktmöglichkeiten bzw. Erreichbarkeiten
    Formular, E-Mail, Telefon, Fax, Skype, Facebook, Xing usw.
  • Anfahrt bzw. Anfahrtsweg evtl. mit Skizzen oder eigenen Fotos (z.B. Wegstrecke ab Autobahnausfahrt)
  • Hilfeseiten: FAQs – Allgemeine Fragen, Download-Bereich, Pressetexte und eventuell Supportbereich
  • Community-Aufbau? Forum, Facebook, Instagram, Twitter etc.
  • Intranet für eigene Mitarbeiter?
    Benutzer-Login. Knowledge Base, Interne Dokumentation, Urlaubsplanung
  • News, Info, Blog bzw. Aktuelles – RSS Feed anbieten?

Rechtliches

  • Eine Webseite muss zwingend zwei Wege der Kontaktaufnahme bieten. Pflicht ist die die Angabe einer E-Mail Adresse, die zweite Möglichkeit ist beliebig (Formular, Telefon, Skype, Whatsapp, etc. – die Erreichbarkeit muss gewährleistet sein)
  • Impressum
    (unterschiedliche Gesellschaftsformen/Unternehmensstrukturen beachten)
  • DSGVO bzw. GDPR – Datenschutzhinweis/-erklärung anzeigen über Cookie-Leiste
    Hinweis über gespeicherte Daten auf dem eigenen Server, Cookies, Auskunftsrecht, Google Fonts, Google Maps. Hinweis über gespeicherte Daten durch Social Media Buttons (extern), Hinweis über eingesetzte Statistik-Software wie Piwik oder Google Analytics, Haftungsausschluss, Webserver-Logdateien usw.
  • Copyright-Hinweise – Bildquellen angeben!
  • AGB des Unternehmens 
  • Beauftragter für Datenschutz + Adr. (Zwingend, wenn mehr als neun Personen ständig mit der automatisierten Verarbeitung personenbezogener Daten beschäftigt werden)
  • Für bestimmte Berufsgruppen zuständige Kammer angeben (Ärztekammer, Anwaltskammer..)
  • Bei Pressetexten V.i.S.d.P bestellen + Adr.
  • Online-Shop vorhanden, dann
    Widerrufserklärung, Widerrufsbelehrung, Datenschutzbelehrung, Zahlungsmethoden Versandmethoden/-kosten , Widerrufsformular, MwSt, Besondere Aspekte bei Verkauf von digitalen Gütern berücksichtigen seit 2015 (EU-Recht)
    Bei Nutzung eines e-Commerce Plugins wie Woocommerce 
  • Für FSK16/18+  Jugendschutzbeauftragter benennen (Tabak, Erotik, Alkohol etc.)

Benutzerusability

  • Responsive Darstellung – Pflicht seit April 2015 .
    Test mit Browser-Inspektor oder Online-Dienste wie Mobiletest.me
  • Kein Flash
  • Ladezeit der Webseite. Bildgrößen beachten und nicht zu viele Scripts.
    Online- Analyse: GTMetrix.com oder Google Page-Speed oder Webpagetest.org
    Ladezeit auch abhängig vom Provider und gewähltem Webhosting-Tarif.  
  • Schriftgröße und Kontrast zum Hintergrund
  • Hyperlinks gut erkennbar?
    • -> Linktext“ markieren mit Pfeil → ↑ oder Symbol, farbliche Darstellung oder unterstrichen.
    • Aussagekräftigen Linktext/Ankertext mit Keywords. Niemals <<Bitte klicken sie hier>> !!!!!
    • HTML-Title nicht mehr notwendig (nur für barierrefreie Webseiten)
  • Bildunterschriften, Beschreibungen und ALT-Tags nutzen
  • Suchfeld notwendig?
  • Spezielle 404-Seite mit Suche und Site-Map
    (WP Standard 404-Fehlerseite ist sehr schlicht, es gibt aber spezielle WP 404 Plugins zum individualisieren)
  • Site-Map für Benutzer oder Inhaltsverzeichnis
  • Seiten nicht überfrachten bzw. zu viel Schnick-Schnack. Animationen/Multimediales/Bilder/Werbung  geschickt und dezent einsetzen
  • Taxonomien wir Kategorien und Schlagwörter in Beiträgen benutzen, besonders wenn es viele Beiträge werden!

Navigation

  • 2-Klick Regel. Die wichtigsten Informationen sind nach max. 2 Klicks erreichbar, das gilt insbesondere für das Impressum oder die Datenschutzseite (hier besser 1-Klick)
  • 3-Klick Regel. Alle Informationen einer Webseite sind innerhalb von 3 Klicks erreichbar
  • Logo anklickbar und mit Home verbunden? Ist inzw. standardmäßig bei WordPress-Themes seit 2016
  • Allgemeine Hauptnavigation (Primärnavigation) ggfls. mit Subnavigation ist gut platziert und sollte auch ohne JavaScript funktionieren.
    Modern sind auch schlichte Burger-Icons mit Off-Canvas-Menü, fixierte (sticky) Menüs oder Mega-Menüs mit mehrspaltigen Inhalten, Icons und Widgets
  • Meta-Navigation
    gesonderte Navigationsleiste im Kopfbereich der Seite, z.B. mit Verlinkungen auf, Hilfe, Sitemap, Login, Impressum, Kontakt, News etc.
  • Footer-Navigation
    Auflistung der Hauptnavigation, Metanavigation, versteckte Untermenüeinträge
  • Sekundäre Menünavigation –  Geschwisternavigation Child-/Parent-Navigation – nach oben
    Können im Inhaltsbereich einer längeren Seite oder in der Seitenleiste platziert werden. Wenn der Benutzer nach unten scrollt, sollte er immer eine Weiternavigation finden!
  • Versteckte Menüeinträge für registrierte Benutzer (Mitarbeiter)?
  • Suche / Hilfe / FAQ anbieten
  • Breadcrumbs bei vielen Unterseiten nutzen
  • Mobiles Menü im Template/Theme für Smartphones?

Inhalte und Formatierung

  • Jede Seite benötigt Inhalte, mind. 200-300 Wörter bzw. 1-1 ½ Bildschirmseiten für Startseite bis zu 3 Bildschirmseiten.
  • Aussagekräftige Überschriften H2/H3/… Tags mit Keywords – (H1 nur einmal zumeist über Seitentitel)
  • Kein Duplicate Content!!
  • Mindestens ein Bild, Icon oder Skizze pro Seite
  • Bei längeren Artikel, Einleitungstext nutzen und Beiträge unterteilen bzw. Ankernavigation über Inhaltsverzeichnis sowie Pagination.
  • Listen und Tabellen ggf. nutzen
  • Farbwirkung, Akzentfarben finden – Farbharmonie, Farbwirkung durch harmonische Farbpaletten oder kalte/warme Farben oder Farbkontraste
  • Typografie, max. 2 Schriftarten (Serifenschrift und/oder Serifenlose Schrift kann auch gemischt werden)
    Display und Handwriting Schrift nur für Logo oder Überschrift. 
    Makrotypografie (Schriftschnitt, Schriftgröße, Zeilenabstand, Ausrichtung, Abstände und Leerraum)
    Mikrotypografie(Buchstaben-& Wortabstand, Trenn- und Gedankenstriche, Versalien, Texteinzug, Zahlengliederung, Sonderzeichen)
  • CTA-Button -> Call to Action Button (Handlungsaufforderung)  z.B. Ansprechpartner, Kontaktaufnahme, Newsletteranmeldung
  • Interne Verlinkung zu anderen Seiten mittels Text- oder Iconlinks !!!!! (auch Anker bzw. Sprungmarken setzen)
  • Texte gezielt mit weichen und harten Umbrüchen versehen. Absätze dienen der verbesserten Lesbarkeit!!

Unternehmen

  • Unternehmenslogo
  • CI-Konzept -> Corporate Design, Template, Farben, Buttons
  • Unternehmensblog / Aktuelles / News?
  • Verwendung eines Unternehmens-Claim (Slogan)
  • Mit Google myBusiness (vormals Google Places) ein Unternehmensprofil für Google Maps einrichten (mit Bildern, Öffnungszeiten, Bewertungen etc.)
  • Verwendung von eigenen Audio und Video? YouTube Kanal. Trailer des Unternehmens/über Produkte/Leistungen
  • Finden die Besucher eine Lösung Ihres Bedarfs?
    Customer-Journey analysieren/gewährleisten um Verlassen des Besuchers zu vermeiden. (Nutze eine Statistik-Software hierfür wie Piwik)
  • Online-Shop. Ist der Warenkorb gut auffindbar
  • Ist die Sicherheit der Kundendaten gegeben? Verschlüsselter Webseitenaufruf  über https. Der Provider stellt Ihnen im Hosting-Paket sein SSL-Zertifikat für die Domnain zur Verfügung (seit 2018 Pflicht)
  • Wird eine Mehrsprachfähigkeit benötigt?
  • Findet sich der richtige Ansprechpartner?
    Sonstige Kontaktmöglichkeiten anzeigen zB Skype, Xing etc.
  • Bildergalerien nicht nur der Produkte, sondern auch von Referenzen, Messeauftritten, Zeitungsartikel etc.. Kann natürlich auch in Beiträgen (News…) eingefügt werden.

Allgemeines / Sonstiges

  • Überflüssige Themes und Erweiterungen / Plugins deinstallieren bzw. löschen
  • Wird eine Suche angeboten? Schauen Sie sich unbedingt die Darstellung der Suchergebnisseite an.
    Übrigens: Die Standard WordPress Suche durchsucht nur Inhalte in Beiträge und Seiten. Wer mehr braucht, sucht nach einem Plugin wie searchWP
  • WordPress: Unter Einstellungen › Lesen prüfen ob die Sichtbarkeit für Suchmaschinen deaktiviert ist, sonst werden Suchmaschinen diese Website nicht indexieren!

  • Wird in den Beiträgen ein Autor angezeigt? Das sollte nicht der Admin sein; daher immer einen zweiten Benutzer anlegen, der lediglich über eingeschränkte Fähigkeiten verfügt, wie die Benutzerrolle Autor, Mitarbeiter oder Redakteur.
    Meist bekommt der Inhaber der Seite einen Benutzer zugewiesen mit der Benutzerrolle als Redakteur, damit dieser dann auch seine statischen Seite bearbeiten kann. 
  • HTML5 & CSS 3 Standard (Aktuelle WP-Templates seit 2015 folgen in der Regel den neuesten Standards)
  • Barrierefreiheit (wenn erforderlich) 
  • Aussagekräftige URLs  und Seitentitel – Permalink Struktur beachten – Angabe eines Datums oder der Kategorie in Beiträgen/Artikeln?
  • Nutzung von Favicons und speziell für iOS-Geräte wie iPhone und iPad Lesezeichengrafiken – Apple-Touch-Icon
  • Google Search Console (vormals Webmaster Tools) -> Seite anmelden, Index einreichen – Auch bei Yahoo und Bing!
  • XML- Sitemap für Suchmaschinen (in Yoast-Plugin enthalten, sonst eigenes Plugin)
  • Suchmaschinenoptimierung. Onpage und Offpage-Optimierung!
  • Benutzung von Social Media Buttons / Sharing etc.
  • Social Media allgemein – Seiten einrichten auf FB, Twitter,  Google+,  Xing? 
  • Externe Eintragungen in Webkatalogen / Verzeichnisse
  • Newsletter einrichten?
  • Werbung schalten? Z.B. Google Adsense.
  • Soll meine HP auf anderen Webseiten beworben werden? SEM / SEA (kostenpflichtig)

Wartung

  • Sicherheit der verwendeten Software / Regelmäßige Updates vom CMS, und den Erweiterungen wie Plugins und Themes
  • Absicherung des Admin-Backends (Login-Seite schützen zB mit .htaccess)
  • Nutzen von diversen Sicherheits-Tools oder -Plugins
  • Erstellung eines Backups (bitte auch lokal sichern!)
    Automatisierte Backups einrichten (wöchentlich/monatlich)
    Backup immer vor CMS-Updates!
  • Logdateien und Statistik auswerten?
    Webserver Logfiles und/oder zusätzlich Google Analytics, AWStats bzw. Piwik
  • Broken Link Checker. Checkt alle Verlinkungen auf ihrer Webseite und informiert sie per E-Mail. Geht auch mit