29. April 2020

Die schlimmsten Webdesign Fehler die deinen Erfolg bremsen können

Inhaltsverzeichnis

    Immer wieder werde ich gefragt wie man die eigene Webseite noch weiter optimieren kann, um mehr Verkäufe zu generieren, um besser gefunden zu werden, damit die Pflege einfacher wird und die Website insgesamt noch besser wird.

    Durch einige umgesetzte Website Aufträge stelle ich immer wieder die gleichen Fehler fest und möchte diese in meinem Artikel mit dir teilen.

    Navigation

    Oft gibt es den Fall, das gerade bei der Hauptnavigation einfach zu viele Punkte enthalten sind. Die Navigation wirkt dadurch etwas überladen und der Besucher findet sich teilweise nicht zurecht.

    Der sehr wichtige call-to-action-button fehlt in der Navigation. Rechts oben kann die Telefonnummer oder die E-Mail-Adresse grafisch noch hervorgehoben werden, damit sie für den Besucher ins Auge sticht und dieser viel einfacher und schneller den Kontakt aufnehmen kann.

    Die Schriftgröße in der Navigation ist immer mal wieder zu klein, was gerade für ältere Zielgruppen etwas schwierig wird die Schrift auch gut erkennen zu können.

    Scrollt man bei der Webseite nach unten bleibt die Navigation leider nicht feststehen, so dass man dann wenn man gerade bei langen Webseiten sehr weit nach unten scrollt dann sehr mühselig wieder ganz nach oben muss um eine andere Seite auswählen zu können.

    Deshalb sollte die Navigation beim nach unten scrollen fixiert werden. Man nennt das auch “sticky Navigation”. So bleibt die Navigation immer im Blick und der Call-to-Action der sich rechts oben befindet, erhöht die Wahrscheinlichkeit zur Kontaktaufnahme.

    Hero Section

    Teilweise werden bei den Hauptbereichen die sogenannten “Hero section” immer wieder sehr große Bilder verwendet, die zum einen oft auf die Ladezeiten gehen was für Google nicht gut ist oder aber einen sehr großen Platz für den Bildschirm einnehmen.

    Und gerade wenn so große Grafiken oder Bilder verwendet werden, ist oft kein Text darauf zu sehen und auch hier fehlt in bei vielen Webseiten die Handlungsaufforderung, um den Besucher einfach abzuholen. So lässt sich der Interessent an die Hand nehmen um ihm zu sagen was er jetzt am besten tun soll.

    Das kann die Kontaktaufnahme mit deinem Unternehmen, eine Newsletter Anmeldung, ein PDF Download oder ein kostenfreies Strategiegespräch sein.

    Bilder

    Manchmal sind viel zu viele Grafiken oder Bilder eingebaut, die den Besucher auch verunsichern, weil es zu viele sind und es wird dadurch unübersichtlich.

    Auch stelle ich immer wieder fest dass teilweise zu viele Grafiken oder Bilder verwendet werden, um irgendwelche Referenzen oder Kundenmeinungen darzustellen.

    Man findet in einem Slider 20 Kundenmeinungen und mehr. Oft auch noch jeweils mit einem Bild, was nochmal weiterer Ballast für die Server ist. Daher sollte man sich auf jeden Fall überlegen, was wirklich für den Besucher relevant ist und auch nur das zeigen.

    Text auf Bildern?

    Ein weiterer häufiger Fehler ist es, das Grafiken oder Bilder verwendet werden die direkt einen Text drauf haben, wodurch Google diesen Text gar nicht indexieren kann.

    Google weiß also gar nicht, was auf diesem Bild an Inhalt vorhanden ist. Oder wenn Kontaktdaten wie E-Mail Adresse oder Telefonnummer in einer Grafik sind kann man auch nicht direkt auf die E-Mail klicken um den Kontakt aufzunehmen.

    Nutzt man Bilder oder Grafiken, so sollten diese auf jeden Fall einen sinnvollen und suchmaschinenfreundlichen Dateinamen haben. Wenn Bilder nicht optimiert sind, dann heißen diese z. B. Fotolia 128735.JPG und google kann damit nichts anfangen. Dadurch geht wichtiges Potenzial verloren.

    Daher sollte auf jeden Fall in den Dateinamen der Suchbegriff mit rein, um hier die Keywords sinnvoll einzubauen und der Datei die Datei sollte eine alt Beschreibung enthalten. Besser wäre mein-suchbegriff.jpg zu verwenden.

    Sonderzeichen und Leerzeichen solltest Du unbedingt vermeiden, da dies zu Problemen führen kann.

    Möchte man auf den Unterseiten wieder das gleiche Bild nutzen, wäre es besser das Bild mehrmals abzuspeichern und dann unter einem anderen Dateinamen, um hier noch mal andere Suchbegriffe einzubringen sowie eine andere alt Beschreibung.

    Das ist zwar eine Fleißaufgabe, wird sich aber lohnen.

    Dateigröße bei Bildern und Grafiken

    Hast Du alle Bilder komprimiert und werde diese nur in der Größe geladen, wie es notwendig ist? Oft werden nämlich bei kleinen Vorschaubilder, zwar die kleinen Bilder angezeigt, doch im Hintergrund wird die große Version geladen.

    Die Ladezeiten sind dann schnell mal deutlich so langsam.

    Tipp: Mit gtmetrix.com lässt sich das gut messen

    Beitragsbild auswählt?

    Auch bei reinen Inhaltsseiten braucht es das Beitragsbild, damit beim Teilen der Seite ein Vorschaubild erscheint. Prüfe daher, ob Du auf allen Seiten auch ein Beitragsbild ausgewählt hast.

    Entwickler Tipp: Über eine PHP Script kannst du dir Vorschaubild in der Übersicht anzeigen lassen. Das ist sehr praktisch, um zu prüfen ob bereits Bilder hinterlegt wurden.

    Hier siehst du das zusätzlich nun eine weitere Spalte Bild zu sehen ist. Standardmäßig ist das bei den Blog Beiträgen nicht so. Und gerne lasse ich mir auch die Anzahl der Wörter anzeigen, was ebenfalls über eine PHP Funktion möglich ist.

    Wie Du siehst lässt sich WordPress jederzeit erweitern um es für die Redaktion noch übersichtlicher zu machen.

    Abstände

    Mit den Abständen wird immer mal wieder zu sparsam umgegangen, sodass Bereiche sehr dicht beieinander sind. Den Bereichen am Besten etwas Luft geben und nicht mit zu vielen Trennlinien arbeiten, wo es gar nicht notwendig ist.

    Einheitliche Abstände finde ich sehr wichtig. Wenn man oben und unten ein Abstand hat, dann sollte der z. B. jeweils 50 Pixel haben und nicht mal 50px und mal irgendwie 97px oder ähnliches. Bei einheitlichen Abständen wirkt es einfach sauberer.

    Hier erkennt der Besucher schnell wo ein Abschnitt zu Ende ist oder was bei einem Abschnitt zusammen gehört. So kannst du eine bessere Struktur reinbringen und die Website sieht gleich ein Stück schöner aus.

    Inhalte

    Manche Website Betreiber nutzen sehr lange Texte, um die Suchbegriffe sinnvoll unterzubringen um hier wirklich viel Keywords rein zu packen.

    Hier sollte man auf jeden Fall die Inhalte sinnvoll bündeln und in kleine Häppchen packen, damit es für den Besucher einfacher zu erfassen ist. Wenn man mit langen Texten arbeitet, empfiehlt es sich immer mal wieder Bilder einzubauen.

    Hier hat es sich bewährt diese immer wieder im Wechsel einzubauen. Mal auf der Seite links ein Bild platzieren dann rechts der Text und wieder umgekehrt. So gibt es der Webseite eine Struktur und durch den Weg durch die Abwechslung wird es dann interessanter.

    Tipp für mobil: Hier auf jeden Fall prüfen, ob die Reihenfolge dort stimmt. Nicht das hier dann zwei Bilder hintereinander kommen. Das geht manchmal nicht so ohne weiteres. Dein Webdesigner oder Programmierer kann dir hier bestimmt helfen.

    Hat man sehr lange Texte kann man die in Akkordeons unterbringen. Hier ist der Vorteil dass der Besucher nur die wichtigsten Blöcke öffnen kann. Diese Inhalte werden von Google komplett indexiert, da sie dem mobile-first Gedanken entsprechen.

    Denn Google ist auch her gegangen und hat die Desktop Webseiten so eingestuft, dass die Inhalte trotz Akkordeon Funktion (Aufklappfunktion) hier ausgelesen werden.

    Hier findest Du coole Beispiele für Akkordeons und Toggle Funktionen:
    https://freefrontend.com/css-accordions/

    Bei den Texten sollte man nicht um den heißen Brei schreiben damit hier irgendwie die Textmenge noch zusammen kommt, weil manche SEO-Texter oder Experten meinen: ja diese Unterseite braucht unbedingt mindestens 1.500 Wörter. Wenn ein Thema mit 500 Wörtern schon abgehandelt ist dann sollte man es auch hier nicht weiter übertreiben.

    Besser mit einem Blog arbeiten und hier regelmäßig neue Artikel veröffentlichen, auch wenn diese “nur” 500 Wörter haben. Das soll jetzt aber nicht heißen, dass alle Artikel maximal 500 Wörter haben sollen. Je nach Thema, Branche und Suchbegriffe ist eine andere Wortanzahl sinnvoller. Anhand einer Themen und Keyword Recherche lässt sich dies gut herausfinden.

    Unterseiten

    Was ebenfalls gerne “falsch” gemacht wird, ist das auf den Unterseiten noch mal die gleichen Headerbilder verwendet werden. Sind jeweils unterschiedliche Bilder im Einsatz, so sieht der Besucher gleich, ob er wirklich auf einer anderen Seite angelangt ist. Das macht die Website interessanter und abwechslungsreicher.

    Alles auf einer Linie

    Dieser Punkt wird im Übrigen oft von manchen Webdesign Agenturen vergessen oder aus Zeitgründen nicht mehr gemacht. Ich möchte hier auf keinen Fall schlecht über andere sprechen, sondern Dir gute Tipps geben, wie du deine Webseite noch weiter verbessern kannst.

    Es ist wichtig, dass alles auf einer Linie ist (horizontal und vertikal). Hier empfiehlt es sich einen Screenshot zu machen und im Grafikprogramm eine Linie anzulegen um sogar hier noch mal zu prüfen ob wirklich alles auf einer Linie ist.

    Für den Browser gibt es nützliche Lineal Addons, um dies schnell und einfach überprüfen zu können. Diese Feinheiten zahlen sich aus und es entsteht eine gelungene Website.

    Ein weiterer Tipp: Öffne die Website und ziehe auf die rechte Seite ein weiteres Programmfenster, dann kannst du die Webseite scrollen und überprüfen ob hier alles auf einer Linie ist.

    Nutzerführung

    Werden auf der Webseite verschiedene Blöcke wie zum Beispiel ein News Bereich angezeigt, mit einem Bild, einem Titel, einer Beschreibung sowie einem Button dann ist es leider oft so, dass nur der Button anklickbar ist.

    Doch manche Besucher versuchen auf das Bild zu klicken oder auf den Titel, was bei vielen WordPress Themes manchmal nicht funktioniert. Je nachdem wie das der Webdesigner angelegt hat.

    Daher klare Empfehlung: auf jeden Fall das Bild, den Titel und den Button verlinken.

    Was ich sehr wichtig finde, das gerade wenn man mit der Maus über einen ein Bild geht oder einen Button das auf jeden Fall etwas passiert um dem Besucher zu zeigen:
    okay wenn du hier mit der Maus drüber gehst, passiert eine Verlinkung.

    Bei einem Bild nutze ich gerne ein Zoom Effekt, einen Farbwechsel, oder ein Plus Symbol welches zusätzlich beim Mouse-Hover erscheint.

    Hier findest du einen Link wie man die Buttons den Buttons einen coolen Effekt geben kann damit die Webseite nicht immer alle gleich aussehen:
    https://freefrontend.com/css-button-hover-effects/

    Neben diesem Beispiel gibt es auch viele weitere Effekte.

    Kontaktseite

    Besonders die Kontaktseite zählt zu den allerwichtigsten Inhaltsseiten, wenn es um eine gelungene Webseite geht. Einige der Kontaktseiten sehen recht standardmäßig aus, was nicht negativ klingen soll.

    Jedoch ist es meist die wichtigste Seite um die Kontaktaufnahme mit deinem Unternehmen zu ermöglichen.

    Die Kontaktseite sollte übersichtlich gestaltet sein. Es sollten natürlich alle wichtigen Kontaktinformationen drauf sein, ein ansprechendes Kontaktformular und am besten noch ein Bild von dir. So ist es auf jeden Fall für den Besucher sympathisch und es macht Spaß dir hier eine Nachricht zu übermitteln.

    Denn gerade jetzt hat sich der Besucher entschieden auf Kontakt zu gehen und wenn es hier etwas verwirrend aussieht oder wieder “nur ein Standardformular” genutzt wird, kann es sehr warscheinlich passieren, dass dieser sich um entscheidet und keinen Kontakt aufnimmt.

    Tipp für mehr Umsatz: Wenn du dich mit deiner Webseite von allen anderen Mitbewerbern abheben möchtest, dann schau dir unbedingt mal das Formular Plugin lead-revolution.com/de an, das dir hilft mehr Leads zu generieren, die Erfolge durch Statistiken messen zu können und vor allem zu sehen woher die Interessenten kommen.

    Um ein vertriebsoptimiertes Formular erstellen zu können, braucht es hier keinen Programmierer oder Grafiker. Denn es gibt bereits 4 unterschiedlich Icon Bibliotheken um wunderschöne Multi-Step Formulare erstellen zu können.

    Tschüss altes Formular. Willkommen Lead Revolution.

    Datenschutz und DSGVO

    Ist deine Website datenschutzkonform? Ich bin kein Anwalt und darf keine Rechtsberatung anbieten. Was ich dir aber sagen kann ist, dass viele der Webseiten nicht rechtskonform sind obwohl die Betreiber meinen auf jeden Fall “alles” berücksichtigt zu haben.

    Hier empfiehlt es sich einen Datenschutzbeauftragten oder IT Anwalt anzufragen, um wirklich safe zu sein.

    Hat die Website ein SSL Zertifikat?

    Wird in der Browserleiste ein Schloss angezeigt, dann ist das ein gutes Zeichen, dass deine Webseite sicher ist und ein SSL Zertifikat hat. Was du aber auf jeden Fall überprüfen solltest ist, ob das Schloss auf allen Unterseiten erscheint.

    Es kann nämlich vorkommen, dass verschiedene Grafiken bei einer Umstellung auf SSL doch nicht über https geladen werden, weshalb dann die Seite als nicht sicher eingestuft wird.

    Tipp: Über das Plugin Better Search and Replace lässt sich nach http://deine-domain.com suchen und dies durch https://deine-domain.com ersetzen. Einen Testlauf gibt es bei diesem WordPress Plugin ebenfalls.

    Werden Cookies erfasst von denen Du nichts weißt?

    Wenn du Google Analytics oder andere Statistik Tools nutzt oder andere Plugins, dann ist es immer wieder so dass Cookies im Einsatz sind, welche du angeben musst.

    Bei Google Analytics darfst du die Statistiken erst dann laden und den Cookie setzen, wenn der Besucher die Erlaubnis erteilt hat. Ein sehr gutes Plugin dafür ist zum Beispiel Borlabs Cookie, was ein sehr beliebtes Plugin ist.

    Neben Borlabs Cookie habe ich letztens ein sehr interessantes Gespräch mit dem Betreiber von hellotrust.de gehabt. Diese bieten ein etwas intelligenteres Cookie plugin an, dass automatisch überprüft welche Cookies gesetzt werden oder ob neue Cookies im Einsatz sind.

    Denn wenn du ein neues Plugin installierst, ein Plugin aktualisierst oder ein Skript einbaust oder ähnliches, dann kann es sein dass weitere neue Cookies gesetzt werden und du davon gar nichts mit bekommst.

    Hier hat hellotrust.de auf jeden Fall eine sehr elegante Lösung und du wirst einfach und bequem informiert. hey hier ist ein Cookie was noch nicht mit drin war und die Datenschutzerklärung wird gleich angepasst.

    Nutzt du eine Checkbox bei deinem Formular?

    Für viele ist das wahrscheinlich inwzwischen ein alter Hut, um per Checkbox auf die Datenschutzbestimmungen aufmerksam zu machen. Jedoch wird es immer wieder vergessen, dass auf der Kontaktformular die Checkbox eingebaut wird.

    In der Datenschutzerklärung muss auf jeden Fall auf die personenbezogenen Daten wegen der DSGVO hingewiesen werden.

    Sind deine Plugins datenschutzkonform?

    Auch ich bilde mich regelmäßig weiter um auf dem aktuellen Stand zu bleiben. Eine Webagentur hat mir einen sehr guten Tipp gegeben, welchen ich gerne hier teilen möchte.

    Wenn du ein Bild Komprimierungs-Plugin nutzt wie z. B. Imagify Smush Smash Bro, dann muss sichergestellt sein, dass es datenschutzkonform ist.

    Bilder komprimieren verstößt gegen die DSGVO?

    Wenn du auf deinen Bildern Personen nutzt, dann sind das personenbezogene Daten und diese wandern hier erstmal an ausländische Server wo die Bilder dann dort komprimiert werden. Demnach solltest du auf jeden Fall die Personen fragen ob das wirklich hier so erlaubt ist, da hier personenbezogene Daten an Drittländer wandern.

    Achtung: hier sollte auf jeden Fall ein Anwalt oder ein Datenschutzbeauftragter das Ganze prüfen um dies sicherzustellen. Denn ich darf hier keine Rechtsberatung geben und kenne mich auch hier nicht aus. Jedoch möchte ich Dir hier nicht nur die technischen Aspekte teilen, was aus WordPress Sicht erfolgen sollte.

    Footer

    Beim Fußbereich bei der Webseite stelle ich wiederholt fest, dass es etwas “zu langweilig” umgesetzt ist. Wenn ein Besucher an das Ende der Website angelangt ist, könnte man ihm nochmal die wichtigsten Punkte zusammenfassen.

    Das können die Kontaktinformationen sein, einen Newsletter Anmeldung, eine Handlungsaufforderungen um noch mal auf die Kontaktaufnahme aufmerksam zu machen.

    Die rechtlichen Seiten Impressum und Datenschutz dürfen natürlich nicht fehlen diese können gut rechts unten auf der Webseite runter gebracht werden. Datenschutz und Impressum muss außerdem eine eigene Seite sein.

    Unten links kann dann der Copyright-Hinweis stehen mit der aktuellen Jahreszahl.

    Damit keine jährliche manuelle Anpassung notwendig ist, lässt sich das Ganze über eine kleine PHP Funktion zu lösen um automatisch das aktuelle Datum zu generieren.

    Hierfür gibt es im Netz verschiedene Anleitungen mit der kleinen PHP Funktion. Diese kann man dann einfach indem Template einbauen, um das Ganze automatisch ausgeben zu können.

    Fazit

    Ich hoffe dir helfen diese Tipps weiter. Es gibt noch viele weitere Punkte, die oft gerne falsch gemacht werden bzw. die man optimieren könnte. Jedoch würde das den Rahmen bei weitem sprengen und wollte hier nur auf die Punkte eingehen, die mir gefühlt bei jeder dritten Website auffallen.

    Du möchtest deine Website gerne weiter optimieren? Dann nimm gerne Kontakt mit mir auf.

    Schreibe einen Kommentar

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

    © 2009 - 2020 by Philipp Pistis
    Double-click to edit link text.