Responsive

Was bedeutet Responsive?

Responsive (deutsch reagierend, reaktionsfähig) gibt im Bereich des Webdesigns an, dass sich eine Website an die Bildschirmbreite dynamisch anpasst. Die Website Elemente werden dabei je nach Breite schmaler oder breiter. In manchen Fällen werden sie auch in geänderter Form oder gar nicht angezeigt.

Was ist Responsive Design bzw. Responsive Webdesign?

Um eine Website responsive zu machen, muss eine bestimmte Technik eingesetzt werden. Sogenannte Media Queries geben der Website vor welches Aussehen ein bestimmtes Element für eine bestimmte Breite des Bildschirmes haben soll.

Dabei legt man jedoch nicht für jedes Pixel ein eigenes Design fest, sondern teilt die Bildschirmbreiten in gängige Formate. Eines der größten Design-Frameworks (Bootstrap) teilt die Breiten bspw. in folgende Stufen ein:

• XS: <576px (kleine Smartphones)
• SM: ≥576px (größere Smartphones, kleinere Tablets Hochformat)
• MD: ≥768px (kleinere Tablets Querformat, größere Tablets Hochformat,)
• LG: ≥992px (größere Tablets Querformat, kleine Laptops)
• XL: ≥1200px (Laptops, größere Monitore)

Innerhalb dieser Bereiche verändert sich das Design stufenlos. Die Stufen können auch frei geändert werden, sie haben sich jedoch in der Praxis bewährt.

Der Vorteil von Responsive Design, gegenüber der damals verbreiteten Technik eine eigene mobile Version einer Website zu bauen, ist die Flexibilität. Egal ob ein Smartphone bspw. 5.5‘‘, 5.7‘‘ oder 6.2‘‘ Bildschirmgröße hat und egal welche Auflösung ein Gerät besitzt, es findet sich immer eine Stufe, die für den Bildschirm passt.

Warum Responsive Webdesign?

Auch Suchmaschinen haben mittlerweile erkannt, dass eine Vielzahl an Website-Besuchen und Suchanfragen über mobile Endgeräte passiert. Daher wird eine Website nun auch nach Ihrer Benutzbarkeit auf Smartphones bewertet. Außerdem arbeitet Google aktuell mit dem Mobile First Index, der die Inhalte der mobilen Ansicht für die Indexierung der Suchergebnisse heranzieht. D.h. es ist hier wichtig, dass die Inhalte für Smartphone und Desktop eher gleich sind als, wie früher, drastisch reduziert auf der mobilen Ansicht. Das Responsive Design hat hier klar den Vorteil, dass die Inhalte gleich sind, sich nur entsprechend anpassen.

Außerdem ist natürlich die User Experience und Benutzerfreundlichkeit besser, wenn eine Website für das Geräte, von dem aus sie besucht wird, optimiert ist. Das schafft Vertrauen und senkt die Absprungrate der Nutzer.

Responsive Logos

Der Trend des responsiven Designs hat sich mittlerweile auch im Logo Design etabliert. Wo früher Logos noch starr waren und immer gleich aussahen, stehen heute verschiedene Größenvarianten von Logos zur Verfügung. Hier ein Beispiel