Responsive Webdesign

Reaktive Websites für Desktops, Tablets und Smartphones

Veränderte Nutzungsgewohnheiten – vornehmlich durch mobile Endgeräte mit hochauflösenden Touch-Displays – erfordern eine neue Art des Webdesigns. Webseiten mit responsivem Layout reagieren dynamisch auf verschiedene Displaygrößen und passen sich mit Hilfe von sogenannten Media Queries automatisch an. Die Galileo Webagentur realisiert responsive Websites, die Endgeräte von verschiedenen Desktops über Tablets bis hin zu Smartphones gleichermaßen unterstützen.

Responsives Layout-Konzept

Die Umsetzung von responsiven Websites erfordert eine andere Herangehensweise, als dies bisher im Webdesign üblich war. Bei der Entwicklung des Layouts bzw. der Designvorlagen ist es nun nicht mehr möglich, von einer einheitlichen Geräteklasse und Bildschirmgröße auszugehen (i. d. R. Desktop). Statt dessen muss das Konzept von Anfang an darauf ausgelegt werden, sich den verschiedenen Endgeräten bzw. Viewports (siehe unten) anzupassen. Neben grundlegenden Bestandteilen der Website, wie z. B. der Navigationsleisten, gilt dies insbesondere für die Inhalte der Website, die z. B. für Mobilgeräte linearisiert oder gänzlich anders organisiert werden müssen.

Daher entwickelt unser Team individuelle Layout-Konzepte, die Lösungen für spezifische Inhalte des Auftraggebers (z. B. komplexe Tabellen, Spaltenanordnungen oder Listen) beinhalten. Hierbei wird in der Regel nach dem so genannten "Mobile First"-Prinzip gearbeitet, d. h. Anordnung und Umfang der Inhalte werden von einem (häufig minimalisierten) Mobil-Ansatz ausgehend für größere Viewports umorganisiert und gegebenenfalls erweitert.

Das responsive Layout passt sich der Gerätegröße an und bedient Mobilgerät, Tablet und Desktop gleichermaßen

Endgeräte und Viewports

Responsive Websites werden in der Regel für mehrere Viewports optimiert. Ein Viewport entspricht dabei gemeinsamen Eigenschaften einer Geräteklasse, z. B. von Tablets oder Smartphones, und fasst Layout- bzw. Verhaltensanpassungen für diese zusammen. 

Desktop Large
  • Zielgruppe: Hochauflösende Desktop-Bildschirme
  • Bildschirmbreite: ab 1200 Pixel
Tablet
  • Zielgruppe: Tablets, Phablets
  • Bildschirmbreite: ~ 768 bis 1024 Pixel
Desktop Small
  • Zielgruppe: Niedrigauflösende Desktop-Bildschirme
  • Bildschirmbreite: ~ 1024 bis 1200 Pixel
Phone
  • Zielgruppe: Smartphones
  • Bildbreite ~ 320 bis 768 Pixel

Die obige Einteilung ist als exemplarisch anzusehen und kann auf Wunsch, z. B. zur Optimierung bestimmter Endgeräte wie iPhone oder iPad, verfeinert und erweitert werden. Die genannte Bildschirmbreite bezieht sich dabei auf die vom jeweiligen Endgerät übermittelte "device-width", die insbesondere bei hochauflösenden Smartphones meist deutlich niedriger liegt als die tatsächliche Auflösung des Endgeräts (z. B. Full HD).

Technische Umsetzung und Standards

Die technische Umsetzung von responsiven Layouts erfolgt mit Hilfe aktueller Webstandards. Zu nennen sind hier insbesondere CSS3 Media Queries, welche es ermöglichen, Art und Eigenschaften des betrachtenden Gerätes abzufragen und somit das Layout auf die jeweiligen Anforderungen hin anzupassen. Daneben setzt die Galileo Webagentur mit Twitter Bootstrap auf ein innovatives Framework, das auf diesen Standards aufbaut und grundlegende Frontend-Komponenten, wie z. B. ein responsives Spaltenlayout (Grid), zur Verfügung stellt.

  • HTML5: HTML-Grundgerüst, Dokumentstruktur, Semantik
  • CSS3: Layout / Formatierung, Media Queries
  • Twitter Bootstrap: Grid, Resets, Utilities etc.
  • jQuery: JavaScript-Bibliothek 
  • TYPO3 / Picturefill: Responsive Images

Browserunterstützung

Responsive Webdesign und die zugrunde liegenden Techniken basieren auf Webstandards wie CSS3, die von aktuellen Browsern unterstützt werden. Die folgend genannten Browser bieten diesbezüglich eine ausreichende Implementierung und werden üblicherweise in die Qualitätssicherung unserer Projekte miteinbezogen:

  • Microsoft Internet Explorer ab Version 9.0
  • Firefox, Opera, Safari, Chrome jeweils in aktueller und Vor-Version 
  • Mobilversionen der genannten Browser jeweils in aktueller Version  

Der technische Ansatz des Responsive Webdesign bedingt, dass ältere Browsergenerationen, insbesondere des Microsoft Internet Explorers, nicht oder nur eingeschränkt zur Darstellung responsiver Websites geeignet sind. Auf Wunsch sind jedoch individuelle Optimierungen möglich, die grundlegende Funktionen und Zugänglichkeit auch für diese Browser herstellen.