Responsive Design erklärt!

responsive_desktop-laptop-tablet-mobile.jpg

Der neue Webstandard ist responsives Design. Es wird dafür verwendet die Webseite auf die Größen aller Endgeräte zu optimieren.

Bisher war es üblich eine Desktop und eine Mobile Version der Webseite zu erstellen. Die Webseiten sind komplett getrennt und haben auch meist ein komplett anderes Layout.
Diese Lösung ist nicht Zukunftsorientiert, daher wurde ein neuer Standard eingefügt, das responsives Design. Somit ist es möglich den Nutzer den gleichen Inhalt zur Verfügung zur stellen, ohne eine extra Seite für Mobilegeräte einzurichten.

Aufteilen der Webseite in Desktop und Mobile:

 

Erkennbar an den verschiedenen URL's: www.beispiel.de für Desktop und m.beispiel.de für Mobil.

Die Webseite mit responsives Design:

 

Die URL bleibt einheitlich. Das Browserfenster kann beliebig verändert werden. Haben Sie unsere Webseite über Ihren Desktopbrowser offen? Dann können Sie Ihr Browserfenster vertikal groß und kleiner schieben. Das Design der Webseite passt sich der Browsergröße an.

Um ein responsives Design zur erstellen werden folgende Eigenschaften vom Entwickler beachtet:

  •         Breite und Höhe des Browserfensters
  •        Größe des Gerätes selbst
  •        Bildschirmauflösung
  •        Orientierung (Hoch- oder Querformat)

-        Eingabemöglichkeiten (Tastatur, Fingergeste „Touch“, Sprache)

Seit dem 21. April 2015 empfiehlt Google Webseiten auf responsives Webdesign zu entwickeln. Da ab diesen Tag „mobile-friendly“ ein Ranking-Signal wird. Webseiten ohne responsives Webdesign verlieren am Ranking.
Testen Sie Ihre Webseite hier.

09.10.2015