Responsive Webdesign und der mobile first Ansatz

Responsive Webdesign

Die an eine Display Auflösung angepasste Darstellung von Webseiten wird als Responsive Webdesign bezeichnet. Zum einen wird die gesamte Struktur der Webseite responsive ausgelegt. Dadurch kann der Webdesigner festlegen, wie sich bestimmte Bereiche der Webseite bei einer veränderten Bildschirmauflösung verhalten sollen.
Typische Veränderungen in der Struktur sind der an die Bildschirm-Proportionen angepasste Header, das zu einem Hamburger-Icon zusammenklappende Navigationsmenü und die unter den main-content Bereich nach unten rutschende Sidebar. Zum anderen werden auch alle vom Benutzer generierten Inhalte wie Texte, Bilder, Videos, Kontaktformulare etc. so dargestellt werden, dass sie auf allen Endgeräten - egal ob Desktop PC, Laptop, Tablet oder Smartphone - immer optimal ablesbar sind. Das sind z.B. mit float, flexbox oder css-grid nebeneinander angeordnete Elemente, die auf einem Smartphone untereinander dargestellt werden, weil sie sonst nicht mehr, bzw. nur noch durch Vergrößerung ordentlich ablesbar wären.

Weitere Vorteile von Responsive Design sind angepasste Schriftgrößen, Zeilenabstände, Abstände von klickbaren Elementen wie z.B. Hyperlinks und die Reduzierung der Scroll-Richtungen alleinig auf die vertikale Achse. Ständiges Vergrößern von zu kleiner Schrift und zu kleinen Schaltflächen entfällt somit.
Das Ziel bei der Gestaltung von Webseiten im Responsive Webdesign ist eine stetig optimale Zugänglichkeit zu allen Inhalten, und das unabhängig vom Endgerät. Spätestens seit der “mobile first” Initiative seitens Google, bei der nicht mehr vom Desktop PC ausgegangen wird und dann für das mobile Gerät angepasst wird, sondern die entgegengesetzte Herangehensweise empfohlen wird, bei der zuerst für das mobile device entwickelt, und anschließend erst für Desktop Geräte angepasst wird, ist die Verwendung von Responsive Design für ein gute Rankings sehr ratsam.

Bei mobilen Endgeräten verwendet Google automatisch die mobile Version der Suche. Im mobilen Browser treten nicht optimierte gegen mobil optimierte Webseiten an. Die Eignung der Webseite für das Endgerät fließt in die Bewertung mit hinein und wirkt sich so auf das Ranking in der mobilen Suche aus.

Categories: