So bitte nicht! Hier haben wir einen Musterfall für eine eher unterdurchschnittliche Homepage. Auch wenn das Beispiel natürlich überzogen ist, werden bei vielen Webseiten klassische Fehler in den Kategorien Design, Content, Funktionalität und Usability begangen. Welche Fehler das sind und wie man sie umgeht, ist das Thema unserer Blogbeiträge der nächsten Tage.

Wir starten mit der Kategorie Design. Diese kann abermals in verschiedene Unterpunkte unterteilt werden, welche diverse Falltüren für Programmierer beherbergen.

Design – Fehlerquelle Schrift

Es gibt bei der Auswahl der Schriftart (= font) für die eigene Homepage verschiedene Aspekte, die berücksichtigt werden wollen. Für einen klassischen Eindruck empfiehlt sich beispielsweise Times New Roman. Wenn die Website moderner wirken soll, sind serifenlose (= sans serif) Schriftarten wie Arial oder Helvetica eine gute Wahl. Einen netten Überblick über verschiedene Schriftarten, der auch noch Spaß macht, zu lesen, liefert das Flowchart „So you need a typeface“ von dem Grafikdesigner Julian Hansen.

Neben der Schriftart spielt auch die Größe der Schrift eine wesentliche Rolle. Texte, welche zu klein dargestellt werden, sind für viele User schwierig zu lesen. Gerade auf mobilen Endgeräten hat das zur Konsequenz, dass viel gezoomt werden muss und der Leser den Überblick verliert. Zu große Schrift dagegen nimmt Platz auf der Homepage ein, der an anderer Stelle fehlt.

Design – Fehlerquelle Layout

Beim Thema Layout sollte sich der Programmierer bewusst sein, dass die verschiedenen User seiner Website verschiedene Nutzeroberflächen verwenden. Selbst wenn die Aufteilung der Homepageinhalte auf dem eigenen Bildschirm perfekt angezeigt werden, können auf anderen PC’s, Tablets oder Smartphones Objekte von anderen überdeckt oder nicht korrekt angezeigt werden. „Responsive Design“ lautet hier das Zauberwort, welches, wenn es richtig angewendet wird, das Layout korrekt an den Bildschirm anpasst.

Ein Beispiel: Hat die Kopfzeile einer Seite eine Größe von 300 Pixel, so nimmt diese Überschrift auf dem Smartphone ohne entsprechende responsive Verkleinerung bereits ein Drittel der gesamten Oberfläche ein. Dies geht zwangsläufig zu Lasten der Nutzerfreundlichkeit.

Das Responsive Design stößt an seine Grenzen, wenn es an die Farbauswahl der Website geht. Ist eine Farbe auf dem Bildschirm des Programmierers beispielsweise dunkelblau, kann sie auf anderen Geräten, Nutzeroberflächen etc. lila wirken. Vor allem Beamer weisen oft eine andere Farbwidergabe auf als Laptop und Co. Hier hilft es nur, sich seine Website auf verschiedenen Endgeräten zu betrachten und dann zu entscheiden, ob die Farbgebung beibehalten wird.

Ein weiterer zu beachtender Punkt ist das Einhalten einer Mindesthöhe für Fußzeilen einer Website (Je nach Fall etwa 100-150 Pixel), damit der User das Seitenende eindeutig erkennen kann. Wenn der Programmierer diese Mindesthöhe nicht einhält, kann sich ein Benutzer schnell auf einer Seite „verlieren“, da er den Eindruck gewinnen kann, dass die Homepage nicht korrekt geladen wurde.

—

Quelle Beitragsbild: © master_art – Word cloud – web design – Item ID: 2968708 – http://photodune.net/item/word-cloud-web-design/2968708