Responsive Web Design

Responsive Web Design

Bis vor einigen Jahren wurden Web­seiten ausschließlich an fest stehen­den PCs an­ge­schaut. Seitdem es Smart­phones und Tablets gibt, gab es einen grund­le­genden Wandel. Die Nutzung von solchen mobilen Gerä­ten hat stark zugenommen und ein Ende dieses Wachstums ist nicht in Sicht.

Darum ist es umso wichtiger, dass Ihre Webseite im so genannten Responsive Web Design erstellt ist. So erhalten Sie eine Webseite für alle Geräte.

Was ist Responsive Web Design?

„Beim Responsive Web Design handelt es sich um eine gestalterische und technische Vorgehens­weise zur Erstellung von Web­seiten, so dass diese auf Eigen­schaf­ten des jeweils benutzten End­geräts, vor allem Smartphones und Tablets, rea­gieren können.“

Quelle: Wikipedia

Welche Geräte werden unter­stützt?

StraightSoft entwi­ckelt Ihre Webseite von vorn­herein ausge­richtet auf eine Vielzahl möglicher Geräte, sodass die Darstellung überall hervor­­ragend ist. Folgende Geräte­­gruppen werden unter­stützt:

  • extra klein
    Smartphones und alles, was kleiner ist
  • klein
    Tablets im Hochformat
  • mittelgroß
    Tablets im Querformat und ältere Monitore im 4:3-Format
  • groß
    normale Breitbildmonitore im 16:9-Format, Fernseher und alles, was noch größer ist

Wie funktio­niert Responsive Web Design?

Eine Webseite, die im Responsive Web Design umgesetzt wurde, reagiert zu jeder Zeit auf die Größe des Bildschirms, auf der sie angezeigt wird. Daher auch der Name „Responsive“.

 Verkleinern Sie doch mal Ihr Browserfenster bzw. drehen Ihr Smartphone/Tablet und schauen, wie sich die StraightSoft-Webseite verhält!

Der Bildschirm ist alles

Das zentrale Element des Responsive Web Design ist die Einteilung aller möglichen Bildschirm­größen in Klassen. Die Klasse Smart­phone wird bspw. durch eine Bild­­schirm­breite von 0 bis 767 Pixeln be­grenzt. Abhängig von der vorlie­genden Bild­­schirm­größe können so u. a. die Anzahl der ange­­zeigten Spalten sowie deren Maße angepasst werden.

Alles ist relativ

Breiten und Höhen aller Elemente einer Webseite können nicht mehr nur absolut (z. B. 50 Pixel), son­dern auch relativ (z. B. 50%) angegeben werden.

Was nicht passt, wird passend gemacht

Befinden sich für eine bestimmte Bild­­schir­m­­größe mehr Spalten neben­ein­ander, als auf dem Bild­­schirm angezeigt werden können, werden diese unter­ein­ander „gestapelt“.

Was kann abhängig vom verwen­deten Gerät verändert werden?

Der Ansatz des Responsive Web Design ist sehr weit gefasst. Daher können nicht nur die Darstellung einer Seite für jedes einzelne Gerät genau festgelegt, sondern auch Inhalte ausge­tauscht werden. Möglich sind:

  • Darstellung einer Webseite
    • Layout, d. h. die Anordnung von Elementen Ihrer Webseite
      Beispiel: Spalten, die auf einem PC nebeneinander Platz finden, sollen auf dem Smartphone untereinander erscheinen.
    • Gestaltung
      Beispiel: Farben, Schriften, Grafiken, ...
  • Funktionen einer Webseite
    Beispiel: Auf dem Smartphone soll ein anderes Menü erscheinen als auf einem PC.
  • Inhalte einer Webseite
    Beispiel: Auf dem Smartphone sollen andere Inhalte als auf einem PC angezeigt werden.