von Elisabeth

Was ist Responsive Design?

Dieser Artikel ist ursprünglich am 03. 06. 2014 erschienen.
Das ist eine ganze Weile her. Der Inhalt ist womöglich nicht mehr ganz aktuell.

Responsive bedeutet übersetzt etwa „reagierend, reaktionsfähig“. Der Begriff bezieht sich auf das Layout von Webseiten. Normalerweise sieht es immer gleich aus: Schaut man mit einem Smartphone die Seite an, sieht man dieselbe Aufteilung wie auf dem Desktop-Computer. Damit alles auf den kleinen Bildschirm drauf passt, verkleinert das Smartphone einfach alles.

Inhalte lesbar machen

Im Responsive Design wird Layout der Webseite flexibel angelegt. Die Inhalte passen sich automatisch an das Gerät an, mit dem die Seite aufgerufen wird. Alle Texte und Bilder werden so präsentiert, dass sie auf Anhieb gut lesbar sind.
Die Inhalte werden nicht verkleinert dargestellt, sondern der Code erkennt, mit welchem Gerät der Besucher unterwegs ist und liefert eine passende Darstellung aus. Die Webseite ist so mit allen Endgeräten gut lesbar und bedienbar.

Warum Eine Seite flexibel sein sollte

Der Anteil der mobilen Geräte ist sprunghaft angestiegen und es kommen jede Woche neue dazu. Diese Geräte verändern unser Verhalten und unsere Gewohnheiten. Wir arbeiten, spielen und surfen mit Tablets, Netbooks, Smartphones und Spielekonsolen. Die Besucher einer Webseite sind also mit vielen unterschiedlichen Geräten unterwegs: Morgens mit dem Smartphone in der S-Bahn und abends mit dem Tablet auf dem Sofa.

Damit die Inhalte (Texte, Bilder, Videos) auf allen Geräten gut lesbar sind, werden sie je nach Bildschirmgröße unterschiedlich angeordnet.

responsive-design-grafik1

Responsive Design: Nutzerfreundlich und zukunftssicher

  • Alle Texte sind mühelos lesbar (keine winzig kleinen Schriften)
  • Die Seite ist einfach navigierbar (kein Herumzoomen und Suchen)
  • Die Navigation und alle Links sind auf Touchscreens gut mit dem Finger anklickbar
  • Kein Besucher verlässt die Seite wieder, weil sie schlecht lesbar oder nicht navigierbar ist
  • Ihr müsst Euch keine Gedanken darüber machen mit welchen Geräten die Seite aufgerufen wird.
    Schon wieder ein neues iPhone? Kein Problem!

Die neuesten Artikel

Kommentare, die nichts mit dem jeweiligen Artikel zu tun haben, oder die weitgehend inhaltslos sind und keinen Mehrwert für andere Leserinnen und Leser bieten, veröffentlichen wir nicht.

2 Kommentare zu “Was ist Responsive Design?”

  • Der Artikel gibt eine schöne Übersicht über responsive Design und warum es heutzutage wichtig ist, dass Webseiten flexibel sind. Vor allem im Bereich mCommerce gibt es Optimierungsbedarf: immerhin kaufen nur 17% der Kunden trotz konkreter Kaufabsicht auch mobil ein ( http://rapidusertests.com/blog/2014/06/infografik-wie-hoch-ist-die-nutzerfreundlichkeit-im-m-commerce/
    ). Als Teil der richtigen mobilen Strategie kann responsive Design also zur Steigerung der Gesamt-Conversion beitragen.

  • Schön zusammengefasst, der wichtigste Vorteil einer Responsive Website ist meiner Meinung nach, dass es einfach das zukunftsträchtigste Webdesign ist. Egal wie viele Geräte mit unterschiedlichen Bildschirmgrößen auf den Markt kommen werden, eine Seite reicht und es muss im Gegensatz zu einer separaten Mobile-Version der Website auch nur einmal der Content gepflegt werden, was eine enorme Zeitersparnis bedeuten kann.
    Viele Grüße
    Anja

Die Kommentare sind geschlossen.

Hinweise zum Datenschutz
Wenn du einen Kommentar schreibst, wird dieser inklusive Metadaten zeitlich unbegrenzt gespeichert. Auf diese Art können wir Folgekommentare automatisch erkennen und freigeben, anstelle sie in einer Moderations-Warteschlange festzuhalten.
Wenn Besucher Kommentare auf der Website schreiben, sammeln wir die Daten, die im Kommentar-Formular angezeigt werden, außerdem die IP-Adresse des Besuchers und den User-Agent-String (damit wird der Browser identifiziert), um die Erkennung von Spam zu unterstützen. Aus deiner E-Mail-Adresse kann eine anonymisierte Zeichenfolge erstellt (auch Hash genannt) und dem Gravatar-Dienst übergeben werden, um zu prüfen, ob du diesen benutzt.
Die Datenschutzerklärung des Gravatar-Dienstes findest du hier.
Nachdem dein Kommentar freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.