As this year’s intern in Digital and Emerging Media, I was tasked with creating designs that needed to work as a static .pdf in both print and digital format. This presented a significant challenge: the design created for printable paper dimensions is approached differently than a design for digital display. To accommodate both, the use of space in a limited size must be efficient and readable.
The first project I tackled this issue with was Cooper Hewitt’s Fall 2017 Public Programs calendar. The design brief was to create a brochure that visitors can view on their screens as a landscape orientation .pdf page on the Public Programs website. We designed this .pdf so that visitors could print at home. For easy transport, the brochure needed to fold up small enough to fit in a pocket. The desired layout and size of this brochure presented a fun but difficult design challenge.
The image below is what the .pdf will look like when opened on the website. The dashes represent folding lines, which when printed onto a double-sided letter-size piece of paper act as a guide for folding it into 8 small rectangles for a pocket size calendar or 4 longer vertical rectangles for a brochure size. Should we decide to print on-site, an 11×17 layout was also created.
The second project I worked on was less complex to design for print, but was much more complex in creating the digital layout. The book Enwheeled by Penny Wolfson is the latest publication in Cooper Hewitt’s DesignFiles e-book series. The e-books in the series are currently offered through online stores for $2.99 per book. Cooper Hewitt will be shifting this distribution model for the DesignFiles series beginning with Enwheeled publishing in December 2017. Enwheeled will be the first web-based publication available on cooperhewitt.org but that is a whole other post! My task was to create a traditional InDesign layout for the text and then use the instructions developed by last year’s Digital and Emerging Media intern, Emma Weil, for creating a Markdown-friendly HTML code. The text was first entered into threaded text boxes with the related images dispersed accordingly. Once that process was complete, I followed Emma’s instructions for tagging the text and images so that they appear in the correct order when exported to HTML.
Certain images needed to be placed in between threaded text boxes; in this case, the images had to be anchored to their corresponding caption, and the caption anchored to the end of the paragraph that it coincides with.
The final step in preparing the InDesign document for export to HTML was to assign paragraph and character styles to the text. Each text format needs to be assigned a specific style setting in order for the text to appear correctly in the HTML. Character styles include all italic, bolded, and superscripted text. Paragraph styles act the same way with entire bodies of text, as well as signifying the headers and sub-headers of the book.
When the document is exported to HTML, the order of the text and images remains intact and correctly formatted in simple text form. The HTML reformats to the size of the window or screen it is being used on, and after being entered into Emma’s Python script is ready to be entered into Markdown.
