Responsive Webdesign
Unter dem Begriff responsive Webdesign (oft auch RWD oder responsive Design) versteht man die technische und gestalterische Realisierung einer Webseite, die sich an die Gegebenheiten des jeweils genutzten Endgeräts anpasst, z. B. einem Tablet oder einem Smartphone.
Die Gestaltung des Layouts orientiert sich an den Anforderungen des jeweiligen Gerätes, mit dem die Website, der Online-Shop oder die Applikation betrachtet wird. Die Navigation, Texte, Bilder, Videos und Schaltflächen werden an die jeweilige Ausgabegröße angepasst, um den Nutzer die Bedienung zu erleichtern. Berücksichtigt werden dabei auch die unterschiedlichen Eingabemethoden von Maus (klicken) und Touchscreen (tippen). Damit Texte auch auf kleineren Displays gut lesbar sind, sollte sich die Schriftgröße entsprechend anpassen. Auch Schaltflächen und ihr Abstand zu umgebenden Elementen sollten größer sein, um die Benutzung mit der Hand zu vereinfachen. Navigationen werden auf kleineren Geräten aus Platzgründen häufig nicht direkt eingeblendet, sondern oft erst über das Antippen eines Menü-Icons (i. d. R. in Form eines Hamburger-Menü-Icon ) sichtbar.
Unterschied zur mobilen Webseite
Historisch betrachtet ist die Desktop-Ansicht einer Webseite die „normale“-Ansicht. Mit der Einführung des ersten iPhones im Jahr 2007 hat sich die Internetnutzung stark verändert. Damit wurde das Thema mobile Internetseite immer wichtiger. Zu Beginn wurde für Nutzer mit Mobilgeräten noch ein zweites Template für eine „mobile“-Ansicht erstellt und parallel betrieben. Die Webseite hat dann entweder selbst erkannt, dass es sich um ein mobiles Gerät handelt, oder der Nutzer konnte über einen Hinweis mit Link direkt auf die mobile Ansicht wechseln.
Wenn ein Website-Layout responsive ist, wird nur ein Template erstellt und über verschiedene Breakpoints (Media Queries) darin, passt es sich automatisch an die Auflösung und das Gerät des Nutzers an.
Testen lässt sich das in der Regel auch durch das Verändern der Größe eines Browser-Fensters. Bei einer eigenen mobilen Ansicht würde sich die Ansicht nicht verändern oder erst nach einem erneuten Aktualisieren der Webseite in die mobile Ansicht wechseln.
Unterschied zum adaptiven Webdesign
Im Gegensatz zum responsiven Webseiten-Layout beschränkt sich die Anpassung beim Adaptive Layout auf den Wechsel zwischen vordefinierten statischen Ansichten, z.B. Smartphone, Tablet, Desktop (klein, mittel, groß).
Ihre Webseite ist noch nicht responsive?
Ich erstelle Ihnen gerne eine neue responsive Webseite für Ihr Projekt. Wählen Sie einfach ein Webseiten-Paket in der Übersicht oder stellen Sie eine Individualanfrage.