404 Pages: The Good, The Bad, and The Ugly

Hey there! Today I want to talk about something that might not be on your radar - the 404 error pages.

Yes, I know they're not the sexiest part of web development, but hold on a second. Because those 404 pages can be the unexpected highlight of your website.

Why bother?

You might be thinking, "Why bother with these pages if normal users don't see them?"

Think about it, if someone ends up on a 404 page, they're already frustrated that they couldn't find what they were looking for. So why not turn that frown upside down and give them a reason to smile?

A funny or creative 404 page can turn a negative experience into a positive one and keep your visitors on your site, rather than losing them to the vastness of the internet. Plus, a well-designed 404 page can show that your brand has personality and maybe even a sense of humor.

403 or 404?

You may have heard of HTTP error codes 403 and 404 before. These codes represent "Forbidden" and "Not Found" errors, respectively, and they are two of the most common error pages you'll come across while browsing the internet.

A 403 page means the user (or bot) doesn't have permission to access a certain page on your website.

A 404 page means the page simply doesn't exist.

The essentials

Good 404 page should have some key elements:

• Clear and friendly error message.
• Option to navigate to the homepage or other important pages.
• Search bar to help users find what they are looking for.
• Branding elements to maintain consistency with the rest of the website.
• (Optional) Entertaining or creative element to add some personality to the page and reduce frustration for the user.

Get inspired and creative

Of course, you could go the boring route and have a generic "Page Not Found" message, but where's the fun in that? Get creative!

You can take an inspiration from Marketplace 100 companies.

Honorable mentions:

• www.instacart.com/404
• seatgeek.com/404
• www.zola.com/404
• www.coursehero.com/404/
• us.vestiairecollective.com/404/

The minimalists:

• stockx.com/404
• www.outdoorsy.com/404

So 90s:

• www.rockauto.com/404
• www.partsgeek.com/404
• www.dhgate.com/404

Clean and clear:

• www.faire.com/pagenotfound
• jane.com/404
• www.houzz.com/404

Lost:

• www.peek.com/404
• www.getyourguide.com/404

Golden:

• www.apmex.com/404

Reveal a no-code builder:

• www.snackpass.co/404

Many clicks:

• www.ssense.com/404

Nuts:

• www.chairish.com/404

Spaceman:

• feverup.com/en/404

Doggie:

• www.teacherspayteachers.com/404

Kitty:

• www.kodingkitty.com/404

Mobile Matters

When designing an error page, keep in mind that many users will be accessing your website from their mobile devices.

That means that the page needs to be optimized for smaller screens and easy to navigate with fingers.

A good 404 page can help to keep mobile users engaged with your website, even if they've encountered an error. It's a smart move to make sure that your website is mobile-friendly in every way.

Conclusion

So, don't neglect your 404 pages. They might not be seen by your average user, but they're definitely important.

And who knows, you might even get a chuckle out of someone stumbling onto your error page.