HTML, CSS – (msc) Roger Johansson, ein Experte für Webdesign und hürdenfreies Internet, hat auf seiner Website aufgezählt, welches aus seiner Sicht die häufigsten Fehler beim Webdesign sind. Den aufschlussreichen Sündenkatalog zitieren wir kurz an dieser Stelle – das Original findet sich hier: www.456bereastreet.com/archive/200408/web_development_mistakes
1. Doctype-Verwirrung: Die Angabe fehlt, ist falsch oder am falschen Ort untergebracht. Dabei würde sie dem Browser wichtige Instruktionen zur korrekten Darstellung der Seite liefern. Näheres zum Doctype erklärt der nächste Tipp «Den richtigen Dokumenttyp definieren».
2. Span-Manie: Viele Webdesigner verwenden unnötige Inline-Styles: Anstelle von <span class=tit><p>Titel</p></span> schreibt man <p class=tit>Titel</p>.
3. Zu viel visuelles Denken: Die Struktur ist wichtiger als das Layout. Entsprechend hat der Aufbau eines soliden Konzepts Vorrang vor den Basteleien im WYSIWYG-Editor.
4. Fehlende Semantik: Der Entscheid, mit welchen HTML-Elementen man seine Seiten aufbaut, fällt anhand der Darstellung im Browser. Dabei wäre wichtig, welche Bedeutung ein HTML-Tag hat.
5. Durcheinander bei der Codierung: Wenn der Webserver und die Website nicht aufeinander abgestimmt sind, treten widersprüchliche Sprachangaben im HTTP-Header und im Dokument auf, die zu einer fehlerhaften Darstellung führen.
6. Fehlende oder nutzlose Alt-Attribute. Für blinde Surfer und zur Strukturierung der Seite sollten Bilder und Area-Bereiche über das Alt-Attribut näher beschrieben werden. Die Screenreader (sie setzen die Website in gesprochenen Text um) werten das Alt-Attribut aus. Besonders nutzlos: Eine Angabe wie «JPEG-Bild, 123 KB». Bei Bildern ohne inhaltliche Bedeutung wird ein leeres Attribut übergeben (ALT=""), ansonsten liefert man eine Beschreibung, z.B. «Umsatzentwicklung 2003». Weitere Informationen: www.bjoernsworld.de/html/alt-text.html
7. Fehler bei ID- und Class-Attributen: Die gleiche ID wird mehrfach verwendet, was bei JavaScripts zu Problemen führt. Bei Klassennahmen mit Sonderzeichen oder Umlauten sind Probleme unvermeidlich.
8. Browser-Sniffing: Es gibt häufig Ärger, wenn per Script versucht wird, den Browser des Surfers zu identifizieren: Diese Scripts machen die Seiten unnötig komplex und sie scheitern bei ganz neuen Browsern oder wenn der Browser eine falsche Kennung ausgibt (Opera tut das standardmässig).
9. Keine Masseinheiten: Eine Angabe wie width=10 funktioniert in einem CSS-konformen Browser nicht. Korrekt ist: width=10px.
10. Browser-spezifische Styles wie die Farbangaben für Scrollbalken im Internet Explorer sind verpönt.
11. Abhängigkeiten von Technologien, die nicht bei jedem Browser vorausgesetzt werden können (Flash, JavaScript). Das Mindeste in so einem Fall ist eine Sitemap.
12. Texte in Bildform. Wer Textelemente als Bild ohne Alt-Beschreibung einfügt, macht schlechtes Webdesign. Zu bedenken ist auch, dass Texte in Bildform es sehbehinderten Anwendern verunmöglichen, die Seite mit einer grösseren Schrift darzustellen.
13. Schlechte Formulare: Die HTML-Elemente label, fieldset und legend machen Formulare leichter nutzbar. Über Fieldset fasst man Zusammengehörendes zusammen (beispielsweise die Personalien) und über den legend-Tag beschriftet man die zusammengefassten Felder. Mit label beschreibt man die Felder. Es wird empfohlen, auf einen «Reset»-Knopf zu verzichten.
<form action=»» method=»post»>
<fieldset><legend>Personalien</legend>
<label for=»vorname»>Vorname </label>
<input id=»vorname» type=»text» name=»vorname» size=»30″ maxlength=»30″ value=»Ihr Vorname» />
<label for=»name»>Name </label>
<input id=»name» type=»text» name=»nachname» size=»30″ maxlength=»30″ value=»Ihr Nachname» />
</fieldset></form>
Ein sinnvoll konzipiertes Formular.
Die Darstellung im Browser.
14. Altväter-Gestaltungsmittel: Verschachtelte Tabellen, Spacer-GIFs (ein «blindes» GIF zum Ausrichten) oder Formatierungen per Font-Tag seien so veraltet, dass man sie gar nicht mehr extra anzuprangern brauche, meint Roger Johansson.
15. Eine Windows- und Internet-Explorer-zentrierte Weltsicht: Viele Webmaster machen es sich einfach und entwickeln für Win-MSIE. Und nehmen sich vor, die Site für die anderen Browser und Betriebssysteme anzupassen, wenn denn Zeit dafür ist.
16. Browser-spezifische HTML-Attribute: Die Verwendung von abgelehnten HTML-Sprachelementen wie marginwidth oder leftmargin oder das border-Attribut bei Bildern führt zu Wirrwarr.
17. Ampersands in URIs: Wenn man per Adresse Parameter übergibt, muss jedes &, das als Parameterseparator dient, als & ausgedrückt werden, sonst sind Fehler vorprogrammiert.