Was ist Responsive Design?

Responsive Design ist in den Letzten Jahren der Werbdesigner und Webentwickler immer mehr zum Trend geworden da es eine Menge von Vorteilen für den Nutzer bringt. Einer der vielen Vorteile ist die bessere Darstellung der Webseite auf mobile Geräte. Da Google mobil optimierte Internetseiten mit besseren Ranking belohnt profitieren auch die Besitzer.

Responsive Design wird auch Responsives Design oder abgekürzt RWD genannt.

Die gestalterischen und technischen Eigenschaften von Responsive Design lassen die Größe und Auflösung der Displays auf Laptops, Desktop-PCs, Tablets, Smartphones, E-Book-Readern und Fernsehgeräten anpassen. Da es mittlerweile diese zahlreiche Bildschirmauflösungen gibt und man nicht für jede Auflösung eine eigne Seite erstellen kann, kommt man an RWD nicht vorbei. Die Darstellung der Webseitenbereiche ( Navigation, Sidebar, Footer, Header usw.) werden automatisch, dem jeweiligen Gerät (Desktop/Computer, Tablet, Laptop, Handy) angepasst. Auch das CSS, die Usability, Mouse und Touch Events können sich teilweise ändern. Um eine Webseite Responsive zu erstellen werden die neuen Technologie Standards des Webs genutzt. Html5 Css3 und Javascript gehören zu diesen Technologien.

Webseiten mit mehreren Spalten können sich an die Breite des Viewports anpassen und werden bei kleineren Geräten untereinander angeordnet. Man kann die Bereiche auch ganz verschwinden lassen, sollte sich keine relevanten Informationen in Ihr befinden, wenn man will. Hintergründe und Grafiken können gegen kleinere getauscht werden um Ressourcen zu sparen oder lässt sie durch CSS oder Javascript skalieren. Menüs kann man ganz verschwinden lassen und zeigt sie nur an wenn sie wirklich gebraucht werden. Überschriften und Text passen sich auch der Größe an. Diese sollten aber immer die Lesbarkeit im Auge behalten.

Vorteile von Responsive Design.

Ein großer Vorteil von Responsive Design ist das nicht für jedes Gerät eine eigne Internetseite gebaut werden muss sondern nur noch eine, die sich jeder beliebigen Bildschirmgröße anpasst. Auf mobile freundlichen Seiten werden Informationen in den Vordergrund gerückt und der Nutzer kommt schneller ans Ziel. Neben einem besseren Ranking bei Suchmaschinen werden Nutzererfahrung und Ladezeiten ebenfalls optimiert. Man hat eine Zukunftsfähige Webseite da die Contentpflege wesentlich vereinfacht wird. Ein weiterer Vorteil von Responsives Design ist das die Gefahr von doppelten Links entfallen.

Es gibt aber auch einige Nachteile. Zum Beispiel muss man die Internetseite viel länger und öfter testen. Um eine Webseite die Responsive designt ist zu testen gibt es zahlreiche Tools auf die später eingehen werde. Um eine längere Entwicklungszeit aber auch um eine technisch komplizierte Umsetzung kommt man auch nicht vorbei. Letztendlich lohnt sich der Aufwand.

Was ist der unterschied zwischen einer Responsive gestalteten Webseite und einer mobilen Webseite?

Der unterschied zwischen einer mobilen Webseite und einer responsiven Webseite besteht darin das die Mobile Webseite noch ein extra Template haben. Früher war die Desktop Version der Webseite die normale Ansicht der Internetseite und es wurde für den mobilen Teil ein extra Template hinterlegt. Dieses Template war so optimiert das es sich für mobile Endgeräte eignete

Für das responsive Design musste man nur ein Template erstellen welches sich selbstständig an verschiedene Umgebungen anpasst. Responsives Design erkennt man in dem man den Browser größer und kleiner zieht. Die Elemente der Webseite werden sich immer der Umgebung anpassen.

Was passiert bei einer adaptiven Webseite?

Eine adaptive Webseite richtet sich nach dem Viewport des jeweiligen Endgerätes . Das Design wird an vorher festgelegten Breakpoints dem jeweiligen Gerät angepasst alles was dazwischen ist, bleibt statisch.

Was passiert bei einer liquiden Webseite?

Alle Webseiten elemente bleiben prozentual im gleichen Verhältnis. Wenn man zum Beispiel das Browserfenster kleine schiebt werden die Bereiche in der Webseite auch schmaler. Da eine Liquides Design keine Breakpoins besitzt bleiben alle Webseiten Bereiche an Ihrem Platz und die Anordnung gleich.

Zusammenfassend kann man sagen das Responsives Webdesign eine Mischung aus Adaptiven und Liquiden Design ist.

Wie sieht das in CSS im Responsive Webdesign aus?

Im CSS werden sogenannte Media Queries verwendet. Media Queries gehören zum CSS3 Konzept und steuern das bestimmte Eigenschaften nur vom Browser berücksichtigt werden wenn bestimmte Bedingungen erfüllt sind.

Auf folgende Bedingungen kann man zurückgreifen

• Orientierung der Gerätes ( ob es senkrecht oder Wagerecht gehalten wird)
• Breite und Höhe des Browsers
• Größe des Gerätes
• Bildschirmauflösung
• Eingabe

So kann man Beispielsweise:

• ID Eigenschaften ändern
• Klassen Eigenschaften ändern
• Elemente verschwinden lassen
• Schriftgrößen ändern
• Hintergründe tauschen und noch vieles mehr..