itweb Webdesign & SEO - Obachgasse 10, 1220 Wien

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

Coca Cola Logo Responsive XL
Coca Cola Logo Responsive XL
Coca Cola Logo Responsive XL