Designing a HTML newsletter for Drupal (with the Simplenews module)
I designed this email newsletter in Photoshop and want to send it through Drupal. I've got Simplenews setup and a newsletter (taxonomy term) called "Connections".
I'll change some things about the branding and design, but the template is just about complete. The impact wouldn't be there without Jeff's photography, and my inspiration for photo-based layout and copy wouldn't be there without influence from Apple.
I think I'll create the "CONNECTIONS" and "Circatree Design" block (in black) as header and footer elements in a template for Simplenews (or maybe not) so that all I'll change for each issue is the header image, body, and bottom call to action.
All text except the title ("New Projects, New Partnerships") is set in Arial, a popular sans-serif font installed on most devices. Titilium text, the new typeface I've used for many Circatree Design layouts,--since it's a specialty font surely not installed on many systems--might be generated as an image for the title of each issue if I can get Signwriter to embed it into Simplenews issues.
The left- and right-floated images and the blue color for the links should be supported by the site's theme stylesheet, embedded into each message as inline CSS.
In the case of this issue, 5 images should be assigned to one node, the first assigned as a CCK Image field and the last four as CCK fields embedded into the node body as other CCK Image fields but through the Insert module and Imagecache presets: 1. Header image (bike wheel), 2,3,4: Website screenshots, and 5. Bottom call to action.
In addition to the Simplenews Template (6.x-1.x-dev) module, I'm going to use Simplenews Analytics (6.x-1.1) and Simplenews Statistics (6.x-2.1) to try to make this newsletter functionality as fully-featured as MailChimp.
While the Simplenews Template module enables a CSS Style to be defined for the body of the message, I want to be able to use style definitions from the site's theme stylesheet.
Using Simplenews Template (6.x-1.x-dev) might be the cause of my newsletter issues being truncated after the beginning of the message, so I'm going to try the latest stable version.
Both versions seem to produce the same results:
The node title inserted between the Header and the Body of the message; and the node body truncated. Is it a teaser version of the node that is being mailed? I'm not sure.
Copying simplenews-newsletter.tpl.php from the Simplenews module directory to my site's Administration theme (oddly the theme that is used to send the newsletter - WTF?) and removing the title doesn't prevent the Node Title from displaying. :(
So I removed the node title (H1 tag) from the simplenews_template.module directly (line 344). And clearing the theme registry (cache) seemed to have put the theme-specific simplenews templates into effect - printing the entire node body in each message.
Adding emogrifier.php to the Simplenews Template module got my CSS styles working in Gmail and other fussy mail clients. But while fine tuning the CSS of test messages I noticed (as expected) each mail client (Gmail, Apple Mail, Yahoo! Mail, and Hotmail, for now) displays the message a little differently. Specifically, Hotmail seems to be the only one to honor the Site's theme's CSS rules.
I want Simplenews Template CSS to be the only rules honored in outgoing messages. But there are two issues: 1. The site's (administration) theme -- the one that is used for sending Simplenews messages -- may change while the format of the newsletter issues shouldn't. **It's a strange requirement of Simplenews Template that associates Simplenews issues with the site's Administration theme--an association for which I can see no clear logic.**
The second issue with SNTemplate CSS as the only style associated with outgoing messages is the theme which is used for editing the newsletter and displaying each issue must have support for the classes and styles defined in the newsletter stylesheet.
Inconsistencies & Compromises
While Yahoo! Mail correctly rendered the margins around my floated objects, it failed to format my text with the Arial or sans-serif font family I declared in my stylesheet--it seems to have used Times New Roman. And while Hotmail rendered my text in a sans-serif font, it failed to add the margin I specified around my floated objects.
AOL rendered the message perfectly.
padding rather than margin was chosen for the floated elements' spacing away from surrounding text.