Kartenbasiertes Webdesign mit Masonry

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 Facebook, Twitter – 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.
 

Teilen

Christian Müller-Brinkum - Webdeveloper

Über den Autor

Christian Müller-Brinkum
Webdeveloper