Die acht häufigsten Fehler bei Webentwicklung und Webdesign

Viele Websites und Webanwendungen im Internet weisen zum Teil haarsträubende Fehler in Bezug auf Sicherheit, Usability und Design auf. Hier meine persönliche „Top 8“
der häufigsten Fehler bei Webdesign und Webentwicklung:

Sicherheitslücken (insbesondere SQL-Injections und Cross-Site-Scripting)

Bei den populärsten Sicherheitslücken im Web stehen SQL-Injections und Cross-Site-Scripting an der Spitze.

Bei einer SQL-Injection wird (z.B. über Texteingabefelder auf einer Website oder in einer Webanwendung) versucht, mit speziell eingeschleustem Code die Steuerung einer Datenbank zu übernehmen. Per Cross-Site-Scripting (das oft über eine SQL-Injection realisiert wird) können z.B. Seiten umgeleitet, unerwünschte Werbung eingeblendet oder Benutzernamen und Passwörter abgegriffen werden.

Diese Sicherheitslücken resultieren nicht selten aus Uner­fahrenheit bzw. mangelndem Sicherheitsbewusstsein des Programmierers/Entwicklers.

Detailliertere Informationen finden Sie im Blog-Eintrag SQL-Injections und Cross-Site Scripting

Wichtige Inhalte nur per JavaScript zugänglich

Ein grober Fehler, insbesondere im Bezug auf Suchmaschinenoptimierung: Wichtige, relevante Inhalte, die ausschließlich per JavaScript / AJAX zugänglich sind.

Zwar zeigen Untersuchungen, dass bei über 90% der Be­nutzer JavaScript im Browser aktiviert ist, jedoch sollte man die restlichen 10% nicht einfach ignorieren und aus­schließen. Abgesehen davon beherrschen Suchma­schinen kein JavaScript – z.B. sind per AJAX dynamisch nachge­ladene Inhalte für Google und Co. unsichtbar.

Deshalb sollte bei der Verwendung von JavaScript oder AJAX wenn möglich stets auch eine Alternative angeboten werden, bei der die Inhalte auch mit deaktivierter Java­Script-Funktionalität zu erreichen sind.

Erfahren Sie mehr über JavaScript und AJAX im Blog- Artikel „JavaScript“.

„Halbgare“ Content-Management-System-Umset­zungen

Eine häufige Anforderung des Kunden an den Webdesig­ner/Webentwickler: „Ich möchte die Inhalte der Seiten selbst ändern können.“

Hier wird mit dem Argument: „Wir müssen das Rad ja nicht neu erfinden“ oft auf ein fertiges Content-Manage­ment-System wie z.B. Typo3, Joomla oder Wordpress zurückge­griffen. Diese Systeme bieten mächtige Funk­tionen und können dem Entwickler eine Menge Arbeit abnehmen, da sie etliche Funktionen „von Haus aus“ mitbringen.

Auf diesem Gebiet werden allerdings häufig viele Fehler begangen: Websites, die auf solchen Systemen basieren, werden nicht selten „mal eben schnell“ realisiert – dabei bleiben oft viele qualitative Details auf der Strecke.

Content-Management-Systeme arbeiten in der Regel mit sogenannten „Templates“ (engl. für „Schablonen“), mit denen – einfach ausgedrückt – hauptsächlich das gene­relle Design und die Bedienung einer Website festgelegt werden. Hier wird vom Entwickler oft auf fertige, populäre Templates zurückgegriffen, die hier und da ein wenig angepasst wer­den. Diese Templates wurden meist von fähigen Grafikde­signern entworfen und realisiert, jedoch sind diese popu­lären Templates zum Teil hundert- oder gar tausendfach im Internet anzutreffen, also wenig indi­viduell.

Ebenso stellt sich die Bedienung der administrativen Kom­ponenten zur Pflege der Inhalte (das sogenannte „Back­end“) meist alles andere als simpel, intuitiv und selbster­klärend dar. Hier können schnell hohe Folgekosten für tagelange, teuere Schulungen entstehen.

Echte Vollprofis für bestimmte Content-Management-Sys­teme, die sich tatsächlich so detailliert mit den ent­sprech­enden Systemen auskennen, dass sie nahezu perfekte Lö­sungen für fast jeden erdenklichen Einsatz­zweck anbieten können, sind rar und sehr schwer zu finden!

Ich will ehrlich sein: Auch ich habe nicht viel mehr als grundlegende Kenntnisse in Typo3 und Joomla. Meine Stärke liegt in etwas, was ich als „bedarfsorientiertes Content-Management“ bezeichne: Die Entwicklung von Webanwendungen und Websites mit individuellen Con­tent-Management-Komponenten. Dies hat den Vorteil, dass – bis auf einige wenige Ausnahmen – sämtlicher Code von mir selbst entwickelt wird, ich mich also ein­hundertprozen­tig darin auskenne und sich somit fast jede beliebige Funktio­nalität individuell nach Ihren Wün­schen und Anforderungen realisieren lässt.

Weiterhin werden überflüssige und unnötige Funktionali­täten ausgespart, um die Bedienung der administrativen Komponenten so übersichtlich und intuitiv wie möglich zu gestalten. Ebenso bietet diese Vorgehensweise in der Re­gel ein größeres Potential für die individuelle Automati­sierung diverser Funktionen, so dass Ihnen ein großer Teil der Ar­beit durch ein Programm abgenommen wird.

Unausgewogenheit der Informationen zwischen „Gefühlen“ und „Fakten“

In der Werbung – sei es im Web / Internet oder im Print-Bereich – gibt es zwei „Archetypen“ von Kunden, die angesprochen werden sollen: Der eher emotionale, irrationale und der rationale, technische Typ.

Nehmen wir als Beispiel den Käufer eines Autos: Der eine interessiert sich eher für die Gestaltung und Ästhetik der Karosserie und des Innenraums oder die Exklusivität der verwendeten Materialien; der andere möchte eher sofort über „harte“ technische Daten (Motorleistung, Beschleuni- gung, Höchstgeschwindigkeit, Verbrauchswerte, Leerge­wicht etc.) informiert werden.

An dieser Stelle wird häufig nur auf einen dieser Typen Rücksicht genommen – entweder ärgert sich der „Technik- Freak“, dass ihm zu einem Produkt oder einer Dienstleis­tung nur für ihn uninteressante und nichtssagende Werbe­texte vorgesetzt werden und diverse Daten nicht oder nur schwer zu finden sind, oder der eher emotionale Typ be­kommt nur „technischen Schnickschnack“ serviert, mit dem er nichts anzufangen weiß.

Selbstverständlich gibt es diese beiden Typen in dieser harten Abgrenzung in der Realität kaum – die meisten Menschen treffen Ihre Kaufentscheidungen sowohl aus emotionalen als auch aus rationalen Gründen. Gerade deshalb ist die Kombination aus beidem – je nach Pro­dukt oder Dienstleistung – sehr wichtig, wird allerdings leider oft vernachlässigt.

Fehlende Cross-Browser-Optimierung

Anwendungen und Webseiten im Internet werden nicht sel­ten nur auf wenigen und hauptsächlich aktuellen Browsern getestet. Auch wenn die Situation immer besser wird, da die Browser-Hersteller mittlerweile immer mehr auf Kompati­bilität zu Standards im Web achten, gibt es trotzdem noch etliche Punkte, in denen unterschiedliche Browser die glei­chen Inhalte un­terschiedlich darstellen oder bestimmte Funktionen nicht kennen oder fehlerhaft ausführen – dies betrifft meist besonders die verschiedenen Versionen des Microsoft Internet Explorer.

Insbesondere der Internet Explorer 6 wird mittlerweile enorm vernachlässigt. Oft wird argumentiert, diese Ver­sion sei über acht Jahre alt, voller Sicherheitslücken und es existierten bereits zwei (bzw. mittlerweile fast drei)

Nachfolgeversionen plus eine Menge kostenloser Alter­nativprodukte wie z.B. Mozilla Firefox, Google Chrome, Opera oder Apple Safari. Wer diesen uralten „Schimmel- Browser“ trotzdem noch verwende, sei dann eben selbst schuld.

Grundsätzlich ist diese Argumentation durchaus korrekt, allerdings werden dabei einige wichtige Fakten übersehen. Erfahren Sie mehr zum Internet Explorer 6 und warum man ihn nicht vollständig vernachlässigen sollte im Blog-Eintrag „Ist der Internet Explorer 6 tot?“.

Verkleinerung von Bildern mit indizierten Farben

Größenänderungen von Bildern per HTML oder CSS (also das Einfügen riesiger Bilder auf einer Website, um sie „künstlich“ zu verkleinern) findet man zum Glück im­mer seltener – jedoch wird nach wie vor oft der Fehler began­gen, bei der Verkleinerung von Bildern mit einem Bildbe­arbeitungsprogramm nicht auf den Farbraum zu achten: In diesem Beispiel wurde das Logo mit Adobe Photoshop verkleinert. Oben war die Quelle ein JPEG-Bild im RGB- Farbraum, unten ein GIF. GIF-Bilder verfügen über eine stark begrenzte Anzahl Farben (maximal 256), die in ei­nem Farbindex festgelegt werden – man spricht hier von „indi­zierten Farben“. Dies ist für viele Anwendungsfälle aufgrund der gegenüber JPEG-Bildern meist geringeren Dateigröße bei gleicher Qualität (z.B. bei Logos) von Vor­teil. Verkleinert man allerdings ein GIF-Bild mit indizierten Farben, stehen bei der Interpolation bzw. Extrapolation der Pixel keine Farben für die berechneten Zwischenwerte zur Verfügung. In der Abbildung oben ist der qualitative Unterschied deut­lich zu erkennen.

Aus diesem Grund muss eine GIF-Grafik mit indizierten Farben vor einer Größenänderung stets in ein RGB-Bild umgewandelt werden.

„Kaputtkomprimierte“ Bilder

Beim populärsten und meistverwendetsten Grafik-Format im Internet handelt es sich zweifellos um JPEG. Das JPEG- Format erlaubt eine Komprimierung der Bilddaten, um geringere Dateigrößen und damit kürzere Ladezeiten zu erreichen. Bei dieser Komprimierung kann ein Kompres­sionsfaktor eingestellt werden – bei höherer Kompression sinken sowohl die Dateigröße als auch die Bildqualität. Bildbearbeitungsprogramme stellen die JPEG-Kompression meist in einer Skala von 0 bis 100 dar: 0 bedeutet maxi­male Kompression und minimale Bildqualität; ein Wert von 100 ist minimale Kompression und beste Qualität.

Um so stärker die Kompression, um so mehr sogenannte „Artefakte“ (umgangssprachlich auch „Klötzchen“ genannt) entstehen im Bild.

Nur allzu oft trifft man im Internet auf völlig „kaputtkom- primierte“ JPEG-Bilder, die auf Biegen und Brechen mit viel zu hoher Kompression gespeichert wurden. Bei aller Liebe zu geringem Datenaufkommen und kurzen Lade­zeiten einer Website – ab einem bestimmten Punkt leidet die Bildqualität dermaßen, dass ein Bild inakzeptabel schlecht aussieht.

Als Vergleich folgende JPEG-Bilder: JPEG-Qualitätsstufe 0 (maximale Kompression) JPEG-Qualitätsstufe 100 (minimale Kompression)

Das obere Bild ist zwar mit einer Dateigröße von nur 5,77 KB um einen Faktor von ca. 5,5 wesentlich kleiner als das untere mit 31,44 KB, der qualitative Unterschied ist jedoch klar zu erkennen.

Je nach Ausgangsmaterial ist für Web-Grafiken eine JPEG- Qualitätsstufe zwischen ca. 60 und 90 empfehlenswert.

Schlechte, langweilige und nervende Intros

„Herzlich..... willkommen..... auf..... der..... Homepage..... unseres..... Unter..... nehmens..... !“ Sicherlich haben Sie solche Intros auf Webseiten auch schon einmal gesehen: Die Teile eines Begrüßungs-Satzes und/oder des Firmen­logos fliegen in einer Animation mit ruckeligen Bewegun­gen von rechts, links, oben und unten Stück für Stück auf die Seite. Manchmal fehlt sogar die obligatorische „Über­sprin­gen“-Funktion, so dass man vom Betreiber der Seite ge­zwungen wird, sich so etwas in voller Länge anzu­schauen.

Solche und ähnliche Intro-Animationen beeindrucken den durchschnittlichen Besucher wenig – langweilige und „bil­lige“ Intros schrecken eher ab. Abgesehen davon kosten sie den Besucher unnütz Zeit, die er vermutlich lieber für das Lesen und Betrachten wirklich relevanter und interes­santer Informationen verwendet hätte.

Dabei sind Intros nicht grundsätzlich eine schlechte Sache. Sie eignen sich in bestimmten Fällen hervorragend für den Transport von Emotionen. Als positives Beispiel hatte vor einiger Zeit ein großer Sportwagen-Hersteller auf seiner Website als Intro ein ca. fünfsekündiges Video, in dem ein Fahrer auf einer Teststrecke mit Vollgas und kernig- dröh­nendem Achtzylinder-Sound ein anderes Auto über­holt. So etwas kann für einen Sportwagen-Fan durchaus ansehnlich und interessant sein.

Auf jeden Fall muss ein Intro zu überspringen sein, d.h. der Besucher muss über einen gut sichtbar platzierten „Über­springen“-Link die Wahl haben, ob er es anschauen möchte oder nicht.

Blog

• 29.10.2010 – JavaScript
• 21.10.2010 – Was ist ei-
  ne „Auflösung“?
• 09.10.2010 – Häufige
  Fehler bei Webdesign
  und Webentwicklung
• 05.10.2010 – SQL-Injec-
  tions und Cross-Site-
  Scripting
• 27.09.2010 – Ist der
  Internet Explorer 6 tot?