Kuratierte Linksammlung für Webdesigner und -entwickler.
30 Responsive Webdesign Inspirationen

Moderne responsive Webdesigns für Deine Inspiration

Die Komplexität der Web-Industrie stellt Designer und Webentwickler vor neue Herausforderungen. Wer heute noch Websites nur für den Desktop-Anwender erstellt, hat schlechte Karten für die Zukunft. Webdesign hat sich in den letzten Jahren sehr geändert und der Wandel hält an. Genau in diesem Moment arbeiten tausende Entwickler, Ingenieure und Produktdesigner bereits an neuen mobilen Web-Technologien. In kaum einer anderen Branche verändern sich die Trends so rasant wie bei den Smartphones und Tablets.

Sprungmarken:

Anzeige

Responsive Webdesign

Die rasant entwickelnde Webdesign-Industrie stellt Webdesigner und Webentwickler mit ihrer zunehmenden Komplexität vor der anspruchsvollen Herausforderung, immer auf den neuesten Stand zu bleiben. So müssen sich Websites nun an das Ausgabeformat eines jeweiligen Gerätes anpassen. Webdesigner sprechen von einem responsiven Webdesign.

Beim Responsive Webdesign handelt es sich um die technische Umsetzung eines anpassungsfähigen Designs und Layouts einer Website. Der grafische Aufbau einer „responsiven“ Webseite erfolgt anhand der Anforderungen des jeweiligen Gerätes, mit dem die Seite angeschaut wird. Dies betrifft üblicherweise die Anordnung und Darstellung einzelner Elemente der Webseite, wie beispielsweise Navigationen, Seitenspalten, Texte und Grafiken. Technische Basis bilden hierfür neueste Webstandards wie HTML5 und CSS3.

Mobiles Internet

2010 gab es etwa 13 Millionen Spartphone-Benutzer in Deutschland. Ein Jahr später waren es schon über 20 Millionen Nutzer. Und im letzten Quartal 2012 waren es bereits 30 Millionen mobile Internetnutzer mit Smartphones und Tablets in Deutschland. Mehr als ein drittel dieser Smartphone und Tablet-Nutzer gehen regelmäßig mit ihrem Gerät ins Netz. Ein Ende des Zuwachses ist nicht in Sicht. Einige Gründe für den Boom sind wahrscheinlicherweise eine nahezu flächendeckende Verfügbarkeit mobiler Breitbandverbindungen, sinkende Gerätepreise sowie immer günstigere Datentarife.

Mit den komplexer werdenden Webtechnologien wird es auch für Webdesigner und Theme-Entwickler zunehmend spannender an Lösungen zu arbeiten, um ein Design ansprechend und benutzerfreundlich für die mobilen Endgeräte kompatibel erreichbar zu machen. Und ich erfreue mich immer wieder, Websites zu entdecken, die mir neue Wege zeigen, dies zu erreichen oder mir einfach neue und einzigartige Ideen liefern, noch bessere mobile Designs zu entwickeln.

30 Responsive Webdesign Inspirationen

Nachfolgend möchte ich Dir 30 Websites vorstellen, dessen Designer sehr ansprechende und benutzerfreundliche responsive Websites realisiert haben. Viel Spaß beim inspirieren lassen!

1. www.supereightstudio.com

Screenshot von www.supereightstudio.com

2. www.vogue.co.uk

www.vogue.co.uk

3. www.matthewcarleton.com

www.matthewcarleton.com

4. manoscrafted.com

manoscrafted.com

5. crushstud.io

crushstud.io

6. www.microsoft.com

www.microsoft.com

7. www.themealings.com.au

www.themealings.com.au

8. happycog.com

happycog.com

9. www.liftinteractive.com

www.liftinteractive.com

10. www.zurb.com

www.zurb.com

11. paidtoexist.com

paidtoexist.com

12. yaronschoen.com

yaronschoen.com

13. friendsoftheweb.com

friendsoftheweb.com

14. jotoThemes.com

jotoThemes.com

15. elevn.co

elevn.co

16. johannlucchini.com

johannlucchini.com

17. 35mmdesign.com

35mmdesign.com

18.danielvane.com/

danielvane.com

19. forefathersgroup.com

forefathersgroup.com

20. www.humaan.com.au

www.humaan.com.au

21. www.anderssonwise.com

www.anderssonwise.com

22. cafeevoke.com

cafeevoke.com

23. stephencaver.com

stephencaver.com

24. www.fork-cms.com

www.fork-cms.com

25. earthhour.fr

earthhour.fr

26. clearairchallenge.com

clearairchallenge.com

27. www.omdrl.org

www.omdrl.org

28. calebacuity.us

calebacuity.us

29. www.kavaruzova.cz

www.kavaruzova.cz

30. womenandtech.com

Screenshot von womenandtech.com

(Artikelild von flickr.com © adactio, CC-Lizenz)

Frischer Input für Designer. Jeder Abonnent erhält das kostenlose Bundle aus 50 Photoshop Device-Mockups und 40 Responsive WordPress-Themes.

1x pro Woche. Kein Spam. Jederzeit kündbar.
Jonathan Torke
Jonathan Torke

Auf pixeltuner.de teile ich aktuelle Ressourcen für Webdesigner und -entwickler. Du findest mich auch auf deviantART und Instagram.
PayPal-Kaffeespende.

6 Antworten auf "Moderne responsive Webdesigns für Deine Inspiration"
  • Avatar

    Sehr gute Auswahl, Jonathan. :)

    Mir fällt aber auf, dass die meisten Seiten irgendwie, irgendwo immer gleich ausschauen. Niemand hat wirklich noch spektakuläre Ideen, für modernes, responsives Webdesign. Meiner Meinung nach.

    Ganz klar, es ist alles noch im „Frühstadium“, ABER früher wurde auch mehr darüber nachgedacht, wie die eigene Seite aussehen könnte. Jetzt sieht alles abgekupfert und irgendwie konservativ aus.

    Wie siehst du das?

    • Jonathan

      Hi Kevin,

      Danke für Deinen Kommentar und sorry für meine verzögerte Antwort! Ein langes Wochenende war Schuld ;-)

      Ich glaube zu verstehen, wenn Du meinst, dass die Designs irgendwo gleich ausschauen und Ideen zur Abhebung fehlen. Ich denke jedoch nicht, dass es an mangelnder Kreativität liegt, vielmehr an den Techniken, die eingesetzt werden, um das Layout responsive zu bekommen. Mit weiteren beeindruckenden Lösungen, wie beispielsweise Off Canvas-Layouts oder mittels Javascript kann der Website viel mehr mobile Individualität verliehen werden.

      Ich behaupte einfach mal, dass diese neuen und speziellen Techniken fürs responive Design beim derzeitigen Stand der Entwicklung unter anderem noch eine Menge Herausforderungen beim Designer erzwingt. Das Wissen fehlt und somit die Zeit, ein Webprojekt mit vorgegebenem Budget noch individueller zu gestalten. Also entscheiden die meisten sich für die einfachste und eleganteste Lösung – CSS Media Queries: Hierbei erhält das Layout keine wesentlichen strukturellen Veränderungen. Daher mag es oft den Anschein haben, dass viele der responsive Designs ähnlich aussehen bzw. sich auf Mobilgeräten ähnlich verhalten.

      Lieben Gruß,
      Jonathan

      • Avatar

        Ach, brauchst dich doch nicht entschuldigen! :)

        Ja, das stimmt. Mit Off-Canvas kann man schon ziemlich nette Sachen machen. Ist ja im neuem Theme von Elmastudio mit eingebaut.

        Naja, wollen wir mal abwarten und schauen was die Zeit mit sich bringt. Bis dahin, schau ich mir CSS-Awards an und guck‘ mir dort die Augen wund.

        :)

        Danke für deine Antwort! :)

  • Avatar

    Beim Responsive Webdesign handelt es sich um die technische Umsetzung …

    Nein. Responsive Webdesign ist viel mehr als letztendlich die technische Umsetzung. Es fängt beim Design an (wär hätte es in Anbetracht des Namens Responsive Webdesign gedacht?), also bei der Konzeption. Was sich nicht auf die Konzeption der Präsentation beschränkt, sondern schon die Konzeption des Inhaltes einschließt.

    Dazu gehört auch die Planung der Zusammenarbeit der Produktmanager, der Ersteller der Inhalte, der Interaktionsdesigner, der Grafikdesigner, der Webentwickler. Und ein Wasserfallmaodell wird für Responsive Webdesign nicht tauglich sein.

  • Avatar

    Man .. Da sind wirklich gute Sachen bei. Mein Favorit ist aber #4 – manoscrafted.com. Irgendwie mag ich hier die Farben und den gesamten Aufbau. Nicht zu viel, nicht zu wenig, genau die richtigen Abstände. Es liest sich gut und mein Auge sagt mir – Es harmoniert. Genau so muss das nämlich sein.

Schreibe einen Kommentar

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

Verpasse keine News!

Du erhältst ein kostenloses Bundle aus 50+ WordPress-Themes und PSD Device-Mockups.

1x pro Woche. Jederzeit kündbar.
Anzeige