Eine schicke Website auf dem Desktop-Monitor gerät auf dem Smartphone oder Tablet oft aus der Fasson – und umgekehrt. Responsive Webdesign sorgt dafür, dass Ihr Webauftritt geräteübergreifend optimal dargestellt wird.
Notebooks, Tablets oder Smartphones — die zunehmende Verbreitung von mobilen Endgeräten mit ihren unterschiedlichen Bildschirmgrößen und -auflösungen verlangt für jedes Device ein individuelles Design. Webmaster sollten daher ihren Internet-Auftritt an die verschiedenen Gerätegrößen und Monitore anpassen.
Ein Desktop-Design beispielsweise – perfekt gestaltet für einen großen Bildschirm — ist auf einem Smartphone alles andere als gut lesbar. Kleine Schriftarten, große Dateien oder riesige Layouts sind im Mobilgeräte-Umfeld nicht gerade nutzerfreundlich. Füllt umgekehrt eine Überschrift auf einem mobilen Device den gesamten Bildschirm, verschwindet diese auf der Desktop-Version fast ins Unsichtbare. Um tatsächlich gut lesbar zu sein, muss die Schrift auf dem Desktop größer dargestellt werden.
Doch die Schrift ist nicht das einzige Problem. Zu bedenken ist auch, dass sich Bildschirme von Smartphones und Tablets auch in anderen Punkten unterscheiden: Neben den Pixel-Dimensionen rückte mit den Retina-Screens auch die physische Auflösung („pixels per inch“, ppi) in den Fokus. Außerdem werden diese Geräte nicht mit einer Maus, sondern mit dem Finger bedient. Am anderen Ende des Spektrums – im Desktop-Segment - sprengen große, hochauflösende Monitore die gewohnten Dimensionen.
Grundsätzlich sollte eine moderne Website heute auf Bildschirmbreiten von 320 Pixel bis mehr als 4.000 Pixel optimiert sein. Eine solche Optimierung hat nicht nur praktische und ästhetische Gründe, sondern auch finanzielle Aspekte: Wenn Webmaster ihren Auftritt nicht nutzerfreundlich anpassen, verlassen Besucher die Webseite möglicherweise und kommen nicht wieder.
Optimale Darstellung mit Responsive Design
Mit einer responsiven Website wird es nicht so weit kommen: Sie gewährleistet, dass Ihre Website auf allen Geräten mit unterschiedlichen Bildschirmen und Auflösungen gut aussieht und eine optimale Nutzererfahrung bietet. Die Inhalte werden auf allen Devices einheitlich, übersichtlich und leicht zugänglich dargestellt. Zudem können Besucher mit eingeschränkter Sehfähigkeit oder Motorik eine Responsive Website barrierefrei aufrufen.
Die Umsetzung von Responsive Design ist allerdings nicht ganz trivial. Die Regeln verlangen, dass Sie die Site für die kleinste Bildschirmabmessung entwerfen und die Layout-Änderungen dann mit zunehmender Bildschirmgröße fortsetzen sollten.
Die kleinsten Handy-Screens, die auf dem Markt sind, sind selten kleiner als 320 Pixel, so dass dies als zuverlässiges unteres Ziel dienen kann. Wenn Ihre Website bereits ab einer Breite von 320 Pixeln funktioniert, sollte sie auf jedem kleinen Gerät funktionieren. Die Obergrenze ist ein wenig schwieriger zu klären. Heutzutage sind ultra-breite Monitore keine Seltenheit mehr, daher sollten Sie die Möglichkeit einplanen, dass Ihre Website auf einem Monitor mit 4.000 und mehr Pixeln angezeigt werden kann.
Oft wird dies erreicht, indem eine maximale Breite für den gesamten Inhalt festlegt und dieser dann auf der Seite zentriert wird. Mit einer solchen Einstellung sind Ihre Inhalte auch bei sehr breiten Auflösungen gut darstellbar.
Umsetzung von Responsive Design
Responsive Webdesign lässt sich technisch mit Methoden wie Fluid Grids, flexiblen Bildern und CSS-Media-Queries realisieren. Bei korrekter Verwendung dieser Technologien wird das Layout der Website automatisch an die Bildschirmgröße des jeweiligen Geräts angepasst. Dies ermöglicht es, einen einzelnen Code zu verwenden, um die Website für verschiedene Geräte zu optimieren - anstatt für jedes Gerät eine separate Version der Website zu erstellen.
Fluid Grids nutzen keine pixelbasierten Größen, sondern prozentuale Angaben, mit denen das Design von Bildschirmgrößen vereinfacht werden kann. Flexible Bilder werden entsprechend der Bildschirmauflösung skaliert.
Mit Media Queries können Sie die Größe des Bildschirms abfragen, wenn der Benutzer auf Ihre Website zugreift. Die Layouts werden dann entsprechend den Abmessungen des Bildschirms angepasst und umstrukturiert.
Um die Schriftgröße der Textelemente einer Website an die Bildschirmfläche anzupassen, kommen verschiedene Schrifttechniken zum Einsatz. Als grundlegende Maßnahme nutzt man die CSS-Einheit rem („root element“). Sie bindet die Schriftgröße eines Elements proportional an das HTML-'root'-Element. Um alle Schriften konsistent zu skalieren, genügt es, die Schriftgröße des 'root'-Elements über CSS-Breakpoints anzupassen.
Eine leicht verständliche Einführung in das responsive Webdesign mit vielen Beispielen und Code-Fragmenten finden Sie bei IONOS. Dort erfahren Sie, wie Sie Schriften, Bilder und die Navigation responsiv gestalten. Der IONOS-Beitrag Tools für den Responsive-Test Ihrer Website präsentiert kostenlose Werkzeuge, mit denen Sie Ihre Website auf Responsive Design Eignung testen können. Um Ihre Website responsiv zu gestalten, müssen Sie aber gar nicht selbst Code schreiben können. Der IONOS Homepage-Baukasten ermöglicht Ihnen, eine responsive Website ohne Vorkenntnisse selbst zu erstellen. Sollten Sie ein erfahrener Web Professional sein und Webprojekte mit Wordpress umsetzen kann responsives Webdesign über Plugins, wie WP Mobile Menu, Max Mega Menu oder WPtouch erreicht werden oder Sie verwenden Wordpress Themes, die responsives Design unterstützen, was in der Regel der Fall ist.
FAZIT
Responsive Design ist eine wichtige Technologie in der Webentwicklung, die es ermöglicht, Websites an verschiedene Geräte und Bildschirmgrößen anzupassen. Das verbessert die Benutzererfahrung und erhöht die Barrierefreiheit im Web. Professionelle Webentwickler, denen ihre Besucher wichtig sind, sollten sich mit diesem Konzept auseinandersetzen und es in ihre Arbeit einbeziehen.