How to convert an InDesign file to HTML code?

[MiaMagnolia]

I have a graphic design artist that produces our newsletter in InDesign.  I use InDesign but am a somewhat self-taught beginner.  I would like to incorporate the background of the newsletter into a software I use for email marketing and they need a source code. 

Question #1 - would converting it to HTML supply the source code?

Question #2 - if not what are suggestions to accomplish this? Because the software is particularly unique like constant contact and will not allow me to create background images with text on top.

[Derek Cross]

HTML Newsletters are rather difficult to produce as they have to meet the needs of several different mailing applications. You can created them is Dreamweaver and by coding in other specialist applications, such as Coda, but it's a steep learning curve. You'd probably be better working with Constant Contact or Mailchimp and accepting their limitations.

Another route worth experimenting with would be exporting your newsletter using InDesign's Publish Online and sending a link to subscribers and adding it to the organisations's website. You can enable it so that recipients can download a PDF version of the Newsletter.

[BobLevine]

What Derek said.

Trying to design an email newsletter in InDesign is a fool’s errand. It’s a complete waste of time and effort.

[MiaMagnolia]

You are exactly right however I am not a fool!  Perhaps you misunderstood it is the background I am trying to create in a form that can be used in a newsletter template.

[rob day · Accepted solution]

I would like to incorporate the background of the newsletter into a software I use for email marketing and they need a source code.

It sounds like you just want to use the background image in an email–you're not trying to reproduce the newsletter right?

Because the software is particularly unique like constant contact and will not allow me to create background images with text on top.

If you are using a Constant Contact like email service a template could consist of image files with the text being part of the image. That's not an uncommon strategy, but you have to design for it. So here is an example from my spam folder where the email is a 700px wide table of images (there's no html text):

The email parts opened into Photoshop:

Something like this could be laid out in InDesign and exported to Photoshop for slicing.

[MiaMagnolia]

Thanks, Rob Day you are right Just the background. Thanks for the tip.

[rob day]

Here's an table/image example. The 600 pixel InDesign layout on the left, which gets exported to Photoshop for slicing, and the HTML table served to Apple's Mail client on the right. Note that the HTML table is not generated by ID, you would have to build the table template with your email service.

Edit: it's Mail on the right not Safari

[JonathanArias]

The reason it will not allow you ever to have an image with text on top is because there are several email programs that do not accept "background images" ex: outlook.

What make constant contact, mail chimp and dotmail.com great is that they will not allow you to do something that will not work on ALL email programs. If it does allow you to you do it, it has a reason why. here is a complete lists per email program what you can and cannot do:

CSS Support Guide for Email Clients | Campaign Monitor

You will never be able to make in indesign layout and export html that works in email programs because indesign code is not the correct code to use for email newsletters. not all HTML codes are created equal.

If you place text on top of the image, that entire thing needs to be exported as an image (sliced) and place into the image space you created in constant contact layouts. 

You can create however create "illusions" of images and text playing together, here is how:

Two columns, with one row, on the left the image on the right the text. On your mockups you can have the image fade into a color, a flat color. Slice. now in constant contact place the image on the left, and on the right paste your text and style with the background color you want, the alignment and padding you need to match your mock up. 

I just did something like this just this week. I created the mockup of what it will visually look in adobe illustrator, i sliced the images and i place the text on dotmail.com ( its just like constant contact). I stylized the text the way i wanted, so they look like its all on piece, but only the left section is the image ( the hand pointing, the people on the dotted line with the arrow, the rocket, those are images on transparent background, the text next to it is made using the html tool.

look:

Jonathan Arias

[JonathanArias]

here are the image screenshots of what things look like on dotmailer.com so you can see: