Immer wieder fragen mich Kunden, was dieses responsive Design eigentlich ist, und warum man das braucht. In diesem Artikel (und natürlich sonst beim Kunden auch) beantworte ich diese Frage und gebe eine einfache Erklärung – ohne technische Details – mit Beispiel dazu wie es funktioniert. Ihr erfahrt außerdem warum es so wichtig ist responsive Design zu nutzen, und ob es Alternativen dazu gibt. Am Schluss zeige ich euch, wie ihr ganz einfach herausfinden könnt, wie Websites auf unterschiedlichen Geräten mit verschiedenen Auflösungen dargestellt werden.

Was ist responsive Webdesign?

Responsive bedeutet auf Deutsch „reagierend“, „reaktionsfähig. Beim responsive Webdesign (RWD) handelt es sich um ein dynamisches und flexibles Design, das sich an die Anforderungen des jeweiligen Endgerätes anpassen kann. So kann die Darstellung der Webseite durch Verschieben und Umstrukturieren einzelner Elemente für das verwendete Gerät optimiert werden. Vereinfacht gesagt sieht die Website auf einem PC betrachtet anders aus, als z. B. auf einem Handy, obwohl es sich um genau die gleiche Website handelt.

 

Wie funktioniert responsive Webdesign?

Die technischen Details lassen wir hier außen vor. Wichtig zu wissen ist, dass die Website erst im Internetbrowser des jeweiligen Nutzers „zusammengebaut“ wird. Je nach Auflösung des Gerätes ordnen sich die Elemente der Website dynamisch so an, dass die Seite auf dem jeweiligen Gerät immer optimal dargestellt wird. Dazu kann es nötig sein, mehrere Designs zu erstellen. Elemente der Website sind z. B. Inhalte wie Texte, Tabellen und Grafiken sowie strukturelle Elemente, wie beispielsweise die Navigation.

Hier seht ihr als Beispiel die Darstellung einer responsiven Seite am PC und in der mobilen Ansicht. Mobil rutscht das Logo und die Suche an eine andere Position. Das Menü wird eingeklappt und die Sidebar wandert ebenfalls nach unten.

 

Screenshot Responsive Webdesign

 

Screenshot_RWD_2BSklein

 

Warum ist responsive Webdesign so wichtig?

Die dynamischen Anforderungen an eine gute Webpräsenz sind in der letzten Zeit sehr gestiegen. Auf der einen Seite werden die großen Rechner immer leistungsstärker und bieten so Spielraum für im großen Stil ausgebaute Webauftritte, auf der anderen Seite ist die Nutzung mobiler Endgeräte sprunghaft angestiegen. Allein im 1.Quartal 2014 wurden weltweit 280 Millionen Smartphones verkauft, im Laufe des Jahres wird laut einer Studie der IDC die 1-Milliarden-Grenze überschritten.

Die Geräte, mit denen man heutzutage ins Internet gehen kann, werden immer zahlreicher und haben alle unterschiedliche Bildschirmgrößen und Auflösungen. Auch die Eingabemöglichkeiten zur Bedienung variieren von klassischer Tastatur über Computermaus und Touch-Bedienung bis hin zur Sprachsteuerung. Typische Geräte (Devices) sind PCs, Smartphones, Tablets, Laptops und Netbooks, aber auch Smart-TVs (internetfähige Fernseher) und E-Book-Reader.

Es kann sein, dass eine Website, die auf dem Desktop-PC toll aussieht, auf dem Handy mit kleinerem (Touch)-Display fast nicht bedienbar ist. Übermäßiges zoomen und scrollen stören, und die Inhalte bestimmter Menüpunkte sind manchmal gar nicht mehr zu erreichen.

Um allen Webseitenbesuchern – unabhängig von der Auflösung des benutzten Gerätes – ein positives Nutzungserlebnis bieten zu können, ist deshalb der Einsatz von responsive Webdesign nötig.

 

Gibt es Alternativen zu responsive Webdesign?

Als Alternative zu responsive Webdesign stellen manche Webseitenbetreiber eine zweite Website für mobile Geräte zur Verfügung. Doch dies kann zu einigen Problemen führen:

 

  • Bei mobilen Webseiten wird oft Inhalt gekürzt und somit nur ein Teil der Website angezeigt.
  • Die mobile Seite hat eine andere URL (Webadresse). Für die Suchmaschinenoptimierung ist eine gleichbleibende URL wichtig. Zudem werden Links oft weiterverbreitet (u. a. in sozialen Netzwerken wie Facebook, Twitter oder Google+), und wenn der Link zu einer mobilen Webseite auf einem Desktop-PC aufgerufen wird, hat man die Darstellung der mobilen Seite auch am PC. Dies macht einen sehr schlechten Eindruck. Google nennt dies „faulty redirect“, und rät Webmastern dringend, responsive Webdesign einzusetzen (mehr Infos hier).
  • Die Anzeige der mobilen Seite hängt von der Art des Geräts ab. Eine strenge Trennung zwischen mobil und stationär ist manchmal schwierig. Deshalb ist es sinnvoller, sich stattdessen an der Auflösung des Geräts zu orientieren (wie es responsive Webdesign macht).
  • Eine zusätzliche mobile Seite bedeutet auch zusätzlichen Pflegeaufwand. Bei der Verwendung von RWD hingegen reicht eine einzige flexible Version der Webseite aus.

 

Welche Websites sind responsive?

 
Heute ist es „Best Practice“ responsive Design zu verwenden. Bei vielen Websites ist das leider noch nicht der Fall. Und wie man das responsive Design umsetzt, bleibt dem Entwickler überlassen. Hier muss der Kunde aufpassen. Manche Anbieter werben mit responsivem Design, sobald eine Änderungsstufe eingebaut ist, und die Darstellung ist trotzdem unvorteilhaft. Deshalb empfiehlt es sich, hier genau nachzufragen und das Ergebnis zu prüfen. Dies ist beispielsweise mit einem Responsive Tester möglich.
 
Ist Ihre Website responsive? Tester

 

Pin It on Pinterest