Kopfzeile

Drupal ABC – R wie Responsive Design

«Form follows function»: Modernes, responsives Design mit Drupal sieht nicht nur gut aus, es ist zudem so flexibel, dass es auf allen Endgeräten ein gleichbleibendes Benutzererlebnis bietet.
4 Minuten

Optimierung für die mobile Nutzung

Gemäss aktuellen Studien beginnen über 80% der Nutzer die Internet-Suche auf einem Smartphone. Die Wahrscheinlichkeit ist somit sehr gross, dass Ihre Webseite über einen kleinen Smartphone-Bildschirm aufgerufen wird. Damit Ihre Webseite auf den Screens der verschiedensten Endgeräten gut les- und navigierbar bleibt, sind entsprechende Anpassungen nötig. «Responsive Webdesign» lautet die Lösung für flexible Webseiten.

Responsive Design steht für reagierendes Webdesign und ist ein gestalterisches und technisches Konzept bei der Erstellung von Webseiten. Eine "responsive" Webseite reagiert auf das Gerät, mit welchem der Nutzer die Webseite aufruft. Design und Inhalt passen sich adaptiv an den verfügbaren Platz des Endgeräts an und gewährleisten eine gleichbleibende Benutzerfreundlichkeit unabhängig von der Bildschirmauflösung. 

Eine sinnvolle mobile Strategie bildet die Basis für die technische Umsetzung. Bei der Konzeption müssen die unterschiedlichen Inhaltselemente optimal platziert und deren Verhalten bestimmt werden. Desweiteren müssen passende Breakpoints (Bildschirmgrössen, bei denen das Layout eine andere Form annimmt) definiert werden und insbesondere auch Gedanken zum Navigationskonzept dürfen ebenfalls nicht fehlen.

Wir von NETNODE stehen Ihnen gerne bei der Entwicklung der optimalen mobilen Strategie zur Seite. 
 

Updates abonnieren

Ich möchte Updates von diesem Blog erhalten.

Responsive Webseiten mit Drupal

Drupal bringt von Haus aus alle nötigen Voraussetzungen zur standardkonformen Umsetzung von responsiven Webseiten mit. Die Grundlage bilden dabei CSS3 Media Queries, Flexible Grids und Adaptive Media.

CSS3 Media Queries

Media Queries erlauben das Abgreifen von gerätespezifischen Daten vor dem Laden der Website. Dies ermöglicht es spezielle CSS-Dateien zu laden und die Webseite auf das entsprechende Endgerät optimiert darzustellen.

Flexible Grids

Mit einer geschickten Anwendung von Grids können die Inhalte der Drupal-Webseite an die Gegebenheiten des verwendeten Geräts angepasst werden. Sind für ein Element auf einem Desktop-PC beispielsweise noch vier Spalten vorgesehen, ist es auf einem Smartphone nur noch eine Spalte. Die Elemente sind somit nicht mit statischen, fixen Werten definiert, sondern flexibel mit proportionalen Angaben. Auch die Navigation wird wiederum unterschiedlich angezeigt, optimiert an das verwendete Gerät.

Adaptive Media

Gerade bei mobilen Geräten sollte darauf geachtet werden, dass die multimedialen Inhalte der Webseite nicht unnötig Datenvolumen verbrauchen. Die Inhalte werden somit dem Endgerät entsprechend bereitgestellt und ausgeliefert.

Fazit

Dank Responsive Webdesign passt sich Design und Inhalt korrekterweise an Format und Auflösung von Endgeräten an. Es schafft eine ansprechende digitale Erfahrung, die den Nutzer durch Benutzerfreundlichkeit besticht. 
 

Neuen Kommentar hinzufügen

Ihr Experte

UX / Design