Style Web Content with InDesign

Layout created by Codify Design Studio

You’ve completed your InDesign layout — including styles, swatches, images, and formatted text. Now that you’ve done all that work, how do you re-purpose your InDesign content for the web? Did you know that you can harness the power of InDesign to output HTML and web graphics?

Anything can have a style in InDesign

InDesign is one of the most stylin’ applications in the Creative Cloud. That’s because there are so many things in InDesign that can be attached to styles. In addition to text, styles can be created and applied to any object, text and graphic frames, and even added to advanced object properties, such as Anchored Objects.

As you style your InDesign document, you are actually adding structure to the content. It is this structure that lets InDesign map elements of your layout to HTML markup.

Coordinating assets across design and development

As a designer, you know the challenges with keeping assets up to date. Clients update logos and corporate colors, art directors choose new photography, and your own design explorations lead to changes in the overall brand identity of your projects. Creative Cloud Libraries allow you to save and share design assets and styles with your whole team.

And this workflow goes far beyond InDesign. Your Creative Cloud Libraries provide collaboration possibilities within all Creative Cloud applications, including video, motion graphics, and web development. We’ll talk more about this a bit later.

Exporting HTML from InDesign

With our styles applied, it’s time to inform InDesign of the relationship we’d like to create between our print layout and HTML. When editing a Paragraph Style, there is a section named Export Tagging. This section gives you the opportunity to associate that style with an HTML element when exporting your content for use by a web developer.

For example, your web developer may have set up web styles to target an “h2” element in HTML for all subheads. Using the Export Tagging option, you can make an association between your “Heading B” style in InDesign, and an “h2” tag in the exported HTML.

Once you have assigned HTML elements to your Paragraph Styles, choose Export from the file menu, and choose HTML in the format drop-down menu before you click save.

The resulting HTML is now ready to be shared with your web developer.

Access your library assets in Dreamweaver

Your Libraries aren’t just for design! When editing HTML and CSS within Dreamweaver, your library assets can be accessed directly within the code of a web page. Applying a font color value in Dreamweaver, for example, activates a menu loaded with swatches in your library. And if the color is specified in CMYK, Dreamweaver will convert it to RGB automatically.

So, while InDesign can directly supply your web developer with the content and structure, libraries can supply additional assets including style and design properties.

Watch these features in action

Join me in this recorded webinar, where we’ll explore the many possibilities for preparing web content and graphics directly from InDesign.

We’ll look at best practices for working with paragraph and character styles, graphic effects, object styles, CC Libraries, and HTML export to help you join in on the web workflow.

In this session, you’ll learn about:

_Adobe Creative Cloud e-learning series:
_Style Content with Adobe InDesign CC