Responsive Design

Mit Aufkommen von Smartphones und Tablet wurde klar, dass man die Größe des Bildschirms, auf dem die Website betrachtet wird, nicht mehr vorhersagen kann. Man kann sich nicht mehr auf eine Größe beschränken, vielmehr soll sich nun die Seite der Bildschirmgröße anpassen.

Breakpoints und Media Queries

Die Idee eines Breakpoints ist, an definierten Stellen Umbrüche des Seiteninhalts einzufügen. Wenn wir eine Website bauen wollen, die sich an das Ausgabegerät anpasst, ist es nötig die Eigenschaften des Geräts zu kennen.

Bei Media Queries handelt es sich um ein Konzept, welches mit CSS3 eingeführt wurde und das Prinzip des Medientyps in CSS2 erweitert. Anstatt starr zu definieren, welches Medium das Zielmedium ist, können mit Media Queries die Eigenschaften des aktuellen Gerätes direkt abgefragt werden:

  • Breite und Höhe des Browserfensters
  • Breite und Höhe des Gerätes
  • Orientierung (Quer- oder Hochformat)
  • Bildschirmauflösung


Responsive Design = Flexibler Raster + Media Queries

Wir gehen immer noch von einem Gestaltungsraster (Grid) aus, dieses ist aber nicht mehr starr. Vielmehr geht es nun um Prozent statt um Pixel. Man spricht von einem Fluid Grid. Dabei kann man immer noch mit einer starren Gestaltung beginnen und rechnet dann die Prozentzahlen einzelner Blöcke zur Gesamtbreite aus. Dank der Media Queries kennen wir zudem die Eigenschaften des jeweiligen Anzeigegeräts und können festlegen, wann sich das gesamte Layout ändern soll. Z. B. wenn von mehreren Spalten zu zwei oder gar einer Spalte gewechselt werden soll.

Weitere wichtige Punkte

Mit einem flexiblen Raster und Media Queries alleine ist es aber noch nicht getan. Spätestens auf dem hochformatigen Bildschirm eines Smartphones muss die Navigation anders dargestellt werden, meistens mit dem von Facebook und anderen Apps bekannten "Hamburger-Icon" (drei horizontalen Strichen). Und man muss sich die Inhaltselemente einer Website anschauen. Was passiert mit einem querformatigen Slider im Hochformat? Wie werden Tabellen dargestellt? Und wie sieht eigentlich die Ladezeit der Inhalte auf einem Smartphone bei schlechter Verbindung aus?

Was können wir für Sie tun?

Es ist natürlich einfacher, bei einem Redesign alle diese Punkte von vorne herein zu bedenken und die Seite responsive zu gestalten und zu programmieren. Aber auch bei bestehenden Seiten lassen sich die Templates und Inhaltselemente entsprechend anpassen, auch wenn das oft mehr Aufwand ist.

In der rechten Spalte finden Sie als Beispiel drei Screenshots der Website www.fundresearch.de am Desktop, auf einem Tablet und auf einem Smartphone.

Weitere Beispiele:
www.csi-online.de
www.finde-deinen-whisky.de
www.hauraton.com
www.knx.org
www.kernenergie.de
www.weick-bau.de

Sprechen Sie uns an - wir machen Ihnen gerne ein Angebot!

Desktop
iPad
iPhone
Responsive Design : Navigate AG - Die Internetagentur - Karlsruhe