Responsive Design (im übertragenden Sinne: „reagierendes Design“) ist ein Begriff aus dem Webdesign und ermöglicht die einheitliche Darstellung einer Website auf verschiedenen Endgeräten und Display-Größen. Die Website wird so flexibel gestaltet, dass auf jedem Endgerät eine hohe Usability gewährleistet wird.
Hintergrund und Bedeutung
Auf kleinen Bildschirmen wirken Website meist anders und die Usability ist schlechter als auf den großen Bildschirmen von Computern. Ein Responsive Design reagiert auf das jeweilige Endgerät und passt sich der Bildschirmgröße an. Die Usability auf Smartphones oder Tablets kann somit durch ein eigenes Design gewährleistet werden; diese nennt man „Mobile User Experience“. Wenn das Design für die mobile Website zuerst erstellt wird, handelt es sich um das Konzept „Mobile First“.
Hierbei wird davon ausgegangen, dass alle wichtigen Elemente auf der kleinsten Displaygröße angezeigt werden und auf den größeren Displays weitere, vielleicht unwichtigere Elemente geladen werden.
Es gibt immer mehr Nutzer von mobilen Geräten, was den Einsatz von Responsive Design notwendig macht, um die optimale Nutzung einer Website möglich zu machen. Mangelnde oder schlechte Usability kann unter anderem zu Conversion-Verlusten führen. Die Kommunikation zwischen Website-Besitzer und Nutzer sowie die User Experience sollte nicht am Endgerät scheitern, sondern jedem Nutzer gleichermaßen zur Verfügung stehen.
Umsetzung
Umgesetzt wird ein Responsive Design mit HTML5 und CSS3. Mit sogenannten Media Queries können Informationen wie die Bildschirmgröße, Auflösung oder Format und Fähigkeiten wie Eingabemöglichkeiten vom Endgerät erfragt werden. Damit das Responsive Design optimal funktioniert sollten Inhalt und Layout voneinander getrennt werden.
Beim Responsive Design wird der gleiche Inhalt in einem abgewandelten bzw reduzierten Design dargestellt. Oft macht es Sinn, auf gewisse Elemente zu verzichten, da die Bildschirme auf mobilen Endgeräten kleiner sind. Grundsätzlich werden aber die vorhandenen Elemente anders strukturiert, da zum Beispiel vom Quer- ins Hochformat gewechselt wird. Der HTML Code wird nicht verändert, es wird aber ein anderes Style Sheet verwendet.
Bei dieser Umstrukturierung der Elemente ist es wichtig zu überlegen, welche Elemente wichtiger sind und welche entweder im Design „nach unten rutschen“ oder sogar ganz gestrichen werden.
Auch das Menü kann auf mobilen Geräten anders gestaltet sein, damit es für die Touch-Bedienung optimiert ist. Weitere Elemente, die angepasst werden können, sind Texte (verschiedene Größe auf verschiedenen Geräten) oder auch Bilder (unterschiedliche Auflösung).
SEO
Je nachdem wie komplex die Website ist, kann die Entwicklung deines Responsive Designs sehr aufwendig sein. Wenn es dann aber einmal entwickelt wurde, ist es einfach zu pflegen. Da die Usability auf mobilen Geräten erhöht wird, kann sich der Aufwand bezüglich SEO lohnen, da die Verweildauer auf einer Website erhöht wird. Dadurch verbessert sich nicht nur das Ranking der Seite, sondern auch die Absprung-Rate. Innerhalb der Texte können Suchwörter mit Links insbesondere durch SEA optimiert werden.
Eine eigene Website für mobile Geräte ist nicht zu empfehlen, da sie extra optimiert und gepflegt werden muss. Darüber hinaus wird sie nicht gut ranken und bei Suchmaschinen nicht gefunden werden, da meistens Duplicate Content vorhanden ist und keine Backlinks.
Auch bezüglich der Keywords kann das Responsive Design eine Rolle spielen. Über ein Smartphone gibt man in der Regel viel kürzere Suchanfragen ein als am Computer über eine physische Tastatur.
Der Googlebot kann bei einem Responsive Design außerdem Ressourcen sparen und somit mehr Inhalte der Website indexieren.
Quellen
https://de.ryte.com/wiki/Responsive_Design
https://www.responsive-webdesign.mobi/was-ist-responsive-webdesign/
Du siehst gerade einen Platzhalterinhalt von pixelwerker.de. Um auf den eigentlichen Inhalt zuzugreifen, klicke auf den Button unten. Bitte beachte, dass dabei Daten an Drittanbieter weitergegeben werden.
