23.03.17

Responsive Web Design mit Drupal 7

Responsive Webseiten mit dem Drupal CMS

Zwischen dem Gestalten eines Print-Erzeugnisses und einer dynamischen Website bestehen zwei signifikante Unterschiede: die Auflösung und das Format.

Während bei einer Print-Gestaltung Texte und Bilder an ein zuvor definiertes Format angepasst werden und dann mit maximal 300dpi gedruckt werden, muss sich eine Website je nach Anzeigemedium (z.B. Computer, Tablet oder Smartphone) an Auflösung und Größe anpassen können. Die Gestaltung und der Aufbau der Webseite muss also flexibel sein. Man spricht hierbei von „Responsive Webdesign“ (zu deutsch: reagierendes Webdesign).

Optimierung für mobile Nutzung der Drupal Webseite

Viele Jahre wurden Websites für eine Standard-Auflösung von 800x600px, später dann für eine Auflösung von 1024x748px bzw. eine Breite von 1200px entwickelt. Dabei wurde lange Zeit vernachlässigt, dass eine steigende Anzahl an Nutzer über andere Geräte mit sehr unterschiedlichen Bildschirmauflösungen und -formaten im Internet agiert. Oft ist die Absprungrate dieser Nutzer hoch, weil die Website nicht für die mobile Nutzung optimiert wurde. Es muss daher viel gescrollt werden, um die Seiteninhalte lesen zu können. Die Navigation lässt sich meist nur schwerlich bedienen, da sie auf die Nutzung mit einem Mauszeiger und nicht einem Touch-Screen ausgelegt ist. Unnötig groß angelegte Seiten laden zudem nur langsam und verbrauchen schnell das für Mobilgeräte oft begrenzte Datenvolumen.

Das Konzept des Responsive Web Design ermöglicht es, ein 'reagierendes' Webdesign zu entwickeln. Dabei reagiert die Website auf das Gerät, mit welchem der Nutzer die Website aufruft. Design und Inhalt passen sich der jeweiligen Bildschirmauflösung und Größe des verwendeten Endgeräts an und können somit eine gleichbleibende Benutzerfreundlichkeit gewährleisten.

Generell setzt sich Responsive Webdesign aus drei Aspekten zusammen: CSS3 Media Querys, Flexible Grids und Flexible Media.

CSS3 Media Querys

CSS3 Media Querys erlauben es gerätespezifische Daten abzugreifen und somit spezielle CSS-Dateien zu laden um den Möglichkeiten des Gerätes entsprechend die Website darzustellen.

Um einem Drupal-Theme eine CSS-Datei hinzuzufügen, reicht meist eine Deklaration. Diese kann mit Media Querys erweitert werden, sodass die Website darauf reagieren kann. Mit einer solchen Deklaration wird eine alternative CSS-Datei verwendet, sobald der Nutzer sein Gerät beispielsweise horizontal verwendet. Dies geschieht zum Besipiel sehr oft beim mobilen Surfen mit einem Smartphone.

Drupal Theme mit "Flexible Grids"

Im Vorfeld müssen Web-Designer ein umfassendes Konzept entwicklen, wie der Inhalt der Drupal-Webseite sinnvoll auf den verschiedenen Geräten dargestellt werden kann. Eine Schlüsselfunktion spielen dabei sogenannte Grids. Mit der geschickten Verwendung von Grids können Drupal-Internetseiten den Anforderungen entsprechend angezeigt werden. So können auf dem Computermonitor Platz für bis zu vier Spalten vorgesehen werden, auf einem mobilen Gerät jedoch nur eine Spalte. Die Elemente werden somit nicht mehr statisch mit fixen Werten definiert sondern flexibel mit proportionalen Angaben. Ähnlich verhält es sich mit der Navigation auf der Internetseite selbst. Diese wird je nach verwendetem Gerät an einer optimalen Position in unterschiedlicher Weise angezeigt. Durch die Grids findet somit auch eine Reaktion auf die Gegebenheiten des durch den Nutzer verwendeten Geräts statt.

Flexible Media

Auch bei der Verwendung von multimedialen Inhalten muss es eine entsprechende Reaktion der Website geben. Hierfür sollte sehr effizient mit der Auslieferung der Inhalte gearbeitet werden. Ansonsten wird es dazu kommen, dass gerade bei mobilen Geräten (z.B. Smartphones und Tablets) unnötig Datenvolumen verbraucht wird und der Nutzer den Aufruf der Internetseite unterwegs zukünftig vermeidet. Es muss also bei der Gestaltung bedacht werden, dass diese Inhalte dem Gerät entsprechend angepasst und bereitgestellt werden.

Responsive Webdesign und Drupal 7

Die aktuelle Version Drupal 7, des freien Content Management Systems (CMS) Drupal bringt alle nötigen Voraussetzungen zur standardkonformen und professionellen Gestaltung von Responsive Websites mit. Für das sich noch in der Beta-Phase befindende Drupal 8 haben die Entwickler bereits angekündigt, den Gestaltern noch weiter zukunftsträchtige Möglichkeiten zum Erstellen von Websites mit Responsive Webdesign an die Hand zu geben.

Responsive Webdesign eröffnet eine zukunftssichere Perspektive und erlaubt es uns, Webseiten zu entwickeln, die den Anforderungen zeitgemäßer Nutzer und deren Endgeräten folgen. Das Webdesign folgt dem Nutzer. Design und Inhalt passen sich korrekterweise an Format und Auflösung von Endgeräten (und somit den Vorgaben der Nutzer) an und nicht umgekehrt.