Nov 8th, 2011

I was given the task of building a MailChimp template the other week. It’s been a while since I’ve done one but I knew the basics of it all. Since I last worked on template building, MailChimp has made some pretty good progress… We can now have hideable areas and the interface that you use for building newsletters seems to be a lot less buggy.

What I’m going to teach you today is how to build repeating content areas, which look different, but use the same piece of code. You can then hide certain parts of the code to alter the layout. You may think this sounds pretty simple but there are a few things to take into account; namely who will be using your template, what skill level they have, and how compatible you want to make the template with email clients such as the dreaded Lotus Notes.

As this article is specifically aimed at MailChimp and their templates, I’m going to assume that you know what MailChimp template tags to use for hideable and repeatable content sections. If you don’t, you can find the template tag guide here.

The Task

Build a content section that may or may not have an image in it. If it does have an image, the image will be on the right, with text to the left and text underneath. The image has a border of 1px with padding between the border and the image of 3px. Here’s an example of the two content section options we’ll be able to achieve:

Read more

Mar 31st, 2011

Facebook launched the new page layouts on the 10th of March to bring the ‘Pages’ design in line with Profile pages. The two biggest changes to note are that tabs have moved to left hand side, and there are now a selection of images across the top.

Static FBML is now being phased out in favour of Facebook Apps, which means you can build apps with HTML, CSS and Javascript using the Javascript SDK, or with PHP, CSS and Javascript using the PHP SDK. These files are hosted on your own server and then pulled into Facbook via an iFrame.

Read more

Apr 20th, 2010

A few weeks ago we were asked to visit the University of Huddersfield Barnsley Campus to give a talk on digital marketing. The group that we presented to were a mix of creatives from a range of backgrounds, but none of whom had much experience in trying to sell themselves online. There were jewellers, potters, fine artists, photographers, graphic designers; basically everyone except web designers / developers.

We had a three hour slot that was split into two halves: ‘Social Media’ and ‘Online Portfolios’ – but we covered far too much to fit into one blog post so we have decided to split it between two articles over the next couple of weeks… Seeing as though we recently wrote a post on Online Portfolios we aren’t going to bother with that, and instead split Social Media in half: ‘Social Networking’ and ‘Blogging’. In these articles we will be showing a selection of the slides that we used for the presentation, along with some expanded slide notes to elaborate on each point.

Read more

Mar 11th, 2010

Getting your non-purchasers to buy from your email can sometimes prove to be challenging – you may have a lot less information gathered on them, you may not know who has and hasn’t purchased, or the recipients may simply not be interested in purchasing. To know is to understand, and although you may not have a magic ball to predict your non-purchasers’ behaviour, there are a few tricks to improving your non-purchaser conversion rate.

First, segment your list

Splitting up your purchasers and non-purchasers is one of the easiest list segmentations you can do. By separating your lists, you can begin to monitor how each group behaves like for like.

Read more

Feb 10th, 2010

The styling and formating of marketing emails is a fine art, but many people are missing a key factor with their design and build that may make or break the user’s decision to view the email in its entirety…

We are all familiar with an email dropping in our inbox and appearing as blank white space:

The above image is an example of emails not being designed and built to work with images disabled. To help with explaining this process I have built a quick email to illustrate how alt tags can be styled, cells coloured, and text positioned to produce a professional looking email before any images have been downloaded. By using these techniques the user will be given an impression of the message, and an incentive to turn on images and view your email in it’s entirety.

Read more

Dec 1st, 2009

In the world of email marketing, I think it’s fair to say, that far too many people fail to take into consideration the importance of good design and perfect cross-compatibility within email clients. I receive emails which ‘break’ in my chosen client, or have missing links much too frequently – a bad email has exactly the same impact as any other bad marketing; it lowers the values of that company in the eyes of the recipient.

A friend of mine started this blog recently titled Email Fail which perfectly illustrates the lack of attention-to-detail in this area.

In this post I’m not going to do a step-by-step guide to creating an email from scratch (it assumes you already have basic knowledge), instead I will give you a few pointers to overcome some of the most common and annoying problems that you face when designing and building for the most popular clients: Hotmail, Gmail, and Outlook 2007.

Before we get started I’ll quickly outline the problems that each one of these clients cause:

• Hotmail (or Windows Live as it’s now known) frequently ‘breaks’ the layout of image heavy emails, misaligning table cells and causing big gaps all over the place.
• Gmail insists on removing all CSS from the <head> and hence you cannot style a:hover or anything similar. (Now as far as I know there isn’t actually a way to stop this, you simply have to cater for it).
• Finally, Outlook 2007 ignores various styles such as line-height and uses the Microsoft Word rendering engine, rather than IE or any other option that might be considered logical.

So, what do we do to avoid these issues?

Read more