Was ist Responsive Webdesign?

Responsive Webdesign wird das auf mobile Endgeräte reagierende Webdesign genannt. Es beinhaltet sämtliche technische und gestalterische Maßnahmen zur Erstellung von Internetseiten, wodurch diese auf die spezifischen Eigenschaften und Anforderungen des entsprechenden Gerätes, in erster Linie moderne mobile Telefone und Tablets, optimal reagieren können.

Warum Responsive Webdesign?

Immer mehr Nutzer verwenden für den Aufruf von Webseiten Smartphones und andere mobile Endgeräte, der Marktanteil steigt ständig. Responsive Webdesign ist deshalb zu einem sehr wichtigen Thema geworden. Es handelt sich dabei um einen Ansatz, bei dem der Designer eine Webseite erstellt, die je nach Art des Geräts, durch das diese aufgerufen und betrachtet wird, flexibel und selbstständig reagiert bzw. vor allem die Größe ändert. Damit spielt es keine Rolle mehr, ob ein großer Desktop Computer Monitor, ein Laptop oder Geräte mit ziemlich kleinen Bildschirmen wie Smartphones und Tablets verwendet werden. Responsive Webdesign ist zu einem unverzichtbaren Werkzeug für alle geworden, die eine digitale Präsenz haben. Mit dem zunehmenden Wachstum des Einsatzes von Smartphones, Tablets und anderen mobilen Computergeräten verwenden immer mehr Menschen immer kleinere Bildschirme, um ihre Webseiten anzuzeigen. Außerdem gibt es noch die bedeutsame Motivation, den Anforderungen von Google zu genügen (Mobile First). Da immer mehr kleine Unternehmen ihre mobile Präsenz erhöhen, müssen ihre Websites, ihr E-Commerce, die Social Media Seiten und zahlreiche andere Ressourcen für alle denkbaren Geräte und User leicht zugänglich sein. Der Zweck dieses Designs besteht also darin, eine Seite zu kreieren, die unterschiedlich reagiert, wenn sie auf Geräten unterschiedlicher Größe angezeigt wird.

Responsive Webdesign – für flexible und reaktionsstarke Seiten

Wenn eine traditionelle (fixe) Website beispielsweise auf einem Desktop Computer angezeigt wird, werden z. B. drei Spalten angezeigt. Wenn man jedoch dasselbe Layout auf einem kleineren Tablet anzeigt, wird man möglicherweise gezwungen, horizontal zu scrollen, was den Benutzern nicht gefällt. Oder Elemente sind möglicherweise nicht sichtbar oder sehen verzerrt aus. Die Auswirkung wird auch durch die Tatsache erschwert, dass viele Tablets entweder im Hochformat oder zur Querformatansicht seitlich gedreht angezeigt werden können. Auf einem winzigen Smartphone Bildschirm können Websites noch schwieriger zu sehen sein. Große Bilder können das Layout sozusagen „beschädigen“. Websites können auf Smartphones nur langsam geladen werden, wenn sie grafikintensiv sind. Wenn eine Site jedoch ein responsives Design verwendet, wird die Tablet Version möglicherweise automatisch so angepasst, dass nur zwei Spalten angezeigt werden. Auf diese Weise ist der Inhalt lesbar und einfach zu navigieren. Auf einem Smartphone wird der Inhalt möglicherweise als einzelne Spalte angezeigt, möglicherweise vertikal gestapelt. Eventuell kann der Benutzer auch darüber streichen, um andere Spalten anzuzeigen. Die Größe der Bilder wird geändert, anstatt das Layout zu verzerren. Mit Responsive Design passt sich die Website automatisch an das Gerät an, auf dem der Betrachter es sieht. Responsive Sites arbeiten fließend – alle Seitenelemente haben eine proportionale Größe und keine Pixel. Wenn man also drei Spalten hat, würde man nicht genau sagen, wie breit jede von ihnen sein soll, sondern wie breit sie im Verhältnis zu den anderen Spalten sein sollen. Spalte 1 sollte die Hälfte der Seite einnehmen, Spalte 2 sollte 30% einnehmen und Spalte 3 sollte beispielsweise 20% einnehmen. Die Größe von Medien wie z. B. Bildern wird ebenfalls relativ geändert. Der Webdesigner muss außerdem immer auch den „Touch“ der User berücksichtigen. Auf Desktop Computern verfügt der Benutzer normalerweise über eine Maus zum Navigieren und Auswählen von Elementen. Auf einem Smartphone oder Tablet verwendet der Benutzer meistens die Finger und berührt den Bildschirm. Was mit einer Maus leicht auszuwählen scheint, kann mit einem Finger an einer winzigen Stelle auf einem Bildschirm schwer auszuwählen sein. Auf Mobilgeräten kann es oft sinnvoll sein, weniger Grafiken anzuzeigen (Download Geschwindigkeit) als für Desktop Ansichten, damit das Laden einer Website auf einem Smartphone nicht zu lange dauert. Größere Anzeigen müssen hierzu möglicherweise gegen kleinere ausgetauscht werden. Beim Responsive Webdesign folgen Inhalte, Funktionen und Darstellung der jeweils verwendeten Bildschirmauflösung. Der strukturelle Aufbau von Seiten passt sich dem mobilen Endgerät an – es reagiert und korrespondiert gleichermaßen. Somit können im Idealfall auf jedem Gerät die Inhalte im ganzen Umfang und rasch von den Besuchern aufgenommen werden.