Responsive Design

Responsive Design bezeichnet ein grafisches und technisches Konzept, bei der Webdesigns sich der Auflösung des Bildschirms bzw. der Größe des Browserfensters anpassen. Webseiten, die mit responsive Design arbeiten, lassen sich problemlos auf Smartphone, Desktop, Tablet, Laptop und anderen Endgeräten ansehen und navigieren. Da immer mehr Internetnutzer mobil im Netz unterwegs sind, wird Responsive Design für Unternehmen immer wichtiger, da es eine große Rolle in der Conversion Optimierung spielt.

Funktionsprinzip und Hintergrund

Responsive Design wurde nicht ohne Grund in den letzten Jahren immer beliebter. Spätestens seit den Statistiken über die Anteile der mobilen Endgeräte 2020 ist klar, dass immer mehr Nutzer das Internet auf verschiedenen Geräten nutzen. Besonders das Smartphone ist dabei sehr beliebt. Aus diesem Grund programmieren immer mehr Webseitengestalter ihre Seite nach dem “Mobile First” (dt: Mobil zuerst) Prinzip. Dabei wird zunächst das Design für die mobilen Endgeräte entwickelt und danach erst das Design für den Desktop gestaltet.

Funktion des Responsive Design ist es, dem Nutzer eine benutzerfreundliche und einheitliche Webseite zu bieten, unabhängig davon, welche Auflösung das Endgerät hat. Beim Responsive Design gilt allerdings nicht, dass alle Dimensionen fix beibehalten werden müssen. Es werden bei allen Geräten zwar dieselben Elemente geladen, jedoch werden sie unterschiedlich ausgegeben.

Begriffsabgrenzung

Responsive Webdesign wird häufig mit anderen Paradigmen zur mobilen Ausrichtung von Webseiten verwechselt. Konzepte wie zum Beispiel das adaptive Webdesign verflogen zwar dasselbe Ziel, sind jedoch in der technischen, inhaltlichen und grafischen Umsetzung von dem Responsive Design zu unterscheiden.

Adaptives Webdesign

Das adaptive Webdesign richtet sich danach, auf welchem Endgerät eine Website besucht wird. Programmierer und Webdesigner arbeiten hier mit Breakpoints, einem Designraster zur Darstellung verschiedener Elemente. Es wird erkannt, ob ein Besucher mit dem Tablet, dem Smartphone oder auf dem Desktop im Netz unterwegs ist. Abhängig davon, welches Gerät ein Besucher nutzt, werden verschiedene Elemente und Skripte geladen. Bei einem Webseitenaufruf mit dem Smartphone können so zum Beispiel kleinere Bilder geladen werden. Das kann sich erheblich auf die Ladezeit und damit die Usability auswirken. Da Programmierer und Webdesigner beim adaptiven Webdesign für jedes Endgerät ein eigenes Design erstellen müssen, ist der Arbeitsaufwand größer. Beim Responsive Design handelt es sich hingegen um eine einzige Version der Website, die sich selber anpasst.

Mobile Websites

Bei der mobilen Webseite werden Besucher auf eine spezielle mobile Domain weitergeleitet, wenn der Server erkennt, dass sie mit dem Smartphone oder Tablet unterwegs sind. So wird auf dem Smartphone aus twitter.com m.twitter.com. Prinzipiell können bei dieser Variante auch andere Inhalte angezeigt werden. Vorteil bei den mobilen Websites ist, dass sie genau an Smartphone-Nutzer angepasst werden können. Programmierer sollten hier darauf achten, dass mithilfe eines canonical Tags auf die Quellseite hingewiesen wird. Tut man das nicht, verstreut sich der Link Juice und Suchmaschinen sehen die mobile wie auch die normale Webseite als zwei verschiedene Domains an. Bei dieser Lösung ist es deshalb empfehlenswert, die mobile Domain als Subdomain anzulegen.

Technische Umsetzung

Die technische Umsetzung von Responsive Webdesign muss einwandfrei sein und für alle Endgeräte realisierbar sein. Idealerweise werden hier nur die Auszeichnungssprachen HTML (bzw. HTML5) und CSS (bzw. CSS3) verwendet. Folgende Kernelemente lassen sich beim Responsive Design finden:

Viewport

<meta name="viewport" content="width=device-width, initial scale=1">

Der Viewport (dt.: Sichtöffnung) bezeichnet den Anzeigebereich, in der eine Webseite im Browserfenster angezeigt wird. Dabei ist es nicht wichtig, auf welchem Endgerät die Webseite angezeigt wird (siehe adaptives Webdesign). Ausschlaggebend ist einzig und alleine die Größe des Anzeigebereichs (Viewport). Das Meta Element wurde zuerst vom Unternehmen Apple implementiert, um eine einheitliche Webseiten-Ansicht im Safari Browser des iPhones zu schaffen. Es wird im <head> Bereich platziert und gibt dem Browser an, in welcher Dimension bzw. Skalierung die Seite angezeigt werden soll. Die Aussage “initial scale=1” garantiert, dass die Webseite beim ersten Laden nicht übergroß oder zu klein dargestellt wird. Mit der Auszeichnung “width=device-width” wird deklariert, dass die Breite des Designs der Breite des Bildschirms entspricht. Der Inhalt sollte also nicht überstehen, da der Nutzer sonst horizontal scrollen muss.

Media Query

CSS: @media all (max-width: 480px) {
 div {
 width:100% }}
HTML: <link rel="stylesheet" media="all" href="example.css" />

Ein weiterer wichtiger Aspekt der technischen Umsetzung von mobilen Seiten ist das sogenannte Media Query Element. Es ist eine CSS Technik, die erstmals in CSS3 vorgestellt wurde und Konditionen für die Ausgabe der Webseite stellt. In diesem Beispiel nehmen alle <div>-Elemente die gesamte Breite des Bildschirms ein, unter der Kondition, dass die Bildschirmbreite bzw. -auflösung weniger oder gleich 480 Pixel beträgt. Der Media Query wird dann mit dem <link rel> Element im <head> Bereich im HTML Dokument implementiert. Weiterhin können Programnmierer noch im Media Query spezifizieren, um welche Ausrichtung es sich handelt:

@media all and (orientation:landscape) { width:100%}

Theoretisch könnte man mit Media Queries Webseiten für jeweils verschiedene Breiten komplett anders gestalten. Gerade deswegen sind sich sogar Experten bei der klaren Trennung zwischen Responsive und Adaptive Webdesign nicht immer einig. In der Praxis können Webseiten aber sowohl Elemente des Responive als auch des Adaptive Designs aufzeigen. So kann die Struktur der Webseite Responsive sein, die Inhalte werden aber adaptiv ausgegeben (zum Beispiel wird ein Bild statt ein ladelastiges Video auf mobilen Geräten angezeigt).

Relative Größen

Werden Bilder oder andere Medien genutzt, empfiehlt es sich, deren Breite in % anzugeben. Auch Block- oder Tabellen sollten nicht in Pixeln (px), sondern in Prozent angegeben werden. Der Grund ist simpel: Ein <div> Element, welches 1000px breit ist, überschreitet Bildschirme, die einen Anzeigebereich mit einer geringeren Breite. Deswegen sollte die Größe vom Inhalt immer relativ zur Bildschirmgröße sein.
Um Bilder und Videos automatisch zu skalieren, sollte nur die Breite in Prozent angegeben werden. Die Höhe soll sich automatisch anpassen. Der passende CSS Code dazu:

img, video {width:100%;
height:auto}

Grundsätzlich lassen sich im Responsive Webdesign alle relativen Einheiten einpflegen, wie zum Beispiel vw und vh. Diese sind relativ zu 1% der Breite (vw) und Höhe (vh) des Viewports.

Vor- und Nachteile für das Online-Marketing

Vorteile

• Mobilfreundlich: Webseiten, die keine mobile Lösung bieten, werden von Besuchern schnell wieder verlassen. Potenzielle Conversions können so verloren gehen. Mithilfe von Responsive Webdesign kann die User Experience verbessert werden.
• Weniger technischer Aufwand: Bei der Erstellung des Responsive Webdesigns haben Programmierer im Vergleich zu anderen mobilen Lösungen weniger Arbeitsaufwand. Sie erstellen nur eine Version der Website, die sich auf unterschiedlichen Bildschirmen benutzerfreundlich anzeigen lässt.
• Einheitliches Design: Das Responsive Webdesign hat immer ein einheitliches Design. Dadurch kann User Trust beim Kunden bzw. Nutzer gestärkt werden. Außerdem ist der Wiedererkennungswert groß.
• Flächendeckende Benutzerfreundlichkeit: Responsive Webdesign ist potenziell für jede Bildschirmgröße das Richtige. Werbetreibende müssen sich keine Sorgen über zukünftige Formate oder Technologien machen, da ihre Webseite auf jedem Gerät einheitlich aussieht.

Nachteile

• Konzeptaufwand: Der technische Aufwand beim Responsive Webdesign ist gering. Im Gegenzug dazu muss viel Zeit in die Planung der Seite investiert werden, damit sie am Ende auf allen Endgeräten richtig angezeigt wird.
• Keine gerätespezifische Optimierung: Durch fehlende Optimierung der jeweiligen Displaygrößen und Eingabemöglichkeiten (z.B das Touch Display), kann viel Potenzial verloren gehen. Das Responsive Design ist eine Lösung für alle Geräte und muss zwangsweise in einigen Aspekten Kompromisse eingehen. So zum Beispiel bei der Bildgröße (damit ist die Dateigröße der Bilder gemeint): Sie muss klein genug sein, damit keine zu langen Ladezeiten auf dem mobilen Gerät entstehen, aber groß genug sein, damit das Bild qualitativ hochwertig auf dem Desktop erscheint.
• Mobile Performance: Das Responsive Webdesign greift immer auf dieselben Scripte, Dokumente und Bilddateien zu, unabhängig davon, ob man das Smartphone, den Laptop oder das Tablet nutzt. Das bedeutet, dass der kleine Computer genauso viel laden muss wie der Desktop. Deswegen sollte man bei der Konzipierung des Designs auf die Ladezeiten achten und so kleine Bilddateien wie möglich anwenden. Auch die Anwendung von CSS und Javascript sollte komprimiert werden.

Tipps zur mobilen Optimierung Ihrer Webseite erhalten Sie hier von uns.

Häufige Fragen

Quellen

https://de.wikipedia.org/wiki/Responsive_Webdesign
https://www.konversionskraft.de/strategie/strategische-entscheidungshilfe-responsive-vs-adaptive-webdesign.html
http://html5-mobile.de/blog/mobile-website-wahl-beste-domain