Die wichtigsten Fragen zum Responsive Webdesign

Icon Responsive Webdesign

Seit geraumer Zeit ist Responsive Webdesign (RWD) in aller Munde. Vieles spricht dafür, dass Unternehmen Ihre Website so schnell wie möglich an die neuen Anforderungen anpassen, denn in den vergangenen Jahren stieg die mobile Internetnutzung deutlich. Ein Ende dieser Entwicklung ist nicht zu erwarten. Doch lohnt sich die Anpassung der Website, die meist mit einem kostspieligen Relaunch verbunden ist, wirklich für alle Unternehmen?

Welche Nachteile hat Responsive Design? Und worauf sollte bei der Umsetzung besonders geachtet werden? Um das wichtige Thema umfassend beleuchten zu können, haben wir unser Webdesign-Team gebeten, die wichtigsten Fragen zum Thema RWD zu beantworten

Ist Responsive Design nur ein Trend, der uns ein paar Jahre lang begleitet, oder wird sich die Technologie dauerhaft durchsetzen?

Betrachtet man die Expansion des mobilen Internets der letzten Jahre, wird sofort klar, dass in Zukunft immer mehr Menschen ortsunabhängig auf das Internet zugreifen und viele verschiedene Endgeräten nutzen werden. Für zahlreiche Online-Angebote ist das Responsive Design eine gute Lösung, denn es bietet eine ausgeglichene Balance zwischen Kosten und Effizienz für die meisten Webseiten. Die Nachfrage wird in der nächsten Zeit tendenziell steigen.

Responsive Webdesign wird immer wieder ausführlich gelobt. Hat es gar keine Nachteile?

Sicher, es gibt Fälle, bei denen ein responsives Design weniger tauglich ist. Komplexe Anwendungen, die viel Fläche benötigen kann man nicht einfach auf ein kleines Display quetschen. Ein weiterer Nachteil ist die Flexibilität des Designs, weil die Konzepter und Designer bereits im Vorfeld unterschiedlich große Displays berücksichtigen müssen. Viele Designer kommen aus dem Print-Bereich und denken immer noch in festen Maßen. Das kann schnell zum Problem werden.

Was sind die Vor- und Nachteile im Vergleich zu einer separaten mobilen Website?

Ein großer Vorteil ist die eingleisige Pflege der Inhalte im CMS. Das HTML ist im Responsive Design in der Desktop- und in der Smartphone-Version identisch, das Aussehen wird einzig durch das Stylesheet bestimmt. Deshalb hat man mit RWD die Möglichkeit, alle Inhalte zugänglich zu halten, wohingegen das Angebot bei der mobilen Website deutlich abgespeckt ist. Der User müsste also, wenn er etwas Spezielles sucht, doch wieder in die Desktop-Version wechseln. Das kann mit dem Smartphone sehr mühsam sein.

Rein mobile Webseiten haben dafür den Vorteil der schnellen Ladezeiten. Sie sind meist sparsam bestückt und benötigen weniger Ressourcen wie Bandbreite oder Hardware. Das machte sich vor wenigen Jahren bei einer sehr langsamen Internetverbindung noch deutlich bemerkbar, aber mittlerweile haben die Mobilfunkprovider nachgerüstet, sodass man Geschwindigkeitsunterschiede kaum noch wahrnimmt.

Für wen lohnt sich RWD? Wer sollte lieber die Finger davon lassen?

Die Webpräsenzen von Unternehmen sind in der Regel gut für Responsive Design geeignet. Allerdings zwingt die neue Technik zu einem grundsätzlichen Umdenken, denn es stellt sich nun vorrangig die Frage „Welche Inhalte sind wichtig?“. Der Fokus rückt auf den Content und nicht mehr so stark auf die Präsentation. Es geht nicht mehr darum, einen definierten Raum möglichst optimal zu befüllen, sondern eine effiziente Informationsvermittlung zu schaffen.

Websites, die mit den Jahren in ihrer Struktur immer komplexer geworden sind und dessen Unterbau veraltet ist, eignen sich weniger für eine RWD-Umsetzung. An dieser Stelle wird es Zeit für eine Modernisierung.

Welche Aspekte sollten Designer schon bei den ersten Entwürfen einer neuen Website im Kopf haben? Was sind die gestalterischen Kernelemente beim Responsive Design?

Die User Experience rückt in den Vordergrund. Entscheidend für eine gute Website ist das Navigations- und Bedienkonzept, um problemlos zu den Inhalten geführt zu werden. Eine barrierefreie Gestaltung und transparente Inhaltsstrukturen sind maßgeblich für die Akzeptanz beim User. Es geht darum, möglichst zahlreiche Nutzergruppen abzuholen. Responsive Webdesign geht auch ein bisschen "Back to the roots". Zu Beginn waren Websites immer flexibel. Sie sahen vielleicht noch nicht so schön aus, aber der Inhalt hat sich immer meiner Bildschirmgröße angepasst. Dies kommt mit dem RWD wieder zurück ins Heute.

Schaubild Responsive Design
Der Kern vom Responsive Design: Die Elemente der Website passen sich flexibel an Format und Größe des Bildschirms an.

Gibt es Darstellungsformen, die man beim Responsive Webdesign unbedingt vermeiden sollte?

Entscheidend ist eher die Nutzung moderner Technologien, damit das Design funktioniert. Ein tabellenartiges Layout beispielsweise entspricht nicht mehr dem aktuellen Standard. Auch Technologien wie Flash oder sehr bitmap-grafiklastige Designs haben ausgedient. CSS kann mittlerweile das übernehmen, was früher durch hunderte Grafikschnipsel und abenteuerliche HTML-Konstruktionen erreicht wurde. Durch die strikte Trennung von Inhalt und Präsentation im Responsive Webdesign ist fast alles möglich. Als Faustformel gilt dennoch, dass eine ausschließlich horizontale Anordnung der Elemente vermieden werden sollte. Das Scrollen auf kleinen Geräten erfolgt immer nach unten, sodass die Websites darauf ausgerichtet sein müssen.

Welche Auswirkungen hat der neue Standard auf die Optik?

Das Design wird klarer und auflösungsunabhängiger. Durch den Einsatz von SVG-Grafiken kann jede Bildschirmgröße ressourcenfreundlich angesprochen werden. Der Einsatz von Webfonts verleiht dem Design zusätzlich eine individuelle Note. Schatten, Verläufe, Animationen und Effekte werden heute direkt per CSS durch den Browser gerendert.

Wie erfolgsversprechend ist die Devise "Mobile First"?

Der Ansatz lenkt den Fokus auf den Inhalt und blendet Überflüssiges erst einmal aus, da man auf dem kleinen Display zunächst nicht alles sehen muss. Das erleichtert die spätere Contentpflege, da es etwas einfacher ist, vom Kleinen zum Großen zu gehen. Zusätzliche Inhalte kann man eigentlich immer unterbringen, Content zu kürzen ist dagegen schon deutlich schwieriger.

Welche Techniken eignen sich besonders gut für die Umsetzung?

Eine gelungene Umsetzung beginnt schon mit dem Design. Statische Bilder können nur die Grundlage sein, um das rein Visuelle zu bestimmen. Danach sollte man so früh wie möglich das Layout im Browser erstellen, um zu sehen, wie sich die einzelnen Elemente zueinander verhalten.

Gängige Techniken für die Umsetzung sind dann HTML5, CSS3 und jQuery. Diese Kombination bietet in der Regel alle Zutaten für ein gutes Frondend-Design, das meistens komplett von Hand geschrieben wird. Ein Responsive Webdesign für drei Stufen erfordert vielschichtige Stylesheets, für die es kein Standardrezept gibt. Je nach Projekt sind die Anforderungen meist sehr individuell. Responsive Webdesign erfordert jedoch einen agileren Workflow zwischen Konzeptern, Designern, Entwicklern und Kunden.

Was sind die klassischen Probleme bei der Umsetzung?

Manchmal wurde die Art der Bedienung nicht bis zum Ende durchdacht. Am Desktop sollen beispielsweise Menüs per Mouse-Over erscheinen und auf einem Tablet durch einen Klick. Da kommen sich zwei Events in die Quere, also muss man sich letztendlich für eine Variante entscheiden. Auch ein Fallback zu veralteten Webbrowsern verursacht schon mal Kopfzerbrechen, aber am Ende gibt es dafür meistens eine Lösung. Positiv für alle Webdesigner ist allerdings, dass alle Browserhersteller mittlerweile auf demselben Stand angekommen sind.

Wo haben HTML 5 und CSS 3 noch Verbesserungspotenzial?

In diesem Bereich gibt es eine stetige Weiterentwicklung. Aktuell können HTML5 und CSS3 schon sehr viel, allerdings wird nur ein Bruchteil davon genutzt, um die Rückwärtskompatibilität zu gewährleisten. Mit der Zeit werden die Möglichkeiten für die Designer jedoch besser und interessanter.

Die Zukunft heißt Responsive Webdesign!

Teaser Lösungsblatt Responsive Webdesign

Mobile Endgeräte werden auf lange Sicht immer komplexer, Responsive Webdesign damit stetig wichtiger.

In unserem Lösungsblatt lesen Sie,

  • was Responsive Webdesign bedeutet.
  • wie es die Usability Ihrer Seite verbessert.
  • warum es unersetzbar sein wird.

Verbessern Sie Ihre Website

Newsletter abonnieren

Die besten Tricks und Expertentipps für rundum erfolgreiche Webprojekte.

Folgen Sie uns ...

... und verpassen Sie nie wieder einen neuen Beitrag in unserem Blog.

Sie haben noch Fragen?

Dann kontaktieren Sie uns einfach und wir stehen sofort zur Verfügung.

Nachricht senden

×

Eine Nachricht senden...

Formular wird geladen ...

Tipps der Redaktion

Um-logo-teaser

Professionelle Newsletter: zielgerichtet und persönlich

  • E-Mails direkt aus dem CMS
  • Individuelle Segmentierung
  • Effiziente Marketing Automation

Hier gibt's alle Details

×Schließen