Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

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 & Responsive Webdesign 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?

Responsive Design Inspirationen

1 von 20

Zur Galerie

Finde einen Job, den du liebst zum Thema Webdesign

39 Reaktionen
corian
corian

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

Antworten
Kartoffel
Kartoffel

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
freude
freude

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
freude
freude

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
1984
1984

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
longbeachwebdesign
longbeachwebdesign

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
Martin.Bauer
Martin.Bauer

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
florence.maurice
florence.maurice

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
Andreas Stephan

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
jack
jack

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

Antworten
Volker Liedtke

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
jswebschmiede

@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
jswebschmiede

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

Antworten
jswebschmiede

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

Antworten
Bernhard

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
florence.maurice
florence.maurice

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
Jens Holze

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
Marco

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
Marco

Die Seite ist mit dem iA-Wordpress Template realisiert.

Antworten
KK
KK

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

Antworten
jakiku

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

Antworten
plwbr
plwbr

Gutes Beispiel mit TYPO3 umgesetzt:

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

Antworten
tomicek
tomicek

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
michael.weigand
michael.weigand

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
pierre.jacek
pierre.jacek

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

Antworten
Kay

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

Antworten
PhilippAlbrecht
PhilippAlbrecht

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

Antworten
Philipp Albrecht

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

Antworten
Andreas Stephan

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
Jan Christe

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
Niko88
Niko88

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
Erik

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

Antworten
Norman
Norman

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
NoResponse
NoResponse

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
Ilja Zaglov

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
RainerTR
RainerTR

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
Sipatshi
Sipatshi

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

Antworten
Kai L.
Kai L.

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

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen