Beim responsive Design (dt.: reagierende Gestaltung), wird eine Webseiten-Gestaltung weitgehend geräteunabhängig umgesetzt. Die wichtigsten Info’s was responsive Design eigentlich ist, und was eben nicht.

Hier eine kleine CSS-basierte Demo-Box, die mit der Fensterbreite ihr Aussehen verändert.

Bevor es Smartphones und Tablets gab, ging man lediglich mit Desktop-PC’s oder Laptops ins Internet. Webdesigner waren gut beraten, ihr Webdesign auf feste Pixel-Breiten zu setzen, damit eine Webseite auf jedem Browser halbwegs identisch aussieht.

Auf kleinen Geräten wie Tablets oder Smartphones kann eine überfrachtete Seite dagegen schlechter gelesen werden, Links und Formulare können oftmals schlecht, oder gar nicht angeklickt werden.

Im Zuge der neu aufkommenden mobilen Geräte sind einige Webdesigner und Themendesigner dazu übergegangen, eine Geräteerkennung zu nutzen und bei Handy’s und Smartphones einfach auf eine anderes (mobiles) Theme umzuschalten. Der Nachteil: einige Inhalte und Widgets werden teilweise komplett ausgeblendet. Ein Mobile Theme, also ein für Smartphones und Tablets optimiertes Theme, ist nicht unbedingt responsive.

Im Oktober 2014 hat Google öffentlich gemacht, dass Webseiten in Zukunft danach beurteilt werden, wie gut sie auf mobilen Geräten dargestellt werden, und das responsive-Design die beste Umsetzung dazu sei. Welche Qualitätskriterien Google tatsächlich berücksichtigt, ist ein unbekanntes Geschäftsgeheimnis. Flash-Videos, die z.B. auf vielen Smartphones nicht angezeigt werden, sind in der mobilen Welt problematisch.

…Responsive Design, wenn es schlecht umgesetzt ist

Wie und ob ein Webdesigner sein Layout responsive umsetzt, ist von Fall zu Fall unterschiedlich. In einigen Fällen kann es durchaus die bessere Entscheidung sein, auf eine fliessende Weboberfläche zu verzichten, z.B. bei speziellen Backend-Masken oder Web-Tools für die Systemadministration.

Auf vielen Webseiten scheint das responsive-Design auch noch nicht optimal und Usability-gerecht umgesetzt zu sein. Warum darf man z.B. im Smartphone auf bestimmten News-Seiten die Bilder nicht größer zoomen? Muss wirklich jeder Werbebanner oder Infoblock, der in der Desktop Variante gezeigt wird wirklich auch unbedingt auf einem viel kleineren Smartphone-Display dargestellt werden? Warum sind viele Responsive-Seiten nicht zoombar, wenn doch bereits 3-jährige Kleinkinder intuitiv verstehen, wie man auf einem Tablet-PC Bilder größer zoomt?

Vorteile Responsive-Design

  • Offizielles Google-Ranking Kriterium
  • Optimierte Auflösungsunterstützung
  • Zusätzliche geräteabhängige Features durch den Designer möglich

Mögliche Gründe für ein Desktop-Layout / Mobiles Theme

  • Desktop Variante: auf allen Geräten eine einheitliche Benutzeroberfläche
  • Mobiles Theme: Reduzierung auf die Kernelemente der Seite
  • Schnellere Ladezeit auf mobilen Geräten