A new article layout and better options for advertisers

The big pull requests keep on landing here at Piccalilli. This time, it’s our article view that has had a thorough re-work.

The old article view was nice, sure, but it let us down in the following ways:

1. All the author info was at the top at larger viewports
2. Advertising was easy to miss (as reported by our readers in the survey)
3. Content pushed out to the left was slightly awkward to read

We feel like we’ve fixed all of that with our new layout.

This re-work is something that’s been on our radar almost immediately after we launched the redesign last year. It became even more prescient after we redesigned The Index this year, featuring a central content column for issue posts.

We just wanted to give ourselves time to do it right because this article view covers articles, links and courses. That’s most of the content on the site!

Leveraging CSS grid and named areaspermalink

We’ve got a new five column grid layout now that allows a nice narrow(ish) column for prose and four columns for to enable content like code samples and images bleed out.

.master-grid > p:has(img) {
  grid-column: popout;
}

Named areas make it so much easier to scan the CSS in the long-term. The semantic names make the code really descriptive.

This system allows us to give elements that need as much space as possible the space they need, such as mid-article videos like this one from Complete CSS.

.master-grid .video-player {
  grid-column: full-width;
}

Syntax highlighting and a new mono fontpermalink

One of the most common pieces of feedback we got was about our overly-subtle syntax highlighting in code blocks. We’ve rolled out a custom theme to fix that along with Moderat Mono as our new mono font.

CSS looks better.

footer {
  position: sticky;
  bottom: 0;
  left: 0;
  z-index: 0;
}

As does JavaScript.

// Finds all buttons and attaches a click event to our handler
assignEvents() {
  const buttons = this.querySelectorAll('button');

  if (buttons.length) {
    buttons.forEach((button) =>
      button.addEventListener('click', (event) => this.handleClick(event)),
    );
  }
}

And of course, HTML.

<share-actions>
  <p>Copy this link to share with your friends.</p>
  <p>
    <code><https://example.com></code>
  </p>
</share-actions>

We have much better options for advertisers nowpermalink

As I’ve written on my blog, we’re pushing to run Piccalilli full time. To help make that happen, we’ve taken very careful steps to give advertisers better options and maintain a priority with the reading experience for our treasured readers.

Better banner ads

Banner ads got lost in the hero unit before, but now, they stand out a heck of a lot more. Companies can book exclusive coverage across all articles and links on a monthly basis.

Closing graphic ads

One of our most requested features from advertisers was being able to communicate their brand, visually. They can now with closing graphic ads! Again, companies can book exclusive coverage across all articles and links on a monthly basis.

Optional graphics on newsletter sponsor slots

Lastly, newsletter sponsors can supply a graphic for their exclusive sponsor slots. For both closing graphic ads and newsletter slots, our studio can be commissioned to create assets that work really well too.

Wrapping uppermalink

We hope you like the changes! This has been a heck of a lot of work 😅

Articles are much better looking and easier to read, so we’re really happy with how it’s turned out. If you’re a company looking to advertise, our new advertising page has all the info and booking links for you.

Advert