Skip to content
Dr. Web Logo seit 1997.
  • Beste Agenturen
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur eintragen ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur eintragen ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Magazin
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Smarte Agenturköpfe
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Magazin
Agentur eintragen →
Dr. Web » Webdesign » 10 Beispiele für gutes Responsive Webdesign (Showcase)

10 Beispiele für gutes Responsive 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 du eine Website auf einem Smartphone, einem Tablet oder einem Desktop-Rechner anschaust, überall wird der Inhalt optimal lesbar dargestellt.

Sozial sein
Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • 8 Kommentare
Lesedauer: 3 Minuten
  • von Dr. Web Redaktion
  • 21. September 2021

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 dir in diesem Beitrag eine Auswahl von wirklich gut gelungenen, responsiven Websites zu Ihrer Inspiration.

Beispiele für gut umgesetztes Responsive Webdesign

Die Seite ChrisFil.de

Ein Mockup der Seite Chrisfil.de in verschiedenen Bildschirmgrößen, Laptop, Tablet und Mobil.

Ein Mockup der Seite ChrisFil.de, die sich auf die Themen Online-Shops und Shopify spezialisiert hat. Die Seite läuft auf WordPress und wurde mit Elementor erstellt.

Die Seite Getsummerrain.de

Mockup mit Laptop, iPad und iPhone von der Seite getsummerrain.de

Ein Mockup des Matcha-Shops getsummerrain.de. Die Seite wurde mit Webflow erstellt.

 

Digitalagentur „aeosys“

Ein Mockup der Seite aeosys.de in verschiedenen Bildschirmgrößen, Laptop, Tablet und Mobil.

Die Digitalagentur aeosys entwickelt digitale Geschäftsmodelle und unterstützt Selbständige und kleine Unternehmen beim Auf- und Ausbau ihres Digitalgeschäfts.

Agentur für Design: Studio Beaucoup

Ein Mockup der Seite beaucoup.studio in verschiedenen Bildschirmgrößen, Laptop, Tablet und Mobil.

Agentur für Barrierefreiheit: Bocoup

Ein Mockup der Seite bocoup.com in verschiedenen Bildschirmgrößen, Laptop, Tablet und Mobil.

 

News Layout

large 10 Beispiele für gutes Responsive Webdesign (Showcase)
Link zur Demo auf CodePen.io

Hier ein hervorragendes CSS-Grid-Beispiel mit einem 12-Spalten-Layout für eine Nachrichtenseite, mit einer Featured Story ganz oben. Von Marc Müller. Im Einsatz hier sind sog. Background Images, bei welchen ein Container ein Hintergrundbild enthält, über das man noch weitere Elemente wie z.B. einen Button und eine Überschrift legen kann.

Magazine Layout

large 10 Beispiele für gutes Responsive Webdesign (Showcase)
Link zur Demo auf CodePen.io

Dieses Magazin-Layout verwendet Flexbox, um Retro-Formen, mehrspaltigen Text und ein großes Bild hinzuzufügen. Erstellt von Raisa Yang.

Modular CSS Grid Layout Sections

large 10 Beispiele für gutes Responsive Webdesign (Showcase)
Link zur Demo auf CodePen.io

Von Brian Haferkamp.

CSS Grid Magazine Layout

large 10 Beispiele für gutes Responsive Webdesign (Showcase)
Link zur Demo auf CodePen.io

Von Elzette.

A Piece of Art

large 10 Beispiele für gutes Responsive Webdesign (Showcase)
Link zur Demo auf CodePen.io

Von Michelle Barker.

Fazit

Diese 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 gefallen die Websites von Boupoup und aeosys sehr gut, da der Hero-Bereich wirklich ansprechend gestaltet worden ist und schöne Fotos Verwendung fanden.

Dr. Web Redaktion

Dr. Web Redaktion

An einem „Dr. Web Redaktion“ Artikel arbeiten i.d.R. mehrere Autoren, unter anderem Michael Dobler, Markus Seyfferth und Jörg Mrusek.
Sponsor. Du bist auch interessiert? Kontaktiere uns →
Kostenloses SEO-Tool. Werbung für die OSG Performance Suite.

Jobs

Full Stack Developer SW Prototyping

Berlin

Lead Entwickler Mobile mit Fokus iOS-Entwicklung

Karlsruhe

Grafik-Designerin

Freiburg im Breisgau

Sprachtalente

Volkach oder Würzburg

Zum richtigen Job

Agenturpartner

One Step Webdesign hannover Logo

One Step Webdesign

Hannover

Dunkel Design | Webdesign Grafikdesign Logodesign

Köln

promomasters online marketing seo agentur logo für wien, salzburg, zell am see.

PromoMasters Online Marketing

Wien

Zwei N als Logo für die Niel Neumann Online Marketing Agentur.

Niels Neumann Online Marketing

Limburgerhof

Marco Wydmuch von Glamourpixel fotografiert sich selbst mit einer Canon-Kamera in der Hand.

Glamourpixel Fotodesign

Gelsenkirchen

Alle Agenturpartner

Lust auf mehr? Wir empfehlen folgende Artikel:

Webdesign: Die Basics guter Informations­architektur

Lineare Informationsarchitektur bezeichnet eine Konstruktion, in der es stets nur einen vordefinierten Weg zum Ziel gibt. Nutzer in linearen Systemen arbeiten Aufgaben entlang der vorgegebenen Pfade ab und können nur so und nicht anders zum Ziel zu gelangen. Diese Vorgehensweise ist aus Sicht des Designers nicht uninteressant.

 →   

Webdesign-Agentur gründen: 10 Tipps, wie der Start gelingt

Eine Webdesign-Agentur zu gründen ist keine einfache Aufgabe, denn du musst eine ganze Reihe Fähigkeiten mitbringen, um erfolgreich im harten Markt bestehen zu können.

 →   

Webdesign Trends 2022: Das erwartet uns

Animation, Interaktion und Immersion: Das neue Jahr bringt zahlreiche Trends im Webdesign mit sich und entwickelt einzelne Bereiche weiter. Bereits jetzt ist klar – in Sachen Webdesign-Trends hat das Jahr 2022 einiges zu bieten.

 →   

8 Antworten zu „10 Beispiele für gutes Responsive Webdesign (Showcase)“
— was ist Deine Meinung?

  1. Alexander Flipp sagt:
    23. September 2015 um 13:43 Uhr

    Das sind wirklich tolle Beispiele!

    Antworten
  2. Marcus sagt:
    23. September 2015 um 6:54 Uhr

    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

    Antworten
    1. Dieter Petereit sagt:
      23. September 2015 um 9:54 Uhr

      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.

      Antworten
    2. Frank Hübner sagt:
      23. September 2015 um 10:14 Uhr

      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/

      Antworten
  3. Dieter Petereit sagt:
    21. September 2015 um 21:54 Uhr

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

    Antworten
    1. ati sagt:
      22. September 2015 um 8:00 Uhr

      Ich verwende sie auch – zum Arbeiten wie in Darstellungen. Mich wundert nur, dass es keine Alternative gibt. Die Monotonie wird langweilig.

      Antworten
  4. ati sagt:
    21. September 2015 um 17:21 Uhr

    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? 😉

    Antworten
  5. Stefan Hansel sagt:
    21. September 2015 um 15:49 Uhr

    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.

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Unternehmen: Agenturen finden in…

  • Augsburg
  • Basel
  • Berlin
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Freiburg im Breisgau
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Ingolstadt
  • Innsbruck
  • Frankfurt am Main
  • Karlsruhe
  • Köln
  • Leipzig
  • Mainz
  • Mannheim
  • München
  • Nürnberg
  • Potsdam
  • Regensburg
  • Reutlingen
  • Salzburg
  • Stuttgart
  • Wien
  • Wuppertal
  • Zürich
Menü
  • Augsburg
  • Basel
  • Berlin
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Freiburg im Breisgau
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Ingolstadt
  • Innsbruck
  • Frankfurt am Main
  • Karlsruhe
  • Köln
  • Leipzig
  • Mainz
  • Mannheim
  • München
  • Nürnberg
  • Potsdam
  • Regensburg
  • Reutlingen
  • Salzburg
  • Stuttgart
  • Wien
  • Wuppertal
  • Zürich

Für Agenturen

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.