Website Designer in the UK - William Smith // Authentic Style Blog » Email Design

Choir Email Newsletter Design & Tips

Will — Wed, 23 Jun 2010 12:44:15 +0000

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.

Design

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.

Implementation

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;
Inline Styles
Yes you can add CSS styles to the of your document, but to make certain all email clients display things how you intended, you should add styles inline. Like this;
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.

Mastering Email Newsletters

Will — Wed, 18 Feb 2009 08:47:52 +0000

A well designed and successfully implemented email newsletter is a great way of keeping in touch with your customer base, and as a designer its also a fantastic service to be able to offer clients. That is if you can do it well. In this post I’ll cover some tips for building great email newsletters.

Use a Fixed Width No Wider Than 600 Pixels

If you’re used to designing websites you’ll be optimising your designs for 800×600, or even 1024×768 pixel resolution screens, but its a bit different when it comes to email design. This is because most of your recipients will be viewing your email in a ‘preview pane’ rather than double clicking the message and viewing it full screen. Bearing this in mind your email design should be 500-600 pixels wide.

You’ll also want to make sure you use a fixed with, rather than percentage based layout. The name of the game with email newsletter design is simplicity in terms of structure. You shouldn’t let this make you feel limited in terms of design though!

Background Images

I think its a common misconception that you can’t use background images in your email newsletter designs or you should really try and avoid images all together. You most certainly can, but you kind of need to rig your HTML to do so.

Most email clients strip out your newsletters and tags and replace them with their own (because your email is displaying inside their webpage after all), which does make sense. So, as a result you can’t add your background images using CSS between your tags.

What you need to do is wrap your email in a huge table thats 100% wide and 100% high, just like you would have done back in the day! Then I recommend using the old ‘bgcolor=’ and / or ‘background=’ to set your background color and image.

bgcolor="#000000" background="http://www.yoursite.com/images/image.jpg">

Use Inline CSS

This is totally frowned upon in web design, but in email newsletter design, its a necessity. Lots of email readers apply their own styles to emails to make them render in a particular way. By adding our own styles ‘inline’ we over ride these.

Here’s a quick example of some inline CSS styling a paragraph;

My Paragraph goes here

Sometimes I have found however that it is necessary to add some styles into the section of your newsletter design. One particular instance of this is for reseting margins and I always add link styles here (as well as inline) just to be on the safe side.

Make your email is readable without images loaded

By default most email readers don’t load images, the user has to click a link to load them. Because of this you need to make sure the main message of your email is still readable with images turned off. The best way to do this is to descriptively label your ALT tags.

You can see in the above example from PixMania that the main message ‘£10 off when you spend a minimum of £200′ is still clear. This is why its so important that your whole email newsletter doesn’t just consist of images.

Use HTML Tables for Layout

If you’ve been around the industry for any length of time you’ll know that you need to revert back to tables for layout.

The guys over at Campaign Monitor recently wrote a blog post about how many tables you could nest inside other tables and your email still display properly. The generally consensus was that you can go 15 tables deep! This reinforces the fact that tables for layout in email newsletters is the best bet.

Test, Test and Test

Hotmail, Gmail, Thunderbird, Outlook, Yahoo – you get my point. There are a fair few email clients out there and you’ll need to make sure your email displays properly in all of the major ones. As long as you’ve adhered to the main points of this article you should have much to worry about, but its better to be safe than sorry!

Include a link to view in browser

What happens if after all your testing, for whatever reason your email looks dreadful? Most of the time It will get deleted. Thats no good. You need people to realise that they can easily click a link to view the same email in their browser window where it will definitely render how it was intended to.

My tip would be to always get into the habit of adding something like ‘Doesn’t look quite right? Click here to view this in your browser’, and you’ll be making sure that no one misses out on what you’ve got to say.

And finally, Follow the Campaign Monitor Blog

These guys know what their talking about. They run the hugely successful, (and bloody brilliant might I add) online email newsletter software ‘Campaign Monitor‘. Out of all the ways you can send HTML emails online, Campaign Monitor is by far the most intuitive and best I’ve used.

If you’re serious about creating and sending email newsletters then you need to subscribe to their blog. Lots of their posts address questions from the community and also announcements about new features their software offers, plus updates from the fight to introduce some form of standards to email newsletter design.

Conclusion

I hope this post has helped you, or maybe got you more interested in this medium. I know its something that interests me, and something that I’m always keeping my eye on. I’m sure one day these tips will become redundant, and I really hope that they do – but for now the way in which we build email newsletters is quite archaic to say the least.

If you fancy reading up I highly recommend you download this FREE HTML newsletter design guide from the guys at MailChimp. Enjoy!

You might also find these links useful