14 (leicht behebbare) Fehler, welche ich immer wieder auf Webseiten sehe

«Wenn ich mein Leben noch einmal leben könnte, würde ich die gleichen Fehler machen. Aber ein bisschen früher, damit ich mehr davon habe.» - Marlene Dietrich

Mit diesem Zitat möchte ich festhalten, dass meine Einstellung gegenüber Fehler diejenige ist, dass es besser ist, Fehler zu machen und daraus zu lernen, statt gar nichts zu tun.
In diesem Sinne möchte ich Sie auf typische Fehler hinweisen, die sich relativ einfach vermeiden lassen. Leider kann auch ich nicht behaupte, all diese Fehler vermieden zu haben.
14 (leicht behebbare) Fehler, welche ich immer wieder auf Webseiten sehe

Fehlende Icons/Favicons

Das Favicon ist das kleine Icon, welches neben dem Page-Titel in den Reitern der Browser angezeigt wird (bei mir das weisse Zahnrad auf blauem Hintergrund).

Neben dem Icon können Sie noch weitere Icons hinterlegen für diverse Anwendungszwecke. Auf diese Weise können die Nutzerinnen und Nutzer viel schneller und besser Ihre Seite wiedererkennen, zum Beispiel im Browserverlauf.

So werden Favicons angezeigt

Links: Ohne Favicon | Rechts: Mit Favicon

So erstellen Sie kinderleicht Ihr Favicon

Erstellen Sie eine Bilddatei mit Mindestgrösse 256px x 256px. Es darf grösser sein, muss aber quadratisch sein.

Beachten Sie, falls Ihr Icon einen weissen Hintergrund hat, dass dieser häufig zu sehen ist, da z.B. in den Browsern die Tabs grau eingefärbt sind.

Tipp: Mit dem .png-Format können Sie den Hintergrund auch transparent machen.

Nun können Sie zum Beispiel bei https://www.favicon-generator.org/ die Icons generieren lassen.
Anschliessend müssen Sie zum einen die Bilddateien in Ihr Webseiten-Verzeichnis legen und zum anderen in Ihrer Webseite die entsprechenden Meta-Informationen hinterlegen.

Falscher h1-Titel (der Haupttitel)

«Herzlich Willkommen» oder «Vielen Dank, dass Sie unsere Webseite besuchen».

Diese Begrüssungen sind zwar nett, bringen für den Betreiber jedoch keinen Vorteil. Nicht nur Ihre Besucherinnen und Besucher möchten herausfinden, was Sie zu bieten haben, sondern auch Suchmaschinen.
Diese orientieren sich stark an Ihren Titeln.
Niemand googelt nach "Herzlich Willkommen", und wenn, dann steht die Chance etwa 1:1Mio, dass er genau Sie finden möchte.

Webprojekt starten?

  1. Checkliste (PDF) kostenlos herunterladen
  2. Ausfüllen
  3. Projekt starten
Checkliste: Webprojekt starten (PDF)

Keine 404-Seite

Bei kleinen Webauftritten weniger schlimm, bei grösseren Webauftritten kann es eher vorkommen, dass ein interner Link vergessen geht und auf eine nicht (mehr) vorhandene Seite verweist.

Eine separate 404-Seite ist stark zu empfehlen. Den Nutzer einfach zur Startseite zurückverweisen, löst in der Regel starke Verwirrung aus.

Zu viel (Block-)Text

Webseiten sind weder Buch, noch Brief, noch Zeitschrift, sondern eben Webseiten.

Für die meisten Webseiten gilt: Die Besucher/innen kommen nicht, um zu lesen (Ausnahme sind natürlich Online-Zeitungen oder Blogs).
Halten Sie Ihre Texte darum kurz, prägnant, verständlich und informativ.
Natürlich dürfen Sie in einer Case-Study auch einmal eine Geschichte erzählen. Achten Sie darauf, dass an den Stellen, bei denen die Besucher/innen knapp angebunden sind (Startseite, Angebot-Seite), schnell zum Punkt kommen.

Zu breite Textpassagen

Achten Sie bei Textpassagen darauf, das es sehr mühsam ist, wenn diese auf der Desktop-Version über die volle Breite gehen.

Texte sollten maximal 60 - 70 Zeichen breit sein. Schauen Sie dafür als Beispiel am besten einmal alle Webseiten von Zeitungen und Magazinen an (die Experten, wenn es um lesbare Texte geht). Sie finden bei diesen kaum je einen Text der breiter ist.

Textgestaltung

Zu grosse Bilder

Bei den meisten Webseiten verursachen insbesondere zu grosse Bilder (gemeint ist die Speichergrösse) lange Ladezeiten.


Tipp: Lassen Sie sich nicht täuschen, falls Ihre Seite auf Ihrem Browser in Millisekunden geladen ist. Die meisten Browser speichern Bilder im Cache. So müssen Sie die Bilder nicht neu laden. Löschen Sie also einmal den Cache um das zu testen oder noch einfacher: Drücken Sie auf der Page CTRL+F5 bzw. CMD + R.

Mit zwei Schritten die Datengrösse der Bilder verkleinern

1. Ändern Sie die Grösse. Kameras erstellen schnell einmal Bilder mit einer Auflösung von mehr als 10'000 x 10'000 Pixel. Im Web brauchen Sie für ein Full-Size-Bild (ganze Breite) auf dem Desktop etwa 2'000 Pixel, für die meisten Bilder reichen 800 Pixel Breite vollkommen aus.

2. Konvertieren Sie das Bild in das .webp-Format. Das können Sie zum Beispiel mit Convertio machen.

Zu wenig Kontrast

Kontrast bedeutet, durch Unterscheidung Abgrenzung schaffen.

Möglichkeiten dafür gibt es viele. Farben haben ganze Kontrast-Theorien, Texte können sich in Grösse, Schriftstärke, Farben und Schriftart unterscheiden.

Tipp: Zwischen Titel und Fliesstext sollte stets eine Schriftstärke übersprungen werden (Bsp. Ist der Fliesstext Regular sollte der Titel mindestens SemiBold sein).

Regelmässig entstehen Kontrast-Probleme zwischen Vordergrund- und Hintergrund-Elemente, zum Beispiel bei Text auf farbigem Hintergrund. Hier sollte dringend auf die Lesbarkeit geachtet werden.

Zu wenig «Luft»

Webseiten, bei denen die Elemente zu dicht beieinander liegen, wirken unschön, unaufgeräumt und veraltet. Achten Sie darauf, den Elementen genügend Platz einzuräumen.

In der Webprogrammierung spricht man von "Padding". Das ist der Raum zwischen dem eigentlichen Element und der "Grenze" des Elements.

Tipp: Nicht jede Weissfläche muss gefüllt werden. Die User können scrollen, verbauen Sie nicht jeden Flecken. Viel Freifläche wirkt edel, modern und professionell.

Webdesign - Padding

Fehlende Hierarchie in der Gestaltung

Schaffen Sie Hierarchie zwischen Elementen.

Mit Ihrem Design führen Sie den User. Bei fehlender Hierarchie fühlen sich die Webseiten-Besucher/innen schnell verloren und verlieren die Orientierung. Schaffen Sie klare Strukturen und helfen Sie mit eindeutigen Hierarchien und Anweisungen (Call to Actions).

Mobil-Menü auf Desktop-Version

In Mode gekommen, viele werden diese Variante verteidigen, aber ich halte dagegen und finde:

Auf dem Laptop/Desktop braucht es ein effizientes Menü.

Das Mobil-Menü hat typischerweise einen Button, welcher das Menü öffnet. So kann das Menü grundsätzlich ausgeblendet werden und erscheint nur auf Knopfdruck. Das spart Platz - einverstanden.

ABER: Das Mobil-Menü verlangt immer zwei Klicks und jeder Klick - mag es noch so minimal sein - bedeutet Aufwand.

Tatsächlich haben Studien gezeigt, dass je weiter ein Link von der aktuellen Mausposition entfernt ist, desto unwahrscheinlicher wird der Link angeklickt.
(Leider finde ich für diese Aussage keine verlinkbare Seite, die Info stammt aus einem Buch)

Webprojekt starten?

  1. Checkliste (PDF) kostenlos herunterladen
  2. Ausfüllen
  3. Projekt starten
Checkliste: Webprojekt starten (PDF)

Fehlende Call-To-Action

Sagen Sie den Webseiten-Besuchenden, was sie tun sollen.

Aus einem Grund sind diese ja bei Ihnen auf der Webseite, vermutlich wollen Sie etwas. Ganz sicher wollen Sie etwas von Ihren Besuchenden.
Achten Sie darauf, dass an verschiedenen Positionen Möglichkeiten für Aktionen geschaffen werden.

Tipp: Mit Google Analytics können sie unter anderem herausfinden, auf welchen Seiten Ihre Besucherinnen und Besucher Sie verlassen. Vielleicht hilft es, wenn Sie auf den häufigsten Ausstiegsseiten ein paar zusätzliche Call-To-Actions einbauen?

5-Sekunden-Regel vernachlässigt

Was ist die 5-Sekunden-Regel bei Webseiten?

Nehmen Sie etwa 5 Testpersonen, welche Ihre Webseite nicht kennen. Zeigen Sie diesen Ihre Startseite 5 Sekunden lang.

Fragen Sie die Testpersonen nun, was der Inhalt Ihrer Webseite ist.

Warum ist die 5-Sekunden-Regel wichtig?

Wenn Webseiten-Besucher/innen das erste Mal auf Ihre Webseite gelangen, haben Sie in der Regel max. 10 Sekunden Zeit, diese vom Abbruch abzuhalten.


Konkret: Die meisten (Neu-)Besucher/innen entscheiden in wenigen Sekunden, ob Sie Ihre Webseite genauer betrachten wollen oder ob sie lieber zurück zu Google gehen und etwas anderes suchen.

Tipp: Führen Sie den 5-Sekunden Test sowohl für die Desktop-Ansicht, als auch für die Mobil-Ansicht durch.

Fehlende/Magere About-Seite

Menschen wollen wissen, mit wem sie es zu tun haben.

Darum ist bei jeder Webseite, die ich je untersucht habe, die "Über-mich/Über-uns"-Seite mindestens in den Top 5 der meistbesuchten Seiten eines Webauftritts. Oft rangiert sie sogar nach der Startseite auf Platz 2.

Schenken Sie dieser Seite also die entsprechende Aufmerksamkeit und lassen Sie sich etwas Kreatives einfallen (oder soll ich mir Gedanken machen? --> Kontakt ;-) ).

Tipp: Zeigen Sie Gesichter! Sie dürfen dieser Seite ganz viel Persönlichkeit geben. Menschen sind mehr als ihre Arbeit. Menschen haben Hobbies, besondere Interessen, besondere Geschichten. Zeigen Sie diese!

Keine SSL-Verschlüsselung (https)

https ist die verschlüsselte (sichere) Variante des http-Protokolls. Vergleichen wir den Netzwerkverkehr mit einem Brief. Wenn Sie den Netzwerkverkehr verschlüsseln, dann können Personen dazwischen nur die Metadaten lesen (die Adresse auf dem Couvert), nicht aber den Inhalt des Briefes. 

Mir ist Datenschutz wichtig und Verschlüsselung des Webseiten-Traffics ein MUST-HAVE.

Tipp: Dank der Non-Profit-Organisation Let's Encrpyt ist eine kostenlose Verschlüsselung problemlos möglich. Die meisten Hoster bieten an, Webseiten auf Knopfdruck mit einem TLS-Zertifikat auszustatten.

Kein Pardon für unverschlüsselte Webseiten!

Weitere Artikel zum Thema:

Web-Design Trends 2021

24.07.2021 | 3min | Webdesign

Erfahren Sie, mit welchen Möglichkeiten Webseiten im Jahr 2021 punkten.

Grundlagen der Webprogrammierung

28.09.2021 | 5min | Webprogrammierung

Welche Sprache macht eigentlich was auf einer Webseite?

CHECKLISTE

Webprojekt starten?

  1. Checkliste (PDF) kostenlos erhalten
  2. Ausfüllen
  3. Projekt starten
Checkliste: Webprojekt starten (PDF)

Über mich

Undici-Web ist Ihr digitaler Partner für Webentwicklung, Webdesign, Online-Marketing und Websolutions mit Sitz Bern.

Diese Webseite verwendet Cookies, welche für die Funktionalität notwendig sind. Durch die Nutzung der Webseite stimmen Sie dem Einsatz gemäss der Datenschutzerklärung von Undici-Web zu.