Theme für Drupal erstellen und wissenwertes zu HTML / CSS

Mo, 05.07.2010 - 20:25 -- Daniel Espendiller

Einige Interessante Sachen zum Erstellen von Webseiten mittels Drupal als auch für andere hilfreichen Sachen im Umgang mit Layout, CSS, Bilder, ... finden man meisten durch Zufall und sind teilweise nicht ganz so bekannt. Hier findet sich eine kurze Zusammenfassung, was man unbedingt wissen sollte.

Drupal Theme Vorlage (zen)

Wer schon mal ein Theme für Drupal entwickelt hat, weiß das die CSS-Klassen eigentlich durchgängig recht gut strukturiert sind. Allerdings wir man meist von den ganzen möglichen Eigenschaften erschlagen. Nun könnte man die Standard Drupal Themes nutzen und seinen Bedürfnissen anpassen. Ich habe mich allerdings mittlerweile hiervon getrennt, da es wesentlich schneller ist eine rudimentäre Vorlagen zu nutzen, die erst einmal nur die wesentliche Elemente nutzt.
Nicht Grundlos steht dafür das zen Theme auf der Drupal Themes Seite weit oben in der Nutzungsliste. Es stellt einen "Theme Framework" mit einfachem 3 spaltigen Seitenlayout zur Verfügung. Durch Anlegen eines Subthemes kann man sein Theme dynamisch vom Standard Zen Theme "absplitten".
Weiter sollte man sich mal CSS Grids ansehen. Hier wird die Seiten nicht in Regionen mit einer festen Struktur aufgeteilt, sondern in Spalten und Zeilen, wobei jedes Element ein fest Pixelgröße hat. Muss muss also nicht mit width arbeiten. Auch hierfür gibt eine Zen Erweiterung: Zen nineSixty (960 Grid system)

Breadcrumbs

Oberhalb jeder Seiten sollten Breadcrumbs eingesetzt werden. Das sind eine hierarchie Pfadnavigation zu der Seiten mit der jeweils übergeordneten Seite. Mittlerweile werden diese auch von Google ausgewertet, also sollte man sie dringend einbauen. Um sie besser verwalten zu können, sollte man dringend Custom Breadcrumbs installieren. So lassen Breadcrumbs für Inhaltstypen, Taxonomien, Views und diverse andere Erweiterungen getrennt verwalten.

Theme Developer Module

Wer viele Themes für Drupal erstellt sollte kennt sicher das Problem, dass mittels Template Seiten und Funktionen einige Ausgaben überschrieben werden müssen. Welche Möglichkeiten und was aktuell für die geöffnet Seite genutzt wird, wird in einem kleinem Overlay-Fenster von Theme developer angezeigt.

Icons und Symbole in Dateien

Da da maximale Verbindungen zwischen Webserver und Browser begrenzt ist und jedes Bild über einen eigene Verbindung aufgerufen wird. Empfiehlt es sich Bilder bzw. Hintergrund, die das Design (CSS-Elemente) der Webseite betreffen, in ein einzelnes Bild auszulagern. Zwar ist das einzelne Bild geringfügig größer, man holt die Zeit allerdings schnell wieder rein. Zum Ausgeben der Bilder muss das die CSS Eingenschaft background-position genutzt werden

PNG stärker komprimieren

PNG-Dateien aus diversen Bildbearbeitungsprogrammen sind in den meisten Fällen größer als sie sollten. Durch eine einfache Optimierung mit Programm PNGPUT lässt die Dateigröße auf rund die Hälfte verkleinern. Das Bild wird unter anderem durch einen angepassten DEFLATE Kompressor optimiert, wodurch die Generierung eines einzelnen Bild zwar länger dauert, aber dafür wie erwähnt um einiges kleiner ist. Dabei ergibt sich kein Qualitätsunterschied, da die PNG Datei nach wie vor verlustfrei komprimiert wird.

"PNGOUT optimizes the size of .PNG files losslessly. It uses the same deflate compressor I wrote for KZIP.EXE"

Firebug und Drupal

Relativ neu ist auch eine Erweiterung für Firebug, welches das Firebugmenü um einen Drupal Reiter ergänzt. Auf der Drupal Seite kann man die Ausgaben dann z.B. per PHP Funktion (Drupal For Firebug) direkt im Firebug ausgeben. Auf der eigentlichen Homepage sieht man dann den die Debugausgabe nicht mehr. Besonders hilfreich finde ich es, für Formulare.