Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Menü
  • Beste Agentur finden
    • 3D-Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online-Marketing-Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt

< dr. web > » Webdesign » 10 Beispiele für gutes Responsive Webdesign (Showcase)

10 Beispiele für gutes Responsive Webdesign (Showcase)

  • Aktualisiert am 3. August 2023
  • von Markus Seyfferth
  • Responsive Design, Webdesign
  • 8 Kommentare

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.

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.

 

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.

Markus Seyfferth

Markus Seyfferth

ist seit 2019 Geschäftsführer & WordPress-Entwickler bei Dr. Web. Zuvor war er sechs Jahre lang Vorstand des Smashing Magazine, im Rahmen dessen er u.a. das Online-Marketing, die Betreuung der Werbekunden sowie diverse Online-Projekte geleitet hat.

Inhaltsverzeichnis

Agenturpartner in Mettmann

Edit Content

Farbentour

Als erfahrene SEO-Agentur verhelfen wir Ihrer Website und Ihrem Unternehmen durch strategisches SEO zu mehr Sichtbarkeit. Wir betreuen jedes Projekt individuell und stimmen unsere SEO-Maßnahmen auf Ihre Bedürfnisse ab. Dabei kommen immer nur nachhaltige SEO-Strategien zum Einsatz, die einen langfristigen SEO-Erfolg versprechen. Kontaktieren Sie uns jetzt für ein erstes Gespräch.

— Fabian Auler,
Head of SEO
Alle Webdesign-Agenturen →

Lust auf mehr?

14 Best Practices, die Sie für einen erfolgreichen Internetseite Relaunch beachten sollten

Was bewegt einen Unternehmer dazu, seine Internetseite von Grund auf neu auszurichten? Nun, die Gründe für einen Internetseite Relaunch einer können sehr vielfältig sein. Oft spielt ein veraltetes Design eine Rolle. Dieser Grund ist nicht so trivial, wie er vielleicht erscheint. Denn ein unmodernes Aussehen der Webseite kann Besucher und damit potenzielle neue Kunden abstoßen.

KI GPT-4: werden Webdesigner und sonstige Erdlinge ihren HAL-Moment erleben?

Wo ist dieser verdammte Aus-Schalter?” Dies waren die letzten Worte von David Bowman, dem Anführer einer Widerstandsgruppe Webdesigner, denen es gelang zum vermeintlichen WDN-Zentralcomputer vorzudringen, bevor sie von Wächterdroiden eliminiert wurden.

Microsoft Designer to the people: KI Power Webdesign und Grafikdesign?

Ein Webdesign selbst erstellen? Ist bei mir schon ewig her. 2006 muss das gewesen sein. Ich durfte für eine Rechtsanwaltskanzlei ran. Typische Erstaufträge. Freundes- und Bekanntenkreis abgrasen eben. Der damalige Freund einer Freundin arbeitete dort und brachte mich ins Spiel.

8 Antworten

  1. 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
  2. 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
  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.

  4. 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.

    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/

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

    Das sind wirklich tolle Beispiele!

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Für Unternehmer: Finden Sie Ihre Agentur in…

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