Tipps und Tricks

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

Titel

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.

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.

Bridge – (msc) Ein Kniff, der genausogut unter den Prepress-Tipps zu finden sein könnte – aber weil Adobes Bridge per Definition sowohl den Webcontent­lieferanten als auch den Urhebern papierener Erzeugnisse zu Diensten ist, platzieren wir ihn an dieser Stelle (mit der Hoffnung, dass alle Publisher-Leser immer sämtliche Tipps ansehen...).

Durch einen kleinen Eingriff in die Registry lässt sich der Windows-Explorer mit einem Befehl ausstatten, über den man einen Ordner ohne Umwege in der Bridge öffnet. Betätigen Sie den Befehl Ausführen im Startmenü, geben Sie regedit ein und suchen Sie in der Baumliste den Schlüssel Hkey_classes_rootDirectory. Öffnen und markieren Sie den Unterschlüssel shell, betätigen Sie den Befehl Bearbeiten > Neu > Schlüssel und nennen Sie diesen «Bridge». Klicken Sie rechts auf (Standard) und geben Sie hier ein: «Ordner in Bridge öffnen». Erstellen Sie nun wiederum einen Unterschlüssel zu shell, den Sie command nennen. Klicken Sie hier rechts auf den Eintrag (Standard) und geben Sie bei Wert den Pfad zu Adobe Bridge an, meistens c:ProgrammeAdobeAdobe BridgeBridge.exe. Hängen Sie nun, von einem Leerzeichen getrennt, den Code "%L" an den Pfad an.

Das wars, nun lässt sich die Bridge öffnen, indem Sie im Windows-Explorer mit der rechten Maustaste auf einen Ordner klicken und den Befehl Ordner in Bridge öffnen anwählen.

HTML – (msc) Die Dokumenttyp-Definition (DTD) steht am Anfang einer HTML-Seite und gibt dem Browser nähere Angaben zur Darstellung. Sie informiert unter anderem darüber, ob es sich um eine Seite in HTML, XHTML oder XML handelt und welche Variante der angegebenen Sprache zum Einsatz kommt. Eine solche Deklaration könnte so aussehen:

Die einführende Deklaration DOCTYPE HTML PUBLIC besagt, dass es sich um eine HTML-Seite handelt, der eine öffentlich verfügbare DTD zugrunde liegt. Die Angabe zwischen den Anführungszeichen verweist auf den Herausgeber der DTD, das Webconsortium W3C. HTML 4.01 Transitional definiert die verwendete Sprachversion und EN ist ein Sprachkürzel, das allerdings nicht die Inhaltssprache bezeichnet, sondern die Sprache der Seitenbeschreibungssprache – und die ist immer Englisch.

Für HTML gibt es eine Reihe verschiedener Varianten. Die Variante Strict verlangt, wie der Name schon sagt, eine genaue Einhaltung des aktuellen HTML-Standards; Elemente früherer Standards, die inzwischen verworfen wurden, dürfen nicht eingesetzt werden. Es lohnt sich, die strikte Variante zu wählen, wenn man eine Site neu aufbaut und ohne Altlasten starten will.

Die Variante Transitional ist weniger streng und eignet sich für ältere Seiten.

Die Variante Frameset ist HTML-Seiten vorbehalten, in denen Framesets definiert werden.

GoLive – (msc) Wenn GoLive Daten mit dem Webserver synchronisiert, kommt es häufig zu Meldungen von Norton Antivirus. Das Programm erkennt Wurmangriffe, die offensichtlich keine sind. Um Probleme mit GoLive zu vermeiden, sollte man die «Norton Worm Protection» abschalten: Dazu klickt man im Hauptfenster von Norton Antivirus auf die Schaltfläche Optionen, öffnet die Rubrik Internet-Wurmschutz und entfernt bei Internet-Wurmschutz aktivieren (empfohlen) das Häkchen.

Internet Explorer 7 – (msc) Microsoft arbeitet am Internet Explorer 7 und die fertige Version sollte Ende Jahr zu haben sein. Aus Sicht der Webdesigner sind das gute Neuigkeiten, denn wie ein Artikel auf Thestyleworks.de zeigt, werden mit dem Internet Explorer 7 eine Reihe von lästigen Fehlern der Vergangenheit angehören – das Webdesignerleben wird also einfacher werden (oder auch nicht). Auch werden in der neuen Version einige Tags und Attribute unterstützt, die Microsofts Browser bislang nicht kannte. Auch kann man Hintergründe bei allen Elementen, nicht bloss dem Body, als fix definieren.

http://blogs.msdn.com/ie/archive/2005/07/29/445242.aspx