[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":3,"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":39,"NhoFD4DuyXx0-Fhbe8v7SYzPUH4DK29tgi6BNfSrO48":75,"k--fJumerDGR3oxAMc31sgitRCMkd-aThGF-OaJ7zFc":176,"_apollo:default":218},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","footer","Fußzeile",[9,24,29,34],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum",null,"/impressum",{"__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},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":21,"expanded":21,"attributes":38},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__typename":23,"class":13},{"menu":40},{"__typename":5,"id":41,"name":42,"items":43},"nuxt-main-menu","Nuxt Hauptmenü",[44,50,55,60,65,70],{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":48,"internal":20,"expanded":21,"attributes":49},"9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog","/know-how",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":51,"title":52,"description":13,"url":53,"langcode":48,"internal":20,"expanded":21,"attributes":54},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":56,"title":57,"description":13,"url":58,"langcode":48,"internal":20,"expanded":21,"attributes":59},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":48,"internal":20,"expanded":21,"attributes":64},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":48,"internal":20,"expanded":21,"attributes":69},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":48,"internal":20,"expanded":21,"attributes":74},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__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":157,"wpHeaderImageOldSmall":13,"wpOgImage":13,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":13,"wpYoastHead":169,"author":170},"NodeWpPost","1059","Responsive Newsletter",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1366625041,"UTC","+00:00","2013-04-22T10:04:01+00:00",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},{"__typename":16,"id":17,"name":18,"direction":19},"/blog/responsive-newslette",[92,99,106],{"__typename":93,"tag":94,"attributes":95},"MetaTagValue","meta",{"__typename":96,"name":97,"content":98},"MetaTagValueAttributes","title","Responsive Newsletter | 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/responsive-newslette","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 & 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","884","Newsletter Template","/tag/newsletter-template",{"__typename":138,"id":143,"name":144,"path":145,"weight":116},"935","Outlook (Microsoft)","/tag/outlook-microsoft",{"__typename":138,"id":147,"name":148,"path":149,"weight":116},"1072","responsive","/tag/responsive",{"__typename":138,"id":151,"name":152,"path":153,"weight":116},"1489","Webdesign","/tag/webdesign",{"__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\u003Ca href=\"/sites/default/files/styles/full_width/public/wp-migration/wordpress-media-image/2015/02/responsive_newsletter_kreis-1.jpg?itok=RQr3-RVu\" data-rel=\"lightbox-gallery-GESoW8An\" data-rl_title data-rl_caption title class=\"js-image-link\">\u003Cdiv alt=\"responsive_newsletter_kreis\" data-entity-type=\"media\" data-entity-uuid=\"d40c7a51-176f-4a95-9be8-f9761d68c594\" 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/2015/02/responsive_newsletter_kreis-1.jpg.webp?itok=paQmml_S 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2015/02/responsive_newsletter_kreis-1.jpg.webp?itok=spN9J6aP 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"500\" height=\"500\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2015/02/responsive_newsletter_kreis-1.jpg.webp?itok=Z5L2XX46 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2015/02/responsive_newsletter_kreis-1.jpg.webp?itok=S9or7jDc 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"500\" height=\"500\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2015/02/responsive_newsletter_kreis-1.jpg.webp?itok=xcKn1Bke 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2015/02/responsive_newsletter_kreis-1.jpg.webp?itok=-4ycXDjZ 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"500\" height=\"500\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2015/02/responsive_newsletter_kreis-1.jpg.webp?itok=HBuU1Q_j 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2015/02/responsive_newsletter_kreis-1.jpg.webp?itok=vRViwE-n 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"480\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2015/02/responsive_newsletter_kreis-1.jpg.webp?itok=Z2hPLGWh 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2015/02/responsive_newsletter_kreis-1.jpg.webp?itok=ulETgtiI 2x\" type=\"image/webp\" width=\"500\" height=\"500\">\n                  \u003Cimg loading=\"lazy\" width=\"500\" height=\"500\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2015/02/responsive_newsletter_kreis-1.jpg.jpg?itok=ulETgtiI\" alt=\"responsive_newsletter_kreis\" title=\"Responsive Newsletters\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003C/a>\u003Cp>Jeder kennt es, man ruft seine E-Mails am Weg zur Arbeit ab und wird täglich mit 5-10 Newslettern bombardiert (so sieht es jedenfalls in meinem E-Mail Account aus). Ob man sich zu allen wirklich mal angemeldet hat oder ob die Firma „zufällig“ an meine Daten gekommen ist weiß man auch nicht mehr so genau. Zusätzlich ärgert man sich dann noch darüber wenn der Inhalt der Newsletter (insbesondere der Titel) nichtssagend ist & auch noch schrecklich dargestellt ist. Entweder ich melde mich danach vom Newsletter ab oder ich manövriere ihn sofort in den Spamfilter.\u003Cbr>\n\u003Cbr>\nSehr selten, aber doch manchmal, kommt es vor, dass ich von einem Newsletter begeistert bin: Zum Beispiel wenn das Design sich an meine Bildschirmgröße anpasst und so aufbereitet ist, dass ich gespannt weiterlesen will. Der Smashing Newsletter ist eines dieser positiven Beispiele. Er ist simpel aufgebaut und gegliedert mit Ankerlinks, Überschriften und Listenelementen. Das ganze ist einfach zu lesen und einspaltig in einer Tabelle aufbereitet – so wie es Standardmäßig für einen HTML Newsletter empfohlen wird.\u003C/p>\n\u003Ch3>Responsive Newsletter\u003C/h3>\n\u003Cdiv alt=\"newsletter_2\" data-entity-type=\"media\" data-entity-uuid=\"cc5f56d7-5f85-4fff-b63b-ac6cd7e23b5d\" 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/04/newsletter_21-1.png.webp?itok=QkDF6mG0 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2013/04/newsletter_21-1.png.webp?itok=R8syEnZW 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"900\" height=\"400\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2013/04/newsletter_21-1.png.webp?itok=yGDfMjtN 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2013/04/newsletter_21-1.png.webp?itok=iQxK6iFN 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"900\" height=\"400\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2013/04/newsletter_21-1.png.webp?itok=tXGYh8j- 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2013/04/newsletter_21-1.png.webp?itok=0WyA9Lwl 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"331\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2013/04/newsletter_21-1.png.webp?itok=DcQ-jZSm 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2013/04/newsletter_21-1.png.webp?itok=kXTVs1GH 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"213\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2013/04/newsletter_21-1.png.webp?itok=Q1RgQcC4 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2013/04/newsletter_21-1.png.webp?itok=K95pQK9O 2x\" type=\"image/webp\" width=\"900\" height=\"400\">\n                  \u003Cimg loading=\"lazy\" width=\"900\" height=\"400\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2013/04/newsletter_21-1.png.jpg?itok=K95pQK9O\" alt=\"newsletter_2\" title=\"newsletter_2\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003Cp>Was aber wenn man ein etwas aufwendigeres mehrspaltiges Layout in einem Newsletter transportieren will & diesen trotzdem in jeder Auflösung darstellen will? Kein Problem, es gibt nur ein paar Dinge die man dabei beachten sollte. Man sollte auf alle Fälle trotzdem immer Bei HTML tables bleiben, da teilweise \u003Cem><div>\u003C/em>,\u003Cem>< p>\u003C/em>, sowie margins und paddings in den verschiedensten Mail-Programmen nicht unterstützt werden. Vollkommen verzichten sollten man auf floats für Elemente. Außerdem sollte man sich für ein Layout entscheiden: Eine Liste mit Produkten sollte zum Beispiel immer gleich dargestellt werden – 1 Zeile mit 2 Zellen. Die erste Zelle für das Produktfoto und die zweite Zelle immer für die Produktbeschreibung. Das macht die Darstellung am mobilen Endgerät danach leichter – dort wird die Tabelle dann nämlich nur mehr 1-spaltig angezeigt & so zuerst das Produktfoto und darunter die Beschreibung – gefolgt vom nächsten Produktfoto und so weiter.\u003Cbr>\n\u003Cbr>\nEin wechselndes Layout ist auch möglich, aber nur wenn man das Bild nicht unbedingt mit dem Beitrag verknüpfen muss und auch vom Bild zu mehr Informationen kommt.\u003C/p>\n\u003Ch3>Media Query\u003C/h3>\n\u003Cdiv alt=\"newsletter3\" data-entity-type=\"media\" data-entity-uuid=\"2352a960-c7fa-44d3-a2b8-4f4bdd2c0585\" 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/04/newsletter31-1.png.webp?itok=S_1emSNQ 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2013/04/newsletter31-1.png.webp?itok=npiBge-K 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"900\" height=\"400\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2013/04/newsletter31-1.png.webp?itok=t4XueEyt 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2013/04/newsletter31-1.png.webp?itok=OvYAptS3 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"900\" height=\"400\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2013/04/newsletter31-1.png.webp?itok=fdD4Mye9 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2013/04/newsletter31-1.png.webp?itok=pEyiC42s 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"331\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2013/04/newsletter31-1.png.webp?itok=d0Rui8o8 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2013/04/newsletter31-1.png.webp?itok=mr7lLmeA 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"213\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2013/04/newsletter31-1.png.webp?itok=9f6ipvK_ 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2013/04/newsletter31-1.png.webp?itok=QYpzHF0L 2x\" type=\"image/webp\" width=\"900\" height=\"400\">\n                  \u003Cimg loading=\"lazy\" width=\"900\" height=\"400\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2013/04/newsletter31-1.png.jpg?itok=QYpzHF0L\" alt=\"newsletter3\" title=\"newsletter3\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003Cp>Um eine Tabelle von einer 2-spaltigen Ansicht in eine 1-spaltige Ansicht zu bekommen, muss man eigentlich nur eine Kleinigkeit ändern, alle Zellen in einer Zeile müssen zu einem Block Element gemacht werden. Das wars, alle Zellen werden so untereinander dargestellt und können dann individuell angepasst werden.\u003Cbr>\n[code language=“css“] @media only screen and (max-width: 500px) {\u003Cbr>\ntable.content td { display:block;}\u003Cbr>\n}\u003Cbr>\n[/code]\u003Cbr>\n\u003C/p>\n\u003Ch3>Support\u003C/h3>\n\u003Cp>Fast jedes Mail Programm unterstützt diesen einfachen Aufbau und die Mediaqueries. Werden Mediaqueries nicht unterstützt, wird einfach die 2-spaltige Version angezeigt, was auch kein Problem sein sollte. Alle aktuellen Android und iOS Phones unterstützen Media Queries. Klingt alles fast zu schön um war zu sein – so ist es auch, natürlich gibt es ,wie immer, einen Haken & diesmal hat es nicht, wie vermutet, mit dem Internet Explorer zu tun. Als ich das erste mal über das nachfolgende Problem stolperte, wünschte ich mir zum ersten mal den Internet Explorer zurück. Testet man seine E-Mail Templates vor dem Versand in allen Programmen (Campaignmonitor bietet einen sehr umfangreichen Test um nur 5$) so stellt man fest das der Newsletter in Outlook bis 2003 perfekt angezeigt wird, aber ab Outlook 2007 gehörige Probleme macht. Der Grund? Bis Outlook 2003 wird der Newsletter im Internet Explorer gerendert, aber ab der Version 2007 wird er über Microsoft Word gerendert. Damit wird das Problem offensichtlich, Microsoft Word unterstützt unzählige HTML und CSS Attribute nicht, wie zum Beispiel:\u003C/p>\n\u003Cul>\n\u003Cli>background, background-image, background-position\u003C/li>\n\u003Cli>margin: margin-top, margin-bottom\u003C/li>\n\u003Cli>padding für \u003Cem><p>\u003C/em> und \u003Cem><div>\u003C/em> Tags\u003C/li>\n\u003Cli>width für inline Elemente, \u003Cem><div>\u003C/em>,\u003Cem>< p>\u003C/em>\u003C/li>\n\u003Cli>list-style-type, list-style-position, list-style-image\u003C/li>\n\u003C/ul>\n\u003Cp>Hier eine \u003Ca href=\"http://www.campaignmonitor.com/css/\" target=\"_blank\" rel=\"noopener noreferrer\">Übersicht\u003C/a> der unterstützten/nicht unterstützten Attribute.\u003Cbr>\nBevor man ein HTML Template erstellt sollte man also ganz genau bedenken welche Elemente und Attribute man verwendet, da der Anteil an Outlook Usern laut einer \u003Ca href=\"http://www.campaignmonitor.com/resources/will-it-work/email-clients/\" target=\"_blank\" rel=\"noopener noreferrer\">Statistik\u003C/a> (September 2012) bei 20% liegt und mehr als die Hälfte davon arbeiten mit einem Outlook der Version 2007 oder neuer. Mit Windows 8 kommt auch die neue Outlook Version 2013 auf den Markt, und obwohl das ganze System sehr modern und innovativ ist, wird für Outlook weiterhin Word als Rendering Engine verwendet – zum Leid der Newsletter Templates.\u003C/p>\n\u003Ch3>VML Hack\u003C/h3>\n\u003Cp>Natürlich gibt es aber schon einige Workarounds mit denen man die Tücken des Outlook -Renderings umgehen kann. So gibt es beispielsweise die Möglichkeit Hintergrundbilder mittels eins VML (Vector Markup Language) Hacks anzuzeigen:\u003Cbr>\n[code language=“html“]\u003Cbr>\n<!–[if gte mso 9]>\u003Cbr>\n<v:rect style=“width:400px;height:287px;“ strokecolor=“none“>\u003Cbr>\n<v:fill type=“tile“ color=“#DDDDDD“ src=“https://i8.createsend1.com/ti/r/73/0F1/E56/012449/images_css/images/news3_bg.png“ /></v:fill>\u003Cbr>\n</v:rect>\u003Cbr>\n<![endif]–>\u003Cbr>\n[/code]\u003Cbr>\nZu aufwändig sich die ganze \u003Ca href=\"http://msdn.microsoft.com/en-us/library/ee384217(v=vs.85).aspx\" target=\"_blank\" rel=\"noopener noreferrer\">VML Einführung\u003C/a> von Microsoft durchzulesen? Good News – Es gibt endlich einen \u003Ca href=\"http://emailbg.net/\" target=\"_blank\" rel=\"noopener noreferrer\">Generator\u003C/a> für den Hack.\u003Cbr>\nAlles beachtet? Dann steht einem fancy mehrspaltigen \u003Cstrong>responsive Newsletter\u003C/strong> ja wohl nichts mehr im Wege!\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n",{"__typename":158,"id":159,"excludeFromScreenreader":13,"mediaImage":160,"name":165,"path":168,"status":20},"MediaImage","2068",{"__typename":161,"url":162,"width":163,"height":164,"alt":165,"title":165,"size":166,"mime":167},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2013/04/responsive_newsletter-1.jpg",1920,1280,"Liechtenecker Büro",170722,"image/jpeg","/media/2068/edit","\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://liechtenecker.at/blog/responsive-newslette/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"Responsive Newsletter - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"Jeder kennt es, man ruft seine E-Mails am Weg zur Arbeit ab und wird täglich mit 5-10 Newslettern bombardiert (so sieht es jedenfalls in meinem E-Mail Account aus). Ob man sich zu allen wirklich mal angemeldet hat oder ob die Firma „zufällig“ an meine Daten gekommen ist weiß man auch nicht mehr so genau. Zusätzlich […]\" />\n\u003Cmeta property=\"og:url\" content=\"https://liechtenecker.at/blog/responsive-newslette/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2013-04-22T12:04:01+00:00\" />\n\u003Cmeta property=\"og:image\" content=\"https://liechtenecker.at/wp-content/uploads/2015/02/responsive_newsletter_kreis-1-300x300.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://liechtenecker.at/#website\",\"url\":\"https://liechtenecker.at/\",\"name\":\"Liechtenecker\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https://liechtenecker.at/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https://liechtenecker.at/blog/responsive-newslette/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https://liechtenecker.at/wp-content/uploads/2015/02/responsive_newsletter_kreis-1.jpg\",\"width\":500,\"height\":500,\"caption\":\"Responsive Newsletters\"},{\"@type\":\"WebPage\",\"@id\":\"https://liechtenecker.at/blog/responsive-newslette/#webpage\",\"url\":\"https://liechtenecker.at/blog/responsive-newslette/\",\"name\":\"Responsive Newsletter - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://liechtenecker.at/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://liechtenecker.at/blog/responsive-newslette/#primaryimage\"},\"datePublished\":\"2013-04-22T12:04:01+00:00\",\"dateModified\":\"2013-04-22T12:04:01+00:00\",\"author\":{\"@id\":\"https://liechtenecker.at/#/schema/person/663b2d5142421ab394bf325c1b48cecf\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://liechtenecker.at/blog/responsive-newslette/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://liechtenecker.at/#/schema/person/663b2d5142421ab394bf325c1b48cecf\",\"name\":\"Stephan\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://liechtenecker.at/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https://secure.gravatar.com/avatar/400d5f8c531afb609b81aa66c8d56f01?s=96&d=mm&r=g\",\"caption\":\"Stephan\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"__typename":171,"id":172,"myRole":173,"name":174,"nickname":175},"User","23","langgedienter Frontend-Veteran","s-fletzberger","Stephan",{"latestKnowhow":177},[178,193,206],{"__typename":79,"id":179,"title":180,"path":181,"wpTeaserText":182,"wpPromotedTeaserImage":13,"wpHeaderImage":183},"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":158,"id":184,"excludeFromScreenreader":13,"mediaImage":185,"name":191,"path":192,"status":20},"3364",{"__typename":161,"url":186,"width":187,"height":188,"alt":189,"title":13,"size":190,"mime":167},"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,"Headerbilder Blogartikel Behind the scene Accessibility Audit.jpg","/media/3364/edit",{"__typename":79,"id":194,"title":195,"path":196,"wpTeaserText":197,"wpPromotedTeaserImage":13,"wpHeaderImage":198},"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":158,"id":199,"excludeFromScreenreader":13,"mediaImage":200,"name":204,"path":205,"status":20},"3355",{"__typename":161,"url":201,"width":187,"height":188,"alt":202,"title":13,"size":203,"mime":167},"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":207,"title":208,"path":209,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":210},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":158,"id":211,"excludeFromScreenreader":21,"mediaImage":212,"name":216,"path":217,"status":20},"3303",{"__typename":161,"url":213,"width":187,"height":188,"alt":214,"title":13,"size":215,"mime":167},"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":219,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":220,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":224,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":227,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":230,"Menu:footer":233,"ROOT_QUERY":243,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":259,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":262,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":265,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":268,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":271,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":274,"Menu:nuxt-main-menu":277,"TermCategories:8":291,"TermTags:884":302,"TermTags:935":303,"TermTags:1072":304,"TermTags:1489":305,"MediaImage:2068":306,"User:23":308,"NodeWpPost:1059":309,"MediaImage:3364":336,"NodeWpPost:1619":338,"MediaImage:3355":341,"NodeWpPost:1616":343,"MediaImage:3303":346,"NodeWpPost:1606":348},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",221,"internal",20,"expanded",21,"attributes",223],{"__ref":222},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",225,"internal",20,"expanded",21,"attributes",226],{"__ref":222},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",228,"internal",20,"expanded",21,"attributes",229],{"__ref":222},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",231,"internal",21,"expanded",21,"attributes",232],{"__ref":222},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",234],[235,237,239,241],{"__ref":236},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":238},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":240},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":242},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",244,"menu({\"name\":\"FOOTER\"})",245,"menu({\"name\":\"NUXT_MAIN_MENU\"})",247,"route({\"path\":\"/blog/responsive-newslette\"})",249,"latestKnowhow({\"excludeId\":\"1059\",\"limit\":3})",252],"Query",{"__ref":246},"Menu:footer",{"__ref":248},"Menu:nuxt-main-menu",["null","__typename",77,"entity",250],{"__ref":251},"NodeWpPost:1059",[253,255,257],{"__ref":254},"NodeWpPost:1619",{"__ref":256},"NodeWpPost:1616",{"__ref":258},"NodeWpPost:1606",["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",260,"internal",20,"expanded",21,"attributes",261],{"__ref":222},["null","__typename",23,"class",13],["null","__typename",10,"id",51,"title",52,"description",13,"url",53,"langcode",263,"internal",20,"expanded",21,"attributes",264],{"__ref":222},["null","__typename",23,"class",13],["null","__typename",10,"id",56,"title",57,"description",13,"url",58,"langcode",266,"internal",20,"expanded",21,"attributes",267],{"__ref":222},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",269,"internal",20,"expanded",21,"attributes",270],{"__ref":222},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",272,"internal",20,"expanded",21,"attributes",273],{"__ref":222},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",275,"internal",20,"expanded",21,"attributes",276],{"__ref":222},["null","__typename",23,"class",13],["null","__typename",5,"id",41,"name",42,"items",278],[279,281,283,285,287,289],{"__ref":280},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":282},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":284},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":286},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":288},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":290},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",112,"id",113,"name",114,"path",115,"status",20,"weight",116,"description",292,"langcode",293,"changed",294,"metatag",295],["null","__typename",118,"processed",119,"format",120],{"__ref":222},["null","__typename",83,"timestamp",123,"timezone",85,"offset",86,"time",124],[296,298,300],["null","__typename",93,"tag",94,"attributes",297],["null","__typename",96,"name",97,"content",128],["null","__typename",93,"tag",94,"attributes",299],["null","__typename",96,"name",131,"content",132],["null","__typename",100,"tag",101,"attributes",301],["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",158,"id",159,"excludeFromScreenreader",13,"mediaImage",307,"name",165,"path",168,"status",20],["null","__typename",161,"url",162,"width",163,"height",164,"alt",165,"title",165,"size",166,"mime",167],["null","__typename",171,"id",172,"myRole",173,"name",174,"nickname",175],["null","__typename",79,"id",80,"title",81,"changed",310,"created",311,"langcode",312,"path",90,"promote",21,"status",20,"sticky",21,"metatag",313,"category",320,"contentElements",13,"evergreen",13,"tags",322,"wpBody",331,"wpHeaderImage",13,"wpHeaderImageOld",332,"wpHeaderImageOldSmall",13,"wpOgImage",13,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",13,"wpYoastHead",169,"author",334],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],{"__ref":222},[314,316,318],["null","__typename",93,"tag",94,"attributes",315],["null","__typename",96,"name",97,"content",98],["null","__typename",100,"tag",101,"attributes",317],["null","__typename",103,"href",104,"hreflang",13,"rel",105,"media",13,"sizes",13,"type",13],["null","__typename",107,"tag",94,"attributes",319],["null","__typename",109,"property",110,"content",81],{"__ref":321},"TermCategories:8",[323,325,327,329],{"__ref":324},"TermTags:884",{"__ref":326},"TermTags:935",{"__ref":328},"TermTags:1072",{"__ref":330},"TermTags:1489",["null","__typename",155,"processed",156,"format",120,"summary",13],{"__ref":333},"MediaImage:2068",{"__ref":335},"User:23",["null","__typename",158,"id",184,"excludeFromScreenreader",13,"mediaImage",337,"name",191,"path",192,"status",20],["null","__typename",161,"url",186,"width",187,"height",188,"alt",189,"title",13,"size",190,"mime",167],["null","__typename",79,"id",179,"title",180,"path",181,"wpTeaserText",182,"wpPromotedTeaserImage",13,"wpHeaderImage",339],{"__ref":340},"MediaImage:3364",["null","__typename",158,"id",199,"excludeFromScreenreader",13,"mediaImage",342,"name",204,"path",205,"status",20],["null","__typename",161,"url",201,"width",187,"height",188,"alt",202,"title",13,"size",203,"mime",167],["null","__typename",79,"id",194,"title",195,"path",196,"wpTeaserText",197,"wpPromotedTeaserImage",13,"wpHeaderImage",344],{"__ref":345},"MediaImage:3355",["null","__typename",158,"id",211,"excludeFromScreenreader",21,"mediaImage",347,"name",216,"path",217,"status",20],["null","__typename",161,"url",213,"width",187,"height",188,"alt",214,"title",13,"size",215,"mime",167],["null","__typename",79,"id",207,"title",208,"path",209,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",349],{"__ref":350},"MediaImage:3303"]