Cheat Sheet: 10 Tips to a Great Looking Email

Web Designer, Ade Adebiyi, is here with a conveniently packed Cheat Sheet to give you the top 10 tips and tricks for a great looking email design that will get your customers clicking!
The funny thing about designing email templates nowadays is that you are guided by a primitive coding style. For me, designing and coding emails is highly rewarding, addictive and most of all exciting! I’m almost always required to think outside of the box.
From visual mock-up’s to coding, everything must be planned carefully and designed to the perfect pixel.
Before I joined SaleCycle, the email designs that I had not given much thought about (I know, terrible) had been the most difficult to code, test and fix. I know this may seem as common knowledge to you, but I have come to the realization that designing email templates and the best newsletter examples is somewhat a form of art.
As part of my recent epiphany here are some helpful tips on how to create amazing looking emails and make them appealing to your consumers!

1 Plan your email template/newsletter.

Before even thinking about Adobe Photoshop, I recommend doing rough sketches of how you would like the email to look like. This will help the design process, and really push the boundaries of what is possible in email.

2 Do your research.

There are so many problems that you will inevitably face when designing your emails, however these can be rectified early on in the design process. Join active email communities such as Campaign Monitor, Mail Chimp and Litmus to keep up to date with the latest fixes and problems.

3 Remember that Outlook is the devil.

Don’t sue me Microsoft but it’s true; using the ‘word rendering engine’ to render emails means that Outlook 2007+ became notoriously difficult for designers to tame. On a serious note, make sure to test thoroughly on all Outlook platforms as there are so many errors you will only encounter within Outlook.

4 Make your very own Pinterest mood board.

Pinterest is a great place to find email designs of a very high standard. Make a digital mood board and use it as design inspiration. I think Pinterest is a fantastic piece of social media and an excellent starting point when brainstorming ideas.

5 Blurry emails on my mobile…

Retina screens are now common place and our emails have never looked so sharp! BUT… Do you now notice a lot of email templates are somewhat blurry on your tablet or phone?? …Yeah? well it’s because of Retina screens!!

There’s a simple fix to a simple problem, just make all your images double the original size and scale it down to your desired size in your html editor.
For Example; If you want a 300px x 300px button, reproduce it at 600px x 600px and scale it down to 300px x 300px in Dreamweaver. That way it’ll look sharp on any device.

6 GMail doesn’t like black (#000000) links…

A little odd and questionable, but Google just can’t accept that some links want and need to be black (#000000). Well GMail… we can get around your little quirks by having the black links set as #000001, problem solved!

7 Have you tested it enough?

If you’re serious about your emails, I recommend you invest in a litmus subscription. It’s a lifesaver for anyone that is designing emails professionally.
Also, make sure to send yourself a full test campaign. That way you can see some of the errors that even Litmus couldn’t spot.

Finally validate your HTML in the W3 Validator. Test, Test and Test again, that’s how we do it here at SaleCycle.

8 Are your classes in upper or lower case?

Make sure to stick to one or the other. Most email clients will have no problem differentiating from the two, however some (Outlook) cannot.
td[class=PaddingMobile]{
padding-left:0px !important;
padding-right:0px !important;
}
td[class=paddingmobile]{
padding-left:0px !important;
padding-right:0px !important;
}

9 emailbg.net/backgrounds.cm

Gone are the days of vanishing backgrounds thanks to Stig over at Campaign Monitor. He’s made a nifty app that automatically makes your backgrounds bullet proof. I use it all the time when designing email templates with backgrounds. Handy for crisp and clear retina buttons!

emailbg.net/backgrounds.cm

And… 10 ALT Tags

Sometimes emails load without images. Sometimes your internet speed is slow. Sometimes your email client is having a server issue or is protecting you from unknown viruses.
This will often result in your email images not properly loading and failing to convey the desired message.

Well not with ALT Tags! Make sure to have the appropriate ALT tags in your emails and your message will still be portrayed. You can also style alt tags within the opening to improve the look further.

Care to see some?

Want to see some creative email templates and ideas? Check out our amazing Email Remarketing Look Book Below!
The Email Remarketing Look Book