02 Jul

Was ist Responsives Webdesign?

  • Patrick Niehsen
  • CSS, CSS3, HTML5, responsive Webdesign, Webdesign
Was ist Responsives Webdesign?

Das Internet hat sich als Präsentationsplattform sowohl im gewerblichen als auch im privaten Umfeld durchgesetzt. Es gibt kaum noch Unternehmen, die nicht im Internet vertreten sind, und auch viele Privatleute betreiben mittlerweile eigene Internetpräsenzen wie zum Beispiel Blogs. Reichte es früher aus, eine optisch ansprechende Seite für die Betrachtung per Laptop oder Desktop-PC einzurichten, hat sich dies durch die massenhafte Verbreitung von Tablets, Smartphones, Netbooks unterschiedlichen Formats und vielen weiteren internetfähigen Geräten grundlegend geändert. Heute muss man als Webseitenanbieter seine Seiten so gestalten, dass sie von den unterschiedlichsten Geräten mit den verschiedensten Bildschirmgrößen, Betriebssystemen und Bedienungskonzepten optimal genutzt werden können. Nutzer erwarten, dass – egal ob sie eine Website am Smartphone oder am PC aufrufen – die Navigation und das Abrufen von Informationen ohne Einschränkungen intuitiv möglich sind. Aus diesem Grund wird das sogenannte Responsive Webdesign immer wichtiger. Es sorgt dafür, dass die Eigenschaften des Nutzergerätes erkannt werden und die Darstellung der Website dementsprechend angepasst und optimiert wird. Dieser Artikel gibt einen kurzen Überblick zu den wichtigsten Fakten und Informationen über das Responsive Webdesign und was Webseiten- oder Blogbetreiber darüber wissen müssen.

Was ist Responsive Webdesign?

Wie eingangs bereits beschrieben, sorgt das Responsive Webdesign für die jeweils passende Darstellung von Websites auf verschiedenen Geräten und Bildschirmgrößen. Dabei werden sowohl die gestalterischen als auch die technischen Ansätze zur Optimierung und Erstellung von reaktionsfähigen Websites berücksichtigt. Bei einer solchen reaktionsfähigen (englisch: responsive) Website erfolgt der grafische Aufbau der Seite auf dem Gerät des Nutzers entsprechend der technischen Gegebenheiten bzw. Anforderungen des jeweiligen Gerätes. Besonders Elemente wie Textgröße und -layout, Spaltenbreite und Navigationsmenüs werden an die Geräteeigenschaften angepasst.

Wie funktioniert Responsive Webdesign?

Folgende technische Eigenschaften des Gerätes, das die jeweilige Website aufruft, werden beim Responsive Webdesign zunächst erfasst:

  • die Bildschirmauflösung
  • die Ausrichtung des Bildschirmes (Querformat oder Hochformat)
  • die Größe des Gerätes
  • das Eingabekonzept bzw. die verschiedenen Eingabemöglichkeiten wie zum Beispiel per Tastatur und Maus, per Touchgesten oder per Sprache

Anhand dieser Größen werden die grafische Darstellung und die Navigation der betreffenden Seite für das jeweilige Gerät gestaltet und optimiert. Hierfür kann sich das Responsive Webdesign unterschiedliche Techniken wie zum Beispiel CSS3, HTML5 oder auch JavaScript zunutze machen. Die Bedeutung von JavaScript für das reaktive Webdesign hat allerdings in letzter Zeit stark nachgelassen, da mittlerweile die neuesten Versionen von HTML (HTML5) und CSS (CSS3) entsprechende Techniken implementiert haben, die jetzt vermehrt hierfür Anwendung finden.

Zum besseren Verständnis des technischen Ablaufs des Responsive Webdesigns hier eine kurze und leicht vereinfachte Beschreibung eines Seitenaufrufs mit anschließendem reaktivem Seitenaufbau:

Zunächst sendet der Webbrowser auf dem Gerät des Nutzers eine entsprechende HTML Request zum Aufruf einer bestimmten Seite auf dem Webserver. Dabei übermittelt er Daten wie zum Beispiel die verwendete Browserversion, die Bildschirmauflösung und -ausrichtung sowie das verwendete Betriebssystem. Das HTML- bzw. CSS-Skript auf dem Server ist so programmiert, dass wenn zum Beispiel die übermittelte maximale Bildschirmauflösung des Geräts eine gewisse Größe nicht überschreitet, automatisch ein spezielles, für Smartphones optimiertes CSS-Stylesheet geladen wird. Der Webserver übermittelt anschließend die aufgerufene Website an den Nutzer mit den speziellen grafischen Einstellungen des Stylesheets für Smartphones. Dem Nutzer wird nun die Website für sein Gerät optimiert angezeigt. Verwendet man ein anderes Gerät wie zum Beispiel einen Desktop-PC, so wird diesem ein anderes Stylesheet zugewiesen und die Anzeige entsprechend angepasst.

Betreibt man selbst eine Internetseite, sollte Responsive Webdesign auf jeden Fall berücksichtigt werden. User erwarten inzwischen, dass sie Internetseiten mit optimaler Usability auf jedem ihrer Geräte aufrufen können. Allerdings sind viele Webseitenbesitzer mit den technischen Anforderungen des Responsive Webdesigns eher überfordert, da sie sich mehr um die inhaltlichen Belange als um HTML- oder CSS-Codes kümmern. Zudem ist es mittlerweile möglich, mittels Webseitenbaukästen oder Content Management Systemen wie zum Beispiel WordPress Internetauftritte ohne spezielle HTML- oder Programmierkenntnisse zu erstellen.

Möchten auch Sie vom Responsive Webdesign profitieren, können Sie bei uns ein entsprechendes Angebot hierfür einholen. Wir sind spezialisiert auf Webentwicklung und beraten Dich gerne zu diesem Thema. Wir analysieren Deine Website und die Anforderungen Deiner Nutzer bzw. deren Nutzungsverhalten. Auf Wunsch erstellen wir Deine Websites so, dass sie sich automatisch an die Bildschirmgrößen unterschiedlichster Geräte anpassen. So machen wir aus einer normalen Website eine Fully Responsive Website mit einem modernen und ansprechenden Webdesign. Besucher Deiner Seiten werden diesen Service zu schätzen wissen und von der jeweiligen Darstellung begeistert sein.

zurück zur Blogübersicht