[{"data":1,"prerenderedAt":209},["ShallowReactive",2],{"DefaultLayouten":3,"language-blog-slug-email-template-guide-i18n-slugs":134,"language-blog-slug-en-email-template-guide":138},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140902","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140904","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140905","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140906","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140908","About us",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"d6WdFJq2SOuc3dWtpibbXQ","Work at",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"certificatesGrid":99},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185264",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185265",{"__typename":50},{"id":75,"title":53,"link":76},"144185266",{"__typename":55},{"id":78,"title":79,"link":80},"144185267","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185268",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185269",{"__typename":38},{"id":89,"title":90,"link":91},"144185270","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licence and disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","De Voorhoede privacy statement (pdf)","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455455-vh-isms-006-privacy-statement-de-voorhoede-en.pdf",[100,112,123],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png","B Corp logo",404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":119},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":116,"width":117,"height":118},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png","Dutch Digital Agencies logo",627,480,{"__typename":108,"id":120,"title":121,"url":122},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":124,"image":125,"link":129},"MT5SCyNxSTSr_v5eeATMZw",{"url":126,"alt":127,"width":128,"height":128},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png","DNV logo",518,{"id":130,"title":131,"link":132},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":133},"impact\u002Fdigitale-producten-privacy-by-design",[135],{"locale":136,"value":137},"en","email-template-guide",{"page":139},{"slug":137,"i18nSlugs":140,"social":142,"title":146,"subtitle":79,"isArchived":147,"headerIllustration":145,"date":148,"authors":149,"introTitle":158,"items":159,"pivots":206,"relatedBlogPosts":207,"tags":208,"onMountedScript":152,"onUnmountedScript":152},[141],{"locale":136,"value":137},{"title":143,"description":144,"image":145},"Email Template Guide | De Voorhoede","Our email template guide is a tool to simplify our process to develop, debug and build our email templates.",null,"Email Template Guide",true,"2015-02-02T01:00:00.000+01:00",[150],{"name":151,"lastName":152,"slug":153,"image":154},"Joao","","joao",{"url":155,"alt":145,"width":156,"height":157},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",1235,1646,"The idea behind the Email Template Guide was to create a tool that would simplify our process to develop, debug and build our email templates.",[160,164,169,172,176,185,188,192,199,202],{"__typename":161,"id":162,"title":152,"body":163},"TextSectionRecord","500762","\u003Cp>I reluctantly open my favorite editor, clear my mind of most of the best practises I've been pushing myself to learn, create a blank HTML, turn my clock back to 1994 and start typing \u003Ccode><table>\u003C\u002Fcode>...\u003C\u002Fp>\n\u003Cp>Yes, I'm starting a new email newsletter and if you ever done one you know what I am talking about. If you didn't you are missing one of the best journeys that a front-end developer can have. From needing to do all \u003Ca href=\"http:\u002F\u002Fbackgrounds.cm\u002F\" target=\"_blank\" rel=\"noopener\">this\u003C\u002Fa> for a simple image background, to having to inline all your css styles, passing by the fact that you have to add a span inside of a link to make sure you have a right color on your link:\u003C\u002Fp>",{"__typename":165,"id":166,"language":167,"body":168},"CodeBlockRecord","500763","html","\u003Ca href=\"http:\u002F\u002Fsomesite.com\u002F\" style=\"color:#ff00ff\">\n  \u003Cspan style=\"color:#ff00ff\">this is a link\u003C\u002Fspan>\n\u003C\u002Fa>",{"__typename":161,"id":170,"title":152,"body":171},"500764","\u003Cp>The above examples are just the tip of the iceberg. And if you want to add responsive behaviour, it gets stripped out in Gmail for example. Even if the user's browser is capable of showing the behaviour.\u003C\u002Fp>\n\u003Cp>When I start email developing I could use a demo template from \u003Ca href=\"http:\u002F\u002Fzurb.com\u002Fink\u002F\" target=\"_blank\" rel=\"noopener\">Ink\u003C\u002Fa> or a \u003Ca href=\"http:\u002F\u002Fmailchimp.com\u002Ffeatures\u002Femail-templates\u002F\" target=\"_blank\" rel=\"noopener\">free template from Mailchimp\u003C\u002Fa>. And during my progress I would definitely read posts from \u003Ca href=\"http:\u002F\u002Fresponsiveemailresources.com\u002F\" target=\"_blank\" rel=\"noopener\">Responsive Email Resources\u003C\u002Fa>, \u003Ca href=\"https:\u002F\u002Flitmus.com\u002Fblog\u002Fhtml-email-coding-101-infographic\u002Femail-coding-101\" target=\"_blank\" rel=\"noopener\">Litmus\u003C\u002Fa> or even \u003Ca href=\"https:\u002F\u002Fwww.campaignmonitor.com\u002Fresources\u002F\" target=\"_blank\" rel=\"noopener\">Campaign Monitor\u003C\u002Fa>. Most of these post are written by people that have already been through hell and came back to help the living. But that would only help with part of the process.\u003C\u002Fp>\n\u003Cp>There has to be a better way \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=PBrQEcNMbQw\" target=\"_blank\" rel=\"noopener\">...\u003C\u002Fa>\u003C\u002Fp>",{"__typename":161,"id":173,"title":174,"body":175},"500767","Introducing the Email Template Guide","\u003Cp>At De Voorhoede we are a big fans of automation. Whenever we are sure that the task we plan to do can be more effectively be done by a machine, we will try to automate it. For this reason we created for example our \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002Ffront-end-guide\" target=\"_blank\" rel=\"noopener\">front-end-guide\u003C\u002Fa> and based on the front-end-guide we created this nifty tool called the Email Template Guide.\u003C\u002Fp>",{"__typename":177,"id":178,"image":179,"caption":181,"fullWidth":147,"captionPosition":184},"ImageRecord","500768",{"url":180,"alt":181,"width":182,"height":183},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1543318522-email-template-guide.jpg","Screenshot of the Email Template Guide",997,874,"bottom",{"__typename":161,"id":186,"title":152,"body":187},"500769","\u003Cp>The idea behind the Email Template Guide was to create a tool that would simplify our process to develop, debug and build our email templates. It achieves that by:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Generating an HTML template built using components, because the email should be just one plain HTML page.\u003C\u002Fli>\n\u003Cli>Inlining all style rules from generated stylesheets. Because not all email clients support stylesheets.\u003C\u002Fli>\n\u003Cli>Allowing you to send generated templates to a testing service.\u003C\u002Fli>\n\u003Cli>Allowing you to email generated templates to a real email address.\u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":161,"id":189,"title":190,"body":191},"700922","How Did We Do It?","\u003Cp>Like our \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002Ffront-end-guide\" target=\"_blank\" rel=\"noopener\">front-end-guide\u003C\u002Fa> we built the Email Template Guide on top of \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fgulp\" target=\"_blank\" rel=\"noopener\">Gulp\u003C\u002Fa>. We created a front end, where you can preview the different templates that you created based on your modules. These modules are nothing more than HTML with some \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fmozilla\u002Fnunjucks\" target=\"_blank\" rel=\"noopener\">Nunjucks\u003C\u002Fa> syntax. You can also check your CSS styles before they get \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fjonkemp\u002Fgulp-inline-css\" target=\"_blank\" rel=\"noopener\">inlined\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>And because we would like to make your day even more productive, we have implemented functionality to select one or more of your templates and send them to test. You have the option to send the selected template(s) to a specified email address via \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fnodemailer\" target=\"_blank\" rel=\"noopener\">nodemailer\u003C\u002Fa> or send them via Gulp to your \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fgulp-litmus\" target=\"_blank\" rel=\"noopener\">Litmus\u003C\u002Fa> account.\u003C\u002Fp>",{"__typename":177,"id":193,"image":194,"caption":196,"fullWidth":147,"captionPosition":184},"500770",{"url":195,"alt":196,"width":197,"height":198},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1543318586-litmus-example.jpg","Example of results for different web-based clients in Litmus",600,478,{"__typename":161,"id":200,"title":152,"body":201},"500777","\u003Cp>Litmus is one of the best, if not the best, tool to thoroughly test your email newsletters on the different email clients. If you never used it you should give it a try, they have a \u003Ca href=\"https:\u002F\u002Flitmus.com\u002Fsignup\u002Fpremium-plan\" target=\"_blank\" rel=\"noopener\">7 day trial period\u003C\u002Fa>.\u003C\u002Fp>",{"__typename":161,"id":203,"title":204,"body":205},"700923","Tell Me More...","\u003Cp>This tool was based on other open source projects. So it would only make sense that we also made it available to everyone. You can find the project on our \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002Femail-template-guide\" target=\"_blank\" rel=\"noopener\">Github\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>If you want to know more about how to use the project, jump to our github repository and feel free to fork and\u002For give suggestions. Also make sure you read our \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002Femail-template-guide#documentation\" target=\"_blank\" rel=\"noopener\">docs section\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>We already have some ideas for improvements on more stuff that would make this tool better but you can add yours to the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002Femail-template-guide\u002Fissues\" target=\"_blank\" rel=\"noopener\">issues list\u003C\u002Fa> if you wish.\u003C\u002Fp>",[],[],[],1776256168549]