Pixelwerker - Werbeagentur in Kassel

Responsive Design

Jetzt Kontakt aufnehmen!

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.
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/
https://perimetrik.de/glossar/responsive-webdesign/

Ähnliche Einträge

Bewertung:
Bewertungen: 137 Ihre Bewertung: {{rating}}

Vereinbaren Sie jetzt Ihre
unverbindliche Erstberatung

Rufen Sie jetzt an & vereinbaren
Sie Ihren persönlichen Termin!

Britta Schwab
Britta Schwab

Agenturleitung & Marketing-Rockstar

"Ich freue mich darauf Sie und Ihr Projekt bei einer Tasse Kaffee kennenzulernen".

Oder schreiben Sie uns jetzt eine Nachricht:

Geben Sie Ihre E-Mail-Adresse an, unter der wir Sie kontaktieren können.

Sagen Sie uns worum es geht und für welche Themen Sie sich interessieren.

Wir benutzen Cookies um die Nutzerfreundlichkeit der Webseite zu verbessen. Durch Deinen Besuch stimmst Du dem zu.