Responsive Webdesign erklärt: Was, Wozu und Wie?

Wer sich eine neue Website erstellen lassen möchte stolpert zwangsläufig früher oder später über den Begriff “Responsive Webdesign”. Doch was genau ist damit eigentlich gemeint? In diesem Beitrag fasse ich zusammen, was man auf dem Weg zur neuen Website darüber wirklich wissen muss.

Eines vorab: So gut wie alle neu erstellten Websites sind heute responsive und wenn Sie sich an eine seriöse Webdesign Agentur wenden wird diese Ihnen immer standardmäßig eine Seite responsive Design erstellen.

Hier unser Fahrplan:

Was ist Responsive Webdesign?

Responsive Webdesign ist ein Paradigma/ Konzept, das zum Ziel hat mit einer Website möglichst jedem Nutzer die gleichen Informationen zur Verfügung zu stellen, unabhängig davon wie dieser die Seite aufruft. Von anderen Konzepten grenzt es sich dadurch ab, wie dies erreicht wird.

Beim Responsive Webdesign wird für alle Gerätetypen, Browser und Bildschirmgrößen dieselbe Website ausgeliefert. Die gesendeten sind in allen Fällen überwiegend identisch, es können jedoch Informationen bezüglich unterschiedlicher Darstellungsweisen und Quellen (z.B. Bilder) abhängig von der Bildschirmgröße und dem Gerätetyp angegeben werden. Darin unterscheiden sich responsive Websites von veralteten Seiten, welche diese Informationen nicht mitliefern und dementsprechend nicht “Mobile Friendly” sind.

Praktikabel ist responsive Webdesign durch das heute vorherrschende Paradigma der Webentwicklung, welches eine Trennung von Inhalt und Design vorsieht. Inhalte verstehen Webbrowser in Form von HTML, Design kann Ihnen per CSS (Cascading Stylesheet) kommuniziert werden. CSS ist für die unterschiedliche Darstellung abhängig der Darstellungsgröße verantwortlich. 

Responsive vs. adaptive vs. liquide Website

Beim Adaptive Webdesign wird zwischen festen Breakpoints ein fixes Layout festgelegt, welches sich von Breakpoint zu Breakpoint ändert. 

Bei liquidem Webdesign verschieben sich die Inhalte je nach Bildschirmgröße und nehmen dabei einen festen prozentualen Anteil ein. 

Da mir kaum ein Beispiel bekannt ist, in denen eines dieser Konzepte in Reinform umgesetzt wurde, würde ich sowohl adaptive als auch liquides Design als Unterkonzepte des responsive Webdesign betrachten. (Wobei es sicherlich auch andere Meinungen gibt)

Responsive vs. mobile Websites

Responsive Webdesign ist also ein übergeordnetes Konzept mit der Realität des heutigen Internets umzugehen. Nutzer surfen im World Wide Web auf verschiedensten Geräten: Smartphones, Desktop-Computer, Tablets, Laptops oder Smart-TVs. Diese haben untereinander wiederum erhebliche Unterschiede, wie Displaygröße, Bildauflösung, Webbrowser Technologie etc. 

Ein anderer Ansatz ist es für Mobile Endgeräte eine vollständig andere Version einer Webseite auszuliefern (eine mobile Webseite). Aufgrund der genannten Unterschiede müssen diese jedoch zumindest in begrenzten Maße ebenfalls responsive sein, da kein Website-Layout auf jedes Smartphone passt, manche Nutzer Ihre Handys auf quer drehen, etc. 

Heute kommt es am häufigsten vor, dass Webseiten komplett responsive sind und mobile Seiten bauen in aller Regel zusätzlich auf Responsive Design oder adaptive/ liquid Design. Fast alle neu erstellten Websites sind heute responsive.

Warum Responsive Design?

Die Frage warum heute fast alle Websites responsive Webdesign nutzen und auch Sie es tun sollten ist leicht zu beantworten. Die Anzahl unterschiedlicher Gerätetypen, mit welchen auf das Internet zugegriffen werden steigt permanent. Der Anteil mobiler Geräte liegt dabei seit Jahren über 50% mit steigender Tendenz.

Responsive Webdesign ist heute die einfachste und günstigste Art Websites für ein möglichst breites Spektrum an Geräten zur Verfügung zu stellen.

Technische Umsetzung von responsive Design

Responsive Webdesign wird zum einen durch die Trennung von Inhalt und Design ermöglicht und zum anderen durch das Konzept der Media Queries, welches mit CCS3 einzug in die Cascading Stylesheets erhalten hat. So können abhängig von der Darstellungsbreite unterschiedliche Designs ermöglicht werden. 

Was sind Breakpoints?

Herz der responsiveness sind sogenannte Breakpoints. Diese beziehen sich auf die Bildschirm- bzw. Webbrowser-Breite in Pixeln. Legt man einen Breakpoint z.B. bei 1000 Pixeln (px) fest, kann der Webdesigner festlegen was das Layout bei Darstellungen kleiner als 1000px anders machen soll als bei Darstellungen die größer sind.

Wie Viele Breakpoints verwendet werden müssen um eine Website möglichst gut darzustellen hängt vom jeweiligen Layout und dem Anspruch der Entwickler ab. Zwischen den Breakpoints kann sich die Website liquide oder statisch verhalten, je nachdem wie es der Entwickler im Cascading Stylesheet definiert.

Es haben sich einige Breakpoints etabliert, welche häufig anzutreffen sind. Das Maß 768px basiert z.B. auf dem allerersten IPad aus dem Jahr 2010. Obwohl dieses für Entwickler kaum noch eine Rolle spielt wird der Breakpoint noch häufig eingesetzt.

Media Queries

Media Queries sind ein Konzept, welches mit CCS3 einzug gehalten hat. Ihre Aufgabe ist es Breakpoints festzulegen – also die technische Umsetzung von Breakpoints. Es können Media Queries angelegt werden, welche entweder einen bestimmten Breakpoint als maximal- oder als minimal-Breite definieren. Abhängig ob die Darstellungsbreite größer oder kleiner ist wird der Media Query dann ausgeführt oder nicht.

Media Queries und entsprechende Breakpoints beziehen sich immer auf die Darstellungsbreite, da Höhenunterschiede in der Regel durch Scrollen ausgeglichen werden. 

Beispiele 1: Dieses Media Query blendet Elemente mit der Klasse “mobile-only” bei Darstellungsgrößen ab 768 Pixeln aus.

@media screen and (min-width: 768px) {
.mobile-only {
       	display: none;
   	}
}

Beispiel 2: Dieses Media Query blendet Elemente mit der Klasse “desktop-only” bei Darstellungsgrößen bis 768 Pixeln aus.

@media screen and (max-width: 768px) {
.desktop-only {
       	display: none;
   	}
}

JavaScript

Neben HTML und CSS verstehen Browser zu guter letzt noch JavaScript. Dies in der Webentwicklung immer beliebter und kann ergänzend bei der Umsetzung responsiver Designs eingesetzt werden.

Über Javascript können eine Menge Informationen zum jeweiligen Nutzer eingeholt und verarbeitet werden, wie z.B. Gerät, Browser, Bildschirmgröße uvm. In einigen Fällen kann es erforderlich sein einen Touchscreen zu erkennen, z.B. falls Funktionen auf dem Hover mit der Maus basieren. 

Was auf den ersten Blick vielversprechend aussieht ist in der Praxis jedoch oft nicht so einfach und sehr fehleranfällig. Abhängig von Gerät und Browser werden Informationen unterschiedlich bereitgestellt und es ist aufwendig Lösungen zu entwickeln, welche möglichst alle Geräte abdecken und auch in ein paar Jahren noch funktionieren werden.

Es ist daher sinnvoll JavaScript eher als letzte Lösung bei der Umsetzung zu betrachten.

Responsive Images

Responsive Images helfen dabei je nach benötigter Größe unterschiedliche Bildgrößen zur Verfügung zu stellen. Es lassen sich zwar auch auf dem Handy HD Bilder darstellen, Ziel sollte es aber sein – gerade bei mobilen Endgeräten – Ladezeiten und Datenvolumen möglichst klein zu halten. 

Die Responsive Image Community Group hat zu diesem Zweck den <picture> HTML-Tag sowie das attribut “srcset” für <img>-Tags entwickelt. Wie man diese einsetzt erfahren Sie in diesem großartigen Artikel.

Suchmaschinenoptimierung und responsive Webdesign – ist Ihre Seite “Mobile Friendly”?

Da Google großen Wert auf die Nutzersignale Ihrer Website legt besteht ein enger zusammenhang zwischen Webdesign und Suchmaschinenoptimierung (SEO). Der Suchmaschinengigant bewertet es negativ, wenn Nutzer nach einer Suche sofort wieder von Ihrer Website abspringen und auf ein anderes Suchergebnis klicken. Dies kann durch Layout, Design und sogar Ladezeiten Ihrer Seite maßgeblich beeinflusst werden. Wenn ein Nutzer mit dem Smartphone auf eine Seite kommt, die eigentlich nur auf dem Desktop-Bildschirm so richtig funktioniert, haben Sie in null-komma-nix ein negatives User-Signal.

Doch damit nicht genug. Google prüft schon beim crawlen Ihrer Webseite, ob diese Probleme bei der mobilen Darstellung haben könnte. Wenn dem so ist, wird diese bei mobilen Suchen gar nicht erst, bzw. mit deutlich schlechteren Suchmaschinen Rankings ausgeliefert.

Das können Sie ganz leicht mit diesem Tool von Google herausfinden, indem Sie dort Ihre URL eingeben und testen.

Fazit

In den allermeisten Fällen ist responsive Webdesign heute die richtige Wahl. Bietet Ihnen jemand eine Website an die nicht responsive ist, sollte er sehr gute Gründe dafür haben und diese mit Ihnen teilen. Ein Beispiel für eine nicht vollständig responsive Seite aus unserem Portfolio ist diese extravagante Single Page Application, welche sich ab eine Breite von 768px vollständig liquide verhält (Und das war so Kundenwunsch :-)).