Web開發中那些不招人“待見”的功能

csdn發表於2013-06-18
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即可。

Web開發中那些不招人“待見”的功能

PS：縱深鏈（deeplink），又稱深層鏈、深度鏈，即通過網站的分頁地址設定連結，略過所在網站的廣告主頁，直接將使用者導向某個分頁。比如搜尋引擎中搜尋結果多是這種連結。埋置鏈和深層連結不僅會引發版權侵權問題，也會涉及不正當競爭。 

　　2. 我不想要你的蹩腳應用

　　這就好比Quora，假設我現在通過瀏覽器瀏覽，除非要進入App Store，否則一直停留在Web頁面。

Web開發中那些不招人“待見”的功能

　　3. 超大的插播廣告

　　在Forbes.com上我看到這個巨大的插播廣告。

Web開發中那些不招人“待見”的功能

　　請保持優雅！

　　4. 標籤輸入形式

　　我討厭看到一個核取方塊，並且只能點選核取方塊內容。

<p>Which fruit would you like for lunch?</p>
<form>
  <input type="radio" name="fruit" id="banana" />
  <label for="banana">Banana</label>
  <input type="radio" name="fruit" id="None" />
  <label for="none">None</label>
</form>

　　很簡單，增加與標籤相關的輸入，那麼使用者就有獲得更多的點選。

　　5. 打破超連結

　　難道我們沒學習《 Cool URIs Don't Change？》嗎？這篇文章寫於1998年且真實存在。正如我們所知，Web建立於1990年，1993年才真正開放首個 Web頁面連結。

Web開發中那些不招人“待見”的功能

　　我們需要通過.htaccess files、 web.config files維護重定向列表並儘量對其測試。雖然深度維護複雜的連結可能會很複雜，但你可以將companyname.com/about鎖死，這是因為你從PHP切換至Rails的原因。作為使用者，我習慣輸入/about。請不要給我“更新書籤”，我來這兒可不是為了做這個。

　　6. 點選國旗，代表你所選語言

　　我經常被要求從各個國家國旗列表中“選擇語言”。用國旗來代表語言這是很槽糕的做法，我想，不只是我一人這麼認為。

Web開發中那些不招人“待見”的功能

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

　　在Accept-Language header有個整體的語言列表，可供你選擇。

　　7. 你知道我的郵政編碼，可為什麼還要填寫國家？

　　對於生活在美國的人，我們總是被要求輸入郵政編碼（郵遞區號）、城市及國家，儘管有大量的API和資料庫可以為你提供資訊。

Web開發中那些不招人“待見”的功能

　　如果你能從使用者那獲取可靠的資訊（語言、位置、國家、愛好），前提是在沒有侵犯對方隱私的前提下，請為他們節省些時間吧！

　　8. 通過寬度、高度屬性調整超大圖片尺寸

　　也許你需要花一點時間來告之老闆，利用佳能EOS拍攝的六百萬畫素圖片並不很適合企業網站背景圖，尤其是隻有4MB JPGs大小。

Web開發中那些不招人“待見”的功能

　　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"，但只會隱藏問題。

Web開發中那些不招人“待見”的功能

　　那為什麼不挑選一個或者提供伺服器301重定向到其他頁面呢？你知道建立IIS7的規則嗎？你甚至可以刪除.aspx 副檔名。

　　如果你為for / and /default.html做同樣的事情，如果可以的話，只選擇一個並重定向到其他域名。

<system.webServer>
    <rewrite>
      <rules>
        <rule name="CanonicalHostNameRule1" stopProcessing="true">
          <match url="(.*)" />
          <conditions>
            <add input="{HTTP_HOST}" matchType="Pattern" pattern="^hanselman\.com$" ignoreCase="true" negate="false" />
          </conditions>
          <action type="Redirect" url="http://www.hanselman.com/{R:1}" redirectType="Found" />
        </rule>
          <match url="blog/default.aspx" />
          <action type="Redirect" url="blog/" redirectType="Found" />
        </rule>
      <rules>
   <rewrite>
<system.webServer>

　　英文連結：Hanselman

相關文章