Tech, Tips, and Tutorials.
Reviews, News, and Rants.

404 Design

Uh-oh. You’ve reach a web site’s 404 page. What is this? Is it the web site’s fault? Is it mine? Is this temporary or permanent?

What is a 404 page?

A 404 is a standard HTTP error code to signify that the web page you were looking for doesn’t exist. We also refer to them as dead-links.

Most of the time you’re met with an unfriendly error message that goes along something like this:

The requested URL was not found on this server. Additionally, a 404 Not Found error has occurred.

What would be the first thing you’d do when you see this? You would simply press the back button and be on your way, of course.

This is problematic for the site owners because they would have lost another visitor.

However all’s not lost. Web developers have to option to create a custom 404 error message. All they have to do is modify the “.htaccess” file and add the following line of code to the top:

ErrorDocument 404 http://www.example.com/404.html

Obviously, change the example URL to where you’ve hosted the custom HTML page. You can name it whatever you want.

Great 404 design

Designing beautiful, well-constructed and intuitive 404 error pages has always been tough work. We’ll now take a look at some examples of 404 pages, some good, some bad, and some great. Prepare to scroll…

(Disclaimer: The following sites were picked at random from my favourites list. I do not intend to pick on, insult, or defame any of the web sites listed here.)

Twitter

twitter

Twitter’s 404 error page is pretty much superb. They’ve put in a very handy search bar and links to the home page, the help page, and even the support page. Kudos to Twitter then!

Facebook

click to zoom in

Facebook’s 404 page is similar to Twitter’s however the layout of the page isn’t as intuitive and there’s no support page link. Overall though pretty serviceable.

GSMArena

gsm arena

GSMArena’s 404 page is horrible. No extra information given and definitely no friendly error messages here.

dpreview

click to zoom in

dpreview’s page isn’t great either. They have no search box and a pretty unhelpful message. At least they put a link to the home page.

TNTpixel

click to zoom in

TNTpixel’s 404 page is my all-time favourite. It’s got the familiar bright colouring associated with the site, it’s got a very friendly error message, and a very effective search box (try it out).

Possibly Related Articles (automatically generated)



0 comments:

Post a Comment