Dr. Web Digital Experts-Logo
  • CSS
  • SEO
  • Tools
  • Webseiten erstellen
  • Webdesign
  • WordPress
  • × 🍔 vertilgen
  • ☰ Menu
Hier das Dr. Web Icon-Set herunterladen.

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.
Lade Dir jetzt das Icon-Set kostenlos herunter

Übersicht

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.

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.

8 Antworten

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

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 »
Farben und Farbverläufe finden und kombinieren mit Neumorphism - Produktdesign
Webdesign

Passende Farben finden: 14 Tools für Farbkombinationen und Farbverläufe

Farben spielen im Design natürlich eine große Rolle. Doch stimmige und passende Farbkonzepte zu erstellen, ist nicht jedermanns Sache. Daher gibt es eine Reihe von Webanwendungen, die dir helfen, gute Farbkombinationen zu finden. Monochromatische Farben lassen sich ebenso zusammenstellen wie Komplementärfarben. Dabei unterscheiden sich die Tools teils bereits im Ansatz.

Weiterlesen »
Eine animierte Karte, die sich bewegt, wenn man auf der Website nach unten scrollt.
Webdesign

UX Design: diese Grundlagen sollten Sie kennen

Beim UX-Design geht es vor allem um die Anwenderfreundlichkeit von Websites und Produkten. UX-Design ist weit mehr als nur Webdesign, sondern beinhaltet die ganzheitliche Gestaltung aller Berührungspunkte mit dem Kunden, einschließlich Branding, Design, Benutzerfreundlichkeit und Funktion.

Weiterlesen »
Lade Dir jetzt das Icon-Set kostenlos herunter

  • Agentur
  • CSS
  • Datenschutzhinweise
  • Impressum
  • SEO
  • Webdesign
  • Websites
  • WordPress
  • Nach oben ↑
Menü
  • Agentur
  • CSS
  • Datenschutzhinweise
  • 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

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Notwendige
immer aktiv

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Nicht notwendige

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.