404 Error Pages: The Final Information

Likelihood is you’ve landed on a 404 error web page earlier than. Whether or not you’ve arrived on a 404 error web page due to a easy typo or since you had been searching for a web page that now not exists, most individuals discover being unable to search out what they’re on the lookout for to be a irritating expertise. A serious a part of working a profitable web site is staying alert for errors like damaged pages or gradual efficiency. Nonetheless, generally there are issues you simply can’t keep away from, and 404 errors are amongst them. The excellent news? With a bit of ingenuity, you’ll be able to rework your 404 error web page right into a advertising asset. 

A 404 happens when a person requests a web page in your web site that doesn’t exist, thus throwing a 404 error web page and prompting customers to return to the proper place. Irrespective of what number of assets you throw into making certain your web site is as seamless as doable, there’s all the time an opportunity customers will find yourself on a 404 error web page. Right here’s what it’s essential find out about 404 error pages, the way to repair 404 error pages, and even some examples of artistic examples that may assist mitigate the frustration of touchdown right here. 

First issues first: What even is a 404 error? This commonplace HTTP error message code alerts the web site you had been making an attempt to succeed in could not be discovered on the server. It is a client-side error, that means both the webpage was eliminated or moved, and the URL wasn’t modified accordingly, or the individual simply typed within the URL incorrectly. There are additionally different causes a 404 error may pop up, together with an issue with DNS or an error with caching. 

For probably the most half, you’ll be able to configure your server to create a custom-made 404 error web page. (If you happen to use HubSpot, click on right here to learn to customise your 404 web page in HubSpot.)

Some custom-made 404 error pages embody a hero picture, witty description, web site map, search kind, or primary contact info. Our 404 error web page additionally contains extra hyperlinks guests can click on — which is a precious add because it retains them on the web site. 

As we talked about earlier, generally the rationale why error pages pop up is as a result of guests are incorrectly typing within the area. If you happen to discover that guests usually misspell the trail that results in your pages, you could take into account redirecting that misspelling to the specified web page.  

1. Pipcorn

Whereas a 404 web page can simply stand proud of an internet site, Pipcorn’s error web page aligns completely with the remainder of the location’s branding. There’s a visually interesting animated background, a pleasant textual content immediate directing guests to go looking the web site, and a chunk of popcorn used because the “0” in “404.”

2. Spotify

Music streaming large Spotify has coated its bases with a intelligent 404 web page. With a witty pun and a light-hearted file animation, the web site briefly entertains after which sends guests again to the web page they got here from. Or, they will simply navigate to the FAQ or Group web page. 

3. Genially

One easy solution to ease the strain in your 404 web page is so as to add a fast “Oops!” message — it helps your web site really feel extra personable as you information customers again to the proper place. Within the case of Genially’s web site, the web page additionally features a nifty illustration paired with some playful copy.

4. Adobe

As you’ll count on, Adobe’s 404 error web page is helpful and visually pleasing. One of the distinctive issues it does is supply quick access to Adobe’s hottest merchandise. 

5. Clorox

The 404 web page for Clorox cleansing merchandise rotates between three lighthearted pictures to sign to guests that they’ve made a misstep. It’s a sensible use of branding so as to add a quick delight second whereas serving to out misplaced customers.

6. Duma Collective

Different occasions, you won’t want a witty blurb — simply inform guests that there’s no web page on the tackle and allow them to transfer on. Leisure consulting company Duma Collective does simply this with its error web page, although it’s complemented by a background picture for some minor aptitude.

7. Bitly

If you happen to enter an incorrect Bitly hyperlink, you’ll be taken to Bitly’s 404 web page. We assume this occurs a good quantity, which is why the 404 web page will get straight to the purpose. It explains what might need gone flawed and prompts customers to go to the Bitly homepage if that’s what they’re after.

8. Ikea

Ikea’s 404 web page is equally minimalist however nonetheless manages to sneak some sensible branding in there. This instance exhibits that your error pages don’t have to be elaborate to get the purpose throughout, however there’s nothing flawed with injecting some enjoyable, both.

9. Moxie Design Co.

Positive, “blew up the Web” is likely to be a bit hyperbolic, but it surely tells guests that Moxie Design Co. doesn’t take itself too critically with small slip-ups like this one. Additionally, a search bar is conveniently positioned on the backside to ship you in your manner.

10. McKissack & McKissack

Ah, the traditional “we misplaced the web page” trick. Once more, a straightforward solution to current a 404 with out alienating your viewers. If you happen to’re an company like McKissack & McKissack that manages many shopper interactions, clear and concise copy is important for all of your web site’s pages, together with error pages.

11. CSS Tips

Ever ripped away an internet site’s wrapping to see what’s beneath? That is the idea that CSS Tips was going for of their 404 error web page. That is each witty and paying homage to what the web site is all about: Good use of web page styling.

12. Good Previous Video games

For different web sites, you unwrap the entrance finish and there is … simply the huge vacancy of area. This web page is a intelligent reference to GOG Galaxy, which is Good Previous Video games’ native online game shopper. Fortunately, a bit of online game character is there to offer guests a spot to report an error if they need.

13. Myriad

Video company Myriad has opted for a unusual, on-brand 404 error web page design that mimics the traditional SMPTE shade bars that seem on outdated tapes and TVs. It’s a humorous throwback to older applied sciences whereas representing the extra fashionable drawback of a nonexistent internet web page.

14. KonMari

Identified for her widespread cleansing and group strategies and model, Marie Kondo has introduced an analogous really feel to her web site’s 404 web page. The copy briefly and humorously harkens again to her tidying philosophy — a small however well-branded element that followers will acknowledge.

15. BrandCrowd

Not solely is the illustration on this error web page detailed and interesting — the copy is intelligent, too. We love the reference to the Semisonic tune “Closing Time:” “You’ll be able to click on wherever else, however you’ll be able to’t click on right here.”

16. Scorching Dot Productions

Scorching Dot’s error web page stays true to its tagline, “the intersection of recent applied sciences and design.” The web page is animated by a whole lot of tiny dots that change path in response to the place you progress your cursor. It is mesmerizing and a fantastic showcase of the company’s design capabilities.

17. OrangeCoat

If you are going to give an error message, why not entertain the person for a couple of seconds when you assist them out? Following a pleasant greeting, OrangeCoat affords a flowchart that really helps customers determine why they reached an error web page within the first place.

18. Ervin & Smith

This 404 web page does greater than redirect customers again to lively pages. As a substitute, Ervin & Smith’s 404 web page invitations you to scroll down and be taught why you want a digital advertising company, and why to decide on Ervin & Smith particularly, capped off with a contact kind. True to its mission, this company exhibits that any web page is usually a conversion alternative.

19. DayCloud Studios

… or, your 404 can simply be a spot for guests to get pleasure from your web site for a minute, as could be seen on the web site for DayCloud Studios. Shifting the cursor across the display screen reveals a 404 message illuminated by lasers capturing from a cat’s eyes. As a result of why not?

20. Headspace

One other occasion of an internet site neatly incorporating its model messaging right into a 404 web page — guided meditation app Headspace makes an effort to calm customers, encouraging us to take a deep breath, then return to the primary web site.

21. Wildwood Bakery

Some web sites to date have built-in intelligent branded copy of their pages, whereas others have hosted full-blown on-line video games on theirs. However, there’s nothing flawed with a quick push again in the proper path. Wildwood Bakery’s beautiful web site retains issues quick and candy (actually).

Web page Not Discovered: Humorous 404 Error Pages

22. Astuteo

Design company Astuteo’s 404 web page is an ideal stability of chic visuals, humor, and helpfulness. The minimal structure offers customers the data they want alongside one other amusing visible metaphor, a sinking cargo ship and a fleeing determine.

23. LEGO

There are few phrases wanted on LEGO’s 404 error web page — the character’s expression makes all the pieces clear. Plus, followers of the LEGO film franchise will benefit from the enjoyable reference within the copy.

24. Magnt

On this humorous error message, Magnt pokes enjoyable at the truth that, sure, they may have damaged one thing — or, you simply cannot kind. The visible serves as a fast solution to shortly illustrate their level. Plus, it’s efficient, because it reminds guests to examine their URLs and ensure they’ve spelled all the pieces proper. 

25. IconFinder

IconFinder’s error web page is easy however pleasant. The corporate’s mascot sporting a gown and showing weary is a relatable nod to misplaced guests. No worries although, for the reason that web site lists a few of its hyperlinks to go to down beneath.

26. GitHub

The road “These aren’t the droids you are on the lookout for” refers to Obi-Wan Kenobi’s Jedi thoughts trick on Stormtroopers in Star Wars Episode IV, and it is change into a widely known phrase used to inform somebody they’re pursuing the flawed plan of action. GitHub performs on this well-known line of their 404 error message.

27. Patagonia

Patagonia’s customized 404 web page captures the model’s vibe completely. We love the cheeky textual content that reads “Please strive sticking the touchdown on one other web page.”

28. AMC Theatres

You might need been to an AMC movie show earlier than, however you’ve hopefully by no means seen their web site’s 404 web page. The web site makes use of a fast, humorous, and related one-liner earlier than it sends you again to the proper place.

29. Bruno

It’s no coincidence that artistic businesses are nice at developing with cool 404 pages. Right here’s one other one from the creatives at Bruno that performs off the 2000 cult comedy traditional Dude, The place’s My Automotive? No, it has nothing to do with the corporate or web site, but it surely’s positive to get a chuckle.

30. NPR

At first, NPR’s error web page looks as if nothing particular. However maintain studying and you will see how they cleverly hyperlink to a few of their nice tales about misplaced individuals, locations, and issues, like a chunk on Amelia Earhart and one on Waldo. This may simply make misplaced customers really feel rather less alone.

31. Medium

Medium takes an analogous method to NPR’s 404 web page, recommending articles about getting misplaced and shedding issues. Test these articles out when you have time — they’re fairly good reads.

32. HomeStarRunner

HomeStarRunner.com, residence to a Flash-animated cartoon sequence, has had a sequence of hilarious 404 error pages over time. The latest options characters from the cartoon sequence in a scene that would’ve come straight out of considered one of their episodes. If you happen to flip the sound on while you load the web page, you may hear their character Sturdy Dangerous — identified for yelling phrases out loud — saying, “404’d!”

33. Blizzard Leisure

This is a easy concept that finally ends up trying slick: Blizzard Leisure’s 404 web page options an animated character misplaced in an precise blizzard and a few humor that World of Warcraft followers will recognize.

34. Howdy Huge Concept

A fast journey round advertising and social media specialists Howdy Huge Concept’s web site will let you know what it’s essential find out about its daring and blunt fashion of copy. And, after all, its 404 error web page isn’t any exception.

35. HubSpot

It occurs to us, too! That is the message we put as much as inform our web site guests that there are some web site points. Our purpose was to remain true to HubSpot’s model voice by being as empathetic and useful as doable.

Flip a 404 Error Web page Right into a Pleasant Second

No person desires to land on a 404 web page — they’re annoying and surprising. Nonetheless, you’ll be able to’t actually keep away from them, so it’s all the time a good suggestion to have a 404 web page to fall again on in your web site.

And, from a person expertise perspective, your 404 web page ought to be a small velocity bump, not a brick wall. The suitable design could be the distinction between a pissed off bounce and a doable conversion, so why not make it enjoyable?

Editor’s word: This submit was initially revealed in December 2015 and has been up to date for comprehensiveness.