Cards für Mobilgeräte
Karten, Kästchen bzw. Boxen bieten nicht nur eine intuitive User Experience. Die sogenannten Card Elemente bewähren sich gerade im User Interface Design. Sie geben Webseiten Struktur bei gleichzeitiger Flexibilität. Auch und gerade auf Mobilgeräten.
Platzsparende Lösung für Smartphone und Tablet
Eine längere Seite, auch so manche Darstellung als One-Page, mag auf dem Desktop übersichtlich erscheinen, auf dem Tablet, spätestens dem Handy, ist diese jedoch oft dahin. Mit der Cascading Stylesheet Eigenschaft des Scroll-Snap kann man diese Übersichtlichkeit wieder herstellen. Statt nach unten lässt man einzelne Bereiche stattdessen beispielsweise horizontal scrollen, auf Mobilgeräten kann der User dann nach rechts bzw. links wischen.
Scroll Snap in der Praxis
Im Fallbeispiel werden zwölf Reiseziele für einen Honeymoon als Landingpage präsentiert. Für Desktops vier bzw. für Laptops drei Boxen je Reihe. Auf einem Mobilgerät ist diese Art der Darstellung mit beispielsweise zwei Kästen in einer Zeile schnell nicht mehr lesbar, alles untereinander für User langweilig.
Genau hier greift Scroll-Snap ein! Anordnung aller Boxen nebeneinander in einer Zeile. Einer Box wird achtzig Prozent des Platzes eingeräumt, sodass sofort sichtbar ist, dass es entsprechend weiter geht. Maximales Nutzerlebnis, ohne dass die Seite zu lang wird und an Übersichtlichkeit verliert.
Usability und User Experience werden deutlich verbessert. Die Eigenschaft wird von rund 95 % der von Nutzern eingesetzten Browsern unterstützt (vgl.: www.caniuse.com). Schön umsetzen kann man dies beispielsweise im Zusammenspiel mit Bootstrap und Cards, aber auch mit Bildern und ähnlichen Inhalten. Um kein Flattern zu erzeugen, sollten die so dargestellten Inhalte alle die gleiche Größe haben.
Natürlich ist vertikales Scrollen auch möglich.
Der Effekt eignet sich ebenfalls für ganze Sektionen einer Website.
Unterschiedlich große Inhalte
Vielen ist das sogenannte Masonry für Bilder von der Plattform Pinterest her bekannt. Eine Darstellung bei insbesondere unterschiedlich hohen Inhalten ähnlich einem Kachel- bzw. Mauerwerk. Karten und Boxen können z. B. mit einer Flexbox in die gleiche Höhe gebracht werden, doch was tun, wenn dies nicht gewünscht ist? Hilfe bietet in einem solchen Fall die von WordPress bereits mitgelieferte Grid-Layout-Bibliothek: www.servicepraxis.com/plugins/lightbox/masonry.