Design

Voll im Flow – 26 Beispiele für responsives Design, wie es sein soll

7. April 2013
von

Responsives Webdesign ist ein Trend, um den man nicht mehr herumkommt. Vor allem der sensationelle Erfolg mobiler Clients, wie Smartphones und Tablets lässt die Nachfrage nach Layouts, die auch mobil gut funktionieren, rasant steigen. Auch wenn die ganz großen Websites sich noch schwer tun, auf den mittlerweile schon rasenden Zug aufzuspringen, ist die Hoffnung berechtigt, dass selbst die großen Web-Dinosaurier in Kürze umsteigen werden. Das wiederum wird für einen weiteren Schub in Richtung Responsiveness sorgen. Die besten Vertreter responsiven Designs bieten nicht nur eine ausgezeichnete Nutzererfahrung auf mobilen Clients, sie definieren vielmehr das User Interface neu. Im folgenden zeige ich Ihnen eine Reihe der besten Beispiele für perfekt umgesetztes responsives Design. Lassen Sie mich wissen, was Sie davon halten…

1. Future of Web Design 2013

futureofwebdesign_london2013

Wie der Name vermuten lässt, handelt es sich hierbei um die Website zur Konferenz “Future of Web Design” in London 2013. Um dem Anspruch der Konferenz gerecht zu werden, war es natürlich erforderlich, ein responsives Design zu bieten. Das gelang hier jedoch so gut, dass man durchaus von einem Benchmark, an dem sich alle anderen Tile-basierten Websites messen lassen müssen, sprechen darf. Die Website funktioniert mit drei verschiedenen Layouts für unterschiedliche Bildschirmauflösungen, verzichtet dabei aber an keiner Stelle auf Funktionalität. Sogar die Farben reagieren responsiv mit leichten Veränderungen, sobald die Anzeigebreite verändert wird.

2. Andersson Wise Architects

anderssonwise

(Noch) nicht viele responsive Designs verwenden offensiv großformatige Bilder. Die von Andersson Wise schon, und das sieht fantastisch aus. Die Übergänge zwischen den einzelnen Anzeigebreiten sind überaus gelungen. Andersson Wise muss man gesehen haben, bevor man selbst an das nächste responsive Design geht.

3. Shiny Demos

shinydemos

Mit den Mitgliedern des Opera Developer Relations Teams waren hier natürlich ausgewiesene und ausgewachsene Experten am Werk. Shiny Demos zeigt nicht nur die neuesten Open Web Standards, sondern tut das in einer Form, die beeindruckt. Leider sind nicht alle Browser in der Lage, den gesamten Designumfang der Shiny Demos zu rendern. Die responsiven Designs jedoch funktionieren sehr gut.

4. Kava Ruzova

kavaruzova

Kava Ruzova besteht nur aus einer einzelnen Seite. Die Website bindet Google Maps intelligent ein und zeigt, dass weniger mehr sein kann, auch und vor allem, wenn es um responsives Design geht.

5. Performance Marketing Awards 2013

performancemarketingawards2013

Auf den ersten Blick erscheint die Website nicht unbedingt als ein Musterbeispiel für responsives Layout. Sie werden jedoch überrascht sein, wenn Sie sie auf einem Tablet aufrufen. Hier steht dann ein Dropdown-Menü bereit und der gesamte Content wird intelligent restrukturiert. Hier steht klar der praktische Nutzen im Vordergrund.

6. William Csete

williamcsete

Naheliegenderweise gibt es einen ganzen Haufen brillianter, responsiver Websites von Webdesignern zur Darstellung der eigenen Leistungsfähigkeit. Diejenige von William Csete ist die erste in unserem kleinen Showcase hier. Was neben der modernen und schlanken Optik besonders auffällt, ist die Darstellung der Navigation. Die Usability des Menüs bedarf keiner weiteren Worte und wird intuitiv durch jedermann verstanden. Unabhängig von der Bildschirmauflösung steht die Navigation stets prominent bereit.

7. Stuff & Nonsense

stuffandnonsense

Diese Jungs wählten einen humoristischen Ansatz und verpassten ihrer Website eine Extra-Portion Spaß. Schon die großartige Verwendung von Illustrationen, der scrollende Hintergrund und die niedliche Logo-Animation machen was her. Besonders beeindruckend jedoch ist die Tatsache, dass der Mann auf dem Motorroller mit der Verjüngung des Viewports ebenfalls jünger wird. Auch der Roller geht diesen Weg mit…

8. Digital Atelier

digitalatelier

Diese Website darf in keinem Showcase über responsives Design fehlen. Immer, wenn ich dieses elegante und intelligente Design mit seinen nahtlosen Übergängen zwischen den Viewports sehe, wundere ich mich darüber, dass es bislang noch keine Awards für das Digital Atelier hagelte. Das textbasierte Menü verkleinert sich zu Icons, die Usability bleibt auf höchstem Level, egal bei welcher Auflösung.

9. Design made in Germany Issue 5

dmig5

Es wundert mich überhaupt nicht, dass diese Website die Massen begeistert. DMIG setzt eine scrollende Navigation vor einem fixen Hintergrund, der noch dazu perfekt für ein responsives Design geeignet ist, optimal um. Interessant zu sehen, wie das große “Dmig” in kleineren Layouts ersetzt wird.

10. Forefathers Group

forefathersgroup

Sicherlich. Design, das nach Vergangenheit aussieht, ist nicht jedermanns Sache. Und Responsiveness scheint auf den ersten Blick sogar einen Widerspruch dazu zu bilden. Diese Website hier setzt den Widerspruch jedoch so schick in Szene, dass ich sie nicht aus dem Showcase herauslassen konnte. Richten Sie Ihr Augenmerk besonders auf die Navigation und das unauffällige Verschwinden von Design-Elementen.

11. TIME

time

TIME Magazine ist möglicherweise der bekannteste Name in Sachen Print-Medien, ein Dinosaurier der Branche. Gar nicht an Dinosaurier erinnert die Website im Magazin-Stil, die auf großartige Weise die Prinzipien des responsiven Webdesign umzusetzen versteht.

12. Lab Fiftyfive

labfiftyfive

Wenn das spontane “Ahh” und “Ohh” über die schicken Mouse-Over-Effekte nachlässt, werden Sie die Effektivität der dualen Navigation erkennen, ein Musterbeispiel in Sachen Usability. Suchen Sie auch mal nach dem Easter-Egg auf dieser Site!

13. Hicksdesign

hicksdesign

Hicksdesign liefert den Beweis dafür, dass kleinere Auflösung nicht notwendigerweise bedeutet, dass alle Elemente geschrumpft werden müssen.

14. Deren Keskin

derenkeskin

Es gibt verhältnismäßig wenige Designs, die sich ausschließlich auf Typographie verlassen. Das hängt sicherlich damit zusammen, dass die Verwendung imposanter Bilder leichter einen imposanten Gesamteindruck zu hinterlassen vermag. Deren Keskin interessiert das nicht. Er tritt an, zu beweisen, dass auch Typographie-basierte Websites grandios aussehen können. Achten Sie auf den großen responsiven Header-Text.

15. Seminal Responsive Web Design Example

seminalexample

Ich zögerte zunächst, diese Website in den Showcase aufzunehmen. Immerhin handelt es sich bloß um eine als Beispiel gedachte Seite. Sie eignet sich jedoch ausgesprochen gut, zu demonstrieren, wie responsives Design nicht auf bloße Viewport-Änderungen beschränkt wirken kann. Hier können Sie vielmehr ein erstaunlich präzises Fein-Tuning bei der Veränderung der dargestellten Inhalte erkennen. Sogar die Fläche zur Aktivierung von Links wird in kleinen Auflösungen vergrößert. Das ist nicht üblich, aber unter Usability-Aspekten natürlich großartig.

16. FortyOneTwenty

fourtyonetwenty

Das Einbetten von Videos ist eine ganz wichtige und an Bedeutung noch steigende Art, Inhalte darzustellen. Es ist allerdings auch eine der größten Schwierigkeiten, wenn es um responsives Layout geht. FortyOneTwenty fokussiert genau diese Funktionalität mit ihrer responsiven Website. Die von Vimeo zugelieferten Videos sehen auf allen unterstützten Clients in gleicher Weise perfekt aus.

17. Oliver Russell

oliverrussell

Unangestrengte Einfachheit – so würde ich meinen Eindruck von dieser Website beschreiben. Es ist offensichtlich, dass hier eine Menge Gehirnschmalz in eine effektive Nutzererfahrung, speziell mit Blick auf kleinere Auflösungen geflossen ist. Kein Wunder also, dass die Website auf kleineren Screens sogar besser aussieht, als auf größeren.

18. Siyelo

siyelo

Gehen Sie weiter. Hier gibt es nichts zu sehen. Na ja, in der Tat werden Sie auf dieser Website keine Zaubertricks oder sonstige schwer beeindruckenden Besonderheiten finden. Meiner Meinung nach liegt jedoch genau darin die besondere Schönheit. Siyelo bietet makelloses Layout ohne drastische Änderungen an User Interface oder Inhalten bei Größenänderungen.

19. The Next Web

thenextweb

Es ist noch relativ selten, dass Nachrichtenmagazine responsiv gelayoutet daherkommen. The Next Web jedoch gehört bereits dazu und ist ein sehr gutes und interessantes Beispiel dafür, wie auch inhaltsschwere Seiten mit ständig wechselndem Content von responsivem Design optisch profitieren können. The Next Web setzt letztlich auf drei verschiedene Layouts, die je nach Viewport eingesteuert werden. Auf allen drei Layouts steht der neueste Content deutlich im Vordergrund, bei den kleineren Auflösungen verschwinden als erstes die Werbeanzeigen. Das ist natürlich gut für die Leserschaft, weniger gut für die Monetarisierungsmöglichkeiten des Betreibers. Mal sehen, wie lange The Next Web das durchhält, wenn der Anteil kleinerer Auflösungen weiter so rasant steigt.

20. Kings Hill Cars

kingshillcars

“Meine Headergrafik muss rieesig bleiben!”. Auch Kunden, die sich in ihre eigenen Header verliebt haben, müssen nicht auf responsive Layouts verzichten. Diese Website mag als Beweis dienen. Achten Sie darauf, wie das große Bild des auffälligen Automobils über alle Auflösungen konsistent bleibt. Ebenso werden auch keine Kompromisse hinsichtlich des Banner-Texts eingegangen.

21. Ginger Whale

gingerwhale

Ginger Whale ist erdacht, um Kindern das Lesen schmackhaft zu machen. Entsprechend ist das Design sehr kindgerecht, mit niedlichen Animationen und altersgerechten Zeichnungen. Unter dem Aspekt des Webdesign beeindruckend ist aber vor allem, dass Ginger Whale sowohl in der Breite, wie auch in der Höhe responsiv reagiert. So bleibt die Website stets in gleicher Weise grafisch voll bedienbar, eine Seltenheit.

22. United Pixelworkers

unitedpixelworkers

Auch im E-Commerce kann man responsive designen. United Pixelworkers treten den Beweis an, dass auch Seiten mit einer extrem großen Zahl unterschiedlicher Produkte auf verschiedenen Auflösungen zufriedenstellend funktionieren können. Hier wird mit einem Kacheldesign gearbeitet, dem man zu Beginn gar nicht zutrauen würde, so nutzerfreundlich zu sein, wie es am Ende tatsächlich ist.

23. Treasure of FrontEnd Island

treasurefrontend

Ein visuell besonders imposantes Menü kann im responsiven Webdesign schnell zum Problem werden. Lassen Sie sich von dieser Website inspirieren, wenn Sie mal vor dem gleichen Problem stehen. Sie werden sehen, dass es keinen Widerspruch darstellt, visuell beeindruckend und zugleich responsiv zu designen.

24. Audio Vroom

audiovroom

Online Audio-Streaming ist, anders als Video-Streaming, kein grundsätzliches Problem, wenn man es unter dem Gesichtspunkt des responsiven Designs betrachtet. Audio Vroom steht jedoch für eine besonders gelungene Umsetzung. Hier werden einfache Regeln responsiver Layouts fehlerfrei umgesetzt.

25. Somewhat

somewhat

Das hier wird nicht jedem gefallen. Immerhin ist eine gängige Anforderung an responsives Design, dass die Seiten auf unterschiedlichen Clients so gleich wie möglich aussehen sollen. Somewhat zeigt das Gegenteil und bietet völlig verschiedene Optik je nach Auflösung. Kann man sich mit diesem Design-Prinzip anfreunden, eröffnet sich natürlich eine völlig neue Welt im Webdesign. Somewhat propagiert genau das, nämlich so zu designen, wie es für das jeweilige Endgerät am besten ist.

26. Lancaster University

lancasteruni

Im Grunde sehen wir hier eine mehr oder weniger typische Unternehmens-Website, die allerdings erstaunlich responsiv reagiert. Die Website der Lancaster University ist so gestaltet, dass sichergestellt ist, dass jegliche Funktionalität stets zur Verfügung steht, unabhängig von Auflösung und Client. Das sieht nicht besonders überwältigend aus, sondern funktioniert einfach.

Jetzt Sie!

Ich fand es ganz schön schwierig, 25 Muster-Beispiele responsiven Designs zu kuratieren und Ihnen vorzustellen. Deswegen entschied ich mich für 26 ;-) Welche gefallen Ihnen besonders? Habe ich sträflicherweise den absoluten Knüller übersehen? Lassen Sie es mich wissen…

Der Artikel wurde im Original geschrieben von Josh Chan und erschien zuerst in unserem Schwestermagazin Noupe.

Unter der Bezeichnung "Redaktion Dr. Web" finden Sie Beiträge, die von mehreren Autorinnen und Autoren kollaborativ erstellt wurden. Auch Beiträgen von Gastautoren sind hier zu finden. Beachten Sie dann bitte die zusätzliche Autorenangabe im Beitrag selbst.

Tags: , , ,

15 Kommentare zu „Voll im Flow – 26 Beispiele für responsives Design, wie es sein soll
  1. Johannes am 7. April 2013 um 13:44

    Die allermeisten dieser exzellenten Beispiele habe ich noch gar nicht gekannt. Danke für diese tolle Auflistung! Aber gibt es denn keine Webseite, welche eine Bildergalerie enthält, die auf einem mobilen Endgerät mit den Fingern zu steuern ist???

  2. Chr1s am 7. April 2013 um 23:06

    Das beste responsive design, dass ich vorschlagen möchte ist das von http://www.aids.gov.

  3. Johannes am 8. April 2013 um 08:14

    Danke für die Info.
    In der Sammlung fehlt meiner Meinung nach noch eine Webseite mit einem OFF-CANVAS-Layout wie zum Beispiel http://www.elmastudio.de/

  4. Shania_cms am 8. April 2013 um 13:19

    Die Nummer 2 finde ich persönlich sehr ansprechend. Wobei das natürlich auch stark von dem allgemeinen Design der Website abhängt. Wir sind momentan auch dabei für unser CMS noch mehr responsive Designs auszuarbeiten, denn man muss schnell auf den Zug aufspringen, bevor er abgefahren ist.

  5. Rainer Frömmel am 8. April 2013 um 16:11

    Wie kann denn in dieser wundervollen Aufzählung Deutschlands erste Responsive Site fehlen? Unter https://www.franziskaner-weissbier.de/index findet man das Ergebnis!

  6. Mein Tegernsee am 8. April 2013 um 22:20

    Sträflicherweise hast du tatsächlich den absoluten Knüller übersehen, und zwar meine Seite: http://www.mein-tegernsee.de ;-)

    Viele Grüße!

  7. Herbert am 9. April 2013 um 19:35

    Und warum ist Dr. Web.de noch nicht responsive?!

    • Dieter Petereit am 9. April 2013 um 20:17

      Siehe den Text zu The Next Web ;-)

      • Herbert am 10. April 2013 um 15:46

        Ich denke Sie sollten Sie eher sorgen über die Abnahme an Lesern machen, sollten Sie wirklich langfristig planen, Ihre Website nicht responsive zu gestallten.
        Zwar nicht mit Mediaqueries realisiert, aber dennoch ein gutes Beispiel, dass sich Werbung und mobilversionen von Blogs/Websites nicht ausschließen ist z.B. Golem.de, welche auch auf den mobilen Seiten Werbung in akzeptabler Form ausliefert. Andere Wege mit Overlays (Javascript PopUps) geht die Sueddeutsche Zeitung auf deren mobiler Website. Das ist zwar nicht so angenehm wie bei golem.de, aber immerhin akzeptabel.
        PS: Artikel auf Dr.Web lese ich via iPhone nur im Lesemodus… da werden ADs ausgeblendet. Bei Golem sehe ich die Werbung….

      • Dieter Petereit am 10. April 2013 um 16:38

        Danke für Anregungen dazu, worüber wir uns Sorgen machen sollten. Ich komme darauf zurück, wenn uns selber nichts mehr einfällt ;-)

        Von “langfristiger Planung” war indes nicht die Rede. Es wird noch in diesem Jahr einen Relaunch geben, wahrscheinlich noch in der ersten Jahreshälfte. Der wird mit Sicherheit dann responsiv oder mit Mobilvarianten ausgelegt sein. Die richtige Strategie ist noch in der Diskussion.

  8. […] Voll im Flow – 26 Beispiele für responsives Design, wie es sein soll – Dr. Web Magazin […]

  9. […] Voll im Flow – 26 Beispiele für responsives Design, wie es sein soll – Dr. Web Magazin. […]

  10. […] nice Responsive Webdesign Sammlung auf Dr. Web. Bsp. hier: Design Made in […]

  11. […] Früher war so etwas aufwändig und meistens mit mehreren unterschiedlichen Designvorlagen verbunden, oft auch mit dem mehrfachen Erfassen und Pflegen von Inhalten, für Mobil- und Desktop-Geräte. Oder viele Website-Betreiber haben Mobilgeräte schlicht bewusst oder unbewusst ignoriert. Mit dem Erscheinen des so genannten Responsive Webdesigns hat sich eine Technik etabliert, die es Ihnen ermöglich mit nur einer Website und dem einmaligen Erfassen von Inhalten (also Texten, Bildern, Downloads, usw.) alle Plattformen abzudecken. Schauen Sie sich mal an, was es alles für gute Beispiele gibt. […]

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!