Alle Websites bestehen aus Inhaltselementen, die auf-, unter- und nebeneinander verteilt und manchmal auch übereinander gestapelt werden. Innerhalb dieser Elemente befinden sich Texte, Bilder, Videos, Graphiken und Fotos. Ob du diese Elemente Kästen, Kisten, Boxen oder Tabellen nennst, ist egal. So grundsätzlich geht es hier um einen Plan (Layout, Struktur) und die sehr grundsätzliche Gestaltung eine Site. Solche Pläne sind nicht neu und seit mehr als 500 Jahren bei bedrucktem Papier ebenfalls ein großes Thema. Es geht dabei immer um Rastersysteme, Verhältnisse, Ränder und Abstände. Sind beim Druck auf Papier zumindest die Größe der Ausgabe und die Seitenverhältnisse bekannt, so ist das bei Websites nicht mehr wirklich der Fall. Es ist nicht mehr vorhersehbar auf welchem Endgerät die Website angezeigt wird.
Auf fast jeder Website gibt es Hintergrundbilder. Immer stellen sich Fragen wie:
Wie positioniere ich Hintergrundbilder?
Wie lege ich die Grösse fest?
Welche Effekte kann ich erzielen?
Die Gestaltungsmöglichkeiten mit Hintergrundbildern sind unendlich.
So grundsätzlich kannst du ein Hintergrundbild in der CSS Datei für einen Bereich festlegen. Wenn du den gesamten Hintergrund der Site ansprechen willst, bietet sich das body Tag an.
Wenn du dein gerade vollbrachtes Werk im Webdesign dem Kunden oder dem Designer vorstellst, dann gibt es ausser der Überprüfung der Funktionalität, der Farben und Schriften IMMER den Wunsch:
Das muss noch ein wenig nach links [rechts, oben,unten, grösser, kleiner, länger, kürzer] …
„Ein wenig“ ist dabei eine sehr variable Größe (so ähnlich wie „schön“ oder „blauer“). Besonders komplex sind die Zusammenhänge, wenn das Layout einer Site responsiv ist. In diesem Falle passt sich die Darstellung der Elemente einer Site der zur Verfügung stehenden Fläche auf dem Bildschirm an. Eine Änderung eines Abstands oder einer Schriftgröße kann unerwünschte Folgen bei anderen Bildschirmgrößen haben.
Jeder Kunde und jeder Designer kennt das Wort Pixel. Früher, als noch gedruckt wurde, waren es DPI (dots per Inch). Ein Pixel ist nach gängiger Meinung (und in Photoshop!) ein kleiner Punkt. Den kann man auch sehen, auf dem Fernseher, dem Telefon, dem Tablet oder gar der smarten Uhr: Heute ist so ein Pixel nur noch mit der Lupe erkennbar, weil es so viele davon gibt, die Maßeinheit hat sich aber im Kopf vieler Menschen festgesetzt. 10 Pixel sind mehr als ein Pixel und wenn man etwas, sagen wir mal 50 Pixel, nach links [rechts, oben,unten, größer, kleiner, länger, kürzer] verschiebt, dann sieht man das deutlich.
In CSS (Cascading Stylesheets) stehen Anweisungen, die deiner Website sagen, wie die Dinge auszusehen haben. Mit „die Dinge“ meine ich beispielsweise die Farbe von Text oder die Grösse von Überschriften.
CSS ist so ähnlich wie Wohnung einrichten. Du pinselst eine Wand an, hängst ein Bild auf, stellst eine Blume daneben und schiebst die Blume solange hin und her, bis es dir gefällt.
Mit CSS kannst du alle Dinge zu jedem Zeitpunkt verändern.
Dir gefällt die Wandfarbe nicht, kein Problem.
Anstelle der Blume soll ein interaktives Kunstwerk erscheinen, kein Problem 🙂
Ein Beispiel
Weil das ja doch alles sehr abstrakt ist, hier ein sehr einfaches Beispiel:
Das ist das HTML Markup:
<p>Ich bin ein Absatz, der ein <em>betontes</em> Wort enthält.</p>
das sind die CSS Anweisungen:
p {size: 16px;}
em {color: red;}
Im Editor jsfiddle.net kannst du das sofort online ausprobieren.
Du musst dich nicht registrieren.
https://jsfiddle.net/HagenGraf/zryonLs4/
Es macht Spass in dieser Umgebung zu probieren und im Ergebnis versteht man die Zusammenhänge vermutlich viel besser.
Wo gebe ich die CSS Anweisungen auf meiner Website ein?
Nach dem Ausprobieren auf jsfiddle möchtest du natürlich sofort auf der eigenen Website deine Idee umsetzen. Aber wo werden die CSS Befehle eingetippt?
HTML Site
Wenn du eine HTML/CSS Site ohne Datenbank betreibst, kannst du die CSS Anweisungen in der entsprechenden Datei per FTP auf den Server laden und/oder online verändern. Bei unseren Web Hostings geht das in der Dateiverwaltung im cPanel.
cPanel Dateiverwaltung
Content Management Systeme
Bei den klassischen Content Management Systemen WordPress, Joomla und Drupal kannst du auf unterschiedliche Weise zusätzliche CSS Anweisungen eingeben.
Joomla
Joomla besitzt einen vollwertigen Online Template Editor. Lege einfach im CSS Verzeichnis eine neue Datei mit dem Namen user.css an und füge die gewünschten Befehle ein.
Joomla lädt diese Datei nach dem Speichern automatisch.
user.css in Joomla
Im Quellcode der Website taucht die neue Datei user.css auf.
HTML-Quellcode Joomla Website
WordPress
In WordPress gibt es im Bereich Design den Customizer. Hier kannst du deine CSS Befehle eintragen.
WordPress Customizer
Im Quellcode der Site werden deine Anpassungen „inline“ eingebunden.
WordPress Website – HTML Quellcode
Die englische WordPress Dokumentation enthält eine Übersicht über gebräuchliche WordPress CSS-Klassen (WordPress and CSS).
Drupal
In Core Drupal kannst du das CSS nicht so einfach über den Browser anpassen. Es gibt aber natürlich ein Modul für Drupal 7 und Drupal 8, das dir einen CSS Editor mit Seitenvorschau zur Verfügung stellt (CSS Editor).
Drupal CSS Editor
Auch hier wieder ein kurzer Blick in den Seitenquellcode. Wie bei WordPress wird das CSS Inline in die Seite eingefügt.
Drupal Website – HTML Quellcode
Wir finde ich die passende CSS Klasse?
Wer schon mal gesucht hat, an welcher Stelle diese oder jene Änderungen eingefügt werden muss, weiß die aktuellen Browser zu schätzen. Einfach die Stelle markieren und im Browser Inspektor anzeigen, hier ein Beispiel in Google Chrome.
Google Chrome Inspektor
Hinweis: Wie beim Einrichten deiner Wohnung kannst du mit der Verwendung von individuellem CSS sehr schnell übers Ziel hinaus schießen, daher ein paar ganz einfache Dinge, die du beachten solltest:
Keine Mischung von Schriftarten
Benutze aufeinander abgestimmte Farben
Trenne Inhaltselemente wie Seitenleisten, Kopf- und Fußzeilen klar voneinander
Benutze nicht all zu viele Fotos und Grafiken
Achte auf einen hohen Kontrast zwischen Schrift und Hintergrund
Design lernt man nicht in ein paar Stunden. Es ist ein Prozess, der sich über Jahre erstreckt und nie zu Ende ist. Gerade deswegen bereitet er vielen Menschen auch soviel Freude.
Wie sie sicher schon bemerkt haben, steckt hinter dem NovaTrend Blog das Content Management System Drupal. Das Theme basiert auf dem HTML, CSS und JavaScript Framework Bootstrap. Die Struktur einer solchen Site lässt sich erstaunlich einfach erstellen und bietet grosse Flexibilität beim Design.
In diesem Artikel möchte ich Ihnen zeigen, wie Sie eine Drupal Website mit Bootstrap aufsetzen können.
Bezüglich der Software Versionen ist eigentlich nie die richtige Zeit einen Artikel darüber zu schreiben, steht doch immer schon die neue Version vor der Tür.
Die Veröffentlichung von Drupal 8 findet seit gefühlten 2 Jahren statt und Bootstrap brachte gerade eine Version 4 Alpha heraus.
Hier im Blog benutzen wir Drupal 7.x und Bootstrap 3.x und vermutlich ist diese Kombination recht gebräuchlich.
Bei drupal.org werden mehr als 70.000 aktive Websites angegeben, die Bootstrap einsetzen (Quelle).
Drupal – Bootstrap – Installationen – 2012 – 2015
Aber der Reihe nach.
Zunächst stellt sich die Frage, warum ich das benutzen soll.
Die Nutzung eines Content Management Systems ist ab einer gewissen Komplexität Ihrer Website zwingend. Ob es nun unbedingt Drupal sein muss, sei dahingestellt. Drupal eignet sich für diesen Artikel, weil wir unser Blog damit betreiben. Sie können Bootstrap ebenfalls in Joomla, Typo3, WordPress und vermutlich den meisten anderen CMS nutzen, teilweise ist es bereits enthalten.
Was ist Bootstrap?
Bootstrap ist ein freies und sehr häufig verwendetes CSS-Framework. Es enthält auf HTML und CSS basierende Gestaltungsvorlagen für Typografie, Formulare, Buttons, Tabellen, Grid-Systeme, Navigations- und andere Oberflächengestaltungselemente, sowie zusätzliche, optionale JavaScript-Erweiterungen.
Bootstrap – Komponenten (Auswahl)
Sie können mit Hilfe dieser Elemente eine Website entwickeln und später dann bei Bedarf ein CMS „darunterlegen“.
Wenn ich das so schreibe, dann höre ich den Webdesigner protestieren und sehe den Programmierer zusammenzucken. In der harten Realität läuft es aber ziemlich oft genau so ab. Der grosse Vorteil bei dieser Vorgehensweise ist die Flexibilität und die unglaubliche Verbreitung von Bootstrap. Sie müssen sich nicht sofort festlegen, mit welchen Tools die Site letztlich realisiert wird. Es wird „einfach“ möglich Prototypen der Website in unterschiedlichen CMS zu realisieren und Workflows zu optimieren.
Es gibt Dateien mit Konfigurationsanweisungen für Bootstrap, die das komplette Design der Website beschreiben und einfach austausch- und veränderbar sind. Bekanntestes Beispiel dafür ist der Service bootstrap.com. Jedes der angebotenen Themes lässt sich „per Mausklick“ integrieren. Hier der Screenshot eines Beispielthemes im Flatdesign:
Bootswatch – Flatly
Installation
Installieren Sie sich das aktuelle Drupal 7 (Installation der 5 meistverbreiteten Content Management Systeme). Um mit Bootstrap arbeiten zu können, benötigen eine aktuellere jQuery Version als der Standard in Drupal 7. Glücklicherweise gibt es dafür natürlich ein Modul 🙂
Installieren und aktivieren Sie die Module bootstrap und jquery_update
Sie können die Installation per Konsole mit Drush erledigen
drush dl bootstrap jquery_update
drush en bootstrap jquery_update
oder über den Browser in /admin/modules/install
Drupal – Modul installieren
Konfiguration
Das jQuery Modul kann zunächst ohne Konfiguration genutzt werden, bei Bedarf können Sie in /admin/config/development/jquery_update unterschiedliche jQuery Versionen und ein CDN konfigurieren.
Das Bootstrap Theme kommt mit einem Starterkit für ein eigenes Subtheme, Sie können es am Anfang aber auch „einfach so“ nutzen und mit einem Bootswatch Design kombinieren. Nehmen wir das Bootstrap Flatly Beispiel.
Zunächst müssen Sie das neu installierte Bootstrap Theme aktivieren und als Standard festlegen (/admin/appearance).
Drupal – Theme aktivieren
Ihre Website hat dann das responsive Bootstrap Design.
Wenn Sie die Grösse des Browserfensters verkleinern, sehen Sie, was ich meine.
Drupal – Startseite
Um nun das Boostrap Flatly Design zu erhalten, müssen Sie in den Theme-Einstellungen Flatly auswählen (/admin/appearance/settings/bootstrap). Sie können sich alle Boostrap Themes hier in einer Vorschau ansehen.
Bootstrap – Flatly wählen
Wenn Sie im Tab Components die Navigationsleiste (NAVBAR) nun noch auf „Static Top“ setzen …
Bootstrap – Navigation
sieht Ihre Drupalsite so aus:
Drupal – Bootstrap – Flatly
Flatdesign … ganz einfach!
Wenn die Farben für Ihr Projekt passen, ist Ihre Arbeit hier beendet.
Ein eigenes Sub-Theme
Wenn Sie einen Kunden haben, soll die Site natürlich in den Farben, Schriften und Einstellungen der Corporate Identity sein. Um das zu realisieren, müssen Sie sich ein Sub-Theme erstellen. Das ist nicht schwer und wird hier (Bootstrap sub-theming „how to“) detailliert beschrieben. Grundsätzlich erstellen Sie sich einen eigenen Theme-Ordner, kopieren die Bootstrap Quelldateien dort hinein und ändern die theme.info Datei ab. Ausserdem benötigen Sie einen LESS Compiler. Ich nutze dafür die node.js Umgebung unter Mac OS und kann dort einfach einen LESS Compiler installieren (npm install -g less).
Hier ist eine detailierte Beschreibung (How to Use Bootswatch Themes in Drupal 7).
Je nachdem, ob Sie unter Windows, Linux oder Mac OS arbeiten sind die Schritte ein wenig anders, daher möchte ich es beim Link auf die Erklärungen belassen.
Wenn Sie sich Ihre Entwicklungsumgebung eingerichtet haben, müssen Sie für einfache Anpassungen nur die Datei variable.less bearbeiten und danach mit lessc kompilieren. In der variable.less stehen alle Parameter eines Bootswatch Themes und Sie können diese Datei downloaden (http://bootswatch.com/flatly/).
Bootstrap – Flatly – variable.less
Nach kurzer Zeit sieht Ihr Drupal dann so aus:
Drupal – NovaTrend Design
In diesem Fall musste noch eine Drupal Template Datei überschrieben werden, aber die wesentlichen Änderungen waren tatsächlich nur in der Datei variable.less vorzunehmen!
Fazit
Mit dem Bootsstrap Framework können Sie Standardsites in sehr kurzer Zeit erstellen. Für individualisierte Sites benötigen Sie etwas mehr Aufwand und Know-How, sind allerdings extrem flexibel im Design. In Kombination mit den Template-Systemen der CMS können Sie wirklich jeden Bootstrap basierten Entwurf „in endlicher“ Zeit realisieren 🙂
