Du bist hier:  Seitenreport    Artikel

Die 11 größten Fehler im Webdesign (Gastbeitrag)

22. February 2011
Florian B.Kommentare: 8

Ich möchte folgend ein paar Punkte auflisten, welche man als Webdesigner bezüglich guter Benutzerfreundlichkeit und Barrierefreiheit beachten sollte.

Fixes Layout breiter als 1000 Pixel

Einer der optisch und technisch schlimmsten Missetaten, welche ein Webdesigner machen kann, ist ein fixes Layout, das mehr als 1000 Pixel in der Breite misst. Bei einer Überschreitung dieser Zahl um nur wenige Einheiten entsteht bei einer Bildschirmauflösung von 1024 Pixeln Breite, welche auch heute noch recht weit verbreitet ist¹, ein horizontaler Scrollbalken, was nicht unbedingt benutzerfreundlich ist. Dies gilt aber nicht nur für kleine Auflösungen: Auch wenn der Benutzer eine breitere Auflösung besitzt, heisst das nicht, dass er im maximierten Fenster oder Vollbild surft, denn womöglich benutzt er eine Sidebar im Browser oder hat mehrere Fenster nebeneinander offen.

¹ 21% mit Auflösung von 1024x768 oder weniger laut Statistik von w3schools, Januar 2010

Website-Header höher als 300 Pixel

Ein ähnliches Vergehen stellen Website-Header dar, die eine Höhe von etwa 300 Pixeln überschreiten, denn dies führt dazu, dass bei niedrigeren Auflösungen der Inhalt der Seite nicht auf Anhieb sichtbar ist. Der Benutzer muss in diesem Falle zuerst runter scrollen, damit er den Inhalt sehen kann.

K(l)einen Website-Footer

Umgekehrt ist es zu empfehlen, sich nach einer Mindesthöhe für den Footer der Website auszurichten. Wenn der Content bis ans untere Ende der Seite reicht und kein Footer vorhanden ist, wird der unterste Bereich an den Rand des Browserfensters bzw. Bildschirms "gedrückt", was für den Benutzer auf Dauer unangenehm ist. 

Keinen Abstand zum Fensterrand

Dasselbe gilt für den Abstand des Inhalts zu den Seiten des Fensters. Wenn der Fliesstext gleich mit dem ersten Pixel vom linken Bildschirmrand beginnt, wird das Lesen genauso erschwert. 

Zu breiter Fließtext

Zudem sei angemerkt, dass eine fixe Breite eines Fliesstextes dessen Leserlichkeit erleichtert, denn wenn der Text vom linken Fensterrand bis zum rechten Fensterrand reicht, wird die Orientierung während dem Lesen komplett zerstört. Nicht zuletzt deshalb haben Artikel in diversen Weblogs eine Breite von nur etwa 400 Pixeln.

Bild als Hintergrund

Ein weiterer Punkt bezüglich der Leserlichkeit eines Textes ist die Tatsache, dass es Webdesigner gibt, welche ein Bild oder Foto als Hintergrund verwenden. Hier wird der Leser nahezu gefoltert. Optimale Hintergründe sind entweder einfarbig, bestehen aus nicht allzu grellen Farbverläufen oder weisen leichte Muster auf. Aber es sei angemerkt, auf die Wahl der Farben zu achten, denn rote Schrift auf blauer Unterlage ist genauso schlecht fürs Auge. 

Zu grosse Dateien

Ein fataler, technischer Fehler, den man machen kann, ist das Onlinestellen von nicht komprimierten Bildern, selbst wenn sie zu Design gehören. Zu grosse Dateien benötigen auch beim Client viele Ressourcen, was die Geschwindigkeit des Seitenaufbaus stark beeinträchtigen kann. Dieser Punkt ist ebenfalls Problematisch bezüglich Websites, die auf Adobe Flash basieren. 

Zu viele Dateien

Öhnliches gilt für die Anzahl eingebundener Dateien bzw. Bildern. Eine grosse Menge an Dateien verursacht eine grosse Menge an Requests, was viel zusätzlichen Traffic verursacht. Eine durchschnittliche Anfrage (HTTP-Request) an einen Server beinhaltet rund ein halbes Kilobyte an Head-Daten. Wenn man mit vielen kleinen Grafiken arbeitet, lohnt es sich beispielsweise CSS-Sprites oder Imagemaps zu verwenden. Dies kann das Datentransfehrvolumen besonders im Hinblick auf die Anzahl Requests erheblich reduzieren.

Text als Grafik

Wenn man sich mit der Barrierearmut beschäftigt, fällt es immer wieder auf, dass es Webmaster gibt, die das Unmögliche vollbringen, den Text komplett auf Bilder zu schreiben ohne einen Alternativtext anzugeben. Erstens lässt sich solcher Text nicht optimal vergrössern und zweitens findet ein Blinder mit seinem Braille-Computer keinen Inhalt. Aber auch den normalen Benutzern wird beispielsweise das kopieren des Textes verunmöglicht. 

Zu vieles auf einmal

Aber nicht nur Personen mit eingeschränktem Sehvermögen können Probleme mit dem Auffinden des Inhalts haben. So existieren Websites, vorzugsweise Community-Portale, welche so aufgebaut sind, dass man den Inhalt erst einmal ausfindig machen muss. Dies kann vor allem dann geschehen, wenn auf einer Seite mehrere Navigationsbereiche vorhanden sind, geschmückt mit Werbeanzeigen und diversen Widgets.

Frameset

Zu guter Letzt stellen auch Framesets ein Vergehen dar, denn diese sind nicht nur bezüglich Suchmaschinenoptimierung nachteilhaft. Frames hindern technisch minderbegabte Besucher daran die aktuelle URL zu kopieren oder die Seite zu bookmarken, weil dann immer die Hauptseite anstatt der gewollten ins Frameset geladen wird.


Über den Autor

Florian B. ist schweizer Web-Entwickler und Betreiber der Entwickler-Seite floern.com. Ab Herbst 2010 studiert er Informatik an der ETH Zürich und wird voraussichtlich IT als berufliche Richtung einschlagen.

  •  
  • 8 Kommentar(e)
  •  
Tobias Grimm
Tobias Grimm
10. April 2011

Einige Tipps sind sicher gut. Aber warum ich die Größe meiner Seite für 17% der Besucher reduzieren sollte, ist mir schleierhaft. Die Besucher meiner Seite haben nämlich zu 83% eine größere Auflösung als 1024 x 768. Was hier als "schlimmste Missetat" angeprangert wird, entbehrt daher (und meiner 10-jährigen Erfahrung nach) jeglicher Grundlage. Abgesehen davon kann ich mir das "Dilemma" ja mithilfe etlicher Tools auch auf einem großen Bildschirm ansehen und abschätzen, was in meinen Augen noch vertretbar ist und was nicht. Was den Footer angeht sollte sich der Hinweis explizit auf dessen Textinhalt beziehen. Der Footer selbst darf nämlich gern am unteren Bildschirmrand ausgerichtet werden - es sollten nur nach dem letzten Wort noch 1-2em Platz nach unten sein (aber selbst das ist je nach Funktion des Footers nicht zwingend notwendig).Zu guter Letzt ist ein Frameset keine Frage des Webdesigns, sondern eine Frage der Programmierung.Zu gutem Webdesign gehören Wissens-Grundlagen in Typografie. Dieses Thema sollte in den "11 größten Fehlern" nach der Farblehre and 2. Stelle stehen. Denn designtechnisch gibt es nichts Schlimmeres als schlecht aufeinander abgestimmte Farben und unleserlichen Text.Gruß! Infidel

Flo
Flo
10. April 2011

Sali Tobias, danke für deine Rückmeldung.Das mit dem Beachten einer 20%-Minderheit ist halt so eine Sache. Bei mir sind nur 18% der Benutzer mit dem Internet Explorer (alle Versionen) unterwegs, also warum sollte ich meine Seite mit dem IE kompatibel machen. Selbe Geschichte mit allen anderen Nicht-Firefox-Browsern. Daneben kommt es ja darauf an, was bei einer geringeren Fenster-Breite "abgeschnitten" wird, wenn es nur ein Bereich des Designs ist, ist es vertretbar, nicht aber wenn der Benutzer dauernd hin und her scrollen muss, um z.B. den Text zu lesen.Ich selbst gewähre meinem FF nur rund 1100 Pixel in der Breite von den maximal möglichen 1600 Pixeln vom Bildschirm.Was den Footer betrifft, kann ich mich dir anschliessen, es geht wie gesagt nur darum, dass die letzte Text-Zeile nicht am unteren Rand klebt.Ob man das Thema "Frameset" zu Webdesign zählt ist Sache der Definition. Meiner Meinung gehört das zusammen, denn der Webdesigner schreibt normalerweise auch das HTML, und ein vorhandenes Frameset beeinflusst das Design, wie ich selber in Erfahrung bringen musste.Auf die Verwendung von Farben und -kombinationen wollte ich nicht eingehen, weil es nur wenig mit Benutzerfreundlichkeit zu tun hat (das Thema "Augenkrebs" mal zur Seite geschoben).Allerdings wäre der Punkt Typografie auch erwähnenswert gewesen, denn ein Lauftext in Designer-Schrift ist nicht gerade für den Benutzer optimiert.Gruss, Flo

Tobias Grimm
Tobias Grimm
10. April 2011

Hallo Flo,ich finde es ja gut, dass hier einige Punkte mal zusammengefasst werden, nicht falsch verstehen. Ich denke nur, dass das thematisch zu durcheinander gewürfelt ist. In Agenturen ist es üblich, dass es Designer und Programmierer gibt. Ich selbst habe auch schon reine Entwürfe gemacht, die andere umgesetzt haben und umgekehrt Webseiten programmiert, die andere entworfen haben.Die Frage ist halt, worauf man den Schwerpunkt legt. Wenn es um reines Design geht, fehlen halt meiner Meinung nach einige Punkte; ebenso wäre es, wenn es explizit um die Programmierung ginge (Tabellenlayouts und Spaghetticode wären dann z.B. zu erwähnen). Bei der Zielgruppenfrage gebe ich dir Recht - es gibt so viele Browser, Auflösungen und OS, dass man nicht daran vorbei kommt, Kompromisse einzugehen. Gerade die Auflösung finde ich aber vernachlässigbar, eben weil ja gescrollt werden kann. Mein Header ist 1100px breit (oder vielmehr 68.75em) und auch bei 1024er Auflösungen ist noch alles Wichtige sichtbar. Was Typografie angeht, sollte mMn auf verschiedene Dinge eingegangen werden: Das richtige Mischen von Schriftstilen und -schnitten, Buchstabenabstände, Zeilendurchschüsse und Abstände zwischen Textpassagen und Stilelementen sind wichtig für eine gute Seite! Aber wie gesagt, da kommt es halt darauf an, wo man den Schwerpunkt eines solchen Artikels sieht.Gruß aus Hattingen!Tobias

Fritz Mauk
Fritz Mauk
10. April 2011

Hallo Flo, Typographie bzw deren Bedeutung könnte also "Punkt 12" werden. Grüsse Georg123

Bazzize
Bazzize
10. April 2011

Hallo Florian, gebe Dir absolut recht, viele versauen sich die Ladezeiten mit zu grossen Bilddatein und wie auch ich , wenn die Ladezeit einer Page zu lang ist klicke ich sie weg. Möchte auch noch mal anführen man sollte sich Gedanken über gzip machen was die Ladezeit deutlich beschleunigt. Grade bei den CMS werden die Datein sehr schnell sehr groß.MFG

Ronnyl
Ronnyl
22. April 2011

Ich glaube es gibt zwar einige Grundregeln, aber nicht die EINE Wahrheit. Es kommt immer auf den Inhalt und Zielgruppe an, die ich ansprechen will. Ich mit meinem Online-Shop will mir keine 18% Kunden vergraulen und bin daher am Optimieren. Na so was eine Person leisten kann ...Wenn ich ein Gaming Portal betreibe kann ich die User mit 1024er Auflösung getrost vergessen, das sind keine Gamer ... und die haben alle schnelles DSL.Also nicht verrückt machen lassen und sich vielmehr inspirieren lassen.Daher finde ich diesen Artikel auch sehr gut.Gruss Rollyl

Core Design Studio
Core Design Studio
05. January 2013

Ich muss dem Ronnyl hier einmal zustimmen! Außerdem gibt es wirklich auch Leute die wollen nur ein super coole Webseite ohne Optimierungshintergrund. Da ist es schlichtweg egal, wie die Ladezeiten sind oder ob die interne Verlinkung mit Text, Grafik oder JavaScript umgesetzt ist. Man sollte hier klar zwischen Webseiten mit Optimierungsbedarf und Webseiten ohne Optimierungsbedarf unterscheiden.

Karl Heinz Tinney
Karl Heinz Tinney
28. April 2011

Es stimmt schon etwas nachdenklich das der "Vormarsch" der Behinderten im Internet auf eine schleichende Art und Weise die Ausbreitung individueller Kreativität im Webdesign auf ein Minimum dezimiert.Ich habe sicherlich nichts gegen Behinderte , aber wenn eine Webseite nur noch dann vom Arsche des professionellen Webdesigns akzepiert wird wenn diese nach Möglichkeit ALLEN Vorgaben im Rahmen von Web-Usability gerecht wird, haben wir ein Stück Individualität verloren und bedienen nur noch andere und nicht auch uns selbst.(GG Artikel 5 Meinungsfreiheit)Kalle

Kommentar hinterlassen

Zurück

Mehrfach empfohlen

Seitenreport ist einer der bekanntesten SEO und Website Analyse Dienste im deutschsprachigen Raum und wurde u.a. schon empfohlen:
von Mr. Wong im Wong Letter
vom Leserservice der Deutschen Post
vom Technik Blog SiN
und vielen anderen

Seitenreport API

Verfolge die SERP Positionen Deiner Keywords und erhalte Informationen über verwendete Mikroformate, frage die Ergebnisse unserer Analysen live ab oder greife auf unsere History-Datenbank zu. Dies alles bietet Dir die neue Seitenreport API. Kontaktiere uns, um weitere Infos zu erhalten.