Anatomy of a 404 Error Page - envato.com coupon

When creating a website, one of the pages that often gets neglected is the 404 page. If you think about it, each 404 page visit is like a lost opportunity. Someone is looking for something on your site, and you’re not able to serve it up. So you give them a 404 page telling them the requested information was not found on your website.

As a brand, you can use custom 404 error page to make a memorable impression on your visitors, as mentioned by Renny Gleeson in his TED Talk “404, The Story of a Page Not Found.” You can use a cleverly crafted 404 page to keep the visitor on your site, and guide them to a resource that will help them find more information on what they were looking for.

Jump to : What is 404 Page | Why do we get 404 Error | What makes a good 404 Page | Interactive 404 Pages | Funny 404 Pages

 

What is a 404 Page?

Before we dive in, it is important to understand exactly what a 404 page is. 404 is one of the Client Error HTTP Status Codes returned by the server, to indicate that the requested page was not found.

What causes a 404 Error?

Some of the common causes are:

• The visitor clicked on a broken link.
• The visitor mistyped the URL.
• The page has been deleted or was moved to a new location (without proper redirects).

You can refer to this Moz article on HTTP Status Codes or have a look through HTTP Status codes on Wikipedia for more information.

Anatomy of a Good 404 Page

Having a creative or humorous 404 can certainly grab the attention of your users, but from a functionality point of view it might not be a great 404 page design. There are some fundamental things you should consider having on every 404 page:

• Why the 404 page is being shown.
• What the user can do next. Here are some things to consider:
  • Provide an easy way to go to the homepage.
  • Show some popular/related items your visitors might be interested in.
  • Give them the ability to search for what they want.
  • Make it easy for them to report an issue.
• Leave a lasting impression.
• Stick to your overall brand and design guidelines.
• Header response should be a 404.
• Consider making the 404 page context-sensitive.

Here are some examples of context-sensitive 404s. On an e-commerce store, if someone tries to access a page for an item you no longer stock, the 404 page could show related products from the same category. Or if your visitor gets lost while browsing the categories, you could show trending categories and contact information.

Animated/Interactive 404 Pages

In this section, we’ll take a look at some interactive and animated 404 pages. The users can interact with some of them, and others have a subtle animation that makes them unique. Click on the “404” links below to visit the sites’ actual 404 pages.

Ledger Note → 404

Ledger Note used the awesome turndownforwhatjs plugin to create their 404 page.

Slack → 404

The greyed out page fills up with colors and starts to animate when you interact with the page. It looks like they have really put some effort into the 404 page. HT: @ribenaberry

Stampready → 404

A clever use of gif to tell users, what they are looking for does not exist and José Mourinho does not approve of their search query.

Open Bedrijvendag 2014 → 404

404 represent a broken page, what better way is there to tell your visitor about it than this. On the flip side less savvy visitors might think they might have been infected with a virus, so tread carefully with this one.

Hugo Bonacci → 404

Want to see a vortex pull everything in on a page? Well, this 404 page by Hugo Bonacci does all that using CSS. All the important links are clickable, so users can navigate to the homepage or other areas easily.

HotDot → 404

You can move the cursor around this page to view the 404 from different angles, giving it a cool 3D effect. Have you tried clicking on the 404 yet?

FlippingBook → 404

This site gives the option to play a mini-game when you land on a 404. This entices their customers to visit some of the core pages—like the homepage, About Us and Features page—to unlock the treasure chest, which gives you 25% off their product.

Personally, I’m in love with this idea. Not only is it a cool landing page, but it serves the purpose of getting people to use the product. If I were to try to improve on this, I would probably have a landing page that serves the all important content on one page, and the treasure chest would be activated as the customer scrolls down.

Virgin Holidays Cruises → 404

When you hit a 404 on this cruise booking site, you are shown an animated image of someone on a beach (who might be stranded, or perhaps just relaxing), with the caption, “Uh Oh! Looks like you’re stranded…” Then you’re presented with the option to search for and book a cruise. A nice 404 design that offers good functionality to ‘stranded’ visitors.

Daniel Karcher → 404

This Flash animation shows you a subway with some posters to indicate that you are lost. The ticker board also acts as the navigation menu.

Hatched London → 404

This site will make you jump off a building once you hit their 404 page. Personally I felt that the animation could be a bit slower.

Dailymotion Cloud → 404

This 404 page shows you a roadworks sign on a dark rainy day, that suggests you’re on a 404 page, and then it automatically redirects to the homepage.

Bitly → 404

The 404 page for Bitly features their mascot, Chauncey McPufferson.

Imgur → 404

A simple 404 page with cats and a giraffe wearing a monocle staring at the cursor.

Romain Brasier → 404

If you stay on the page, you will sacrifice 404 lemmings. Try to save them if you can. Towards the end, the site will tell you how many you managed to save, and warns you to stay away from the 404 page to prevent a future massacre.

Funny 404 Pages

The following 404 pages makes use of a funny image or animation to captivate the user’s attention. The best use of this technique is when the image directly relates to the product or brand.

LonelyPlanet → 404

LonelyPlanet has a cute 404 page, they use what looks like a gif of a baby sloth. Being a travel website the copy “Some places are great to lose yourself in, but not on this occasion.” will work well with their visitors. HT: @ribenaberry

NDP Canada → 404

NDP (New Democratic Party) Canada has an amusing 404 page. When a visitor lands on a page they are shown an image that says “Ottawa’s Broken. And so is this Link.”

This is funny because, from what I understand, they are not the ruling party, and are saying Ottawa (the capital of Canada) is broken because someone else is in power. Shifting blame might not be that classy, but I had a good laugh, so it’s going up here.

Specialized → 404

This bike equipment store uses an image with a lone cyclist who fell off his bike in what looks like a professional tour, and is captioned “Oops! Looks Like We Lost One.” While I can sympathise with the guy that tumbled over, this image fits perfectly with the brand, and will relate well with their audience.

Titleist → 404

This golf website uses an image of golfers looking for a lost ball, and also points their users to other interesting sections on the site.

Distilled → 404

Here’s a web development plus SEO agency based in London. They use sophisticated British humor with monocles, pipes and Monopoly mustaches to tell visitors they have landed on a 404 page.

Magnt → 404

A simple Venn diagram that tells you why you landed on the 404 page.

National Public Radio → 404

These guys have a very good 404 page. It informs users that they couldn’t locate what they were trying to find, and gives them the option to search for it or go to other relevant areas.

They they link to interesting stories about lost people and places – there are stories on Amelia Earhart, 18 1/2 minutes of Watergate tapes, etc.

IGN → 404

IGN is a popular site for gamers, and they have made use of the classic Mario phrase, “Thank you Mario, but our princess is in another castle!” to inform their visitors they have landed on a 404 page.

4D Data Centres → 404

This page uses HTTP status codes to convey the message to their visitors. While this may not be considered to be a very helpful 404 page for the average user, I can certainly appreciate the extra effort they put into making it highly unique.

If you replace the HTTP status codes, the page would read:

This page is Gone! You’ve officially made an Unauthorized Bad Request and you are Forbidden to view this page.

To Continue you may have to Reset Content, or settle for Partial Content by clicking the link above.

P.S. I know this is Not Acceptable but I’m a teapot.

Creation Museum → 404

An image to challenge the theory of evolution is just want you would expect from the Creation Museum.

IMDB → 404

This site shows you a somewhat random movie quote when you land on a 404 page.

Conclusion

So there you have it — a collection of inspiring 404 pages. I’m sure there are many more examples out there, and if you’ve come across some cool, unique or funny 404 pages, please let us know via the comments below.

Next Steps

Themeforest has a great collection of pre-designed 404 page templates, as does GraphicRiver, with it’s huge selection of beautiful web elements. Or, and only if you’re really looking for something different, you could try some of the weird images on PhotoDune, they would look great as a web-page background.

The post Anatomy of a 404 Error Page appeared first on Envato.

envato.com coupon from Envato http://ift.tt/2e37G0v
envato.com coupon