There’s something about email newsletter design that I love – be it wrestling with Outlook or getting back to tables I don’t know. Here’s a quick case study on a newsletter I recently designed and developed.
Planning & Information Architecture
The first stage in any project is to ask questions. I needed to extract answers to a few key questions from my client in order to start thinking about what exactly needed to be included in the design, and to ultimately make this newsletter a success. Often the questions are simple, but they need to be asked nonetheless;
- What is the main purpose of this newsletter?
- What areas of your website / company do you want to promote with the newsletter?
From the answers to the above it was clear that this particular newsletter would need to include information about the choir’s latest news/events and also encourage people to connect with them on Twitter and Facebook.
The important thing with an email newsletter is for it to be instantly recognisable as soon as it’s opened in the inbox. With that in mind the design had to have a strong sense of the LoveSoul Choir brand. To achieve this I decided to go for a professional look whilst at the same time trying to inject a hint of personality into the design. I think I achieved this by using things like tilted images for the news thumbnails, laid back (even grungy style) social media icons, the hearts icon from the logo in the footer and also a nice banner image that hopefully projected a fun yet professional feel. Having created the choir’s logo and company website previously, I knew that purple was the colour that distinguished LoveSoul from anyone else and made them recognisable. With that in mind I decided to create a solid purple block of colour near the top of the newsletter that doubled up as a brief overview of the new stories included in each issue. My idea was that this would enable people to open up the newsletter, see if a news story interested them, click on it and then be automatically taken down the page (by way of an anchored link) to read a little more about it. Then if they wanted to read the full story they could do so on the choir’s website. The client was really pleased with the feel of the newsletter design, so we quickly moved on to developing it ready for send out later that month.
This particular email newsletter was developed using MailChimp rather than Campaign Monitor as this was the client’s preference. MailChimp didn’t really pose any real issues during the development stage, but I do have to say that my personal preference is definitely Campaign Monitor for a few reasons. Firstly its speed when making changes and sending out test emails – something which got quite frustrating with MailChimp. And also it’s really simple interface. MailChimp looks great yes and I do like their quirky approach, but I remember thinking ‘Blimey there’s a lot going on here!’ when I first logged into the admin area. I think they could cut back a little and make the design simpler. Overall the implementation went smoothly and against all odds I don’t remember suffering any real set backs during the testing stage. There’s a first for everything! The main areas of the newsletter were made editable so my client could easily update the content from month to month and I finished the project off by creating a screencast that acted as an instructional video showing them how to edit, add and remove news items. Click here to view the completed design in your browser
Newsletter Development Tips
I thought I’d finish this case study off with a few things I’ve learn over the time in which I’ve been designing and developing email newsletters. You might know these already but I thought I’d share them anyway as they’re always handy to refer to when starting on a new project.
- Display: Block Hotmail, and now I believe Gmail (as of a few months ago) can sometimes add mysterious spacing around some of the images in your newsletters. To combat this simply add the CSS declaration ‘display:block;’ as an inline style. Like this;
<img src="images/nav-amended/research-grants-and-contracts.jpg" width="119" height="47" style="display:block;" />
- Inline Styles Yes you can add CSS styles to the <head> of your document, but to make certain all email clients display things how you intended, you should add styles inline. Like this;
<p style="font-family:Arial, Helvetica, sans-serif; color:#e14f23; font-size:18px; font-weight:bold; padding:0px 0px 9px; margin:0px;">
- Watch your height and width When most people read their mail they might not have their email client open full screen, or the vertical / horizontal space might be limited in their preview pane. With that in mind it’s important to get some content above the ‘fold’ (hence the purple contents panel I talked about in the LoveSoul Newsletter). Regarding width, try and stay at under 650 pixels if you can.
- Build the newsletter inside a table When you start developing your email newsletter its good practise to first create a table that the rest of your code will sit inside. Make this table 100% wide and 100% high and set the vertical alignment to ‘top’. With this in place you can effectively apply background colours to this table and they should show up.
- Be careful with padding and margins Padding and margins can be read differently or not at all by different email clients. Take a look at Campaign Monitors Guide To CSS Support for more info.
- Test, Test, Test There is no substitute for testing. You can’t guarantee that your email will display correctly in Hotmail, Gmail, Outlook 2003, Outlook 2007, and Yahoo Mail without actually viewing it in all of these. Make sure you allow time to do this during and at the end of the development.
- Include a link to view the newsletter online This is just a best practise really. If the worst comes to the worst and your email newsletter is unreadable to customer X, make sure you include a link to view the email in your web browser at the top of the email.
Would you like to be notified each time we post new digital media?