Responsive Webdesign

1. Responsive Webdesign

Responsive Webdesign oder responsives Webdesign zählt zu den wichtigsten Internetentwicklungen der letzten Jahre. Es erlaubt die übersichtliche, geräteübergreifende Darstellung und Verbreitung einer Internetseite vom Desktop Computer bis hin zum Smartphone.

pc, tablet, smartphone

2. Die Gegenwart und Zukunft des Internets

Als das Internet und speziell das Word Wide Web mit immer mehr Internetseiten zunehmend populärer wurden, gab es neben Schreibtisch-PCs oder Notebooks noch keine weiteren Geräte mit Internetzugriff. Auf den Bildschirmen war viel Platz für die Anzeige von Internetseiten und diesen haben Webdesigner für ihre Entwürfe voll ausgenutzt.

Unterschiedliche Auflösungen der Bildschirme veränderten die Seitendarstellung zwar, aber dennoch genügte damals ein statisches Webdesign für die Darstellung auf allen Endgeräten. Das sollte sich jedoch bald ändern.

2.1 Das Smartphone-Zeitalter

Nach der Jahrtausendwende erreichte das World Wide Web dann auch mobile Geräte. Für die Anzeige ganzer Webseiten reichten die mobilen Übertragungsgeschwindigkeiten noch nicht und so entstanden erste mobile Webdesigns im WAP-Standard parallel zur Desktop Version einer Homepage.

Nur wenig später etablierten sich erste Handys mit Browser und besseren Bildschirmen dann endgültig neben Endgeräten wie PC oder Notebook als Zugriffsgeräte auf das Internet und seine Seiten.

Das Problem: Die Layouts der Seiten machten die Nutzung zunächst sehr umständlich. Nutzer mussten viel scrollen und ständig in die Seiten hinein- oder herauszoomen. Eine Lösung war bald gefunden: Responsive Webdesign.

Das sollte weltweit in den nächsten Jahren die Internetnutzung fundamental verändern. 2020 erfolgten dann über die Hälfte der Seitenaufrufe im Netz über ein Handy oder Tablet – Tendenz steigend. Damit wurde Responsive Design von Internetseiten endgültig zu einem Must-have für gegenwärtigen und zukünftigen Erfolg im Internet.

3. Definition und Entstehung des Responsive Webdesign

Responsive Webdesign bedeutet sinngemäß: reagierende Webseitengestaltung. Die Idee dazu stammt von dem amerikanischen Webdesigner Ethan Marcotte. 2010 veröffentlichte er erste Ansätze für eine responsive Darstellung von Internetseiten. Daraus entwickelte sich schnell eine allgemeine Definition für responsives Webdesign:

3.1 Was ist Responsive Design?

Kurz gesagt: Damit ist die Anpassung aller Inhalte an mobile Geräte gemeint, so dass der Aufbau einer Website auf dem PC genauso übersichtlich erscheint wie auf Smartphones oder Tablets.

Die Maßnahmen sorgen dafür, dass sich die Inhalte nicht verzehren oder überlagern und ein klares Design die Nutzerfreundlichkeit erhöht.

Beim Responsive Webdesign wird das Layout von Webseiten automatisch auf den Bildschirm des genutzten Endgeräts angepasst, für eine durchgängig hohe User Experience auf jedem Gerät mit Internetbrowser.

Im Gegensatz dazu steht das starre Webdesign, welches praktisch aber kaum noch Bedeutung hat. Der Fortschritt des responsiven Designs zeigt sich schnell bei einem näheren Blick auf den Aufbau und die Funktionsweise einer Website.

4. So funktioniert eine Webseite

Das Webseitendesign wird immer auf einem Grid beziehungsweise Raster mit Reihen und Spalten aufgesetzt. In diese können dann später die inhaltlichen Elemente eingesetzt werden. HTML Code setzt diese Struktur für die Browserdarstellung um.

Die Stylesheet-Sprache CSS ergänzt die Layouts oder formt die Anzeige von Inhalten. Javascript ergänzt das Code-Gerüst bei den allermeisten Internetseiten zusätzlich für dynamische Elemente.

Responsive Webdesign führte zusätzlich sogenannte Media Queries ein. Diese fragen beim Seitenaufruf blitzschnell ab, auf welchem Endgerät die Seite aufgerufen wird und sammeln Werte wie Bildschirmauflösung oder -größe ein und passen die Seitendarstellung entsprechend an.

Dabei gelten zusätzlich bestimmte Grenzen oder Breakpoints mit gängigen Bildschirmgrößen in Pixel gemessen: Sie reichen von 480 bis zu 1024+ Pixel für die Displays aller Endgeräte. Altes oder statisches Webdesign nutzte ausschließlich Grids mit einem festen Breakpoint.

Beim responsive Webdesign kommen die Grids dagegen flexibel zum Einsatz. Sie arbeiten mit relativen Werten und können so jede Anzeigefläche auf der Website prozentual an den Bildschirm von Smartphones und Tablets anpassen.

4.1 Beispiele für eine responsive Bilddarstellung

  • Besitzt das Endgerät eine Pixelbreite von 1024 (Desktop PC), wird das Bild oder eine Grafik vollständig auf der Breite ausgespielt.
  • Meldet das Endgerät dagegen nur 480 Pixel Breite (Handy), zeigt das Responsive Design Bilder mit 50 Prozent reduzierter Breite, damit es vollständig auf das kleinere Display passt.

In der Praxis funktioniert diese Anpassung sogar noch präziser und berücksichtigt zusätzlich den sogenannten Viewport – den Bereich im Browser, der für die Anzeige von Websites zur Verfügung steht. Außer im Vollbildmodus fällt er um einiges kleiner aus als die Bildschirmgröße und benötigt deswegen eine eigene Umsetzung beim Layout.

5. Drei Basics für Websites mit responsive Design

  • Flexible Layout Grids
  • Flexible Schriftgrößen
  • Flexible Bilder beziehungsweise Bildgrößen

Das ist die Grundausstattung für Responsive Webdesign. Im Layout erhalten die wichtigsten Elemente den Vorzug, um schnelle Ladezeiten auch bei schlechter Mobilfunkverbindung zu ermöglichen.

Text oder die Schriftgröße braucht daneben prozentuale Anpassungsmöglichkeiten, um sich verschiedenen Bildschirmgrößen anpassen zu können. Bilder können Sie alternativ auch in mehreren Auflösungen hinterlegen. HTML 5 und CSS 3 Media Queries wählen dann automatisch die passende Bildgröße aus.

5.1 Responsive Design testen

Das geht ganz einfach! Neben Notebook oder PC benötigen Sie dazu nur ein paar Mobilgeräte: Tablets und Handys in verschiedenen Größen. So sehen Sie Ihre Website, wie Sie Ihre Besucher mit diversen Geräten sehen würden.

Auf dem Tablet oder einem PC haben Sie zusätzlich noch die Möglichkeit, die Anzeige in unterschiedlichen Fenstergrößen des Browsers auszuprobieren. Alternativ gibt es kostenlose Onlinetools wie Am I Responsive?, die schnell ein Responsive Webdesign prüfen und Ihnen beispielhafte Ansichten auf mobilen wie stationären Geräten anzeigen.

6. Mobile first als zweites wichtiges Argument für Responsive Webdesign

Ihre Seitenbesucher, Nutzer oder Kunden wählen zunehmend mobile Endgeräte, um im Internet nach Informationen oder Produkten zu suchen. Viele besitzen überhaupt keinen klassischen Rechner mehr. Damit Sie allen eine gute User Experience bieten können, brauchen Sie Responsive Webdesign.

Außerdem können Sie heute keine gute Bewertung und damit ein hohes Ranking bei Google und anderen Suchmaschinen mehr erreichen, wenn Sie auf responsives Webdesign verzichten. Denn Google & Co. greifen mit ihren Algorithmen immer wieder Internet-Trends auf und nehmen größere Entwicklungen schließlich in ihren Bewertungskatalog für Webseiten auf.

So verkündete Google bereits 2015, dass Mobile Friendliness ein Bewertungsfaktor wird. Seit 2019 gilt bei Google sogar: Mobile first! Damit werden heute neben dem Inhalt zuerst die responsiven Mobilversionen von Webseiten und ihre Funktionalität für die Bewertung herangezogen. Dafür wurden sogar neue Webcrawler entwickelt, die die Seiten aus Sicht eines mobilen Nutzer genau unter die Lupe nehmen.

7. Fazit: Responsive Webdesign

Dieses Fazit fällt kurz aus: Ohne responsives Webdesign geht es heute nicht mehr! Unabhängig von der Größe oder dem Content Ihrer Seite verlieren Sie ohne das moderne Design Kunden genauso wie die Aufmerksamkeit der Suchmaschinen. Das führt zuerst in die Bedeutungslosigkeit und dann zum Ende eines Internetprojekts.

8. Angebote für Responsive Webdesign

Neue Webseiten entwickelt unsere Web-Agentur selbstverständlich nur noch responsive und mobilfreundlich. Wir stellen aber immer wieder fest, dass verschiedene ältere Internetseiten häufig in diesem Bereich noch optimiert werden können. Dabei können wir Ihnen helfen. Lassen Sie sich gleich unverbindlich beraten zur Neugestaltung Ihrer Website.

Denken Sie über eine neue Website nach?

Wir erstellen professionell, mit neuester Technik und günstig Ihre neue Internetseite. Wir beraten Sie gerne.

WordPress Cookie Plugin von Real Cookie Banner