Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Redaktion Dr. Web 7. April 2013

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

Responsives Webdesign ist ein Trend, um den man nicht mehr her­um­kommt. Vor allem der sen­sa­tio­nel­le Erfolg mobi­ler Clients, wie Smartphones und Tablets lässt die Nachfrage nach Layouts, die auch mobil gut funk­tio­nie­ren, rasant stei­gen. Auch wenn die ganz gro­ßen Websites sich noch schwer tun, auf den mitt­ler­wei­le schon rasen­den Zug auf­zu­sprin­gen, ist die Hoffnung berech­tigt, dass selbst die gro­ßen Web-Dinosaurier in Kürze umstei­gen wer­den. Das wie­der­um wird für einen wei­te­ren Schub in Richtung Responsiveness sor­gen. Die bes­ten Vertreter respon­si­ven Designs bie­ten nicht nur eine aus­ge­zeich­ne­te Nutzererfahrung auf mobi­len Clients, sie defi­nie­ren viel­mehr das User Interface neu. Im fol­gen­den zei­ge ich Ihnen eine Reihe der bes­ten Beispiele für per­fekt umge­setz­tes respon­si­ves Design. Lassen Sie mich wis­sen, was Sie davon hal­ten…

1. Future of Web Design 2013

futureofwebdesign_london2013

Wie der Name ver­mu­ten lässt, han­delt es sich hier­bei um die Website zur Konferenz “Future of Web Design” in London 2013. Um dem Anspruch der Konferenz gerecht zu wer­den, war es natür­lich erfor­der­lich, ein respon­si­ves Design zu bie­ten. Das gelang hier jedoch so gut, dass man durch­aus von einem Benchmark, an dem sich alle ande­ren Tile-basier­ten Websites mes­sen las­sen müs­sen, spre­chen darf. Die Website funk­tio­niert mit drei ver­schie­de­nen Layouts für unter­schied­li­che Bildschirmauflösungen, ver­zich­tet dabei aber an kei­ner Stelle auf Funktionalität. Sogar die Farben reagie­ren respon­siv mit leich­ten Veränderungen, sobald die Anzeigebreite ver­än­dert wird.

2. Andersson Wise Architects

anderssonwise

(Noch) nicht vie­le respon­si­ve Designs ver­wen­den offen­siv groß­for­ma­ti­ge Bilder. Die von Andersson Wise schon, und das sieht fan­tas­tisch aus. Die Übergänge zwi­schen den ein­zel­nen Anzeigebreiten sind über­aus gelun­gen. Andersson Wise muss man gese­hen haben, bevor man selbst an das nächs­te respon­si­ve Design geht.

3. Shiny Demos

shinydemos

Mit den Mitgliedern des Opera Developer Relations Teams waren hier natür­lich aus­ge­wie­se­ne und aus­ge­wach­se­ne Experten am Werk. Shiny Demos zeigt nicht nur die neu­es­ten Open Web Standards, son­dern tut das in einer Form, die beein­druckt. Leider sind nicht alle Browser in der Lage, den gesam­ten Designumfang der Shiny Demos zu ren­dern. Die respon­si­ven Designs jedoch funk­tio­nie­ren sehr gut.

4. Kava Ruzova

kavaruzova

Kava Ruzova besteht nur aus einer ein­zel­nen Seite. Die Website bin­det Google Maps intel­li­gent ein und zeigt, dass weni­ger mehr sein kann, auch und vor allem, wenn es um respon­si­ves Design geht.

5. Performance Marketing Awards 2013

performancemarketingawards2013

Auf den ers­ten Blick erscheint die Website nicht unbe­dingt als ein Musterbeispiel für respon­si­ves Layout. Sie wer­den jedoch über­rascht sein, wenn Sie sie auf einem Tablet auf­ru­fen. Hier steht dann ein Dropdown-Menü bereit und der gesam­te Content wird intel­li­gent restruk­tu­riert. Hier steht klar der prak­ti­sche Nutzen im Vordergrund.

6. William Csete

williamcsete

Naheliegenderweise gibt es einen gan­zen Haufen bril­li­an­ter, respon­si­ver Websites von Webdesignern zur Darstellung der eige­nen Leistungsfähigkeit. Diejenige von William Csete ist die ers­te in unse­rem klei­nen Showcase hier. Was neben der moder­nen und schlan­ken Optik beson­ders auf­fällt, ist die Darstellung der Navigation. Die Usability des Menüs bedarf kei­ner wei­te­ren Worte und wird intui­tiv durch jeder­mann ver­stan­den. Unabhängig von der Bildschirmauflösung steht die Navigation stets pro­mi­nent bereit.

7. Stuff & Nonsense

stuffandnonsense

Diese Jungs wähl­ten einen humo­ris­ti­schen Ansatz und ver­pass­ten ihrer Website eine Extra-Portion Spaß. Schon die groß­ar­ti­ge Verwendung von Illustrationen, der scrol­len­de Hintergrund und die nied­li­che Logo-Animation machen was her. Besonders beein­dru­ckend jedoch ist die Tatsache, dass der Mann auf dem Motorroller mit der Verjüngung des Viewports eben­falls jün­ger wird. Auch der Roller geht die­sen Weg mit…

8. Digital Atelier

digitalatelier

Diese Website darf in kei­nem Showcase über respon­si­ves Design feh­len. Immer, wenn ich die­ses ele­gan­te und intel­li­gen­te Design mit sei­nen naht­lo­sen Übergängen zwi­schen den Viewports sehe, wun­de­re ich mich dar­über, dass es bis­lang noch kei­ne Awards für das Digital Atelier hagel­te. Das text­ba­sier­te Menü ver­klei­nert sich zu Icons, die Usability bleibt auf höchs­tem Level, egal bei wel­cher Auflösung.

9. Design made in Germany Issue 5

dmig5

Es wun­dert mich über­haupt nicht, dass die­se Website die Massen begeis­tert. DMIG setzt eine scrol­len­de Navigation vor einem fixen Hintergrund, der noch dazu per­fekt für ein respon­si­ves Design geeig­net ist, opti­mal um. Interessant zu sehen, wie das gro­ße “Dmig” in klei­ne­ren Layouts ersetzt wird.

10. Forefathers Group

forefathersgroup

Sicherlich. Design, das nach Vergangenheit aus­sieht, ist nicht jeder­manns Sache. Und Responsiveness scheint auf den ers­ten Blick sogar einen Widerspruch dazu zu bil­den. Diese Website hier setzt den Widerspruch jedoch so schick in Szene, dass ich sie nicht aus dem Showcase her­aus­las­sen konn­te. Richten Sie Ihr Augenmerk beson­ders auf die Navigation und das unauf­fäl­li­ge Verschwinden von Design-Elementen.

11. TIME

time

TIME Magazine ist mög­li­cher­wei­se der bekann­tes­te Name in Sachen Print-Medien, ein Dinosaurier der Branche. Gar nicht an Dinosaurier erin­nert die Website im Magazin-Stil, die auf groß­ar­ti­ge Weise die Prinzipien des respon­si­ven Webdesign umzu­set­zen ver­steht.

12. Lab Fiftyfive

labfiftyfive

Wenn das spon­ta­ne “Ahh” und “Ohh” über die schi­cken Mouse-Over-Effekte nach­lässt, wer­den Sie die Effektivität der dua­len Navigation erken­nen, ein Musterbeispiel in Sachen Usability. Suchen Sie auch mal nach dem Easter-Egg auf die­ser Site!

13. Hicksdesign

hicksdesign

Hicksdesign lie­fert den Beweis dafür, dass klei­ne­re Auflösung nicht not­wen­di­ger­wei­se bedeu­tet, dass alle Elemente geschrumpft wer­den müs­sen.

14. Deren Keskin

derenkeskin

Es gibt ver­hält­nis­mä­ßig weni­ge Designs, die sich aus­schließ­lich auf Typographie ver­las­sen. Das hängt sicher­lich damit zusam­men, dass die Verwendung impo­san­ter Bilder leich­ter einen impo­san­ten Gesamteindruck zu hin­ter­las­sen ver­mag. Deren Keskin inter­es­siert das nicht. Er tritt an, zu bewei­sen, dass auch Typographie-basier­te Websites gran­di­os aus­se­hen kön­nen. Achten Sie auf den gro­ßen respon­si­ven Header-Text.

15. Seminal Responsive Web Design Example

seminalexample

Ich zöger­te zunächst, die­se Website in den Showcase auf­zu­neh­men. Immerhin han­delt es sich bloß um eine als Beispiel gedach­te Seite. Sie eig­net sich jedoch aus­ge­spro­chen gut, zu demons­trie­ren, wie respon­si­ves Design nicht auf blo­ße Viewport-Änderungen beschränkt wir­ken kann. Hier kön­nen Sie viel­mehr ein erstaun­lich prä­zi­ses Fein-Tuning bei der Veränderung der dar­ge­stell­ten Inhalte erken­nen. Sogar die Fläche zur Aktivierung von Links wird in klei­nen Auflösungen ver­grö­ßert. Das ist nicht üblich, aber unter Usability-Aspekten natür­lich groß­ar­tig.

16. FortyOneTwenty

fourtyonetwenty

Das Einbetten von Videos ist eine ganz wich­ti­ge und an Bedeutung noch stei­gen­de Art, Inhalte dar­zu­stel­len. Es ist aller­dings auch eine der größ­ten Schwierigkeiten, wenn es um respon­si­ves Layout geht. FortyOneTwenty fokus­siert genau die­se Funktionalität mit ihrer respon­si­ven Website. Die von Vimeo zuge­lie­fer­ten Videos sehen auf allen unter­stütz­ten Clients in glei­cher Weise per­fekt aus.

17. Oliver Russell

oliverrussell

Unangestrengte Einfachheit – so wür­de ich mei­nen Eindruck von die­ser Website beschrei­ben. Es ist offen­sicht­lich, dass hier eine Menge Gehirnschmalz in eine effek­ti­ve Nutzererfahrung, spe­zi­ell mit Blick auf klei­ne­re Auflösungen geflos­sen ist. Kein Wunder also, dass die Website auf klei­ne­ren Screens sogar bes­ser aus­sieht, als auf grö­ße­ren.

18. Siyelo

siyelo

Gehen Sie wei­ter. Hier gibt es nichts zu sehen. Na ja, in der Tat wer­den Sie auf die­ser Website kei­ne Zaubertricks oder sons­ti­ge schwer beein­dru­cken­den Besonderheiten fin­den. Meiner Meinung nach liegt jedoch genau dar­in die beson­de­re Schönheit. Siyelo bie­tet makel­lo­ses Layout ohne dras­ti­sche Änderungen an User Interface oder Inhalten bei Größenänderungen.

19. The Next Web

thenextweb

Es ist noch rela­tiv sel­ten, dass Nachrichtenmagazine respon­siv gelay­ou­tet daher­kom­men. The Next Web jedoch gehört bereits dazu und ist ein sehr gutes und inter­es­san­tes Beispiel dafür, wie auch inhalts­schwe­re Seiten mit stän­dig wech­seln­dem Content von respon­si­vem Design optisch pro­fi­tie­ren kön­nen. The Next Web setzt letzt­lich auf drei ver­schie­de­ne Layouts, die je nach Viewport ein­ge­steu­ert wer­den. Auf allen drei Layouts steht der neu­es­te Content deut­lich im Vordergrund, bei den klei­ne­ren Auflösungen ver­schwin­den als ers­tes die Werbeanzeigen. Das ist natür­lich gut für die Leserschaft, weni­ger gut für die Monetarisierungsmöglichkeiten des Betreibers. Mal sehen, wie lan­ge The Next Web das durch­hält, wenn der Anteil klei­ne­rer Auflösungen wei­ter so rasant steigt.

20. Kings Hill Cars

kingshillcars

“Meine Headergrafik muss riee­sig blei­ben!”. Auch Kunden, die sich in ihre eige­nen Header ver­liebt haben, müs­sen nicht auf respon­si­ve Layouts ver­zich­ten. Diese Website mag als Beweis die­nen. Achten Sie dar­auf, wie das gro­ße Bild des auf­fäl­li­gen Automobils über alle Auflösungen kon­sis­tent bleibt. Ebenso wer­den auch kei­ne Kompromisse hin­sicht­lich des Banner-Texts ein­ge­gan­gen.

21. Ginger Whale

gingerwhale

Ginger Whale ist erdacht, um Kindern das Lesen schmack­haft zu machen. Entsprechend ist das Design sehr kind­ge­recht, mit nied­li­chen Animationen und alters­ge­rech­ten Zeichnungen. Unter dem Aspekt des Webdesign beein­dru­ckend ist aber vor allem, dass Ginger Whale sowohl in der Breite, wie auch in der Höhe respon­siv reagiert. So bleibt die Website stets in glei­cher Weise gra­fisch voll bedien­bar, eine Seltenheit.

22. United Pixelworkers

unitedpixelworkers

Auch im E-Commerce kann man respon­si­ve desi­gnen. United Pixelworkers tre­ten den Beweis an, dass auch Seiten mit einer extrem gro­ßen Zahl unter­schied­li­cher Produkte auf ver­schie­de­nen Auflösungen zufrie­den­stel­lend funk­tio­nie­ren kön­nen. Hier wird mit einem Kacheldesign gear­bei­tet, dem man zu Beginn gar nicht zutrau­en wür­de, so nut­zer­freund­lich zu sein, wie es am Ende tat­säch­lich ist.

23. Treasure of FrontEnd Island

treasurefrontend

Ein visu­ell beson­ders impo­san­tes Menü kann im respon­si­ven Webdesign schnell zum Problem wer­den. Lassen Sie sich von die­ser Website inspi­rie­ren, wenn Sie mal vor dem glei­chen Problem ste­hen. Sie wer­den sehen, dass es kei­nen Widerspruch dar­stellt, visu­ell beein­dru­ckend und zugleich respon­siv zu desi­gnen.

24. Audio Vroom

audiovroom

Online Audio-Streaming ist, anders als Video-Streaming, kein grund­sätz­li­ches Problem, wenn man es unter dem Gesichtspunkt des respon­si­ven Designs betrach­tet. Audio Vroom steht jedoch für eine beson­ders gelun­ge­ne Umsetzung. Hier wer­den ein­fa­che Regeln respon­si­ver Layouts feh­ler­frei umge­setzt.

25. Somewhat

somewhat

Das hier wird nicht jedem gefal­len. Immerhin ist eine gän­gi­ge Anforderung an respon­si­ves Design, dass die Seiten auf unter­schied­li­chen Clients so gleich wie mög­lich aus­se­hen sol­len. Somewhat zeigt das Gegenteil und bie­tet völ­lig ver­schie­de­ne Optik je nach Auflösung. Kann man sich mit die­sem Design-Prinzip anfreun­den, eröff­net sich natür­lich eine völ­lig neue Welt im Webdesign. Somewhat pro­pa­giert genau das, näm­lich so zu desi­gnen, wie es für das jewei­li­ge Endgerät am bes­ten ist.

26. Lancaster University

lancasteruni

Im Grunde sehen wir hier eine mehr oder weni­ger typi­sche Unternehmens-Website, die aller­dings erstaun­lich respon­siv reagiert. Die Website der Lancaster University ist so gestal­tet, dass sicher­ge­stellt ist, dass jeg­li­che Funktionalität stets zur Verfügung steht, unab­hän­gig von Auflösung und Client. Das sieht nicht beson­ders über­wäl­ti­gend aus, son­dern funk­tio­niert ein­fach.

Jetzt Sie!

Ich fand es ganz schön schwie­rig, 25 Muster-Beispiele respon­si­ven Designs zu kura­tie­ren und Ihnen vor­zu­stel­len. Deswegen ent­schied ich mich für 26 ;-) Welche gefal­len Ihnen beson­ders? Habe ich sträf­li­cher­wei­se den abso­lu­ten Knüller über­se­hen? Lassen Sie es mich wis­sen…

Der Artikel wur­de im Original geschrie­ben von Josh Chan und erschien zuerst in unse­rem Schwestermagazin Noupe.

Redaktion Dr. Web

Unter der Bezeichnung "Redaktion Dr. Web" findest du Beiträge, die von mehreren Autorinnen und Autoren kollaborativ erstellt wurden. Auch Beiträge von Gastautoren sind hier zu finden. Beachte dann bitte die zusätzlichen Informationen zum Autor oder zur Autorin im Beitrag selbst.

15 Kommentare

  1. Und war­um ist Dr. Web.de noch nicht respon­si­ve?!

    • Siehe den Text zu The Next Web ;-)

      • Ich den­ke Sie soll­ten Sie eher sor­gen über die Abnahme an Lesern machen, soll­ten Sie wirk­lich lang­fris­tig pla­nen, Ihre Website nicht respon­si­ve zu gestall­ten.
        Zwar nicht mit Mediaqueries rea­li­siert, aber den­noch ein gutes Beispiel, dass sich Werbung und mobil­ver­sio­nen von Blogs/Websites nicht aus­schlie­ßen ist z.B. Golem.de, wel­che auch auf den mobi­len Seiten Werbung in akzep­ta­bler Form aus­lie­fert. Andere Wege mit Overlays (Javascript PopUps) geht die Sueddeutsche Zeitung auf deren mobi­ler Website. Das ist zwar nicht so ange­nehm wie bei golem.de, aber immer­hin akzep­ta­bel.
        PS: Artikel auf Dr.Web lese ich via iPhone nur im Lesemodus… da wer­den ADs aus­ge­blen­det. Bei Golem sehe ich die Werbung.…

      • Danke für Anregungen dazu, wor­über wir uns Sorgen machen soll­ten. Ich kom­me dar­auf zurück, wenn uns sel­ber nichts mehr ein­fällt ;-)

        Von “lang­fris­ti­ger Planung” war indes nicht die Rede. Es wird noch in die­sem Jahr einen Relaunch geben, wahr­schein­lich noch in der ers­ten Jahreshälfte. Der wird mit Sicherheit dann respon­siv oder mit Mobilvarianten aus­ge­legt sein. Die rich­ti­ge Strategie ist noch in der Diskussion.

  2. Sträflicherweise hast du tat­säch­lich den abso­lu­ten Knüller über­se­hen, und zwar mei­ne Seite: http://www.mein-tegernsee.de ;-)

    Viele Grüße!

  3. Wie kann denn in die­ser wun­der­vol­len Aufzählung Deutschlands ers­te Responsive Site feh­len? Unter https://www.franziskaner-weissbier.de/index fin­det man das Ergebnis!

  4. Die Nummer 2 fin­de ich per­sön­lich sehr anspre­chend. Wobei das natür­lich auch stark von dem all­ge­mei­nen Design der Website abhängt. Wir sind momen­tan auch dabei für unser CMS noch mehr respon­si­ve Designs aus­zu­ar­bei­ten, denn man muss schnell auf den Zug auf­sprin­gen, bevor er abge­fah­ren ist.

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

  6. Das bes­te respon­si­ve design, dass ich vor­schla­gen möch­te ist das von http://www.aids.gov.

  7. Die aller­meis­ten die­ser exzel­len­ten Beispiele habe ich noch gar nicht gekannt. Danke für die­se tol­le Auflistung! Aber gibt es denn kei­ne Webseite, wel­che eine Bildergalerie ent­hält, die auf einem mobi­len Endgerät mit den Fingern zu steu­ern ist???

Schreibe einen Kommentar

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