Responsive Webdesign

Was ist Responsive Webdesign?

Spricht man von Responsive Webdesign geht es darum, dass eine Website sich je nach Gerät, auf dem die Website aufgerufen wird, und demnach je nach Bildschirmgröße anders darstellt und anpasst. So können alle Nutzer bedient werden, ganz unabhängig davon, mit welchem Gerät sie auf die Website zugreifen.

Abb: Responsive Webdesign

Warum ist Responsive Webdesign so wichtig?

Die verstärke Nutzung von mobilen Endgeräten führt dazu, dass Nutzer mit verschiedensten Geräten auf eine Website zugreifen, die verschiedenste technische Gegebenheiten mit sich bringen. Hier müssen Unternehmen auf die Bedürfnisse der Nutzer eingehen. Ist eine Website nicht responsive programmiert, wird sie meist auf mobilen Endgeräten nur fehlerhaft dargestellt. Daher ist das Responsive Webdesign besonders wichtig für die Usability, also der Benutzerfreundlichkeit der Website. Ist eine Website nicht für mobile Endgeräte optimiert und ein Nutzer greift mit dem Smartphone auf die Website zu, ist die Wahrscheinlichkeit, dass der Nutzer abspringt hoch. Demnach bedeutet eine nicht responsive Website auch eine hohe Absprungrate.

Bedeutung von Responsive Webdesign für die Suchmaschinenoptimierung

Auch für die Suchmaschinenoptimierung ist das Responsive Webdesign von Relevanz, denn Suchmaschinen haben es zum Ziel, den Nutzern das bestmögliche Erlebnis zu schaffen. Ist eine Website auf mobilen Endgeräten nicht bedienbar, wird sie im Ranking der Suchmaschine deutlich nach unten rutschen. Damit sinkt auch der Traffic auf der Website und dem Unternehmen gehen potenzielle Kunden verloren.

Umsetzung von Responsive Webdesign

Will man Responsive Webdesign umsetzen, erfolgt dies über CSS Media Queries und HTML.

Abb: HTML 5 und CSS 3

CSS Media Queries ermöglichen es, dass die Website auf allen unterschiedlichen Bildschirmgrößen und Auflösungen richtig dargestellt wird, da anhand der Media Queries Layouts für die verschiedenen Gerätetypen festgelegt werden können.

Dafür verantwortlich, dass Inhalte vollständig und gut lesbar angezeigt werden, ist HTML Meta-Element Viewport. Hier können die Breite und die Länge der Website so angepasst werden, dass sie auf den mobilen Endgeräten optimal angezeigt werden.