Best Practice: Template-Entwicklung

Was ist die beste Vorgehensweise bei der Entwicklung eines Templates für eine beliebige Publishing-Software? Diese oder ähnliche Fragen stellen sich dem Entwickler immer wieder, wenn er mit einem neuen Projekt anfängt. Besonders dann wenn es auf diese Frage noch keine feststehende Antwort gibt und man auf die Tipps und Tricks derer angewiesen ist, die soetwas schon einmal getan haben.

Dieser Artikel beschäftigt sich mit genau diesem Thema und versucht praktische und vor allem praktikable Lösungsvorschläge zu liefern. Ich beginne hier beim Grundlegensten aller Projekte, der Idee, und gehe dann auf alle weiteren nötigen Schritte ein, bis endlich eine funktionsfähige Website entstanden ist.

Am Anfang steht die Idee

Ohne eine gute Idee scheitert jedes Projekt schon im Ansatz. Aber wenn man es geschafft hat eine tolle Idee zu haben, bei der man nicht vor unendlich großen Hürden aufgrund fehlender Kenntnisse o.Ä. steht, kann es endlich losgehen. Der nächste Schritt ist es seinen Einfall weiterzuentwickeln und sich ein Konzept zu schaffen, mit dem man arbeiten kann. Ob dies nun durch massives Brainstorming, Austausch mit anderen oder spontan unter der Dusche entsteht ist egal. Die Hauptsache ist, dass schlussendlich eine Art roter Faden entsteht, an den man sich bei der Entwicklung halten kann.

Design: der Hauptbestandteil eines Templates

Logischerweise sollte man sich bei der Konzeption seiner Idee auch schon diverse Gedanken zum Design machen, denn immerhin ist das der wichtigste Bestandteil bei der Template-Entwicklung. Ohne Design kein Template, so einfach ist das.

Wie man letztendlich sein Design entwickelt ist jedem selbst überlassen. Ob mit Photoshop auf den Pixel genau oder skizzenhaft mit Papier und Bleistift. Der wichtige Teil hierbei ist jedes gewünschte Feature von Anfang an in den Prozess mit einzubeziehen, damit man nicht plötzlich vor einem großen Problem steht und mühselig eine mehr schlechte als rechte Lösung zu praktizieren.

Ist das Design endlich fertig hilft es ungemein das entstandene Bild erst einmal eine Weile auf sich wirken zu lassen und sich direkt Gedanken dazu zu machen, wie man dieses Ungetüm mit allen seinen Details in Quelltext verwandelt. Hierzu gibt es diverse Dienstleister, doch kostengünstiger und spaßbringender ist es, sich selbst an die Arbeit zu machen. Steht das grobe Grundgerüst ist der Moment gekommen sich die Spezifikationen für das gewählte Publishing-System anzusehen. Bei WordPress beispielsweise gibt es bei der Navigation für die Seiten eine CSS-Klasse, die automatisch an die Listenelemente gehängt wird, sollte die aufgeführte Seite aufgerufen werden. Also warum sollte man sich hier selbst eine ausgefeilte Lösung überlegen, wenn man vorhandene Sachen direkt nutzen kann?

Die technische Umsetzung oder das Spiel mit dem Feuer

Hat man es nun endlich geschafft nach Stunden des Fluchens aufgrund zickender Browser, Inkompatibilitäten oder nicht vorhandenen, aber dringend benötigter, Eigenschaften von HTML und CSS endlich einen zufriedenstellenden HTML-Dummy zu erstellen beginnt der Spaß erst richtig, denn nun beginnt die Implementierung.

Der erste Schritt sollte der sein den entstandenen HTML-Dummy in eine Standarddatei (bei WordPress die index.php im Ordner /wp-content/themes/dein-theme) zu kopieren und die CSS-, Javascript- und Bilddateien an die richtige Stelle zu bringen. Anschließend fängt man damit an den zuvor mühselig erstellten Quelltext zu zerlegen und in einzelne Dateien zu packen, die je nach benötigter Anzeige eingebunden werden. Statische Inhalte und dynamische Inhalte sollten ebenfalls strikt voneinander getrennt werden, um nicht zu einem späteren Zeitpunkt den Überblick zu verlieren.

Nach dem Zerlegen des Quelltextes sollte man mit dem existenziellsten Bestandteil der Website anfangen: der Navigation. Hat man diese umgesetzt und im Backend natürlich die entsprechende Struktur der Site angelegt fällt es schon um Meilen leichter zu den Seiten zu kommen, an denen man momentan entwickelt, da man sich umständliches Kopieren von Links, etc. sparen kann.

Nun liegt es im Ermessen des Entwicklers, ob er mit einer Inhaltsseite oder der Startseite weiter macht. Letztere ist in den meisten Fällen bei großen Projekten sehr schwierig umzusetzen, da hier viele Dinge aus dem System gleichzeitig angezeigt werden sollen. Im Großen und Ganzen empfiehlt es sich erst einmal die einfachen Dinge wie normale Inhaltsseiten oder Listentemplates umzusetzen und sich erst dann zu den wirklich schwierigen zu begeben.

Kleiner Tipp noch am Rande: Am Anfang geht alles sehr schnell, da man dank der leicht umzusetzenden Sachen schnell Fortschritte erzielt. Jedoch werden die Aufgaben immer schwieriger und zeitintensiver, je weiter man fortschreitet. Hier also nicht gleich frustrieren

Der eben genannte Tipp gilt natürlich auch dann, wenn mal nicht gleich etwas so funktionieren will, wie es soll. Je umfangreicher die zu bewältigende Aufgabe, desto schleppender geht es voran, aber das was zählt ist das Ergebnis. Und wenn dieses erzielt wird fällt jeder bisherige Stress ab wie Schuppen von den Augen. Ebenfalls eine zeitraubende Angelegenheit sind Dinge, die man beim Design vergessen hat oder neue, zusätzliche Anforderungen und Features. Auch hier gilt dann erst einmal überlegen, wie man dies angeht und dann anfangen Code zu schreiben.

Der Schluss vom Lied: Eine funktionierende Website

Sind alle Features implementiert und Anforderungen umgesetzt kann man sich ruhigen Gewissens zurücklehnen und sein Gesamtwerk betrachten. Jedoch sollte man selbst zu diesem Zeitpunkt das gesamte Projekt noch einmal grundlegend überdenken: Ist wirklich alles eingebaut? Gibt es noch Features, die praktisch wären? Wie sieht es mit der Usability aus? Hier hilft es meist das Projekt anderen Leuten zu präsentieren, die dann sehr oft noch diverse Tipps für Verbesserungen geben können, die man auch noch vor dem Onlinestart umsetzen sollte.

Erst dann, wenn wirklich alles funktioniert und niemanden beim schnellen Überflug etwas ins Auge fällt kann die Site online gehen. Eventuell nimmt man sich aber auch noch kurz vor dem Release etwas Zeit und beachtet meine Tipps zur Optimierung von Quelltext.