Kategorien
Webdesign Wunschthema

Gestaltung mit CSS Grids

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.

Kategorien
Webdesign

Hintergrundbilder in CSS

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.

Kategorien
Webdesign Wunschthema

Das muss etwas nach links … EM, REM oder PX?

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.

Kategorien
Content Management Systeme Editoren Shared Hosting Site Builder Webdesign

Wie geht das genau mit CSS?

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/
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
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
user.css in Joomla

Im Quellcode der Website taucht die neue Datei user.css auf.

Quellcode Joomla Website
HTML-Quellcode Joomla Website

WordPress

In WordPress gibt es im Bereich Design den Customizer. Hier kannst du deine CSS Befehle eintragen.

WordPress Customizer
WordPress Customizer

Im Quellcode der Site werden deine Anpassungen „inline“ eingebunden.

WordPress - HTML Quellcode
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
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
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
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.  

Links


tl;dr: Mit CSS kannst du deine Website „verschönern“.

Save

Kategorien
Content Management Systeme Webdesign

Themes basierend auf Bootstrap in Drupal

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
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)
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
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
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
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
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
Bootstrap – Flatly wählen

Wenn Sie im Tab Components die Navigationsleiste (NAVBAR) nun noch auf „Static Top“ setzen …

Bootstrap - Navigation
Bootstrap – Navigation

sieht Ihre Drupalsite so aus:

Drupal - Bootstrap - Flatly
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
Bootstrap – Flatly – variable.less

Nach kurzer Zeit sieht Ihr Drupal dann so aus:

Drupal - NovaTrend Design
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 🙂

Links


tl;dr: Die Nutzung des Bootstrap Framework wird immer beliebter – hier ein Beispiel in Kombination mit Drupal.