Zum Artikel-Inhalt springen
Dr. Web Digital Experts-Logo
  • Kostenloser Grundeintrag
  • Ratgeber
  • Auf Dr. Web werben
  • Mein Konto
  • Jobs
  • Alle Digitalagenturen
  • Berlin
  • Hamburg
  • München
  • Köln
  • Frankfurt
  • Stuttgart
  • Düsseldorf
  • Leipzig
  • Dresden
  • Agentur eintragen →
  • × 🍔 schliessen
  • ☰ Menu

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

Top of the Stack

GeneratePress

GeneratePress ist ein WordPress-Theme, das bekannt ist für seine schlanke und SEO-freundliche und PageSpeed-optimierten Struktur. Mehr erfahren ↗

Elementor

Elementor ist ein Page- & Theme-Builder für WordPress. Mit Elementor kann man individuelle Seiten bauen und Templates anlegen. Mehr erfahren ↗

Sendinblue

Sendinblue ist ein Tool für datenschutz-konforme Marketing-Automation, die viel Zeit spart und die Konversionsraten erhöht. Mehr erfahren ↗

SEOfolgreich

Deine Experten für Local SEO in München. Local SEO richtet sich an lokale Unternehmen, die ihre Sichtbarkeit erhöhen wollen. Mehr erfahren ↗

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.

Beispiele von gut umgesetzten responsiven Webdesign

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.

News Layout

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.

Magazine Layout

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

Von Brian Haferkamp.

CSS Grid Magazine Layout

Von Elzette.

A Piece of Art

Von Michelle Barker.

Inside Abbey Road

Inside-Abbey-Road

Beagle – Better proposals

Beagle

HBM FiberSensing

HBM-FiberSensing
fibersensing

Web Design London

Web-Design-London
webdesign.london

Carmichael Lynch

Carmichael-Lynch

Estudio NK

Estudio-NK
estudio nk

Welcome Spring Festival 2015

Welcome-Spring-Festival-2015
spring-festival

Marie – Creative Agency Portfolio Template

MARIE-Multipurpose-Creative-Portfolio
marie

Masi Tupungato

Masi-Tupungato
masi

Cofamedia Inc

COFA-Media
cofa

Fornasetti

Fornasetti
forsanetti-responsive

OuiSurf in Africa

OuiSurf.tv

Chris Niedenthal

Chris-Niedenthal

Alexander Engzell Portfolio

Alexander-Engzell
Alexander-Engzell

Bav Tailor

BAVTAILOR
BAVTAILOR

Trading Culture

Trading-Culture
Trading-Culture

RGB Media

RGB-MEDIA
RGB-MEDIA

Unfollowhance

Unfollowhance
Unfollowhance

Diego Sivori

Diego-Sivori
Diego-Sivori

RC Comunicação

RC-Comunicaco
RC-Comunicaco

555 Chabanel

555-Chabanel
555-Chabanel

BrainBox

BRAINBOX
BRAINBOX

Ello

ello
Ello

Mage Developers

mage-developers

Futuramo Icons

FUTURAMO-ICONS
FUTURAMO-ICONS

jeferson winter

www.jefersonwinter.com
www.jefersonwinter.com

Totem

Totem

nbsp;Catalogue-Interactif Bonobo

Catalogue-Interactif Bonobo

Nothing But Thieves

Nothing-But-Thieves

One Dollar Lesson

One-Dollar-Lesson

Five Minutes

FIVE-MINUTES

Doriart Webdesign

Doriart

Vangarde Music

We-are-Vangarde

8. Sons of Anarchy Tattoo Stories

Sons-of-Anarchy-Tattoo-Stories

RGB Media Webdesign-Agency

RGB-MEDIA

De Haus

De-Haus

Gogoro

Gogoro

adaptable

adaptable

Trippeo

Trippeo

Let´s make History

Lets make History

Urban Influence

Urban-Influence

MoodBoard Film

MOODBOARD

Reebok – Be more Human

Reebok - Be more Human

Easy Rocket Studio

Easy-Rocket-Studio

Chedi Andermatt Residences

Chedi Andermatt Residences

Celebrating Chinese New Year 2015

Celebrating-Chinese-New-Year-2015

We are Zaion

We-Are-Zaion

Melanie Daveid

Melanie-Daveid

Österreich erleben

Österreich erleben

Sassi Holford

Sassi-Holford

Bolig Reisen

Boligreisen

DogStudio

Dogstudio

FiberSensing

HBM-FiberSensing

NUA Bikes

Nua-Bikes

Emiliano Barri

Emiliano-Barri

RiotGames: Thunderdome

Welcome-to-Thunderdome

In Pieces

In-Pieces

Printemps du Polar

Le-Printemps-du-Polar

While We’re Young

While-We-where-Young

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 gefällt die Website der Mage Developers sehr gut, da der Hero-Bereich wirklich ansprechend gestaltet worden ist und schöne Fotos Verwendung fanden.

Dazu passt:   Guide: Mehr Webdesign-Kunden finden
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.

Neue Agenturen auf Dr. Web

Binary Garden

Hannover

Interstruct Communications AG

Berlin

Die Texterin

Köln

JUNIQUE Design

Bonn

Vogelsang Werbe- und Projektbüro

Hannover

New Era Marketing

Kämpfelbach

Agentur eintragen

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.

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

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

Passende Beiträge

Sonnenaufgang auf dem Berg, über den Wolken
HTML

Website-Vorlagen: Die 101 besten, kostenlosen HTML-Templates (2021-Update)

Websiten so ganz ohne ein CMS zusammenzubauen ist eine schnelle und bequeme Art, die eigene Webseite live zu bringen. Das macht vor allem dann Sinn, wenn sich die Inhalte eh nur selten ändern. Im folgenden Artikel stellen wir also eine Sammlung an kostenlosen HTML-Templates zusammen. Viel Spaß damit!

Weiterlesen »
Der Schreibtisch eines Webdesigners, mit Laptop, iMac, einem Design-Buch und einem Smartphone-Papier-Mockup.
Webdesign

Mit den Mitteln der Moderne: Warum Sie Webdesigner und SEO-Experten engagieren sollten

Sie möchten mit Ihrem Unternehmen, Ihren Dienstleistungen oder Ihrem Hobby mehr Reichweite erfahren? Die Bindung zu den Kunden soll nicht nur aufgebaut oder ausgebaut, sondern dauerhaft gefestigt werden? Dann bietet sich das Erstellen einer eigenen Webseite an.

Weiterlesen »
Lizenzfreie, kostenlose Bilder und Illustrationen für alle! - Eine Nahaufnahme von einer Blume - Illustration
Fotografie

Lizenzfreie, kostenlose Bilder und Illustrationen für alle!

Kostenlose Fotos kann man immer gebrauchen. Sie zu finden, ist nicht ganz so einfach, denn häufig musst du doch zahlen, oder teils abstruse Lizenzen einhalten. Tust du das nicht, kann es schnell zur Abmahnung kommen.

Weiterlesen »
  • Agentur finden
  • Agentur eintragen
  • AGB
  • CSS
  • Datenschutzhinweise
  • Dr. Web Autoren
  • Impressum
  • SEO
  • Webdesign
  • Websites
  • WordPress
  • Nach oben ↑
Menü
  • Agentur finden
  • Agentur eintragen
  • AGB
  • CSS
  • Datenschutzhinweise
  • Dr. Web Autoren
  • Impressum
  • SEO
  • Webdesign
  • Websites
  • WordPress
  • Nach oben ↑
Wir verwenden Cookies, um Besucherzahlen zu messen. Mehr dazu in unserer Datenschutzerklärung. Einverstanden? EinstellungenIch stimme zu
Cookie-Einstellungen

Cookies im Überblick

Wir verwenden Cookies, mit denen wir analysieren und verstehen können, wie Sie diese Website nutzen. Auch kommen technisch notwendige Cookies zum Einsatz, bspw. für den Kunden-Login. Ferner verwenden wir auch Cookies von Drittanbietern. Diese Cookies werden nur mit Ihrer Zustimmung in Ihrem Browser gespeichert. Sie haben auch die Möglichkeit, diese Drittanbieter-Cookies zu deaktivieren. Das Deaktivieren dieser Cookies kann sich jedoch zulasten der Nutzererfahrung auswirken.
Notwendig
immer aktiv

Notwendige Cookies sind unbedingt erforderlich, damit die Website ordnungsgemäß funktioniert. Diese Kategorie enthält nur Cookies, die grundlegende Funktionen und Sicherheitsmerkmale der Website gewährleisten. Diese Cookies speichern keine persönlichen Informationen.

Nicht zwingen notwendige Cookies

Alle Cookies, die für die Funktion der Website nicht unbedingt erforderlich sind und zur Erhebung personenbezogener Daten des Benutzers über Analysen, Anzeigen und andere eingebettete Inhalte verwendet werden, werden als nicht erforderliche Cookies bezeichnet.

SPEICHERN UND AKZEPTIEREN
Das große Dr. Web Icon-Set:
970+ Icons, im SVG-Format
Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Danke nein, ist nichts für mich.
Invalid email address
Danke dir! Hier ist das Icon-Set:

Hier herunterladen (zip-Datei, 843 kB)

Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Danke nein, ist nichts für mich.
Invalid email address
Danke dir! Hier ist das Icon-Set:

Hier herunterladen (zip-Datei, 843 kB)