Responsive Design

Design für mobile Endgräte

Websites die sich anpassen

Responsive Design bezeichnet die dynamische und korrekte Anpassung einer Website und ihrer Inhalte an die jeweilige Bildschirmgröße, auf der die Website gerade dargestellt wird. Kurz gesagt meint responsives Design nichts anderes, als dass eine Website auf jedem Gerät - Desktop, Laptop, Tablet, Smartphone - perfekt aussieht.

  • Responsive Design = Optimales & angepasstes Design für alle (auch mobile) Endgeräte

Durch responsives Design werden Inhalte vom Desktop auf mobilen Endgeräten nicht einfach kleiner skaliert, wie das bei einem fixed Design der Fall ist. Dann sind die Inhalte auf einem Smartphone oder Tablet nämlich nicht mehr gut lesbar. Nein, bei responsive Design werden die Inhalte und das Design neu angeordnet. So können die Inhalte auch auf kleinen Bildschirmen optimal angezeigt werden. Ein Hineinzoomen in die Website ist mit responsive Design und einer entsprechenden technischen Umsetzung nicht mehr notwendig und es entstehen keine seitlichen Scrollbalken, die die Usability verschlechtern würden.

Bei der technischen Umsetzung wird mit responsive Design der Website gesagt, ab welcher Bildschirmgröße die Inhalte z.B. untereinander und nicht mehr nebeneinander angeordnet werden sollen. Dies wird durch sogenannte Breakpoints gelöst.

Wir setzen dabei auf inhaltsorientierte Breakpoints. Das bedeutet, wir richten die verschiedenen mobilen Designs nicht nach den Bildschirmgrößen einzelner Geräte aus (Adaptive Design) sondern wir richten die verschiedenen Designs auf Grundlage des gegebenen Inhalts einer Website aus, sodass sich die Website fluide / flüssig verhält (Fluid Design). Dadurch ist es völlig egal, ob Sie die Website mit einem iPhone, iPad, Samsung, Motorola oder irgendeinem anderen mobilen Endgerät anschauen, die Website sieht immer perfekt aus und lässt sich auch auf jedem Gerät optimal bedienen.

Fixed Design = Starres Design

Design ohne Breakpoints und nur für eine bestimmte Bildschirmgröße optimal

Die Umsetzung der Website und der Inhalte erfolgt durch feste Pixelangaben für die Breiten und Höhen von Elementen. Dadurch passen sich weder das Design noch die Inhalte an die Bildschirmgröße an. Auf mobilen Endgeräten muss der User die Seite manuell durch Zoomen vergrößern oder verkleinern, was zu unschönen Scrollbalken und einer schlechten Bedienbarkeit der Website führt

Adaptive Design

Responsives Design mit gerätebedingte Breakpoints

Das responsive Verhalten einer Website ist auf bestimmte Gerätegrößen (z. B. iPhone, iPad, Android usw.) ausgelegt. Dies ist bei der Einführung neuer Geräte problematisch, da der dann Code aktualisiert werden muss und die Anzahl der verschiedenen Geräte mittlerweile nicht mehr sinnvoll ist.

Fluid Design

Responsive Design mit inhaltsorientierte Breakpoints

Die Inhalte der Website werden dann umgeordnet, sobald es der Inhalt erfordert. Die Breite der Inhalte ist dabei prozentual angegeben, sodass sich der Inhalt flexibel an den verfügbaren Platz anpasst. Die optimale Darstellung des Inhalts ist dabei unabhängig von irgendwelchen Geräten.

Responsives Design erfreut dabei nicht nur den User, weil die Usability höher ist, sondern auch Google, weil durch responsives Design mehr Barrierefreiheit gegeben ist.

Haben Sie eine Website, die auf mobilen Endgeräten nicht gut funktioniert oder noch nicht responsiv umgesetzt ist? Gar kein Problem. Responsive Design lässt sich auch im Nachheinein noch adaptieren. Gerne übernehmen wir die responsive Umsetzung Ihrer Website.

Sie haben Fragen?

Wir haben Antworten! Rufen Sie uns einfach an unter der 07142/98 90 90 oder nehmen Sie über unser Kontaktformular mit uns Kontakt auf.

Kontakt aufnehmen