`
javatgo
  • 浏览: 1128221 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

how to show error(404) to the user

阅读更多
original: http://www.smashingmagazine.com/2007/08/17/404-error-pages-reloaded/?

404 Error Pages: Reloaded

<!-- Smashing Magazine - Medium Rectangle ad spot - AdManagement by commindo.de--> <!--//<![CDATA[ var m3_u = (location.protocol=='https:'?'https://adserver.3digit.de/www/delivery/ajs.php':'http://adserver.3digit.de/www/delivery/ajs.php'); var m3_r = Math.floor(Math.random()*99999999999); if (!document.MAX_used) document.MAX_used = ','; document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u); document.write ("?zoneid=14&amp;block=1&amp;blockcampaign=1"); document.write ('&amp;cb=' + m3_r); if (document.MAX_used != ',') document.write ("&amp;exclude=" + document.MAX_used); document.write ("&amp;loc=" + escape(window.location)); if (document.referrer) document.write ("&amp;referer=" + escape(document.referrer)); if (document.context) document.write ("&context=" + escape(document.context)); if (document.mmm_fo) document.write ("&amp;mmm_fo=1"); document.write ("'><\/scr"+"ipt>"); //]]>--> <!--// <![CDATA[ /* openads=http://adserver.3digit.de/www/delivery bannerid=20 zoneid=14 source= */ // ]]> --> <!-- google_ad_client = "pub-6779860845561969"; google_ad_width = 336; google_ad_height = 280; google_ad_format = "336x280_as"; google_ad_type = "text_image"; //2007-04-30: smashingmagazine google_ad_channel = "6623114851"; google_color_border = "FFFFFF"; google_color_bg = "FFFFFF"; google_color_link = "A7B63F"; google_color_text = "000000"; google_color_url = "0040C3"; //--> <iframe width="336" scrolling="no" height="280" frameborder="0" name="google_ads_frame" src="http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-6779860845561969&amp;dt=1190003283812&amp;lmt=1190003226&amp;format=336x280_as&amp;output=html&amp;correlator=1190003283812&amp;channel=6623114851&amp;url=http%3A%2F%2Fwww.smashingmagazine.com%2F2007%2F08%2F17%2F404-error-pages-reloaded%2F%3F&amp;color_bg=FFFFFF&amp;color_text=000000&amp;color_link=A7B63F&amp;color_url=0040C3&amp;color_border=FFFFFF&amp;ad_type=text_image&amp;ref=http%3A%2F%2Fwww.google.com%2Fig&amp;cc=100&amp;ga_vid=1166617483.1190003284&amp;ga_sid=1190003284&amp;ga_hid=1111878527&amp;flash=9&amp;u_h=1024&amp;u_w=1280&amp;u_ah=966&amp;u_aw=1280&amp;u_cd=16&amp;u_tz=480&amp;u_his=1&amp;u_java=true&amp;u_nplug=20&amp;u_nmime=90" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true"></iframe>
<noscript>&amp;lt;a href='http://adserver.3digit.de/www/delivery/ck.php?n=a8b2f81e&amp;amp;amp;cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'&amp;gt;&amp;lt;img src='http://adserver.3digit.de/www/delivery/avw.php?zoneid=14&amp;amp;amp;cb=INSERT_RANDOM_NUMBER_HERE&amp;amp;amp;n=a8b2f81e' border='0' alt='' /&amp;gt;&amp;lt;/a&amp;gt;</noscript>
<!-- google_ad_section_start -->

Three weeks ago we’ve showcased some of the most beautiful, creative and user-friendly 404 Error Pages; we’ve collected some interesting ideas one can use to help out the visitors once they got lost ony your page. We’ve also asked our readers to design their own 404 pages and promised to present the best solutions afterwards.

We’ve received over 100 entries. The choice wasn’t easy, so evaluating the quality of the entries we’ve considered - among other things - the communication with visitors, precise and clear navigation, the use of graphics, creative ideas and some outstanding solutions. Some of the solutions presented below might not be as helpful as they could or should be, however they include some creative approaches you should be aware of designing your 404 error pages.

We’d like to thank to everyone who participated, your input means a lot for us and for web-designers worldwide. You help to improve the quality of the Web. Don’t underestimate it.

So here is what you’ve come out with: over 40 working examples of user-friendly, creative and outstanding 404 error pages - in a brief overview.

1. Appealing images

A really dirty, hand-made image with a comment - for despaired visitors only. The page also includes a search box.

404 Error Page Example

Rainfall Daffinson makes sure you don’t feel lost.

404 Error Page Example

Even a 404-error page can look stylish.

404 Error Page Example

A book with the page which couldn’t be found.

404 Error Page Example

404 Error Page Example

404 Error Page Example

Jamie Huskisson communicates with “lost” visitors using imagery.

404 Error Page Example

404 error as time on a clock.

404 Error Page Example

Sometimes you can feel or even smell that you’re definitely not on the page you wanted to visit.

404 Error Page Example

2. Getting poetic

404 error haiku. Informative, however a direct link to the start page would be quite useful.

404 Error Page Example

Three more haikus by Lumino.us. Plus beer to keep you company.

404 Error Page Example

And one more haiku by alt-web.com.

404 Error Page Example

BlueVertigo offers a poem with horizontal scrolling.

404 Error Page Example

A small poem about the 404 error by Poemofquotes.com

404 Error Page Example

Jacob Thomas quotes Winston Churchill and informs lost visitors that the page they’ve been looking for seems to have been burnt down by a puckish elf called ‘Prontyr’.

404 Error Page Example

Darren Hoyt appeals to the humanity of mistakes and errors and communication with visitors directly.

404 Error Page Example

3. Communicate through emotions

Isn’t he sad…

404 Error Page Example

…however, Cat Content seems to be doing well…

404 Error Page Example

…and Krystal gets no biscuit.

404 Error Page Example

4. Communicate through irony

Maybe an idiot has passed you the wrong link or maybe a bigger idiot has linked in their site to a page that doesn’t exist. In both cases the big boss man has been sent an email informing him of this problem, so the person responsible can be tied to a tree and horsewhipped! Nice to know.

404 Error Page Example

Martin Yelland has some good explanations about what happened: strange little Web Gremlins or fluctuations of the Earth’s Magnetic field might have caused the error - however, a team of highly trained monkeys has been dispatched to deal with this situation.

404 Error Page Example

Even although you’re a douche bag, you can use a search box to get to the page you’ve been looking for.

404 Error Page Example

Apparently, this is a test of the emergency broadcast systems. You should remain calm, these kinds of things happen all the time. The “four oh four error” by Poropoptrt.com.

404 Error Page Example

5. While you are lost…

…you can read a comic…

404 Error Page Example

…or more comics (the image is changing after every reload)…

404 Error Page Example

…get two cocktail recipes…

404 Error Page Example

…die…

404 Error Page Example

…don’t count to 404 (the site also provides a search box and a tag cloud)…

404 Error Page Example

6. Explain what happened.

Explanation in a well-designed visualization of what happened.

404 Error Page Example

Be aware when you’ve reached a buzzless page…

404 Error Page Example

404 Error Page Example

7. Explain what can be done.

404 Error Page Example

Foobr offers a detailed explanation on what can be done and what the “lost” visitor might be looking for.

404 Error Page Example

404 Error Page Example

3amproductions.net suggests pages the visitor might be looking for.

404 Error Page Example

Renet-web.met offers recent posts and a search box.

404 Error Page Example

8. Unusual solutions.

Shocking visitors with colors - interesting, but not quite appealing…

404 Error Page Example

Blue Screen Of Death on the Web.

404 Error Page Example

Sorabji.com lists what people were looking for when they got the 404 Page Error. Interesting approach, however not recommendable - think of spambots.

404 Error Page Example

9. Be sincere.

Jeremy seems to be really sorry about the missing page…

404 Error Page Example

…so is Rainer…

404 Error Page Example

10. Do whatever you want to do.

This is not a working example, since the site isn’t using the page as a working 404 error page. Nevertheless it’s quite funny: the characters are talking, and as you might suggest, they are talking about 404 errors!

404 Error Page Example

<!-- google_ad_section_end -->
分享到:
评论

相关推荐

    WordPress 2.7 Cookbook.pdf

    Creating a custom 404 error page 71 Getting ready 71 How to do it 72 How it works 72 There's more... 73 Using a static page as a homepage 73 Getting ready 73 How to do it 73 How it works 74 ...

    go系统编程(英文版)

    are fundamental tasks, show you how to define functions in Go, where the defer keyword is mentioned for the first time in this book and continue by discussing the data structures that Go offers using ...

    Mastering Swift 4, 4th Edition-Packt Publishing(2017).pdf

    Understanding and knowing how to add concurrency and parallelism to your apps can significantly enhance the user experience. Chapter 15, Swift Formatting and Style Guide, defines a style guide for ...

    AJAX and PHP.pdf

    explain the basics of jQuery and show how to create a simple, yet efficient client- server chat mechanism using AJAX. Chapter 9: AJAX Grid explains the usage of an AJAX-enabled data grid plugin, ...

    Oracle APEX Cookbook, 2nd Edition

    This book will show you how to be agile in the development of your web applications by using team development debugging and third party tools After reading this book you will be able to create feature...

    LCTF软件备份VariSpec™ Liquid Crystal Tunable Filters

    In earlier revisions, the error status light was cleared after a VsSetWavelength() call failed, so the user did not see the light turn red to alert that an error had occurred. This has been fixed in ...

    微软内部资料-SQL性能优化3

    To determine the transaction isolation level currently set, use the DBCC USEROPTIONS statement, for example: USE pubs GO SET TRANSACTION ISOLATION LEVEL REPEATABLE READ GO DBCC USEROPTIONS GO ...

    TwoDesk Components

    Each validator component can validate one control, and there are two controls that will show the validation result to the user, either as a label with the error message or a small graphics symbol....

    PHP.and.MySQL.Web.Development.5th.Edition

    world website and show you how to implement these aspects in PHP and MySQL. They also introduce you to the integration of front-end and back-end technologies by using JavaScript in your application ...

    VclZip pro v3.10.1

    IMPORTANT: If installing the registered version, please be sure to always re-install/rebuild the components (VCLZip and VCLUnZip) to the component pallette (or rebuild the design time package) so that...

    beginning VisualBasic2010(英文版)入门必读

    XAML and WPF are the most recent addition to how VB programmers create user interfaces for their applications. You′ll also work with events, create toolbars, buttons, forms, display dialog boxes, ...

    微软内部资料-SQL性能优化5

     Describe the different types of indexes and how indexes can be used to improve performance.  Describe what statistics are used for and how they can help in optimizing query performance.  ...

    Python Algorithms - Mastering Basic Algorithms in the Python Language

    * Well-known algorithms and data structures that are built into the Python language are explained, and the user is shown how to implement and evaluate others himself. What you'll learn * Transform ...

    NewSID(光学习一下代码就可以了,没看清楚介绍别运行)

    The symptom of this bug was error messages reporting access denied when account information was updated by an authorized user. Version 3.01 adds a work-around for an inaccessible Registry key that is...

    word自动转化为chm

    However, what bothers you most is not using how many kinds of tools, the Word file, the CHM file and the online documents are all need to be modified, this is the real matter. Once the changing work ...

    plsqldev12.0.6.1832x32主程序+ v12中文包+keygen

    You can use the editor preferences to configure when and how items are added to and deleted from the PL/SQL Clipboard. Debugger Enhancements You can now display compound variable values such as user...

    PLSQL.Developer(X32) v12.0.1.1814主程序+ v11中文包+keygen

    You can use the editor preferences to configure when and how items are added to and deleted from the PL/SQL Clipboard. Debugger Enhancements You can now display compound variable values such as user-...

    JSP Simple Examples

    In this program we are going to know how the server determines whether the password entered by the user is correct or not. This whole process is controlled on the server side. Multiple forms in jsp ...

    plsqldev12.0.4.1826x32主程序+ v12中文包+keygen

    You can use the editor preferences to configure when and how items are added to and deleted from the PL/SQL Clipboard. Debugger Enhancements You can now display compound variable values such as user...

    plsqldev12.0.6.1832x64主程序+ v12中文包+keygen

    You can use the editor preferences to configure when and how items are added to and deleted from the PL/SQL Clipboard. Debugger Enhancements You can now display compound variable values such as user...

Global site tag (gtag.js) - Google Analytics