Webdesign-Trends: Fünf responsive Webseiten-Layouts analysiert

Responsive Webdesign bedeutet, dass ein Webseiten-Layout automatisch auf unterschiedliche Bildschirmgrößen reagiert und sich entsprechend dem Bildschirmformat anpasst. Es ist also kein Wunder, dass beim derzeitigen Boom von Tablet PCs und Smartphones (die ja alle ganz unterschiedliche Bildschirmformate haben) responsive Webdesigns immer beliebter werden. Da bei der Umsetzung eines solch flexiblen Webdesigns nicht nur bei der technischen Umsetzung, sondern vor allem auch beim Designkonzept so einiges bedacht werden muss, habe ich mir fünf Webseiten mit responsive Layouts einmal genauer angeschaut und deren Layoutaufbau analysiert.

1. Five Simple Steps

Responsive Webdesigns analysiert

Das Webdesign von Five Simple Steps ist auf einem zwei- bzw. dreispaltigen Raster aufgebaut. Da das Design sehr minimalistisch gehalten ist, funktioniert die Umwandlung der Inhalte von der großen Bildschirmansicht, bis hin zur einspaltigen Layoutansicht auf Smartphones sehr flüssig und elegant.

Responsive Webdesigns analysiert
Die drei unterschiedlichen Layout-Ansichten vereinfacht im Überblick.

Interessant ist bei der Five Simple Steps-Webseite vor allem die flexible Umsetzung des Webseiten-Menüs. Bei der Ansicht auf Tablet PCs und Smartphones wird das zuvor rechtsbündig angelegte Menü zu einem Dropdown-Menü. Auf modernen, mobilen Geräten werden Dropdown-Menüs in einer Art Popup-Ansicht zur Auswahl auf dem Touchscreen-Display angezeigt.

Responsive Webdesigns analysiert
Die Menü-Anzeige von Five Simple Steps auf einem Android Smartphone.

2. Sparkbox

Responsive Webdesigns analysiert

Die Sparkbox-Webseite ist weniger minimalistisch, das responsive Layout funktioniert aber auch hier sehr schön. Interessant ist, dass der Footer erst bei Mausklick sichtbar wird und quasi „auffährt“. Hier sind dann zusätzliche Elemente wie Flickr-Bilder oder die neusten Tweets untergebracht.

Responsive Webdesigns analysiert
Besonders interessant ist die Anpassung des Sparkbox-Layouts im Headerbereich.

Das große Headerbild und der Webseiten-Slogan skalieren sich im responsive Layout proportional mit. Auf die Grafik der verschiedenen Bildschirme (auf der schwarzen Hintergrundfläche) wird in der Smartphone-Ansicht komplett verzichtet. Schön gelöst ist auch die Verwandlung des Menüs. Es rutscht in der Smartphone-Ansicht unter das Logo und beide Elemente werden zentriert angezeigt.

3. iAWriter

Responsive Webdesigns analysiert
Sehr elegant umgesetzt ist die Webseite der iAWriter-App. Das Layout basiert übrigens auf dem Template von Information Architects.

Responsive Webdesigns analysiert
Bei der iA Writer-Webseite ist das Header-Menü besonders raffiniert gelöst.

Spannend ist auch hier wieder die Webseiten-Navigation. Auf dem Tablet-PC wird die zuvor vierspaltige Navigation dreispaltig. Die Punkte „About“ und „Twitter“ werden jetzt in einer neu eingeführten Leiste ganz oben auf der Webseite angezeigt. In der Smartphone-Ansicht wechselt das Menü dann, genau wie bei Five Simple Steps, auf die Dropdown-Menü-Lösung.

4. Earth Hour von WWF France

Responsive Webdesigns analysiert

Eine weitere interessante Umsetzung eines responsive Layouts ist die Earth Hour-Webseite von WWF France.

Responsive Webdesigns analysiert

Auch hier ist das Menü wieder besonders interessant umgesetzt, im Smartphone-Layout schiebt sich die zuvor rechtsbündig und horizontal angelegte Navigation untereinander. Das Webseiten-Logo wird kleiner skaliert und die zwei Logo-Elemente rutschen untereinander. In der Smartphone-Ansicht wird auf das Headerbild mit der Glühbirne verzichtet.

5. Arrrcamp Conference

Responsive Webdesigns analysiert

Die Webseite der belgischen Webdeveloper-Konferenz Arrrcamp setzt das responsive Layout auch sehr interessant um. Das Webdesign ist hier insgesamt sehr großzügig angelegt und mit Hintergrundflächen und Image-Elementen umgesetzt. Auch in der Tablet PC und Smartphone-Ansicht werden die Bilder und Backgroundflächen weiter angezeigt. Spannend ist auch die Umsetzung des Headers und des Speakers-Feldes in der einspaltigen Smartphone-Ansicht.

Responsive Webdesigns analysiert
Die unterschiedlichen Hintergrundflächen bleiben auch im Tablet PC und Smartphone-Layout erhalten.

Die Navigation wechselt auch bei Arrrcamp wieder unter das Logo und die einzelnen Punkte werden größere Button-Flächen. Auf diese Weise können sie auch auf einem Touchscreen angenehm bedient werden.

Wie gefallen dir die vorgestellten responsive Webdesigns? Kennst du weitere spannende, responsive Designs oder hast du bereits eigene Erfahrungen bei der Umsetzung einer responsive Webdesign-Layouts machen können? Was sind deine Erfahrungen und welche Schwierigkeiten siehst du während des Designprozesses?

Über dein Feedback freue ich mich sehr!

23 Kommentare

  1. Hallo Ellen,

    dieser Post wird sicher einigen Leuten gefallen und vielen mit Sicherheit nochmals um einiges mehr das bald unverzichtbare Responsive Webdesign schmackhaft machen.

    Hier noch ein Link, wo man schöne Seiten sieht die auch schon auf Responsive Webdesign setzen: http://mediaqueri.es/

    Sonnige Grüße aus Berlin

    • Hallo Peter,

      vielen Dank für dein positives Feedback zum Artikel und den wichtigen Link-Tipp zur Mediaqueri.es Seite. Ich hatte im Artikel noch gar nicht darauf hingewiesen.

      Viele Grüße,
      Ellen

  2. Schöner Beitrag. Leider geht die Analyse nicht auf das ein, was das größte Manko bei den responsive Designs ist: Die Seitengröße. Ich hab das mal durch Yslow gejagt:

    Seite 1: 526kb
    Seite 2: 769kb
    Seite 3: 586kb
    Seite 4: 94kb
    Seite 5: 627kb

    Es ist übrigens schön ironisch, dass ausgerechnet die Seite der Agentur, die für mobile Webseiten wirbt, die fetteste ist ;-)

    • Angesichts moderner Bandbreiten auch im mobilen Bereich ist das nicht wirklich ein Manko. Nach dem ersten Laden liegen die Scripte im Cache, so what.

      • Wobei gerade Mobil weniger gecacht wird und die Bandbreite schon geringer ist. Nicht selten haben die mobilen Browser gar ein aktives Prefetching und sorgen damit für noch mehr Ressourcenverschwendung. Das Manko wird so schnell nicht anders und ein Ansatz der über CSS hinaus geht ist wichtig. Insofern ist die Größe noch immer entscheidend; auch nach Jahren und größeren Bandbreiten ist dies ein Thema, was jedes Tool und jede Diskussion darum auch immer wieder aufgreift. Die Idee die hier ausgewertet wird, ist in erster Linie im Punkt Design interessant und Usabily, aber nicht im Rahmen Optimierung für das mobile Dasein – ganzheitlich. Wenn Browsersniffing und Gerät nicht so ein „schmutziges“ Geschäft wäre, könnte man damit einen besseren Ansatz fahren.

      • Das Argument der »modernen Bandbreiten« trifft nur auf diejenigen zu, die diese auch tatsächlich zur Verfügung haben. Was soll der (nicht ganz unerhebliche) Rest machen?

    • bei einer seite wie spiegel online sollte um jedes KB gekämpft werden, keine frage, bei einer agenturseite oder firmenseite (mittlerer größe) halte ich das für übertrieben. danke für den tipp mit yslow.

    • Hallo Andi,

      vielen Dank für dein Feedback zum Artikel und zum Thema responsive Layouts. Wie auch Frank schon gesagt hat, geht es in diesem Artikel vor allem um den Design-Ansatz.

      Das Thema Geschwindigkeit und Optimierung ist aber natürlich auch ein wichtiger und spannender Aspekt. Ich werde das Thema auf jeden Fall noch in einem weiteren Artikel aufgreifen.

      Viele Grüße,
      Ellen

  3. Ich finde den Ansatz von Andi mit der Ladegeschwindigkeit ein bisschen komisch.

    Zum einen weil jedes dieser „Test-Tools“ wiederum ein anderes Ergebnis liefern wird als wie das vorherige und zudem auch ALLE anders messen. Zum anderen wird es immer irgendwo einen so genannten Flaschenhals geben.

    Bisher hatte ich noch kein Probleme mit meinem iPhone von Unterwegs per 3G die Seiten aus dem Showcase beim Yoko Theme zu laden. Ja OKAY, es dauert ein bisschen, eben weil es 3G Verbindung ist, aber was kümmert mich das?

    • Christian Scholz-Flöter 8. Januar 2013

      Und dass es „immer irgendwo einen so genannten Flaschenhals geben“ wird, ist ein stichhaltiges Argument gegen Größen- bzw. Ladezeitoptimierung einer Website?

      Egal wie schnell heutige Internetverbindungen sind/sein können — dauert der Seitenaufbau zu lange, ist der potenzielle Besucher/Kunde wieder weg, bevor wir ihm eine einzige Botschaft übermitteln konnten.
      Es gibt bestimmt sehr geduldige Menschen auf der Welt. Aber dass nun gerade (und nur) die auf die von uns gebauten Websites gelangen, ist doch eher fraglich.

      Verbreitete Meinung ist es, dass Internetnutzer der heutigen Zeit Websites eher scannen, als sie zu lesen. Texte in vielen Bereichen des täglichen Lebens werden immer kürzer; nicht erst seit Twitter & Co (selbst Spiele sind heutzutage vermehrt auf schnelles Konsumieren ausgerichtet; lange, stimmungsvolle Textpassagen entfallen zugunsten von kurzen Dialogoptionen).

      Meines Erachtens ist Ladezeitoptimierung heute genauso wichtig wie in den Neunzigern des letzten Jahrhunderts.

  4. Hallo Ellen,

    wieder ein toller Artikel. Mich interessiert besonders, ob und wie man Bilder und Texte in den Beiträgen formatieren muß. Und wenn, wie?

    Gruß Björn

  5. Für mich stellt sich eher die Frage nach der Benutzerfreundlichkeit
    solcher Seiten. Oft kein Menu auf den ersten Blick, lange scrollen,
    schlechtere Lesbarkeit bei mehrspaltigen Texten, Übersichtlichkeit …

    Zudem, wessen Zielgruppe sucht über ein Smartphone?

    Wie steht es mit der Browserkompatibilität?

    Danke und liebe Grüsse
    Monika

Hinterlasse eine Antwort

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