Design Patterns for Custom 404 Pages in Jekyll

By -

Why Design Patterns Matter for 404 Pages

Custom 404 pages are more than just error screens. They’re an opportunity to retain users, redirect their intent, and showcase your site’s personality. By using design patterns—repeatable solutions to common design problems—you can create consistent, effective 404 pages that serve both UX and SEO goals.

Core Benefits of Reusable Design Patterns

  • Consistency across error pages
  • Faster implementation
  • Tested usability principles
  • Easier localization and content updates

Pattern 1: Soft Apology with Search

This common pattern provides a gentle apology message, a prominent search bar, and sometimes a link to the homepage. It is ideal for sites with lots of content where users might be looking for something specific.

Layout Structure

{% raw %}
<div class="404-container">
  <h2>Sorry, that page doesn't exist</h2>
  <p>Try searching for what you need below.</p>
  <input type="text" placeholder="Search..." oninput="searchDocs(this.value)" />
</div>
{% endraw %}

Pattern 2: Humorous or Brand Voice Page

Use humor or creativity to match your brand’s tone. This engages visitors and encourages them to continue exploring your site instead of bouncing.

Example Features

  • Funny or pun-based headlines
  • Custom illustrations or mascots
  • Shortcuts to popular content

Use Case

A developer blog uses a pixel-art character saying, "You just fell through the cracks of the internet." Below that, they display five random tutorials with links.

Pattern 3: Mini Sitemap or Popular Content

When you know where users typically want to go, show those links. This approach avoids search friction and gives users a clear next step.

Layout Strategy

{% raw %}
<h3>Popular destinations on our site:</h3>
<ul>
  <li><a href="/docs/">Documentation</a></li>
  <li><a href="/blog/">Latest Articles</a></li>
  <li><a href="/support/">Support Center</a></li>
</ul>
{% endraw %}

Pattern 4: Animated or Visual Engagement

This pattern incorporates visuals like SVGs, Lottie animations, or parallax effects. It’s effective on creative portfolios or product sites where aesthetics are important.

Considerations

  • Keep load time low to avoid performance hits
  • Use fallback content for accessibility
  • Ensure compatibility with GitHub Pages' static nature

Pattern 5: Redirect Countdown

Automatically redirect users to a fallback page (e.g. homepage) after a few seconds, with a countdown timer and manual link in case the script fails.

Example Code

<p>This page doesn't exist. Redirecting you to the homepage in 5 seconds...</p>
<script>
  setTimeout(function() {
    window.location.href = "/";
  }, 5000);
</script>

Using Layout Includes for Reusability

Each of these patterns can be abstracted into partials in the _includes directory. Then call the appropriate pattern based on context, language, or configuration.

Example: Loading a Pattern via Include

{% raw %}
{% include 404-pattern-search.html %}
{% endraw %}

Combining Patterns for Maximum Impact

In many cases, combining elements of several patterns provides the best user experience. For example, a humorous message paired with popular links and a search bar can turn a dead end into an engaging interaction.

Case Study: SaaS Company Blog

A SaaS company with a large knowledge base used a hybrid 404 page. It included:

  • A branded apology message
  • Search bar integrated with Algolia
  • Popular help topics rendered from a YAML data file

This page achieved a 40% reduction in bounce rate and a 2x increase in user retention compared to the default GitHub Pages 404 screen.

Best Practices for Pattern-Driven 404 Design

  • Test your 404 page with real users or heatmaps
  • Keep the layout mobile-friendly
  • Update suggested links periodically
  • Use meaningful CTAs like “Back to safety” or “Find your way”

Conclusion

Design patterns allow you to create elegant, reusable, and effective 404 pages on Jekyll and GitHub Pages. Whether you're aiming for humor, utility, or aesthetics, the right pattern will make your broken link experience feel intentional—not accidental.