This project was commissioned by Profi Reisen Verlag in Vienna, Austria. The company already owned a Newsletter Service based on a CRM build by yours truly. From Monday to Friday the "tip-daily" Newsletter delivers news from the Austrian Travel Industry to about 3.500 readers.
A Layout Update was necessary since the old HTML Template didn't display correctly on mobile devices. Besides that the Content — which is generated from the CMS (textpattern) and CRM — needed to be extended. When the editorial team sends a Newsletter all articles which were used, should be marked as "send" in the database. And of course Marketing needed some new banner places.
This resulted in the following content blocks:
- HEADERBANNER 468x60
- NEWS - up to 10 articles
- CONTENTBANNER 468x60
- SECTION 1 - (display optional) max. 1 article
- SECTION 2 - (display optional) max. 1 article
- SECTION 3 - (display optional) max. 1 article
- SECTION 4 - (display optional) max. 1 article
- SECTION 5
- SUB-SECTION 5.1 - max. 10 articles
- SUB-SECTION 5.2 - max. 10 articles
- SUB-SECTION 5.3 - (display optional) max. 3 articles
- FOOTERBANNER 468x60
- SECTION 6 - max. 10 articles
- SKYSCRAPPER BANNER 160x600 - (displayed optional, when present use a sidebar)
The first step was to prepare a Layout Mockup in pure HTML, so I can present and discuss the new Layout with the team. The next step would be to prepare the Backend to generate the new content.
Based on the Job Description, two Layout Versions were needed — with and without a Sidebar for the Skyscrapper Banner. I already used the Ink Framework from ZURB, with a few other client HTML Newsletters and had made good experience with it. So the decision to use Ink Framework for the "tip-daily" was quickly made.
Time-travel back in the 90's
Creating a HTML Newsletter, which has a nearly consistent appearance on all devices and displays, means a lot of HTML
<table>'s like in the 90's. ZURBs Ink is no exception in this case.
Since I work with SublimeText, I found the "ZURB Ink Sublime Snippets" from Christian Rojas very useful. Another great help can be found at "The Ultimate Guide to CSS" from Campaign Monitor. This Guide shows an overview of Style Elements and their support on most of the Email Clients and platforms. Following the Ink documentation the new Layout Dummy quickly took shape, except the last step — inline all the CSS Styles, which I would do later when all Backend changes were done.
The tricky part was to implement the changes while the old Newsletter was still in use. This resulted in some spaghetti code and a few grey hair. After the release, the old code was removed the hair kept.
The dynamic newsletter content is generated with PHP and stored in a mySQL database. For the static header and footer content, the good old PEAR flexy template engine is used to glue everything together. Guess I could use more flexy templates, instead of putting the HTML into the PHP Code but budget and time forbids it.
Because of this setting a lot of HTML ended up in the PHP Code *urghs*, anyhow it only got worse when I inlined all the CSS. Trying to keep the PHP Code a little more readable I created global variables, with the inline CSS to reuse later in my content functions. Nevertheless the good part is Layout changes are at a single place.
$GLOBALS['inline']['table_row'] = 'style="border-spacing:0;border-collapse:collapse;vertical-align:top;text-align:left;padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;width:100%;position:relative;display:block;"'; $GLOBALS['inline']['table_three_columns'] = 'style="border-spacing:0;border-collapse:collapse;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;vertical-align:top;text-align:left;margin-top:0;margin-bottom:0;margin-right:auto;margin-left:auto;width:130px;"';
Building HTML Emails is one of craziest things you can get across as a Webdeveloper. Test, Test and again Test on as many platforms and clients as possible to avoid any unwanted surprises.
Live Examples of the completed Newsletter can be found at this page - www.tip-online.at/newsletter/