Responsive Design

Das Internet ist überall verfügbar. Entsprechend gibt es vielfältige Möglichkeiten, um ein Webangebot zu nutzen. Große 27“-Displays, kleinere Netbooks, Tablets und Smartphones. Bei der Vielfalt internetfähiger Geräte stellt sich folgende Frage: Wird eine Website auf all diesen Oberflächen korrekt dargestellt und lässt sie sich optimal bedienen? Mit Responsive Webdesign werden die Grenzen zwischen unterschiedlichen Auflösungen fließend.

Lösungswege mit Responsive Webdesign

Mobiles Internet wird die Desktop-Nutzung schon bald überholen. Ist Ihre Website bereit für diese Ära? Bleiben Gestaltung und Funktionalität für die verschiedensten Bildschirmauflösungen erhalten? Die Probleme beginnen bereits bei Schriftgrößen. Auf dem PC perfekt dargestellt, auf einem mobilen Endgerät jedoch kaum lesbar. Eine Antwort auf diese Erfordernisse liefert das Responsives Webdesign, dass als Prinzip in einen User-Centered-Design-Prozess integriert ist. Mit dieser Gestaltungsmethode erkennt eine digitale Anwendung automatisch, auf welchem Gerät sie dargestellt werden soll und passt sich diesem Rahmen an. Daher auch die Bezeichnung „Responsive Webdesign“: eine Gestaltung, die reagiert und sich anpasst.

Wie Responsive Webdesign funktioniert

Inhalte und Elemente wie Texte, Bilder oder Interaktions-Buttons bilden die Basis einer Website. Das Layout bestimmt deren Position, Größe und Aussehen. Responsive Webdesign setzt auf aktuelle HTML5- und CSS3-Standards, um das Layout einer Website an die benötigte Auflösung anzupassen. Damit Responsive Webdesign lückenlos funktioniert, berücksichtigen wir die Nutzung bereits in der Konzeptions- und Planungsphase. Welche Auflösungen sollen gezielt angesprochen werden, wie sollen die Inhalte jeweils dargestellt werden, wie verhalten sich User-Interface-Elemente?

Die Grundlage für skalierbare und reaktive Inhalte bietet ein Responsive Grid System. Ein Beispiel: betrachtet man eine Website auf einem großen Monitor mit 1.600 Pixel Breite, zeigt das Layout eine dreispaltige Darstellung des Inhalts. Nimmt die Auflösung nun ab, verliert diese Layout-Variante ihren Sinn. Je kleiner das Endgerät, desto weniger Raum steht zur Verfügung. Mit Responsive Design werden Content-Blöcke skaliert und völlig neu angeordnet. Aus der dreispaltigen Darstellung wird schließlich eine einspaltige Version. Gleichzeitig werden Schriftgrößen, Bildqualität, Navigations-Bereiche und interaktive Elemente angepasst.


Responsive Websites

Der Fokus auf die browser- und geräteübergreifende Optimierung der Website-Inhalte für jede Bildschirmauflösung bietet den Besuchern Ihres Webangebots eine optimale Nutzererfahrung. Überzeugen Sie sich von unserer Kompetenz bei der Umsetzung von Webseiten im Responsive Design in unserer Fallstudien-Datenbank.


Technischer Hintergrund des Responsive Webdesign

Der technische Knotenpunkt für das Responsive Design sind CSS-Media-Queries. Welche Schriftgröße soll eine Überschrift beim Betrachten auf dem Tablet aufweisen? Soll sich die Bildqualität auf Retina-Displays verändern? Mit Hilfe des Grid-Systems und CSS-Media-Queries lässt sich nahezu jedes Element einer Website ansteuern und verändern. Noch mehr Möglichkeiten für die Anpassung des Nutzererlebnisses bieten JavaScript-Frameworks.

Gestaltung, Technologie und Usability lassen sich auf vielfältige Weise in Einklang bringen. Es gibt flexible Layout-Raster, deren Breitenverhältnisse gleich bleiben und sich an die Breite des Endgeräts anpassen. Darüber hinaus stehen Varianten wie Mostly Fluid und Column Drop zur Verfügung, bei denen Spalten zu Gunsten der Lesbarkeit untereinander angeordnet werden. Völlige Freiheit bietet ein Layout-Shift, bei dem sich die komplette Darstellung verändert. Bei der Entwicklung eines Responsive Design berücksichtigen wir so die jeweiligen Anforderungen der Endgeräte. So muss beachtet werden, dass Hover-Elemente auf Touch-basierenden Endgeräten nicht mehr funktionieren. Für Klickflächen sollte wesentlich mehr Raum zur Verfügung stehen. Das Layout muss schließlich übersichtlich bleiben, ggf. Grundsätze des barrierefreien Webdesigns integrieren und intuitiv im Sinne einer optimalen Nutzererfahrung bedienbar sein.

Testing: lückenlose Funktionalität

Bei der Betreuung von Projekten mit Fokus auf Responsive Design kommen stets umfangreiche Tests zum Einsatz. So möchten wir sicherstellen, dass Responsive Designs bei jeder Auflösung, jedem Gerät und über Browsergrenzen hinweg perfekt funktioniert. Unsere Tests betreffen auch unscheinbare Details wie das Ladeverhalten und Ladezeit von Bildern und Scripten auf mobilen Endgeräten.Wir haben dazu ein umfangreiches Set an eigenen Testgeräten aufgebaut, um das Testing möglichst realitätsnah zu gestalten.

Mit uns zum Responsive Design Ihrer Webseite!Unsere Leistungen
  • Konzeption und Gestaltung von Resposnvie Designs
  • Testing für Geräte- und Browser-Kompatibilität
  • Responsive-Design- und Usability-Beratung
  • Konsistente Gestaltung im Sinne des Corporate Designs
  • Weiterentwicklung & Support
Interesse geweckt?Unser Responsive Design Angebot

Sie wünschen weitere Informationen oder ein unverbindliches Angebot? Setzen Sie sich jederzeit mit unseren Responsive Design Experten in Verbindung.

Jetzt Angebot einholen

Weitere Kontaktmöglichkeiten

Kontaktieren Sie uns