Ein Mockup der Seite aeosys.de in verschiedenen BildschirmgrĂ¶ĂŸen, Laptop, Tablet und Mobil.

10 Beispiele fĂŒr gutes Responsive Webdesign (Showcase)

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

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

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

Link zur Demo auf CodePen.io

Von Brian Haferkamp.

CSS Grid Magazine Layout

Link zur Demo auf CodePen.io

Von Elzette.

A Piece of Art

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.

Wie hilfreich fanden Sie diese Seite?

Durchschnittliche Bewertung 4.5 / 5. Anzahl Bewertungen: 2

Ähnliche BeitrĂ€ge

8 Kommentare

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

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

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

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

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

Sagen Sie uns Ihre Meinung

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