Exporting InDesign to HTML: Images

Tl;dr: skip to Putting It All Together to read the conclusion without having to read the adventure it took to get there.

Overview

This is part 3 of a multi-part series where I do a deep dive into Adobe InDesign’s export to HTML functionality, with this post’s focus on images.

Part 1, Exporting InDesign to HTML: The Basics took a look at exporting basic document elements: title, headers, text (including bolded and italicized text), bulleted lists and numbered lists.

Part 2, Exporting InDesign to HTML: Tables took a look at the steps necessary to export semantically correct tables from InDesign to HTML.

Background

I much prefer posting long-form documents to the web as HTML. It’s not that I dislike PDFs, but experiencing a PDF on a smartphone and, sometimes, on a tablet is irritating. But creating a PDF is much faster than marking up a long document in HTML.

Enter Adobe InDesign, a document production app most often associated with print documents (and PDFs). But in the past few years Adobe has worked to make it viable in the digital publishing space. And one aspect of that is the ability to export a document to HTML.

That functionality intrigues me because the potential efficiencies created by a fully-featured, well-executed export function are measurable. So I decided to do a deep dive into this with three questions framing my assessment:

  • How semantic and clean is the markup on export?
  • How does a complex document export to HTML?
  • How robust are the options when exporting to HTML?

The Approach

I want to continue being methodical about this, so that as I found pitfalls in the process I would be able to know where to fix things and adjust along the way.

My approach:

  1. In a change from my previous posts, I did not update the source Word document. In my experience, images (or other vector or raster graphics) are usually independent files placed in InDesign;
  2. Identify often-used elements, like a photo caption and a photo credit, to ensure that images needing those elements export correctly;
  3. Use the standard paragraph and character styles found in Word, if possible, to be consistent across apps and, if not possible, create the necessary new ones; and
  4. Iteratively add complexity once I met with success doing the simple markup export and successes with each level of complexity added.

Often-Used Elements with Images

In many instances, a placed graphic will need a caption or a credit of some kind. And in those instances in HTML, the following things need to happen:

  • The <img> tag should be wrapped in the <figure> tag;
    • Solution: Create paragraph style called Figure, assign <figure> tag to export tag
  • The <img> tag’s alt parameter needs to have content added;
    • Solution: select the image, right-click, then choose Object Export Options…
  • The image caption and/or credit needs to be wrapped in the <figcaption> tag;
    • Solution:
      • create an object style called Image Figcaption;
      • Assign <figcaption> to the Export Tagging and assign it to the text box containing both the caption and the credit (both of which have their own paragraph styles;

Export Attempts

It took me 28 export attempts spread across several hours over the course of several days before I finally had the HTML exporting correctly. Rather than detail each of those attempts, I’m just going to go directly to the solution.

Putting It All Together

This is a multi-step process involving creating paragraph styles, object styles, text and image frames and grouping them all together. Once one is created, though, it can be added to an Adobe CC Library so that it’s easily available whenever it’s needed.

Create New Paragraph Styles

  • Caption: create a new paragraph style named Caption and in the “Export Tagging” option assign:
    • Tag: p
    • Include Classes in HTML: checked
    • Class: caption
  • Credit: create a new paragraph style named Credit and in the “Export Tagging” option assign:
    • Tag: p
    • Include Classes in HTML: checked
    • Class: credit
  • Figure: you’ll never actually assign this style to anything, but one of the Object Styles you’ll create below does; it’s necessary for spacing. Create a new paragraph style named Figure and in the “Export Tagging” option assign:
    • Tag: figure

Create the Object Styles

Ended up creating three object styles: one called Figure, one called Image Normal and one called Image Figcaption. Combined together, these three object styles successfully create almost semantically correct HTML output.

  • Create the Figure object style :
    • Anchored Object Options:
      • Position: choose Inline or Above Line
      • Select Above Line
        • Alignment: left
          • Space before: 0
          • Space after: 0
    • Export tagging:
      • Tag: enter figure
  • Create Image Normal object style
    • Basic Attributes
      • Paragraph style: assign Figure
      • Text Wrap: off
      • Anchored Object Options:
        • Position: choose Inline or Above Line
        • Select Above Line
          • Alignment: left
          • Space before: 0
          • Space after: 15
      • Export Tagging: leave set to [automatic]
    • Export Options > Alt Text choose Custom from “Alt Text Source” menu
  • Create the Image Figcaption object style
    • Basic Attributes
      • Anchored Object Options:
        • Position: choose Custom
        • Anchored Object Reference Point: choose the upper, left-hand square in the grid
        • Anchored Position Reference Point: choose the middle, left-hand square in the grid with:
          • X Relative To: choose Text Frame with X Offset at 0
          • Y Relative To: choose Baseline with Y Offset at 0
      • Export Tagging:
        • Tag: enter figcaption

Create a Group of Text and Image Frames and Assign Object Styles

These three object styles need to be combined together to create one object that will export to semantically correct HTML for images with captions and/or credits.

  1. Create a frame and assign it the Figure object style. Make sure the frame is wide enough to stretch from the left to right margin of your document and tall enough to take up about half a page.
  2. Create another frame and assign it the Image Normal object style. (It helps to place an image in the frame.)
  3. Create a third frame and assign it the Image Figcaption object style. In that frame insert the following text:
    1. Photo credit and assign it the Credit paragraph style
    2. Caption and assign it the Caption paragraph style
  4. Select the Image Normal frame and cut and paste it into the Figure frame.
  5. Select the Image Figcaption frame and cut and paste it into the Figure frame below the Image Normal frame

Add it to Your CC Library

Add this new group of frames to your “Presos, Proposals and Pubs” CC library so you can easily insert this into documents later.

  1. Select the Figure frame
  2. From the CC Library palette click the + button and choose Graphic.

Inserting a Figure

Insert the Figure text frame inline wherever you need an image placed.

Exporting to HTML

On my 28th—and first successful—export attempt, I used the following settings.

Export Screen

To export to HTML:

  1. Choose Export… from the File menu
  2. In the “Export” window:
    1. Enter a filename in the “Save As” field (it is pre-populated with the name of your InDesign file)
    2. Choose HTML from the “Format” dropdown menu
    3. Click Save
  3. In the “HTML Export Options” window:
    1. General: I left everything as-is
    2. Image: I left everything as-is
    3. Advanced: I chose Include classes in HTML with Generate CSS and Preserve Local Overrides not checked.
  4. Click OK

HTML Markup Review

A quick review of the markup shows a semantically correct marked up image.

What’s Next?

I’ve covered mapping the basic HTML tags in part 1 and exporting tables in part 2. Those two entries, combined with this post about images, should cover the majority of use cases. There are, however, often-used HTML tags that do need to be addressed and I’ll be taking a look at those in my next entry in this series.

Exporting InDesign to HTML: Tables

Tl;dr: skip to Putting It All Together to read the conclusion without having to read the adventure it took to get there.

Overview

This is part 2 of a multi-part series where I do a deep dive into Adobe InDesign’s export to HTML functionality, with this post’s focus on tables.

Part 1, Exporting InDesign to HTML: The Basics took a look at exporting basic document elements: title, headers, text (including bolded and italicized text), bulleted lists and numbered lists.

Background

I much prefer posting long-form documents to the web as HTML. It’s not that I dislike PDFs, but experiencing a PDF on a smartphone and, sometimes, on a tablet is irritating. But creating a PDF is much faster than marking up a long document in HTML.

Enter Adobe InDesign, a document production app most often associated with print documents (and PDFs). But in the past few years Adobe has worked to make it viable in the digital publishing space. And one aspect of that is the ability to export a document to HTML.

That functionality intrigues me because the potential efficiencies created by a fully-featured, well-executed export function are measurable. So I decided to do a deep dive into this with three questions framing my assessment:

  • How semantic and clean is the markup on export?
  • How does a complex document export to HTML?
  • How robust are the options when exporting to HTML?

The Approach

I want to continue being methodical about this, so that as I found pitfalls in the process I would be able to know where to fix things and adjust along the way.

My approach:

  1. Update the source Word document I’d created in Part 1 to include a table;
  2. Use the standard paragraph and character styles found in Word to be consistent across apps;
  3. Format the table in Word so that the first row of the table is a header; and
  4. Iteratively add complexity once I met with success doing the simple markup export and successes with each level of complexity added.

Update the Source Word Doc

I added a simple three column by three row table to the Word doc and assigned the top row as the header.

Added a simple table to the source Word document.
Added a simple table to the source Word document.

Update the InDesign Document

I re-imported the text from the Word doc to InDesign and realized several things:

  • There is no standard paragraph style in Word for table headers;
  • In many instances the typography in tables is different than the body copy type; and
  • I can’t assign the <th> and <td> tags to the “Normal” Word paragraph style, so I’m going to need to create some new styles.

So I created the two new paragraph styles:

  • Table Header: to customize the font and font size for a table’s header and to map the <th> tag;
  • Table Normal: to customize the font and font size for content in a table and to map the <td> tag.

I also updated two Word docs with the new styles:

  • Style Mapping – Word to HTML doc: since this is my “source of truth” document, all the styles should be in this document.
  • InDesign to HTML Word Doc: the document with the dummy text that I’m using to test the functionality

Export Attempt 1

With my new table-specific paragraph styles created, including the mapping to the <th> and <td> tags, I did my first export. I kept the same “Export to HTML” settings in InDesign that I’d done in Part 1.

The table code is very clean, except by mapping the <th> and <td> tags to my newly-created, table-specific paragraph styles it ended up duplicating the tags.

I also noted that there is no <caption> tag inside the <table> markup.

The <th> and <td> tags are duplicated because I mapped the paragraph styles to them.
The <th> and <td> tags are duplicated because I mapped the paragraph styles to them.

Export Attempt 2

I removed the <th> and <td> tag mapping in the Table Header and Table Normal paragraph styles respectively. InDesign wouldn’t let the field be blank, so I chose “[Automatic].”

I created the “Table Caption” paragraph style and mapped it to the <p> tag with the class “table-caption.”

This time the export:

  • Put the table caption in a <p class=“table-caption”> tag, and
  • Surrounded the table cell text in <p> tags. In my research, proper HTML table markup does not require text to be surrounded by <p> tags.
This time InDesign surrounded the text in the table cells with <p> tags.
This time InDesign surrounded the text in the table cells with <p> tags.

I could not find a way to have the text export without the <p> tag, so I assigned the class “excess-p” to both paragraph styles. That way I can do a find/replace in the HTML to remove it after export.

Export Attempt 3

Before exporting I updated the “CSS Options” in InDesign’s “Export to HTML > Advanced” panel settings to:

  • Include classes in HTML,
  • Generate CSS, and
  • Preserve local overrides

On export I received this error:

Error notification: CSS name collision : 2 detected. Paragraph Style “Table Header” and “Table Normal” generate conflict css name “excess-p”

But it let me continue and exported the HTML. This export produced some messier markup. InDesign:

  • Created an external CSS file (probably because the “Generate CSS” checkbox was checked), and
  • Added unnecessary classes to the <table>, <col>, <tr> and <td> tags; it also added unnecessary classes to the nested unordered lists elsewhere in the markup.

Export Attempt 4

This time I updated the “CSS Options” in InDesign’s “Export to HTML > Advanced” panel settings to Include classes in HTML but unchecked Generate CSS, which then made the Preserve local overrides option unavailable.

This time I did not get the CSS error prior to export and InDesign only assigned unnecessary classes to the <table>, <tr> and <td> tags.

Export Attempt 5

After doing some searching on the Web, I came no closer to finding a way to prevent InDesign from adding unnecessary classes to the <table>, <tr> and <td> tags, so I decided to take a look at table and cell styles.

Cell Styles

Cell styles, like paragraph and character styles, provide extensive options to quickly style a table cell. One of those options is to assign a paragraph style to text that appears in a table cell. I created two cell styles:

  • Table Header: to create a standard design for table headers across Brettro documents, including assigning the Table Header paragraph style; and
  • Table Data: to create a standard design for table cells across Brettro documents, including assigning the Table Normal paragraph style.

Table Styles

Table styles, also like paragraph and character styles, provide extensive options to quickly (and consistently) format tables in documents, like choosing cell styles for header rows, body rows and footer rows. I created a table style called “Table Normal” with the “Header Rows” set to the “Table Header” cell style and the “Body Rows” set to “Table Data” cell style.

The Export

When exported with table and cell styles applied, InDesign adds those styles as classes to the HTML markup. While they’re still unnecessary, it is a hook for a search-and-replace to quickly remove them in the HTML.

Now that these are automatically included, I updated the “Table Header” and “Table Normal” paragraph styles export mapping to “[Automatic]” and removed the “excess-p” class. It is unnecessary.

Putting it All Together

It does not appear that InDesign provides a way to export tables to HTML without assigning unnecessary classes and HTML tags. That’s unfortunate, but using regular expressions easily and quickly removes the extra classes and tags using the find/replace feature available in just about every code editor.

To create clean, semantically correct HTML markup for tables you’ll need to do two things:

  1. Create paragraph styles specific to tables and then create cell and table styles. you’ll only need to do this once and then add those styles to your “Presos, Proposals and Pub Type Styles” CC library for repeated quick access to them.
  2. After exporting to HTML, do several find/replace steps using regular expressions to remove the extra markup. you’ll need to do this with every document you export, but it is a very quick step.

Create Paragraph, Cell and Table Styles

  • Create “Table Header” paragraph style with export mapping the “Tag:” to [Automatic].
  • Create “Table Normal” paragraph style with export mapping the “Tag:” to [Automatic].
  • Create “Table Caption” paragraph style with export mapping the “Tag:” to p with class table-caption.
  • Create “Table Header” cell style assigning the “Table Header” paragraph style.
  • Create “Table Data” cell style assigning the “Table Normal” paragraph style.

Find and Replace

Using a regular expression to quickly remove unnecessary classes, spaces and tags:

  1. Fix the <p class="table-caption"> and the <table> tag:
    1. Find <p class="table-caption">(.*?)</p>[\r\n\t]+<table id="(.*?)" class="Table-Normal">
    2. Replace: <table>\n\t\t\t\t<caption>$1</caption> (The \n inserts a new line and the multiple \t’s insert tabs.)
  2. Fix the <tr> tags:
    1. Find: <tr class="Table-Normal">
    2. Replace: <tr>. (A regular expression is not used here.)
  3. Fix the <th> tags that appear as <td> tags, remove unnecessary classes and unnecessary <p> tags:
    1. Find: <td class="Table-Normal Table-Header">[\r\n\t]+<p>(.*?)</p>[\r\n\t]+</td>
    2. Replace: <th>$1</th>
  4. Fix the <td> tags, remove unnecessary classes and unnecessary <p> tags:
    1. Find: <td class="Table-Normal Table-Data">[\r\n\t]+<p>(.*?)</p>[\r\n\t]+</td>
    2. Replace: <td>$1</td>

What’s Next?

Most long-form documents have more complexity than just the basic HTML tags I mapped in part 1 and the table workflow I mapped here, so as I explore this functionality stay tuned for additional entries on this topic.

Exporting InDesign to HTML: the Basics

Tl;dr: skip to Putting It All Together to read the conclusion without having to read the adventure it took to get there.

Overview

I much prefer posting long-form documents to the web as HTML. It’s not that I dislike PDFs, but experiencing a PDF on a smartphone and, sometimes, on a tablet is irritating. But creating a PDF is much faster than marking up a long document in HTML.

Enter Adobe InDesign, a document production app most often associated with print documents (and PDFs). But in the past few years Adobe has worked to make it viable in the digital publishing space. And one aspect of that is the ability to export a document to HTML.

That functionality intrigues me because the potential efficiencies created by a fully-featured, well-executed export function are measurable. So I decided to do a deep dive into this with three questions framing my assessment:

  • How semantic and clean is the markup on export?
  • How does a complex document export to HTML?
  • How robust are the options when exporting to HTML?

The Approach

I wanted to be methodical about this, so as I found the pitfalls in the process I wanted to be able to know where to fix things and adjust along the way.

My approach:

  1. Create a source Word document;
  2. Use the standard paragraph and character styles found in Word to be consistent across apps;
  3. Start simple by focusing on the (probably) most-often-used paragraph styles: Title, Heading 1, Heading 2, Heading 3 and Normal (which is the default style for body copy); and
  4. Iteratively add complexity once I met with success doing the simple markup export and successes with each level of complexity added.

Creating a Source Content Document

I started with a dummy Word doc, as most writing starts in a word processor like Word. My document contains multiple pages of “lorem ipsum” dummy text sprinkled with a title, several headings, secondary headings and tertiary headings.

Basic Document Formatting

I applied the following standard Word paragraph styles to the text in my document:

  • Title: for the document title
  • Heading 1: for the primary headings
  • Heading 2: for the secondary headings
  • Heading 3: for the tertiary headings
  • Normal: for the body text
Word doc with Title, Heading 1, Heading 2, Heading 3 and Normal paragraph styles in use.
Word doc with Title, Heading 1, Heading 2, Heading 3 and Normal paragraph styles in use.

With that start I decided to introduce some mild complexity to the document by adding:

  • A bulleted list using the “Bullets” icon in the ribbon
  • A nested bulleted list, also with the “Bullets” icon
  • A numbered list using the “Numbering” icon in the ribbon
  • A nested numbered list, also with the “Numbering” icon

Each of these list items is assigned the “List Paragraph” paragraph style by Word.

Adding Complexity with Text Formatting

Most documents have bold or italicized text somewhere in them as well as a hyperlink or two. I added those to the document as well.

  • Bold text: using the “Bold” button in the ribbon
  • Italic text: using the “Italic” button in the ribbon

Creating the InDesign Document

I created a basic letter-sized InDesign document and imported the source Word document using Place… from the File menu. InDesign imported from Word all the paragraph and character styles I had used. (An imported style is identified by an icon in either the “Paragraph Styles” or “Character Styles” palette that looks like a down arrow pointing into a hard drive.)

The imported style icon
The imported style icon

Assigning HTML Tags to Paragraph Styles

With the Word document imported, we can now assign the HTML tags to paragraph and character styles. To do so, double-click on any of the paragraph styles. As an example, I double-clicked on “Normal.”

The mapping of paragraph and character styles happens in the “Export Tagging” setting in the Style Options window.

To set the mapping for the “Normal” paragraph style do the following:

  1. In the “EPUB and HTML” settings area:
    1. Tag: set to p
    2. Include Classes in HTML: uncheck
  2. In the “PDF” settings area set the Tag to P.
  3. Click OK.

Now anything assigned the “Normal” paragraph style will export inside an HTML <p> tag. (You’ll also note the icon indicating an imported style is now gone. That’s because the style has been adjusted in InDesign.)

I set the mapping for the Title, Heading 1, Heading 2 and Heading 3 styles with the following settings:

  • Title: “Tag” set to h1; “Include Classes in HTML” unchecked
  • Heading 1: “Tag” set to h2; “Include Classes in HTML” unchecked
  • Heading 2: “Tag” set to h3; “Include Classes in HTML” unchecked
  • Heading 3: “Tag” set to h4; “Include Classes in HTML” unchecked

In just about every case I can think of, an HTML page has only one <h1> tag and that is reserved for the page’s title, which is why I set the Title style to “h1.” From there, it can be confusing to assign the Heading styles one number lower than their style number (for example, “Heading 1” as “h2”), but that will create properly, semantically structure HTML.

Assigning HTML Tags to Character Styles

I followed the same process for mapping the character styles as I did with the paragraph styles using the following settings:

  • Emphasis: “Tag” set to em; “Include Classes in HTML” unchecked
  • Hyperlink: “Tag” kept at Automatic; “Include Classes in HTML” unchecked
  • Strong: “Tag” set to strong; “Include Classes in HTML” unchecked

Export Attempt 1

With my HTML tags mapped to my paragraph and character styles, it’s time to try my first export!

Export Screen

To export to HTML:

  1. Choose Export… from the File menu
  2. In the “Export” window:
    1. Enter a filename in the “Save As” field (it is pre-populated with the name of your InDesign file)
    2. Choose HTML from the “Format” dropdown menu
    3. Click Save
  3. In the “HTML Export Options” window:
    1. General: I left everything as-is
    2. Image: I left everything as-is
    3. Advanced: I chose Include classes in HTML with Generate CSS and Preserve Local Overrides checked.
  4. Click OK

The HTML exported and a browser window opened to display it.

HTML Markup Review

It’s tough to see how semantically correct HTML markup is in a browser window, so I opened the HTML file in Nova, my favorite code editor for the Mac.

The first HTML export in Nova, my favorite code editor for the Mac.
The first HTML export in Nova, my favorite code editor for the Mac.

A quick scrub of the markup shows markup mostly without superfluous code, classes or ID’s, specifically:

  • Title style mapped to <h1>
  • Heading 1 mapped to <h2>
  • Heading 2 mapped to <h3>
  • Bolded text (assigned the Strong style) mapped to <strong>
  • Italicized text (assigned the Emphasis style) mapped to <em>

The bulleted lists and numbered lists are messier.

The bulleted and numbered lists have unnecessary classes and no indentation for nested lists.
The bulleted and numbered lists have unnecessary classes and no indentation for nested lists.

Fixing the Bulleted and Numbered Lists

Both the bulleted and numbered lists are assigned the “List Paragraph” paragraph style by Word. I did not assign an export mapping to it. After trying a few things that didn’t work in InDesign’s export mapping for the “List Paragraph” style, I returned to my source Word document and did the following:

  1. Assigned the bulleted lists the “List Bullet” paragraph style.
  2. Assigned the numbered lists the “List Number” paragraph style.
  3. For nested lists, I assigned the “List Bullet 2” and “List Bullet 3” styles depending on the level of nesting.

Back in InDesign, I then mapped the List Number, List Bullet, List Bullet 2 and List Bullet 3 paragraph styles by:

  1. Setting the “Tag” to li and unchecked “Include Classes in HTML” in the InDesign export mapping for the List Bullet, List Bullet 2, List Bullet 3 and List Number paragraph styles
  2. In the “Advanced” panel of the “HTML Export Options” screen (when you do File > Export…) I chose Don’t include classes in HTML.

With that, the HTML exported without the unnecessary classes.

Bullet and number lists exported without unnecessary classes.
Bullet and number lists exported without unnecessary classes.

What Did I Find?

In short, InDesign’s Export to HTML functionality is very robust and produces very clean, semantically correct HTML markup. But it does take some effort to set up the styles correctly to get there.

This underscored the value I found in the Adobe CC Libraries functionality as those carefully constructed paragraph and character styles can be added to a CC Library with every setting intact. This makes it extremely easy to expand this workflow to multiple people without requiring them to completely understand the nuances of HTML markup and the nuances of setting up the styles correctly.

And each time I added complexity to a document and met with success I wanted to push the functionality further and further. To that end, I have three more blog posts planned:

  • Often-used HTML tags
  • Tables
  • Images

Putting It All Together

The Export to HTML functionality requires paragraph and character styles mapped to HTML tags.

To create a repeatable, sustainable workflow, the most important first step is aligning HTML tags to paragraph and character styles and either saving those styles in an InDesign template document or in a CC Library. I prefer the CC Libraries because they are available anywhere and can be shared with others.

Here is a table with the mapping I did in this post:

Style NameStyle TypeHTML Tag
TitleParagraph<h1>
Heading 1Paragraph<h2>
Heading 2Paragraph<h3>
Heading 3Paragraph<h4>
NormalParagraph<p>
StrongCharacter<strong>
EmphasisCharacter<em>
List BulletParagraph<li>
List Bullet 2Paragraph<li>
List Bullet 3Paragraph<li>
List NumberParagraph<li>
Style Mapping to HTML Tags

Most long-form documents have more complexity than just the HTML tags I mapped here, so as I explore this functionality by adding additional complexity I’ll update this table.

Stay tuned for the additional three entries on this topic.

Product Numbering Standard: Moving to Lists

A few months ago I documented the Brettro Product Numbering Standard. Since then, Microsoft introduced Lists as part of Microsoft 365. After moving my editorial calendar to a list a few weeks ago, I decided to move the list where I kept and created product numbers for Brettro creative files from an Excel spreadsheet into Microsoft Lists.

Getting Ready

One option to create a new list is to import an Excel file. Since my current tracking document is an Excel spreadsheet I thought I’d give that a try. But I needed to do a few things before importing the list.

Prepping the Excel File

Every Microsoft List includes a “Title” column. It can be renamed to anything, but it starts as “Title.” My spreadsheet didn’t have a “Title” column, so I created one and populated it with the content in my “Slug” column. Looking back, it seems a bit duplicative to have done that, but it made sense at the time.

The next thing I needed to do was define a table in my spreadsheet. This was new to me, so I had to do a web search to learn how.

With that done, I needed to save the spreadsheet to my OneDrive. You have a choice to upload it to OneDrive during the import process, but I didn’t realize that until I’d started.

Create a SharePoint Document Library

Prior to creating this list, I was saving all Brettro’s creative files in my OneDrive. In planning the list, though, I realized I could use Power Automate to create folders to store the files related to the list entry automatically. I decided to have the Automate flow do that in a SharePoint document library, so I created a document library and using the “Move” function in OneDrive, I moved all my existing files to the library. And while this was overall pretty fast, it did take some time.

Now that the prep work is done, I can create my list!

Creating the List

The import-from-Excel process is very easy. In Microsoft Lists:

  1. Click New list button
    1. Choose From Excel
    2. Select the Excel file and click Next
    3. Assign column types to the columns; in my case:
      1. Set “Slug” column to Title
      2. Set “Product Category” column to Choice
      3. Set “Creation Date” to Do Not Import

And with that, the list was created.

Fine-Tuning the List

With the list created and the contents of my spreadsheet imported, I needed to do some fine tuning.

  • Confirmed that the “ID” column matches “Unique ID” column: all the product numbers I’d created previously had used a column in the spreadsheet called “ID.” It was important to make sure the unique ID number assigned to each entry matched that original ID column. A quick check determined that they matched.
  • Add all the choices to “Product Category”: the Product Numbering Standard has 20 different categories for products. I haven’t created a product in each category yet, so the “Product Category” column choices needed to be updated to include all of them.
  • Added the “Link to Folder” column: as I was preparing my Power Automate flow, I decided it would be nice to have a link in the list to the folder for the product. I added this column so that the flow could add that information once the folder was created.

Adding Some Automation

Microsoft’s Power Automate is an incredibly powerful automation tool for use in pretty much every Microsoft 365 product. I’m not going to go into detail about the Automate flow creation, except to say that the flow I created:

  • Populates the “Product Workspace & Filename” column in my list. The information is used to not only name the directory where files are stored but also the source document files.
  • Creates a folder in the directory structure. Using the “Product Category” column from the list, the flow can determine which directory in the directory structure to create a new folder and then create the folder with the correct filename.
  • Updates the list with a link to the folder. The list entry is then updated with a link to the newly created folder so that if you’re looking at the list, you can jump to the related files very quickly.

Changing the Standard

I developed my Product Numbering Standard before version control was really built-in to places where files were saved. SharePoint document libraries do have great version control, so with the move of all my creative files to SharePoint, I’ve removed the version number requirement from both the folder structure and the product ID.

Possibilities

Microsoft Lists have a great deal of potential. I have a few other ideas in mind for lists to create, though I’d like to someday do a deeper dive into how Lists, Microsoft Planner and Microsoft To Do all complement each other.

Blogging Workflow: Moving Editorial Calendar to Lists

When Lists launched as part of Microsoft 365 this past summer, one of the built-in templates included with it was a Content Scheduler. This template was the most interesting to me because, like I identify in my Website Content Workflow post, I currently use a table on a OneNote page to manage my editorial calendar.

So I decided to give this Lists template a try.

Creating the list is very easy. It’s a matter of clicking a few buttons, setting a name and a location and the list is created.

But I want to customize the list a little bit to use my terminology and workflow.

Customizing the List

The list comes pre-populated with nine fields, several of which I decided to customize:

  • Content Type
  • Content Image
  • Draft Due By
  • Publish By
  • Status

I also added a few columns to enhance my workflow.

‘Content Type’ to ‘Post Type’

Since the only thing I’m using this for is to track entries in my blog, I don’t need a “content type” column. But I do need a column to track the types of posts in my blog, so I changed this to “Post Type” and changed the options to:

  • Blog Post
  • Page
  • Portfolio
  • Event

I also changed this to only allow a single selection.

‘Content Image’ to ‘Featured Image’

I changed this to “Featured Image” to match the WordPress terminology.

‘Draft Due By’ to ‘Publish Date (Planned)’

My goal is to post a blog entry every month in both of my blogs. For this blog, my scheduled post date is the first Thursday of every month. At any given time I’m working on about four different blog entries, so having a “draft due” column isn’t useful to me. Knowing the planned publish date, however, is.

‘Publish By’ to ‘Publish Date (Actual)’

And sometimes I miss my publication goal, so I like to keep track of when I actually posted my blog entries.

Status Column

The choices included with the “Status” column didn’t match the statuses I’d developed for my workflow, so I changed them to what works for me:

  • Planned
  • In Progress
  • Final Review
  • Posted
  • Deferred

Blog

I added this column to be able to track content for both my blogs.

Slug

The slug is a three to four word phrase that succinctly describes the blog entry. It’s used by WordPress as part of the URL and I use it to create a folder for storing my Word document and any related graphics and images.

Customizing the View

Customizing and creating views of Lists are both very easy and very handy. The standard, default view is “All Items.” I edited that view order the entries by the “Publish Date (Planned)” column so the newest entries are at the top of the list.

I also created a view for the planned, in progress and final review statuses so I can quickly see where I need to focus my attention.

Lists also has a handy calendar view, but since I’m only posting two entries a month, it’s not particularly useful to me right now.

Creating a Folder

My Office 365 subscription includes access to Power Automate, Microsoft’s tool for automating tasks and workflows. Using the data from a few of my Editorial Calendar list columns, I created a flow that automatically creates the folder where I save content and assets for a specific blog entry. (An automation in Power Automate is called a “flow.”)

The flow concatenates the planned publish date column and the slug column to create the folder. For this entry, the folder’s name is entry – 2020-12-03 – editorial calendar to lists.

Power Automate is an incredibly robust automation engine. My folder creation flow, while a time saver for me, barely scratches the surface of its capabilities.

To List or Not to List…

Moving my editorial calendar from a clunky, manually created OneNote table to Microsoft Lists was very easy to do. And the functionality available in Lists makes it easy to quickly see where I stand in the writing of my blogs. So far, I really like it. And according to Microsoft’s Roadmap, they seem quite committed to the product. (An iOS app is slated for release in the next few months which will make working with lists even easier.) I see potential for Lists to replace other tracking tools I’m using, like Excel, for other areas of Brettro.

Adobe CC Libraries: Paragraph and Character Styles

A few months ago I wrote a post giving an overview of Adobe CC Libraries. Since that time and after integrating them into my workflow, it’s clear that one of its most powerful features is the ability to store paragraph and character styles.

The ability to create a style once and share it not only with others but also with different Adobe apps is remarkable and an incredible time saver.

Establishing Standard, Baseline Styles

From the moment I started desktop publishing in the mid-1980’s, the standard content creation workflow always seems to start in a word processor. Over time Microsoft Word has become the de facto one, so as I formalized my content creation workflow, I decided to standardize my paragraph and character styles on the default ones from Microsoft Word. That way when I place a Word doc in InDesign the style formatting will be automatically applied.

To see all the styles in one place and to have a better understanding of the depth and breadth of the styles, I created a Word doc listing all the standard Word paragraph and character styles.

A Word doc listing all the standard Microsoft Word paragraph and character styles.
A Word doc listing all the standard Microsoft Word paragraph and character styles.

Recently I updated that to include a text example of the style.

A Word doc listing all the standard Microsoft Word paragraph and character styles with examples.
A Word doc listing all the standard Microsoft Word paragraph and character styles with examples.

Which Adobe Apps Can Use Styles?

According to Adobe’s Help System these Creative Cloud desktop apps can use styles from CC Libraries:

  • Adobe Illustrator,
  • Adobe InDesign, and
  • Adobe Photoshop (character styles only).

As of this writing, CC Libraries don’t have very robust integration into the Creative Cloud mobile apps. Hopefully over time that will change, including making text styles available in the incredible Photoshop and forthcoming Illustrator apps for iPadOS.

Creating Styles

I decided to create my styles in InDesign (versus Illustrator or Photoshop) because InDesign has the most robust set of options when creating them, so it seemed important to create them with the most options defined as possible.

As a starting point, I created a source InDesign document using the Word doc I had made with all the styles listed and with text examples. That way if a style needed to be changed or a new one added, there was a single “source of truth” to update and then that “source of truth” could be easily used to import the styles into a CC Library.

An InDesign file listing all the standard Microsoft Word paragraph and character styles imported into and defined in InDesign with examples.
An InDesign file listing all the standard Microsoft Word paragraph and character styles imported into and defined in InDesign with examples.

Organizing the Styles Library

When I initially established my CC Libraries for Brettro, I created one specifically for text styles, appropriately named “Brettro – Typography & Type Styles.” The styles were then organized by group:

  • Paragraph Styles – Front matter: styles for title, subtitle, date, etc.
  • Paragraph Styles – Body matter: styles for headings, body copy, photo captions and credits, etc.
  • Paragraph Styles – Back matter: styles for endnotes, bibliographies, etc.

This seemed like a perfect organization scheme until I realized that many of my styles were different depending on the type of print document I was making. For example, my marketing-focused materials use different titles and headings compared to my long-form documents.

Multiple Type Style Libraries

To minimize confusion, I now have two “source of truth” style documents for InDesign and two CC Libraries for text styles:

  • Brettro – Marketing Material Type Styles: for all type styles necessary to create marketing-style materials like one-to-two page handouts or fact sheets, and
  • Brettro – Presos, Proposals and Pub Type Styles: for all type styles necessary to create long-form documents.

These library names are aligned with how I store and name my documents using a document numbering standard I developed in late 2008.

Type Style Library Groups

I changed the group structure of these libraries to this:

  • Titles & Headings: contains the paragraph styles for the document title, subtitle and the headings
  • Body Copy – Basic: contains the paragraph styles for the body copy paragraph styles
  • Body Copy – Stylized: contains the paragraph styles for the different text elements in the body copy the may need styling, like quotes, captions and photo credits
  • Lists – Bullets and Numbers: contains the paragraph styles for the various levels of bulleted and numbered lists
  • Character Styles: contains the character styles for things like bold and italicized text and hyperlinks
  • Document Formatting: contains the paragraph styles for the document headers and footers

This makes it easier to more quickly find the styles I need when I’m working in specific parts of the document.

Wrapping it Up

So there it is: paragraph and character styles in Adobe CC Libraries. The value of this is incredible because now you don’t need to go hunting through InDesign documents to find a style you once created, you can keep them in a CC Library.

Brettro Product Numbering, File Naming and File Structure Standards

For years I wrestled with how to name my creative documents and where to consistently and logically save them.

Then, in 2006 I came across Designing Brand Identity by Alina Wheeler. The book is a comprehensive guide to brand development and maintenance and is an incredible resource for learning how to do it. I have purchased every new edition that has been published since 2006, with the most recent published in 2017.

The one page in the entire book I found the most useful, though, was the page containing a proposed outline for a branding manual. The suggested sections organized creative material in a comprehensive, logical and meaningful way and—for me—really seemed to lend itself to a solid, future proof file structure.

Establishing the File Structure

Screen shot of the directory structure using the product categores.
Screen shot of the directory structure using the product categores.

The file structure is divided into 20 folders that align with the primary product categories defined in Designing Brand Identity. They are:

  • 001 – Brand Identity Elements
  • 002 – Nomenclature
  • 003 – Color
  • 004 – Signatures
  • 005 – Typography
  • 006 – U.S. Business Papers
  • 007 – International Business Papers
  • 008 – Digital Media
  • 009 – Forms
  • 010 – Marketing Materials
  • 011 – Advertising
  • 012 – Presos, Proposals and Pubs
  • 013 – Exhibits
  • 014 – Signage
  • 015 – Vehicle Identification
  • 016 – Packaging
  • 017 – Uniforms
  • 018 – Ephemera
  • 019 – Image Library
  • 020 – Reproduction Files

Files are saved in their own folder within each of these folders using the file naming standard I developed.

Establishing the Product Numbering Standard

I use my product numbering standard for all my visually branded documents, videos and other creative materials. This standard creates a unique identifier for each product allowing it to be easily identified and located.

The number is a quartet combining four groupings to create a unique number:

  • Calendar year: including the calendar year as part of the product number provides instant recognition for the year the product was created, context for discussions on how the product has aged and can serve as a guidepost for referencing invoices for material production;
  • Product category: the product category is a reference to the file structure outlined above; this number makes it significantly easier to find a file in the file structure by narrowing the search to a single folder;
  • Unique ID: this number is the only truly unique identifier for a product in the standard. This four-digit number can only be used once and is the thing used to identify a product in its product category folder. See “Creating the Unique ID” to learn how this number is created.
  • Version number: this number indicates the version of the product.
Breaking down the product number quartet.
Breaking down the product number quartet.

Creating the Unique ID

Figuring out how to create a unique number and maintain a list of those numbers was the most challenging part of establishing this standard. I finally settled on an Excel file that creates a unique ID based on the row number in the spreadsheet.

This column uses a function to add 1 to the current row ID to create the product's unique ID.
This column uses a function to add 1 to the current row ID to create the product’s unique ID.

This means, however, that you cannot delete a row once an entry has been created, otherwise it will ruin the whole unique ID scheme. That is a pretty big flaw, but since I am the only person who uses this system on Brettro material, it is functional.

Framework for Determining Version Numbering

Determining when and how to assign a new version number versus a new product number versus not assigning anything new can be difficult. That decision requires a framework to make the determination and that framework is based around the product’s lifecycle. Every product has a usable life: there is a defined beginning and a defined ending, but the tricky part is defining how a product changes between its beginning and ending

The decision framework has four basic questions:

  1. Is this a new product? A new product is an item that has not yet been created or the product’s design or content is completely changed. A new product requires an entirely new product number that resets the version back to one.
  2. Is this a revision or an edit? A revision is a modification to an existing product’s design or content that changes or clarifies the design’s or content’s original intent, message, or theme. An edit is a minor modification to an existing product’s design or content that does not change the design’s or the content’s intent, message, or theme. An edit typically corrects grammar, spelling, or style.
    1. Revision: requires a new version number.
    2. Edit: does not require a new version number.
  3. Is this a periodical or a serial? A periodical and a serial are products created and published multiple times annually with a similar topic or theme. These are special cases in versioning where each new issue results in the creation of a new version number, not a new product number. A new product number, however, is created at the beginning of every calendar year.

    Examples of periodicals are catalogs and newsletters. And examples of serials are brochures, quarterly reports and semi-annual reports.
  4. Is this a build? A build is a unique draft created in the design phase of a product. Many designers create multiple builds of a product as part of their creative process. Once a build is determined to be the final design, the other builds should be deleted or placed in a folder named “builds.” A build does not requires a new version number. When saving a build file add a lowercase letter after the version number to indicate a unique build. For example, in this filename, 2010-002-0001-02a.indd, the lowercase letter a indicates a unique build.

Developing the Folder and File Naming Standard

The folder and file naming standard is based on both the product categories established in the file structure section and product numbering standard section.

The folder naming convention is XXXX-XXX-XXXX – type – three word slug.

Folder naming convention
Folder naming convention

The file naming convention is XXXX-XXX-XXXX-XX – type – three word slug.

File naming convention
File naming convention

Product Type

The product type is a secondary categorization that more granularly describes the type of product being created. I developed the initial list of product types referencing Wheeler’s Designing Brand Identity, but over time have added others.

Product types should describe a product in general terms and should follow the “one-to-many” principle whereby the product type (the one) generally describes multiple types of products (the many) in one or two words. New product types can be added, but should be done so rarely.

The source list of product types is kept in the Excel file used for creating unique IDs.

Screen shot of the product type list in my file naming spreadsheet.
Screen shot of the product type list in my file naming spreadsheet.

Three Word Slug

The three word slug should describe the purpose and/or content of the product. I do my best to limit myself to three words, but sometimes I end up using four or five.

Product Tracker Spreadsheet

The spreadsheet I use to track and create unique IDs functions as more than just that. Its primary function is a product tracker to capture not only a product’s unique ID but also to capture its product category, product type and slug.

Thirteen Years and Counting

I have been consistently using this standard for 13 years both at Brettro and Uncle Sam, Inc. It has held up very well in both places with no significant changes in that time.

Adobe CC Libraries: What Are They?

In 2015 Adobe released new functionality called the “CC Library” as part of its Adobe Creative Cloud. The intent was to provide a cloud-based repository for quick access to frequently used graphics, color themes, brushes and more across devices. The potential for this was—and remains—incredible. As more and more people, including me, are start working on one device and finishing on another, having this kind of functionality is ideal.

What Can CC Libraries Store?

This is a consistently changing list as Adobe makes the Libraries’ capabilities more and more robust. As of right now, according to Adobe’s Help System, they can store:

  • graphics (like logos and other brand assets),
  • icons,
  • video clips,
  • brushes,
  • character and paragraph styles,
  • layer styles,
  • looks,
  • patterns,
  • 3D objects,
  • video, and
  • color themes

Setting Up Libraries

Adobe’s web-based Help System provides quick and easy explanations for:

  • Creating a library,
  • Adding elements to a library, and
  • Logically grouping those elements within a library.

Brettro’s Libraries

After some fiddling, I settled on the following CC Library structure for Brettro:

Library NameGroupsContent
Brand Identity ElementsBrand name
Tagline
Sub brands		Elements of the brand identity that should be conveniently available
Color SystemsPalette – default (RGB & Hex)
Palette – default (CMYK & PMS)
Palette – supporting (RGB & Hex)
Palette – supporting (CMYK & PMS)
Palette – web (RGB & Hex)		All color palettes for the organization divided into color spaces for digital (RGB and Hex) and print (CMYK and PMS)
Graphics, Brushes and Color Themes Automatically created “My Library” library by Adobe where it stores Adobe Stock images and graphics, color themes and brushes
IconographyDigital (.gif, .jpg & .png)
Print (.ai & .eps)		Icons assigned for a specific purpose that help underscore the overall brand identity.
Nomenclature  
Reproduction Files (??)Covers
Mastheads		Grids, covers and other largely unchanged templates that are frequently used
SignaturesSignature – cmyk
Signature – rgb
Signature – one color		Lock-ups of the organization’s logo with all the elements that comprise its signature.
Typography & Type StylesDigital styles (Photoshop)
Marketing Mat’l Styles (InDesign & Illustrator)
Publication Styles (InDesign & Illustrator)		Type styles to help easily create properly structured graphics, charts and documents.
VideoFront Bumper
Back Bumper
Lower Thirds
Text Animations
Looks		Standard video elements like bumpers and color “looks.”
Brettro CC Libraries Structure

Wishlist

I’ve only just begun to scratch the surface of what’s possible with CC Libraries and Adobe is continuously improving them. I can’t wait to see what features they add next, but two features I would love to see are:

  • Ability to add InDesign and Illustrator template files (.indt and .ait)
  • Ability to add code snippets for Dreamweaver

In both cases this functionality would allow for quick access by multiple people to frequently used document and graphic templates and frequently used code patterns when marking up text.

How ‘Resilient Management’ Helps, Part 1

Initially this was going to be a book review of Resilient Management, an A Book Apart Book by Lara Hogan. But in jotting down my notes and as I began to write this, I realized that a multi-post series about how this book helps my management style would be more interesting.

The book was published in June 2019 and throughout my initial read I highlighted quite a bit as reference. Months later, I find that I still reach for it frequently, especially in our new work-from-home-during-a-pandemic world. In both cases, it validates many aspects of my current management style and each time I flip through it, I discover new, important ways to be a good manager.

Part 1 of this series focuses on how the book validates aspects of my management style and part 2 will cover some of the things I learned to adapt and improve my management style.

Validating My Management Style

I’ve been managing people on-and-off since the early 90’s. My bedrock management principles have always been:

  • Be fair, transparent and honest;
  • Never take credit for other’s work, give credit where credit is due;
  • When mistakes are made ,take responsibility and work with your employees to ensure that both you and them learn from the error;
  • Do. Not. Yell. Ever.; and
  • Listen.

Managing people is challenging. I’ve learned over the years that the most effective way to manage is to understand what motivates each of your team members. In that time, I’ve also learned:

  • Leave your office and make sure you see each team member every day,
  • Be open to feedback and provide venues for it, and
  • Recognition, not matter how small, is always appreciated.

See Each Team Member Every Day

One of my Management 101 professors drove this idea home at the top of every single class. “Get out of your office,” he’d always say. And while at the time I remember thinking, “this is so obvious. Duh,” it took some time before I recognized the value in it. The simple act of stopping by an employee’s desk to say “hello” underscores that employee’s value, that they matter and that employee’s work is important to the organization.

The return on such a minor effort is huge.

Be Open to Feedback and Provide Venues for It

Early on I didn’t have one-on-one meetings with my employees. (“1-1’s” as I like to call them.) It never occurred to me to do so. I always thought, “if they need something, they’ll stop by.” While I still encourage each of my team members to stop by (even virtually through chat or email), at some point I read something about the value of providing each of your team members with a consistent, scheduled time to meet.

I wish I’d saved the link to that article because reading it was such a light bulb moment for me. It seems so obvious now that having a consistent way for an employee to privately ask questions, provide feedback, discuss personal items that may be affecting their work or even to provide an “in the weeds” rundown of their to-do list is so beneficial. Not only does it help you gauge your employees workload and ability to deliver, it also says to the employee that they matter and that they have my undivided attention.

Also, if you say you’ll take action on something in your 1-1, you should do so well before the next one or do your best to have information to report back at the next one.

Recognition, No Matter How Small, is Appreciated

Everyone likes to be recognized differently, but in my experience everyone appreciates recognition, now matter how small it may be. A simple “thank you for your work” or “you consistently produce fantastic work, I’m so glad you’re a part of this team” may seem unnecessary, but it is absolutely necessary. It demonstrates to your employees that:

  • They are important and integral to team success,
  • The work they do is valuable,
  • You are aware of their work products, and
  • You are paying attention to the quality of their work and the extra effort and passion they put into it.

Several years ago, Knock Knock—an incredibly clever paper products company—produced multiple small notepads with checkboxes and areas for freeform text to provide quick recognition for a job well done. I purchased several of them to use with my team:

I subconsciously established a hierarchy for them, with:

  • “Thanks a Bunch” used to acknowledge a little something an employee did to help another employee or make an someone’s life at work easier;
  • “High Five” used to acknowledge standout work or effort on a product or project;
  • “Awesome Citation” used to acknowledge an effort to go above-and-beyond what is necessary or expected to create a fantastic or remarkable outcome to a product or project; and
  • “Honorary Unicorn” used to acknowledge the flawless (or nearly flawless) execution of a deliverable, product or project. A note from this pad is used extremely rarely.

I was—and remain—surprised and tickled at how well these were—and are—received. Most recipients hang them at their desk for a period of time. I try to deliver them when an employee is away from their desk as some of my employees are uncomfortable with direct recognition. Initially I didn’t sign them because I thought the anonymity would be more exciting. But even after it became known that these notes came from me, I still don’t sign them.

Over time I have distributed these notes outside my team and even outside my department, but those instances are extremely rare because I want to ensure that receiving one of these remains special by those who receive them.

(They also have notepads to call out less-than-stellar work, like a bad parking job or poor office etiquette. They are hilarious, but probably not an effective management technique.)

Validation

In the first chapter, “Meet Your Team,” Hogan explains humans’ core needs at work:

  • Belonging
  • Improvement/Process
  • Choice
  • Equality/Fairness
  • Predictability
  • Significance

These needs and a human’s perception of whether they’re being met are handled in the part of the brain responsible for analyzing our environment which is called the amygdala,. She further explains that each of these core needs are not equally important to everyone, some are more important than others for different people.

This brief section of Chapter 1 validated for me my approach to management with

  • Belonging aligns with See Each Team Member Daily: the book says “this core need is about sense of belonging, a connection to a community or to a group of people.” Stopping by each employees desk reinforces their value to the team and to the organization providing them with a sense of purpose and…well…belonging.
  • Equality/Fairness aligns with Be Open to Feedback and Provide Venues for it: the book says “the Equality/Fairness core need boils down to the idea that your environment includes equal access to resources, information, and support for everyone in it.” The speaks directly to having consistent 1-1’s with each employee as a way to listen to them, hear feedback privately and be present and available.
  • Improvement/progress aligns with Recognition is appreciated: the book says “…the core need to feel improvement, a sense of making progress—whether for your organization, for your team, or for your personal life.” Being recognized for good work provides a measure of progress in the work an employee does and empowers them to try new things to improve their work experience.

Stay Tuned for Our Exciting Conclusion…

As I said at the top, this is a two-part series. The next part will be posted in the coming months and will focus on things I learned from Resilient Management and how I am going to integrate them into my management style.

A Bit About A Book Apart

Resilient Management is an A Book Apart book, which “publishes detailed, meticulously edited examinations of single topics” (their words). Initially the books were largely focused on the web world: discovery, design, coding, good practices, etc., but in the recent past the topics have also expanded to management, public speaking and accessibility. Those topics are not only applicable in the web world, but also relevant across professions.

I’m a huge fan of the books. They are great, well-written, easy reads and the authors are engaged on social media and interested in conversations about what they wrote.