Beeinflussung der Darstellung des Custom Banners durch den "Quirks Mode"

In letzter Zeit hören wir immer wieder von unseren Publishern, dass  die Custom Banner nicht richtig angezeigt werden, wodurch die Usability der Seiten erheblich eingeschränkt wird.

Diese Art von Problemen wird häufig durch den Quirks-Modus verursacht. Der Quirks-Modus bezeichnet eine Technik in aktuellen Webbrowsern (Android 1+, Chrome 1+, IE 6+, iOS 1+, Firefox 1+, Netscape 6+, Opera 6+, Safari 1+), durch die eine Abwärtskompatibilität zu Webseiten, die für ältere Browser erstellt wurden, sichergestellt wird, statt den W3C- und IETF-Standard als Standardmodi einzuhalten.

Als beispielsweise Netscape 4 und IE 4 CSS implementiert haben, stimmte deren Unterstützung nicht mit dem W3C-Standard (oder nicht einmal miteinander) überein.

Um sicherzustellen, dass Ihre Website in den verschiedenen Browsern richtig dargestellt wird, mussten Webdesigner das Stylesheet entsprechend den Anforderungen dieser Browser implementieren.

Folglich verwendeten die meisten Websites CSS auf eine Weise, die nicht mit den Spezifikationen übereinstimmten. Häufig bestimmen Browser den zu verwendenden Darstellungsmodus anhand der Dokumenttypdefinition auf der Seite. Ist eine vollständige DOCTYPE-Angabe vorhanden, verwendet der Browser den standardkonformen Modus.

Beispielsweise würde eine Webseite, die mit den DOCTYPES

  • <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> oder
  • <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/loose.dtd”>

beginnt, den standardkonformen Modus auslösen.

Der DOCTYPE <!DOCTYPE html PUBLIC> ist syntaktisch ungültig und würde den Quirks-Modus auslösen.

Auch eine Webseite, die gar keinen DOCTYPE enthält, wird im Quirks-Modus dargestellt. Wir empfehlen Ihnen daher den DOCTYPE und den Metatag „X-UA-Compatible“

  • <!– DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
  • <META content=”IE=5.0000? http-equiv=”X-UA-Compatible”>

wie folgt zu ändern:

  • <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
  • <meta http-equiv=”X-UA-Compatible” content=”IE=Edge”>

Im Quellcode sollten, wenn möglich, die Codierungsverfahren der semantischen Auszeichnung und progressiven Verbesserung verwendet werden. Bei diesen Verfahren wird CSS für das Layout genutzt und die Verwendung von Tabellen für die Erstellung der Seite vermieden.

Vermeiden Sie, wenn möglich, auch den Metatag „X-UA-compatible“. Microsoft empfiehlt, dass für Websites der Dokumenttyp HTML5 verwendet wird. Damit wird eine größere Spannbreite gängiger und zukünftig entwickelter Standards durch die meisten Webbrowser unterstützt. Ausführliche Informationen zum Dokumententyp HTML5 finden Sie hier.

Früher konnten Sie noch mit den Codierungsverfahren von Microsoft den Großteil Ihrer Kunden zufriedenstellen, heute beherrschen diese in den meisten Fällen nur noch einen schwindenden Anteil von 20 % der Browser. Wenn Sie die W3C-Standards einhalten, gestalten Sie für die große Mehrheit Ihrer Kunden eine benutzerfreundlichere Seite.

Wir hoffen, dass dieser Beitrag verdeutlichen konnte, wie der Quirks-Modus die Darstellung Ihrer Website in einigen Browsern beeinflussen kann. Haben Sie Fragen? Dann schreiben Sie einen Kommentar zu diesem Beitrag.