Ist bei ihnen ein Website Relaunch 2017 vorgesehen? Und Sie wollen nur das Beste aus ihrer Website rausholen, sowohl bei Design als auch bei der Sichtbarkeit bei Google & Co.? Dann sollten Sie die Top-6-Fettnäpfchen meiden – ansonsten droht viel Aufwand in der nachgelagerten Suchmaschinenoptimierung (kurz SEO).

Closed for Construction

Menüs und Navigation

Hier gibt es einen einfachen Grundsatz: einfach und übersichtlich schlägt schick aber umständlich! Bedenken Sie, dass es schon schwer genug ist, unter den Abermillionen von Webseiten die User gerade auf die Ihre zu lenken – und dann ist alles so verzwickt und aufgeregt, dass der Besucher bald die „Nase voll hat“. Nichts gegen Farben, Styles oder animierte Bereiche – aber: Sinn vor Unsinn. Entwickeln Sie nach den Bedürfnissen Ihrer Zielgruppe und nicht nach dem Kunstempfinden Ihres eigenen Geschmacks.

NeoDesign-Tipp: Die mit den drei waagerechten Strichen gekennzeichneten „Burger-Menüs“ sind ein absolutes Muss für die mobile Darstellung der Navigation Ihrer Seite. Schnelle und handliche Benutzung gerade im mobilen Bereich sind die Folge – geringere Abbruchraten und mehr Interaktion auf der Seite ebenso!

Eine in Zukunft noch zunehmend wichtiger werdende Entwicklung: Kunden-Ungeduld. Damit ist nicht nur die Geschwindigkeit der Seite gemeint (Beitrag zu Ladezeit und Verweildauer finden Sie hier) sondern auch Zeit, die zum Erfassen der Navigationsstruktur bleibt. Gerade die Nutzer der Smartphones müssen schnell und einfach navigieren können – ansonsten sind sie schnell

Aufenthalsdauer, Time on Site

Besuchszeit auf einer Webseite nach Endgerät

Außerdem sollten Sie die Seitenzahlen eindämmen. Je fokussierter Ihre Webseite ausgerichtet ist, desto qualifizierter ist auch der Besucherstrom (engl. Traffic), der Ihre Seite besucht. Fragen Sie sich, was Sie Ihrer Zielgruppe bieten wollen. Interessante oder „bunte Themen“ gehören in einen eigenen Bereich, den Sie Blog, News oder Branche oder, oder, oder nennen können.

Alte Seiten löschen

Beim Relaunch werden oft neue Schwerpunkte gesetzt – zu Recht. Dadurch sind alte Seiteninhalte obsolet und können gelöscht werden. Aber bitte: Immer mit Absicherung. Das bedeutet, dass Sie vorab eine Google-Sichtbarkeitsanalyse in Auftrag geben sollten – dadurch können Sie die „alten“ Inhalte herausfiltern, die immer noch gut sichtbar bei den Suchmaschinen sind. Diese wertvollen Indizierungen sollten erhalten bleiben. Ohne hinreichende Redirect-Planung zerschlagen Sie hier viel Porzellan, dass Sie später mühsam von Hand wieder zusammenkleben müssen, um ein vergleichbares sprachliches Bild zu bemühen.

NeoDesign-Tipp: Vor dem Relaunch sollten die Weiterleitungen noch einmal überprüft werden – Empfehlung: Nicht auf die Hauptseite sondern auf inhaltlich vergleichbare Seiten oder zumindest auf die entsprechenden Kategorieseiten umleiten.

Sinnvoll wäre es daher ein Blick in die Website Statistiken, in die Google Search Console oder das Bing Webmaster Tool. Besonders sichtbare Seiten sollten niemals gelöscht werden – lieber den Inhalt modernisieren. Dazu gehört es auch, Ihre Dienstleistungen und Produkte gut mit dem angebotenen Content Ihrer Webseite zu verknüpfen. Ein Call-to-Action-Button, eine Verlinkung oder ganze Miniproduktpräsentationen bringen deutlich höhere Umsätze, wenn der Kontext dazu schon das Interesse aufgebaut hat.

Medienformat

Medienformate, insbesondere Bilder, sind derzeit noch die häufigste Hemmschwelle bei der Erstellung von schnellen Seiten. Wichtig deswegen: Fordern Sie von Ihrer Agentur oder Ihrem Programmierer das Bildmaß für die jeweiligen Elemente. Je exakter Sie diese Größe kennen, desto kleiner lassen sich Bilder auch komprimieren.

NeoDesign-Tipp: Nutzen Sie einfach erfassbare Bilder – komplizierte Flussdiagramm und Schaubilder gehören in den Hörsaal oder auf einen Vortrag. Online muss Ihr Konsument im Mittelpunkt stehen.

Bildformate sind im Übrigen mittlerweile standardisiert, online zu empfehlen sind JPG, PNG, GIF oder SVG. Bei letzterem Format handelt es sich um einen vektor-basierten Standard, der gerade bei Skalierungen enorme Qualitätsvorteile bietet. Logos oder Brands sollten grundsätzlich als svg hinterlegt werden. Für die anderen Bildquellen sollten Sie JPG bevorzugen, da es die kleinsten Dateigrößen bei vergleichbarer Bildgröße bietet. ABER: Sollte wichtiger Text im Bild enthalten sein oder transparente Hintergründe verwendet werden, empfehlen wir das Bildformat png.

Übersicht über die einzelnen Bildformate (vor und nach Kompression)

BildformatDateigrößeTestbild
JPG:66 kBWald mit schöner Beleuchtung
PNG:394 kB
GIF:127 kB
JPG nach TinyPNG.com53 kB
JPG nach ImageOptim59 kB
WebP34 kB

Stock-Designs und Vorlagen

Immer eine Frage des Geldes – aber Designvorlagen können auch richtig teuer werden im Nachhinein. Dafür müssen Sie von Grund auf verstehen, dass Sie mit einem Frontend-Design als Kauftemplate eine fixierte Darstellung kaufen. Die Kosten sind überschaubar, aber naturgemäß dadurch auch die Flexibilität.

Kauftemplates werden hundertfach verkauft und genutzt – Ähnlichkeiten der Webseiten sind daher nicht vermeidbar. Für den Nutzer entstehen deutliche Wiederholungstendenzen UND er entscheidet sich oft, solche Seiten schnell zu verlassen. In der anderen Richtung hat Individualität herausragende Vorteile: Individuelle Designs bei Onlineshops haben, laut verschiedenster Studien, eine 30 bis 70 Prozent höhere Conversion Rate – bedeutet, viel mehr Besucher interagieren mit dem Shop, kaufen oder fragen an.

Zweiter Nachteil: Selbst simple Anpassungen bei Farbe und Schriftart können aufwendiger werden. Das Verlagern des Logos oder die Veränderung der Form der Buttons kann manchmal einen Manntag in Anspruch nehmen.

 

Fallbeispiel WordPress-Frontend-Design „Bridge“

Premium WordPress Theme

Anfang 2017 über 47.000 Downloads – d.h. über 47.000 Webseiten sehen praktisch gleich aus.

NeoDesign-Tipp: Es gibt bei guten Agenturen immer ein intaktes, hoch variables Frontend-Design. Dessen Fehlerfreiheit und Variantenreichtum wiegt etwaige Mehrkosten wieder auf. Hinzu kommt die hohe Update-Häufigkeit bei WordPress – je besser Ihr Frontend damit umgehen kann, desto geringer die Pflegekosten.

Interaktive Filter: Schieberegler & Animationen

Oft gefragt: Könntet Ihr hier nicht noch einen Schieberegler einbauen, damit nur die neueste Blogs oder Produkte gezeigt werden? Grundsätzlich ist unsere Agentur ein Verfechter von Interaktionen auf Webseiten – je mehr der User zum Mitmachen aufgerufen ist, desto besser.

Aber insbesondere bei den gerade schon angesprochenen Kauftemplate und Download-Designs stehen wir oft vor einem Wirrwarr an Codes, wenn diese nicht sogar noch verschlüsselt sind. Uns sind nicht selten die Hände gebunden.

Hinzu kommt der Grundsatz, dass je mehr auf einer Seite bewegt oder animiert wird, desto schlechter ist die technische Performance. Dazu kommt, dass Schieberegler beispielsweise durch ihre Konzeption bestimmte versteckte Inhalte in der Codierung führt, die erst ausgegeben werden, wenn der Regler einen bestimmten Punkt auf seinem Weg passiert. Und Heimlichkeiten dieser Art mögen die Suchprogramme von Google & Co. überhaupt nicht. Diese automatischen Spürnasen, auch Bots oder Crawler genannt, versuchen durch immanente Seitenbesuche, die Inhalte der Webseite zu ergründen und für die Suchmaschine zu archivieren – Verstecke und Geheimnisse kommen da nicht gut an! Zusätzlich ist die Bedienfreundlichkeit im mobilen Bereich zumeist stark eingeschränkt. Wir empfehlen für eine schnelle Seite: Erstmal Finger weg und in der ersten Optimierungsphase planvoll einbauen!

Schriftarten

Ein oft unbeachtetes Fettnäpfchen ist die Schriftart. Diese bedeutet Ihnen meist sehr viel – Ihre Zielgruppe hat hingegen nur zwei Prämissen: Lesbarkeit und Gliederung. Achten Sie also darauf, dass Buchstaben nicht zu schmal und damit schlecht erfassbar werden. Ob Sie dabei serifenlose Schriften nutzen oder Anhänger von Times New Roman sind, spielt keinerlei Rolle. Wie auf jeder anderen Baustelle Ihres Webseiten-Projektes zählt das Bedürfnis beim Kunden.

Neben der Schriftart an sich zählen auch noch Schriftfarbe, Hintergrundkontrast, Zeilenabstand sowie Absatzstruktur zu den Einflussgrößen bei der Lesbarkeit einer Webseite.

NeoDesign-Tipp: Schauen Sie grundsätzlich danach, ob die Schriftarten extern eingebunden werden müssen, oder integrierbar sind. Das beeinflusst die Ladezeit Ihrer Seite enorm und kann die ansonsten hervorragende Performance komplett unterminieren. Wir empfehlen: Halten Sie die Schriften auf Ihrem Server vor und nutzen Sie nicht mehr als zwei Schriften – alles andere zerstört den Fluss innerhalb Ihres Webprojektes!