Sign up free Log in

How to Design an HTML Newsletter Using Photoshop, InDesign, Illustrator and Adobe XD

Newsletter_mit_Adobe_erstellen
T

hinking about designing HTML newsletters or email campaigns that will capture your audience’s attention? Excellent. You’ve made a marketing decision that’s going to bring you a lot of ROI.

This post will help you get started. We’ll introduce the fundamentals of email design, HTML newsletter coding, and email delivery, so you’ll fully understand your range of software options.

What Is an HTML Email Newsletter or Campaign?

In the world of email marketing, there are two types of email. Plain-text emails and HTML emails.

Most industries, especially those that use email for sales, use HTML emails.

A combination of standout images, a striking call-to-action (CTA) and well-written text all adds up to grab your subscribers’ attention in the inbox.

example-html-newsletter
An example of an HTML email newsletter.

The biggest advantage of creating HTML emails over plain text is newsletter design.

You get to control exactly how the email will appear in inboxes. It’s equivalent to sending a website or a glossy advertising brochure directly to an inbox. You can mix and match colors, fonts and images in a way that captures your brand image.

Note, however, that in other industries, such as the legal realm and tech, plain text emails can perform better because they convey a degree of seriousness. They look less like advertising.

example-plain-text-newsletter
An example of a plain text newsletter that looks like any other email.

How to Design, Code and Send an HTML Newsletter

When you’re learning to create an HTML email or newsletter, you need to recognize that there are 3 isolated steps that go into creation.

  1. Design your email. Decide how it should look in your subscribers’ inboxes.
  2. Code your design in HTML. Put the design into a programming language that email clients can render.
  3. Send your email. Make sure it will arrive in your audience’s inboxes.

There’s a multitude of programs you can use for all aspects of newsletter creation. You can choose a separate program for design, coding and sending,
When you’re learning to create an HTML email or newsletter, you need to recognize that there are 3 isolated steps that go into creation: design, coding and sending. #emailmarketing Click To Tweet

Or you can use one single tool for all three steps, an email marketing software, also known as newsletter software. We recommend you choose one single tool over three separate ones for this process (ours, preferably.) 😉

You’ll save time and energy.

But we’ll walk you through all possible options so you know exactly what you’re dealing with.

1

Getting Started Designing HTML Newsletters

The biggest advantage of using design software for the initial step of newsletter creation is that you may be comfortable with particular design software. Creating your newsletter or email in a graphic design program will make things more difficult for you down the line, however.

You can’t simply export your design as an HTML email or automatically code your .ai file.
600 pixels is the industry standard for HTML email width because it’s suitable for most devices #emailmarketing Click To Tweet

You’ll have to code it or get someone with professional HTML expertise to do so.

But if you do your creative work best in one particular tool, then go ahead and use that. In fact, when it comes to the design part, any photo editor or layout tool will do the job.

Here are the 3 key design restrictions to consider when designing HTML emails:

  1. Responsive email design
    Your email or newsletter has to be readable on whatever device your subscribers use. 43% of consumers now check work email primarily on their smartphones. And when it comes to personal email, that number jumps up to a whopping 65%. This means you’ll need to have a design plan for desktop view and mobile view.
  2. Fixed width
    All newsletters should have a fixed width, which prevents subscribers from having to scroll horizontally. You want to avoid their having a challenging reading experience at all costs! 600 pixels is the industry standard for HTML email width because it’s suitable for most devices. You can go up to 650 and still have your email render correctly.
  3. Above the fold
    Your email’s subject line is the first chance to grab your subscriber’s attention. If you pass that test and they open your email, you have one more chance to hold their attention: with a really good header. This is the area your contacts see before having to scroll. It’s called the above-the-fold space. Include the most crucial information right at the beginning.

Create HTML Newsletters Using Photoshop

create-a-new-document-in-photoshop
Open a new doc in Photoshop

Start by creating a new document.

The width should be slightly bigger than a usual newsletter because this will allow you to include a background to your newsletter. The recommended total width is 800 pixels.

As far as the length is concerned, you’re not limited here. If you’re not sure where to start, choose a length of 1000 pixels.

In terms of resolution, 72 DPI will suffice for a newsletter. Like all images for the web, you should choose RGB color, not CMYK, which is better suited to print.

Create a 600-pixel-wide box in the document and center it. This is where your newsletter’s content will go. Next, choose a background color for the rest of the document. White or light gray as a background color creates a pleasant reading experience that is not distracting. Some brands have done well with soft pastel colors for the background, too. If your brand is known for its boldness, then go ahead and choose a brash contrasting color for the background. As long as it’s on brand, you’re good.

set-up-a-newsletter-in-photoshop
Set up your newsletter with a 600px-wide box

Now you’ve got your file set up and you’re ready to get started. Let’s work through the design from top to bottom.

It’s traditional to place a link to a web version of the newsletter or campaign at the top of your HTML email. If images don’t display (which happens by default in Microsoft Outlook) or for some other reason the email client doesn’t render your email correctly, the link to a web version lets the user view it in their browser instead of through their email client.

More and more brands, however, are leaving out the web version link or placing it discreetly at the bottom of the email.

This way it doesn’t distract your readers or impair the coordinated design of everything above the fold. Note that if you work in B2B, many of your subscribers will be using Microsoft Outlook, which means you should still include the link to the web version.

Directly under the unobtrusive link to a web version (or if you skip the link, then as the first element in your newsletter), add a teaser picture. You can adjust the picture size in Photoshop, as well as the text.

Often, the teaser picture includes your logo and a recognizable branded image. You can also include a call-to-action (CTA) button in the teaser image. This area represents that precious above-the-fold space. Generally, the length should be 200–250 pixels, but the best way to assure that you’ve got the area above the fold covered is to test it in email marketing software.

finalized-newsletter-in-photoshop
A finalized newsletter designed in Photoshop

Directly following the header comes the body of your newsletter or email campaign. Insert a 600-pixel rectangle here, and add text and insert images to your liking.
The above-the-fold height is generally 200–250 pixels, but make sure you test it in email marketing software! #emailmarketing Click To Tweet

Simply duplicate this block for additional newsletter content. Use guides to adjust the blocks and check distances. Make sure you use sufficient spacing to ensure an excellent reading experience.

If you feel like adding social media buttons to your newsletter or email campaign, insert them at the end underneath the body of the email.

Finally, close with a footer. Here you should include company information and links for users to update their subscription preferences and easily unsubscribe from the newsletter. You may use a smaller, ordinary font, as long as it’s still perfectly readable and clickable.

Create HTML Newsletters Using InDesign

open-new-doc-indesign
Create a 600px-wide document in Indesign

For InDesign, create a new document with a 600-pixel page width. As far as the length is concerned, choose whatever works. Save the page as a custom format and open it.

Your email layout will follow the same structure as when using Photoshop:

  1. Optional link to view in browser
  2. Header image above the fold
  3. Body (main content)
  4. Footer
finalized-newsletter-indesign
A finalized newsletter designed in Indesign

In InDesign, use the rectangular tool to create three rectangles on top of each other that will be page-wide. This is where you will insert the header, newsletter content and footer.

Add an image to the header. Place the image and insert it proportionally. Make sure all the images you use in an InDesign newsletter are hosted online so your subscribers will be able to see them.
Add a white background in the newsletter body to ensure a smooth reading experience. #emailmarketing Click To Tweet

Add a white background in the newsletter body to ensure a smooth reading experience. Use the text tool for inserting text, and finally, add margins so it doesn’t run up against the edge of the page.

The footer is the best place to place an unsubscribe link and the other company details.

Create HTML Newsletters Using Illustrator

Illustrator a great tool for designing images.

However, it’s not the best choice for designing an entire newsletter. Use Illustrator to design your newsletter background, your logos or other graphics.

create-backgrounds-with-illustrator
Create backgrounds with Illustrator

The newsletter itself should be created in another program.

Create HTML Newsletters Using Adobe XD

One of the newest design programs that works well for email template design is Adobe XD.

In fact, it’s the only tool our graphic design team recommends for template creation. And they should know. They design a lot of them.

Adobe XD is a pared-down graphic design tool that’s easy to learn, free and intuitive. To create a newsletter in Adobe XD, simply create a file and follow the same instructions as listed under Photoshop.

What stands out about Adobe XD’s functionality is its repeat grid tool. Instead of duplicating one box over and over, you can choose the repeat grid option.

Adobe-XD-repeat-function
The repeat grid function

For example, let’s say you have a newsletter with 4 content blocks that function as teasers for blog items. Create one content block and then mouse over the selection and select repeat grid. Then drag the group until you have 4 content blocks.

Let’s say you send the design to your boss or colleague for approval.

And they approve it with only one change. They want all the headlines to be in the new brand pink, instead of the older branded gray. Instead of having to go in and select each individual headline and change it manually, you only have to change one, and the pattern will automatically be adopted in the others.

newsletter-in-adobe-xd
A finished email campaign designed in Adobe XD

This becomes especially helpful when you’re dealing with repeat grid groups of upwards of dozens or even hundreds of images. This is the kind of issue you regularly encounter in the e-commerce sector.
What stands out about Adobe XD’s functionality is its repeat grid tool. #NewsletterTemplates #Design Click To Tweet

Not enough design tips for you? Make sure you check out our newsletter design tips if you need more guidance!

Want to skip all this hoopla and just use one tool to design, (automatically) code and send HTML newsletters and email campaigns?

👉 Create an account with Newsletter2Go today!

2

Tips for Coding HTML Newsletters

Got your design? Have all the sign-offs you need? Great! Now we get to the hard part: how to code your newsletter.

Some design programs have the option to export your document to HTML. But don’t be fooled. Unfortunately, this just won’t work for an HTML email.
Some design programs have the option to export your document to HTML. But don’t be fooled. Unfortunately, this just won’t work for an HTML email. #HTMLEmail Click To Tweet

Programming HTML for email is significantly different than programming for the web. Moreover, every email client works differently, so you have to test what it will look like in various different email clients.

If you’re already familiar with programming, then keep reading. We’ve got some tips for you.

But if you’re not a programmer experienced with email coding, you have several options to get your design into a format that will render correctly.

  1. Hire a programmer experienced in coding for HTML email
  2. Choose an email service provider, such as Newsletter2Go (oh, hey, that’s us!), and re-create the design 1:1 in the newsletter software’s drag-and-drop campaign editor.
  3. The luxury option: Choose an email service provider that offers the add-on service of programming a template for your newsletter or email campaign. You send them the design files showing exactly how you want the template to look, and they do the coding in the backend of the software. Then, all you have to do is log into the software, insert the text and images you’d like into your new template and press send.

If you’re experienced with programming for website design but simply haven’t coded for HTML email before, here are some tips to consider.

Why HTML Email Programming Is Crazy Different OR
Tonight We’re Going to Code Like It’s 1999

One of the reasons coding for email is so different than coding for web design is that there are many more factors at play here in how an email will be rendered. When programming for the web, you have to deal with factors such as OS, browser and screen size.

When programming for email, in contrast, you have to consider these factors as well as many more. These include email clients, image blocking options and sending services.

What’s more – while there are just a few browsers you need to consider when coding for the web – there are at least 1,000 email clients worldwide your HTML email needs to be prepared to meet.
Even if you look only at the email clients with the largest market share, you’re still dealing with about 50 email clients that may be rendering your HTML email. #EmailDesign Click To Tweet

Even if you look only at the email clients with the largest market share, you’re still dealing with about 50 email clients that may be rendering your HTML email.

Plus, web-based email apps will render differently in different browsers. And you’ve got tons of devices and screen sizes your email will be viewed on.

Then, to top it all off, you’ve got to deal with the fact that email clients mostly use old-school HTML. Many of the more recent developments in HTML simply haven’t been adopted by email client software. And there are no universal standards for email clients.

All in all, it’s a tricky task to program for email. Not for the faint of heart.

HTML Code for Newsletters and Other Email: What to Watch for!

To create your code, you can use a plain text editor or a visual tool like Dreamweaver. This dinosaur of the programming world works well for coding HTML email templates because it’s been around forever.

As we’ve established, programming a newsletter differs from web development significantly. Here are some of the most important differences to consider:

  • Start with the structure. Your HTML template will begin with a doctype telling the email client what to expect. Follow this with your header. This is where your media queries, styling and any animations will go. Everything following your header counts as the body of the email. Enclose this content with body tags.
  • Forget separate CSS files. Most email clients do not support them. Which means you’re going to have to get your HTML and CSS to play together nicely in a different way: inline CSS styles. They’re recognizable by most email clients and they can be used for key newsletter design elements, such as background colors and fonts.
You’re going to have to get your HTML and CSS to play together nicely in a different way: inline CSS styles. #HTMLNewsletterDesign Click To Tweet
  • Embrace the table. For newsletter layout, use nested HTML tables. I know. I know. This feels very 1999, but that’s what we’ve got to work with. Table tags are how you get around the fact that email clients support neither the rowspan attribute nor the colspan attribute. You’ll want to use tables throughout. Use cell padding for improved readability.
  • Remember the alt text. Save your images separately and include alt-text tags. This improves accessibility and makes things easier for those reading your newsletter in those email clients that block images.
    • Be specific about your font! The usual HTML tags, such as H1 and H2, won’t render correctly in email clients. You need to specify font size and style directly in the HTML. Note, however, that not all fonts will render correctly. Read more about which fonts play best with email clients.

Here’s an example below of some code to use when starting your email campaign. This will render as white text on a black background.

3

Sending Your Newsletter

Now we get to the third and final step: your email sending tool.

You may think you can send your email simply by entering all your contacts into a BCC field with your free email service, like Gmail. Unfortunately, using a regular email tool just won’t cut it for mass mailings.

The biggest problem is that you’ll have extremely low email deliverability, which means most of your emails won’t even make it onto the server of your contacts’ inboxes. Your emails literally will never see the light of day, or, you know, the backlit screen of an inbox.

Instead of attempting to send your emails from a private email account, you’re going to need to use newsletter software, such as Newsletter2Go. Your email marketing software will have many tools and procedures in place to ensure your emails arrive in the inbox.

Most email marketing tools allow you to upload the HTML of your email newsletter templates directly. Once you’ve designed and coded it, you can upload it and send it directly.

The Quickest Alternative to Newsletter Coding

But there’s a better way. You don’t need to be a designer or programmer to send a professional email campaign because newsletter creation has been democratized.

Instead of using three different tools, you can do everything described here in one simple tool. The all-in-one option is to create a newsletter or email campaign in an email marketing software, like Newsletter2Go. Here are the three steps of newsletter creation:

  1. You design your emails with a drag-and-drop editor.
  2. The coding happens automatically in the background, so you don’t have to worry about the technical aspect of it.
  3. To send, just click a button to ensure your email avoids the spam filter and makes it into inboxes.

Interested in what design options you have in our newsletter editor?

If you’re a control freak, you’ll have all the design control you want. Margins, paddings, ratios, colors – all of these are yours to take charge of!

Of, if you’d rather have your template design done for you, then you can choose one of our many ready-to-go HTML email templates, such as the one below.

create newsletters
One of the many ready-to-go templates available in Newsletter2Go software.

Here’s how to create an HTML email newsletter in your email marketing software.

  • Choose newsletter subject line and a send-from email address
    Enter your email subject and preview text. Both text lines can be personalized in order to increase open rates. You can also choose what name and send-from email address your subscriber will see.
  • Choose a ready-to-go HTML template, a layout template or upload your own design
    Here you can choose from a variety of newsletter templates or create your own with the drag-and-drop editor. You can go with a generic template with different layouts or a ready-to-go template, such as a seasonal one. For the option that combines ease of use with high-quality brand recognition, you can even order your own premium template from Newsletter2Go. All of our standard layouts are responsive. This means your newsletters will be optimized across all devices.
  • Design your newsletter with the editor
    Newsletter2Go offers an intuitive drag-and-drop editor that allows for newsletter creation without the hassle. You can choose from various display blocks. Text and images can be edited directly in the email campaign editor. Copy and paste your content into the HTML template, upload pictures from your gallery or choose them from our Unsplash integration and insert links. Moreover, you can also adjust the layout, formatting, frames and margins. Our newsletter editor was designed for control freaks who want to be in charge of every specification, down to the last padding and margin. So you control the design.
  • Personalize your newsletter
    Insert a placeholder that will automatically personalize your newsletter with subscriber data. This means you will be able to address your users by their first name. Also, you can display design blocks only to specific audience segments, grouped by age, gender, interests or language, for example.
  • Insert a footer with an unsubscribe function
    These links will be automatically generated by Newsletter2Go and will be linked to your account. Including a profile option so your contacts can choose how often they hear from you is proven to lower unsubscribe rates, too.
  • Insert your products or content into the newsletter
    If you’d like to save time copying and pasting your product details, you’ll be happy to learn about the 1-click product and 1-click content transfer features. The latter will enable you to transfer your site’s content into your mailing simply by specifying the Post ID or Entity ID. Similarly, with 1-click product transfer, you can copy all product details (images, price, links, description) to your email campaign by entering the product number.
  • Send it
    Send out your email once you’re happy with it. Our servers are whitelisted, which means higher deliverability rates. With a whitelisted server, more than 99% of your emails will reach the inbox.

The best part is that you will be able to live preview your newsletter in the editor, check how it displays in multiple important email clients, and send yourself test emails.

If you’d like to learn more about HTML newsletter creation with our newsletter software, watch the video below:

About the Author

Mara Taylor
Online Marketing Manager at Newsletter2Go

Was this post helpful?

Thank You!

Leave a Reply

Newsletter2Go uses cookies to make sure you have the best possible experience on our website. To continue on to the website, please agree to our >cookie policy. I agree.