News, Stories & Inspiration zu unserer Multimedia-Software

Was ist Responsives Webdesign?

Was ist Responsives Webdesign?

Der steigende Marktanteil von Smartphones und Tablets wie iPhone und iPad erzwingen ein Umdenken beim Gestalten von Webseiten.

Smartphones und auch Tablets sind Teil unseres Alltags geworden. Egal ob in der Bahn, in der Mittagspause oder im Café: wir wollen immer online sein und surfen können. Nicht immer passt die Auflösung der Website zu der des Smartphones. Dadurch müssen mehr Daten geladen werden. Das kann manchmal eine gefühlte Ewigkeit dauern. Abhilfe kann das Responsive Webdesign für mobile Webseiten schaffen.

Was ist Responsives Webdesign?

Responsives Webdesign bedeutet in etwa „reagierendes Webdesign“. Es ist also eine gestalterische und technische Entwicklung, bei der sich die Webseite nahezu perfekt an alle Endgeräte anpassen lässt. Das liegt vor allem an den Media Queries, welche ein Konzept von CSS3 sind. Dieses Konzept führt eine Medienabfrage durch. Hier kann zum Beispiel nach der Breite des Browserfensters oder der Bildschirmauflösung gefragt werden. Dies ermöglicht es der mobilen Webseite, sich ideal an die Geräte anzupassen und gewährleistet somit Schnelligkeit und Benutzerfreundlichkeit.

„Form follows function“ – beim Responsiven Webdesign richten sich Funktion, Design und Inhalt nach der jeweiligen Bildschirmauflösung und dem verwendeten Endgerät.

Responsives Webdesign vs. Mobile Website-Version

Im Gegensatz zum Responsiven Webdesign kann man eine mobile Seite auch durch eine neue Domain bzw. Subdomain erstellen, z.B. m.beispielseite.com. Hier ist der Vorteil, dass man ein völlig neues Design nutzen oder Funktionen verwenden kann, die es nur für die Mobile-Version gibt.
So kann man den Inhalt beliebig steuern und gezielt Inhalte setzen oder weglassen, die dann wiederum nur auf der Desktopversion zu finden sind. Des Weiteren beeinflusst eine Änderung der mobilen Website in keinster Weise die Desktopversion.
Dennoch muss man bei einer Mobilen Website daran denken, dass man 2 Layouts pflegen muss, die im schlimmsten Fall auch nicht die gleiche URL besitzen. Ein weiterer Nachteil ist der Verbrauch des doppelten Speicherplatzes auf dem Server.

Beim Responsiven Webdesign wird nur ein Layout gepflegt und der Nutzer hat eine ähnliche Wahrnehmung zwischen der mobilen Ansicht, der Tablet-Ansicht oder der Desktop-Variante. Wobei wir schon beim nächsten Vorteil wären: das Responsive Webdesign bedient nicht nur die mobile Ansicht für das durchschnittliche Smartphone. Es kann sich auch an alle anderen mobilen Endgeräte anpassen. Es besteht jedoch die Gefahr, dass die Elemente immer schmaler werden, z.B. werden zweispaltige Texte getrennt und verwirren den Leser eventuell. Auch komplexere Inhalte sind schwerer zu übertragen und kosten viel Zeit.

Anpassung von Responsivem Webdesign an verschiedene Endgeräte

Tipp: Ihr könnt ganz einfach herausfinden, welche Webseiten Responsives Webdesign nutzen. Öffnet eine beliebige Webseite im Browser. Ist sie vollständig geladen, verkleinert ihr das Fenster auf die Form eines Smartphones oder eines Tablets und schon seht ihr, ob und wie sich die Menü- und Textdarstellungen ändern.

Welche Version sollte ich wählen?

Wer eine Mobile- und eine Desktop-Version getrennt anbietet, macht sich hier nur unnötig das Leben schwer. Beide Versionen benötigen viel Pflege und Anpassung. Hier ist also zu empfehlen, mehr Zeit in die Einrichtung eines Responsiven Webdesigns zu investieren.
Aber auch die Kunden und Besucher der Webseite werden zufriedener sein, wenn sie nicht lange auf das Laden der Seite warten müssen oder alles verrutscht und verdreht dargestellt wird.

Bei der Überlegung, ob man Responsives Webdesign oder eine mobile Website-Version nutzen möchte, sollten auch folgende Punkte berücksichtigt werden:

  • Sind die Funktionen mit beiden Varianten gleich? Welche Funktionen sind euch wichtig?
  • Soll der Inhalt gleich oder unterschiedlich sein (z.B. mobil weniger Content)?
  • Ist die Seite crawlbar?
  • Im Head muss für die Mobile-Version ein Verweis auf die Desktop-Version gesetzt werden, sowie auch von Desktop auf die Mobil
  • Ladezeit (durchschnittliche Aufmerksamkeit von 1,8sec)
  • Backlinks werden auf die Desktop-Variante verweisen

Responsives Webdesign vs. Accelerated Mobile Pages

Als dritte Variante startete Google das AMP-Project. Accelerated Mobile Pages (AMP, wörtlich übersetzt „beschleunigte Mobilseiten“) entwickeln sich zu einer hoch optimierten Methode der Contentbereitstellung für mobile Endgeräte.

Gegenüber der Mobile-Version oder Responsivem Webdesign sollen AMP-Webseiten, selbst über Anbindungen mit geringer Bandbreite, deutlich schneller geladen werden. Die gängigen Web-Browser für Mobilgeräte laden die Seite durch HTML-Rendering in kürzerer Zeit. Möglich ist das durch eine Verschlankung des Codes der Seiten. Bilder werden bereits serverseitig auf die richtige Größe skaliert und Inhalte, die nicht sofort auf dem Bildschirm zu sehen sind, werden erst geladen, wenn der Nutzer zu scrollen anfängt.

AMP löst das spezifische Problem mobiloptimierten Content so schnell wie möglich liefern zu können. Damit können Accelerated Mobile Pages eine größere Nutzerfreundlichkeit bieten. Da diese Variante nicht ganz einfach umzusetzen ist, da sie z.B.gängige HTML-Elemente nicht immer unterstützt, ist sie noch nicht für jeden zu empfehlen.

Wie entwickelt man ein Responsives Webdesign?

Mit HTML5 und CSS3 kann man mobile Webseiten erstellen. Hier steht vor allem die Einrichtung der Media Queries im Vordergrund.
Der folgende Artikel erklärt schrittweise, wie man seine bisherige Website auch nachträglich noch responsiv gestaltet:
http://www.dieproduktmacher.com/in-5-schritten-von-der-aktuellen-website-zum-responsive-design/

Aber auch ohne Programmierkenntnisse lassen sich Responsive Webseiten erstellen. Mit dem MAGIX Web Designer wird eure Webseite mobil! Ihr könnt eure Webseite individuell gestalten und sie auf allen Endgeräten in optimaler Darstellung präsentieren. Im Tutorialbereich könnt ihr die Möglichkeiten des Programmes entdecken und eure eigene Webseite ganz einfach erstellen und bearbeiten.

2 comments

  • ja, das ist ja ein schöner Artikel aber weiter bringt er mich nicht.
    Ich habe von Anfang an alle Webdesigner Versionen bis .10 gekauft.
    Jetzt stehe ich vor der Entscheidung nach .11 zu wechseln. Tue ich aber nur wenn gewährleistet ist,
    dass ich responisve Seiten erstellen kann.
    Dies ist mir mit der Demoversion nicht gelungen. Ich konnte auch kein Template entdecken, das das kann.
    Also wäre ich schon interessiert zu erfahren wie Frau Hilgenstock das mit der Version 11 hingekriegt hat.

    Reply
    • Hallo Frau Huber,

      Vielen Dank für Ihren Kommentar. Mit dem Web Designer 11 lassen sich ganz einfach Webseiten im Responsive Webdesign erstellen. Hier zu gibt es unter dem Reiter „Extras“ eine Funktion, die sich „Website-Variaten“ nennt. Hier können Sie nun verschiedene Variaten Ihrer Website erstellen, wie zum Beispiel für Mobilgeräte. Hier können Sie auch einstellen, welche Inhalte erscheinen sollen und in welchen Größenverhältnissen. In diesem kurzen Video können Sie sich den Prozess gerne noch einmal verbildlicht anschauen: http://www.magix.com/fileadmin/user_upload/Produkte/Web/Web_Designer_11/Classic/DE/video-1280-adaptiv-wd10p-de.mp4 🙂

      Ich hoffe, ich konnte Ihre Frage zu Responsive Webdesign im MAGIX Web Designer 11 ausreichend beantworten.

      Mit freundlichen Grüßen,
      Nele Hilgenstock

      Reply

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *