how to show error(404) to the user

最新推荐文章于 2020-04-12 18:37:46 发布
最新推荐文章于 2020-04-12 18:37:46 发布
阅读量2.2k 收藏
点赞数
分类专栏： Web development 文章标签： visualization search random insert colors image
original: http://www.smashingmagazine.com/2007/08/17/404-error-pages-reloaded/?

404 Error Pages: Reloaded

Published on August 17th, 2007 in Design Showcase Tags: Del.icio.us Digg Submit to Stumbleupon! | , , , , | 176 comments.
<script type="text/javascript"> </script> <script src="http://adserver.3digit.de/www/delivery/ajs.php?zoneid=14&block=1&blockcampaign=1&cb=81705322837&loc=http%3A//www.smashingmagazine.com/2007/08/17/404-error-pages-reloaded/%3F&referer=http%3A//www.google.com/ig" type="text/javascript"></script> <script type="text/javascript"> </script> <script type="text/javascript"> </script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script> width="336" scrolling="no" height="280" frameborder="0" name="google_ads_frame" src="http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-6779860845561969&dt=1190003283812&lmt=1190003226&format=336x280_as&output=html&correlator=1190003283812&channel=6623114851&url=http%3A%2F%2Fwww.smashingmagazine.com%2F2007%2F08%2F17%2F404-error-pages-reloaded%2F%3F&color_bg=FFFFFF&color_text=000000&color_link=A7B63F&color_url=0040C3&color_border=FFFFFF&ad_type=text_image&ref=http%3A%2F%2Fwww.google.com%2Fig&cc=100&ga_vid=1166617483.1190003284&ga_sid=1190003284&ga_hid=1111878527&flash=9&u_h=1024&u_w=1280&u_ah=966&u_aw=1280&u_cd=16&u_tz=480&u_his=1&u_java=true&u_nplug=20&u_nmime=90" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true"> <script src="http://adserver.3digit.de/www/delivery/ag.php" type="text/javascript"></script>

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

Tags: , , , ,

 
coofucoo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
go-get-argsmap-from-commandline:Get the user's parameters from the command line and encapsulate them in a map 从命令行中获取用户的参数，并封装到map中
04-10
封装命令行参数以前我们... "value":"default value v1", "expect": "user expect v1", "err":"show error message when not match pattern1" }, "-flag2": { "usage":"Teach you how to use flag1", "must_have_value
ARM® Compiler v5.06 for µVision® armasm User Guide
12-08
1.3 How the assembler works 1.4 Directives that can be omitted in pass 2 of the assembler 2 Overview of the ARM Architecture 2.1 About the ARM architecture 2.2 ARM, Thumb, and ThumbEE instruction sets...
.user.ini导致出现404错误的问题
laocheng2018的博客
01-28 619
目的:     复制网站到新域名下面 不小心把.user.ini文件删除,然后就不能安装install,总是出现404 后来打开新复制的.user.ini看到上面的basedir填写的是原网站的,属于路径错误 解决办法:           在basedir后面填写新网站的域名
解决servlet404报错
EverdayForCode的博客
04-12 1万+
解决 servlet 404 报错
javax.servlet.UnavailableException
crawler
02-03 894
正常的应用在断网环境下启动服务器报错javax.servlet.UnavailableException，后来发现在网通的情况下就没问题。原因是在struts中的struts-config.xml中dtd指向的路径是网络环境http://struts.apache.org/dtds/struts-config_1_2.dtd，所以断网环境报异常了 解决方法一： 将该dtd下载放在web-inf...
go系统编程(英文版)
04-13
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 ...
websphere缓存
lzhfdxhxm的博客
09-01 2474
使用was服务器，当出现改了web.xml、加了或改了jar包、添加了依赖包、改了jsp文件等不生效的时候，有可能就是因为was的缓存造成的。 was缓存路径有多个： /opt/IBM/WebSphere/AppServer/profiles/AppSrv01/config/cells/10Cell01/applications/${应用名}.ear/deployments...
JavaWeb——Servlet（全网最详细教程包括Servlet源码分析）
热门推荐
扬俊的小屋
05-13 43万+
JavaWeb——Servlet Tomcat工作机制动画演示(点击动图可全屏观看） 什么是Servlet Servlet（Server Applet），全称Java Servlet，未有中文译文。是用Java编写的服务器端程序。其主要功能在于交互式地浏览和修改数据，生成动态Web...
404 错误页面：重装上阵
weixin_33923762的博客
10-15 138
再来介绍一些有意思的 404 页面的设计案例： 1. Appealing Images A really dirty, hand-made image with a comment – for despaired visitors only. The page also includes a search box. Rainfall Daffinson makes sure you do...
ERROR: libvpx decoder version must be >=0.9.1
spts2008的博客
02-10 3844
apt-get install libvpx
docker: Cannot connect to the Docker daemon at unix:///var/run/docker.sock. How to deal with this problem?
最新发布
07-13
The error message you are seeing usually occurs when the Docker daemon is not running or the current user does not have the necessary permissions to access the Docker daemon. Here are a few steps you can try to resolve this issue: 1. Check if the Docker daemon is running: You can use the following command to check the status of the Docker daemon: ``` sudo systemctl status docker ``` If it is not running, you can start it using: ``` sudo systemctl start docker ``` 2. Verify user permissions: Ensure that the current user has the necessary permissions to access the Docker daemon. By default, the Docker daemon requires root or sudo privileges. You can add your user to the `docker` group to grant it permission to access Docker without using `sudo`. Use the following command to add your user to the `docker` group: ``` sudo usermod -aG docker $USER ``` After running this command, you need to log out and log back in for the changes to take effect. 3. Check Docker socket permissions: Make sure that the Docker socket file has the correct permissions. Run the following command to verify: ``` ls -l /var/run/docker.sock ``` The output should show that the file is owned by the `root` user and the `docker` group. If not, you can change the ownership using: ``` sudo chown root:docker /var/run/docker.sock ``` 4. Restart Docker: After making any changes, restart the Docker service to apply the modifications: ``` sudo systemctl restart docker ``` If none of these steps resolve the issue, there might be other underlying problems. Feel free to provide more details or error logs for further assistance.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值