Gespeichert von Webmaster am

Erinnern Sie sich noch an den Hinweis auf Webseiten "Optimiert für ..." oder "Optimale Darstellung bei einer Auflösung von 640x480"? Bietet ein Unternehmen sein Internetangebot mit derartigen Einschränkungen an, ist eindrucksvoll bewiesen, dass es nicht jeden Trend sofort mitgeht.

Aber mal Spaß beiseite, in der heutigen Zeit ist "Responsives Design" in aller Munde und stellt eine Minimalbedingung bei der Vergabe von Aufträgen mit dem Ziel dar, den bestehenden Webauftritt eines Unternehmen modern zu gestalten. Die Konkretisierung bedeutet dann meistens, es soll auf allen Endgeräten gleich bzw. gleich gut aussehen.

Aber was bedeutet responsives Design eigentlich? Die wörtliche Übersetzung bedeutet "ansprechbar", "reagierend" oder "reaktionsfähig". "Demand responsive" bedeutet "bedarfsgesteuert". Und das trifft den Kern genau, denn ein responsives Design reagiert auf das Endgerät, das die Webseite darstellen will, und passt die Darstellung gemäß den Möglichkeiten des Geräts an. Das Design ist also reaktionsfähig. Praktisch bedeutet dies, dass das Design auf allen Endgeräten gleich gut aussieht.

Drupal legt spätestens seit der Version 7 starkes Augenmerk auf eine responsive Darstellungsweise. Mittlerweile sind für die gängigen Versionen auch viele responsive Designs verfügbar. Sobald aber ein individualisiertes Design umgesetzt werden soll, ist ein Abtauchen in die Tiefen des Quellcodes des Designs notwendig. Durch die individualisierten Anpassungen ist die Update-Fähigkeit nicht mehr gegeben, was dann in erheblichen manuellen Nacharbeiten enden wird. Der wesentlich saubere und letztendlich auch schnellere Weg ist, ein responsives Framework einzubinden und ein eigenes Design zu erstellen.

Die Auswahl eines geeigneten Frameworks ist nicht gerade einfach, da es mittlerweile eine Vielzahl gibt, die sich nur in Nuancen voneinander unterscheiden. Die Wahl des Framework "Bootstrap" ist aufgrund der Verbreitung und seines hohen Reifegrads gefallen. Die Einbindung geschieht unkompliziert durch Referenzieren der CSS und JQuery Dateien. Um die einzelnen Bootstrap-Komponenten anzusprechen, ist ein geeigneter HTML-Tag notwendig.

Zugegeben, der Zugang zu Drupal und seinem Template-System ist etwas gewöhnungsbedürftig, da Drupal konsequent alles in Arrays stellt, diese dann ineinander schachtelt und erst im aller letzten Schritt in darstellbaren HTML-Code umwandelt. Da ist es für uns Entwickler im ersten Moment sehr schwierig, den richtigen Ansatzpunkt für eigene Änderungen zu finden, hat aber den unschlagbaren Vorteil der hohen Flexibilität und Geschwindigkeit, gerade wenn die Webseite groß wird und viele Besucher bedienen muss. An sogenannten Haken lässt sich die Verarbeitungskette unterbrechen, der bisher erstellte Array verändern oder erweitern, um dann alles wieder an die Prozeßkette zu übergeben und für die Ausgabe fertig rendern zu lassen. So lassen sich nur bestimmte Teile eines Templates individuell anpassen oder ganze Designs erstellen. Sollte mal eine Eventualität nicht explizit abgedeckt sein, ist das für Drupal auch kein Problem. Es greift dann auf das Standardtemplate des Systems zurück und füllt die Lücke aus. So lässt sich für den geübten Anwender leicht das Aussehen einer Drupalseite verändern. 

Wie die meisten responsiven Frameworks arbeitet auch Bootstrap mit einem Grid-System. Die Anfänge gehen auf das 960-Grid-System zurück, das eine maximale Breite von 960 Pixeln in eine bestimmte Anzahl von Spalten aufteilt. Verringert sich die Breite, wird der Raum auf weniger Spalten aufgeteilt. Blöcke, die bisher nebeneinander dargestellt wurden, werden dann untereinander dargestellt. Der Inhalt und der Aufbau der Seite bleiben gleich, nur die Darstellung ändert sich. Neben dem Grid-System bietet Bootstrap aber auch viele Designelemente, die heutzutage zum modernen Webdesign dazugehören und State-of-the-art sind.

Drupal und Bootstrap bilden eine perfekte Kombination, weil beide modular aufgebaut sind. Egal, ob eine einfache Seite mit wenigen Elementen oder ein komplexes System mit vielen unterschiedlichen Bereichen gebaut werden soll. Drupal und Bootstrap sind für alle Aufgaben bestens geeignet. Lassen Sie sich einfach mal beraten, welche Möglichkeiten sich bieten, um Ihr Vorhaben optimal umzusetzen. The sky is the limit!