By February 7, 2012graphic design, web design

This is originally  from So useful I had to copy it.

Only a few years ago people were getting rich spamming and scamming our Grandma’s and Grandpa’s AOL email boxes. Today, people are smarter and now understand that the Nigerian Prince really doesn’t want to give them ten million dollars and only if you claim it in the next ten minutes. But email creatives are still a very important part of legit online marketing campaigns of high quality products and services.

Email ads and newsletters are still big converters mainly because you can directly reach your target audience and keep them informed of new products and services you are offering. However, even though people are smarter, the methods of building and rendering email creatives are not. Tables layouts, catchy subject lines and clear call to actions are still the email creative standards so let’s talk about some ways to design and build better email creatives and campaigns.

I’ve sprinkled great email creative examples throughout the article that demonstrate these principles and hopefully offer some inspiration for your next email design project.



There is a lot of trial and error when it comes to developing a successful email marketing campaign, but there are a few elements that have been proven to work time and time again. Despite whether you are sending out a monthly newsletter to your users or sending out a creative to promote your new product release, these elements will all contribute to a successful campaign.

  • Attention-grabbing subject line
  • Relevant, useful content
  • Beautiful imagery
  • Consistent branding
  • Strong call to action
  • Social icons and/or feeds

The first rule to good email marketing is a strong, attention-grabbing subject line. Email marketing is a two step process: click to open the email and click to your site. If the subject line isn’t compelling or interesting enough, no one will even get past the first click. You know your customers/users best, so make sure your subject line grabs their attention and gets them past the first click.

After the customer/user clicks to open the email because of your awesome, ridiculously interesting subject line — it’s now your job to get them to that all important second click. The first thing to get them there is content, relevant and useful content. Whether it’s a newsletter or ad, the content needs to be relevant to them, it needs to be useful and it also needs to be informative enough (but not too much) so that your users will trust your expertise and want to learn more.


Along with relevant content, images are an excellent way to communicate your message and an easy way for your customers to engage with the email quickly. It’s a myth that images in emails are worthless because “most” people have images turned off or that “most” email boxes don’t render images properly. We’ll discuss this more below in the design section, but “most” people I know don’t even know you can turn images off in the first place. Don’t be afraid to use images, cool fonts or anything that will catch the user’s/costumer’s eye.

Branding is the best way to tie your site, service or product into your email creative so make sure your name is all over the thing. Consider the email creative as a mini website. Brand the header with your logo and/or name, brand the footer with your logo and/or name and use your color scheme throughout the email to stay consistent.

Without a clear call to action the email creative is worthless, despite your attention grabbing subject line, informative content, its beautiful imagery and clear branding. Use contrasting buttons to guide the user to the next step. Take advantage of visual hierarchy methods to guide the user to where you want them to go. Any design methods you use to entice the user will be worthless if they don’t know what the next step is or where they need to go.


Another thing to consider is building trust with your new customer/user. People don’t buy into scammy pitches and cheesy testimonials anymore. The best way to build trust is to show them that other people use your product or service — hopefully their friends. Add your social icons or even feeds to your email creatives so that they can see you’re not just some sneaky snake oil salesman. Social feeds and social proofs show to your future customer/user that you care about your product or service. Give them a chance to see what others are saying about you.


Designing and building an email creative can be a beast — and you thought it was hard to build a website browser compliant. Try email boxes that don’t even render CSS. The first rule of email creative design is just to make things simpleand the second rule is to keep things simple. But we all know creating simplicity is the hardest thing to do.



So, forget everything you know about modern web design layout and stay away from using any CSS if possible. If you do use CSS it should be inline. I know, it goes against everything you stand for as a web designer. But with so many email rendering agents out there, it’s impossible to know whether any of your floats or display properties will render correctly. Don’t guess, just fall back to your old table layout, HTML only design layouts — even if it breaks your heart.


Since CSS layouts aren’t cool anymore and table layouts are back in now, stick to grids and columns so that your creative will be presented in the way you designed it — no matter what email box your user is using. Plus, grids are all the rage in web design these days so average users won’t know that you’re using tables to lay it out.

Besides making it easier for you to render your email creatives, grids also offer a better way to present your content and layout your information and images in a clean and methodical way. Columns and grids separate and present content in an easy to read and easy to scan way, so that your user doesn’t have to work hard to pull your message out.

Don’t Skimp on the Images


Like we talked about above, images are awesome elements for email creatives, so don’t be afraid to use them. As long as your images are hosted on a good public URL and are embedded via the HTML img tag, you’re safe, so go ahead and use them. Keep in mind, email creatives are kind of an older beast so there’s really no need to have live text unless where necessary. It’s totally cool to use embedded text in images so take advantage of this and be as creative as you want.

Because CSS can be hard to work with in emails and because tables are also hard to work with, try to avoid background images. Usually, you’re safe to use a body background or table background, but beyond that try to use inline images so you don’t run into more bugs.

Don’t forget to optimize your images also. Despite the fact that your images are most likely gonna be hosted on your public server somewhere, don’t make the images so large that they take a second to load. Once your user opens that email make sure they see those beautiful images and not just the dreaded “x” mark where the image should be. Stick with JPGs and GIFs instead of PNGs — some viewers still don’t like PNGs… I know, pretty lame.



That is the max width your email should be. Don’t go any wider than that. Unlike the flu browser, most email clients don’t have the luxury of wide screens. Typically, most clients use up to about 600-700px of their real estate to the email viewing window so avoid going too wide. Also, consider designing your table layout to be flexible (if you can) so that when someone shrinks their email client they will still be able to view your entire email.

Quicker the Better


Beyond optimizing you images and content so that your email creative loads quickly, design you email to be scanned quickly by the reader. Take advantage of visual hierarchy to guide the user through your email, use bullet points and headers, use infographic style imagery or other visual cues to present you message and always design a clear call to action.

Basically, you want your user to scan down your email in a few seconds and still understand the overall message you’re presenting. If you can grab their attention in those few seconds, they may stick around to read the email in further detail and hopefully click through.

Test, Test, Test


The last thing you want to do with your email creative is to test it to death. Load it up and hit it in as many email clients as humanly possible. Although it may not be possible to test it in every inbox, the more the better. Even if you think you have everything covered and you’re confident that everything will work beautifully, you’re guaranteed to find a bug or two in a few clients. If you just don’t have time to test a bunch of inboxes, make sure you hit the major web clients like Gmail, Yahoo and Hotmail — then make sure you hit the major desktop clients, Outlook and Apple Mail.


Okay, I didn’t forget about mobile email boxes — well, I sort of did. Mobile inboxes are just an entire beast all by themselves so they may actually require a whole new article to tackle them. But just consider how your email will be presented on a mobile phone. Make sure you are using proper alt and title tags for your images if you embedded important text into them. Like I said, mobile email creative best practices probably deserve an entire article to themselves so stayed tuned for that.