RSSNewsRobot
Senior Member
Authors:
Susan Neuhaus
Rating:
0/5
Body:
Like many designers, I work on a wide variety of projects, from websites and brochures, to ads and emails. Recently, a clients 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:
Youre 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
[h=2]1. First up, Planning[/h] [h=3]Read the publications specs carefully[/h] When youre working with a tight schedule its tempting to dive in and start working. But on quick jobs, theres 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 advertisers 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 didnt allow this. Easy solution number two, using an existing template, didnt pan out either. All my templates had CSS in the header, again, not allowed. That leaves creating an HTML eBlast with inline CSS styles.
[h=3]Choose your tools[/h] 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.
[h=3]Decide how to speed the process.[/h] [h=4]Can some tasks be done concurrently?[/h] 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 didnt 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.
[h=4]What features are not absolutely necessary and could be scrapped if time runs out?[/h] 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 well do it if we have time task.
[h=3]Decide where the images and the online version will be hosted[/h] If the images will be saved to clients 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.
[h=2]2. Make the Photoshop Layout[/h] [h=3]Layout to fit the table[/h] 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.
[h=3]Prepare to export the HTML and Images[/h] [h=4]Decide which text is best as HTML and which is best as JPGs[/h] 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 clients 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.
[h=4]Note Styles and Colors[/h] 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 youll 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 youll have them for later use.
Measure the distance between live text and your column guides, so youll 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 youll markup faster if youre not switching back and forth while writing CSS styles.
[h=3]Slicing Your Layout for the Table[/h] 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.
[h=3]Export with Save for Web & Devices[/h] 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 projects folder in your websites 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.
[h=2]3. Adjust tables in an HTML editor[/h] Open the HTML from Photoshop in your HTML editor. Add a 2px border to the table to see your table cells clearly in preview mode. Youll take this out later as it is really, really ugly.
If the table structure is not as you expected, it could be faster to redo your slices in Photoshop and Save for Web & Devices again. And even if the table looks pretty good, youll probably still need to do some clean up. Fix any images that dont fit quite right. If theyre almost the right size, you can adjust the height or width in the img tag with minimal distortion. Note: during testing images that were exactly the width of the combined columns sometimes caused misalignment of the table. Making images just one pixel less wide (499px instead of 500px) solved the problem with no visible spaces.
Add a background color to the cells where you will have live text using bgcolor in the table, or td tags and the notes you took while preparing to export from Photoshop. Add a background color to the body tag, if desired.
[h=3]Crop and add images that will be below or above your text[/h] In the sample project, there are birds below the starred review text. Photoshop makes an image the size of the whole cell.
Open this image and crop it so theres room for the text. Since the birds are silhouetted on the same color as the table background, the birds will appear seamlessly on the background with the text.
[h=3]Add live text[/h] Add text View this on the web. above your table. This will be a link to the file a web server. The destination can be blank for now. You can put in the static URL when youve uploaded the file.
Copy and paste text from your Photoshop layout into the appropriate cell. Go back and forth between the preview with the ugly borders and the HTML to confirm youve pasted the text into the right place if necessary.
Add Please do not respond to this email, it is from an unmonitored email address with opt out information and a link below the table.
Style your text. The sample project uses inline CSS to conform to the publishers specifications. (See Three Ways to Insert CSS at W3schools.com)
Change the table border back to 0.
[h=2]4. Send for Review[/h] [h=4]Upload the HTML and images to your server[/h] Replace all image links with absolute URLs: http://www.yourserver.com/clientfolder/images/eblast-design_11.jpg so that they can be served when the eBlast is opened. If your web-editing software doesnt track versions for you, be sure to do this both in the HTML on your hard drive and the HTML on the web server so the editions are in sync.
Add the static link to your eBlast to the link for View this on the web. It might seem weird to add a link to an HTML document into the HTML document, but it will be needed when you send the page to be reviewed in an email client.
[h=4]Send the eBlast as an email[/h] View your eBlast HTML in Safari. If you dont use Safari, there are add-ons available for Firefox, Internet Explorer, and Chrome that will allow you to email a page.
Under the file menu, select Mail Contents of this page or command+I
[h=2]5. Testing[/h] Its always best to test in as many actual environments as you can. In this time frame, we tested in available email clients and used an online testing service, emailonacid.com. In addition to previews in multiple desktop and mobile environments, they have FAQs, plus support and community threads for troubleshooting.
[h=3]Issues in the sample project[/h] Adding a 1px-tall fifth row with width specified in pixels for all 6 columns helped the table to hold together in some email clients (Im talking to you, Windows Mail). Specifying what I didnt want was as important as specifying what I did want. For web design projects, I use the Meyer Reset in my CSS. Here, that was not possible since I could have no CSS in the head of my document. So I had to specify things like style="border:0;" for the logo and style=list-style:none; for the awards.
In some tests, HTML entities, like &rquo for right quotes, displayed as junk characters if the viewer had chosen a font for email viewing that didnt have a large character set. The entity number might have worked, but we chose to substitute common charactersinch marks instead of curly quotes for examplejust to be on the safe side.
[h=2]6. Finishing up[/h] When the eBlast tests results are satisfactory, send the HTML to the client. Leave the HTML and images in place on the web server. The images will be called by email clients when your eBlast is viewed. Leave the HTML in place so the eBlast can be viewed on the on the web if needed.
The final result is here: Parrots over Puerto Rico eBlast sample project.
Thanks to Lee & Low Books for graciously allowing the use of their eBlast for the sample project. Thanks also to Brian Maya for help with the eBlast and the article.
Inserted Article Image(s):
Article Slider image:
[h=2]Liked This? Read These![/h] [TABLE="class: views-view-grid cols-2"]
[TR="class: row-1 row-first"]
[TD="class: col-1 col-first"] [h=3]New Book on HTML Email Design and Marketing[/h]
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
[/TD]
[TD="class: col-2 col-last"] [h=3]Free Guide to HTML Email Design[/h]
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
[/TD]
[/TR]
[TR="class: row-2 row-last"]
[TD="class: col-1 col-first"] [h=3]Make HTML Markup Easier with BlogAssist[/h]
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
[/TD]
[TD="class: col-2 col-last"] [h=3]ViewSource: Build Interactive HTML Tables with Dreamweaver CS4[/h]
While HTML tables have been used in many different ways during the short life of HTML, theyre best suited for their original purpose -- displaying data. A tables spreadsheet-like presentation is a... Read More
[/TD]
[/TR]
[/TABLE]
Business
Business Practices
Marketing
Graphics
Graphics Image Editing
Web/Mobile
Web Design & Layout
More...
Susan Neuhaus
Rating:
0/5
Body:
Like many designers, I work on a wide variety of projects, from websites and brochures, to ads and emails. Recently, a clients 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:
Youre 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
[h=2]1. First up, Planning[/h] [h=3]Read the publications specs carefully[/h] When youre working with a tight schedule its tempting to dive in and start working. But on quick jobs, theres 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 advertisers 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 didnt allow this. Easy solution number two, using an existing template, didnt pan out either. All my templates had CSS in the header, again, not allowed. That leaves creating an HTML eBlast with inline CSS styles.
[h=3]Choose your tools[/h] 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.
[h=3]Decide how to speed the process.[/h] [h=4]Can some tasks be done concurrently?[/h] 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 didnt 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.
[h=4]What features are not absolutely necessary and could be scrapped if time runs out?[/h] 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 well do it if we have time task.
[h=3]Decide where the images and the online version will be hosted[/h] If the images will be saved to clients 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.
[h=2]2. Make the Photoshop Layout[/h] [h=3]Layout to fit the table[/h] 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.
[h=3]Prepare to export the HTML and Images[/h] [h=4]Decide which text is best as HTML and which is best as JPGs[/h] 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 clients 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.
[h=4]Note Styles and Colors[/h] 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 youll 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 youll have them for later use.
Measure the distance between live text and your column guides, so youll 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 youll markup faster if youre not switching back and forth while writing CSS styles.
[h=3]Slicing Your Layout for the Table[/h] 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.
[h=3]Export with Save for Web & Devices[/h] 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 projects folder in your websites 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.
[h=2]3. Adjust tables in an HTML editor[/h] Open the HTML from Photoshop in your HTML editor. Add a 2px border to the table to see your table cells clearly in preview mode. Youll take this out later as it is really, really ugly.
If the table structure is not as you expected, it could be faster to redo your slices in Photoshop and Save for Web & Devices again. And even if the table looks pretty good, youll probably still need to do some clean up. Fix any images that dont fit quite right. If theyre almost the right size, you can adjust the height or width in the img tag with minimal distortion. Note: during testing images that were exactly the width of the combined columns sometimes caused misalignment of the table. Making images just one pixel less wide (499px instead of 500px) solved the problem with no visible spaces.
Add a background color to the cells where you will have live text using bgcolor in the table, or td tags and the notes you took while preparing to export from Photoshop. Add a background color to the body tag, if desired.
[h=3]Crop and add images that will be below or above your text[/h] In the sample project, there are birds below the starred review text. Photoshop makes an image the size of the whole cell.
Open this image and crop it so theres room for the text. Since the birds are silhouetted on the same color as the table background, the birds will appear seamlessly on the background with the text.
[h=3]Add live text[/h] Add text View this on the web. above your table. This will be a link to the file a web server. The destination can be blank for now. You can put in the static URL when youve uploaded the file.
Copy and paste text from your Photoshop layout into the appropriate cell. Go back and forth between the preview with the ugly borders and the HTML to confirm youve pasted the text into the right place if necessary.
Add Please do not respond to this email, it is from an unmonitored email address with opt out information and a link below the table.
Style your text. The sample project uses inline CSS to conform to the publishers specifications. (See Three Ways to Insert CSS at W3schools.com)
Change the table border back to 0.
[h=2]4. Send for Review[/h] [h=4]Upload the HTML and images to your server[/h] Replace all image links with absolute URLs: http://www.yourserver.com/clientfolder/images/eblast-design_11.jpg so that they can be served when the eBlast is opened. If your web-editing software doesnt track versions for you, be sure to do this both in the HTML on your hard drive and the HTML on the web server so the editions are in sync.
Add the static link to your eBlast to the link for View this on the web. It might seem weird to add a link to an HTML document into the HTML document, but it will be needed when you send the page to be reviewed in an email client.
[h=4]Send the eBlast as an email[/h] View your eBlast HTML in Safari. If you dont use Safari, there are add-ons available for Firefox, Internet Explorer, and Chrome that will allow you to email a page.
Under the file menu, select Mail Contents of this page or command+I
[h=2]5. Testing[/h] Its always best to test in as many actual environments as you can. In this time frame, we tested in available email clients and used an online testing service, emailonacid.com. In addition to previews in multiple desktop and mobile environments, they have FAQs, plus support and community threads for troubleshooting.
[h=3]Issues in the sample project[/h] Adding a 1px-tall fifth row with width specified in pixels for all 6 columns helped the table to hold together in some email clients (Im talking to you, Windows Mail). Specifying what I didnt want was as important as specifying what I did want. For web design projects, I use the Meyer Reset in my CSS. Here, that was not possible since I could have no CSS in the head of my document. So I had to specify things like style="border:0;" for the logo and style=list-style:none; for the awards.
In some tests, HTML entities, like &rquo for right quotes, displayed as junk characters if the viewer had chosen a font for email viewing that didnt have a large character set. The entity number might have worked, but we chose to substitute common charactersinch marks instead of curly quotes for examplejust to be on the safe side.
[h=2]6. Finishing up[/h] When the eBlast tests results are satisfactory, send the HTML to the client. Leave the HTML and images in place on the web server. The images will be called by email clients when your eBlast is viewed. Leave the HTML in place so the eBlast can be viewed on the on the web if needed.
The final result is here: Parrots over Puerto Rico eBlast sample project.
Thanks to Lee & Low Books for graciously allowing the use of their eBlast for the sample project. Thanks also to Brian Maya for help with the eBlast and the article.
Inserted Article Image(s):
Article Slider image:
[h=2]Liked This? Read These![/h] [TABLE="class: views-view-grid cols-2"]
[TR="class: row-1 row-first"]
[TD="class: col-1 col-first"] [h=3]New Book on HTML Email Design and Marketing[/h]
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
[/TD]
[TD="class: col-2 col-last"] [h=3]Free Guide to HTML Email Design[/h]
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
[/TD]
[/TR]
[TR="class: row-2 row-last"]
[TD="class: col-1 col-first"] [h=3]Make HTML Markup Easier with BlogAssist[/h]
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
[/TD]
[TD="class: col-2 col-last"] [h=3]ViewSource: Build Interactive HTML Tables with Dreamweaver CS4[/h]
While HTML tables have been used in many different ways during the short life of HTML, theyre best suited for their original purpose -- displaying data. A tables spreadsheet-like presentation is a... Read More
[/TD]
[/TR]
[/TABLE]
Business
Business Practices
Marketing
Graphics
Graphics Image Editing
Web/Mobile
Web Design & Layout
More...
