We’ve all been there—you’re meandering about the world wide webs, sipping your coffees (or teas, we don’t discriminate here!) and happily going abouts your day. *click, click* *SSSSIP* Ah, yes, this looks like the perfect path to venture. Filled to the brim with photos, illustrations, and all the information you would ever need, you continue onward in your surf-ari.
What's This?
You’ve stumbled upon a button! You ponder this contraption for a moment and decide to descend further into the depths. A moment of spontaneity rushes over you, you click this fascinating wonder when suddenly….BAM!
You find yourself in…
404 purgatory oOoOoooOOOO
No where to go, you frantically search for a way out. Left, down, UP, RIGHT—NOTHING! BUT THE EMPTY VOID OF DOOM! What do you do? After carefully considering each of your options, you find it best to leave this wretched establishment and scope out a new resource to explore. Slowly backing away to that from whence you came, you do the only thing you can do: RETREAT.
— Intermission —
Wheww…that was intense. Take a moment here to gather your bearings.
Bearings all gathered? Incredible. Let’s dive in and see how this emotional roller coaster could have been avoided. As witnessed, a great 404 page doesn’t just happen. There’s storyboarding, mockups, wireframing…okay maybe not all that. But what it does take is a dash of thought and a sprinkle of creativity. Let’s get cookin’!
Here's What You'll Need
WordPress
Crocoblock
Optional
Elementor
Elementor Pro
Optional
Braaaaains :0
Consider your application
Whether you’re designing for a personal website or a multi-million corporation, think about the brand. Do they make cute, cuddly teddy bears? Build soaring skyscrapers? Rescue cats and dogs? Almost any 404 page can be customized to suit a client.
For the 404 page below I photoshopped a lion in space, since the client uses a lion in their logo. I gave him a helmet, space lions need to breathe too! And to add a little spice I added a mouse-over effect to the 404 text.
Usability
There’s nothing worse than landing on broken link and having a blank 404 stare you in the face. One thing I like to do is offer the user different options on where to go next. This always includes a link to the homepage, and, depending on the needs of the client, I also include a search option.
Other elements to consider are: contact button, links to popular products, and perhaps display pages or posts with relevant terms.
Important!
Should you choose to include a search feature, be sure to set up your search results archive template!
Think about the message your 404 page will send to the user
When brainstorming 404 page ideas, consider whether your idea is appropriate. For instance, a spooky zombie crawling across the screen *miiiight* not be the best choice if you’re designing a website for casket and headstone services….
We build amazing websites for a variety of established construction companies, however, we steer clear from using fallen cranes, damaged materials, leaning buildings, etc., as this kind of imagery can give off the wrong impression. Instead, we opt for other interesting ways to incorporate their business or brand..like dogs. Who doesn’t like dogs?
Explore ideas
There are tons of great 404 pages out there (just look at the examples included in this post!). Okay, maybe I’m biased. BUT, take a look around! Some of my favorites are Lego, Spotify, and who can forget Mint!
Have some fun with it
Even if you can’t come up with a clever, client-specific idea, you can still have a little fun! One thing we love to do is play with animations. You can find free animations at Lottiefiles.com, or use widgets, motion effects, and other various options included with Crocoblock’s JetTricks, JetElements, or you can choose to hard code them yourself if you’re hardcore parkour*.
*lessons in hardcore parkour not included
Getting started
Elementor makes creating your 404 page a breeze! Once you have your theme and other resources installed, simply hover over Templates in your left-hand admin panel, click Add New, then select Error 404 from the dropdown. Call that new baby something special, then click Create Template. This will take you to the Elementor editor.
Tip: I like to make the container fill the height of the screen, which gives me a large canvas to work with.
Create your design, and once you’re finished, click Publish. Under Conditions, choose to apply it to the 404, and VOILA! The power now lies within your website. Please 404 responsibly.
