Responsive Design – fünf schöne Beispiele
Kommentare

Korrekt und effizient umgesetztes Responsive Design macht Apps von Desktop-Seiten überflüssig. Die Vorteile liegen klar auf der Hand: Zum einen passt sich die Seite an die Größe des Displays des mobilen Endgeräts, den sogenannten Viewport, an. Design, Look und Charakter der Seite bleiben weitestgehend erhalten. So muss sich der Besucher, der die Desktop-Variante kennt, auf der geschrumpften Variante nicht erst komplett neu orientieren.

Denn durch die adaptive Anpassung der Bildschirmdarstellung werden die Elemente auf der Website lediglich anders angeordnet. Aus einem dreispaltigen Layout auf dem Desktop wird auf dem Smartphone nur noch eine Spalte.

Möglich machen das unter anderem sogenannte Media Queries, ein CSS3-Konzept, welches unterschiedliche Designs in Abhängigkeit von bestimmten Eigenschaften, wie zum Beispiel die Größe des Gerätes oder dessen Bildschirmauflösung, erlaubt.

In folgender Galerie haben wir Euch heute fünf schöne Beispiele für gut umgesetztes Responsive Design zusammengestellt:

 

html5

Quelle: jessicahische.is

 css

Quelle: jessicahische.is

responsive

Quelle: Tattly.com

webdesign

Quelle: Tattly.com

css

Quelle: Harvard.edu

canvas

Quelle: Harvard.edu

html5

Quelle: Alistapart.com

responisve design

Quelle: Alistapart.com

design

Quelle: Fork-cms.com

design

Quelle: Fork-cms.com

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -