Building your own HTML poster

Academic posters are usually designed using presentation software and distributed as images or PDFs.

While PDFs are fine for printing posters, they are not particularly user-friendly: they are hard to read on small screens, don't support resizing text or increasing contrast, and often don't work nicely with screen readers.

The recent shift to online conferences is a great opportunity to reconsider our poster-making tools, and it turns out that plain HTML5 + CSS works pretty well for making (more) accessible posters.

This template is released under a permissive license: all we ask if you use it for your own posters is that you leave a one-line comment in the HTML sources.

There are two ways to use this template: directly editing the HTML, and using Jinja2 templates.

This is the simplest way to get started, since it just requires a text editor:

1. Download the latest release of this template (or download the webpage and the corresponding stylesheet directly from the repository).
2. Adjust the metadata and add blocks to the main section.

The poster is a Jinja2 template, so you can inherit from it and fill in the relevant fields and the contents.

1. Clone the GitHub repository.
2. Create your own jinja2 template, starting from this tutorial.
3. Render to HTML using the render.py script:
   ./render.py your_jinja2_poster.jinja output.html

Posters made using this template are composed of a sequence of blocks. You can use CSS to customize the way the blocks are designed; by default they scroll left to right on wide screens and top to bottom on narrow screens.

Each block has the following structure (fill in the italicized parts):

<article>
  <header><h3>Block title</h3></header>

  Block contents:
    paragraphs (<p>),
    figures (<figure>),
    lists (<ul>, <ol>),
    images (<img>, <object>),
    tables (<table>), …
</article>

The following markup is useful to structure content blocks:

• <p>

  Paragraphs

  </p>
• <ul>
  • <li>…</li>
  </ul> (Plain lists)
• <ol>
  1. <li>…</li>
  </ol> (Numbered lists)
• <b> Call-outs (alerts) </b>

• <a href="url"> Links </a>
• <em> Emphasized text </em>
• <strong> Important text </strong>
• <i> Scientific terms, foreign words </i>
• <var> Math variables, placeholders </var>

Use the following code to insert a figure:

<figure>
  Figure contents:
    images (<img>, <object>),
    tables (<table>),
    quotes, …
  <figcaption>Figure caption</figcaption>
</figure>

Use the following code to include an image:

<img src="source url"
     alt="image description">

Prefer scalable images (SVG) for technical drawings and figures.

Make sure to include an alt attribute: it will be read by assistive technology and displayed while the image is loading.

This poster template loads MathJax by default, so you can include inline math in backslash-parentheses \( … \) and display math in backslash-brackets \[ … \]:

\((\lambda x. e) v \downarrow e[x/v]\) (β-reduction)

Using MathJax allows users of assistive technology to browse the equations.

The template's stylesheet defines a few extra CSS classes:

.center
(horizontally centered text)

.justify-center
(horizontally centered block)

style="grid-template-columns: 40fr 60fr"