Responsive Webdesign

Tweet

Was ist Responsive Webdesign?

Zu Beginn von Webentwicklung und -Design kümmerten sich Entwickler sich fast ausschließlich um die Umsetzung für große Monitore an Computern oder Laptops. Mobile Endgeräte wie Tablets oder Smartphones waren zu dieser Zeit nicht weit verbreitet oder gar nicht auf dem Markt. Weil Ladegeschwindigkeiten sowie Bandbreiten in der Anfangsphase des Internets noch relativ schlecht waren, wurde sich bei Funktionsumfang und Design auf das zwingend Nötigste beschränkt. Mit schnelleren Internetgeschwindigkeiten und dem Start von DSL nahm auch die Nachfrage an komplexeren Features zu. Im Laufe der folgenden Jahre wurden Mobilgeräte zudem immer verbreiteter. Im Jahr 2022 bewegen sich bereits mehr Menschen über ihr Smartphone im Internet als über einen Computerbildschirm. Mehr und mehr Programmierer, Webentwickler, SEO-Spezialisten oder Agenturen fragten sich, wie sich tolle Designs, umfangreiche Features oder Suchmaschinenoptimierung optimal für die Touch-Bedienung sowie die viel kleineren Bildschirme bei Mobilgeräten optimieren lassen. Im Laufe dieser Entwicklung musste sich also das Webdesign und die Webentwicklung anpassen und ändern. Damit entstand die Technik des "Responsive Designs". Die bestehenden Websites, die für große Bildschirme und Bedienung am Computer optimiert waren, wurden um mobile Versionen ergänzt. So wurden ganze Webprojekte quasi auf kleinere Geräte "herunterskaliert". Da sich jedoch nicht alle Funktionen, Inhalte und Designs einfach so herunterrechnen lassen, brachte diese Vorgehensweise auch Probleme mit sich. Im Laufe der Zeit entstand deshalb eine neue Herangehensweise in der Webentwicklung: Der "Mobile First"-Ansatz. Hier werden nicht bestehende Websites für mobile Geräte optimiert, sondern direkt im ersten Schritt speziell für diese Anforderungen entworfen. Man könnte beim "Responsive Design" also auch von einer Übergangslösung sprechen.

---

Wie setzt man Responsive Webdesign in der Praxis um?

In der Regel dient eine bestehende Website als Basis für das Responsive Webdesign. Ziel des Vorgangs ist, eine für große Monitore entworfene Website so gut es geht für Mobilgeräte zu optimieren. Jedoch wird Responsive Webdesign auch für neue Projekte eingesetzt. Hier werden dann meist sogenannte "Viewport Breakpoints" definiert. Diese bestimmen, ab welchen Bildschirmbreiten sich die Darstellung ändern kann oder soll. Breakpoints können in CSS mit sogenannten Media-Queries erzeugt werden. Beim Responsive Design sollte so weit möglich auf fixe Breitenangaben in Pixeln verzichtet werden. Stattdessen arbeitet man in der Regel mit relativen Breitenangaben, beispielsweise in Prozent (%). So wird sichergestellt, dass Inhalte sich selbstständig an der Breite des Bildschirms ausrichten.

 

Welche Vorteile und Nachteile hat Responsive Webdesign?

Mit Media-Queries in CSS können zügig Erfolge erzielt werden. Allerdings stößt man hier oft an Grenzen, wenn man Versucht, große Inhalte auf kleinen Bildschirmen darzustellen. Auch komplexe Funktionen sind auf den kleineren Mobilgeräten oftmals schwierig umsetzbar. Es lohnt sich, stattdessen über "Mobile First" nachzudenken.