[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":3,"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":49,"9nXBFpeabNAvIy18YBJGi_tRitM3QLoVvb8ii9UluHA":75,"aK_lg0CcJT9_SdduNXdLN0Ia6wkmyBupFpklCgRQG_U":164,"_apollo:default":209},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","nuxt-main-menu","Nuxt Hauptmenü",[9,24,29,34,39,44],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog",null,"/know-how",{"__typename":16,"id":17,"name":18,"direction":19},"Language","de","German","ltr",true,false,{"__typename":23,"class":13},"MenuItemAttributes",{"__typename":10,"id":25,"title":26,"description":13,"url":27,"langcode":15,"internal":20,"expanded":21,"attributes":28},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":20,"expanded":21,"attributes":38},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":40,"title":41,"description":13,"url":42,"langcode":15,"internal":20,"expanded":21,"attributes":43},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":15,"internal":20,"expanded":21,"attributes":48},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__typename":23,"class":13},{"menu":50},{"__typename":5,"id":51,"name":52,"items":53},"footer","Fußzeile",[54,60,65,70],{"__typename":10,"id":55,"title":56,"description":13,"url":57,"langcode":58,"internal":20,"expanded":21,"attributes":59},"e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum","/impressum",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":58,"internal":20,"expanded":21,"attributes":64},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":58,"internal":20,"expanded":21,"attributes":69},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":58,"internal":21,"expanded":21,"attributes":74},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__typename":23,"class":13},{"route":76},{"__typename":77,"entity":78},"RouteInternal",{"__typename":79,"id":80,"title":81,"changed":82,"created":88,"langcode":89,"path":90,"promote":21,"status":20,"sticky":21,"metatag":91,"postCategory":111,"postContentElements":13,"evergreen":13,"tags":136,"postWpBody":154,"wpHeaderImage":13,"wpHeaderImageOld":13,"wpHeaderImageOldSmall":13,"wpOgImage":13,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":13,"wpYoastHead":157,"author":158},"NodeWpPost","1046","Mobile Contentslider",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1372073441,"UTC","+00:00","2013-06-24T11:30:41+00:00",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},{"__typename":16,"id":17,"name":18,"direction":19},"/blog/mobile-contentslider",[92,99,106],{"__typename":93,"tag":94,"attributes":95},"MetaTagValue","meta",{"__typename":96,"name":97,"content":98},"MetaTagValueAttributes","title","Mobile Contentslider | Liechtenecker UX Design Studio",{"__typename":100,"tag":101,"attributes":102},"MetaTagLink","link",{"__typename":103,"href":104,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"MetaTagLinkAttributes","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/blog/mobile-contentslider","canonical",{"__typename":107,"tag":94,"attributes":108},"MetaTagProperty",{"__typename":109,"property":110,"content":81},"MetaTagPropertyAttributes","og:title",{"__typename":112,"id":113,"name":114,"path":115,"status":20,"weight":116,"description":117,"langcode":121,"changed":122,"metatag":125},"TermCategories","8","UX/UI Design","/kategorie/design",0,{"__typename":118,"processed":119,"format":120},"Text","Themen aus dem Bereich Design &amp; User Experience","wp_html",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":83,"timestamp":123,"timezone":85,"offset":86,"time":124},1713772777,"2024-04-22T07:59:37+00:00",[126,129,133],{"__typename":93,"tag":94,"attributes":127},{"__typename":96,"name":97,"content":128},"UX/UI Design | Liechtenecker UX Design Studio",{"__typename":93,"tag":94,"attributes":130},{"__typename":96,"name":131,"content":132},"description","Themen aus dem Bereich Design & User Experience",{"__typename":100,"tag":101,"attributes":134},{"__typename":103,"href":135,"hreflang":13,"rel":105,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/design",[137,142,146,150],{"__typename":138,"id":139,"name":140,"path":141,"weight":116},"TermTags","267","Contentslider","/tag/contentslider",{"__typename":138,"id":143,"name":144,"path":145,"weight":116},"822","mobile optimierung","/tag/mobile-optimierung",{"__typename":138,"id":147,"name":148,"path":149,"weight":116},"1076","responsive webdesign","/tag/responsive-webdesign",{"__typename":138,"id":151,"name":152,"path":153,"weight":116},"1331","touch","/tag/touch",{"__typename":155,"processed":156,"format":120,"summary":13},"TextSummary","\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cdiv alt=\"slider\" data-entity-type=\"media\" data-entity-uuid=\"dee0c8dc-3865-4123-89c2-fd759c228cae\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2013/06/slider21-1.jpg.webp?itok=cRuSUPWK 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2013/06/slider21-1.jpg.webp?itok=-UFGt_mQ 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1000\" height=\"600\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2013/06/slider21-1.jpg.webp?itok=M8L3fPAW 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2013/06/slider21-1.jpg.webp?itok=ZgVN2lc7 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1000\" height=\"600\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2013/06/slider21-1.jpg.webp?itok=Mst6q4o2 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2013/06/slider21-1.jpg.webp?itok=03csfa8b 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"447\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2013/06/slider21-1.jpg.webp?itok=LtffmB_Y 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2013/06/slider21-1.jpg.webp?itok=zcGvfnTM 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"288\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2013/06/slider21-1.jpg.webp?itok=tSrIOvnK 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2013/06/slider21-1.jpg.webp?itok=MsE8zHMf 2x\" type=\"image/webp\" width=\"1000\" height=\"600\">\n                  \u003Cimg loading=\"lazy\" width=\"1000\" height=\"600\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2013/06/slider21-1.jpg.jpg?itok=MsE8zHMf\" alt=\"slider\" title=\"slider\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003Cp>Vor einige Zeit haben wir schon ausführlich über \u003Ca href=\"/contentslider/\" target=\"_blank\" rel=\"noopener noreferrer\">Contentslider\u003C/a> und deren (richtigen) Einsatz geschrieben. Heute soll es um die Optimierung von Slidern für mobile Devices gehen.\u003Cbr>\n\u003Cbr>\nZunächst einmal muss überlegt werden, ob der Slider wirklich so relevant im Kontext für die Webseite und den Content ist, dass er auch in der responsive Variante der Seite benötigt wird. Meistens ist dies nicht unbedingt der Fall, aussparen hilft dem User am Smartphone oder Tablet.\u003Cbr>\nZusätzlich könnte man auch andenken, den Inhalt des Sliders in einer anderen Form zu präsentieren, was für reine Contentslider besser funktioniert, als für Bildergalerien. Beispielsweise wäre auch für Tablets ein Touchslider (swipen) sinnvoll, oder ab der Größe eines Smartphones die Inhalte des Sliders in Boxen darzustellen, heisst alle Inhalte des Sliders am kleinen Screen komplett untereinander aufzulösen.\u003C/p>\n\u003Cp dir=\"ltr\">Das ganze ist nicht nur einer Frage des Ressourcenverbrauchs – vielleicht passt der Slider gar nicht in das mobile Konzept der Webseite oder würde den User nur unnötig verwirren?\u003C/p>\n\u003Ch3>Ein simpler Slider stiftet Verwirrung?\u003C/h3>\n\u003Cp>Für uns Internetaffines Volk, ist eher klar, dass wir zwischen den Items eines Sliders durch swipen, mit unserem Finger wechseln können. Aber glaubt ihr, dass dies allen anderen Usern das genauso klar ist? Unserer Erfahrung nach ist dies nicht immer so.\u003C/p>\n\u003Ch3 dir=\"ltr\">Navigationspfeile als Lösung?\u003C/h3>\n\u003Cp dir=\"ltr\">Wir denken, dass Links-Rechts-Pfeile nicht die optimale Lösung sind. Zunächst haben wir die Verantwortung die User zu erziehen – das heißt mit den Pfeilen zeigen wir dem User, dass eine mobile Seite genauso wie am Desktop bedient wird. Das ist in dem Fall keine gute Erziehung, denn durch die Fingergesten haben wir viele andere Möglichkeiten eine Webseite zu bedienen! Außerdem müssten diese Pfeile eine gewisse Größe haben, damit der User diese auch antippen kann (siehe in unserem Blogbeitrag zu \u003Ca href=\"/optimierungen-von-webseiten-fur-mobile-devices/\" target=\"_blank\" rel=\"noopener noreferrer\">Mobile Optimierung von Webseiten\u003C/a>).\u003C/p>\n\u003Ch3 dir=\"ltr\">Die User sind ja nicht dumm\u003C/h3>\n\u003Cp dir=\"ltr\">Stellt euch nun eine mobile Bildergalerie vor: ein Item erstreckt sich über die gesamte Bildschirmbreite eures Smartphone und wir haben keine sichtbaren Navigationselemente. Wie weiß der User nun, dass das nicht nur \u003Cem>ein\u003C/em> Bild ist, sondern, dass er über swipen zum nächsten Bild kommt? Der User ist nicht dumm, braucht aber vielleicht einen Hinweis. Ich glaube auch nicht, dass das große Problem das swipen ist, sondern zu zeigen „hey, ich bin ein Slider!“. Sobald dies klar ist, kommt der User in den meisten Fällen sicher von selbst darauf, wie das Element zu bedienen ist. Deswegen hab ich mir mal meinen Hausverstand gepackt um ein paar simple Lösungen zu finden, um dem User zu zeigen, dass er einen Slider vor sich hat.\u003C/p>\n\u003Cul>\n\u003Cli>bei Bildergalerien in beispielsweise Blogbeiträgen bietet es sich an, den Slider anzukündigen. „In der Bildergalerie am Ende des Artikels könnt ihr meine neuen Briefmarken bewundern“ – oder so ähnlich.\u003C/li>\n\u003Cli>Die Slideritems automatisch durchlaufen lassen – wie zb auf unserer Webseite für die \u003Ca href=\"http://digitalvisions.liechtenecker.at\" target=\"_blank\" rel=\"noopener noreferrer\">Digital Visions&nbsp;\u003C/a>\u003C/li>\n\u003Cli>Einen Zähler anzeigen, wie zum Beispiel „2 von 4“ oder mittels den bekannten Sliderpunkten (bei dieser Methode könnte der User aber annehmen, dass er durch tippen auf einen Knödel zwischen den Items navigieren kann)\u003C/li>\n\u003Cli>Eine kurze Animation bei der schnell über alle Items gewechselt wird sobald der Slider sich im sichtbaren Bereich befindet\u003C/li>\n\u003Cli>Den User textlich auffordern zu swipen – á la „Swipe to navigate“\u003C/li>\n\u003Cli>Wenn sich auf der Seite mehrere Elemente befinden deren Bedienung erklärt werden sollte, könnte ein kurzes Tutorial eingeblendet werden. (zB bei der Fotobearbeitungsapp \u003Ca href=\"http://www.snapseed.com/de/home/\" target=\"_blank\" rel=\"noopener noreferrer\">Snapseed\u003C/a>\u003Ca href=\"http://www.idownloadblog.com/2012/09/17/google-buys-nik-software/\">\u003Cdiv alt=\"snapseed\" data-entity-type=\"media\" data-entity-uuid=\"7e2630d8-28b9-485f-80f2-6c04bc92d4c7\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2013/06/snapseed11-1.jpg.webp?itok=FUXMRhQU 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2013/06/snapseed11-1.jpg.webp?itok=ZLWISKA4 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"272\" height=\"409\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2013/06/snapseed11-1.jpg.webp?itok=yppSVp5l 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2013/06/snapseed11-1.jpg.webp?itok=U96qn26T 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"272\" height=\"409\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2013/06/snapseed11-1.jpg.webp?itok=MqAgWjKt 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2013/06/snapseed11-1.jpg.webp?itok=9Nk8EcIb 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"272\" height=\"409\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2013/06/snapseed11-1.jpg.webp?itok=iQ9zCen- 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2013/06/snapseed11-1.jpg.webp?itok=DU0UGcM2 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"272\" height=\"409\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2013/06/snapseed11-1.jpg.webp?itok=2SnTb9k_ 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2013/06/snapseed11-1.jpg.webp?itok=Lf3mNJrn 2x\" type=\"image/webp\" width=\"272\" height=\"409\">\n                  \u003Cimg loading=\"lazy\" width=\"272\" height=\"409\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2013/06/snapseed11-1.jpg.jpg?itok=Lf3mNJrn\" alt=\"snapseed\" title=\"snapseed\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003C/li>\n\u003C/ul>\n\u003Cp dir=\"ltr\">Wir persönlich finden die Variante mit der Animation über alle Items am besten. Der User sieht gleich, dass es sich um einen Slider handelt – außerdem sieht es auch noch toll aus.\u003C/p>\n\u003Ch3 dir=\"ltr\">Der Touchslider\u003C/h3>\n\u003Cp dir=\"ltr\">Nun aber zur Technik hinter den Touch Slidern! Wir verwenden sehr gerne den Touchslider\u003Ca href=\"https://github.com/lusever/TouchSlider\"> https://github.com/lusever/TouchSlider\u003C/a>. Einen tollen Artikel zur technischen Umsetzung findet ihr auch hier\u003Ca href=\"http://css-tricks.com/the-javascript-behind-touch-friendly-sliders/\"> http://css-tricks.com/the-javascript-behind-touch-friendly-sliders/\u003C/a>\u003C/p>\n\u003Ch3 dir=\"ltr\">Fazit\u003C/h3>\n\u003Cp dir=\"ltr\">Verwendet Touch Slider! 🙂 Wir sind für die Erziehung unserer User zuständig und dürfen sie nicht mit alten „Traditionen“ verhätscheln, oder gar denken, dass sie so einfache Konzepte nicht verstehen. In den meisten Fällen kann ein mobiler Slider für Stimmungsbilder jedoch ausgespart werden.\u003C/p>\n\u003Ch3 dir=\"ltr\">Und dann noch weil ich’s so witzig finde:\u003C/h3>\n\u003Cp>Im Android SDK gibt es die wunderbare Methode \u003Ca href=\"http://developer.android.com/reference/android/app/ActivityManager.html#isUserAMonkey()\" target=\"_blank\" rel=\"noopener noreferrer\">isUserAMonkey\u003C/a> &nbsp;„Returns „true“ if the user interface is currently being messed with by a monkey.“. &nbsp;User dürfen keine Angst haben, dass sie etwas kaputt machen könnten – auch wenn sie sich wie ein Äffchen aufführen – deswegen ist es auch wichtig robuste Anwendungen zu basteln.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n","\u003C!-- This site is optimized with the Yoast SEO plugin v15.7 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://legacy.liechtenecker.dev/blog/mobile-contentslider/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"Mobile Contentslider - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"Vor einige Zeit haben wir schon ausführlich über Contentslider und deren (richtigen) Einsatz geschrieben. Heute soll es um die Optimierung von Slidern für mobile Devices gehen. Zunächst einmal muss überlegt werden, ob der Slider wirklich so relevant im Kontext für die Webseite und den Content ist, dass er auch in der responsive Variante der Seite [&hellip;]\" />\n\u003Cmeta property=\"og:url\" content=\"https://legacy.liechtenecker.dev/blog/mobile-contentslider/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2013-06-24T13:30:41+00:00\" />\n\u003Cmeta property=\"og:image\" content=\"https://legacy.liechtenecker.dev/wp-content/uploads/2013/06/slider21-1.jpg\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" />\n\u003Cmeta name=\"twitter:label1\" content=\"Geschätzte Lesezeit\">\n\t\u003Cmeta name=\"twitter:data1\" content=\"4 Minuten\">\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://legacy.liechtenecker.dev/#website\",\"url\":\"https://legacy.liechtenecker.dev/\",\"name\":\"Liechtenecker\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https://legacy.liechtenecker.dev/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/blog/mobile-contentslider/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https://legacy.liechtenecker.dev/wp-content/uploads/2013/06/slider21-1.jpg\",\"width\":1000,\"height\":600},{\"@type\":\"WebPage\",\"@id\":\"https://legacy.liechtenecker.dev/blog/mobile-contentslider/#webpage\",\"url\":\"https://legacy.liechtenecker.dev/blog/mobile-contentslider/\",\"name\":\"Mobile Contentslider - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://legacy.liechtenecker.dev/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://legacy.liechtenecker.dev/blog/mobile-contentslider/#primaryimage\"},\"datePublished\":\"2013-06-24T13:30:41+00:00\",\"dateModified\":\"2013-06-24T13:30:41+00:00\",\"author\":{\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/6b4f41c44e934653474ab67647eaa4e6\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://legacy.liechtenecker.dev/blog/mobile-contentslider/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/6b4f41c44e934653474ab67647eaa4e6\",\"name\":\"Sarah\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https://secure.gravatar.com/avatar/f370faa99da7a5e86b0afa364854663c?s=96&d=mm&r=g\",\"caption\":\"Sarah\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"__typename":159,"id":160,"myRole":161,"name":162,"nickname":163},"User","21","-","s-mischinger","Sarah",{"latestKnowhow":165},[166,184,197],{"__typename":79,"id":167,"title":168,"path":169,"wpTeaserText":170,"wpPromotedTeaserImage":13,"wpHeaderImage":171},"1619","Behind the scenes: Ein Barrierefreiheits-Audit","/blog/behind-scenes-ein-barrierefreiheits-audit","”Entspricht unsere Website den gesetzlichen Anforderungen und wenn nicht, was genau müssen wir ändern?”\r\nDiese Frage lieben wir. Echt! Und so sieht unsere Antwort aus.",{"__typename":172,"id":173,"excludeFromScreenreader":13,"mediaImage":174,"name":182,"path":183,"status":20},"MediaImage","3364",{"__typename":175,"url":176,"width":177,"height":178,"alt":179,"title":13,"size":180,"mime":181},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-04/Headerbilder%20Blogartikel%20Behind%20the%20scene%20Accessibility%20Audit.jpg",2880,1300,"Headline mit Sujet: Tastatur mit Symbolen für Barrierefreiheit im Fokus auf hellem  Hintergrund",838204,"image/jpeg","Headerbilder Blogartikel Behind the scene Accessibility Audit.jpg","/media/3364/edit",{"__typename":79,"id":185,"title":186,"path":187,"wpTeaserText":188,"wpPromotedTeaserImage":13,"wpHeaderImage":189},"1616","Agentic KI trifft Design-System: Wie unser Presentation Maker entstand.","/blog/agentic-ki-trifft-design-system-wie-unser-presentation-maker-entstand","Nein, wir wollen euch jetzt nicht erzählen, was KI alles kann. Aber wir möchten euch zeigen, wie wir mit KI umgehen. \r\n",{"__typename":172,"id":190,"excludeFromScreenreader":13,"mediaImage":191,"name":195,"path":196,"status":20},"3355",{"__typename":175,"url":192,"width":177,"height":178,"alt":193,"title":13,"size":194,"mime":181},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-03/BLOG_Presentation%20Tool_TITEL-2880x1300px_1.jpg","Lukas und Daniel  arbeiten an Computern im Büro.",2621988,"BLOG_Presentation Tool_TITEL-2880x1300px.jpg","/media/3355/edit",{"__typename":79,"id":198,"title":199,"path":200,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":201},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":172,"id":202,"excludeFromScreenreader":21,"mediaImage":203,"name":207,"path":208,"status":20},"3303",{"__typename":175,"url":204,"width":177,"height":178,"alt":205,"title":13,"size":206,"mime":181},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-01/BLOG_Trendbericht%202026.jpg","UI Trends 2026, gelber Hintergrund, schwarze Schrift.",4700748,"BLOG_Trendbericht 2026.jpg","/media/3303/edit",{"Language:de":210,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":211,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":215,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":218,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":221,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":224,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":227,"Menu:nuxt-main-menu":230,"ROOT_QUERY":244,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":260,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":263,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":266,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":269,"Menu:footer":272,"TermCategories:8":282,"TermTags:267":293,"TermTags:822":294,"TermTags:1076":295,"TermTags:1331":296,"User:21":297,"NodeWpPost:1046":298,"MediaImage:3364":323,"NodeWpPost:1619":325,"MediaImage:3355":328,"NodeWpPost:1616":330,"MediaImage:3303":333,"NodeWpPost:1606":335},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",212,"internal",20,"expanded",21,"attributes",214],{"__ref":213},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",216,"internal",20,"expanded",21,"attributes",217],{"__ref":213},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",219,"internal",20,"expanded",21,"attributes",220],{"__ref":213},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",222,"internal",20,"expanded",21,"attributes",223],{"__ref":213},["null","__typename",23,"class",13],["null","__typename",10,"id",40,"title",41,"description",13,"url",42,"langcode",225,"internal",20,"expanded",21,"attributes",226],{"__ref":213},["null","__typename",23,"class",13],["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",228,"internal",20,"expanded",21,"attributes",229],{"__ref":213},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",231],[232,234,236,238,240,242],{"__ref":233},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":235},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":237},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":239},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":241},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":243},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",245,"menu({\"name\":\"NUXT_MAIN_MENU\"})",246,"menu({\"name\":\"FOOTER\"})",248,"route({\"path\":\"/blog/mobile-contentslider\"})",250,"latestKnowhow({\"excludeId\":\"1046\",\"limit\":3})",253],"Query",{"__ref":247},"Menu:nuxt-main-menu",{"__ref":249},"Menu:footer",["null","__typename",77,"entity",251],{"__ref":252},"NodeWpPost:1046",[254,256,258],{"__ref":255},"NodeWpPost:1619",{"__ref":257},"NodeWpPost:1616",{"__ref":259},"NodeWpPost:1606",["null","__typename",10,"id",55,"title",56,"description",13,"url",57,"langcode",261,"internal",20,"expanded",21,"attributes",262],{"__ref":213},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",264,"internal",20,"expanded",21,"attributes",265],{"__ref":213},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",267,"internal",20,"expanded",21,"attributes",268],{"__ref":213},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",270,"internal",21,"expanded",21,"attributes",271],{"__ref":213},["null","__typename",23,"class",13],["null","__typename",5,"id",51,"name",52,"items",273],[274,276,278,280],{"__ref":275},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":277},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":279},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":281},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",112,"id",113,"name",114,"path",115,"status",20,"weight",116,"description",283,"langcode",284,"changed",285,"metatag",286],["null","__typename",118,"processed",119,"format",120],{"__ref":213},["null","__typename",83,"timestamp",123,"timezone",85,"offset",86,"time",124],[287,289,291],["null","__typename",93,"tag",94,"attributes",288],["null","__typename",96,"name",97,"content",128],["null","__typename",93,"tag",94,"attributes",290],["null","__typename",96,"name",131,"content",132],["null","__typename",100,"tag",101,"attributes",292],["null","__typename",103,"href",135,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",138,"id",139,"name",140,"path",141,"weight",116],["null","__typename",138,"id",143,"name",144,"path",145,"weight",116],["null","__typename",138,"id",147,"name",148,"path",149,"weight",116],["null","__typename",138,"id",151,"name",152,"path",153,"weight",116],["null","__typename",159,"id",160,"myRole",161,"name",162,"nickname",163],["null","__typename",79,"id",80,"title",81,"changed",299,"created",300,"langcode",301,"path",90,"promote",21,"status",20,"sticky",21,"metatag",302,"category",309,"contentElements",13,"evergreen",13,"tags",311,"wpBody",320,"wpHeaderImage",13,"wpHeaderImageOld",13,"wpHeaderImageOldSmall",13,"wpOgImage",13,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",13,"wpYoastHead",157,"author",321],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],{"__ref":213},[303,305,307],["null","__typename",93,"tag",94,"attributes",304],["null","__typename",96,"name",97,"content",98],["null","__typename",100,"tag",101,"attributes",306],["null","__typename",103,"href",104,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",107,"tag",94,"attributes",308],["null","__typename",109,"property",110,"content",81],{"__ref":310},"TermCategories:8",[312,314,316,318],{"__ref":313},"TermTags:267",{"__ref":315},"TermTags:822",{"__ref":317},"TermTags:1076",{"__ref":319},"TermTags:1331",["null","__typename",155,"processed",156,"format",120,"summary",13],{"__ref":322},"User:21",["null","__typename",172,"id",173,"excludeFromScreenreader",13,"mediaImage",324,"name",182,"path",183,"status",20],["null","__typename",175,"url",176,"width",177,"height",178,"alt",179,"title",13,"size",180,"mime",181],["null","__typename",79,"id",167,"title",168,"path",169,"wpTeaserText",170,"wpPromotedTeaserImage",13,"wpHeaderImage",326],{"__ref":327},"MediaImage:3364",["null","__typename",172,"id",190,"excludeFromScreenreader",13,"mediaImage",329,"name",195,"path",196,"status",20],["null","__typename",175,"url",192,"width",177,"height",178,"alt",193,"title",13,"size",194,"mime",181],["null","__typename",79,"id",185,"title",186,"path",187,"wpTeaserText",188,"wpPromotedTeaserImage",13,"wpHeaderImage",331],{"__ref":332},"MediaImage:3355",["null","__typename",172,"id",202,"excludeFromScreenreader",21,"mediaImage",334,"name",207,"path",208,"status",20],["null","__typename",175,"url",204,"width",177,"height",178,"alt",205,"title",13,"size",206,"mime",181],["null","__typename",79,"id",198,"title",199,"path",200,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",336],{"__ref":337},"MediaImage:3303"]