Responsive Email Design

Firstly, I’m not a fan of email marketing… most people do not want to receive the email in the first place, and are sometimes powerless to stop them without physically blocking the sender.

Saying that, from a marketing perspective, email marketing is probably the best form of advertising, delivering the most exposure for the smallest price. But I believe in doing it the right way, which is providing a valid unsubscribe link, delivering emails with relevant information, and gaining the contact details in an open, above board way.

Mobile Open Rate

You probably read the majority of emails on your phone or a tablet. From managing email campaigns, it is apparent that more & more people are using phones or iPads to read emails & browse websites. So I am surprised by how many large companies ignore responsive email design. If you open an email & have to scroll right to read it, it is not responsive – the person who built the email probably used a standard template to build the email

Responsive HTML Emails

Responsive basically means that the email or web page you are looking at will adjust it’s size proportionately to fit the screen. People use a wide variety of devices to read emails & browse the internet, so when designing a web page or email, you need to take all these devices into account – from iPads to mobile phones.

Most email clients (Outlook, Gmail, Windows Mail etc.) will remove the header information from any email… meaning you can’t use CSS style sheets or JAVA script. So you have to rely on inline styling & a bit of old fashioned HTML tables to design your email layout.

Also, some CSS styles are not recognised by some email clients (mostly Microsoft software) so certain styles are totally ignored. This is why you should keep it simple.

Start from Scratch

CGX-Email-DesignThe most common size of an email is 600px wide… give or take a few pixels. So you can start by creating a CSS Div, or a HTML table that is 600px wide. To make it responsive, you should set the width to 100%, then to ensure it doesn’t go too wide, set the maximum width to 600px.

Remember that some recipients will be viewing the email on a mobile phone, which is perhaps 240 pixels wide, so design your email with that in mind.

Using Images

It is recommended that you use under 100 kb of imagery in an email. The proportion of text should be greater than the image count. Also, how many emails have you opened & not bothered to click the Show Images button? Personally, I rarely download the images because it takes up a little bit of my monthly bandwidth (if I am using my mobile phone).

So when creating an email, you should consider what it will look like without any images. You can introduce a bit of colour using HTML tables, setting the background colour, but you generally want the message to get across immediately, so I generally keep it clean & simple.

If you set the alt tag for each image, remember that this will be visible in most email clients. So you can use the alt tag to be part of the email, or simply leave it blank.

Image sizes

You probably want any images within your email to retain their proportions if the email is shrunk to fit the screen. You can do this by setting the CSS styling within the image HTML tag. If it is a full width image, simply set the width to 100%, then set the height to auto. I always set the maximum width (to the exact width of the image) to be sure it doesn’t stretch.

Unwanted blank space

If you have ever opened an email just to see a blank space, this is because the sender set a physical width & height for an image. If you use CSS to define the maximum width, setting the height to auto… this avoids any blank space & you will see the rest of the email without having to scroll down.

Placing images

It’s good practice to set the height to auto, adding the !important tag afterwards. I have seen cases where the height style is ignored, distorting the image, so this ensures it is not.

If you want to place an image to the right / left of text, I would recommend using HTML tables. The CSS float function does not work in some email clients.

Depending upon the size of your image, you can set the table cell width to a percentage, then apply the same rules to the image itself. So if the email is shrunk, the image will shrink proportionately. For example; if you want the image to take up 25% of the screen width at all times – set the image & cell width to 25%.

Remember to set the alignment for each table cell, left / right align & vertical align. Because if the width is shrunk, the table cell containing text may grow, while the image shrinks – meaning the image will centre itself vertically, unless you tell it to remain at the top of the cell.

Some older versions of Outlook or Windows Mail will completely ignore the CSS width style element – so you should design your email with this in mind.

Sending an email campaign

There are various ways to send bulk emails… either using open source PHP software on your own server, or using a third party company like MailChimp or DotMailer. Each has it’s advantages & disadvantages.

If you use an open source PHP mailer on your own server, you can easily come a cropper with email authorities, if you are perceived to be a spammer. Also, depending upon your hosting company, you may be limited to the amount of emails you can send per hour – so if you send out a massive email campaign, you may find your website will go offline. On the other hand, it is totally free!

Depending upon the amount of emails you wish to send, some email marketing companies are worth investing in. They may be free for campaigns with up to perhaps 9000 recipients… but they may place a link at the bottom of your email to advertise their services.

If you are just starting out on the email marketing route, using the online email companies is probably the best route, because they will notify you if you are doing something wrong, or appearing as a spam merchant.

Posted on September 13, 2014 at 4:43 pm

Tags: , ,

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *