Dieser Artikel soll beschreiben, warum es sinnvoll und gut ist eine HTML-Testpage bzw. ein HTML-Template bei der Erstellung einer CSS-Datei für ein Webprojekt zu verwenden. Wenn ein neues Projekt startet und es an die Umsetzung des Designs in HTML und CSS geht, sind meistens nicht alle wichtigen HTML-Elemente in den Designentwürfen bedacht und/oder angedeutet. Daher solltet ihr euch eine HTML-Vorlage zu legen, in der alle wichtigen und am häufigsten verwendeten HTML-Elemente vorkommen.

Ich verwende eine abgewandelte Form von der HTML-Testpage, die unter http://snipplr.com/view/8121/html-test-page-for-css-style-guide/ zu finden ist. Es soll aber in diesem Artikel nicht um die Gestaltung solch eines HTML-Templates gehen, sondern viel mehr um die Vorteile, die bei der Verwendung entstehen.

Der Kontext in dem diese 6 Gründe stehen, ist die Anbindung eines CMS an ein Design. Die nachfolgenden Punkte stellen natürlich nur eine subjektive Meinung dar, ihr könnt sie aber gerne in den Kommentaren ergänzen.

1. Zeitersparnis

Der wichtigste Punkt in meinen Augen ist die Zeitersparnis, die durch die Verwendung eines „standardisierten“ Templates entsteht. Es sind auf einen Blick alle wichtigen HTML-Elemente sichtbar und es wird somit kein Element vergessen zu formatieren.

Ich habe anfangs immer einen Dummy-Text, Lorem Ipsum lässt grüßen, eingebaut und dieser war lediglich mit Absätzen und Überschriften formatiert. Im weiteren Verlauf der Anbindung des Designs an das CMS kamen immer wieder einzelne HTML-Elemente zum Vorschein, die noch nicht formatiert waren.

So musste ich dann erst wieder die CSS-Datei öffnen und das Design und Layout entsprechend der Designvorgabe anpassen. Hat man die Designvorlage nicht zu 100% im Kopf, heißt es auch hier, erst wieder die Vorlage „suchen“, öffnen und anschauen. Dabei geht einfach immer wieder Zeit verloren. Der Zeitverlust würde sich reduzieren, wenn man die Formatierungen in „einem Rutsch“ vornehmen würde.

2. Keine Elemente werden vergessen

Sobald eine HTML-Testseite zum Erstellen der CSS-Datei verwendet wird, reduziert sich die Wahrscheinlichkeit deutlich, dass HTML-Elemente vergessen werden. Gerade bei der Verwendung eines CMS und den eingebauten WYSIWYG-Editoren kann es passieren, dass HTML-Elemente in den Quellcode gelangen, die doch eher ungewöhnlich sind und an die man vielleicht im ersten Moment nicht gedacht hat. Somit kann es passieren, dass ein HTML-Element in der CSS-Datei nicht berücksichtigt wurde und somit unformatiert bleibt.

3. Kundenzufriedenheit

Dieser Punkt ergänzt den vorherigen Punkt sehr stark. Wurde erst einmal ein HTML-Element vergessen zu formatieren und der Kunde bemerkt dies bevor man es selbst merkt und womöglich noch im Live Betrieb, kann es schnell zur Unzufriedenheit bzw. negativen Stimmung beim Kunden kommen.

Es ist zwar sehr überspitzt dargestellt, aber es gibt durchaus Kunden, für die eine Welt zusammenbricht, wenn das Design nicht nahezu perfekt ist.

4. weniger nachfolgende Korrekturen

Wie die Überschrift bereits deutlich sagt, die nachfolgenden Korrekturen reduzieren sich. Das oft praktizierte „Stückwerk“ wird vermieden.

Ich muss im späteren Verlauf des Projektes nicht mehr für ein einzelnes HTML-Element die Design-Vorlage öffnen und entsprechende Änderungen in der CSS-Datei vornehmen. Gerade wenn ein HTML-Element übersehen wurde und das erst nach einer längeren Zeit „auffällt“, kann das Reindenken in das Projekt eine gewisse Zeit in Anspruch nehmen.

5. abgeschlossener, runder Workflow

Die Einbeziehung der HTML-Testpage für die Erstellung der CSS-Styles kann in den bisherigen Workflow, den sicherlich jeder in irgendeiner Form hat, eingebettet werden.

Es muss nicht mehr, wie im ersten Punkt skizziert, immer „hin und her“ gesprungen werden. Bei der Anbindung von z.B. TYPO3 beginne ich logischerweise mit der Installation und richte danach die Templates in TYPO3 ein. Anschließend konfiguriere ich die Template-Datei und widme mich danach der Einrichtung des Designs.

Legt man nun in einem Menüpunkt einfach einen Datensatz mit der o.g. HTML-Testpage an, kann man in einem Atemzug das Layout in der CSS-Datei definieren und parallel/anschließend die Formatierungen für die HTML-Elemente vornehmen.

6. Qualität

Der wichtigste Punkt zum Schluss. Die Qualität eurer Arbeit wird verbessert. Es wirkt professioneller, wenn ein Kunde bemerkt, dass ihr an „alles“ gedacht habt. Ihr gewinnt zwar keine großartigen Sympathiepunkte, aber ihr werdet garantiert negativ auffallen, wenn ihr ein HTML-Element vergessen habt. Gerade die optischen Elemente einer Webseite fallen schnell in Fokus der Besucher einer Webseite.

Das waren die 6 Gründe, die aus meiner Sicht für den Einsatz von HTML-Testpages sprechen. Es rentiert sich auf jeden Fall jetzt ein wenig mehr Zeit für die Erstellung einer solchen Testpage zu stecken. Ich hoffe ich konnte euch mit den genannten Punkten zur Erstellung einer HTML-Testseite bewegen. Oder verwendet ihr gar schon eine? Wie sind eure Erfahrung damit?