How to Design a HTML Newsletter using Photoshop, InDesign and Illustrator
There’s a multitude of programs that can be used for newsletter design. What follows next is HTML programming. When it comes to the design part, any photo editor or layout tool will do the job. However, if you want to have a seamless programming experience, there are several things you need to consider before starting off with newsletter design.
First things first: you can create a newsletter in a photo editor and program it yourself, however it will be a wasted effort. This method is very time consuming and you need to know HTML to make your newsletter work. Luckily there’s a better way to create a newsletter… where you don’t need to be familiar with HTML.
Therefore, I’d like to show you how to go about newsletter creation that is hassle-free. Shall you decide to use an email marketing software, such as Newsletter2Go, you will be able to use a drag & drop editor for newsletter design. You won’t need to deal with HTML: your newsletter will look just like you designed it. You don’t need to be a designer or programmer to send out a professional email campaign, because newsletter creation has been democratized. Click here if you’d like to learn more about newsletter creation.
Any newsletter should have a fixed width, which prevents users scrolling through the email horizontally and having a challenging reading experience. 600 pixels is a width you should go for, because it’s suitable for most devices.
Crucial information should be included within the first 300 to 500px. You would usually see this in the above the fold area, which is perfectly visible without scrolling.
If you’d like to create a HTML email, you need to create a new document. The width should be slightly bigger than a usual newsletter would have, because that allows you to include a background in your preview. Recommended width would be 800 pixels. As far as the length is concerned, you are free to choose it yourself, however it is advisable to start with 1000px. A 72dpi document would be perfect. You should go for RGB as far as the color model is concerned – SMYK simply won’t cut it.
Create a box in the document that will be centered and 600px wide. This will become your newsletter. The ideal background color would be white to provide a pleasant reading experience. To set the newsletter apart from the background, fill the background with light gray.
Below you’ll find tips on how to create your newsletter from the top to the bottom.
Begin with a preview and a web version link, which should be included in every single newsletter. It will come in handy if your newsletter doesn’t load or if your subscriber prefers to read your message in the browser.
Afterwards, feel free to add a teaser picture. You can adjust the picture size in Photoshop, as well as the text.
In order to design the newsletter body, add a 600 pixels rectangle underneath the header. There, you can add text and insert images to your liking.
If you want to expand your newsletter, copy the first content block and insert it underneath. Use guides to adjust the blocks and check distances. Make sure you use sufficient spacing to ensure a better reading experience.
If you feel like adding social buttons to your newsletter, add them underneath the newsletter body.
Finally, don’t forget about the footer where users can update their subscription preferences, meaning that they could easily unsubscribe from the newsletter. You may use a smaller, ordinary font, as long as it’s still perfectly readable and clickable.
If you’d like to create a HTML newsletter, you need to create a new document with 600 pixels page width. As far as the length is concerned, feel free to choose it yourself. Save the page as a custom format and open it.
Now you can 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 that all the images you will use in an InDesign newsletter are hosted online so that your subscribers will be able to see them.
Add a white background in the newsletter body to ensure a smooth reading experience. Feel free to add some text here. Add margin to the text so that it won’t find itself against the edge of the page.
The footer is the best place to place an unsubscribe link.
Although you can export the document to HTML, it won’t make a good HTML newsletter as it isn’t optimized. Moreover, the design might turn out to look differently. However, if you are still keen on designing your newsletter in InDesign, you will need to program it in HTML later. Alternatively, you could use the Newsletter2Go software.
Illustrator can be useful for web and newsletter design in some cases. However, it will be arguably difficult to create the whole newsletter layout using this editor. Therefore, it is useful to create some newsletter items in Illustrator, for example a background. However, the newsletter itself should be created in another program.
Programming a newsletter differs from web development significantly. CSS styles in newsletter design are rather problematic. However, inline CSS styles are recognizable by most email clients and they can be used for newsletter design. For newsletter layout, use HTML tables.
Here’s a quick step by step guide to programming a HTML newsletter:
- Save images
The pictures you’re going to use in the newsletter need to be saved separately.
- Open a new HTML file
You can either use a visual tool like Dreamweaver or go for a text editor like notepad.
- Create header
Create a table that will correspond to your newsletter width. The table can be obviously formatted to your liking and you can insert content into it. All of your pictures should contain alt text so that your email will be readable even if the pictures won’t load.
- Create content
Here you will also work with the tables. To improve newsletter readability, you can use the cell padding attribute.
- Create footer
Tables come in handy for footer creation as well. If you wish to add more pictures next to each other, simply insert them into columns.
Once your newsletter is ready, you can upload it to your Newsletter2Go account and send it from there.
- Choose newsletter subject and a send from email address
Determine your newsletter subject and preheader. Both text lines can be personalized in order to increase open rates. You can also choose what name and from-email address your subscriber will get to see.
- Choose a ready-made HTML template or upload your own design
Here you can choose a generic template with different layouts, a seasonal one or go for a premium template that you can order with Newsletter2Go. All of our standard layouts are responsive. This means that your newsletters will be optimized for all devices.
- Design newsletter with the editor
Newsletter2Go offers an intuitive drag & drop editor that allows for newsletter creation without the hassle. Feel free to add various design blocks and edit text and picture to your heart’s content. Copy and paste your content into the HTML template, upload pictures from your gallery and insert links. Moreover, you can also adjust the layout, formatting, frames and margins. The best part is that you will be able to live preview your newsletter in the editor.If you’d like to learn more about HTML newsletter creation, play the video:
- Newsletter personalization
The placeholder will automatically insert your subscriber data. That means that you will be able to address your users by their first name. Also, you can display design blocks only to specific audience groups, for example women.
- Insert links to web version newsletter and unsubscribe function
These links will be automatically generated by Newsletter2Go and will be linked to your account. Consequently, your address book will stay up to date.
- 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 newsletter simply by specifying the Post ID or Entity ID. Consequently, you can copy the entire product to your email campaign by entering the product number.
- Send it out
Send out your newsletter once you’re happy with it. Our dispatch servers are whitelisted, which means higher deliverability rates. If you send out newsletters manually from your own email account, more than half of these is likely to get blocked. Once you’ve sent out a few thousand newsletters, your computer or server will slow down, which would impact the reading experience for website visitors. With a whitelisted server, more than 99% of your emails will reach the inbox. Try Newsletter2Go now and use these beautiful templates: