Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • 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

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » Webdesign » 10 Beispiele für gutes Responsive Webdesign (Showcase)

10 Beispiele für gutes Responsive Webdesign (Showcase)

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

Inhaltsverzeichnis

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, und Markus Seyfferth.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

AMZ Marketing in Regensburg Logo.

AMZ-Marketing GmbH

Regensburg

Klickbeben Webdesign Agentur Innsbruck Logo.

Webagentur klickbeben

Innsbruck

Wolli Ruf Mediendesign Agentur Freiburg.

wolli ruf – mediendesign

Freiburg im Breisgau

Homepage Hexxer Logo der Webdesign Agentur aus Balingen.

HOMEPAGE HEXXER

Balingen

Rocket Backlinks Logo.

Rocket Backlinks

Aalen

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Die passende Digitalagentur finden: Das solltest Du beachten

Wir unterstützen Dich bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Mitarbeiter einer WordPress-Agentur mit einer Tasse Kaffee im Vordergrund.
WordPress

WordPress — eine gute Wahl für Ihre Unternehmenswebsite?

Hier finden Sie ein ausführliches FAQ zu WordPress als Entscheidungshilfe und eine Auswahl von professionellen WordPress Agenturen.

→

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.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • 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
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑