Posts Tagged ‘design’

Server error showcase

Wednesday, December 23rd, 2009

This is a follow up post to our 404 design showcase. However this time we won’t be much into design. Server errors are harder to control than 404 pages, so there are not many beautifully designed 5xx error pages.

The most popular server errors we’ve met while checking the web for broken links are:

  • Request/server exceeded time limit. Surprisingly this is a very common error. Perhaps too many webmsters forgot to optimize their scripts or databases? Seeking into archive too deep? We can’t guess the real problem, but the lesson is check your old pages/scritps if they are still working, can handle the current load, and if your website’s archives are available.
  • Can’t connect to SQL – is a very common problem. And this type of errors are fixed very fast, because they are easy to spot since they are affecting almost the whole site.
  • Error in SQL query – is a less noticeable message than SQL server errors, but it is easy to fix as well.
  • CMS error pages. These are the most informative ones. Developers usually forget to turn off debug messages. These are very dangerous, because they provide so much information for possible hackers.
  • Down for scheduled maintenance. Such common and simple pages like this usually show random error numbers like 404, 500 and so on.

Worst solutions to the 5xx error pages

  • Trying to show site’s main page. Actually sites like this try to show their main page everywhere: it’s for a 404 page, for any 5xx page, etc. Most of the time this appears as a big mess to a site’s visitor and does not provide any valuable information about what he can do next (if he wants to stay on the same page).
  • JavaScript popups with debug messages. Common?!
  • Showing return to the original page when the “original page” link points to the same page user is at.

5xx error screenshots we made for you

Clean and simple error page
500 but I'm still alive



Internal server error (problem description in Japanese)
500 in japanese



Wordpress maintenance mode plugin in action. Website is down for maintenance
Artistas Del Genero  Maintenance Mode



AT&T suggests users to return to the original page, but this time button leads visitors to the same page
AT&T return to page



Talking to aliens? Are BOF or EOF the names of your mothership? And what should your website’s user do now?
bof or eof talking to aliens



Nice looking server error page
boorah error



Something blew up on digg’s server. One of the shortest error pages we’ve discovered.
digg feed blow



Django gives a very detailed (and nice looking) report of what’s happened, but on production sites do not forget to turn that thing off in order not to tease hackers.
django error



Drupal – site is down for maintenance.
drupal down for maintenance



Geocities is down. Nice and useful error page from Yahoo. But the title is a bit misleading. Isn’t it?
geocities 410 error



Server error. Because some of the text is bold red – we guess that something serious has happened.
iis 7.0 error



Sweet and clean. In Russian.
500 internal error in russian



Maxim tries to be funny.
maxim trying to be funny



An error happened in mod_python. The big snake is not happy.
mod python error



MSDN tries to be helpful.
msdn error 500



Even social networks go down.
ning 400



Oh, database is not accessible.
oops error 503



Parallels – internal server error.
Parallels H-Sphere



jQuery – no such file in repository (why not 404 then?)
path existed but was later removed



Out of operation.
popfly no more



Being helpful and informative.
refused connection



Ruby fails
ruby on rails error



Very nice design (actually we see this page for all errors on that site and we love how it looks)
ryanarrowsmith error page



Site offline. Gray color is back into fashion this year.
site off line



Oh, so we are the robot? And you are a brick without soul goddammit Gooogle!!!
sorry are you a human



Look! Robot’s lost its head!
swivel



Tomcat broke.
tomcat error



Site is under construction.
under construction



Lions!
website offline



Something wrong at Yahoo!
Yahoo! - 500 Internal Server Error



XSL file not found.
yet another descriptive error page


404 error pages

Friday, July 31st, 2009

As you all know one of the great LinkAider’ features is broken link check. Since the early release we’ve seen many 404 pages while working on this great tool. Some are plain old Apache or IIS (Tomcat sometimes) error pages, some are custom crafted pages that tend to help users. But some of them fail to fulfill this mission.

Common and very annoying errors are:

  • Huge 404 pages
    A user is supposed to wait while 50kb or larger hmtl stuffed with irrelevant pictures loads just to see a message that there is no page he was looking for.
  • Missing scripts and/or images
    Some developers just clone their 404 pages from their sites’ codes forgetting to fix file paths. Result: ugly and broken error pages.
  • Misleading error messages
    These sound like: “This item is no longer available for sale. Search for this item in the search box.” (If this item is no longer available what should I search for? And was your faq.php for sale?), “There are no tickets to this event” and similar.
  • Full-page ads
    Well, these are no errors actually, but it is not too polite to show a full page ad for 5 to 20 seconds and then redirect a user to a non existing page.
  • Automatic redirects
    Some websites show their error pages for 3 – 5 seconds telling that the user will be redirected to the main page. Where the error page is stuffed with other content and error message is a thin line hidden somewhere between banners and 100+ line long sitemap. If you are showing error message – get user some time to read it, because sometimes it’s hard to understand why you are redirected out of the sudden.
  • Showing completely different content instead of the old one (while website headers return 404)
    This technique is very extensively used among news sites. And sometimes it’s hard to get why I see an article about shoes when I clicked the link to hat fashion article.

But we’ve also found many nice 404 page designs that really help users who are lost on the internet highway. And here we’ll show you some of our findings:

5ives.com

A Buddhistic message to the visitor

5ives.com custom 404 page

campaignmonitor.com

Clean design and helpful suggestions on what a visitor should do next

campaignmonitor.com custom 404 page

dainese.com

Would you be scared ?

Dainese.com custom 404 page

addons.mozilla.org

Clean, helpful and beautiful

addons.mozilla.org custom 404 page

0at.org

Were you looking for a bat holding a balloon?

a bat holding a balloon

fi.bemmu.com

Cute anime girl pointing to you that there is nothing you were looking for

anime 404 page

newyorker.com

Old-school highway drawing. The road to nowhere

newyorker.com custom 404 page

getmefast.com

Just a nice design

getmefast.com custom 404 page

action-electronics.com

Warning: they have a webmaster who may be coding their site while drunk

action-electronics.com custom 404 page

ibiblio.org

A very neat description in all the possible languages

ibiblio.org custom 404 page

meish.org

Kitty stole your web page…

meish.org custom 404 page

thedisneyblog.com

Danger, Donald Duck!

Danger, Donald Duck! 404!

current.com

No happy ending on the internet highway. Maybe you didn’t click hard enough?

current.com custom 404 page

vimeo.com

No more information available

vimeo.com custom 404 page

cityofheroes.com

A very videogame-like design of 404

cityofheroes.com custom 404 page

observer.com

Another black and white old-school drawing

observer.com custom 404 page

laughingsquid.com

Tentacles “locating a page” in the pool

laughingsquid.com custom 404 page

marksandspencer.com

Suggesting for what you may be looking for

marksandspencer.com custom 404 page

palmbeachpost.com

You got bounced over to this beach

palmbeachpost.com custom 404 page

productplanner.com

A green school board, white chalk, 404

productplanner.com custom 404 page

psphacks.net

ASCII art

psphacks.net custom 404 page

reddit.com

A broke reddit character

reddit.com custom 404 page

scrapblog.com

Pink, beach, girly. Have you lost your way?

Pink 404

crowdspring.com

The site owners feel embarrassed about their errors

crowdspring.com custom 404 page

vanityfair.com

Diplomacy on the shoestring: blame the third party!

vanityfair.com custom 404 page

versionsapp.com

Plain and simple

versionsapp.com custom 404 page

secure.wufoo.com

Dinosaur shouting out “404!”

wufoo's 404 Dino

Yahoo! News

Extremely helpful: if they can’t find what you’re looking for, they redirect you to Yahoo!’s search page

Yahoo! 404!