This week, it was time to revisit the Ladybugs of New York poster. After feedback via email from Professor Losey and Todd Ugine (a Research Associate in Prof. Losey’s lab), I needed to make several changes to the first draft of my poster, including:
- Improving the spacing and layout of ladybug images.
- For each species, highlighting one image as “featured” with two other less prominent images to show variation in marking and color.
- Changing backgrounds to improve readability.
- Adding key features for each species to aid with identification.
- Adding key footnotes including a definition of pronotum, a note that New York has more than 11 ladybug species, and authors.
Initially, I had been working in PowerPoint to create my poster. I like working with the program because it allows me to edit images, create layouts, and format shapes and text however I need.
With all the species and other information, the PowerPoint document was becoming tedious to edit. If I wanted to change, say, the font color, I’d have to manually apply the color to about 20 objects. If I wanted to change the layouts or alignment of the images, it would have been more complex. I would’ve needed to move images and text one-by-one to the correct spot, I’d have to use alignment guides to keep images and text lined up.
I needed some way to change all the layouts and styles at once. Since the boxes for each species had the same style and layout, I decided to convert the poster to an HTML and CSS webpage to make editing the poster’s styles efficient.
What did that accomplish?
- The HTML markup gives the poster its structure and contains all the text and images. Because HTML is used, the poster will be more web-accessible than a PDF created by PowerPoint.
- The CSS stylesheet allows me to define the poster’s colors, fonts, backgrounds, layout, etc. in one place. For example, I only have to define each color once for it to apply to the whole poster. Because the styling ‘lives’ separately from the content, it’s easy to create dozens of new styles for the poster and even tell the poster to lay itself out differently.
Click the image above to view the current web version of the poster.