Joomla! Template Tutorial Teil 1 - Vorwort

Wir haben letztens eine Umfrage gestartet, in welcher die Besucher unserer Seite das Thema des nächsten Tutorials mitbestimmen können. Von 65 abgegeben Stimmen wollen also 37 (53%) ein Tutorial zur Erstellung eines Templates unter J1.5 – das war zu befürchten.

Teil 2 des Joomla! 1.5 Template Tutorials ist fertig!

Bevor ich ein paar Worte zum Templating verliere, möchte ich klarstellen worüber wir reden und einige der Begriffe näher erläutern, welche wir alle nutzen, unter denen jeder jedoch etwas anderes versteht.

Screendesign
Damit meinen wir das Layout in statischem Zustand, meistens also ein Photoshop-, Fireworks- oder Freehand-Entwurf des Webseiten Layouts. Das Screendesign wird also in den meisten Fällen vom Grafiker erstellt und wird dann zum...

Webdesign
Obowhl das Webdesign inzwischen eigene Lehrstühle besitzt, bezeichnen wir damit schlicht den (nicht schlichten) Prozess der Umsetzung des Screendesigns in XHTML, CSS, Javascript und Grafiken. Die Elemente also, aus denen das spätere Template besteht. Eigentlich sollte das Screendesign Bestandteil des Webdesign-Prozesses sein. Mehr dazu warum dies häufig nicht so ist, folgt später.

Template
Als Template wird, und darüber besteht Konsens, das Webdesign bezeichnet, welches für ein bestimmtes CMS, in unserem Fall Joomla, angepasst wurde.

Joomla Templates – eine Kunst für sich

Die Erstellung eines professionellen Joomla Templates ist, unabhängig von der Joomla Version, ein unwahrscheinlich kreativer und interdisziplinärer Prozess. Dies gilt natürlich für jedes professionelle Webdesign. Es gibt wohl kaum einen Arbeitsschritt, bei welchem dermaßen unterschiedliche Talente zur Geltung kommen. Wirklich großartige Webdesigns laden zum Verbleiben ein, wirken unheimlich leicht und hinterlassen beim Besucher ein gutes Gefühl. Sie sind so harmonisch und überzeugend arrangiert, dass der gestalterische Anspruch fast perfekt mit Funktionalität und Benutzerfreundlichkeit harmoniert. Gerade so als hätte jeder von uns darauf kommen können.

Ein guter Webdesigner ist ganz im Gegenteil zur landläufigen Meinung meiner Erfahrung nach, weit seltener zu finden als ein guter Entwickler, und von denen gibt es schon sehr wenige auf dem Markt. Tatsächlich kenne ich persönlich nur zwei Personen, welche ich als gute Webdesigner bezeichnen würde. In der Regel kommt es im täglichen Geschäft darauf an, eine gute Chemie zwischen dem „Gestalter“, also dem Screendesigner und dem „Programmierer“, also dem Webdesigner zu finden. Unternehmen, welche ein einzelnes Webdesign vom Entwurf bis zur Umsetzung von einer Person realisieren lassen, sind sehr selten und machen die besten Templates. Der andere Glücksfall sind Teams, in denen Screendesigner und Webdesigner Hand in Hand arbeiten.

Zum einen ist da der gestalterische Aspekt. Wir wissen alle was passiert, wenn sich ein klassischer Print-Grafiker daran macht ein Screendesign zu erstellen. Es wird in der Regel brutal. Nur wenige Gestalter aus dem Printbereich sind in der Lage die konzeptionellen Unterschiede zwischen einem statischen Printprodukt und einem dynamischen Produkt, wie z. B. einer Webseite, auf ihren Arbeitsprozess zu übertragen. Allerdings haben die, welche das schaffen, das Potential große Webdesigner zu werden.

Ein Printprodukt sieht immer gleich aus, egal wer es in den Händen hält. Ein Webdesign nicht – hier muss also die Regel „form follows function“ gelten. Von Usability und Flexibilität gar nicht zu reden. Dinge mit denen sich Printgestalter selten befassen. Oder haben Sie schon mal ein City-Light im Fluid Layout gesehen?

Anders als Printgestalter, haben heute tätige Webdesigner in der Regel keine tiefgehende gestalterische Ausbildung hinter sich (nein, Medieninformatik zählt nicht). Das kommt schlichtweg daher, dass die Umsetzung eines Designs in ein Template höhere Hürden stellt als das Design selbst.

Anders ausgedrückt:
Ein schlechtes Design bekommt jeder hin, ein schlechtes Template nicht.

Das richtige Werkzeug existiert nicht

Auch wenn es eine Menge Software zum Erstellen von Webseiten gibt, wer professionelle Templates entwickeln will, wird auf sämtliche Tools außer Texteditor und Browser verzichten müssen.
Dies erklärt sich auch ganz pragmatisch: Im Tagesgeschäft dauert das Öffnen einer CSS-Datei samt Editor, die nötigen Anpassungen am CSS und das Speichern etwa 30 Sekunden. So lange braucht z. B. Dreamweaver bis überhaupt eine Datei geöffnet wird. Der ganzen Feature Schnick-Schnack, welcher unerfahrene Webdesigner mit Tagcompletion usw. unterstützt, wird früher oder später überflüssig. Abgesehen davon sind Features wie Code Folding, Syntax highlighting, Autocompletion und FTP- bzw. SSH-Clients inzwischen an Bord eines jeden guten Texteditors, teilweise sogar besser integriert als in Gigabyte großen Suiten verschiedener Software Firmen.

Die Qualität eines Webdesigners lässt sich unter anderem an den Tools beurteilen, welche er nutzt. Sehen wir uns die Tools eines imaginären Webdesigners im Laufe der Jahre an:

Logisch. Diese Laufbahn wird selten ein einzelner Mensch durchlaufen. Sie stellt jedoch recht gut die Ansätze und vielleicht auch Ansprüche verschiedener Nutzergruppen dar.
Für den simplen Vereinsauftritt mag es die optimale Lösung sein, ein Webpage-Baukasten eines Providers einzusetzen. Für das Layout einer Community Website oder die Template Erstellung benötigt man vollkommene Kontrolle über den entstehenden Code. Die bekommt man jedoch nur, wenn jedes HTML Konstrukt und jeder CSS-Selektor die eigene Template Architektur unterstützt.

Kein professioneller Webdesigner schreibt den gesamten Code von der Picke auf neu. Dinge wie Suckerfish und Sliding Doors Navigationen oder Rounded Corners Konstrukte und ganz besonders Template-Skelette mit verschiedenen Spalten-Layouts werden einfach aus der Schublade gezogen und angepasst. Für diese Anpassung sind Browserplugins wie Firebug unverzichtbar. Wer Firebug noch nicht kennt, sollte dies dringend nachholen.

Der wissbegierige Leser findet das alles möglicherweise interessant, würde jedoch lieber mit dem Termplate-Tutorial beginnen?

Mit dieser kurzen Vorrede möchte ich sagen, dass dem Ruf nach einem Template-Tutorial eigentlich der Wunsch vorausgeht, gutes Webdesign erstellen zu wollen. Auf einem Joomla Template Workshop, den ich vor einer ganzen Weile auf einem JoomlaDay hielt, kam dies klar zum Ausdruck. Solange ich von standard Joomla Template Funktionalitäten sprach, war der Workshop mehr oder weniger interessant. Sobald es aber um die Umsetzung eines Screendesigns in XHTML und CSS ging, stieg die Aufmerksamkeit rapide an.

Tatsächlich lässt sich die Erstellung eines Joomla Templates in ca. 20 Zeilen Text erklären. Ein bisschen jdoc:include hier, ein wenig $this->countModules da, und schon steht das Joomla Template. Natürlich in einer ausgesprochen mageren Form (und ohne Template Overrides), aber es steht.

Die Basis für das Template, nämlich das Screen- und Webdesign, ist ein Handwerk, welches sich nicht in einzelnen Workshops und Tutorials aneignen lässt. Dem konstruktiven Webdesign gehen sehr viele frustrierende Stunden, ja Tage, Wochen und Monate voraus, in denen man sich mit Dingen wie Box-Modell Problematiken oder CSS-Weichen rumschlägt. Und wer von uns ist nicht früher oder später hier gelandet.

Dabei können wir auch heute, trotz Explorer 7, Grid-Systemen oder Template-Frameworks, die Interpretationsphilosophien der verschiedenen Browserhersteller (naja, hauptsächlich eines) nicht ignorieren. Früher oder später holt er uns doch noch ein – der „Guillotine Bug“.

Trotzdem sind heutzutage die Voraussetzungen besser denn je, gutes Webdesign zu erstellen. Schließlich gibt es inzwischen einen „common sence“ darüber, wie eine Webseite interpretiert werden soll. Moderne Browser würden sich ins Abseits stellen, führten sie Glaubenskriege wie seinerzeit Explorer 5 und Netscape 4.75.

Was brauche ich, um gutes Webdesign zu erstellen?

1. Leidenschaft
2. Wissen (und zwar aktuelles)
3. Tutorials, Tutorials, Tutorials
4. Übung, Übung, Übung
5. Talent schadet nicht

Bei der Erstellung des Screendesigns sollten Aspekte wie Usability, CD und Flexibilität nie aus den Augen verloren werden. Der Kreativität jedoch sollten man freien Lauf lassen, um dem Kunden ein einzigartiges Produkt liefern zu können.

Stellen Sie sich bei der Erstellung eines Screendesigns nie die Frage:
„Wie setzen wir das um?“

Mit dem Screendesign soll das Joomla 1.5 Template Tutorial auch beginnen. Hierfür soll ein laufendes Kundenprojekt genutzt werden, welches die Erstellung eines anspruchsvollen Joomla 1.5 Templates voraussetzt. Wie es in der Praxis allerdings so ist, gehen manche Projekte nicht so flott vorwärts wie man es gern hätte, und das Template Tutorial lässt nun schon eine Weile auf sich warten. Obwohl das Screendesign bereits durch ist und die Template Erstellung beginnen könnte, müssen wir uns aus organisatorischen Gründen noch etwas gedulden. Somit kann ich das fertige Screendesign erst im nächsten Artikel zum Joomla Templating besprechen. Ich hoffe, es wird nicht lange auf sich warten lassen. Falls doch, schieben wir das Joomla MVC Tutorial dazwischen!

Teil 2 des Joomla! 1.5 Template Tutorials ist fertig!

14 Kommentare

Zeige/Verstecke Kommentareingabe