{"id":16656,"date":"2013-10-18T10:02:29","date_gmt":"2013-10-18T08:02:29","guid":{"rendered":"https:\/\/www.artera.net\/it\/blog\/?p=16656"},"modified":"2023-02-27T14:39:15","modified_gmt":"2023-02-27T14:39:15","slug":"creare-un-template-newsletter-cross-client","status":"publish","type":"post","link":"https:\/\/www.artera.net\/it\/sviluppo\/creare-un-template-newsletter-cross-client\/","title":{"rendered":"Creare un template newsletter Cross-Client"},"content":{"rendered":"<p>In questo intervento vi illustrer\u00f2 come realizzare un <strong>layout newsletter cross-client<\/strong>: un lavoro semplice, ma allo stesso tempo ricco di intrecci e di problematiche, data la vasta gamma di client di posta presenti sul mercato e al loro metodo di interpretazione di un layout html.<\/p>\n<p>Ogni client di posta, infatti, presenta delle caratteristiche e delle regole che, in alcuni casi, non possono essere sovrascritte in alcun modo. Per lo pi\u00f9 si tratta di <strong>regole css<\/strong> che vengono attribuite ai tag html ed \u00e8 per questo che conviene mantenere dei punti ben saldi quando si scrive un layout html di questo tipo.<\/p>\n<h2>Panoramica generica su una Newsletter<\/h2>\n<p>Una newsletter deve essere formata fondamentalmente da una <strong>struttura html a tabelle<\/strong>, questo perch\u00e9 i client di posta non sono adatti a interpretare qualsiasi tipo di markup. Le tabelle sono l\u2019unico tipo di struttura che ogni client di posta riesce a leggere correttamente.<\/p>\n<p>Vi consiglio di limitare l\u2019uso delle immagini, ovviamente \u00e8 necessario metterne alcune, ma sconsiglio vivamente di creare dei veri e propri bricolage di immagini poich\u00e9 i client di posta li interpretano il pi\u00f9 delle volte come spam.<\/p>\n<p>Inoltre \u00e8 obbligatorio inserire la disiscrizione dalla lista di contatti attraverso un link posto nella newsletter, tipicamente inserito a pi\u00e9 pagina (footer) o talvolta anche nell&#8217;intestazione (header).<\/p>\n<h2>Regole ferree per un layout cross-client<\/h2>\n<p>Nella maggior parte dei post che ho trovato su internet, quando si tratta di <strong>newsletter e regole cross-client<\/strong>, si discute per lo pi\u00f9 delle regole css che si possono utilizzare e che vengono interpretate correttamente. A questo scopo, vi posto qui un utilissimo link che vi proprone appunto quali regole sono compatibili con i client di maggior utilizzo presenti attualmente: <a href=\"http:\/\/www.campaignmonitor.com\/css\/\" target=\"\u201d_blank\u201d\" rel=\"noopener noreferrer\">www.campaignmonitor.com<\/a>.<\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/10\/css-support1.png\" alt=\"css-support\" width=\"620\" height=\"513\" class=\"alignnone size-full wp-image-16686\" \/><\/p>\n<p>Con questo intervento, invece, voglio focalizzarmi su quando e come utilizzare queste regole, a quali tag html attribuirle e, soprattutto, quali tag html utilizzare e quali evitare. Vi elencher\u00f2 qui sotto alcuni punti su cui basarsi per la realizzazione di un markup di una newsletter:<\/p>\n<ul>\n<li><strong>Non assegnare regole css ai tag &#8220;tr&#8221;:<\/strong> i tag &#8220;tr&#8221; servono soltanto a separare le righe di una tabella. Assegnare regole ad essi \u00e8 inutile, poich\u00e9 la maggior parte non hanno effetto.<\/li>\n<li><strong>Non utilizzare il margine per distanziare gli elementi, utilizzare il padding:<\/strong> assegnare il margine per spostare un tag &#8220;td&#8221; di una tabella o la tabella stessa \u00e8 inutile, poich\u00e9 essa non si sposter\u00e0 di un singolo pixel. Utilizzare sempre e solamente il padding. Pu\u00f2 invece essere utile assegnare per sicurezza un reset per quanto riguarda il margine (margin:0;).<\/li>\n<li><strong>Usare tabelle annidate per distanziare gli elementi:<\/strong> distanziare degli elementi assegnando del padding ad elementi che non sono tabelle (quindi anche i &#8220;td&#8221;) pu\u00f2 creare problematiche in alcuni client (Outlook pi\u00f9 degli altri). Vi consiglio di utilizzare il pi\u00f9 possibile le tabelle, che certamente renderanno il vostro markup pi\u00f9 complesso all\u2019occhio e pi\u00f9 pesante, ma che sono l\u2019unico modo per ottenere un <strong>markup cross-client al 100%<\/strong>. A questo proposito, \u00e8 sempre meglio conferire il padding alla tabella pi\u00f9 annidata di tutte, poich\u00e9 in alcuni client, &#8220;td&#8221; e tabelle tendono a ereditare il padding del padre, e questo crea sicuramente problemi e incongruenze.<\/li>\n<li><strong>Mai utilizzare i paragrafi:<\/strong> questo perch\u00e9 ogni client ad essi assegna delle regole di default che non possono essere sovrascritte dalle nostre. Per esempio nel vecchio client Hotmail bisognava per forza assegnare delle regole di margine singole (margin-top:0; margin-bottom:10px;) perch\u00e8 la regola multipla non veniva presa in considerazione (margin: 10px 0 20px). Nel client Outlook online attuale i margini dei &#8220;p&#8221; non possono essere modificati in alcun modo. A questo punto conviene semplificarci la vita e non utilizzarli pi\u00f9. Si pu\u00f2 dare tranquillamente lo stile al &#8220;td&#8221; o anche ad uno &#8220;span&#8221; interno, se si preferisce.<\/li>\n<li><strong>Dare display:block e dimensioni fisse alle immagini:<\/strong> conviene utilizzare questa tecnica perch\u00e9 le immagini senza display:block, in alcuni casi, occupano una altezza superiore di pochi pixel del loro ingombro naturale. Inoltre \u00e8 utile dare anche dimensioni fisse per far s\u00ec che se l\u2019immagine non dovesse visualizzarsi, l\u2019ingombro non diminuisca, in modo tale da non creare confusione nel layout. Altro punto importante: assegnando dimensioni fisse e display:block, favoriamo la visualizzazione dell\u2019alt dell\u2019immagine.<\/li>\n<li><strong>Inserire uno span dentro un link, per poter cambiare il color:<\/strong> chiunque abbia lavorato con le newsletter sicuramente sapr\u00e0 gi\u00e0 di cosa parlo. Per poter assegnare il color ad un link, \u00e8 necessario inserire uno &#8220;span&#8221; dentro il tag &#8220;a&#8221; e assegnare ad esso lo stesso colore. Questo perch\u00e9 la maggior parte dei client assegna ai link il colore blu di default e non c\u2019\u00e8 modo di sovrascrivere la regola.<\/li>\n<li><strong>Attenzione all\u2019utilizzo del line-height:<\/strong> il line-height \u00e8 <strong>correttamente interpretato da ogni client<\/strong>, solo che non sempre viene interpretato allo stesso modo. Per questo motivo vi consiglio di stare attenti a quando si usano line-height molto elevati, per intenderci dai 50px-60px in su. Altra cosa, evitare di utilizzare line-height per distanziare altezze, sempre per lo stesso motivo.<\/li>\n<li><strong>Assegnare vertical-align:top o bottom ai &#8220;td&#8221;:<\/strong> questo perch\u00e9 pu\u00f2 capitare che i client assegnino un allineamento verticale secondo alcuni criteri intrinsechi. Consiglio di utilizzare o top o bottom perch\u00e9 utilizzando middle in alcuni casi pu\u00f2 essere erroneamente interpretato.<\/li>\n<li><strong>Evitare liste puntate:<\/strong> non conviene utilizzare tag &#8220;ul li&#8221; o altri tipi di liste poich\u00e9 esse sono gi\u00e0 predisposte con padding e margin di default e in alcuni client non \u00e8 possibile attribuire regole css per modificare questi valori.<\/li>\n<li><strong>Non usare display:block su elementi inline e non utilizzare float<\/strong>: display:block vi consiglio di utilizzarlo solo per le immagini, in altri casi crea problemi e, in pi\u00f9, \u00e8 superfluo in una struttura tabellare. Mai usare i float, neanche per le immagini, per lo stesso motivo.<\/li>\n<li><strong>Utilizzare sfondi con cura:<\/strong> gli sfondi colorati background-color sono ormai supportati ovunque, gli sfondi con immagini invece non sono ancora completamente compatibili con tutti i client di posta. Per questo motivo vi consiglio di creare un fallback con sfondo colorato in una regola separata e prestare attenzione in ogni caso al colore del testo sovrastante lo sfondo con immagine, in modo tale da non rischiare di avere un testo per esempio bianco su colore di sfondo bianco (nel caso appunto di client non compatibili con la regola background-image).<br \/>\nEs. di fallback: <strong>background-image:url(&#8230;); background-color:#ececec;<\/strong>\n<\/li>\n<li><strong>Utilizzo del tag &#8220;body&#8221;:<\/strong> il tag &#8220;body&#8221; non \u00e8 supportato da tutti i client, infatti alcuni tendono a cancellare questo tag e ad inserire al suo posto un div. Se per esempio avete bisogno di impostare un colore di sfondo all\u2019area della newsletter, vi consiglio di assegnarlo sia al tag body, sia ad una tabella con width:100%, utilizzata come fallback.<\/li>\n<li><strong>Inserire il charset utf-8 nel tag head:<\/strong> utile e molto comodo per non dovere sostituire i caratteri speciali con la corrispondente entit\u00e0 html.<\/li>\n<\/ul>\n<h2>Newsletter d\u2019esempio<\/h2>\n<p>Ora vi propongo un <strong>esempio di newsletter<\/strong> e vi spiego come ho impostato alcune parti di essa. A <a href=\"http:\/\/jsfiddle.net\/matteomelillo\/PwcgM\/2\/\" target=\"_blank\" rel=\"noopener noreferrer\">questo link<\/a> potrete visualizzare l\u2019esempio su jsfiddle.net.<\/p>\n<p>In intestazione ho inserito sia il doctype che il tag html. In alcuni client sono due parti che vengono eliminate, per\u00f2 \u00e8 sempre meglio metterle per quelli che le mantengono.<\/p>\n<p>Dopodich\u00e9 ho inserito l\u2019head: anche qui, alcuni client tendono a non leggerlo, tuttavia \u00e8 molto utile per assegnare alcune regole di reset create apposta per i client. Ad esempio io ho estrapolato quelle che mi interessavano da <a href=\"http:\/\/htmlemailboilerplate.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">htmlemailboilerplate<\/a>, inserito il charset utf-8 e il titolo.<\/p>\n<p>[code type=&#8221;css&#8221;]<br \/>\na:hover { text-decoration:none; }<br \/>\n#outlook a { padding: 0; }<br \/>\nbody { width: 100% !important; } .ReadMsgBody { width: 100%; } .ExternalClass { width: 100%; }<br \/>\nbody { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; }<br \/>\nbody { margin: 0; padding: 0; }<br \/>\nimg { height: auto; line-height: 100%; outline: none; text-decoration: none; }<br \/>\na img { border:none; }<br \/>\n#backgroundTable { margin: 0; padding: 0; width: 100% !important; }<br \/>\np {<br \/>\n\tmargin: 1em 0;<br \/>\n}<br \/>\nh1, h2, h3, h4, h5, h6 {<br \/>\n\tcolor: black !important;<br \/>\n\tline-height: 100% !important;<br \/>\n}<br \/>\nh1 a, h2 a, h3 a, h4 a, h5 a, h6 a {<br \/>\n\tcolor: blue !important;<br \/>\n}<br \/>\nh1 a:active, h2 a:active,  h3 a:active, h4 a:active, h5 a:active, h6 a:active {<br \/>\n\tcolor: red !important;<br \/>\n}<br \/>\nh1 a:visited, h2 a:visited,  h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {<br \/>\n\tcolor: purple !important;<br \/>\n}<br \/>\ntable td {<br \/>\n\tborder-collapse: collapse;<br \/>\n}<br \/>\n.yshortcuts, .yshortcuts a, .yshortcuts a:link,.yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span { color: black; text-decoration: none !important; border-bottom: none !important; background: none !important; }<br \/>\n[\/code]<\/p>\n<p>Nella prima parte di questa newsletter, come accennato nei punti da me elencati precedentemente, ho inserito il tag &#8220;body&#8221; e sia nel tag &#8220;body&#8221; che nella tabella successiva, con larghezza 100%, ho inserito la regola background-color:#fafafa in modo tale che per i client che eliminano il &#8220;body&#8221; ci sia un fallback.<\/p>\n<p>[code type=&#8221;markup&#8221;]<\/p>\n<table style=\"margin: 0 auto;width: 100%;font-family: Verdana;font-size: 12px;background-color:#fafafa\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" align=\"center\">\n<tbody>\n<tr>\n<td style=\"vertical-align:top\">\n<table style=\"margin: 0 auto;width: 660px;font-family: Verdana;font-size: 12px\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" align=\"center\">\n<tbody>\n<tr>\n<td colspan=\"2\" style=\"vertical-align:top\">\n[\/code]<\/p>\n<p>Il contenuto di questa newsletter \u00e8 molto ripetitivo e rispecchia, appunto, i punti precedentemente esplicati da me. Per questo motivo proviamo ad analizzarne una porzione:<\/p>\n<p>[code type=&#8221;markup&#8221;]<\/p>\n<tr>\n<td colspan=\"2\" style=\"vertical-align:top\">\n<table style=\"padding:15px 0 10px 0;width:656px;vertical-align:top;margin: 0 auto;color:#7f7f7f;border-bottom:2px solid #f0f0f0\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" align=\"left\">\n<tbody>\n<tr>\n<td style=\"vertical-align:top\">\n<table style=\"padding:10px 0 0 42px;width:100px;vertical-align:top;margin: 0 auto;color:#7f7f7f\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" align=\"left\">\n<tbody>\n<tr>\n<td style=\"vertical-align:top;font-family: Verdana;font-size: 12px\">\n<p>\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/07\/logo-wordpress.png\" alt=\"Wordpress\" style=\"border:0;width:48px;height:48px\"><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td style=\"vertical-align:top\">\n<table style=\"padding:0;width:522px;vertical-align:top;margin: 0 auto;color:#7f7f7f\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" align=\"left\">\n<tbody>\n<tr>\n<td style=\"vertical-align:top\">\n<table style=\"padding:5px 0 10px 30px;width:522px;vertical-align:top;margin: 0 auto;color:#7f7f7f\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" align=\"left\">\n<tbody>\n<tr>\n<td style=\"vertical-align:top;line-height:18px;color:#7f7f7f;font-size:13px;font-family: Verdana, sans-serif\"><strong>WordPress<\/strong> \u00e8 la pi\u00f9 famosa ed utilizzata piattaforma di <i>\u201cpersonal publishing&#8221;<\/i>. Strutturata in PHP su database MySQL, WordPress \u00e8 nato come CMS per la creazione di blog ma \u00e8 diventato col tempo il software pi\u00f9 utilizzato per la creazione di siti web. WordPress \u00e8 un ottimo software, facile da utilizzare, completo grazie anche ad una community molto attiva e ottimizzato da un punto di vista SEO.\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<p>[\/code]<\/p>\n<p>Come potete vedere la struttura presenta tabelle potenzialmente superflue, ma in realt\u00e0 non \u00e8 cos\u00ec.<\/p>\n<p>La maggior parte dei problemi e delle <strong>incongruenze dei template newsletter<\/strong> si presentano nei client Outlook non web. Essi sono il motivo principale per cui \u00e8 sempre meglio aggiungere una tabella in pi\u00f9. Per il resto applico semplicemente tutte le regole che ho elencato in questo intervento.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In questo intervento vi illustrer\u00f2 come realizzare un <strong>layout newsletter cross-client<\/strong>: un lavoro semplice, ma allo stesso tempo ricco di intrecci e di problematiche, data la vasta gamma di client di posta e al loro metodo di interpretazione di un layout html.<\/p>\n","protected":false},"author":4,"featured_media":16693,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[108],"tags":[132,130,290],"class_list":["post-16656","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sviluppo","tag-html","tag-newsletter","tag-programmazione"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u2022 Creare un template newsletter Cross-Client - Artera<\/title>\n<meta name=\"description\" content=\"Come realizzare un layout newsletter cross-client? Un lavoro semplice, ma ricco di intrecci e problematiche, data la vasta gamma di client.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.artera.net\/it\/sviluppo\/creare-un-template-newsletter-cross-client\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u2022 Creare un template newsletter Cross-Client - Artera\" \/>\n<meta property=\"og:description\" content=\"Come realizzare un layout newsletter cross-client? Un lavoro semplice, ma ricco di intrecci e problematiche, data la vasta gamma di client.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.artera.net\/it\/sviluppo\/creare-un-template-newsletter-cross-client\/\" \/>\n<meta property=\"og:site_name\" content=\"Artera\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/artera.net\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-10-18T08:02:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-27T14:39:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/10\/newsletter-layout-618x198.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1\" \/>\n\t<meta property=\"og:image:height\" content=\"1\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sergio Ravera\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sergio Ravera\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/creare-un-template-newsletter-cross-client\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/creare-un-template-newsletter-cross-client\\\/\"},\"author\":{\"name\":\"Sergio Ravera\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\"},\"headline\":\"Creare un template newsletter Cross-Client\",\"datePublished\":\"2013-10-18T08:02:29+00:00\",\"dateModified\":\"2023-02-27T14:39:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/creare-un-template-newsletter-cross-client\\\/\"},\"wordCount\":1575,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/creare-un-template-newsletter-cross-client\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2013\\\/10\\\/newsletter-layout-618x198.jpg\",\"keywords\":[\"HTML\",\"newsletter\",\"programmazione\"],\"articleSection\":[\"Sviluppo\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/creare-un-template-newsletter-cross-client\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/creare-un-template-newsletter-cross-client\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/creare-un-template-newsletter-cross-client\\\/\",\"name\":\"\u2022 Creare un template newsletter Cross-Client - Artera\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/creare-un-template-newsletter-cross-client\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/creare-un-template-newsletter-cross-client\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2013\\\/10\\\/newsletter-layout-618x198.jpg\",\"datePublished\":\"2013-10-18T08:02:29+00:00\",\"dateModified\":\"2023-02-27T14:39:15+00:00\",\"description\":\"Come realizzare un layout newsletter cross-client? Un lavoro semplice, ma ricco di intrecci e problematiche, data la vasta gamma di client.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/creare-un-template-newsletter-cross-client\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/creare-un-template-newsletter-cross-client\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/creare-un-template-newsletter-cross-client\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2013\\\/10\\\/newsletter-layout-618x198.jpg\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2013\\\/10\\\/newsletter-layout-618x198.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/creare-un-template-newsletter-cross-client\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creare un template newsletter Cross-Client\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\",\"name\":\"Artera\",\"description\":\"Swiss Premium Hosting\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.artera.net\\\/it\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\",\"name\":\"Artera\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/artera-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/artera-logo.png\",\"width\":300,\"height\":77,\"caption\":\"Artera\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/artera.net\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/artera\\\/\",\"https:\\\/\\\/www.instagram.com\\\/artera_swiss\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\",\"name\":\"Sergio Ravera\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"caption\":\"Sergio Ravera\"},\"description\":\"Raised in a family tradition of merchants, my entrepreneurial spirit drove me to launch my first e-commerce venture in 1998. My vision and dedication led, in 2002, to the founding of Artera, now a leading brand in premium managed cloud hosting services. As Chief Executive Officer, I lead DHH Switzerland SA, part of the international DHH S.p.A. group, listed on the Milan Stock Exchange with the reference code (AIM \u2013 ISIN: IT0005203622). It is under this brand that the Artera brand continues to grow and thrive. In addition to my commitment to the business world, I am an active researcher in the field of new technologies, always fascinated by cutting-edge innovations in the industry.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/sergioravera\\\/\"],\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/author\\\/sergio-ravera\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u2022 Creare un template newsletter Cross-Client - Artera","description":"Come realizzare un layout newsletter cross-client? Un lavoro semplice, ma ricco di intrecci e problematiche, data la vasta gamma di client.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.artera.net\/it\/sviluppo\/creare-un-template-newsletter-cross-client\/","og_locale":"it_IT","og_type":"article","og_title":"\u2022 Creare un template newsletter Cross-Client - Artera","og_description":"Come realizzare un layout newsletter cross-client? Un lavoro semplice, ma ricco di intrecci e problematiche, data la vasta gamma di client.","og_url":"https:\/\/www.artera.net\/it\/sviluppo\/creare-un-template-newsletter-cross-client\/","og_site_name":"Artera","article_publisher":"https:\/\/www.facebook.com\/artera.net\/","article_published_time":"2013-10-18T08:02:29+00:00","article_modified_time":"2023-02-27T14:39:15+00:00","og_image":[{"url":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/10\/newsletter-layout-618x198.jpg","width":1,"height":1,"type":"image\/jpeg"}],"author":"Sergio Ravera","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Sergio Ravera","Tempo di lettura stimato":"8 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.artera.net\/it\/sviluppo\/creare-un-template-newsletter-cross-client\/#article","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/creare-un-template-newsletter-cross-client\/"},"author":{"name":"Sergio Ravera","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0"},"headline":"Creare un template newsletter Cross-Client","datePublished":"2013-10-18T08:02:29+00:00","dateModified":"2023-02-27T14:39:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/creare-un-template-newsletter-cross-client\/"},"wordCount":1575,"commentCount":2,"publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"image":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/creare-un-template-newsletter-cross-client\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/10\/newsletter-layout-618x198.jpg","keywords":["HTML","newsletter","programmazione"],"articleSection":["Sviluppo"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.artera.net\/it\/sviluppo\/creare-un-template-newsletter-cross-client\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.artera.net\/it\/sviluppo\/creare-un-template-newsletter-cross-client\/","url":"https:\/\/www.artera.net\/it\/sviluppo\/creare-un-template-newsletter-cross-client\/","name":"\u2022 Creare un template newsletter Cross-Client - Artera","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/creare-un-template-newsletter-cross-client\/#primaryimage"},"image":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/creare-un-template-newsletter-cross-client\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/10\/newsletter-layout-618x198.jpg","datePublished":"2013-10-18T08:02:29+00:00","dateModified":"2023-02-27T14:39:15+00:00","description":"Come realizzare un layout newsletter cross-client? Un lavoro semplice, ma ricco di intrecci e problematiche, data la vasta gamma di client.","breadcrumb":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/creare-un-template-newsletter-cross-client\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.artera.net\/it\/sviluppo\/creare-un-template-newsletter-cross-client\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/sviluppo\/creare-un-template-newsletter-cross-client\/#primaryimage","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/10\/newsletter-layout-618x198.jpg","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/10\/newsletter-layout-618x198.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.artera.net\/it\/sviluppo\/creare-un-template-newsletter-cross-client\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.artera.net\/it\/"},{"@type":"ListItem","position":2,"name":"Creare un template newsletter Cross-Client"}]},{"@type":"WebSite","@id":"https:\/\/www.artera.net\/it\/#website","url":"https:\/\/www.artera.net\/it\/","name":"Artera","description":"Swiss Premium Hosting","publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.artera.net\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/www.artera.net\/it\/#organization","name":"Artera","url":"https:\/\/www.artera.net\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/#\/schema\/logo\/image\/","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2019\/09\/artera-logo.png","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2019\/09\/artera-logo.png","width":300,"height":77,"caption":"Artera"},"image":{"@id":"https:\/\/www.artera.net\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/artera.net\/","https:\/\/www.linkedin.com\/company\/artera\/","https:\/\/www.instagram.com\/artera_swiss\/"]},{"@type":"Person","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0","name":"Sergio Ravera","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","caption":"Sergio Ravera"},"description":"Raised in a family tradition of merchants, my entrepreneurial spirit drove me to launch my first e-commerce venture in 1998. My vision and dedication led, in 2002, to the founding of Artera, now a leading brand in premium managed cloud hosting services. As Chief Executive Officer, I lead DHH Switzerland SA, part of the international DHH S.p.A. group, listed on the Milan Stock Exchange with the reference code (AIM \u2013 ISIN: IT0005203622). It is under this brand that the Artera brand continues to grow and thrive. In addition to my commitment to the business world, I am an active researcher in the field of new technologies, always fascinated by cutting-edge innovations in the industry.","sameAs":["https:\/\/www.linkedin.com\/in\/sergioravera\/"],"url":"https:\/\/www.artera.net\/it\/author\/sergio-ravera\/"}]}},"_links":{"self":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/16656","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/comments?post=16656"}],"version-history":[{"count":3,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/16656\/revisions"}],"predecessor-version":[{"id":217566,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/16656\/revisions\/217566"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/media\/16693"}],"wp:attachment":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/media?parent=16656"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/categories?post=16656"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/tags?post=16656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}