Vorheriger Artikel Nächster Artikel

Mobile & Responsive Webdesign: 20 coole Inspirationen

Die Möglichkeiten von Webworkern sind heute fast grenzenlos. Die Vorstellungskraft nicht immer. Um eure Phantasie über die Grenzen von Desktop-Seiten hinaus anzuregen, haben wir einige coole Beispiele für gelungenes Mobile & für euch zusammengestellt.

Das Web ist längst im mobilen Zeitalter angekommen und mit Media-Queries und Responsive Webdesign flexibler als jemals zuvor. Auf vielen Webseiten vermisst man diese Flexibilität jedoch allzu schmerzhaft. Nur weil Smartphone-Hersteller „Das Echte Internet“ auf den Geräten versprechen, ist es noch lange keine gute Idee, dies auch zu befolgen. Schon gar nicht, wenn man sich die Webseite zurechtzoomen muss, um auch nur ansatzweise etwas lesen zu können.

Einige Inspirationen für coole Webseiten, die dank CSS-Queries oder mobilen Versionen nicht nur auf dem Desktop top aussehen, haben wir für euch zusammengetragen.

Al Taglio

Zur Seite von Al Taglio

Flirtprom

Zur Seite von Flirtprom

Hyundai HB20

Hyundai HB20

Zur Seite des Hyundai HB20

Land's End

Zur Seite von Land's End

Matterdesign

Zur Seite von Matterdesign

Mercedes Benz

Zur Seite von Mercedes-Benz

Imbaa Kreativagentur

Zur Seite von Imbaa

Modcloth

Zur Seite von ModCloth

Rachel Nabors

Zur Seite von Rachel Nabors

Boar's Head

Zur Seite von Boar's Head

Noch mehr Responsive Webdesign

In unserer Bildergalerie haben wir diese und weitere interessante Designs für euch zusammengestellt. Was sind euere Geheimtipps für Webseiten mit tollem Mobile Design?

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
39 Antworten
  1. von Kai L. am 11.02.2013 (08:59 Uhr)

    hmm, ich denke die Hyundai-Seite ist kein richtiges Response, meines Erachtens nach wird hier mit einer Browserweiche gearbeitet.

    Wenn ich die Seite mittels Browser auf dem Desktop kleiner mache geschieht keine richtige Darstellungsveränderung, erst über den Mobilbrowser wird man auf eine optimierte Version weitergeleitet.

    Antworten Teilen
  2. von Sipatshi am 11.02.2013 (09:01 Uhr)

    ...sicher das die Seite von Mercedes-Benz Responsive ist?

    Antworten Teilen
  3. von RainerTR am 11.02.2013 (09:04 Uhr)

    Hier auch ein schönes Beispiel: http://www.kai-weinand.de/ Das ist mein Friseur(!) Man sieht also, dass das Thema nicht nur von großen Unternehmen aufgegriffen wird!

    Antworten Teilen
  4. von Ilja Zaglov am 11.02.2013 (10:12 Uhr)

    Mercedes setzt auf jeden Fall auf eine Mobile Version. Ich würde Responsive Design aber nicht nur auf clever gemachte Stylesheets beschränken. Es geht darum, die bestmögliche User-Experience auf allen Geräten zu erreichen, und das ist ihnen meiner Meinung nach sehr gut gelungen.

    Natürlich würde man als Webworker die Anpassung mit Media-Queries als interessantere Herausforderung sehen, aber das Endergebnis ist ja im Grunde genommen das Gleiche.

    Antworten Teilen
  5. von NoResponse am 11.02.2013 (10:16 Uhr)

    Gefühlte 50% der präsentierten Seiten reagieren nicht auf Browserskalierung. Allen voran Mercedes Benz + Hyndai. Positives Beispiele:
    http://www.fork-cms.com/
    http://oliverrussell.com/
    http://boarshead.com/

    Antworten Teilen
  6. von Norman am 11.02.2013 (10:17 Uhr)

    Wenn in der Überschrift groß "Responsive Webdesign" angepriesen wird, sollten die vorgestellten Seiten auch responsive sein, die Häfte davon sinds nämlich nicht.

    Antworten Teilen
  7. von Erik am 11.02.2013 (11:35 Uhr)

    Auch die dak.de Website dank Unterstützung von IBM Interactive seit Dezember mit einem echten Responsive Design online.

    Antworten Teilen
  8. von Niko88 am 11.02.2013 (14:46 Uhr)

    Auch nach meiner Interpretation von "Responsive Design" sind einige der Beispiele nicht wirklich responsive, sondern eher für bestimmte Spezialfälle optimiert. Aber man kann natürlich diskutieren, was denn relevante Maßstäbe wären.

    Zwei deutschsprachige B2B-Beispiele mit Responsive Design aus meinem Arbeitsfeld:
    http://www.enomic.com
    http://www.fuma.com

    Antworten Teilen
  9. von Jan Christe am 11.02.2013 (16:19 Uhr)

    Danke für die zahlreichen Hinweise. Da in der Tat nicht alle Beispiele "Responsive" sind, aber alles Beispiele für mobiles Webdesign sind, haben wir die Überschrift aktualisiert.

    Antworten Teilen
  10. von Andreas Stephan am 11.02.2013 (17:16 Uhr)

    Ein paar sehr schöne Beispiele, aber es sind nicht alles Beispiele für Responsive Design. Ein paar der Seiten (z.B. Mercedes, Flirtprom oder Lands End) sind reine mobile Seiten. Das sollte man nicht durcheinander bringen.

    Antworten Teilen
  11. von Philipp Albrecht am 11.02.2013 (18:15 Uhr)

    Unsere eigene Seite hat ein Responsive Design :) http://websafari.co

    Antworten Teilen
  12. von PhilippAlbrecht am 11.02.2013 (18:20 Uhr)

    Unsere Agenturseite ist responsive nach dem Pinterest Prinzip: http://websafari.co

    Antworten Teilen
  13. von Kay am 12.02.2013 (07:49 Uhr)

    Ich kann für Responsive Design das Twitter Bootstrap SDK empfehlen! Sehr einfach und schnell umzusetzten.

    Antworten Teilen
  14. von pierre.jacek am 12.02.2013 (08:00 Uhr)

    Echt coole Designs. Wir arbeiten auch gerade an unserer neuen Webseite. Diese wird auch Responsive sein. Schaut doch mal vorbei. http://walk3.de/

    Antworten Teilen
  15. von michael.weigand am 12.02.2013 (08:48 Uhr)

    Sind ein paar gelungene Beispiele dabei. Viel interessanter jedoch ist, warum die ganzen Showcases sich meist auf 4,5 Seiten beschränken.

    Gibt es gute Beispiele für Websites mit aufwändigen Menüstrukturen, die womöglich über mehrere Ebenen gehen?

    Antworten Teilen
  16. von tomicek am 12.02.2013 (09:54 Uhr)

    Bei der Infocentric Research AG ( https://www.infocentricresearch.com/ ) wurde die Website der ART Basel https://www.artbasel.com/ fully responsive optimiert. Vor allem auch im HD Bereich sieht die Seite noch top aus.
    News dazu:
    https://www.infocentricresearch.com/News-and-Events/News/2013/Art-Basel-launches-its-new-website-featuring-responsive-design.aspx

    Antworten Teilen
  17. von plwbr am 12.02.2013 (10:01 Uhr)

    Gutes Beispiel mit TYPO3 umgesetzt:

    https://www.akad.de/home/

    Antworten Teilen
  18. von jakiku am 12.02.2013 (10:59 Uhr)

    Flirtprom ist defentiv kein responsive Design. Die Seite reagiert nicht auf Browserverkleinerung. Unter responsive Stelle ich mir was anderes vor.

    Antworten Teilen
  19. von KK am 12.02.2013 (11:50 Uhr)

    Was an den Seiten jetzt besonders? Funktioniert ja mittlerweile mit jeder Seite, die mit einem Responsive Framework gebastelt wird.. Foundation, Bootstrap etc..

    Antworten Teilen
  20. von Marco am 12.02.2013 (15:47 Uhr)

    Die Seite ist mit dem iA-Wordpress Template realisiert.

    Antworten Teilen
  21. von Marco am 12.02.2013 (15:49 Uhr)

    Die Seite ist mit dem iA-Wordpress Template realisiert und passt sich automatisch an der Fenstergröße an. Unterscheidet also nicht nur bei Smartphones, sondern auch bei Tablets etc:
    http://www.solutionbar.de

    Antworten Teilen
  22. von Jens Holze am 12.02.2013 (23:04 Uhr)

    Wir haben nun eine responsive Online-Shop Demo auf unserer Seite und freuen und über Feedback.

    Vielleicht noch ein wenig zur technischen Seite, wir haben kürzlich an einem sehr großen Projekt auf node.js gearbeitet und uns dort mit einer art Zwischenlösung versucht. Zudem einen wurden die Templates schon responsive realisiert, aber bei einigen Komponenten haben wir diese über eine kleine Middleware je nach Device unterschiedlich ausgeliefert. Damit konnten wir den ausgelieferten Code ein wenig verschlanken und an wesentlichen Teilen wirklich besseres UX liefern.

    Antworten Teilen
  23. von Markus Schneider am 13.02.2013 (13:45 Uhr)

    http://www.petspremium.de/
    Magento Shop der auf Responsive Design setzt

    Antworten Teilen
  24. von florence.maurice am 13.02.2013 (15:35 Uhr)

    Die hübsche Optik ist m.E. aber nur eine Sache. Wichtig wäre auch der Punkt der Performance. Beim ersten Beispiel zeigt mir beispielsweise http://mobitest.akamai.com/, dass die Seite auf einem mobilen Gerät 10 Sekunden zum Laden braucht.
    Wenn die Untersuchungen von http://www.gomez.com/wp-content/uploads/CPWR-MWD-Infographic-FNL3.pdf stimmen, so ist das zu lang: Nach der Studie warten 74% der mobilen Nutzer nur 5 Sekunden oder kürzer, bis die Seite geladen ist.

    Antworten Teilen
  25. von Bernhard am 13.02.2013 (18:07 Uhr)

    Bei der Mercedes-Benz Seite werde ich mit einem iPhone noch nicht einmal auf die mobile Website umgeleitet, wenn ich eine URL direkt aufrufe. Nur beim direkten Aufruf der Startseite. Das ist schon ein Armutszeugnis. Aber die mobile Seite ist schon ganz gut gelungen.

    Antworten Teilen
  26. von jswebschmiede am 13.02.2013 (19:51 Uhr)

    RainerTR das sieht aus wie gewollt und nicht gekonnt, sorry. Das du dir das traust das zu posten, Respekt.

    Antworten Teilen
  27. von jswebschmiede am 13.02.2013 (19:54 Uhr)

    @Markus Schneider Und was soll da besonders sein, hier geht es um Herausragende Designs und nicht um Standard Templates von Magento und Co.

    Antworten Teilen
  28. von jswebschmiede am 13.02.2013 (19:58 Uhr)

    @Marko ist ja schön das du Templates kaufst. Aber hier geht es um individuelle Designs und nicht darum wer das schönst kauf Template bei Themeforest gekauft hat.

    Antworten Teilen
  29. von Volker Liedtke am 15.02.2013 (11:06 Uhr)

    Hallo an Ilja Zaglov von t3n.de:

    Ich war verantwortlich für die Entwicklung beiden Mobile Kanäle Smartphones und Tablets bei Mercedes-Benz PKW.

    Wir sind explizit NICHT den Weg des Responsive Designs gegangen. Also nicht One-Concept-fits-all. Für mich haben die Kanäle Web, Tablet und Smartphones jeweils unterschiedliche Bündel von Nutzungsfällen – und für die Marktforschung übrigens auch. Oder: Man erwartet von MB auf dem Rechner etwas anderes als auf dem Smartphone oder dem Tablet.

    Die unterschiedlichen Nutzungsfälle in den 3 Geräteklassen haben wir durch 2 unterschiedliche Kommunikationskonzepte in Design, Informationsarchitektur und Applikationen Rechnung getragen. So hat der Kunde auf jedem Kanal die für ihn optimale User Experience.

    Aufwendig, aber das ist der einzige Weg für optimale Kommunikation. Andere Hersteller fangen bereits an, diesen strategischen Ansatz zu übernehmen.

    Mehr Infos zu den Projekten und ein netter Film hier: http://www.blogomotive.com/?p=5861.

    Gruß, Volker Liedtke

    Antworten Teilen
  30. von jack am 15.02.2013 (11:24 Uhr)

    Ich war verantwortlich für die technische Umsetzung der Smartphone-Version , und kann Volkers Aussagen nur bestätigen und bekräftigen.

    Antworten Teilen
  31. von Andreas Stephan am 15.02.2013 (11:38 Uhr)

    Der Ansatz ist meiner Meinung nach auch der richtige! Mobile Nutzungsszenarien (und das machen Menschen in der Regel Smartphones und nicht mit Tablets) unterscheiden sich grundsätzlich von stationären wie z.B. im Office oder auf der Couch. Insofern habenVersionen für mobile Szenarien immer ihre Berechtigung. So kann man den Anforderungen deutlich besser gerecht werden als mit einem "one fits all" Ansatz.

    Antworten Teilen
  32. von florence.maurice am 15.02.2013 (11:51 Uhr)

    Ob separate Versionen oder ein Responsive-Ansatz der richtige ist, kann man m.E. nicht so pauschal sagen - es hängt vom jeweiligen Projekt ab.
    Wichtig ist bei separaten Inhalten für unterschiedliche Geräte aber, dass man dem Benutzer die letzte Entscheidung lässt. Es kann immer etwas schief gehen - weil man beispielsweise ein Gerät nicht als das erkannnt hat, was es ist, oder weil man in diesem speziellen Fall falsch liegt mit dem, was man vermutet, was der Benutzer als Smartphonenutzer will. Deswegen sollte der Benutzer immer die MÖglichkeit haben, zur anderen Vesion zu wechseln.

    Antworten Teilen
  33. von mbauer am 22.02.2013 (11:03 Uhr)

    Da möchte ich unsere eigene Agentur-Website empfehlen: http://www.coco-new-media.de (One Page Layout im Responsive Design)
    Der Blog blog.coco-new-media.de ist ebenfalls responsive.

    Antworten Teilen
  34. von longbeachwebdesign am 24.02.2013 (17:00 Uhr)

    just love the way how you represent all those website newes here in this website. they are really awesmoe. thanks for shasring.
    long beach web design

    Antworten Teilen
  35. von 1984 am 26.02.2013 (10:25 Uhr)

    In Sachen Responsive Design wird es richtig interessant, wenn man sich umfangreichere Portallösungen anschaut - z.B. allianz.com, die bereits erwähnte dak.de, oder seit Januar auch dabei als eines der ersten umfangreichen Food-portale (wenn auch Fast-Food) mcdonalds.de - noch in der ersten Basisversion zu sehen, die m.E. sukzessive mit personalisierungs- und socialfeatures ausgebaut werden soll.
    Würde mir wünschen, weitere Beispiele von Portal-Seiten als Case Studies zu untersuchen. Und freue mich auf Input, falls jemand etwas weiß :)

    Gruß
    1984

    Antworten Teilen
  36. von freude am 01.03.2013 (10:42 Uhr)

    Ich stehe mit meiner Webseite noch am Anfang, aber ich versuche schon den Gedanken von Responsive Webdesign umzusetzen. Klappt schon ganz gut, oder.
    http;//www.guenterfoerg.de

    Antworten Teilen
  37. von freude am 01.03.2013 (10:44 Uhr)

    Entschuldigung, da waren die Finger wieder schneller als die Tastatur und so schmuggelte sich ein Strichpunkt anstatt eines Doppelpunktes ein. Hier die richtige Adresse: http://www.guenterfoerg.de

    Antworten Teilen
  38. von Kartoffel am 13.03.2013 (14:20 Uhr)

    Gibt es eigentlich auch schon coole Inspirationen für responsives Webdesign für Hotelseiten? Unser Kartoffel-Hotel Seite http://www.kartoffel-hotel.de möchte ich zum Sommer neu machen lassen. Da bin ich für jede Inspriation dankbar. Vielen Dank für Eure Tipps :-)
    Lieben Gruss aus der verschneiten Lüneburger Heide. Olaf

    Antworten Teilen
  39. von corian am 14.05.2013 (02:12 Uhr)

    Hey, iam love responsive. Pleas check out My New comming Website 4 Designers. http://www.imagooo.de

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Responsive Webdesign
Grid – Eine einfache Einführung in Responsive Webdesign
Grid – Eine einfache Einführung in Responsive Webdesign

Willst du schnell den Einstieg in Responsive Webdesign finden oder die Basics auffrischen? Mit diesem Tutorial ist beides kein Problem. » weiterlesen

t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“
t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“

Möchte man für unterschiedliche Geräte anpassungsfähige Websites erstellen, ist „Responsive Webdesign“ das Stichwort. Um sich damit vertraut zu machen, ist Designern und Entwicklern das Buch … » weiterlesen

FocusPoint: jQuery-Plugin für fokales Cropping
FocusPoint: jQuery-Plugin für fokales Cropping

Der Einsatz von Bildern im Responsive Webdesign bringt einige Herausforderungen mit sich. FocusPoint hilft dabei, den wichtigsten Bildausschnitt immer im Vordergrund zu halten. Wir stellen das … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen