Vorteil Responsive Webdesign

Menschen nutzen heutzutage viele verschiedene Endgeräte, um in Internet zu Surfen. Internetfähige HD-Fernseher sind dabei natürlich deutlich größer, als das Display eines Smartphones oder Tablets. Die Nutzung des Internets auf wechselnden Geräten mit unterschiedlich großen Bildschirmen macht eine flexible Anpassung der Seiteninhalte an die jeweilige Größe des Displays erforderlich. Ein PC-Monitor hat in der Regel eine Auflösungen von 1024 Pixeln und mehr. Ein Smartphone beginnt in der Regel bei 320 bis 480 Pixeln. Ein Tablet-PC kommt auf 768 bis 1024 Pixel, HD fähige Geräte auf sogar noch mehr.

Technologie mit Zukunft

Die Zahl entsprechender Nutzer wird in den kommenden Jahren weiter stark steigen. Der Trend der mobilen Internetnutzung setzt sich fort. für Firmen wird es daher zunehmend wichtiger, dass alle Inhalte und Funktionen ihrer Webseiten auf allen Endgeräten in vollem Umfang nutzbar sind. Nur so wird gewährleistet, dass weiterhin alle Internet-Nutzer bzw. Kunden erreicht werden können. Auf der Suche nach der technischen Umsetzung dieses Anspruchs hat sich das Responsive Webdesign als Vorteil erwiesen.

Bedeutung von Responsive Webdesign – Design für verschiedene Displays

Begriff und Bedeutung: Responsive Webdesign bedeutet sinngemäß "reagierendes oder reaktionsfähiges Webdesign" – also ein flexibles Design für verschiede Displays. Reagiert wird im technischen Sinn durch Anpassung der Seiteninhalte an die jeweilige Auflösung eines Displays. Aufbau und Inhalt einer Webseite werden anpassungsfähig gestaltet und auf Bildschirmen jeder Größenordnung übersichtlich und nachvollziehbar dargestellt. Das Layout von Websites sollte sich auf technisch möglichst einfache Art auch an kleine Bildschirmauflösungen optimal anpassen. Die Bedienung von Navigation und Menüs ist auch bei einem Smartphone ohne Einschränkungen möglich. Die optimale Darstellung auf größeren Monitoren wird dadurch nicht beeinträchtigt.

Responsive Webdesign – Best Practice in der Agentur anatom5

Im Rahmen der Anforderungen an barrierefreie Internetauftritte haben wir bei anatom5 schon früh damit begonnen, flexible Internetseiten zu entwickeln. Diese Internetseiten konnten bei 800 x 600 Pixel ebenso problemlos dargestellt werden, wie bei 1024 Pixeln und darüber. Die 800 x 600 Pixel waren eine explizite Forderung der BITV in der ersten Fassung. Diese flexiblen Layouts (auch Liquid-Layouts genannt) waren defakto die Vorläufer der heutigen Responsive Webdesigns (manchmal auch als Abkürzung RWD). Fast alle unsere von der Aktion Mensch ausgezeichneten Seiten waren schon 2008 in dieser Form Liquid.

Responsive Webdesign: Media Queries, Endgeräte, Testen

CSS3 (Cascading Style Sheets Level 3) in Verbindung mit Media Queries hat diese alte Vorgehensweise für Liquid-Layouts nochmal auf ein neues Niveau gehoben. Übersetzt bedeutet der Begriff CSS "stufenförmige Gestaltungsmuster". Bei den Media Queries handelt es sich um eine Erweiterung der Möglichkeiten von CSS3. Anstatt ein einzelnes "Gestaltungsmuster" pauschal für alle "Bildschirme" festzulegen, kann man mithilfe von Responsive Webdesign die Ausgabe des Screendesigns gezielt für bestimmte Bildschirmbreiten festlegen (Breakpoints). Auf diese Weise lassen sich von Desktop bis Mobile fast perfekte Darstellungs-Ergebnisse erzielen. Es hat sich bewährt, drei bis vier Breakpoints festzulegen, an denen sich das Layout anpasst. So ändert sich bei ähnlichen Bildschirmgrößen nur wenig an der Anordnung der Elemente einer Webseite. Werden aufgrund der Bildschirmauflösung aber Breakpoints erreicht, bewirken diese einen Umbruch der dargestellten Elemente (ähnlich, wie beim sogenannten Adaptive Layout, allerdings bewegt sich RWD zwischen den Breakpoints flexibel, das ist der Unterschied). Ein gutes Einfühlungsvermögen in die Perspektive der Nutzer ist bei der Arbeit mit Media Queries dabei ebenso hilfreich, wie ein umfangreiches Testlabor mit einer Vielzahl von verschiedenen mobilen Endgeräten. Denn Testen und Qualitätssicherung sind enorm wichtig. Dann lassen sich auf allen Bildschirmgrößen annähernd optimale Darstellungen erreichen. Gleich bleibende Usability auf allen Gerätetypen garantiert.

Responsive Webdesign Testen und Simulieren

Sehen Sie sich doch einmal die flexiblen Darstellungen, die das Responsive Webdesign auf unterschiedlichen Endgeräten ermöglicht, als Simulation an. Nutzen Sie dafür Seiten, die wir bereits responsive umgesetzt haben. Möglich sind auch Online Tests, bei denen Sie die Wirkung der verschiedenen Auflösungen einzeln prüfen können, wenn Sie nicht genug unterschiedliche Endgeräte zum Testen zur Verfügung haben. Testwerkzeuge, wie die Browsererweiterung "Responsive Webdesign Tester" für Google Chrome, erleichtern die Überprüfung. Gerne zeigen wir Ihnen anhand von Beispielen, wie Sie Responsive Webdesign testen können - gerne auch im Rahmen eines Erstgesprächs kostenlos.

Beispiele Responsive Webdesign:

www.nettetal.de
www.kranenburg.de
www.kleve.de

Pressemeldungen Responsive Webdesign:

Beispiel für Responsive Webdesign: Hünxe Webseite
Beispiel für Responsive Webdesign: Nettetal Webseite
Beispiel für Responsive Webdesign: Kleve Webseite