Do your emails look great on every device? Responsive Email Design is the answer!

Header Image_Responsive Email Design
Tablet, Laptop, Mac
PC or Phone? How are your emails being read?
Without looking over the shoulder of your recipient’s or loading a virus to take over their digital world there’s no way to know until your email is sent and gone.

But . . . using advanced CSS in the HTML code of your emails we can now detect the type of device that is viewing your email and have the email content dynamically displayed so that it’s unique and optimised. PC or Phone, your recipient’s get the best view every time.

Don’t believe us? Click here from your Phone and then PC to check out a recent responsive email we sent to our clients. You’ll notice the difference straight away!

So what is it? It’s Responsive Design!
Those of you that read our blog will know that responsive design is something that we have been talking about for some time now.I can hear someone asking right now “so what’s the big deal?”

Well the big deal is that the vast majority of email is designed to be read on a PC. Yet statistics overwhelmingly tell us more and more people actually read their emails on their phone and their tablets.

Below are some stats on the different email clients people are using to read their emails:

Email Client Pie Graph
Email has left the desktop & gone mobile.
Here is an example of the difference between responsive design and desktop design.
Responsive Design Desktop Design
Responsive Email Design Desktop Email Design
The differences are significant and the user experience vastly superior for the mobile phone user.

If you’re serious about making your emails more successful then you need to
start talking responsive design today!

HTML5 in mobile and web development

You may or may not have heard the term ‘HTML 5’ used lately when discussing the future of web development and in particular the future of mobile web development. So what is HTML 5? HTML 5 is a browser-based programming language that can make your content more accessible and interactive. In short HTML 5 can deliver app-like usability and mobile friendly delivery in a website.

Is it worth jumping on the HTML 5 band-wagon? The continued support and growth of HTML 5 is undeniable and its capabilities were clear to Apple Inc’s CEO Steve Jobs over two years ago when in April 2010 he controversially issued a public letter that concluded that Adobe Flash would no longer be necessary to watch videos or consume web content as “new open standards such as HTML 5 will win . . .” in the mobile arena. The result of this statement? Apple does not support Flash based content on any iPad or iPhone devices and when you consider that global sales of these devices are in the region of 180 million units, that’s a whole lot of users without the ability to view your content and subsequently adobe gave up the fight and ceased development of mobile versions of flash.

With improved support for offline data storage, advanced form development and API support for complex web applications HTML 5 is clearly becoming the favoured path to follow, particularly for companies looking to avoid the increased development time & cost to publish multiple platform specific applications. Brands such as Ford, The Financial Times and Vimeo have paved the way, utilising the power of HTML 5 to develop their web based ‘apps’. According to the Burrows Communications Agency who developed the ‘Ford Showroom’ application it’s all about cross platform integration and “The cost savings of not developing twice (for multiple platforms) can add up to the hundreds of thousands . . .”

Here at Brightfox we’ve been busy building HTML5 websites (stay tuned and check out our revamped website due for release in a little over a month) and web apps for the property development industry. A new product that we have recently launched is a powerful multimedia sales tool developed for use on Tablets, and in particular for the IPAD. Combining the power of our live agent portal sales tools and our interactive display suite touch-screen solutions, we have developed a sales and presentation tool that not only allows our clients to interactively present their product to potential purchasers but also seamlessly roll their presentation into a sale utilising one dynamic tool. Stay tuned for more on this product!

Click Here to be taken to an interesting infographic about HTML 5 hosted by

Tips for sending a successful Email campaign

Email Client Logos
Emails are a critical tool for every online publisher. They should be used both in the sales process and to build loyalty. Therefore if you are finding that a lot of your emails are not being opened or delivered you need to take the time to understand why.

Tips when Designing your Email:

Let’s first look at the design element behind your HTML email. A well designed, easy to read email will always win hands down when compared to a cluttered maze of images, links and content. But what other design elements can you employ to ensure that your recipients are seeing and reading the same high quality email that you are?

Email Creative Size
Your email content and creative should be kept to a maximum of 600px wide. This is so that you can be sure that your email will display well in the myriad of different email applications your recipients may be using ie. Hotmail, Gmail and Outlook 2003/2007/2010. We also encourage you to maximise the content ‘above the fold’ and recommend limiting the length of the email to 800px.

Alt Tags
Ensure that all your images have an alt property that will provide descriptive and meaningful content even when images are not being displayed. With the advent of mobile and tablet email, many recipient are choosing not to download external content and you don’t want them to only see a series of broken images!

Broken Image Example

Declaring Image Heights and Widths
Always specify the width and height of images contained in the email to keep formatting consistent in case images do not load.

Background Images
Support for background images in email is very poor, notably in Outlook 2007. Try to design your email creatives without relying on background images and compensate by specifying a background colour which will appear if the images do not render.

Default Link
The Default link is the main link that you would like the list subscriber to click on when they receive your email. You can have as many links within your email as you like, but the Default link is the most important one so make sure you emphasise it!

Clean & Simple Layout
CSS positioning elements are not supported in most web-based email clients. For this reason we always recommend that you use tables to format your emails.

Inline Styles
Inline Styles are preferable to other style definitions as many email clients strip out all information not contained within the body of the email. Keep styles as simple as possible – many advanced CSS properties are unsupported by email clients.

Image File Sizes
Images should be kept to the lowest file size possible to improve email loading time. Make sure you resize your images before inserting them into your email so that you can be sure you have the smallest file size and aren’t carrying a small image with a large file size in your email

Tips to Avoiding SPAM filters:

The number one reason why emails don’t get delivered is because they are blocked by spam filters. Therefore it’s important that you know why this is and how you can reduce the chance that it happens.

Spam filters are like bingo cards. They have a checklist and if an email ticks enough boxes on the scorecard … bang … the door is slammed in its face.  Unfortunately every spam filter is slightly different.

However if you follow these guidelines your newsletter should slip past the gatekeeper every time.

Image to text ratio
The greater the text to image ratio the better chance you have of avoiding spam filters. i.e. use more text and less images. Most spam has a file size of less than 20k. Therefore newsletters with quite a lot of text are more likely to get through. The ideal file size is 20k – 50k.

Minimise the use of BCC:
If you put dozens of names in your BCC (blind copy) field in your email programme the newsletter could be marked as spam.

Spam filters look for certain words, phrases, layouts and email characteristics.

Length should be less than 50 characters. Ideally your subject should be between 4 – 8 words written in sentence case and refrain from exclamation marks. The best subject lines are descriptive of the content and capture the viewers interest.

The number one cause for spam filters blocking an email is the use of words that commonly appear in spam. Some are obvious like free, Viagra, and get rich, while some are not so obvious like opportunity, amazing and compare. Also make sure to avoid the following words (especially in ALL CAPS): free, offer, 50% off, click here, subscribe, earn, bonus, guaranteed, act now, while supplies last, why pay more, visit our web site, time limited, plus all the obvious pharmaceutical and sexual words.

Body text
Apply the same logic and guidelines to your body text as we have suggested for the Subject. Emphasis on using sentence cases and avoiding ALL CAPS.

Avoid using large font sizes and stick with only one or two different fonts and/or sizes. If you do use color text or color backgrounds in your newsletter be aware that some spam filters will wag their fingers and look for other questionable characteristics and reasons to block you.

Recommend Against:
Please do not use any of the following in your email campaigns:

Java, Javascript, VBScript, form elements, frames, ActiveX, animated GIFs, Flash, or embedded video.

As many email applications do not support these elements.

So You’re Ready To Send, What Next?

You’ve put together the greatest email known to man, following all the right guidelines and you’re sure that your recipients are going to find it both informative and useful; but you’re still worried about it not making it through the spam filters. What else can you do to help your chances?

Spam Checker Tools:
A spam checker tool is a piece of software that will put your email copy through a spam filter and create a report about how it was viewed. This will instantly tell you if you have a problem. Most good commercial email services have a spam filter built in. If yours doesn’t there are some free tools you can look at using:

  • Lyris Content Checker
  • Programmer’s Heaven Spam Checker

A Quick Brightfox Plug
For a professional bulk email and CRM solution, why not take a look at foxMessenger. As one of the most cost effective bulk email clients available, foxMessenger could be exactly what you need to execute your most important bulk email needs. With built in reporting and online support, you can analyse the results of your send and implement ways to improve your receiver response every time you send.