10 häufige Webdesign Fehler!

Was sind die häufigsten Webdesign Fehler? Webdesign ist komplex. Du musst dich um mobile Zugänglichkeit, Designästhetik, Benutzerfreundlichkeit, SEO und vieles mehr kümmern. Wenn man bedenkt, wie viele Fehler man machen kann und wie teuer diese Fehler den Besitzer der Website zu stehen kommen könnten … na ja …

Tatsache ist, wenn du dich zu sehr auf ein Element des Webdesigns konzentrierst, werden die anderen Elemente darunter leiden. Das sollte man vermeiden. Es ist wichtig sicherzustellen, dass alle Grundlagen im Webdesign abdecken werden, wenn wir eine Website bauen – die effektiv Zugriffe und Conversions erzielen soll.

In diesem Artikel erfährst du mehr über die häufigsten Fehler, die gerade von unerfahrenen Webdesignern gemacht werden, und wie du sie vermeiden kannst.

Denke daran, es geht nicht nur um SEO, oder es geht nicht nur darum, hübsch zu sein … Es gibt viele Faktoren, die zusammenspielen, um die perfekte Website zu erschaffen. Wenn du einen Aspekt vernachlässigst, erzielt deine Website halt nicht die gewünschten Ergebnisse.

Also fangen wir an!

webdesign fehler animation

Webdesign Fehler #1:
Vorsicht mit Animationen (oder gar Flash)

In den 1990er und den frühen 2000er Jahren war der Einsatz von Animationen und Flash auf Websites üblich. Es war eine Möglichkeit, Websites aufzuhübschen und Aufmerksamkeit zu erregen.

Leider wurde diese Taktik überstrapaziert ….

Schlimmer: Die Verwendung zu vieler Animationen und hüpfenden Männchen ist inzwischen ein klares Signal, dass die Person, die die Website erstellt hat, sich eher nicht im professionellem Umfeld tummelt.

Natürlich haben Animationen ihren Platz im Webdesign. Beispielsweise können sich Seitenelemente per Scroll-Effekt dynamisch zusammensetzen. Auch können dezente Animationen oder gar animierte GIFs den Fokus auf Seitenelemente lenken. Zum Teil findet man auch noch Flash auf webbasierten Gaming-Websites.

Wenn du jedoch animierte Banner oder Menüs verwendest oder wenn du Animationen in deinem Logo nutzt oder um auf bestimmte Bereiche deiner Website aufmerksam zu machen, konzentriere dich auf einzelne/wenige Elemente. Je mehr du animierst, desto mehr störst du die Besucher. Lass dies lieber!

Verwende solche Elemente also sehr, sehr bescheiden und nur, wenn nötig. Ansonsten macht es deine Website nur langsamer und nervt im Zweifel deine Besucher.

webdesign fehler farben

Webdesign Fehler #2:
Wähle passende Farben

Ein weiterer großer Fehler, den viele Laien beim Design für das Internet machen, ist die Wahl der Farben. Gerne werden Farben gewählt, die nicht zusammenpassen, sich gar beißen oder zu geringen Kontrast zum Hintergrund aufweisen.

Dies führt dazu, dass deine Besucher die Texte nicht korrekt lesen, die Aufmerksamkeit auf falsche Elemente gelenkt wird – kurz: Der Besucher nicht sauber durch die Seite geführt wird.

Achte also darauf, dass du nicht nur Farben wählst, die ästhetisch ansprechend sind, sondern auch Farben verwendest, die psychologisch mit dem Thema deiner Website korrespondieren und die Aufmerksamkeit deines Lesers auf die richtigen Elemente lenken.

Ob du es glaubst oder nicht, Farben haben spezifische Auswirkungen auf das menschliche Gehirn haben.

Zum Beispiel hat McDonald’s in seinen Restaurants immer die Farbe Rot gewählt, da die Menschen hungrig werden beim Anblick von Rot. Dies führt dazu, dass sie mehr Essen bestellen, als sie eigentlich sollten, weil sie denken, sie seien hungriger als sie tatsächlich sind.

webdesign fehler schriften

Webdesign Fehler #3:
Verwende lesbare Schriftarten

Jeder kennt diese Websites mit all diesen Kunstschriften von Cosmic Sans bis irgendwelchen Schreibschriften.

Ganz ehrlich?
So etwas macht man nicht!

Der Besucher möchte einen Text auf deiner Website LESEN! Also mache es ihm son einfach wie möglich. Du kannst selbst dein Design erstellen – doch verwende immer lesbare Schriftarten. Ich liebe Kunst und tolle Effekte – aber nicht zu Lasten der Lesbarkeit.

Einige Designer sind tatsächlich besessen von ausgefallenen Schriften. Sie haben möglicherweise Tausende von Zeichensätzen auf ihrem Rechner, und sie möchten in jedem von ihnen erstellten Design so viele Zeichensätze verwenden, wie sie können.

Fehler!

Jede von dir verwendete Schriftart sollte einen bestimmten Zweck haben. Verwende keine kursiven Schriftarten oder gar Comic Sans für den Fließtext auf deiner Website. Dies ist nicht nur nicht ästhetisch unschön, sondern erschwert auch das Lesen des Textes. Verwende eine leicht zu lesende Schriftarten wie Helvetica, Arial oder Verdana.

Du kannst etwas kreativer werden, wenn es um dein Logo und deine Headlines geht. Du solltest jedoch Folgendes sicherstellen:

  1. Die Schriftarten sind leicht zu lesen UND …
  2. Die Schriften funktionieren für deine Nische. (Verwende beispielsweise keine ausgefallenen Skript-Schriftarten auf einer maskulinen Website oder riesige, schrille Schriftarten auf einer weiblichen.)
  3. Du verwendest 1 (!) Schriftart für die Fließtexte und 1 (!) Schriftart für die Überschrift. Das war´s. Nicht mehr. Wenn es ganz doll kreativ werden soll, kannst du noch eine weitere Schriftart für besondere Fälle (Quotes) nutzen.
webdesign fehler seo

Webdesign Fehler #4:
Beachte SEO bereits im Design

Jede einzelne Website auf der Welt (außer vielleicht die, die speziell für den privaten Bereich eingerichtet wurde) benötigt Traffic.

Warum sollten wir sonst überhaupt online gehen?

Leider konzentrieren sich viele Webdesigner zu sehr auf das Erscheinungsbild einer Website und vergessen dabei zu prüfen, ob die Website für den Traffic geeignet ist!

Die schönste Website der Welt wird dir nicht viel nutzen, wenn niemand sie jemals sieht!

Ja, deine Website sollte attraktiv sein.
Und ja, deine Website sollte benutzerfreundlich sein.

Du solltest jedoch nicht vergessen, dass Suchmaschinen deinen Inhalt gut finden und indizieren können müssen. Dazu musst du die richtige Silostruktur verwenden und sicherstellen, dass deine Navigationslinks für Suchmaschinen leicht zu finden sind.

Denke auch daran, dass Google deine Website nur nach deinem Inhalt bewerten und ranken kann. Das bedeutet, dass deine Website auch genug Inhalt haben muss, damit Google deine Website auswerten kann.

Aber was ist genug?
Nun, so um die 500 Wörter sollten es schon sein.

Vielen werden jetzt sagen: „Wie soll ich so viele Wörter unterbekommen ohne meine Seite mit Text zuzukleistern.“

Die Lösung ist ganz einfach: Denke über ausklappbare Texte (Toggles) oder Infoboxen per Mouseover nach. Dies räumt nicht nur die Seite auf, sondern gibt auch deinen Lesern echte Mehrwerte.

webdesign fehler resposnive

Webdesign Fehler #5:
Gestalte auch die mobilen Website

Seien wir ehrlich. Mobil ist die Zukunft. Bis zu 90% des Traffics einer Website kann je nach Nische mobil erfolgen. Aber auch eine normale Website hat zwischen 30 und 50 % mobilen Traffic – und diese Zahl steigt weiter an.

Die meisten Menschen verwenden Computer zum Beispiel zum Schreiben von Dokumenten und zum Arbeiten, aber beim Surfen verwenden immer mehr Menschen Tablets und Smartphones, da sie überall verwendet mitnehmen können.

Wenn deine Website nicht für Mobilgeräte geeignet ist, werden zudem deine Rankings abnehmen, es sei denn, alle anderen Rankingfaktoren sind phänomenal. Wenn du WordPress verwendest, kannst du deine Website leicht mobil fit machen, indem du einfach ein mobile-freundliches (responsives) Theme auswählst.

Tipp am Rande: All unsere Themes unter https://designers-inn.de sind natürlich für mobile Endgeräte optimiert.

Und noch ein Tipp: Vor einiger Zeit hat man den Benutzeragenten ermittelt, um herauszufinden, welches System ein Besucher verwendet – und dann den Benutzer zu einer mobilen Version der Website weiterleiten. Dies macht man heute eigentlich nicht mehr. Eher wird gleich die Website für mobile Endgeräte „mitentwickelt“ – oder gar die Website als „mobile first“-Website erstellt.

webdesign fehler ladezeit

Webdesign Fehler #6:
Optimiere die Ladezeit

Einer der wichtigsten Faktoren in der heutigen SEO-Arbeit ist die Geschwindigkeit, mit der deine Website geladen wird. Wenn deine Website langsam ist, wird sie einen niedrigeren Rang einnehmen als eine Website, die schneller ist, wenn alle anderen Faktoren gleich sind. Dies liegt einfach daran, dass Google und andere Suchmaschinen verstehen, dass die Menschen ungeduldig sind und sich schnell langweilen und die Website verlassen, wenn das Laden zu lang dauert.

Die wichtigsten Dinge bei der Tempo-Optimierung sind übrigens nicht die Codes, Plugins & Co, sondern:

  • Bilder
  • Videos

Das Laden von Text dauert nicht lange. Code ist in der Regel rasch geladen. Das Laden von Bildern und Videos auf einer Website kann hingegen sehr lange dauern. Wenn du beispielsweise Fotos in einen Blogbeitrag einfügst, müssen diese nicht hochauflösend sein, es sei denn, sie werden vergrößert, um wichtige Details anzuzeigen (z. B. Infografiken).

Tipp 1: Nutze für deine Bilder ein CDN, welches deine Bilder rasend schnell (und vor allem parallel zu deinen Codes) liefern kann. Ich selbst nutze ShortPixel:

https://link.businesserfolg.de/shortpixel

Tipp 2: Du kannst auch deine Videos rasch laden lassen. Eine Bremse ist nämlich oftmals YouTube. Mit einem CDN kannst du dennoch YouTube nutzen, diese aber ohne Werbung und lästigem Code laden. Ich nutze hier Swarmify.

https://link.businesserfolg.de/swarmify

Tipp 3: Wenn du den Code deiner Seite optimieren und die Zugriffe auf die Datenbank reduzieren möchtest, dann nutze ein Cache-Plugin, beispielsweise WP Rocket.

https://link.businesserfolg.de/wprocket

Bilder sollten im Allgemeinen höchstens etwa 400 bis 1000 Pixel betragen. Videos sollten auf die kleinstmögliche Größe optimiert werden, ohne die Qualität zu beeinträchtigen. HD-Videos sind großartig, aber es dauert eine Weile, bis sie geladen werden. Dies kann deine Rankings bei der Suche beeinträchtigen, insbesondere wenn deine Videos automatisch geladen und abgespielt werden. Sie werden nur den Rest deiner Website verlangsamen.

webdesign fehler video

Webdesign Fehler #7:
Aufgepasst bei (Auto-Play)-Videos

Nichts ist irritierender als von lauten, nervigen Audiodaten überrascht zu werden. Dies gilt insbesondere, wenn dies zu einem ungünstigen Zeitpunkt der Fall ist, wenn du beispielsweise unauffällig bei der Arbeit surfen willst und grad keine Pausen ist, oder wenn dein Kind schläft, oder wenn du irgendwo surfst, wo du es nicht tun solltest. (wie zum Beispiel Kirche oder bei einer Beerdigung – oops.)

Spiele Audio oder Video nicht automatisch auf deiner Website ab, es sei denn, du hast einen guten Grund dafür.

Umfragen haben gezeigt, dass ein Benutzer, der mit Audio- oder Videodateien, die automatisch abgespielt werden, konfrontiert wird, eher die Seite verlassen will. Dies erhöht die sogenannte Absprungrate. Wenn deine Absprungrate zu hoch ist, kann dies die Platzierung deiner Website in den Suchmaschinen negativ beeinflussen.

Stelle nur dann Videos mit Autoplay ein, wenn dies dem Hauptfokus deiner Seite entspricht. Für eine Video-Verkaufsseite oder eine Squeeze-Seite ist möglicherweise eine automatische Wiedergabe erforderlich.

Andernfalls muss der Benutzer das Audio oder Video manuell de/aktivieren können. Deine Benutzer werden es dir danken!

webdesign fehler navigation

Webdesign Fehler #8:
Nützliche statt verspielte Navigation

Die Navigation ist eines der wichtigsten Elemente eines Webdesigns. Wenn ein Benutzer das Gesuchte nicht schnell findet, wird er wahrscheinlich ebenso schnell wieder gehen. Es gibt mehrere Plätze für die Navigationsoptionen auf deiner Website. Hier sind ein paar Stellen, an denen du die gewünschte Navigation/ das Menü platzieren kannst:

  • Über dem Logo – Hier kannst du Links zu wichtigen Seiten wie Datenschutzseiten und Kontaktseiten setzen.
  • Unter dem Logo – Hier findet man normalerweise wichtige Links zu Artikeln und anderen Inhalten.
  • Sidebar – deine Sidebar ist ein weiterer guter Ort zum Auffinden von Artikeln wie Artikelkategorien und Unterseiten.
  • Fußzeile – Weitere Links können in die Fußzeile eingefügt werden. Hier kannst du Links zu Seiten einfügen, wenn du diese Links nicht über dem Logo platzieren willstDu solltest auch sicherstellen, dass deine Website über Suchfunktionen/ -felder verfügt, vor allem, wenn du viel Inhalte zur Verfügung stellst. Andernfalls wird es für Leute fast unmöglich, genau den Inhalt zu finden, nach dem sie suchen.

Webdesign Fehler #9:
Beseitige (Software)Barrieren

Vor Jahren war es üblich, eine Software herunterzuladen, um eine bestimmte Website verwenden zu können. Real Player, Flash, verschiedene Webcam-Programme waren erforderlich, da ihre Funktionalität nicht in Browser integriert war.

Heute kann man eigentlich alle Aufgaben ohne Plugins in modernen Browsern lösen. Zudem gibt es so viele Viren, die die persönlichen Daten stehlen oder den Computer stören können … wenn man einen Download benötigt, um eine Funktion deiner Website zu nutzen, werden die meisten Leute das Feld verlassen.

Wenn du Funktionen benötigst, die du nicht mit Standard-HTML oder CSS erhalten kannst, solltest du HTML5 oder andere Standardformate verwenden. Wenn etwas erforderlich ist, das die meisten Leute nicht haben, wirst du nur deinen Traffic verlieren.

Du kannst auch Java oder JavaScript verwenden, das die meisten Browser heutzutage sowieso verwenden / nutzen können.

Webdesign Fehler #10:
Vergiss nicht die Kontaktinformationen

Das Fehlen von Kontaktinformationen ist für viele ein rotes Tuch und für Google ein No Go. Sicher, auch manch legitime Websites haben möglicherweise keine Kontaktinformationen, aber Fakt ist: Spammer stellen fast nie Kontaktinformationen auf ihren Websites ein. Wenn du eine Kontaktseite hast, werden die Leute dir stärker vertrauen. Außerdem ist es „Vorschrift“.

Es gibt einige Gründe, warum du Kontaktinformationen auf deiner Website hinzufügen solltest:

  1. Es ist ein Ranking-Signal für Google.
  2. Google liebt es, Kontaktinformationen auf deiner Website zu sehen, da die Website dadurch legitimer wirkt. Spammer wollen definitiv nicht kontaktiert werden.
  3. Die Nutzer werden deiner Website mehr vertrauen, wenn sie sehen, dass eine Möglichkeit gibt, mit dir Kontakt aufzunehmen.
  4. Du kannst wichtige Nachrichten von potenziellen Werbetreibenden erhalten, die dir Deals anbieten möchten, um auf deiner Website z. B. zu werben.
  5. Es könnte dich vor rechtlichen Problemen bewahren, wenn sich jemand mit dir in Verbindung setzen kann, um mögliche Probleme zu lösen (z.B. etwas zu entfernen, das du unbeabsichtigt auf deiner Website verwendet hast – unrechtmäßig).

Fazit

Webdesign ist eine wichtige, technische Aufgabe. Du musst lernen, wie viele verschiedene Browser arbeiten, wie Skripts oder HTML- oder CSS-Programme programmiert werden, wie Grafiken entworfen werden … und wie sich all dies auf dein Design auswirkt.

Selbst erfahrene Designer verlieren bei der Erstellung von Websites oft den Überblick. Sie konzentrieren sich mitunter zu sehr auf die Ästhetik, unter der die Benutzerfreundlichkeit leidet – oder umgekehrt. Oder sie konzentrieren sich möglicherweise zu sehr auf SEO und nicht genug auf das Benutzererlebnis.

Es ist wichtig sicherzustellen, dass du alle potenziellen Aspekte des Designs betrachtest und nicht zu viel Zeit und Aufmerksamkeit für einen einzelnen, bestimmten Faktor verwendest. Ein harmonisches Design berücksichtigt alle Faktoren gleichermaßen, um sicherzustellen, dass die Website sowohl für Nutzer als auch für Suchmaschinen optimal aufbereitet ist.

Du solltest vielleicht eine Checkliste für Webdesign erstellen, die du im Kopf hast. Auf diese Weise kannst du jeden einzelnen Schritt abarbeiten und im Auge behalten. Jedes Mal …

Viel Erfolg mit deiner Website!

Tool-Tipp:

Folgende Apps nutze ich in meinem Blog. Zu den meisten dieser Apps findest du auf meinem YouTube-Kanal oder direkt hier eine ausführliche Review.

Keyword-Strategie: WriterZen, LongTailPro, Link Assistant
Content-Erstellung: Frase, StoryChief, Bramework, NeuronWriter
Optimierung Pagespeed: WP Rocket, ShortPixel
Optimierung Conversion: Convertbox
Sicherheit: WPVivid

Du suchst nach einer Lösung für dein Marketing, deiner SEO- oder Content-Strategie? Dann schau auch gern in meiner Akademie vorbei: Businesserfolg.de

Deine Meinung ist gefragt!

Hat dir der Artikel gefallen? Oder fehlt etwas?
Hinterlasse mir gern einen Kommentar!

Platz für deinen Kommentar!

3 Kommentare

  1. Franzi

    Wie verhält sich das denn mit der Schriftart/Schriftgröße für die mobile Ansicht? Würdest du empfehlen diese von der klassischen Darstellung im Browser auf dem Desktop PC / Notebook zu differenzieren oder identisch zu belassen?

  2. Marco Linke

    Hi, ich würde die Schriftgröße für die mobile Ansicht anpassen. in der Regel mache ich Überschriften kleiner (damit die Zeilen nicht so rasch umbrechen) und den Fließtext größer, damit die texte sich leichter lassen.

  3. Maximilian

    Ein echt mega guter und ausführlicher Beitrag. Danke dir.

Einen Kommentar abschicken

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

Neue Themes

Neu: Scroll-Effekte, WooCommerce-Module u.v.m.

Galerie

Workshops

Workshops, Academy, Magazin, Masterclass

Starten

Geschenkt

Handbuch WordPress,
Workshop SEO & Marketing

Download

Überblick

Galerie

Features

Preise