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.

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.

Autor: Internet-Marketing Inh.: Frank-M. Nowara
Web: www.internet-marketing.de
Mail: admin[ad]internet-marketing.de
Phone: 0049 (0)911 49 75 58
Fax: 0049 (0)911 49 75 09
Quelle: https://www.servicepraxis.com/cards-fuer-mobilgeraete/