Web开发中那些不招人“待见”的功能

互联网上优秀的Web开发案例不胜枚举，但也有一些开发者费劲心血开发出的网站仅因为某些功能就遭到吐槽的也屡屡不鲜。这不，原文作者Scott Hanselman发表的这篇文章《Stop Doing Internet Wrong 》就例举了互联网上那些不招人“待见”的功能。当然，文中提及的这些问题都是可以解决的，因为从技术角度上来讲，它们并不难。我们一起来看下，“有则改之，无则加冕”。

文章译文如下：

1. 向移动主页重定向桌面深层链（Deep Link）

谷歌已经决定采取深层链的做法比如foo.com/something/deep用以检测移动设备，然后重定向用户host文件m.foo.com。事实上，GoogleBot声明这些“ 错误重定向”并通过搜索引擎搜索的结果来给网站排名。

简单地说，避免不相关的重定向其实很简单：比如智能手机用户从桌面页面重定向到智能手机优化页面。智能手机只显示有重要的内容，自动屏蔽了无关紧要/不相干的页面。例如，我想进http://www.mcmenamins.com/Pubs页面，但前提是想在手机上打开该页面，而将它重定向到/mobile即可。

 

PS：纵深链（deeplink），又称深层链、深度链，即通过网站的分页地址设置链接，略过所在网站的广告主页，直接将用户导向某个分页。比如搜索引擎中搜索结果多是这种链接。埋置链和深层链接不仅会引发版权侵权问题，也会涉及不正当竞争。 

 

2. 我不想要你的蹩脚应用

这就好比Quora，假设我现在通过浏览器浏览，除非要进入App Store，否则一直停留在Web页面。

3. 超大的插播广告

在Forbes.com上我看到这个巨大的插播广告。

请保持优雅！

4. 标签输入形式

我讨厌看到一个复选框，并且只能点击复选框内容。

 

1 2 3 4 5 6 7

<font><font>的<P>水果，你会喜欢的午餐？</ P> </font></font> <font><font><FORM> </font></font> <font><font>  <input type="radio" name="fruit" id="banana" /> </font></font> <font><font>  <label for="banana">香蕉</标签> </font></font> <font><font>  <input type="radio" name="fruit" id="None" /> </font></font> <font><font>  <label for="none">无</标签> </font></font> <font><font></ FORM></font></font>

 

很简单，增加与标签相关的输入，那么用户就有获得更多的点击。

5. 打破超链接

难道我们没学习《 Cool URIs Don't Change？》吗？这篇文章写于1998年且真实存在。正如我们所知，Web创建于1990年，1993年才真正开放首个 Web页面链接。

我们需要通过.htaccess files、 web.config files维护重定向列表并尽量对其测试。虽然深度维护复杂的链接可能会很复杂，但你可以将companyname.com/about锁死，这是因为你从PHP切换至Rails的原因。作为用户，我习惯输入/about。请不要给我“更新书签”，我来这儿可不是为了做这个。

6. 点击国旗，代表你所选语言

我经常被要求从各个国家国旗列表中“选择语言”。用国旗来代表语言这是很槽糕的做法，我想，不只是我一人这么认为。

 

1 2 3

Accept:text/html Accept-Encoding:gzip,deflate,sdch Accept-Language:en-US,en;q=0.8

 

在Accept-Language header有个整体的语言列表，可供你选择。

7. 你知道我的邮政编码，可为什么还要填写国家？

对于生活在美国的人，我们总是被要求输入邮政编码（邮递区号）、城市及国家，尽管有大量的API和数据库可以为你提供信息。

如果你能从用户那获取可靠的信息（语言、位置、国家、爱好），前提是在没有侵犯对方隐私的前提下，请为他们节省些时间吧！

8. 通过宽度、高度属性调整超大图片尺寸

也许你需要花一点时间来告之老板，利用佳能EOS拍摄的六百万像素图片并不很适合企业网站背景图，尤其是只有4MB JPGs大小。

Ok，没关系，我们可以设置<img src="bigassfile.jpg" width="100" height="100">，这样图片就会缩小了。但不支持下载超大文件，在客户端上通过浏览器来调整尺寸大小；或者通过 PNGGauntlet或 PNGOut运行所有的PNGs，缺点是调整大小，经常会使图片变形。

9. 服务器页面的两种形式：WWW.和裸域

如果你见过example.com/something和www.example.com/something两种链接提供相同的内容，考虑到URL的规范化，你可以这样做，在META标签中使用rel="canonical"，但只会隐藏问题。

那为什么不挑选一个或者提供服务器301重定向到其他页面呢？你知道创建IIS7的规则吗？你甚至可以删除.aspx 扩展名。

如果你为for / and /default.html做同样的事情，如果可以的话，只选择一个并重定向到其他域名。

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<font><font><system.webServer> </font></font> <font><font>    <rewrite> </font></font> <font><font>      <rules> </font></font> <font><font>        <rule name="CanonicalHostNameRule1" stopProcessing="true"> </font></font> <font><font>          <match url="(.*)" /> </font></font> <font><font>          <条件> </font></font> <font><font>            <外接输入=“{HTTP_HOST}”matchType = “模式”的格局=“^ xymcm的\。com”IGNORECASE =“真”否定=“假”/> </font></font> <font><font>          </条件> </font></font> <font><font>          = <动作类型的“重定向”URL =“http://www.xymcm.com/ { R：1}“redirectType =”找到“/> </font></font> <font><font>        </规则> </font></font> <font><font>          <匹配url="blog/default.aspx" /> </font></font> <font><font>          <action type="Redirect" url="blog/" redirectType="Found" /> </font></font> <font><font>        < /的规则> </font></font> <font><font>      <rules> </font></font> <font><font>   <rewrite> </font></font> <font><font><system.webServer>    </font></font>