{"id":376,"date":"2019-06-19T16:02:53","date_gmt":"2019-06-19T14:02:53","guid":{"rendered":"https:\/\/www.logic-joe.com\/blog\/?p=376"},"modified":"2019-06-28T15:02:28","modified_gmt":"2019-06-28T13:02:28","slug":"responsive-c-a-t-s-1-c-versus-a","status":"publish","type":"post","link":"https:\/\/www.logic-joe.com\/blog\/responsive-c-a-t-s-1-c-versus-a\/","title":{"rendered":"Responsive C.A.T.S. #1: C VERSUS A"},"content":{"rendered":"

Wenn man von Akkordeons spricht, hat man meist einen singenden Matrosen mit Schifferklavier vor Augen. Wohl kaum einer denkt an ein Gestaltungselement, welches im Webdesign eine wichtige Rolle spielt. Collapsible – Noch nie geh\u00f6rt? Sollte definitiv nicht untersch\u00e4tzt werden. Also schieben wir den Seemann einmal zur Seite und lassen das Battle zwischen <\/span>C<\/b> und <\/span>A<\/b> beginnen. Wer von beiden die Runde gewinnt? Wir werden es gleich erfahren\u2026 <\/span><\/p>\n

ROUND 1: AKKORDEON<\/h2>\n

Um es auf den Punkt zu bringen: Ein Akkordeon verschachtelt Inhalte. Diese klappen mit MouseOver oder per Tap\/ Klick, \u00e4hnlich wie beim Musikinstrument, auf und zu. Das Akkordeon kann dabei vielseitig eingesetzt werden, beispielsweise f\u00fcr Textinhalte, Bilder oder auch Navigationselemente. Es ist ein gutes Werkzeug um eine Seite kurz und \u00fcbersichtlich zu halten, ohne dabei den Content verringern zu m\u00fcssen. Das Akkordeon bietet sich somit vor allem f\u00fcr Seiten mit gro\u00dfen Mengen an Informationen an. Im eCommerce Bereich w\u00e4re dies z.B. eine Produktdetailseite. Dieses Werkzeug kann ohne gr\u00f6\u00dfere Probleme auch responsiv genutzt werden. Seiten, die auf Desktopgr\u00f6\u00dfe noch \u00fcbersichtlich sind, k\u00f6nnen auf mobilen Endger\u00e4ten schnell zu Scroll-Frust beim User f\u00fchren. Mit dem Einsatz des Akkordeons (z.B. auch nur<\/span> bei mobilen Ger\u00e4ten) kann dies verhindert werden. Der User hat die wichtigste Info in Form einer Headline vor sich und kann sich seinen gesuchten Content einfach auf tapen\/ klicken. Wichtig zu wissen: Bei einem Akkordeon l\u00e4sst sich meist nur eine \u201eKlappe\u201c zur gleichen Zeit \u00f6ffnen, was nat\u00fcrlich oft sch\u00f6ner ist. Bei einer gro\u00dfen Menge an Content sorgt dies aber eventuell auch f\u00fcr Verwirrung, da der Eindruck entstehen kann, dass die Website \u201cspringt\u201d. Klingt aber doch erstmal ganz gut oder? Mal sehen was das Collapsible so zu bieten hat.<\/span><\/p>\n

ROUND 2: COLLAPSIBLE<\/h2>\n

Collapsible und Akkordeon \u2013 das Gleiche? F\u00fcr viele ist der genaue Unterschied erst mal unklar. Im Grunde sind sich diese beide Elemente auch ziemlich \u00e4hnlich, besonders was den ersten visuellen Eindruck angeht. Der wichtige Unterschied zum Akkordeon liegt dabei in der Funktionsweise. Denn beim Collapsible lassen sich mehrere \u201cKlappen\u201d gleichzeitig \u00f6ffnen. Diese bleiben auch so lange offen, bis sie durch Aktion des Users wieder geschlossen werden. Also im Gegensatz zum Akkordeon werden keine Elemente von selber wieder geschlossen. Vorteil: Die Website erweckt nicht den Anschein zu \u201cspringen\u201d. Nachteil: Die Seite k\u00f6nnte theoretisch (besonders auf mobilen Ger\u00e4ten) ziemlich lang werden.<\/span><\/p>\n

TECHNISCHER SPIELPLATZ<\/h2>\n

Dank CSS3 und jQuery kann sowohl das Akkordeon, als auch das Collapsible fast unendlich erweitert und gestylt werden. Mittlerweile ist mehr m\u00f6glich, als nur Farben und Schriften anzupassen oder Icons hinzuzuf\u00fcgen. Auch die Position der \u201cKlappen\u201d ist variabel: ob horizontal, vertikal oder sogar diagonal – Content l\u00e4sst sich auf die unterschiedlichste Art und Weise darstellen.<\/p>\n

\"\"

Wo ist der Unterschied? Bei einem Accordion ist immer nur ein Element gleichzeitig ge\u00f6ffnet, hingegen beim Collapsible kann der Nutzer beliebig viele Elemente gleichzeitig \u00f6ffnen (und wieder schlie\u00dfen).<\/p><\/div>\n

 <\/p>\n

Die Verwendung von Animationen erm\u00f6glicht es au\u00dferdem, \u00dcberg\u00e4nge von offen zu geschlossen und andersherum, weicher abzubilden. F\u00fcr den Entwickler, aber auch den Designer sind viele Dinge m\u00f6glich, um aus einem einfachen Akkordeon oder Collapsible ein kleines spielerisches Erlebnis f\u00fcr den User (und nat\u00fcrlich auch f\u00fcr einen selbst ;)) zu zaubern.<\/span><\/p>\n

AND THE WINNER IS …<\/h2>\n

Halten wir also fest: Mit dem Akkordeon l\u00e4sst sich nicht nur schr\u00e4ge Musik machen, sondern auch Inhalt userfreundlich auf einer Website verstecken. Und wer hat das Battle nun gewonnen? Nun, das kommt tats\u00e4chlich immer auf die Website und den jeweiligen Zweck an. Beide sind n\u00fctzlich. Belassen wir es also erstmal bei einem Unentschieden \ud83d\ude09 <\/span><\/p>\n

Im n\u00e4chsten C.A.T.S. Post erfahren wir dann, was es mit dem <\/span>T.<\/b><\/a> auf sich hat. <\/span><\/p>\n

Also, Bleibt entspannt!<\/span><\/p>\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

Teil I unserer Reihe zu best practices bei responsiven Modulen – ein Battle zwischen Collapsible und Akkordeon.<\/p>\n","protected":false},"author":5,"featured_media":518,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[],"_links":{"self":[{"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/posts\/376"}],"collection":[{"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/comments?post=376"}],"version-history":[{"count":14,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/posts\/376\/revisions"}],"predecessor-version":[{"id":560,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/posts\/376\/revisions\/560"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/media\/518"}],"wp:attachment":[{"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/media?parent=376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/categories?post=376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.logic-joe.com\/blog\/wp-json\/wp\/v2\/tags?post=376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}