Was ist Responsive Webdesign?
Die heutige Herausforderung ist die Website eines Unternehmens auf verschiedenen Endgeräten nutzerfreundlich und bedienbar darzustellen. Sei es auf lokalen Rechnern oder den mobilen Endgeräten. Das Layout der Website wird so flexibel wie möglich gestaltet, dass eine entsprechende Darstellung für den Nutzer geboten werden kann.
Responsive Webdesign in einem Video erklärt
In diesem Video erklären wir den Begriff „Responsive Webdesign“
Infografik zu Responsive Webdesign
Infografik zu „Responsive Webdesign“
Warum eine responsive Website?
Geräteübergreifend, sei es der Desktop Computer, das Notebook, Tablet oder Smartphone, theoretisch sprechen wir hier von über 200 verschiedene Bildschirmauflösungen! Nutzer wollen nicht mehr am Handy auf einer Website zoomen müssen, um diese bedienen zu können – das Ergebnis von nicht mobilen oder responsive Seiten: Sie springen in den meisten Fällen von dieser ab und sind somit verloren! Mit über 56 Millionen mobilen Nutzern allein in Deutschland (3,5 Milliarden weltweit!) und der Marschrichtung „mobile First“ seitens Google, seit 21.4.2015 gilt mobile als Rankingfaktor, ist das Thema mobile oder responsive Webseite ein „must have“!
Auflösungen von Geräten
Auf den Endgeräten gibt es verschiedene Auflösungen, hier Beispiele:
- Smartphone
320px bis 767px
oder: 854 x 480, 960 x 540, 1136 x 640 Pixel - Tablet
768px bis 1023px
quer gehalten: 768 x 1024, 800 x 1280, 1536 x 2048 Pixel
hochkant: 1024 x 768, 1280 x 800, 2048 x 1536 Pixel - Desktop
1024px+
1280 x 720, 1920 x 1080 , 2560 x 1440 Pixel
Welche Vorteile bietet eine responsive Website?
Ein responsive Design besitzt den wesentlichen Vorteil, dass Sie nicht verschiedene Versionen (Desktop/Mobile) Ihrer Webseite pflegen müssen. An einer Stelle eine Textpassage geändert, so ist diese bei passendem Design auch auf jedem Endgerät entsprechend angepasst und sichtbar. Das programmierte Design ist somit hardwareunabhängig und zukunftsfähig.
Die Internetadresse URL ist immer gleich, d.h. es gibt keine verschiedenen Versionen von m.meineseite.de und meineseite.de! Dies ist auch bei Werbemaßnahmen von Vorteil, da Sie den Nutzer auf eine URL senden.
Google liebt mobile Webseiten, Sie stellen einen klaren Vorteil für Nutzer dar und gelten als Rankingfaktor.
Wie funktioniert eine responsive Website?
Die Basis einer responsive Website ist ein Raster, worin die Breite der Seite durch Prozentwerte definiert ist und sich so automatisch an das jeweilige Endgerät anpasst. Der Content, Texte, Videos oder Bilder, werden je nach Platz entsprechend größer oder kleiner angezeigt. Mittels CSS werden wiederum Auflösungen definiert, innerhalb derer sich das Seitenlayout auch verändern kann. So können beispielsweise Elemente nach unten gerückt werden, sofern der Viewport kleiner als 500 Pixel ist.
Wann sollten Sie über eine responsive Webseite nachdenken?
Eine Website responsive zu entwickeln ist zeitaufwändiger und damit teurer in der erstmaligen Erstellung, jedoch ist dies heute im Bereich Webdesign ein „state of the Art“.
Wird Ihre Homepage häufig mobil (Handy/Tablet) aufgerufen – Sie wünschen sich ein modernes Layout oder denken an die Usabilty Ihrer Nutzer – so ist ein responsive Webdesign die Lösung. Weiterhin pflegen Sie nur noch an einer Stelle und häufige Änderungen an der Website bringen somit auch für Sie eine Zeitersparnis mit.
Eine bereits bestehende Seite, die derzeit noch nicht responsive ist, sollte aus Gründen der Effektivität und damit auch Kostengründen einem Relaunch unterzogen werden.
Responsive Webdesign und Suchmaschinenoptimierung (SEO)
Durch eine bessere Usability Ihrer Website, verbessert sich die Aufenthaltsdauer, Absprungrate, jegliches Signal gegenüber Google, dass Ihnen Ihre Webseite und die Nutzer wichtig sind. Eine Investition in Responsive Webdesign und verbesserte Signale wirken sich wiederum positiv auf die Rankings aus. Aus der SEO Sicht verbessern Sie auch die Problematik des Duplicate Content, da es nur noch eine URL gibt, die es zu pflegen gilt und nicht eine Desktop oder mobile Webseite. Auch aufgrund „mobile first“ werden Sie einen Bonus durch die Suchmaschinen erhalten.
Weiterführende Links
Vorüberlegungen und weitere Vorgehensweise in der Umsetzung:
https://www.onlinemarketing-praxis.de/webdesign-webentwicklung/was-ist-responsive-webdesign