Designagentur Schumacher

entwickelt medienübergreifende Designlösungen für zukunftsorientierte Menschen.

Blog

Kartenbasiertes Webdesign mit Masonry

Kartenbasiertes Webdesign mit Masonry

06. Juli 2016 |
Tags: , , ,
Kategorie: Tipps & Tutorials

Cardbased Webdesign beschreibt eine benutzerfreundliche Design-Methode, um Elemente auf einem Interface anzuordnen. Die Elemente werden dabei nach inhaltlichen Aspekten untergliedert und in karten- oder kachelähnlichen Formaten angeordnet.
Das bekannteste Beispiel dafür ist Pinterest – die Website, auf der viele wahrscheinlich zum ersten Mal diese Layoutmethode gesehen haben. Deshalb wird Cardbased Webdesign oft auch als Pinterest-Layout bezeichnet.

Noch immer liegen diese kartenbasierten Grids voll im Trend und haben sich über die Jahre auf vielen digitalen Anwendungen für ganz unterschiedliche Zwecke etabliert: zum Beispiel um die Bilder einer Bildergalerie oder Blogbeiträge in einer Blogübersicht strukturiert darzustellen. Weitere Webauftritte, die diese attraktive Darstellung ebenso nutzen sind FacebookTwitter – und natürlich Schumacher.

Masonry positioniert intelligent und dynamisch

Auch wenn der Trend schon länger anhält, hat sich die Art und Weise, wie Elemente angeordnet werden weiterentwickelt. Bei reinen CSS-basierten Lösungen, sprich Elementen, die per CSS gefloatet werden, können Weißraum und Lücken entstehen, wenn Elemente unterschiedliche Formate aufweisen. Beim Einsatz von JavaScript-Plugins hingegen ist eine intelligente und dynamische Positionierung möglich. Der vorhandene Platz wird somit optimal genutzt.

Die populärste Lösung dafür ist das JavaScript-Plugin Masonry.js, vom Entwickler David DeSandro. Masonry bedeutet frei übersetzt so viel wie »Mauerwerk«. Und eben daran orientiert sich diese Grid-Methode. Elemente werden wie Steine in einer Mauer angeordnet und verzahnt, so dass keine bis möglichst wenig Lücken entstehen.

CSS basierte Anordnung im Vergleich mit plugingestützter Anordnung (z.B Masonry.js)

Neben Masonry gibt es selbstverständlich noch weitere Bibliotheken, die jeweils ihre eignen Vor- und Nachteile haben. Isotope.js und Wookmark.js werden ebenfalls häufig eingesetzt. Die Installation der Plugins geht schnell und unkompliziert. Eine Anleitung sowie entsprechende Anwendungsbeispiele für die Implementierung finden sich in der Regel auf der Website oder dem Github-Projekt des entsprechenden Plugins.

 

DIESE BEITRÄGE KÖNNTEN SIE AUCH INTERESSIEREN

Das neue Adobe Acrobat DC – Reader oder Pro-Version?

Das neue Adobe Acrobat DC – Reader oder Pro-Version?

Warum ist »Acrobat Reader DC« besser? Lohnt sich Acrobat Pro DC? Das und mehr über die Zukunft der PDFs …

02. März 2017 | Kommentar schreiben

Suitcase Fusion 5 – Teil 1: Tipps für den Überblick im Schriftenuniversum

Suitcase Fusion 5 – Teil 1: Tipps für den Überblick im Schriftenuniversum

Wir geben in zwei Teilen Tipps für die Arbeit mit dem Schriftverwaltungsprogramm Suitcase Fusion 5. Teil 1: Von Symbolleiste bis Vorschau.

23. Juni 2015 | Kommentar schreiben

CSS mit SASS & LESS

CSS mit SASS & LESS

Wir zeigen die Vorteile durch die Benutzung von SASS und LESS bei der CSS-Entwicklung.

26. November 2014 | Kommentar schreiben

2 Kommentare

  1. davehall schrieb am 17. Januar 2017 07:41

    Really great post, I am happy to be here. Thank you for sharing This knowledge.Excellently written article, if only all bloggers offered the same level of content as you, the internet would be a much better place. Please keep it up! Nowadays I can‘ see any new posts in your blog, make your site more active and keep blogging with new contents.

    • Christian Müller-Brinkum schrieb am 23. Januar 2017 14:15

      Hi Dave,
      thanks for your pleasant feedback! We are glad that you and other people find our articles useful. (Un)fortunately we are very busy at the moment and share your sadness about the irregularity of publishing. Nevertheless, we plan to release articles more frequently.

Schreibe einen Kommentar