Make an eBlast Promotion with Photoshop and HTML/CSS

Rating: 
Body: 

Like many designers, I work on a wide variety of projects, from websites and brochures, to ads and emails. Recently, a client’s book was getting great reviews and they wanted send out an eBlast promotion through a third party. Due tomorrow. So I needed to design, markup, and test the eBlast as quickly as possible.

This article outlines the process I used for the eBlast, and it assumes:

• You’re pretty comfortable in Adobe Photoshop, you know how to use layers and guides, the Eyedropper Tool, Save for Web and Devices
• You know basic HTML and CSS and have an HTML editor, such as Coda, Dreamweaver, TextWrangler or BBEdit for markup
• You have access to a web server and can upload files and images

1. First up, Planning

Read the publication’s specs carefully

When you’re working with a tight schedule it’s tempting to dive in and start working. But on quick jobs, there’s no time to redo anything.

For the sample project the publication specified, among other things:

• using a single JPG for the eBlast is not allowed
• maximum file size 75k or 100k
• no CSS in the header
• may not reference a remote CSS file
• images must be hosted on the advertiser’s server
• maximum width 728px
• maximum image size 300px x 600px

The easiest solution would be making a single JPG image for the eBlast, but the publication didn’t allow this. Easy solution number two, using an existing template, didn’t pan out either. All my templates had CSS in the header, again, not allowed. That leaves creating an HTML eBlast with inline CSS styles.

Choose your tools

Old-school HTML layouts in tables are rendered pretty consistently in email clients. Photoshop outputs HTML tables and images slices, using the “Save for Web and Devices” command, so it is a good layout tool for this eBlast project. The HTML can be opened in an editor for final markup.

Decide how to speed the process.

Can some tasks be done concurrently?

There are probably a few labor-intensive elements in your project. In the sample project, the artwork features detailed cut-paper illustrations that require meticulous silhouetting. I didn’t have time to do this for each design iteration, so I asked the client to trust, based on past projects, that I would silo the art properly. Also done concurrently: online testing and proofreading. Once the layout is approved, any text changes are unlikely to affect the overall appearance and function of the HTML markup.

What features are not absolutely necessary and could be scrapped if time runs out?

In the sample project we saved responsive conversion for last. We felt most people will be reading this eBlast at work on their computers, the layout would be pretty simple and bold with little text, and it would feature strong images that will be distinguishable on a small cell phone screen. So converting the HTML to a responsive layout was a “we’ll do it if we have time” task.

Decide where the images and the online version will be hosted

If the images will be saved to client’s server and served to the email client from there, get necessary logins. For the sample project, I hosted the images on my web server. Either way, to test the eBlast, it will need to be uploaded to a web server. Create a folder for your project within your local website folder.

2. Make the Photoshop Layout

Layout to fit the table

For the sample layout, I created an RGB Photoshop document 600px wide, planning a 6-column table of 100px per column. Using the colspan attribute I could set cell widths from 100 to 600 to work with for layout variety. Pull out vertical guides to indicate the maximum number of columns you expect your table rows to have.

Now design your eBlast, keeping the table in mind. Each table row has to have a total of 6 columns. For instance, in the first row, the headline spans 5 columns, a bird image fits into 1. 5+1= 6. In the next row has text and art spanning 3 columns, art and book specs spanning 2 columns, art spanning 1 column. 3+2+1=6.

Before finalizing the layout, set horizontal guides where you expected rows to be.

 

When your layout is approved, its time to make the images and the HTML.

Prepare to export the HTML and Images

Decide which text is best as HTML and which is best as JPGs

Some people may view the eBlast with image viewing turned off, so all text as images will be readable only if the alt tag is filled in. However, there are style limitations to live text in email clients. For the sample project, we kept the headline treatment and client tagline as JPGs, and plan to put the text in the alt tag. The starred reviews and book information will be live text so they are readable without images on, and they can be typeset with the email client’s default san-serif font without much design degradation. (Arial haters may need to take a deep breath here.)

Hide the Photoshop layers with the live text.

Note Styles and Colors

To make markup easier, take some notes now about the parts of your layout that will be specified in CSS and HTML. Use the eyedropper tool to sample and make a note of the colors you’ll be using for the background of any text cells, as well as the colors of text or any other HTML elements you plan to use, such as borders or horizontal rules. If you cut and paste the hexadecimal values (six digits in the # field) into a blank document in your HTML editor you’ll have them for later use.

Measure the distance between live text and your column guides, so you’ll know what the cellpadding should be, and make any other notes about your layout that will be helpful later, such as font sizes. You can always go back to the Photoshop layout, but you’ll markup faster if you’re not switching back and forth while writing CSS styles.

Slicing Your Layout for the Table

Using the Slice tool, manually set slices so you can control colspans. Drag diagonally with the knife tool from guide to guide to define your cell as a slice.

Export with “Save for Web & Devices”

Select “Save for Web & Devices” under the File Menu

Check that your slices look right, using the Toggle Slices Visibility Button.

In the Save for Web dialog box, choose:
Format: HTML and Images
Settings: Default settings (background images are not well supported in email clients)
Slices: All User Slices

Select the project’s folder in your website’s local folder (the one you made in the planning phase).

Photoshop will automatically create an HTML document, and make a JPG of each of your slices. The JPGs will have your document name plus an incremental number, and be in a folder labeled “images.”

Liked This? Read These!

Press Release SitePoint's newest book release, Create Stunning HTML Email That Just Works! ($29.95 USD), is now hitting shelves across the US. HTML email design commonly has... Read More
MailChimp is an email delivery and management platform. As you might have suspected from its less-than-stuffy name, it's also a company with an odd sense of humor. That odd humor is everywhere in the... Read More
Dejal Systems has announced the immediate availability of Dejal BlogAssist 2.2.2, a handy tool to help blog and Web site editing by making HTML markup easier. There are three easy ways to use... Read More
While HTML tables have been used in many different ways during the short life of HTML, they’re best suited for their original purpose -- displaying data. A table’s spreadsheet-like presentation is a... Read More