Respon… was? – Darum sollte man Webseitendesign für mobile Geräte optimieren

Responsive Design steht sinngemäß für ein anpassungsfähiges Webdesign von Online-Portalen, Webseiten oder Webshops an das Endgerät – auch RWD genannt. Ziel ist es, die Nutzerfreundlichkeit für den User unabhängig von Smartphone, Tablet oder Desktop maximal zu steigern. Im Mittelpunkt stehen dabei die Anordnung der einzelnen Elemente header, body, footer mit NavigationContent und Marginalspalte bzw. Seitenspalte. Dadurch wird es möglich, auf Wünsche und Ansprüche des Users und der damit verbundenen steigenden Flexibilität einzugehen.

Gibt es einen Unterschied zur mobilen Webseite?

Ja, den gibt es: die Anzahl der Templates. Für die Erstellung einer Webseite im responsiven Design gibt es nach wie vor ein einziges Template, das auf die Größe eines Desktops optimiert ist. Dieses erkennt das Endgerät automatisch und passt sich im Design dynamisch selbstständig an. Dadurch wird auch der Pflegeaufwand der Webseite auf ein überschaubares Minimum reduziert, immerhin sind die Daten letztlich einmalig in einem Template angelegt.

SEO-Experten erkennen den Zusatznutzen eines responsiven Designs: Für alle Endgeräte gibt es eine URL, die immer gleich ist. Dadurch entsteht kein unnötiger duplicate content, und der Kunde kann dadurch von Google nicht abgewertet werden.

Außerdem muss die Marketing-Abteilung Presseartikel oder Updates lediglich einmalig in nur einem CMS veröffentlichen. Dafür bietet auch beispielsweise WordPress unterschiedliche Plug-Ins an, die die Pflege der Webseite vereinfachen.

Und wie funktioniert das?

Für eine automatische Anpassung sorgen die CSS3-Konzepte „Media Queries“ (im Quellcode erkennbar mit „@media“). Diese erkennen die wesentlichen Eigenschaften des Endgerätes wie GrößeAuflösung des BildschirmsAusrichtung (vertikal, horizontal) und Eingabemöglichkeit.

Wesentliche Unterschiede, die bei der technischen Umsetzung beachtet werden müssen:

  • Größe des Anzeigegerätes
  • Verfügbare Eingabemethoden (Maus, Touch, Sprache)
  • Leistungsfähigkeit des Gerätes
  • Internetverbindung

Im Internet finden sich zahlreiche Tools und Hilfsmittel, die das Erstellen und Überprüfen eines anpassungsfähigen Designs erleichtern. Zum einen bietet das Online-Magazin t3n eine Serie zum Thema Responsive Webdesign in vier Teilen an (Layout & Text, Navigation, Bildergalerien & Videos und Steuerungselemente). Dabei werden verschieden Tools vorgestellt und verglichen sowie hilfreiche Tipps aufgelistet. Zum anderen ist es möglich, mithilfe der Plattformen Responsive Viewer und be responsive die eigene Webseite hinsichtlich der Anpassungsfähigkeit zu überprüfen – sowohl vor als auch nach einer Templateerstellung.

Standardisierte Auflösung (Breite):
Desktop: min. 1024px

Tablet: 768–1024px

Smartphone: 320–480px

Weitere Beiträge aus dem Bereich