Quelle: Shutterstock
Techniken für Masonry-Layouts 12.08.2020, 11:22 Uhr

Keine Lücken

Für die Umsetzung von Masonry-Layouts stehen mehrere Techniken zur Verfügung.
Masonry ist ein Layouttyp, bei dem Inhalte unterschiedlicher Ausmaße einen Bereich – oft den Viewport – so geschickt ausfüllen, dass kein Platz ungenutzt bleibt. Der Begriff Masonry selbst heißt Mauerwerk: So wie bei einer (Naturstein)Mauer Steine unterschiedlicher Größen optimal platziert werden und keine Lücken entstehen, so ist es auch mit den Inhaltselementen bei diesem Layouttyp.
Dieser ist praktisch bei verschieden hohen Inhalten, die mehr oder minder gleichberechtigt sind. Wenn Sie diese in einem klassischen Raster unterbringen, verschenken Sie sehr viel Platz, weil die Rasterzeilenhöhe sich immer am höchsten Element orientieren muss. Damit wird die Seite sehr lang und die Benutzer müssen viel scrollen. Beim Masonry-Layout hingegen wird der Platz bestmöglich genutzt, die Seite weniger hoch. Dieser Layouttyp gibt relativ wenig Struktur oder Ordnung vor; deswegen ist es wichtig, dass bei Text- & Bildkombinationen deutlich wird, was zusammengehört, dass die Bezüge klar sind. Dafür können Sie Abstände zwischen den Komponenten definieren oder die einzelnen Komponenten mit Rahmen umfassen. Ohne solche Hilfsmittel kann es passieren, dass ein Text fälschlicherweise zum Bild daneben zugeordnet wird statt zum eigentlich zugehörigen Bild davor.

web & mobile DEVELOPER

Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt web&mobile Developer plus Kunde.
  • 2 Monate Gratis testen
  • Über 4.000 qualifizierte Fachartikel
  • Diverse DevBooks thematisch für Sie zusammen gestellt
  • Webcasts von 30 - 90 Min.
  • Aufzeichnungen von ausgewählten Fortbildungen und Konferenzen
  • Auf jedem Gerät verfügbar