What HTML Email Designer Offers

I wanted to create a website geared specifically towards offering HTML email newsletter design and development services, with the ability for clients to easily be able to manage their own newsletter content each month, and also send out campaigns with complete ease.

Email marketing is a great way for clients to keep contact with existing customers and also promote special offers and latest news, and I still feel that too many small businesses are passing up a great opportunity here. So that’s why I decided to create HTML Email Designer. A place for small businesses to start out on the road of email marketing at (hopefully) quite affordable prices.

The services I’ll offer are pretty simple

1. I design an email newsletter for you, provide you with the PSD and you develop it. Perfect for developers who need a bit of design flair or companies who have an in-house development team.
2. I develop your newsletter based on a design you provide. Perfect for a busy designer who doesn’t want to waste time testing their design in Hotmail, Outlook etc.
3. The complete package – I design, develop and integrate an HTML email newsletter with Campaign Monitor or MailChimp allowing you to manage your newsletters content, access some great analytics and send out your campaign each month without the hassle of having to pay a designer/developer to do so for you.

Campaign Monitor & MailChimp

Both these solutions in my opinion are fantastic for sending out email newsletters. They let clients update the content of their newsletter with ease, and also provide some very interesting statistics enabling you to see how many people opened the email, what links they clicked and much more. There are also some cool ways to integrate social media into your campaigns these days. In terms of developing newsletters for each platform, yes there are some differences, but I believe offering both as options is the best way to go as each have good and bad points.

The decision to use Campaign Monitor or MailChimp for a certain project will definitely depend on the clients needs and also the frequency with which they intend to send out their campaigns as the pricing does vary with both.

Thoughts behind the HTML Email Designer design

Initially I set out designing a site that was much more in depth and I even started developing it. Client work took a front seat and I put the development on the back burner. When I came to get started again I knew I’d bitten off more than I could chew trying to develop a reasonably large site in between client work. With that I started from scratch and tried to simplify.

I wanted to create something really clean and easy to use, with a focus on typography and also past email newsletter designs I’d created. At the time Typekit has just announced the release of Futura on its platform, so that was the perfect excuse to use that for many of the headings you see on the site. Unfortunately the condensed version of Futura isn’t available on Typekit, so I had to use image replacement there.

In the ‘hire’ section at the bottom of the page I also wanted to spell out the process for the client, letting them know exactly what to expect.

Behind the scenes

I built the site using HTML5 (as I do for all client sites now) and also used some subtle CSS3 to further enhance the experience. Mainly on the email client logos, using subtle CSS3 gradients and box-shadow transitions when you hover over them with the mouse.

To conclude…

Overall the site came together pretty quickly and I’ve had some good feedback so far.

I think its going to be an interesting little project because now I need to promote the site (cue this blog post!) and get some visitors to it. I’ll definitely be pointing my clients to the site once I finish working on their website projects. After all having an email newsletter to match your brand new website is the perfect partner in my opinion!

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.

1. 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;" />

2. 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;">

3. 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.
4. 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.
5. 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.
6. 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.
7. 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.

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 <head> and <body> 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 <head> 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.

<table style="height: 100%;" border="0" cellspacing="0" cellpadding="0" width="100%" 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;

<p style="font-size:14px; color:#000;">My Paragraph goes here</p>

Sometimes I have found however that it is necessary to add some styles into the <head> 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

• Redesigning the Campaign Monitor Newsletter
  
• SitePoint: Coding Email Newsletters