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, 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
Ein Mockup des Matcha-Shops getsummerrain.de. Die Seite wurde mit Webflow erstellt.
Digitalagentur „aeosys“
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
Agentur für Barrierefreiheit: Bocoup
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. 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
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.
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.
8 Antworten
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.
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? 😉
Wir haben da leider keine Aktien bei Am I Responsive. Und die verwenden nun mal Mac-Hardware.
Ich verwende sie auch – zum Arbeiten wie in Darstellungen. Mich wundert nur, dass es keine Alternative gibt. Die Monotonie wird langweilig.