Magazin für digitale Arbeit & Kultur
Responsive design

Acht schöne Beispiele für Responsive Design

Saki Athanassios Danoglidis
#responsive design

Überall und jederzeit mobil online sein zu können, ist für viele Nutzer mittlerweile eine Selbstverständlichkeit. Einige Webseiten stellen deshalb passend zur Desktop-Version eine App bereit, um die Nutzer auch unterwegs begleiten zu können. Diese bieten allerdings oft nicht die gleichen Funktionen, wie die Desktop-Version und auch beim Design hat man als User oft den Eindruck, nur eine Sparvariante auf dem Smartphone serviert zu bekommen.

Deshalb wenden bereits viele Webseiten Responsive Design an und machen so – eine korrekte und effektive Umsetzung von Responsive Design vorausgesetzt – das Anbieten einer App überflüssig.

Die Vorteile liegen klar auf der Hand: Zum einen passt sich die Seite sich an die Größe des Displays des mobilen Endgeräts an, den sogenannten Viewport, an. Design, Look und Charakter der Seite bleiben weitestgehend erhalten. So muss sich der Besucher, der die Desktop-Variante kennt, auf auf der geschrumpften Variante nicht erst komplett neu orientieren. Denn durch die adaptive Anpassung der Bildschirmdarstellung die Elemente auf der Website lediglich anders angeordnet. Aus einem dreispaltigen Layout auf dem Desktop wird auf dem Smartphone nur noch eine Spalte.

Doch Responsive Design hört hier noch nicht auf. Im Beispiel der Seite www.bostonglobe.com (an zweiter Stelle unten) führt die Erkennung des kleineren Viewports des mobilen Endgeräts nicht nur zu einer Layout-Änderung von drei auf eine Spalte, es werden darüber hinaus auch Anpassungen im Hauptmenü vorgenommen: Die Hauptkategorien werden unter dem Begriff “SECTIONS” zusammengefasst und das auf Touch-Devices unnötige Rich Drop Down Menu der Desktop-Version verschwindet.

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.

Wie Responsive Design in der Praxis aussehen kann, und welche Internetseiten besonders schöne Ergebnisse vorweisen, seht ihr in der folgenden Galerie:

webdesignerwall

Boston Globe

Earth Hour

Splendid

Food Sense

Ben Handzo

St Pauls School

2012.dconstruct

Über den Autor
Saki Athanassios Danoglidis

Saki Athanassios Danoglidis

Alle Beiträge

Saki Athanassios Danoglidis hat Jura, Sprachwissenschaften sowie Geschichte in München, Freiburg und Athen studiert. Seit 2011 arbeitet er als Redakteur bei S&S Media.
Kommentare
  1. Martin2013-06-27 11:05:55

    Hallo,

    ich bin auf der Suche nach coolen Beispielen für eine im Responsive Design umgesetzte Website. Dabei bin ich auf Eure Seite und den Artikel gestoßen. Vielen Dank zunächst einmal für den schönen Überblick.

    Zuvor ware ich selbst auf der Suche nach Responsive Seiten und habe mir die großen Player mal angeschaut. Aber selbst diese arbeiten oft noch nicht mit "skalierenbaren" Websites. Insofern passten Deine guten Beispiele optimal!

    Eine Anmerkung hätte ich jedoch noch: Bei der Suche nach Responsive Design Seiten habe ich ein Tool verwendet, dass mir Websites in unterschiedlichen Auflösungen darstellt (spart ein wenig Zeit). Damit habe ich mir auch gerade mal Eure Website angesehen. Diese sieht auch schon fast perfekt aus, nur auf dem iPhone (bzw. Smartphone) rutscht die Teaserleiste rechts noch ein wenig raus. Kann das sein?

    www.responsive-design-test.de/website-test?url=http://webmagazin.de/"

    Vielleicht ist das ja auch Absicht, hatte mich nur gewundert, weil in allen anderen Auflösungen die Seite wirklich TOP aussieht!

    Würde mich über eine kurze Antwort freuen :-)

    Viele Grüße,
    Martin

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>