Article Layout

We’re exploring some ideas around the layout of a dt-article.

Some motivations:

• Signal visually that these are not just blog posts. Often times the articles contain a huge amount of content and depth, which is somewhat hard to understand at first glance.

• Signal that we are archiving and indexing these articles with libraries and generally being a good academic citizen.

• Provide best practices for common conventions and guidance for overcoming common frustrations around making the first load experience visually compelling. Examples: hero interactives, summary illustration, collage/summary of elements to come?

• There are some general features we’d like to add as well, sharing prompt, TOC linking, etc…

Present Design

As a frame of reference, here are some representative examples of the current design:

[Click to enlarge images]

Text	Hero

Content stripes

Each stripe would be optional, except the headline. The abstract/TOC would only be included on especially long posts. Possible to do a “visual” TOC too maybe?

[Click to enlarge images]

Text	Hero	Headline and byline together

Dark Header

[Click to enlarge images]

Text only	With a Hero

Dark blue brought down to author bar

[Click to enlarge images]

Text	Hero	Hero full bleed

Total White Top

Text	Hero

[shancarter]

Here’s another experiment with some text style changes:

Here was an in-browser experiment with using whitespace as divider 'stead of lines.

[shancarter]

Secondary Headlines

Allowing subheads in the dark header area feels too visually complicated. Would be nice if we could get away with never having a deck in the main header, but it’s made tough by having a hero interactive that you want to introduce. We could possibly just force the hero interactive to introduce itself with a caption somewhere.

Text	Hero