Erstellt: 27. Mai 2015

Responsives Webdesign

Begriffe

Marco Kuoni

Programmierung, Beratung

Responsives Webdesign ermöglicht die bestmögliche Darstellung auf allen Endgeräten

Wer kennt es nicht? Man steht vor dem Konzertlokal und will auf dem Smartphone kurz nachschauen, wann das Konzert beginnt oder man sitzt bequem mit dem Tablet auf dem Sofa und liest die aktuellen News aus aller Welt. Beide Szenarien sind nur angenehm möglich dank Responsivem Webdesign.

«Beim Responsive Webdesign (Deutsch: Responsives Webdesign) handelt es sich um ein gestalterisches und technisches Paradigma zur Erstellung von Websites, so dass diese auf Eigenschaften des jeweils benutzten Endgeräts, vor allem Smartphones und Tabletcomputer, reagieren können.» – Wikipedia


port_8sp_get2gether_1.png

Was für Geräte stehen in einem Haushalt, mit welchen wir im Web surfen können?

  • Fernseher (30 – 70 Zoll)
  • Desktop Computer (17 – 30 Zoll)
  • Laptops (13 – 17 Zoll)
  • Subnotebooks (10 – 13 Zoll)
  • Tablet (7 – 12 Zoll, Hoch- und Querformat)
  • Smartphones oder andere Geräte (unter 5 Zoll, Hoch- und Querformat)

Diese Beispiele zeigen klar, dass die Anforderungen an eine Website stetig steigen. Bei dem Responsiven Webdesign geht es primär um die technische Umsetzung eines anpassungsfähigen Website-Layouts. Jedoch führt der Begriff noch weiter, denn die unterschiedlichen Gerätschaften unterscheiden sich in verschiedenen Faktoren:

  • Bildschirmgrössen
  • Hoch- und Querformat
  • Höhere Pixeldichten (z. B. Retina)
  • Touchbedienung
  • Internet-Geschwindigkeiten
  • Zusätzliche Sensoren oder Apps

Nun geht es darum, dass die Website automatisch die unterschiedlichen Geräteeigenschaften erkennt und dem User maximalen Komfort bereitstellen kann. Als Beispiel: Ich möchte auf meinem Smartphone die Nummer des Restaurants, in welchem ich einen Tisch reserviere, gleich anklicken können. Oder eine auf mein Tablet angepasste Darstellung, dass ich nicht laufend rein- und rauszoomen muss, um von Punkt zu Punkt zu navigieren, wenn ich  z. B. im Zug die News lesen möchte. Oder auch wenn ich den Weg vom Bahnhof zum Kino suche, sich gleich meine bevorzugte Navigationsapp öffnen lässt.


Wie funktioniert es?

responsive.png

Die richtige Art, Responsives Webdesign umzusetzen, basiert auf HTML5 und CSS3. Normalerweise hat man immer gleiche Inhalte und ändert nur die Darstellung. Das geschieht mit sogenannten Formatierungsbefehlen in CSS3 (Media Queries: Abfragen der Art und der Grösse des Mediums, welches die Website darstellt). Diese Media Queries legen Umbruchpunkte (Breakpoints) fest, bei welchen das Design springen kann. Dass heisst z. B., dass ein dreispaltiges Design auf ein zweispaltiges reduziert wird oder gewisse Inhalte ein- bzw. ausgeblendet werden. Zwischen den einzelnen Umbruchpunkten ist das Design in der Regel flexibel und versucht, den freien Raum bestmöglichst auszunutzen.

Bei Fragen zum Responsiven Webdesign oder allfälligen Umsetzungswünschen können Sie sich ungeniert mit uns in Verbindung setzen ( marco@lemonbrain.ch).