# data[].attributes.attachment_link.readable_text
While a lot of online communication has moved to social media, email is still a very important part of any online marketing campaign. And when we think of marketing emails, what generally comes to mind is HTML email, rather than plain text.

Designing for email is much like designing a simple webpage, but there are some key differences you need to take into consideration. You also need to keep in mind that email is a push, rather than pull, communication.

People often get emails at an overwhelming rate, and not always when it's convenient for them to look at them. That means you have mere fractions of a second to catch their attention before they move on to the next message in their inbox (unlike with a website, which they've chosen to visit at a particular time).

But as long as you keep that in mind-that you have only an instant to catch your reader's attention-you'll have a much easier and smoother experience in designing effective emails.

Mobile or bust

So many people are accessing email from a mobile device these days (nearly half of all emails are opened in mobile apps), that it's become pretty pointless to spend a bunch of time designing beautiful emails that don't display properly on such devices.

After all, if the email doesn't look right when they check it on their phone, what are the chances your subscribers are going to look at it again when back at their desk? I'd wager pretty slim. In fact, most of them are probably just going to delete the email, or worse - unsubscribe.

There are two ways to go about designing for mobile. You can create emails that resize to fit the reader's screen, which can be perfectly adequate for some simple designs. Or you can create a responsive email design that will adapt to different screen sizes.

There are advantages and disadvantages to either approach. Emails that resize are fairly easy to code, and will tend to work on virtually any device. But they work best with very simple email designs that can handle being viewed at significantly smaller than desktop sizes.

Responsive designs are much more complex to code, and aren't supported by every mobile browser (though support is likely to continue to improve in the future).

Responsive design

Responsive designs are likely to be more practical for most of your HTML emails than layouts that simply resize. This is because on very small screens, emails that have simply been shrunk will almost certainly become very difficult to read.

We've already discussed why mobile-friendly emails are vital, but here are a few things to keep in mind when actually designing those emails. These are the things that should be triggered for mobile layouts, and can be adapted for the larger-screen versions of your emails.

1. Your layout should be fairly narrow: somewhere in the range of 500-600 pixels is standard. This will make them more readable on both desktop and mobile devices, with less chance for your layout to go all wonky when it's resized.

2. Make sure your fonts are large enough. Be aware of what the minimum font sizes for various platforms so that your fonts aren't upscaled (which could affect your layout). For example, iOS uses a minimum font size of 13 pixels.

3. Clickable areas need to be tap-friendly. That means making them big enough and isolated enough from other links so that a user can easily activate them on the first try (because you may not get a second).

4. Don't hesitate to use display:none to hide unnecessary elements on your mobile layouts. What is user-friendly on a desktop or even a tablet becomes annoying clutter on a smartphone. Less is definitely more on smaller screens.

It's worth taking the time to sketch out wireframes for both your mobile and desktop email versions before you start coding. Pay careful attention to where your call-to-action and other important information appears on the mobile version especially.

Typography considerations

While a lot of designers focus on the graphical content of HTML emails, the typography is even more important than on many websites. After all, considering how many email clients prevent images from loading initially, some of your email recipients may only ever see the typography.

Consider using large type sizes for better legibility regardless of screen size. Also keep in mind line lengths on various screen sizes, and make sure that they're not too long (which can make it hard for the eye to travel from one line to the next without losing its place) or too short (which just makes more scrolling necessary).

Be sure to use headings and other typographic formatting to make your email content more scannable, especially if your emails are more than a couple of paragraphs.

Overall, email typography isn't much different from web typography in general, besides the previously-mentioned part about it being more likely to be the first and/or only thing your readers see.

Different emails for different purposes

There are a lot of different kinds of emails you may be sending out to your subscriber lists (or designing for clients). Each one serves its own purpose, and each one should be designed in a way that best serves that purpose.

Newsletters

One of the most common email types is the newsletter. These often consist of a lot of links, frequently with short bits of text accompanying them, or they consist of longer articles. In either case, there's a good chance that there won't be a single call-to-action present, and instead there may be quite a few links to click.

This presents a unique challenge, as designers and content creators have to still decide on some kind of priority or hierarchy for the content within the email. In many instances, this will mean one featured story or link to draw the reader in, with additional content given lesser weight.

Plastyk has a great newsletter design that's fun and engaging.

Notifications

Another common email type is the notification email, also referred to as a trigger email. Think of the emails Facebook sends when someone sends you a friend request or Twitter when someone follows you. Although notification emails can also be announcements. These emails are notifications, but they're also meant to trigger an action on your part (in these cases, checking your account). These emails are generally very short and to the point, with a bold call-to-action.

Here's an announcement email from Proper Labs.

Transactional emails

Transactional emails are sent when a user interacts with a website or company in some way. This could be making a purchase or signing up for something, or it could be triggered by something like when a user abandons their shopping cart without completing a transaction. These emails serve to either provide information (in the case of something like an order confirmation) or to entice the visitor back (like with an abandoned cart).

Here's a good example of a transactional email from One Eyed Cat. It's a good example of how bricks-and-mortar businesses can use email marketing.

Marketing emails

Marketing emails are sent when a company wants you to do business with them. These could be notifying you of a special offer, a new product, or something similar. These are often the emails that incorporate the most "design" out of the regular emails a company might send.

These emails are meant specifically to get a subscriber to take some kind of action with a company or website. It could be signing up, or making a purchase, or something similar. The call-to-action in these emails is by far the most important element, though obviously other elements need to support that call to entice readers to take the desired action.

Community has a great marketing email that's another good example of how bricks-and-mortar businesses can use email to engage their customers.

Email design best practices

While email design and web design share many of the same attributes, there are some key differences you need to keep in mind when designing for email. While most of them are easily adapted to, they're still important and make your emails much more effective.

It's all about the content

Content is always important, regardless of what you're designing. But with email, and particularly with emails that are likely going to be viewed on a mobile device, keeping your content short and to-the-point is even more vital. You have a few seconds at most to engage your reader, and if those first few seconds are wasted on extraneous information that isn't useful, then you've lost them.

Make sure that your content is as concise and clear as you can make it. Efficiency is key, and if your reader can't very quickly discern exactly what your email is about and exactly what you want them to do, then you're wasting your time.

Clear call-to-action

The call-to-action is arguably the most important part of any email design. Your email obviously has some purpose, whether that is to get readers to sign up for something, read something, or buy something. And your call-to-action should make it very clear what that thing is, and entice your reader to do what you want them to do.

Call-to-actions most often come in the form of buttons. It should be immediately identifiable, and not too far down the email (after all, you only have a few seconds to get their attention, so placing your call-to-action where they'll see it within those few seconds increases your chances at being effective).

Make sure that your call-to-action is tap-friendly, too. That means it needs to be large enough that it's easy to click on a mobile-device, and that there are no other links close enough to it that they might be accidentally clicked.

Test early, test often

Make sure that your emails are all fully tested on a variety of devices and clients. You may want to start testing your layouts, etc. right from the beginning, but be sure to test them throughout the design process to make sure that they remain bug-free.

Testing often also means it's likely quicker to track down bugs if they do crop up, since you'll have an easier time remembering which changes you've just made.

Understand exactly what each of the major clients and devices supports, and exactly where they fall short, and either find frameworks and boilerplates that address those shortcomings, or design around them.

Make use of pre-header text

Pre-header text shows up in many email clients as a preview to the message. View this as nearly as important as your email's subject line. Use it to entice your reader to actually open the email. This can be especially helpful since many email clients cut short long subject lines.

Link to the web-hosted version

Make sure that you include a link to the web-hosted version of your emails, in case someone is genuinely interested but having trouble viewing it on their mobile device or in their email client. Many email services allow you to use a tracking link for this (and other links), so that you can see who's clicking through.

Keep it simple

While you can design complex layouts with tons of graphics and stylized elements, you increase the risk that your emails won't show up as you intended for all of your readers.

Simpler designs and simpler layouts mean that your emails are more universally readable on devices without a ton of workarounds and hacks. While complex designs can be more aesthetically pleasing to some, it's often not worth the additional complications that they present for minimal tangible benefit.

Templates and frameworks

While coding an HTML email entirely from scratch is completely doable (check out our previous article " How to design a responsive HTML email " for details on the technical aspects), using a framework or boilerplate to get started, or even a pre-made template, can greatly speed up the process and make it more accessible to the beginning designer.

Cerberus

Cerberus is a set of responsive email patterns that work even in Outlook and mobile Gmail. You can use the code blocks together or separately. There are two versions: one that relies on media queries and one that doesn't.

Ink

Ink is a responsive email boilerplate from Zurb. The emails created with Ink work on any device and client, even Outlook. It's simple enough to dive right in, as well as being fully documented.

Responsive email templates built on Ink

These Responsive email templates built on Ink are a great place to start with Ink. There are four templates: a basic single-column, a hero-image email, a sidebar layout, and a sidebar-hero hybrid layout.

Responsive email templates

Zurb has some additional Responsive Email Templates, including a newsletter template with a hero image found on this page. It also includes some other handy info about using the templates.

Responsive Email Patterns

Responsive Email Patterns is a collection of patterns and modules for creating responsive emails. It includes patterns for layouts, navigation, lists, media, and more.

Really simple HTML email template

The Really simple HTML email template is exactly what it says it is: a super simple HTML email template with a very basic design. It's a single column, with a call-to-action built in, and a clear-cut purpose.

Template Builder

The CampaignMonitor Template Builder lets you build free HTML email templates in just a minute. The results are mobile-ready, fully tested, and can be used directly in CampaignMonitor or downloaded for use elsewhere.

Free Email Templates

These Free Email Templates from CampaignMonitor are free to download and use whether you use CampaignMonitor or not. There are tons of styles and designs available, over 100 in all.

HTML Email Boilerplate v 0.5

The HTML Email Boilerplate is a good starting point for creating emails. It contains no design or layout, which helps avoid many rendering problems in major email clients.

Email Boilerplate

This Email Boilerplate from Emailology includes all the basics you need for setting up your HTML emails, like CSS and HTML. It's commented to give you usage instructions.

Antwort

Antwort offers bulletproof responsive layouts for emails that adapt to various client widths. It supports all major email clients, including Outlook and Gmail.

GraphicMail Newsletter Templates

GraphicMail offers up around 100 free newsletter templates. A free account is required to use them.

ThemeForest Email Templates

ThemeForest offers up tons of premium email templates, ranging from $6 to $19. Premium templates are sometimes easier to use, and can have additional features that can be hard to come by in free templates.

Stamplia

Stamplia offers a premium template marketplace, where you can buy and sell templates for newsletters, transactional emails, and more.

Email tools

e-Newsletter WordPress plugin

The e-Newsletter WordPress plugin offers up professional management of your email newsletters and subscribers right in your WordPress admin interface. While self-hosting your email service can present its own set of challenges, it also gives you full control and eliminates monthly service fees, which may be quite valuable for many businesses.

Bulletproof background images

Bulletproof background images from CampaignMonitor is a simple tool for coding your email background images. Just put in the URL of the background image, the fallback color, and whether it's for the full email body or just a single table cell, and it gives you the code.

Bulletproof email buttons

Bulletproof email buttons from CampaignMonitor lets you design beautiful progressively enhanced buttons for your emails. They're perfect for calls-to-action.

Litmus

Litmus is a set of tracking and testing tools for email. It includes email previews, analytics, and spam filter testing tools. It starts at $79/month, with discounted annual plans.

Litmus Scope

Litmus Scope makes it easy to create a clean, web-based version of any email that you can then share. It's available for download, as well as in bookmarklet form that works with any webmail.

Examples and inspiration

There are tons of email galleries out there that you can check out for inspiration. But here are twenty awesome emails to get you started!

Whalers

St. Theresa Auction

Online Store Guys

Inspirations Point

Everywhere

Sphere

Form Function & Class

Boden

Bon Appetit

Sevenly

Path

Zombie Survival Guide for Email Marketers

Fooda

Designer News

Charity: Water

EwerkNews

Interworld Plastics

Zehno

PSD Freebies

WalkieTalkie

More galleries to inspire you

Really Good Emails offers up categorized email designs, many with commentary about what makes them great.

Email-Gallery lets you browse email designs based on color, business type, and more.

CampaignMonitor's Email Inspiration lets you browse by number of columns, and email type (announcement, newsletter, or invitation).

Look What You Can Do, from MailChimp, offers up plenty of emails sent through the service for inspiration.

HTML Email Gallery offers a chronological gallery of email designs.

The Email Design Gallery is a Tumblr blog that showcases great email designs from a variety of sources.

Beautiful Email Newsletters is a categorized email gallery that also includes a search function.

Email services

Email services offer various features, but they pretty much all handle managing your subscriber lists and sending out emails on your behalf. Many have additional tracking and automation features, too. Most of these require no contract or commitment, though some offer discounts for prepaying longer terms.

ConstantContact

ConstantContact starts at $20/month for basic email cmapaigns that includes contact management and social sharing, with more expensive plans that include additional features like detailed tracking.

MailChimp

MailChimp offers a free "Entrepreneur" plan that supports up to 12,000 emails to 2,000 subscribers, with paid plans that let you manage much higher volumes.

ActiveCampaign

ActiveCampaign starts at $9/month for up to 500 contacts, with plans going up from there, including enterprise plans that offer dedicated account reps and additional services.

GetResponse

GetResponse has plans starting at $15/month for up to 1,000 subscribers, though they do offer discounts for annual billing.

AWeber

AWeber lets you get started for just $1 for the first month, with months after that starting at just $19/month for unlimited emails to up to 500 subscribers.

Amazon SES

Amazon SES (Simple Email Service) is an outbound-only email-sending service. If you're already an Amazon EC2 user, you can send up to 2,000 emails per day for free. Otherwise, email messages are charged at $.10 per thousand, with additional fees for data transfer and attachments, making this one of the most affordable email sending options.

Emma

Emma offers plans starting at $45 for unlimited emails for up to 2500 subscribers. They also offer a 20% discount for non-profits, and a 20% discount for annual prepay.

HubSpot Email

HubSpot Email offers a ton of tracking and tools for getting more subscribers, and is part of the overall HubSpot service, which starts at $200/month for your first 100 contacts (and $100/month more per extra 1,000), and goes up from there.

GraphicMail

GraphicMail offers plan pricing based on the number of emails sent or the number of subscribers, with pricing for the former starting at under $10/month, and the latter starting at just $25/month.

Conclusion

While plain text emails can be perfectly sufficient for a lot of communications, they don't cut it with a lot of others. Understanding how HTML emails work, and knowing the tools and templates available to you to make creating them a lot easier, is vital for virtually any designer.
Featured image/thumbnail, iPhone image via Kārlis Dambrāns

# data[].attributes.attachment_link.title
The ultimate guide to email design | Webdesigner Depot

# data[].attributes.attachment_link.description
While a lot of online communication has moved to social media, email is still a very important part of any online marketing campaign. And when we think of marketing emails, what generally comes to mind is HTML email, rather than plain text.

# data[].attributes.attachment_link.readable_text
Of all the different ways we have to communicate with our customers, email has the potential to be one of the most effective and engaging. Email is a channel you can fully control, a way to speak to your audience one-on-one, and a medium that allows for endless creativity.

Newsletters and email campaigns are powerful content marketing tools, though their potential is easily lost - deleted, unread, or unopened. Average open rates hover at about 25 percent across industries, while click-through rates are under 5 percent. But there are ways to rise to the top, get read, and drive readers to your desired course of action.

That's where great design comes in.

Effective design grabs attention, directs the eye and - most importantly - motivates your reader to positively respond to calls to action (CTAs). Your email content should educate, inspire, and add value to your subscribers' inboxes. But the best of the best looks great, too.

To bolster any aesthetic and drive more click-throughs, consider these five design elements in your email newsletters:

Layout

Your layout - the backbone of any design - determines the flow of your content and the order in which your readers consume information. A boring block of text is easy to ignore, while creative design moves the eye where you want it to go.

Email templates are generally broken up into a few horizontal layers, so there's lots of room to explore and experiment, whether you're a consumer-facing or B2B brand. Just make sure that what's above the fold is intriguing enough to keep readers going.

Construction giant Caterpillar immediately grabs a reader's attention with a strikingly simple hero image and header. An arrow-like graphic pulls the gaze down to eye-catching features and an exciting brand story, before ending with a strong call to action - complete with an attractive CTA button.

The fact that it's a button is key: Email marketing company Campaign Monitor found that button-based CTAs increased their click-through rate by 28 percent over link-based ones.

Tip: Email marketing company MovableInk's last U.S. Consumer Device Preference Report found that 66 percent of emails are opened on a mobile device, so make sure your templates are responsive or single column designs that can easily be read on smartphones and tablets. And don't overdo images and text. With the right balance, a minimal email can look magnificent.

Color

As with any design project you undertake, the use of color in email marketing helps sets the tone of your message and has the potential to elicit a strong emotional response and a deep sense of familiarity.

According to a study from the University of Loyola, Maryland, color even increases brand recognition by up to 80 percent. And it makes sense. Think of the most popular brands you know, and they'll all have a color association. Starbucks? Green. IBM, Hewlett-Packard, and Dell? Blue. Target? Red.

And easyJet? Orange, of course.

To commemorate its 20th anniversary, the airline sent out an innovative email campaign that leveraged user data to deliver a personalized travel narrative. easyJet's signature shade directs the eye throughout the creative graphic, made up of fun facts about the reader's past journeys. Attractive icons, dreamy, blue-toned images, and warm accents complement the brand's orange beautifully. Rather than a sales pitch to book another holiday, the story's CTA prompts readers to continue their adventures with a look at easyJet's top 20 European destinations.

The results of this visually powerful and incredibly successful example of personalized email content marketing? According to the brand, among the 12,473,608 unique emails that were sent, open rates "were more than 100 percent higher than the average easyJet newsletter - with 25 percent higher click-through rates...[and] across all markets, 7.5 percent of easyJet customers who received the fully personalized version went on to make a booking in the next 30 days."

Tip: Whether you're featuring one main color or mixing it up, be true to your brand and try to develop consistency to boost that instant recognition. And when it comes to other visuals, take note: "Not all [email service providers] support images in email or they turn off the images by default, so don't forget to add an alt text to all your images," writes Kevin George, Head of Marketing at EmailMonks. "For background images, add a fallback color."

Negative Space

Negative space is a powerful visual tool, defined by white areas, contrasts, and striking silhouettes.

Awareness and smart manipulation of this design element allows your content to breathe, and creates unique forms that keep the eye focused and intrigued. Multiple images and large lines of text can quickly overwhelm a reader in an email setting, especially considering that most people read emails on smartphones or tablets.

A little negative space goes a long way, especially on smaller screens.

"A designer's main goal is to make an email look simple and to un-clutter the visual frenzy that often pollutes the message," writes Mike Nelson, Co-founder of Really Good Emails.

Spread out images and text and remember that a healthy amount of white space between headers, characters, blocks of text, and visuals is necessary for smooth content consumption, allowing the brain to easily scan and break down information.

In this example, Sephora goes for a playful composition that is serious about white space. The black and white headlines, striped wrapping paper, and cosmetics containers make the eye dance toward the product information and special offer below. Notice the spacing between the lines and letters of "New at Sephora" and the placement of the powders; none of it's an accident. Surprising, however, is the fact that the entire email functions as a button leading back to Sephora's homepage, rendering the many product CTA-lookalikes vague, useless, and potentially frustrating.

Tip: Little extras like the colorful cosmetics smears and spills, as well as the hand-written note and stamp-like graphic only add to the email's fresh, fun look. Consider how you might apply this kind of creativity to your email content, but remember that the main purpose of your design is to motivate readers to click on your CTA. Make sure as little as possible stands in the way between them and conversion - and ensure that the landing page is relevant to your email's content.

Typography

It's amazing how much personality a typeface can infuse into a brand. (And how quickly a wrong choice can sour things.) Brands typically have set fonts, but sometimes there's room for improvisation for special occasions or campaigns.

When introducing a new product to resellers, Jack Daniels borrowed the signature fonts from its bottle to create a compelling typographic display. The designers limited the "Tennessee" script to the email's headline and stylish CTA button, while the sub-header plays with capital and lowercase variations. The same serif typeface is used at a smaller size for the body text, keeping the total fonts at just two. Given their flair, any more in the mix would be too much.

Tip: Less is more. Don't go too crazy; limit yourself to three or four fonts and colors per email. Or, keep it simple and stick to two. Typography should complement your copy, not overpower it, especially when it comes to your CTA. Strive for a mix that stands out and is clearly visible and legible.

Animation

That you need stunning, carefully selected imagery in your email marketing goes without saying.

But what about animation? Movement attracts attention, and since email service providers have yet to support video, including a GIF still reads as a novelty. You can fit a lot of information into five to ten stills, and people tend to watch them all, thanks to the immediacy of the medium.

Whether you're just adding a bit of sparkle to your campaign, or using the tool to display a lot of information in a small amount of space, GIFs have enormous storytelling and engagement potential.

This example from home goods brand Serena & Lily uses a GIF that combines images and text to alternate between inspiring tips and a gorgeous dose of interior design eye candy. Reading like a luxury fashion magazine brought to life, the beautifully executed campaign invites viewers to explore beyond the confines of an email message. "CREATE THIS LOOK >" in all caps provides an exciting CTA that goes above and beyond the standard "Shop now" or "Learn more" routine. And with an aesthetic like this, it's hard to say no.

Tip: Anyone can put a GIF together, but that doesn't mean it's going to be good. Make sure it's purposeful and relevant before including one just for the sake of it. When you're ready, there are lots of tools out there to help you create the perfect GIF.

Best in Show: Plated

This email from Plated, a meal kit delivery company, perfects each design element presented here. Above the fold, a pretty GIF introduces the message, stopping after one round of animation, instead of looping like most. The simple layout uses a gentle zigzag to guide the reader through spring's finest ingredients, cushioned by ample white space and enhanced by simple, color-forward visuals - each of which functions as a button linking back to further information on the Plated website. Meanwhile, the accent green-colored typewriter font adds a little something extra to the copy, repeating the shade in CTA links at the top and bottom of the message as well as in the large, inviting button at the end.

Tip: While the use of several CTAs may be somewhat controversial, email marketing expert Aaron Bolshow found, after years of testing, that "using multiple CTAs routinely lifted engagement by a minimum of 20 percent." Include visible links and striking buttons where you see fit; just make sure they take readers somewhere specific and relevant - both to you and your would-be customer.
Anastasia Dyakovskaya is a NewsCred Contributor.

# data[].attributes.attachment_link.title
5 Elements of Successful Email Marketing Design [EXAMPLES]

# data[].attributes.attachment_link.description
Of all the different ways we have to communicate with our customers, email has the potential to be one of the most effective and engaging. Email is a channel you can fully control, a way to speak to your audience one-on-one, and a medium that allows for endless creativity.

# data[].attributes.attachment_link.readable_text
Email isn't going away. It's here to stay. In the same vein, email newsletters are becoming more popular (and more important) than ever.

If you're wanting to reach potential (and existing) customers, newsletters are a great way to spread your message to a large audience - whether it be upcoming projects, company news, and other business-related information. Also, it's super cost effective.

In this tutorial I'm going to walk you through how to create your own email newsletter template in Adobe Photoshop, and we're going to be using some common design patterns that I've found to be very effective.

After you've completed this design process, you'll be ready to code and style this template. Here's a link to the post on coding an email newsletter. Let's go!

Here's an image of what the email newsletter will look like, when we're done with the design phase:

So, as a general rule of thumb, it's best to design your newsletter with a fixed width instead of a fluid/liquid layout. Don't know the difference? This article should clear it up. This will prevent horizontal scroll bars, resulting from not using the full width of the screen. Design your newsletter with a width of around 550-600px and make sure the important information is within the top 300-500px of height as this is the size of an average "preview pane" in most desktop email clients.

Open up Photoshop and create a new document with a width of 800px and a height of 1000px with a resolution of 72dpi. Be sure the color mode is RGB.

For the background I filled it with a light gray. I created a container 600px wide to house the main content. I chose to fill it with white and positioned it in the center of the document.

I added this notice to the top of the newsletter using the Myriad Pro font, 10pt size. It's important to give people plenty of options of how to view your email as some email clients might not download images from an email by default. To improve accessibility, always include a link to view the email newsletter in a web browser.

In this tutorial I'm creating an email newsletter called The Pet Digest to compliment my new blog called The Pet Anthology. The goal is to keep interested readers up to date with the latest goings on through a weekly bundle, delivered to subscribers. Since the branding on my blog has already been established, choosing the fonts, color, and graphics of my newsletter should be easy.

The above image is the header of the blog. I'm going to retain the look and feel while making only slight modifications. I start by selecting and dragging the mascot over into the newsletter template. From there I grab the name and slogan and drag them onto the new document as well. With some minor revisions to the text, the newsletter looks like this:

The fonts I used were: Slab Tall X for the words Pet Digest, Champagne & Limousines for the words Our Weekly Bundle, and Learning Curve for the.

Start by creating another rectangle that's 600px wide under the header and extend it close to the bottom of the page.

I then gather the content that will be featured in the coming weeks newsletter. Again, borrowing the design attributes already laid out in my blog The Pet Anthology, I create the heading using Museo Sans, drag and drop in the main image as well as copy and paste the article text. A dotted border placed underneath will separate each article field.

I then duplicate the first entry twice and move them down to fill out the rest of the spots for this newsletter. I'll place the new content in the duplicated spots shortly.

Using guides, I insert the remaining two entries and erase the duplicated content.

I want to include an area for social network and RSS icons, as well as the ability to let the subscriber share the newsletter with friends. I start by creating a rectangle 252px wide and include text to encourage the subscriber to follow us. I use these social network icons, changing the colors around to reflect my branding. Keeping in mind usability of e-newsletters I decide to keep things simple.

I then duplicate the rectangle and place it to the right, including the Share this with you friends text in the Museo font, on top.

To wrap things up, I create the footer which will allow you to get in contact with me and a link allowing you to unsubscribe from the newsletter. Every newsletter needs to have a link or a button to allow the reader to freely unsubscribe from the newsletter if they want to.

That's it! Hopefully this tutorial gave you a good idea of how to design a functional email newsletter. Let me know if you have any comments or questions about the design process!

Once again, here's a link to the post on coding an email newsletter.

# data[].attributes.attachment_link.title
How To Design an Email Newsletter Template in 7 Simple Steps

# data[].attributes.attachment_link.description
Email isn't going away. It's here to stay. In the same vein, email newsletters are becoming more popular (and more important) than ever. If you're wanting to reach potential (and existing) customers, newsletters are a great way to spread your message to a large audience - whether it be upcoming projects, company news, and other business-related information.

# data[].attributes.headline
Examples of good email design and layout

# data[].attributes.subject
Examples of good email design and layout

# data[].attributes.attachment_link.readable_text
When you're an email marketer, your to-do list often looks like this: Generate opt-in leads, segment your lists, set up lead nurturing workflows, draft clear and concise email copy, check your emails for deliverability, optimize for plain text and HTML, and so on.

Geez ... isn't there any fun in email marketing anymore?

Thankfully, there are plenty of email marketing geeks out there (ourselves included) that do think all of that's kind of fun. But these less glamorous aspects of email marketing -- though critical to your campaign's success -- don't paint the entire picture of what amazing email marketing really is.
There are brands out there that have also figured out how to create emails that are pretty darn beautiful. While plain text or bare-bones emails can still be extremely effective, sometimes you want to amaze your subscribers with creative, captivating, or delightfully understated email design.
If you're looking to dabble in something a little more adventurous for your next email marketing campaign, check out the examples below for inspiration.

Email Newsletter Design Examples

1) Collaborative Fund

In design, red and yellow serve as powerful color choices. While red is known to convey power or passion, yellow is often considered both bright and energizing.

Although many companies use a big block of color at the top of their newsletters to draw people in, the folks at Collaborative Fund took it a few steps further by combining red and yellow bursts of color throughout the whole email. Pretty powerful, right?

Color aside, they leveraged clean divides to separate these blocks, while incorporating different textures -- like that crumpled paper -- to create a really compelling experience.

2) Starbucks

This newsletter from Starbucks covers a lot of information: instructions for the pour-over method, a call-to-action to shop for a new product, recipes for summer floats, and so on.

To make this more easily scannable, the folks at Starbucks paired these short descriptions with high quality images. (You can practically hear the coffee being poured over ice in the first image.) Like the Collaborative Fund example, they also used clear, horizontal divides to separate each topic.

In addition, we really like how they incorporated the Pinterest logo and the Instagram logo alongside two of the calls-to-action. These logos support the text by setting the recipient's expectation up front. In other words, they know that clicking through to browse more recipes will ultimately direct them to Pinterest.

3) InVision LABS

Here's a much more concise email from InVision, which includes a clean design and an eye-catching color. Thanks to that darker blue background, both the call-to-action and the white box near the bottom of the email really command attention.

Additionally, the fanned out product images help the recipient understand what the announcement entails before diving into the explainer copy.

The best part? The colorful experience doesn't stop with the email. The bright blue color is carried through to the corresponding website, making this a strong example of seamless branding.

4) GrubHub

This email from GrubHub is a great example of product promotion ... because it doesn't sound or feel like product promotion at all. Instead of saying, "Hey, you like food. You should order it using our service!", the email tells a story with the help of a really cool piece of interactive content: an "Eat Map." (See what they did there?)

We especially love the colorful GIF they used to promote the piece of content, as it really commands the recipient's attention. (Want to learn how to create a GIF using Photoshop? Read this.)

Nurturing Email Design Examples

5) Handy

We love this simple welcome email from Handy. The color scheme is consistent, relying on grey for the base, and bright blue to draw attention to the logo and calls-to-action.

There's a nice balance between text and visuals here, and the tile design makes it easy to skim through. Finally, we love that they used non-cheesy stock photos to represent their brand, which makes them more genuine and lovable from a consumer perspective.

6) Litmus

You might expect a beautiful email from a company that's announcing an email design conference -- and Litmus doesn't disappoint. The email starts out with a bold burst of color, which grabs readers' attention. Below this, you'll find a clean design that includes concise copy, whimsical illustrations, and a great use of white space.

At the bottom of the email, you'll see a live Twitter feed showing tweets that use the conference's official hashtag. That social engagement factor is a really cool touch that we're willing to bet increased engagement, while simultaneously informing folks about how to stay connected at the event.

7) Uber

As marketers, we know that charts and graphs can serve as an effective way to illustrate information. But what about incorporating graphs into emails?

This email design from Uber skillfully demonstrates the power of data visualization through the use of simple graphs. Rather than relying on words to explain their lowered rates, Uber whipped up a few comparative visuals to do the job. Thanks to the bright blue color choice, it's easy for recipients to understand how the rates have shifted in just a quick glance.

8) Cuyana

Here's a product promotion email Cuyana sent to people who signed up for a new product's "early access" list. The email is centered entirely around showcasing the new product, but in this case, that's exactly what the folks who opted in to the "early access" list were looking for.

The design of the email is clean and sophisticated, thanks to a brilliant use of negative space and attractive fonts. This approach is very true-to-brand for a women's apparel and accessories company. We love the use of consistent coloring -- especially the signature orange hue they chose for the call-to-action button at the bottom.

( Note: This is an example of an email made using HubSpot. Click here to check out more email marketing examples from our library.)

Ecommerce Email Design Examples

9) J.Crew

Sometimes, words can be overrated. Why not let a picture tell the story for you? That's what J.Crew did in this email, anyway. The email is promoting a sale, but you wouldn't know it right away: All you see is the copy, "This is worth the scroll," along with a very long (and very scroll-worthy), high-definition picture of an ice cream cone. Yum.

If you make it to the bottom, you'll notice that the tip of the ice cream cone acts like a directional arrow, pointing recipients toward the call-to-action.

10) Apple

This holiday email from Apple balances white space with product displays to create a really interesting experience.

While the products all share a similar color scheme, what's really compelling is their positioning. By strategically arranging the products, Apple was able to create visual patterns that alternate throughout the email.

11) Union Made Goods

Consumers get a lot of emails from ecommerce businesses showcasing holiday gift ideas from their websites, and this is an example of one of these emails done well. They opted for a simple design here, which includes a really nice use of both color and white space, making the copy and images that are there pop a little more.

12) Shwood & Stanley

In the ecommerce world, the quality of visuals in your emails can have a huge impact on whether recipients stick around to look through the whole email, or quickly hit the "delete" button. This email from Shwood & Stanley places a big emphasis on those high-quality visuals. We especially love the textured backgrounds, as well as the ways in which they play with list and shadows.

13) Harry's

For seasonal emails like this one from Harry's, you might consider using color schemes that go with the season. To promote their winter gift set, the folks at Harry's cooled down their color scheme with traditional winter colors like green, blue, and brown. They also struck a nice balance between text and visuals, and helped to make their email easier to skim by using a simple tile design.

Not to mention, those bright red calls-to-action look pretty clickable ... wouldn't you agree?

Editor's Note: This post was originally published in May 2012 and has been updated and for freshness, accuracy, and comprehensiveness.
What other companies out there have you noticed are creating beautiful email marketing?

# data[].attributes.attachment_link.title
13 of the Best Examples of Beautiful Email Design

# data[].attributes.attachment_link.description
When you're an email marketer, your to-do list often looks like this: Generate opt-in leads, segment your lists, set up lead nurturing workflows, draft clear and concise email copy, check your emails for deliverability, optimize for plain text and HTML, and so on. Geez ... isn't there any fun in email marketing anymore?

# data[].attributes.headline
Ideas of different email marketing designs to use

# data[].attributes.subject
Ideas of different email marketing designs to use

# data[].attributes.attachment_link.title
11 Email Marketing Designs Worth Testing in 2018

# data[].attributes.attachment_link.description
Email marketing design best practices and tactics will need to keep up with improvements in technology. Here are eleven of the best email marketing design inspirations for you to test in 2018.

# data[].attributes.attachment_link.readable_text
This reference assumes you're a front-end web designer with an intermediate working knowledge of HTML and CSS. You're comfortable coding in and using HTML tables for structure, and working in coding standards that were state-of-the-art in 1999. Feel free to crank up a little TLC or Goo Goo Dolls to get into the spirit of things.

Best Practices: Design

There are a few things to keep in mind when designing HTML email campaigns.

Emails should be 600-800 pixels maximum width. This will make them behave better within the preview-pane size provided by many clients.

Design for simplicity. Use grid-based layers and avoid complicated elements that require HTML floats or positioning.

Assume images will be initially blocked by email clients, or that certain images-background images, for example-will completely fail to load.

Don't design an email that's essentially one large, sliced-up image. While these kinds of emails look pretty, they perform poorly.

Use basic, cross-platform fonts such as Arial, Verdana, Georgia, and Times New Roman.

Avoid elements that require Flash or JavaScript. If you need motion in an email, a .gif is your best bet.

Don't forget about the mobile experience! Is your email readable at arm's length on a small screen? Will the images slow its load time on a mobile device? Are your links easy to press with a thumb?

Best Practices: Development

Much like with design, there are best practices to follow when coding HTML email.

Code all structure using the table element. For more complicated layouts, you should nest tables to build complex structures.

Use element attributes (such as cellpadding, valign, and width) to set table dimensions. This forces a box-model structure.

Keep your CSS simple. Avoid compound style declarations (IE: "font:#000 12px Arial, Helvetica, sans-serif;"), shorthand code (IE: #000 instead of #000000), CSS layout properties (IE: slot, position, clear, visibility, etc.), complex selectors (IE: descendant, child or sibling selectors, and pseudo-elements)

Inline all CSS before sending. (Mailchimp will do this for you automatically.)

Use only absolute links for images, and host those images on a reliable server. (Mailchimp provides free image hosting.)

Don't bother with JavaScript or Flash-those technologies are largely unsupported by email clients.

Account for mobile-friendliness, if possible. Use media queries to increase text sizes on small screens, provide thumb-sized (~46x46px) hit areas for links. Make an email responsive if the design allows for it.

Test, test, test. Create email accounts across various services, and send emails to yourself. Do this in conjunction with services such as Litmus.

# data[].attributes.headline
Email Marketing Design and Layout Presentation

# data[].attributes.subject
Email Marketing Design and Layout Presentation

# data[].attributes.attachment_link.provider_name
Email Marketing - SMTP services - Mailjet

# data[].attributes.attachment_link.readable_text
These days, it feels like we've seen it all. We survived not forwarding those endless chain emails, the world "ending" in 2012 and all six seasons of Jersey Shore, so it's hard to be scared of anything. This Halloween, it's time to get spooked by something even worse than the Boogeyman, Loch Ness Monster and the Jersey Devil combined. This is not for the faint of heart...this is what happens when email design goes wrong.

A Nightmare on Design Street

It happens to all of us. We open an innocent looking email, stare at it in horror, and run screaming into the night. Okay, maybe it's not that dramatic, but opening a poorly designed email is definitely not a fun experience. With different font sizes, a range of a hundred colors and tons of buttons saying "click here," you're sure to get sent straight to the trash. Keep your designs clean and user-friendly to increase your reader's engagement.
In this grocery store ad, there's simply too much happening for the reader to benefit from the email. Instead, highlight a few key items in an easy-to-read format to entice your reader to click through to read more.
Invasion of the Unresponsive Email

You might want to think twice about sending that Halloween email campaign if you haven't tested it on a mobile screen . If an email looks jumbled when your reader opens it, you just might scare them into deleting it. Mobile devices, tablets and wearables have taken over as the leading platforms for reading emails, so make sure you're not just designing for the desktop.

Yikes! How do I make sure my email is responsive?

Using a responsive email editor, like Mailjet's Passport, to create your emails is the easiest way to make sure your reader can view your content on any device. The template will automatically adapt to the screen size of the device on which the email is opened. Responsiveness can also be a pain for developers, so at Mailjet we've set out to make their work easier with MJML, our open source email coding framework , which generates high-quality responsive HTML that renders beautifully in the most popular email clients.
While this email may be fine for a user on a laptop or larger-screened tablet, it would be very frustrating to choose one of the categories on a mobile device. Make sure your email adapts to a variety of screen sizes to make sure that your user can always engage with it.
The Silence of the Images

Of course, email design responsiveness also means that your content adapts to your user's bandwidth. For example, large photos may not load over a subscriber's cellular connection. If the majority of your email is images, your subscribers might experience the horror of a big blank email when they open it. Add to make sure your reader understands what your email is about, even if the images don't download.
The email on the left has no alt text within the images, so when it's opened without a strong cell phone signal, the user has no idea what the images are. The email on the right provides readers with a description of the image so that they can know what the message is about.
The Evil Text

We get it. You want your readers to have all the information they need, simply from opening your email. While it's important that your emails provide value to your reader, adding too much text makes it difficult to keep them engaged. When your subscribers open a text heavy email on their mobile devices, chances are they'll lose interest quickly if they have to scroll several times just to reach the call-to-action. Instead, give your readers a snippet of the information, then direct them to a landing page to read more.
Receiving an email like this can make the reader feel overwhelmed with information, even if they are interested in the topic. Instead, try breaking up text with images and redirecting your reader to learn more on your website
The Blair Witch Palette

For those of us who are fashion conscious, we know which color combos to avoid. The same applies to email templates - you don't want to have too broad a range of tones or clashing, distracting colors in the design. For example, if you place light text on a light background, your subscribers may have trouble reading your email. Also, using too many colors can frustrate your subscribers and cause them to move on to the next email. The colors used in your email design will also affect your reader's view of your brand, so choose your palette wisely.

Of course, you'll want to make sure you keep your email colors consistent with your overall brand. If your brand identity consists of mostly dark tones, a neon email may confuse your recipients and cause them not to recognize you. Your emails represent your brand as much as your website or print materials, so be sure to put your best foot forward!
The wide range of colors in this email make it difficult for the reader to know where to focus. The bright red background is distracting from the main content of the email, which can cause the reader to lose interest quickly. Instead, try to stick to a limited number of colors and use different tones to direct the reader's eye.
We hope we haven't scared you too much with our spooky email examples. Your subscribers want to receive email treats, not tricks in their inboxes, so make them happy with your Halloween email campaigns!
Have any scary emails spooked your inbox this Halloween? Share them with us on Twitter using the hashtag #MailjetHalloween.
Want to define your email strategy to win customers over this holiday season? Check out Mailjet's Ultimate Guide To Holiday Emailing.

# data[].attributes.attachment_link.description
These days, it feels like we've seen it all. We survived not forwarding those endless chain emails, the world "ending" in 2012 and all six seasons of Jersey Shore, so it's hard to be scared of anything. This Halloween, it's time to get spooked by something even worse than the Boogeyman, Loch Ness Monster and the Jersey Devil combined.

# data[].attributes.headline
Good and Bad Examples of Email Marketing Design

# data[].attributes.subject
Good and Bad Examples of Email Marketing Design

# data[].attributes.attachment_link.readable_text
Don't use too many buttons

Assuming that your email campaign has a specific goal, it's advisable to focus on one or maybe two calls-to-action.

This avoids confusing the recipient and keeps their mind focused on the job in hand.

A case study from Whirlpool shows that when the brand reduced the number of CTAs in its email from four down to just one, it achieved a 42% increase in clicks.

Originally the marketing team had stuffed the emails with CTAs based on the assumption that more buttons equals more clicks.

However all four CTAs related to separate actions, which distracted from the main focus of the email, which was to drive users to a rebate landing page and encourage them to visit a showroom.

Make them stand out

A good CTA needs to stand out from the rest of the email and grab the user's attention.

This can be a tricky task when marketers have to take into account existing brand colour schemes and templates, but there's more than one way to catch a person's eye.

For example, if you're opting for a button rather than a text link, make sure there's plenty of space around the CTA and don't position it in the middle of a load of text.

I'm undecided about this example from Reiss. It stands out against the blue background and certainly fits with the brand image, but I'd be interested to see whether a button had greater impact.

I also counted more than four CTAs in this email alongside a number of other links, which could potentially dilute the impact.

This effort from Threadless is slightly better as there's a persuasive, time limited offer and a clear CTA.

However there are still a large number of buttons and the email itself is so colourful that it's difficult for the buttons not to clash.

This creative from Topshop is quite poor - it's a monthly newsletter with the subject line 'What's hot in June' so one would expect it to have a lot of content, but the text and CTAs are all the same colour so nothing really jumps out.

Write short, persuasive copy

As the name suggests, the job of a CTA is to encourage the reader to perform a particular action.

To help achieve this consider using punchy, direct copy to create a sense of urgency and stir your customers into action.

In the example above Threadless has opted for 'Buy now', which is about as succinct and direct as you can get.

Similar options include:

Test it!

These tips are only meant to act as guidance and inspiration for your own email marketing efforts, they are not hard and fast rules.

All aspects of your email content should be tested to find out what works for your marketing efforts.

And even when you've found a winning formula, keep on testing new ideas or the results may end up diminishing over time.

Now, let's take a look at some good and bad examples of email CTAs from some B2C brands...

The Good

New Look

How's this for a simple, focused email message?

Are you ready for the World Cup? If not, shop New Look's men's or women's ranges. It does seem to be missing two apostrophes there though.

H&M

Another great example of how to create a simple, effective email CTA. There's a sale on, so click the button to shop it.

Mr Porter

The CTA itself doesn't jump out at you in this example from Mr Porter, but I am a fan of the simple creative.

This email has a further 10 'Shop now' buttons further down the email, which is perhaps a few too many.

Rue La La

It could be argued that this CTA is a bit vague, as the email is advertising a sale but the copy says 'Shop fashion'.

However I like the simplicity of the creative and the language used to create urgency: "You have 24 hours. And... go."

Office

This CTA stands out against the rest of the content and is surrounded by plenty of white space.

On the downside, it was the featured promotion in an email that had the subject line: "Vans Star Wars and new Nike."

ASOS

ASOS's emails tend to be quite succinct and I like that the contrast of this CTA against the white background.

Though you can pretty much click on anything in this email to access the sale.

The Bad

Macy's

This example from Macy's is bonkers. The subject line advertises Father's Day gift ideas, but then the first link is for women's products and there's also a link for handbags.

It feels like there's a bit too much going on and a few too many product managers demanding to get their share of the pie.

And this isn't even the entire email, there are five other promos beneath this one.

Reiss

Reiss sticks faithfully to its white, text CTAs, which maintains a consistent brand image but means they can occasionally be difficult to see.

In this example I think it's easy to overlook the CTA against the light background.

Macy's Again

Sorry to keep harping on about Macy's, but this email is extremely cluttered. I didn't even notice the promo code the first couple of times I looked at it.

It's also followed by a huge amount of other content promoting homewares, furniture, cologne and even mattresses.

Currys

Although the CTA sticks out, there's too much text on this email and there's not enough to inspire the recipient to actually click on anything.

Currys also falls victim to the trap of cluttering its email with far too many different offers and promotions further down.

The Whisky Exchange

I feel bad including this email as The Whisky Exchange is generally very good, however in this instance there basically aren't any CTAs. I assume you just click on the picture...

One final Macy's email

Another busy, busy email from Macy's, this time with a confusing selection of offers.

The box on the left offers you an extra 20%, 15% and 10% off - which is it? Or you can get $10 off. Or there's an online exclusive deal at the bottom for 25% off clearance products.

Super Saturday sure is a confusing time down at Macy's.

# data[].attributes.attachment_link.title
Email marketing CTA design: five good vs. six bad examples - Econsultancy

# data[].attributes.attachment_link.description
Email remains one of the most effective tools in the digital marketing toolbox, with the potential to deliver a great return on investment. Data taken from the Econsultancy Email Marketing Census 2014 shows that 68% of companies rate the channel as 'good' or 'excellent' for ROI.