Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Andreas Hecht 21. September 2015

28 inspirierende Beispiele für gutes responsives Webdesign (Showcase)

Responsives Webdesign ist bereits seit längerer Zeit in aller Entwickler Munde. Eine responsive Website gilt sozusagen als die eierlegende Wollmilchsau, denn sie funktioniert auf jedem Ausgabegerät und mit jeder denkbaren Bildschirmauflösung. Egal, ob Sie eine Website auf einem Smartphone, einem Tablet oder einem Desktop-Rechner anschauen, überall wird der Inhalt optimal lesbar dargestellt. Selbstverständlich ist bei einer modernen Website heute nicht nur die Lesbarkeit auf allen Geräten wichtig, sondern immer auch vor allem noch das ansprechende Design. Daher zeigen wir Ihnen in diesem Beitrag eine Auswahl von wirklich gut gelungenen, responsiven Websites zu Ihrer Inspiration.

28-responsive-websites-teaser_DE

Beispiele von gut umgesetzten responsiven Webdesign

In diesem Artikel haben wir für Sie nur wirklich gut umgesetzte Designs von professionellen Designern und Agenturen aus der ganzen Welt zusammengesucht. Manche bieten Ihnen zusätzlich noch interessante Bedienkonzepte und gut umgesetzte Effekte und Animationen. Daher bietet es sich an, die einzelnen Websites zu besuchen und sich die Konzepte näher anzusehen.

Zu jeder Website haben wir Ihnen die responsiven Ansichten auf allen Ausgabegeräten verlinkt. Dort, wo Sie keine zusätzliche responsive Abbildung finden, ließ sie sich mit dem Tool Am I Responsive leider nicht herstellen. Mobile Ansichten sind bei den betreffenden Websites nur über die Geräte direkt aufrufbar.

1. Fabrik

getfabrik

beispiele-fuer-responsives-webdesign

2. Inside Abbey Road

Inside-Abbey-Road

3. Beagle – Better proposals

Beagle

beagle

4. Giorgio Armani – Frames of Life

Giorgio-Armani

armani

5. HBM FiberSensing

HBM-FiberSensing

fibersensing

6. Web Design London

Web-Design-London

webdesign.london

7. Carmichael Lynch

Carmichael-Lynch

carmichael-lynch

8. Estudio NK

Estudio-NK

estudio nk

9. Welcome Spring Festival 2015

Welcome-Spring-Festival-2015

spring-festival

10. Marie – Creative Agency Portfolio Template

MARIE-Multipurpose-Creative-Portfolio

marie

11. Masi Tupungato

Masi-Tupungato

masi

12. Cofamedia Inc

COFA-Media

cofa

13. Fornasetti

Fornasetti

forsanetti-responsive

14. OuiSurf in Africa

OuiSurf.tv

15. Chris Niedenthal

Chris-Niedenthal

16. Alexander Engzell Portfolio

Alexander-Engzell

Alexander-Engzell

17. Bav Tailor

BAVTAILOR

BAVTAILOR

18. Trading Culture

Trading-Culture

Trading-Culture

19. RGB Media

RGB-MEDIA

RGB-MEDIA

20. Unfollowhance

Unfollowhance

Unfollowhance

21. Diego Sivori

Diego-Sivori

Diego-Sivori

22. RC Comunicação

RC-Comunicaco

RC-Comunicaco

23. 555 Chabanel

555-Chabanel

555-Chabanel

24. BrainBox

BRAINBOX

BRAINBOX

25. Ello

ello

Ello

26. Mage Developers

mage-developers

27. Futuramo Icons

FUTURAMO-ICONS

FUTURAMO-ICONS

28. jeferson winter

www.jefersonwinter.com

www.jefersonwinter.com

 Fazit

Diese 28 guten Exemplare responsiven Webdesigns machen Hunger auf mehr, man möchte sich fast augenblicklich hinsetzen und eine responsive Website selbst entwickeln. Inspiration dürfte dieser Beitrag genug gegeben haben. Mir persönlich gefällt die Website der Mage Developers (26) sehr gut, da der Hero-Bereich wirklich ansprechend gestaltet worden ist und schöne Fotos Verwendung fanden.

(dpe)

Andreas Hecht

Andreas Hecht

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google. Auf seinem Blog schreibt er über WordPress, SEO und Content SEO.

10 Kommentare

  1. Das sind wirklich tolle Beispiele!

  2. Manche Themes sind wirklich sehr schön. Aber ich muss auch mal negatives Feedback loswerden. Was mir immer häufiger auffällt, hier auch am Beginn des Artikels: Das meiste sind einfach nur Stockfotos! Bilder mit 3-4 Buttons und viel mehr kommt dann auch nicht.
    Und so minimalistisch wie einige Themes ausfallen, stellt sich mir die Frage wie die Designer damit Geld verdienen können. Im Grunde kann man sich das meiste Wissen in wenigen Tagen dafür aneignen – zudem hat man dann ein wirklich individuelles und eigenes Design.

    Andere hier gezeigte Themes sind typisch modern und viele finde ich wirklich inspirierend. Startups und Website-Apps schießen wieder wie Pilze aus dem Boden – darauf zielen die meisten Themes eben ab.

    lg Marcus

    • Hallo Marcus. Danke für deinen Kommentar. Dieser Artikel hier befasst sich allerdings gar nicht mit Themes, sondern ist ein Showcase real existierender responsive Sites.

    • Du hast völlig recht.

      Fast alle Websites die irgendwo als besonders schön vorgestellt werden, leben lediglich durch ihre tollen, vollformatigen Background Photos.

      Mich erinnert sowas auch eher an die futuristischen Prototypen, die auf den Autosalons vorgestellt werden – im täglichen Leben bekommt man sie nie zu Gesicht.

      Kunden wollen ihren (möglichen )Kunden im Internet etwas über ihr Business, ihre Qualifikation erzählen – viel.
      Für vernünftige Suchmaschinenoptimierung sind sie sowieso ungeeignet.

      Wirklich schöne Seiten (täglich neu) gibt es hier zu sehen:
      http://awwwards.com/

  3. Wir haben da leider keine Aktien bei Am I Responsive. Und die verwenden nun mal Mac-Hardware.

  4. Ach, noch etwas: Ich bin ein begeisterter Linux- und Mac-Anwender, aber die ständige Präsenz der Mac-Hardware in Präsentationen, die mit dem tatsächlichen Apfel-Marktanteil nichts zu tun hat, langweilt langsam. Gibt es denn wirklich keine auch nur halbwegs ansehnliche PC-Hardware? OK, ich habe noch keine gesehen, aber gibt es wirklich keine? Überhaupt nicht? Wäre das nicht eine Marktlücke? ;-)

  5. Auch ein nettes Werkzeug zum Testen: http://deviceponsive.com/

  6. Danke für die interessanten Beispiele!

    Tipp: Statt „Am I Responsive“ hätte vielleicht die Firefox-Funktion „Bildschirmgrößen testen“ (https://developer.mozilla.org/de/docs/Tools/bildschirmgroessen-testen) oder die analoge Funktion von Chrome geholfen.

Schreibe einen Kommentar

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