Gutes Webdesign: Homepages prüfen und begutachten. Oft kann man als Kunde nur schwer einschätzen, ob man eine „gute“ Webseite bekommen hat. Wir geben Tipps zur Prüfung von Webseiten.
Gutes Webdesign: Erhält ein Webdesigner den Auftrag, eine bestehende Webseite zu prüfen, so packt ihn bei vielen Webauftritten das kalte Grauen. Wird dem Kunden dann die fertige Analyse ausgehändigt, so ist das Erstaunen oft groß. Denn der Kunde war mit dem bestehenden Internetauftritt womöglich sehr zufrieden und fällt aus allen Wolken, wenn er erfährt, dass er für sein Geld minderwertige Arbeit erhalten hat.
Natürlich gilt es bei einer solchen Analyse zu berücksichtigen, dass die Webtechnologie eine schnelllebige ist. Es gibt allgemeingültige Kriterien, die langlebig sind. Und es gibt Bereiche wie Programmcode und Features, die vor wenigen Jahren noch State-of-the-Art waren und heute womöglich längst überholt sind.
So wurden früher Tables (= Tabellen) dafür „missbraucht“, die gesamte Webseite zu strukturieren und zu gestalten. Oder es wurde mit statischen Größen gearbeitet, da die Webseite sowieso nur auf Desktop-Bildschirmen angeschaut wurde. Dabei galt es bestenfalls die Entscheidung zu treffen, ob die Webseite bereits für Bildschirmbreiten von 800 Pixel oder erst ab 1.024 Pixel optimiert werden sollte. Solche Fossilien finden sich auch heute noch im Internet.
Wenn aber eine Webseite erst wenige Jahre alt ist und auf Basis von Tables gestaltet oder wenn sie nicht für Tablets und Smartphones optimiert wurde (= Resposive Design), dann kann auch der Kunde dies sehr einfach prüfen. Und es sollte ihm zu denken geben.
Gutes Webdesign: das Layout
Wird über gutes Webdesign räsoniert, so schärfen viele Anbieter ihr persönliches Profil zuallererst mit Fachbegriffen wie „W3C Validität“, „Responsive Design“, „Cross-Browser-Kompatibilität“, „Semantik“ und vieles mehr. Alles wichtige Aspekte – ohne Frage.
Das erste, was ein Besucher jedoch zu sehen bekommt, ist nicht der HTML-Quellcode, sondern der Webauftritt selbst. Und er benötigt nur wenige Sekunden, um sich zwischen „gefällt mir!“, „geht so“ und „geht gar nicht“ zu entscheiden. Zwar nützt auch das tollste Design nichts, wenn der (Text-)inhalt schlecht geschrieben oder irrelevant ist. Aber der erste visuelle Eindruck entscheidet oft darüber, ob ein Besucher überhaupt auf der Webseite bleibt, oder sie schnellstmöglich wieder schließt. Nervige Pop-Up-Fenster, sei es für die Anzeige von Werbung oder mit der Aufforderung, den Newsletter zu abonnieren, verscheucht viele Besucher. Trotzdem verzichten auch viele große und bekannte Portale bis heute nicht auf solche Gimmicks.
Ob das Layout einer Webseite gelungen ist oder nicht, ist und bleibt natürlich immer Geschmackssache. Und über Geschmack lässt sich bekanntlich streiten. Egal wie gelungen ein Webauftritt gestaltet wurde: Kritiker wird es immer geben.
Es gibt allerdings einige Grundregeln für gutes Webdesign
Im ersten Schritt möchten wir diese Grundregeln vorstellen und im Anschluss technische Aspekte vorstellen, welche gut konstruierte Webseiten berücksichtigen.
-
Ein klares, übersichtliches Weblayout
Präsentiert sich ein Webauftritt überladen, so schreckt das den Besucher ab. Gefragt sind klare Strukturen. Der Besucher soll die Inhalte übersichtlich präsentiert bekommen und die für ihn relevanten Informationen schnell finden können.
-
Usability (= Benutzerfreundlichkeit )
Die Benutzerfreundlichkeit wird oft in einem Atemzug mit dem Navigationsmenü genannt. Doch diese Perspektive ist zu eng gefasst. Denn zur Usability einer Webseite gehört neben einer klaren Strukturierung und guten Präsentation der Inhalte unter anderem auch der Text.
-
Text-Design
Kontrastarmer oder zu kleiner Text mag stylish aussehen, erschwert aber die Lesbarkeit. Ebenso Text, der auf unruhigen Hintergrundbildern präsentiert wird. Zu bevorzugen ist ein Text-Design, bei dem schwarzer Text auf weißem oder hellem Hintergrund dargestellt wird. Oder alternativ weißer Text auf sehr dunklem Hintergrund. Der dadurch entstehende Kontrast erhöht die Lesbarkeit des Textes dramatisch – die Besucher werden es Ihnen danken.
Zur Usability einer Webseite gehört aber nicht nur eine gute Lesbarkeit des Textes, sondern auch der Textinhalt. Häufen sich die Rechtschreibefehler, so wirkt das auf den Leser abschreckend. Schlecht geschriebene Inhalte und endlos lange Sätze reduzieren die Benutzerfreundlichkeit ebenso wie spärlich eingesetzte Absätze. Langweilige Inhalte tragen dazu bei, dass der Benutzer schnell wieder weg ist.
Sie sollten zudem darauf verzichten, überflüssige Informationen bereitzustellen. Viele Webseiten begrüßen ihre Besucher mit „Herzlich Willkommen auf unsere Webseite“. Das ist weder interessant noch kreativ und erzeugt beim Leser eher Resignation als Begeisterung. Allgemeinplätze im Broschüren-Stil erfreuen die meisten Besucher genauso wenig: „Wir sind ein innovatives Unternehmen der Medienbranche, welches die Zeichen der Zeit früh erkannt hat und diese Erkenntnisse effizient im Dienste seiner Kunden einsetzt.“ So kann man schreiben. Muss aber nicht. Und ganz besonders nicht zu Beginn des Textes.
Denn auch der Textaufbau ist ein wichtiges Kriterium. Texte sollten so geschrieben werden, dass wichtige Dinge möglichst am Anfang stehen. Bei umfangreichen Textinhalten auf einer Seite kann natürlich nicht alles in den Anfang gepackt werden. In diesem Fall sollte eine interessante Einleitung dafür sorgen, dass der Leser „Lust auf mehr bekommt.“
-
Verwendung von Textüberschriften und Absätzen
Oft bleibt der Besucher nur kurz auf der Webseite. Achten Sie einmal auf Ihr eigenes „Surfverhalten.“ Nehmen Sie sich die Zeit, eine halbe bis eine Stunde auf einer Internetseite zu verweilen? Sofern der Inhalt interessant, informativ und weiterführend ist, kann dies durchaus der Fall sein. Im Durchschnitt bleiben Besucher aber – je nach Webportal und Branche – oft nur wenige Minuten auf einer Webseite.
Viele Besucher lesen die Texte zudem nicht brav von oben nach unten, sondern „scannen“ sie zunächst schnell darauf, ob sie hier die gewünschten Informationen finden. Dabei werden sie durch prägnante Textüberschriften ebenso unterstützt wie durch eine klare Struktur, Absätze oder die Verwendung von Listen.
-
Wahl der Schriftart
Zum Text-Design gehört natürlich auch die Wahl einer geeigneten Schriftart. Die meisten Leser bevorzugen am Bildschirm serifenlose Schriften (= „Sans Serif“). Diese zeichnen sich dadurch aus, dass die Strichstärke der Buchstaben gleichmäßig ist und die Schrift keine Serifen aufweist. Serifen sind mehr oder weniger feine Linien, die einen Buchstaben am Ende – quer zu seiner Grundrichtung – abschließen.
Früher wurden auf Webseiten ausschließlich Standard-Schriftarten verwendet. Denn es konnten nur Schriftarten angezeigt werden, die der Benutzer auch auf seinem Computer installiert hat. Es wurde beispielsweise definiert:
font-family: Arial, Helvetica, Verdana, sans-serif;
Das bedeutet, dass der Browser angewiesen wird, die Schrift Arial zu verwenden, wenn sie auf dem Computer vorhanden ist. Arial ist eine Standard-Schriftart unter Windows. Falls Arial nicht installiert ist, soll er Helvetica nehmen, eine Standardschriftart auf dem Mac. Sind beide nicht vorhanden, so soll Verdana zum Einsatz kommen und ist auch diese Schrift nicht verfügbar, so soll wenigstens eine serifenlose Schrift verwendet werden.Heute setzen viele Webseiten so genannte Web-Fonts (= Web-Schriftarten) ein. So bieten die Google-Webfonts eine umfangreiche Auswahl aus verschiedenen Schriftarten. Der Webdesigner sollte trotz dieser verführerischen Möglichkeit dennoch einen klaren Kopf behalten und folgendes berücksichtigen:
- Ist die gewählte Font gut lesbar?
- Bringt der Einsatz einer solchen Webfonts einen Mehrwert? Indem auf diesem Wege zum Beispiel die CI-Font des Kunden in die Webseite integriert werden kann?
- Denn jede Webfont muss gesondert geladen werden, was das Datenvolumen erhöht und sich bei großen oder umfangreichen Fonts ggf. auch negativ auf das SEO (= Suchmaschinenoptimierung) auswirken kann.
- Es sollte eine klare Linie beibehalten werden. Webfonts sind kein Selbstzweck. Auch wenn es problemlos möglich ist, macht es keinen Sinn, auf der Webseite mit einem halben Dutzend unterschiedlicher Fonts zu agieren und so ein uneinheitliches Layout zu erzeugen.
-
Navigationsmenü
Vor der Umsetzung sollte ein Webauftritt gut konzeptioniert werden. Was ist wirklich wichtig? Welche Kategorien sind so wichtig, dass sie einen eigenen Hauptmenüpunkt rechtfertigen? Denn einerseits ist der für das Hauptmenü zur Verfügung stehende Platz begrenzt. Andererseits zeugt ein ausuferndes Hauptmenü von mangelhafter Planung oder der Unfähigkeit, klare Prioritäten zu setzen.
Bei einer umfangreicheren Webseite benötigt das Hauptmenü in der Regel Untermenüpunkte. Auch hier sollte bereits im Vorfeld ein Konzept erarbeitet werden. Idealer Weise sollte es nur eine Untermenü-Ebene geben. Bei sehr vielen Inhaltsseiten maximal zwei Untermenü-Ebenen. Eine zu starke Diversifikation trägt zur Unübersichtlichkeit bei.
Eine Webseite ist kein „Ratespiel“: Der Besucher sollte jederzeit die Antwort auf die Frage „woher komme ich und wohin gehe ich?“ kennen. Dazu ist es erforderlich, dass der aktuelle Haupt- und gegebenenfalls aktuell aktive Untermenüpunkt hervorgehoben wird. Beispielsweise durch eine andere Textfarbe oder eine andere Hintergrundfarbe des Navigationselementes.
Dies ist ein Kriterium, welches erstaunlich viele Webseiten stiefmütterlich behandeln. So verfügen beispielsweise auch viele WordPress-Themes über keine entsprechende Hervorhebung aktiver Navigationselemente.
Besonders bei umfangreicheren Webseiten ist ein Breadcrumb (= Brotkrumenpfad) hilfreich. Er zeigt dem Besucher an, in welcher Verzweigung der Webseite er sich aktuell befindet.
Gutes Webdesign: die Technik
Die zuvor genannten Kriterien für ein gutes Webdesign geben Designern – aber auch dem Kunden – Anhaltspunkte ob ein Design die grundsätzlichen Voraussetzungen für gutes Webdesign erfüllt. Auf diesem Wege kann auch der Kunde – selbst als Laie – prüfen, ob bei der Erstellung der Webseite sauber gearbeitet wurde.
Es gibt aber noch weitere Bereiche, die zu einem guten Webdesign gehören und die nicht auf den ersten Blick ersichtlich sind. Insbesondere im Hinblick auf die eingesetzte Technik.
Prüfen der Browserkompatibilität
Wird die Webseite auf unterschiedlichen Browsern fehlerfrei dargestellt? Kleinere Abweichungen bei der Darstellung unter unterschiedlichen Browsern sind normal, da jeder Browser den HTML-Code interpretiert und den Webseiteninhalt auf dieser Basis darstellt. Die Webseitenelemente sollten sich aber unabhängig vom Browser einheitlich präsentieren und korrekt dargestellt werden.
Die am weitesten verbreiteten und damit wichtigsten Browser sind Chrome, Firefox, Safari und Internet Explorer. Zumindest auf neueren Versionen dieser Browser – d.h. nicht älter als ca. 5 Jahre – sollte die Webseite korrekt dargestellt werden. Mehr Abwärtskompatibilität ist natürlich nicht falsch und auch nicht unmöglich. Sie ist jedoch oft aufwendig und verursacht dadurch zusätzliche Kosten.
Prüfen des Responsive Designs
Erst kürzlich durften wir eine einfach gestaltete TYPO3 Webseite begutachten, die vor weniger als zwei Jahren erstellt wurde und nicht responsive war, d.h. nicht für Mobilgeräte optimiert wurde. Dies muss nicht zwangsläufig auf fehlendes Know-how zurückzuführen sein. Vielleicht stand für die Webseite nur ein kleines Budget zur Verfügung. Es wäre aber auch in diesem Fall sinnvoller gewesen, statt auf TYPO3 auf ein einfacheres CMS-System zurückzugreifen und dafür Responsive Design zu integrieren.
Ob eine Webseite responsive ist, lässt sich oft auch am Desktop-Computer prüfen, indem das Browserfenster immer schmaler gezogen wird. Passt sich das Layout an den zur Verfügung stehenden Platz an, so ist die Webseite responsive.
Es kann allerdings sein, dass eine Device-Detection zum Einsatz kommt. Also ein Tool, welches überprüft, ob der Besucher die Webseite mit einem Desktop-Computer, einem Tablet oder einem Smartphone aufruft. Und dass je nach Ergebnis dieser Überprüfung die Anzeige angepasst wird. Möglich ist auch, dass der Webdesigner bei den Media Queries statt mit width mit device-width gearbeitet hat und das Layout nur angepasst wird, wenn der Webseitenaufruf tatsächlich mit einem Mobilgerät erfolgt.
Falls also bei einer Verringerung der Browserfensterbreite keine Layoutanpassung erfolgt, sollte die Webseite sicherheitshalber zusätzlich auf einem Mobilgerät geprüft werden.
Prüfen des Quellcodes
Auch der Laien kann über den Source-Code (= Quellcode) einer Webseite zumindest grundlegende Schwächen erkennen. Der Quellcode lässt sich über das Browsermenü aber auch über Shortcuts (= Tastenkürzel) aufrufen. Beim Firefox, Chrome und Internet Explorer über STRG+U, beim Safari am Mac mittels CMD+ALT+U.
Finden sich im Quellcode endlose Einträge der Form:
1 2 3 4 5 6 7 8 9 10 11 12 |
<table> <thead> <tr> <th>Kopf</th> </tr> </thead> <tbody> <tr> <td>Inhalt</td> </tr> </tbody </table> |
so ist die Webseite entweder schon sehr alt (ca. aus dem Jahre 2006/2007 oder älter) oder jemand hat sein Handwerk nicht ordentlich gelernt. Neuere Webseiten basieren auf dem CSS Box-Modell. Tabellen dürfen selbstverständlich weiterhin eingesetzt werden, allerdings sollten sie nur dann Verwendung finden, wenn tatsächlich Tabellen benötigt werden. Als Layoutinstrumente sollten sie schon seit mehr als einem Jahrzehnt nicht mehr zum Einsatz kommen.
Bei Content Management Systemen wie z.B. TYPO3 oder dem Blogsystem WordPress finden sich im Quellcode auch Angaben zum System. Bei TYPO3 lassen sich über das Copyright Rückschlüsse auf die Aktualität ziehen („TYPO3 is copyright 1998-2017 of Kasper Skaarjo.“). Bei WordPress findet sich folgende Angabe:
1 |
<meta name="generator" content="WordPress 4.8" /> |
Über die Versionsnummer (vorstehend: 4.8) lässt sich das Alter der WordPress-Installation prüfen.
Hierzu ist allerdings auch folgendes festzuhalten:
die regelmäßige Prüfung und Systemaktualisierung ist mit einem entsprechenden Aufwand verbunden, den der Webdesigner oder die Webagentur nicht kostenfrei leisten kann. Ist der Kunde nicht bereit in die regelmäßige Pflege seines Systems zu investieren, so veraltet das CMS.
Prüfen des Markup auf Semantik und Validität
Unter Markup wird der HTML-Code einer Webseite verstanden. Dieser sollte idealer Weise „valide“ sein, also keine Fehler aufweisen. Kleinere Fehler sind oft verschmerzbar. Sie werden gegebenenfalls auch von Extensions oder Plugins von Drittanbietern verursacht. Zudem kann eine Webseite bei der Fertigstellung durchaus 100 Prozent valide sein, die Redakteure bei der Einpflege neuer Inhalte im Anschluss aber „Fehler einbauen.“ Dennoch ist es ein Unterschied, ob 10 bis 20 Fehler gefunden werden oder hunderte. Wir haben schon Webseiten geprüft, die mehrere hundert Fehler enthalten haben – und zwar pro Seite.
Zu viele Fehler bzw. sich wiederholende Fehler auf unterschiedlichen Inhaltsseiten sind ein Indikator dafür dass der Webdesigner nicht sauber gearbeitet hat. Sofern die Webseite nicht „für besonders kleines Geld“ realisiert wurde, sollten solche Fehler nicht vorkommen.
Problematisch ist hier oft auch der Einsatz von WordPress-Themes. Webseiten mit WordPress werden nicht selten relativ günstig realisiert und basieren auf Vorlagen. Diese Vorlagen halten häufig nicht zu 100 Prozent die HTML-Standards ein. Circa ein bis zwei Dutzend Fehler im Markup sind hier nicht unüblich.
Das HTML lässt sich prüfen, indem die URL der Zielseite über den W3C Markup Validation Service untersucht wird.
Auch das verwendete CSS lässt sich prüfen indem im Validator der Pfad zur CSS Datei bzw. zu den CSS Dateien angegeben wird.
Semantik: auch wenn das HTML selbst valide ist, kann der semantische Aufbau fehlerhaft sein. So sollten Überschriften über die entsprechenden H1- bis H6-Tags auch als solche formatiert werden. Absätze sollten durch <p></p> Tags gewrapped (= eingeschlossen) werden usw. Hier sollte eine klare Struktur vorliegen. Dies wird nicht vom W3C Validator geprüft und somit auch nicht beanstandet.
Ladezeiten einer guten Webseite
Je schneller die Inhaltsseiten eines Webauftritts geladen werden, desto besser. Die Ladezeit wird durch unterschiedliche Aspekte beeinflusst:
- Die Geschwindigkeit, mit der der Server die angeforderten Daten bereitstellt.
- Der Einsatz von Caching-Techniken, damit wiederkehrende Elemente im Browsercache gespeichert und beim Aufruf einer neuen Seite nicht nochmals geladen werden müssen.
- Die Größe der Dateien – dazu gehören das HTML sowie der Inhaltstext aber auch das CSS, Bilder und weitere Mediaelemente (z.B. Videodateien oder Audiodateien) sowie ggf. JavaScript.
Gelegentlich wird argumentiert, dass in Zeiten schneller DSL-Verbindungen die Ladezeiten keine große Rolle mehr spielen. Wenn eine einzige Inhaltsseite aber 5 MB, 10 MB oder gar mehr aufweist, ist das gleich in mehrfacher Hinsicht kontraproduktiv. Zum einen ruft ein Teil der Besucher die Webseite von unterwegs auf und verfügt dabei oft weder über schnellen Internetzugang noch über ein unbegrenztes Datenkontingent. Zum anderen prüfen Suchmaschinen bei der Bewertung einer Webseite auch die Ladegeschwindigkeit bzw. die Größe der abzurufenden Inhalte. Diese Kriterien fließen in die Ranking-Bewertung mit ein.
Es gibt eine Reihe von Tools, mit der die Ladezeiten von Webseiten geprüft und analysiert werden können.
Suchmaschinenoptimierung
Längst nicht jede Werbeagentur und auch nicht jede Webagentur ist auf Suchmaschinenoptimierung spezialisiert. Da dieser Bereich sehr umfassend und komplex ist, kann an dieser Stelle auch nicht umfassend darauf eingegangen werden.
Dennoch lässt sich auch durch den Laien in einem ersten Schritt prüfen, ob seine Webseite überhaupt bzw. ausreichend suchmaschinenoptimiert ist. Dazu werden einzelne Inhaltsseiten der Internetpräsenz ausgewählt und dafür das Ranking geprüft.
Nehmen wir beispielsweise an, ein Unternehmen fertigt Motorbauteile an und nutzt dafür modernste CNC-Maschinentechnik. Nun kann nicht „aus dem Stand“ davon ausgegangen werden, dass diese Firma bei der Google-Suche nach CNC-Maschinentechnik ganz oben in der Suchergebnisliste erscheint. Dafür sind von Seiten der Webagentur entsprechende On-Site- und Off-Site-Suchmaschinenoptimierungsmaßnahmen und oft auch eine regelmäßige Betreuung erforderlich. Zudem spielt auch eine wichtige Rolle, wie populär der Suchbegriff ist und wie viele Mitbewerber um eine gute Platzierung es gibt.
Wurde die zugehörige Inhaltsseite gut optimiert, so sollte sie jedoch zumindest bei einer regionalen Suche – z.B. „CNC-Maschinentechnik Krefeld“ – gefunden werden.
Stichworte: Gutes Webdesign
Sehr schön zusammengefasst. Ich denke man kann das Thema natürlich ins unendliche ausdehnen aber als Leihe kannman sich schon hier orientieren.