Einfacher Wechsel zu XHTML und CSS2 mit Site-Template

Im letzten Jahr war ich am Neudesign einer Menge Websites beteiligt. Je nachdem, wie die Websites ursprünglich erstellt waren, war diese Aufgabe mal leichter, mal schwerer. Allerdings waren die meisten Sites noch immer schwieriger und zeitaufwendiger zu aktualisieren, als eigentlich notwendig gewesen wäre. Als guten Vorsatz für das neue Jahr habe ich mir deshalb vorgenommen, bei der Erstellung oder Überarbeitung von Websites nur noch XHTML und CSS2 zu benutzen. Denn XHTML und CSS2 sorgen nicht nur für übersichtlicheren und effizienteren Code, sondern verbessern auch die Barrierefreiheit und Skalierbarkeit von Websites.

Ich habe ein Dreamweaver-Template erstellt, um Webdesignern und -entwicklern den Wechsel zu XHTML und CSS2 zu erleichtern. Ich hoffe, es demonstriert, wie viel einfacher Websites mit XHTML und CSS2 zu erstellen und zu pflegen sind.

Hier einige der Vorteile dieses Templates:

• Es ist XHTML 1.0 Strict-konform – Von Anfang an XHTML 1.0 Strict zu verwenden (statt XHTML 1.0 Transitional) erspart spätere Überarbeitungen des Codes.
• Es ist CSS2-konform – Das Layout dieses Templates wird vollständig von CSS2 bestimmt, so dass Darstellung und Inhalt komplett getrennt sind. Es gibt keine Tabellen und keine Blind-GIFs.
• Es erfüllt alle Richtlinien nach Section 508 in Bezug auf Barrierefreiheit im Internet – Es gibt derzeit 16 Richtlinien, die sich auf die Barrierefreiheit von Websites und Web-basierten Anwendungen beziehen. Dieses Template erfüllt alle 16.
• Es ist Browser-kompatibel mit Internet Explorer, Netscape und Opera – Das Template funktioniert mit den aktuellen Versionen der wichtigsten Browser perfekt und wird auch von älteren Versionen noch ansprechend dargestellt.
• Es ist klein und schnell zu laden – Der Code, Stylesheets und Grafiken sind insgesamt nur etwa 18 KB groß.

Zu beachten

Ich schätze dieses Template zwar sehr, doch bevor man loslegt, sollte man noch einige Punkte beachten:

• Schreiben von Code mit der DWT-Datei – Da das Template sehr stark auf externe Stylesheets zurückgreift, bekommt man beim Arbeiten in der Design-Ansicht von Dreamweaver keinen Eindruck vom tatsächlichen späteren Aussehen der Seite. Ich bevorzuge deshalb hierfür die Code-Ansicht.
• Mobile Browser – Dieses Template funktioniert nicht, wenn man Seiten für mobile Browser wie den Pocket Internet Explorer entwickelt. Der Pocket IE basiert auf HTML 3.01, so dass XHTML und externe Stylesheets nicht funktionieren können.

Falls Sie für den Pocket IE programmieren, können Sie das Template um das folgende JavaScript ergänzen, mit dem das Betriebssystem festgestellt wird. Damit können Sie Benutzer des Pocket IE auf eine kompatible Seite umleiten: