GraphicMail is currently in the last phase of rounding off the integration of a new email newsletter Beta editor that will let you create studio-quality email campaigns more easily and efficiently than ever. This all without any HTML or design skills; you can simply knock away those newsletter-making hassles with the powerful new editing package. 

Marketers know that building stylish, branded emails can be a laborious task, even when using a tailored email software suite. “Online” doesn’t necessarily always mean that job at hand can be done faster. Getting your email newsletter from concept to send-ready is a subjective process and some online email packages are painfully slow and tedious, even when using pre-set templates.

On top of that, consumers expect quality and professionalism in the marketing communications that they receive. First impressions count, and before anyone will delve into the details penned in your email newsletter, they will consciously discriminate - based largely on its appearance qualities - whether it would be worth their while to do so. It’s common-sense that the majority of readers will ditch your email, unless you are instantly able to project the allure of real value - and that’s regardless of whether you have written the most mesmerising sales copy conceivable. With this editor; images, structure and coloring all work in visually irresistible ensemble to help you win readers over during those crucial first-look moments.

We give you over 300 email marketing templates to create customized campaigns that reflect your business or brand profile – just pick yours from a list of industry categories. Some templates are drag-and-drop enabled, making it even easier for those of you who aren’t quite tech-savvy to design newsletters easily. For example; the on-board photo editor lets you edit images simply and ensures that these are perfectly placed in each template. It even gives you the ability to work in layers; allowing you to change the text within images - which is especially useful when working to produce newsletters for multiple languages. Another gem in its array of features is the color picker tool, which plucks precise colors from your logo or website and records them to the theme manager, where you can blend your own color-scheme or select from pre-existing sets.

This new editor will become GraphicMail’s premium editor and we project that in the long term our client-base will progressively be migrating to the new system as they become more familiar with its benefits . Together with our core functionality and social integration features, users’ campaign management will be enhanced with tried & trusted smart publishing tools as well as response monitoring through tracking and analytics.

"The new Editor will enable our users to seamlessly create, edit and manage their newsletters and email correspondences. We have focussed on user experience and deliver this through simplicity and flexibility. From simple, yet striking emails to more complex socially integrated newsletters, users can be sure that their newsletters will hit the spot with their target audience." - Paul Hobden, GraphicMail Product Manager

Yes, you want a visually impressive email.  But it’s not all in a pretty picture. 

When it comes to the visual side of your email, email marketers tend to take the lead from their websites, because by doing so they not only enhance brand awareness, but also extend the trust their clients have in their brand to the inbox.  So – if your email should look similar to your website you already have the outline for your email design.  However, the trick is not in designing the visual…

The best email design is the one that’s centered around the subscriber.  By anticipating how your subscriber is going to react to every element of your email, you can stay one step ahead of them to give them exactly what    they’re looking for.  And if they like what you’re sending them, they’re that much closer to engaging with your campaign and spreading the word.

So let’s climb into the mind of your subscribers to see how you can optimize your email design.

First impressions: Your From name
When you open your inbox to view unopened emails, the first thing you look at is who sent you these new emails.  Generally, when sending marketing emails, we tend to stick to brand names for the From name – like when you receive our monthly newsletter, it’s always from GraphicMail.  The reason for this is that your subscribers have already demonstrated trust or interest in your brand by signing up for your emails.  By sending emails from the brand name you increase the chances of recipients automatically opening your email purely based on recognition.

Hooking them in with the subject line
The next thing email recipients tend to look at is the subject line.  While it’s good to look at certain subject line-writing tips, the best thing you can do for your subject line is to run a split test on it.  Use our A/B split testing tool to test variations of your subject line against each other, then use the one that gets the best open rate for your newsletter send.  Make sure you know what you’re testing, e.g. shorter subject lines vs. longer ones, repeating the brand name in the subject line against not doing so, only calling out the main article or listing all the different things you have in your newsletter, etc.

An impressive preview
Every subscriber will view your email differently according to which email client they use.  Most email clients give them a sneak peek at your email before opening it through a preview pane.  The portion of your email shown in every email pane will differ depending on the email client and the settings your subscriber chose.  Generally, it will be roughly the top left 400 x 300px that will be displayed. 

If you view your emails in a preview pane, you will notice that the images are usually blocked.  Remember to insert descriptive ALT text for your images so that those readers who view the email with the images turned off will still have an idea of what’s going on.  (Read this post for some very good tips on how to accommodate for blocked images.)

An email in two parts – 1
When someone opens your email, they only see the top part of it.  We refer to that part as the part above the fold; it’s anything you see on your screen before having to scroll down.  With emails the trick is to get your subscriber to read the full email.  Now that they’ve moved past the From name, subject line and preview pane and have actually opened your email, your email needs to deliver the content they’ve hoped for.  If your email is relevant and well-written, designed well, concise and contains some value for them, you’ll have a better chance of getting them to give your email their undivided attention.

An email in two parts – 2

If the first part is above the fold, it only makes sense that the second part is below the fold.  If you’ve convinced your subscribers to scroll down to the second half of your email you’re doing well.  If needed, repeat your call-to-action (more on that below).  Make sure that your email isn’t too long – your subscribers are busy and have a full inbox to attend to.  Give them what they need and direct them to your site for further details.

Click-click. Your call to action
Why are you sending out an email newsletter?  Think about whether you want to generate traffic to a specific page of your website, or whether there’s a desired action you want them to take (like making an online purchase or booking).   This is your call-to-action (CTA) and to ensure subscribers react to it you have to design it so that it stands out – subscribers won’t respond to a CTA they didn’t see.  Ideally, CTAs should also be straight-forward and to the point.  Use your words wisely.  We gave some good tips for your CTAs in this post.

Email marketing campaigns that incorporate strategic design are a lot more likely to relate to subscribers.  When designing your campaigns, think like your recipients – you’re guaranteed to have a better response rate.

*Original image here.

We try to make email marketing as simple and easy-to-implement as possible, but even experienced designers sometimes struggle when it comes to designing email newsletters.  That’s because email is different to any other tool you use and so, has its own rules.

I know many of our clients choose to use one of our pre-made templates (and it does make your life that much easier), but some GraphicMailers simply have unique needs and so want to design their own templates.  So, here are some email design tips and best practices for all:

First things first

1)     Your gut instinct might be to send out the most impressive, flashy email on the block – but that might not be the best idea.  A clean, simple layout is not only easier on the recipient’s eye, but easier to code.  There will also be less of a chance that your email will be incompatible with certain internet browsers or email clients.
2)    Furthermore, some of your subscribers might be viewing your email in a very basic email client, or even on their mobile phone.  Insert a link to a web server at the top of your email, so that, if the email client does not support all your imagery, they’ll still be able to view it in all its glory.
3)    You’re probably aware that it’s illegal to send out marketing emails without offering the subscriber the option of opting out of your email.  Even though it may seem inconceivable that someone might choose to no longer receive emails from you, it does happen.  Make your unsubscribe link clearly visible – you’ll make it easier for recipients to unsubscribe and save yourself the trouble of having to remove them from your list manually.

The technicalities

1)     It’s time to whip out those tables.  While you can use some CSS styling in email design, all emails require their layouts to be designed in tables.   With the exception of the 100% width wrap table, it’s best not to nest any other tables – rather use the stacking system.  Your email will simply be much easier to control.  (Bear in mind that most email clients only read the code in the body tags, not the tags themselves, so if you want to create the effect of a background color you’ll have to use a 100% width table.)
2)    Contrary to what you might be doing for your websites, don’t create classes – email clients tend to strip them out.  Instead, use inline styles.
3)    Not all your subscribers have their images turned on by default; in fact, many of us block them.  Remember to give alt tags to all your images!  In the same vein, don’t set size specifications (width and height) for your images.  If your recipient is viewing the email with images turned off, they’ll only be faced with large white blocks – and you don’t want that.
4)    Keep in mind that most email users view their emails in a preview pane.  Keeping your email width under 600px is considered best practice, as this is the width smaller preview panes are set at.
5)    When designing emails you’re going to have to stick to HTML – all those fancy little JavaScript tricks, like pop-ups, trigger spam filters with ISPs and are more than likely to get your email spam trapped.
6)    Needless to say, all your subscribers will be viewing your email in different email clients.  As you can’t 100% guarantee what the character set they’ll be using will be, it’s best to make sure that all your characters are encoded.  It’s a bit of extra effort, but it does guarantee that all your recipients will view the text correctly – especially if you’re working with foreign languages.

See if it works

I cannot emphasize the importance of testing your emails enough!  How else will you know whether their rendering and displaying correctly?  There’s no “undo” after you hit send.
1)     Make use of Inbox Preview – it’s our new tool that allows you to see how your email renders in a range of different email clients.  Nifty.  If you choose to test manually, make sure that you not only have a range of email addresses at your disposal (like Gmail, Hotmail/Live, Yahoo! Mail and AOL mail) but also that you test it in a number of browsers – e.g. various versions of Internet Explorer, Mozilla Firefox, Apple Safari and Google Chrome.
2)    The simplest and most effective way to test your newsletter is to conduct a test send.  You’ll be able to see how the email displays, whether you’ve left anything out and check to see if your links and anchor links work.
Not sure what to test for? Read this post.

So there you have it – a few tips to help you out!  If you have any other design related questions please drop us an email – info@graphicmail.com – and we’ll get a member of either our support or design team to help you out.  You can also read more design articles and tips here and here.

We often get clients asking us about image editing software.  “I don’t have Photoshop. What now?” Luckily these days there are really great image editors available online and many are free.  In fact a few are good enough to give some of the desktop apps out there a run for their money.  Some have advanced functionality like layers and layer effects and mimic the desk top environment found on advanced software like Adobe Photoshop. But let’s face it - your average email marketer, staring a send deadline in the eyes, doesn't want to sift through complicated software and help files…

So…  I have taken 6 of the top free online image editors and put them through their paces doing the kind of things an email marketer might require:  resizing, cropping, adjusting color & contrast, deep-etching, adding text and lastly saving our new image.

Note: All 6 editors are Flash based so you will need a Flash plugin to run them. All tests were conducted using an 800x600pixels image I found in my Sample Pictures folder on Windows.

Pixlr

Pixlr is a Flash based free online image editor. The interface looks and feels like a desktop image editor.  It supports pixel-level control, custom brushes, filters and  advanced functionality like layers and layer effects. A simpler ‘express’ version is available for beginners or those in need of a quick fix.

Resizing

Resize images using the Image Size menu function.

Cropping 

Crop images using the manual cropping tool. No precision cropping options .

Adding a border

No specific border tools or options. Add a border manually by making the canvas size bigger or adding a border on a layer above your image.

Adjusting contrast and color balance

Adjust contrast and color easily using Brightness & Contrast and Hue & Saturation menu functions respectively.

Selecting objects

Lasso and wand tools are available. The lasso tool only offers freehand and not polygonal selecting, so a steady hand is required.

Adding text with a drop shadow

Text is easily added as a new layer with the text tool. A simple click allows the text to be edited. A drop shadow can be added using the Layer Styles options on the text layer.

Saving images

Saving is straightforward using the Save menu function. Jpeg, PNG, Bitmap and a Pixlr format (PXD) allowing layers to be saved are available.

Final verdict

Usability is very good. Photoshop users will find it very familiar, while novices should find their way  around the basics fairly quickly.

Score 9 /10

Splash Up

Splashup is a Flash based free online image editor. The interface looks and feels like a desktop image editor.  It offers multiple image editing, pixel-level control and advanced functionality like layers and layer effects. A simpler ‘Light’ version is available for beginners or those in need of a quick fix.

Resizing

Resize images using the Image Size menu function.

Cropping 

Just click and drag to crop. No precision cropping options available.

Adding a border

No specific border tools or options. Add a border manually by making the canvas size bigger or adding a border on a layer above your image.

Adjusting contrast and color balance

Adjust contrast and color easily using Contrast /Brightness and Hue/Saturation menu functions respectively.

Selecting objects

A freehand lasso tool is available. Since no polygonal lasso selecting is available, so a steady hand is required. No magic wand tool option available.

Adding text with a drop shadow

Text is easily added as a new layer with the text tool. A simple click allows the text to be edited. A drop shadow can be added using the Layer Styles options on the text layer.

Saving images

Saving is straightforward using the Save menu function. Jpeg, PNG and FXO is supported. There are also options to save straight to Facebook, Flickr, Picasa, etc.

Final verdict

Usability is good. Photoshop users will find the interface familiar enough although some differences could frustrate those seeking familiar functions. This shouldn’t bother novices, who should find their way around the basics easily enough.

Score 8 /10

Picnik

Picnik is a Flash based free online image editor that offers a more fun alternative to the “desktop” style editors. It offers basic as well as more advanced functionality along with clipart, stickers and effects. A more advanced ‘premium’ version is available for those willing to pay a small fee. The default editor for many image and social sharing sites.

Resizing

Resize images using the Resize menu function.

Cropping 

Crop images using the manual cropping tool. No precision cropping options available.

Adding a border

No specific border tools or options.

Adjusting contrast and color balance

Adjust contrast and color easily using Exposure and Colors menu functions respectively.

Selecting objects

No selection tools available.

Adding text with a drop shadow

Text is added using the text menu function under the Create tab. No specific drop shadow tools are available.

Saving images

Saving is straightforward using the Save & Share tab function. Jpeg, PNG, Bitmap, Gif, PDF and TIFF formats are available. There are also options to save straight to Facebook, Flickr, Picasa, etc.

Final verdict

Usability is good. Picnik is a simple, fun way to edit images as long as you don’t require precision work or advanced text functionality. Features added goodies like clipart as well.

Score 8/10

Sumopaint

Sumo Paint is a Flash based free online image editor with an interface looks and feels like a desktop image editor.  It offers loads of features incl. advanced functionality like layers and layer effects. The app proves to be popular with creatives – just check out the images posted on its home page.

Resizing

Resize images using the Image Size menu function.

Cropping 

Crop images using the manual cropping tool. No precision cropping options available.

Adding a border

A stroke option under the Layer Effects will add a border. Borders can be added manually in a number of ways.

Adjusting contrast and color balance

Adjust contrast and color easily using Brightness & Contrast and Hue & Saturation menu functions respectively.

Selecting objects

Lasso and wand tools are available. The lasso tool offers both a freehand and a polygonal option for precise selections.

Adding text with a drop shadow

Text is easily added as a new layer with the text tool. Once text is placed it becomes a layer image which cannot be edited as text again. A drop shadow can be added using the Layer Effects options.

Saving images

Saving is straightforward using the Save menu function. JPEG, PNG and a SUMO format allowing layers to be saved are available.

Final verdict

Usability is very good. Photoshop users will find it very familiar even down to the shortcuts, while novices should find their way around the basics fairly quickly.

Score 9 /10

Photoflexer

Photoflexer is another Flash based free online image editor that offers an alternative to the “desktop style” editors. It offers basic as well as advanced functionality along with clipart, stickers and effects. It even has a “geek” tab where some fancy, experimental effects can be found.

Resizing

Resize images using the Resize menu function.

Cropping 

Crop images using the manual cropping tool. No precision cropping options available.

Adding a border

Select from a number of preset borders.

Adjusting contrast and color balance

Adjust contrast and color easily using Adjust and Contrast menu functions respectively.

Selecting objects

A Smart Cutout tool and Smart Scissors tool is perfect for precision selections.

Adding text with a drop shadow

Add text  using the Text menu function under the Decorate tab. No specific drop shadow tools are available.

Saving images

Saving is straightforward using the Save dialogue box. JPG and PNG formats are available. There are also options to save straight to Facebook, Flickr, Picasa, etc. or share your photo directly through email.

Final verdict

Usability is good. Photoflexer is a simple, fun image editor similar to Picnik but with a few more gizmos on offer.  A good alternative to the Photoshop style editors .

Score 8 /10

Photoshop Online Editor

Adobe offers an online editing tool in the form of Photoshop.com. An online “image library” style  application that offers image editing as just one of its options. Registration is required, and as such your last edits will be remembered when you log in.

Resizing

Resize images using the Resize menu function.

Cropping 

Crop images using the Crop & Rotate tool.

Adding a border

Select  from a number of preset decorative borders. No simple line options available.

Adjusting contrast and color balance

Menu options like Exposure, Saturation, White Balance, Highlight and Hue generate a number of thumbnails with varying intensities and exposures. All you have to do is pick one.

Selecting objects

No selection tools available.

Adding text with a drop shadow

Add text using the Text menu function under the Decorate tab. Click the Drop Shadow radio button for a simple dropshadow. Remember to always click “Finish” when done.

Saving images

Saving is straightforward using the Save dialogue box.  JPG format is available. Or choose to directly login to Facebook, Flickr, Picasa, etc and publish.

Final verdict

Usability is good. The functionality on offered is basic though, so will prove frustrating if you are looking for something more advanced. It functions more like an online image library with some editing options on offer. A “decorate” tab offers some nice effects though.

Score 7 /10

Have you ever noticed when opening an email that the email client (i.e. Gmail, Outlook, Hotmail, etc.) usually displays a link “Display images below”?  If not, you’re one of the 33% of all email recipients who have your images displayed by default (as reported in a recent article by Marketing Sherpa) – all other email recipients have their images blocked.

Do you take this into account when you design your newsletters? Have you ever had a look at what your email newsletter looks like when the images have been blocked?  Usually the images in your header and at the top of your email say a lot about the content. It contains your logo, and often the title text is included in the image.
Consider the following, should your recipients’ images be blocked:

Will they recognize that the email is from you?
Without the top image, is there some text to pull them into the email?
Will it be clear what the email is about?

When the images are turned off the only text visible at first glance tends to be things like “Trouble viewing this email?”, unsubscribe links, links to the mobile version of the site, anti-spam messages – admin, basically.  With nothing to entice your readers, will they bother reading your email?

So how do you get around this?

Bear in mind that when your images are blocked, the content of your email is shifted down.  So try and place your headlines above images in the content, that way it will show up even when the content is pushed down.  Also remember to make as much use of rich text in your emails as possible.  Rich text is displayed even when images are blocked, so (even though including text in images may look impressive) include some rich text in the headlines to make sure your message still comes across.

Another important consideration is that many of your recipients probably have a preview pane activated in their email accounts.  The preview pane is a window in their inbox that previews the contents of a selected email – as I’m sure you can imagine, that makes it a key player in piquing the subscriber’s interest enough that they read your email.  The key to pulling readers into your preview pane is to check what effect image blocking has on the contents of the pane.  Make sure that the text they see when the images are turned off is still a good indication of the content of the email, and that it’s enticing enough to convince them to read further, or at least enable the images.
Keep an eye out – we’ll be launching an email preview feature soon that will enable you to preview what your email will look like when your subscribers open them in various email clients, including what it looks like in the preview pane.  It will help you assess how to go about your email design, but in the mean time, I’m sure following the tips above will help you engage more readers with your newsletter. 

Once you’re in the habit of testing how your email renders in different email clients, you’ll quickly learn how to work around image blocking.  Remember that there is a person on the receiving end of your newsletter – and people are often too busy or simply not interested enough to read your email.  By taking this into account when designing your newsletter, you can make a dramatic change in your campaign statistics.

If you missed last week’s interview with our Head of Design, take a look.  He gives some excellent professional tips on how to approach your newsletter design.

Ruan Benade, our Head of Design, answered some questions frequently asked by email marketers when trying to decide on a design for their email newsletters. We picked his brain for design and technical tips, handy resources and advice on how you can design your newsletters for optimal results.

Do I need to be a designer to create and edit an email newsletter?

Yes and no. Firstly we need to differentiate between “designing” and “building” a newsletter. The former requires some creative skill and an ability to use design principles to create a striking and engaging experience, the latter requires knowledge of HTML and CSS as well as experience in how emails render differently to say, websites.

So, to answer the question, it will certainly help to be a designer if you want to design great looking websites… or to have experience in coding to build emails that display consistently across all browsers. On the other hand anyone can edit or modify an email newsletter using the kind of software that GraphicMail offers.

I want to design an email that’s visually appealing for my subscribers.  How do I go about that?

A designer will use a combination of layout, graphical elements, color and images to make an email visually appealing. A novice will often cram a design full of graphic elements and colors in the belief that it lends impact, whereas the extra clutter will ironically end up detracting the user from the true content and images. So my advice to non-designers would be to keep the layout very clean with maybe a splash of color here and there, and use images. Great images combined with large catchy headings are your best weapon. Also remember to place your best image at the top of the newsletter where it will be seen first.

Do I use more images, or more text, or equal amounts of both?

There is no general rule here. A photography business or online product shop will feature more images, whereas a financial company will have more copy. It is important here to know your market and to understand what they are looking for in your newsletter. If you are showing pictures of generic smiling business people to your clients, when they are in fact looking for up to date market info then you are not providing valueto your subscribers.

What are my options online for buying or sourcing "free" images?

You can buy images for a set fee (royalty free) from the bigger online image banks like www.gettyimages.com or you can use pre-purchased credits to buy images from the new generation of cheaper image banks like www.istockphoto.com or www.123rf.com. These sites sell photos, illustrations, video files, sound files and even flash files. Keep in mind that the cheaper images are not yours exclusively to use and so your competitors are free to go and use the same images that you have just spent days building a campaign or look with. Here you truly get what you pay for.

Most images online are subject to standard copyright laws. “Free” online images are usually licensed under the “creative commons licensing agreement” which has various requirements, for instance that you have to credit each picture you use.  (Read more about that here.) You can find free images supplied by the public on sites like www.sxc.hu and www.morguefile.com.

How can I edit my images? Are there any free online tools?

Designers traditionally use powerful software programs like Adobe  Photoshop, but for simpler editing work there are a number of free online options. Check out www.sumopaint.com, www.picnic.com or www.pixelr.com. Stay tuned as we will feature a review of free online editing tools on our blog in the coming weeks.

Should my emails look as similar as possible to my website?

Your branding should always be as consistent as possible across all your promotional media whether print or online. An email newsletter or e-flyer should not try to be an exact copy of your website but a simpler introduction to what your business and website offers. Your logo, colors and corporate personality should be instantly recognizable no matter what the medium.

What should I avoid when creating my newsletter?

Needless to say avoid creating dull and uninspired email communication :)
On the technical front there are a number of things to avoid.  I would need a whole new article to cover this so that’s another blog article in the making. Generally emails need to be coded in tables and should feature inline styles as far as possible.  Don’t use floats or PNGs and avoid background images. Oh and wrap your whole email in a table or div with inline styles or Google will strip out your background color.

What can I do to be sure my email renders well across all email clients?

Be informed on what to avoid when designing and building emails. Then test the emails before sending.  There are 20+ email clients and as there are no email standards in place, they will all render your email differently. 
The most comprehensive testing option is to pay for an online testing service. You send a test email to a given address and you get to see previews of how it is rendered in all the existing email clients. One such a service is www.litmusapp.com.  GraphicMail has partnered with a trusted testing provider and will soon provide this as a paid for service.
Of course you always have the option of signing up for free testing accounts on online email clients, but that still leaves the Mac and PC platform and their respective default email clients. Not to even mention iPhone and other mobile clients as well.

Which is better: Customizing a free template or having a custom template specially designed?

A custom template designed and built by a professional is definitely the best option. This is of course a once-off cost. After that you should just save a draft and edit your draft newsletter every time you need to send.
If, however, you are on a tight budget then there is the option of modifying a free template and adding in your branding and content.

Any other handy tips you can share with us?

Always provide alt text for images. So even when most email clients block images by default you will still be able to see the alt text descriptions.
Be warned that there are still a few email clients that don’t display alt tags when images are blocked. 

Good luck!