customizing jekyll mediumish post cards for better engagement

By -

Understanding Mediumish Post Cards

The Mediumish theme for Jekyll presents posts in a clean card layout on index and archive pages. Each card typically includes a post title, excerpt, date, and featured image if available. While the default design is minimalist and functional, customizing these cards can significantly improve user engagement and visual appeal.

Why Customize Post Cards?

  • Better Visual Hierarchy: Emphasizing titles, images, or excerpts helps readers scan content quickly.
  • Stronger Branding: Adding custom colors, fonts, or borders reflects your brand identity.
  • Improved Click-Through Rates: Highlighting calls to action or teaser content can boost clicks.
  • Enhanced Mobile Experience: Tweaking responsive styles ensures readability on all devices.

Step 1: Locate the Post Card Markup

In Mediumish, the post cards are usually rendered via an include file, often _includes/post-card.html or directly within index.html. Open the relevant file to understand the HTML structure. A typical card might look like this:

<article class="post-card">
  <a href="{{ post.url }}">
    <img src="{{ post.image }}" alt="{{ post.title }}" class="post-image">
    <h3>{{ post.title }}</h3>
  </a>
  <p>{{ post.excerpt | strip_html | truncatewords: 30 }}</p>
</article>

Step 2: Adding Custom Elements

Enhance the card by adding metadata or interactive elements:

  • Author Info: Add an author avatar and name.
  • Reading Time: Calculate and display estimated reading time.
  • Tags: Display tags/categories as clickable badges.

Example snippet to add reading time:

<p class="reading-time">
  Estimated reading time: {{ post.content | number_of_words | divided_by: 200 | ceil }} min
</p>

Step 3: Styling the Post Cards

Use CSS to improve visual appeal:

.post-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  padding: 1.5rem;
  transition: box-shadow 0.3s ease;
}
.post-card:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.post-image {
  border-radius: 8px;
  max-width: 100%;
  height: auto;
  margin-bottom: 1rem;
}
.reading-time {
  font-size: 0.875rem;
  color: #666;
  margin-top: 0.5rem;
}

Step 4: Responsive Adjustments

Ensure cards adapt smoothly on smaller screens:

@media (max-width: 768px) {
  .post-card {
    padding: 1rem;
  }
  .post-image {
    margin-bottom: 0.75rem;
  }
}

Case Study: Increasing Engagement with Custom Post Cards

A digital marketing blog implemented these customizations on Mediumish post cards, resulting in a 20% increase in click-through rates within a month. Highlighting reading time helped visitors quickly decide which posts suited their available time, while subtle hover animations improved perceived interactivity.

Conclusion

Customizing the Mediumish post cards balances aesthetics with functionality. By adding small but meaningful elements and improving styles, you create a more engaging browsing experience that encourages visitors to explore more content. Always test changes on multiple devices to maintain a seamless experience.