101 種讓你的網頁看起來更酷的方法

譯者：楊海祥

原文：101 Ways to Make Your Website More Awesome

本文為極客學院Wiki組織翻譯，轉載請註明出處。

時間：2016.3.15

上週我和一個老客戶聊天，她說：“Nick， 我想改進一下我的網站但是我卻不知道從何下手。”

所以，我向周圍人問了一圈，包括我的朋友、家人以及其它一些不是網際網路行業的人。他們幾乎都說了相同的內容：

“我需要一個清單。我不知道怎麼搭建一個網站，所以我需要僱傭一個人來幫我完成。但是，問題是我仍然不知道我需要做些什麼內容”。

因此，我列了一個清單，其中包含了我們在搭建 AwesomeWeb 網站所做的所有事，甚至包括我們還沒有做的一部分。

我可以保證如果你完成了這份清單上的所有工作，你的網站將會成為你們行業最好的網站之一。

我怎麼知道呢？

在 AwesomeWeb 網站上，我檢視了 1000 多個世界上最優秀的自由職業工作者的網頁。據我所知，沒有任何一個網頁可以完全達到列表所列出的所有要求。

作為企業家，你可以使用這份列表來判斷你的網站還需做哪些工作，並將它們發給你的設計人員與開發人員。你甚至可以自己去修復其中一小部分問題。

如果你是自由職業工作者，你可以用這份清單來幫助你製作出更加漂亮的東西。然後回頭告訴你的老顧客，說：“我重新檢查了一下我們曾經做的東西發現我們可以改進一下這兒、這兒以及那兒，它們的報價分別是 500 美元、1000 美元、5000 美元，最終可以達到這樣結果......”。

重頭戲來了，下面一起來看看這份清單吧。

酷炫的商標

1. 設計一個專業的 Logo。很少發現有哪些網站或者部落格有非常專業的 Logo。因此一個專業的 Logo 可以立即增加網站的可信度。
2. 上傳高解析度適配網頁圖示（即瀏覽器標籤上的方形圖示）。大多數站點都是 16 x 16 畫素的網頁圖示。但是在高解析度螢幕上，它們會變得非常模糊。使用 X-Icon 編輯器可以生成 64 x 64 畫素的圖示。
3. 使用高解析度圖片。只需要確保影象是容器的兩倍大小，然後再將按比例縮小即可。
4. 最多使用 2-3 種顏色。你可以有一種背景顏色、一種號召提醒顏色以及一種強調顏色。
5. 從調色盤選擇顏色時，選擇互補色或者三色組顏色。好的顏色組合可以讓你的設計看上去更有內涵。
6. 永遠不要使用純黑色 (#000000)。並不存在黑色這樣一種顏色，所以使用黑色會元素出上去在平面外一樣。事實上，黑色往往是其它顏色的暗影。
7. 如果你想你的設計看上去有個性一些，請記住永遠不要使用中性灰色 (#cccccc)。稍微增加一些黃色會讓顏色看上去更溫暖，加一些紅色會讓顏色看上去更有活力，或者加一些藍色讓它看上去更可信。

酷炫的排版

1. 使用 premium 字型。可以使用諸如 Typekit 這類的服務。據說 95% 的網頁都使用的是排印。使用 premium 字型是給瀏覽者留下好印象最簡單方式。
2. 最多使用 2-3 種字型。字型越多會讓介面看上去越亂同時還會使得頁面載入時間非常長。選擇一種標題字型與一種段落字型就足夠子，最多再選一種用於特殊場合的字型。
3. 字型最小設定為 16 px。如果字型小於 16 px，則大螢幕上閱讀起來比較吃力。顯示在移動裝置上時，可以將字型設定為 12 px。
4. 選擇合適的排版，比如使用小四號字型、五號字型或者黃金比例。可以按照 H4、H3、H2、H1 的比例設定文字字型大小。
5. 設計豐富的排版元素，比如引用、子彈型列表、數字列表、標題、警告、高亮文字、程式碼示例、縮寫甚至是地址。
6. 使用自定義圖示字型比如 Font Awesome 替換使用圖片作為社交媒體 Logo、導航按鈕或者互動式影象。圖示字型可以更快載入而且更容易放大。除此之外，你還可以隨意的改變其顏色。

優美的佈局

1. 使用三分法作為基本構圖。將你的佈局的水平和豎直方向分別分成三份，然後將關鍵點放線上的交叉處。
2. 維護一個垂直網格。將你的介面分成 8、12 或者 16 列，列與列之間的間距要稍微大一些。
3. 垂直網格應該與基線網格保持風格一致。文字行之間的空間和內容塊之間的空間一樣重要。。
4. 空白是網頁上的奢侈品。我們需要利用空白預留 “呼吸空間” 以及保持平衡，把讀者的眼球吸引到最重要的內容處。
5. 做好網頁上視覺元素之間的平衡，例如按鈕、輸入框、表單、大標題等。網頁佈局應該達到這樣的效果：當眯起你的眼睛時，你能清晰地看到一條路線，而這正好就是你希望讀者的閱讀順序。

優雅的使用者介面

1. 使用大的、加粗的動作按鈕。幾乎每個網頁都有一個目標，而往往這個目標就是點選一個按鈕。所以，請確保這個按鈕不會被使用者忽略。
2. 為你的連結、按鈕、輸入以及文字框新增懸停、活躍狀態變化。如果你選擇在懸停時加亮你的按鈕，那麼你也應該類似地處理你的連結和輸入框的邊框。
3. 保持風格一致。所有文字框與輸入框的風格應該是相同的。相同的邊框顏色、背景顏色、佔位符、活動文字等。確保你的 tab 鍵切換順序正確設定，這樣你可以使用 tab 鍵順序遍歷網頁上的元素。
4. 改變已訪問連結的顏色，以便讓你的使用者知道這些頁面之前已經被訪問過。
5. 一旦你有了自己的 Logo、顏色、排版、佈局以及圖片大小後你應該建立自己的風格。新加的使用者介面應該和你已有的風格保持一致，這才算有一個好的使用者介面設計。

完美的使用者體驗

1. 在你的按扭或者其它元素上新增細微的改進。例如，當 “上傳” 按鈕被點選後，你應該將其改變為 “上傳中” 或者 “處理中”。
2. 不要修改螢幕滾動。千萬不要修改瀏覽器的預設動作。也許你會認為滾動條滾動比正常情況快兩倍效果會好一些，但事實上並不是這樣。
3. 主頁不要使用浮動塊。在小空間上顯示更多的資訊有其它更好的方法。
4. 不要使用歡迎介面。使用者第一次訪問你的介面時，他們會希望直接看到你的主頁。
5. 使用首行標題、子標題、導語、列表或者說明讓內容更容易閱讀。大多數人都會先大概掃描一遍再決定是否繼續閱讀的。
6. 在你所有的表單、輸入框以及下拉單中新增描述型佔位文字。如果你想告訴使用者在該位置輸入什麼內容，那麼直接告訴他。例如對於一個下拉選單，將第一項設定為 “選擇年份” 比設定為 “2016” 更好一些。
7. 在你的表單上新增 HTML5 驗證。當使用者提交的表單有錯誤時，將該錯誤明確地顯示出來。
8. 讓你的網站對有視覺障礙的人群友好一些。儘量避免使用模糊的連結名字、避免排版凌亂、正確使用標點符號、使用簡單佈局、為圖片新增替換文字、使用較大的文字字型、背景色與文字顏色對比度高一些等。
9. 使用 BrokenLinkCheck.com 檢測網站中的壞連結。修復這些失效的連結以免使用者點選到它們的時候感覺到不爽。

成熟的開發

1. 確保你的網站是針對移動端優化過的，以便它可以自適應地展示在任何裝置上。針對移動裝置優化過的網站可以載入得更快一些，可以讓使用者獲得更加好的使用體驗。
2. 生成並顯示合適大小的圖片。如果你上傳了一張很大的圖片，而你希望將其展示在網站的其它地方，比如側邊條，這種情況下請確保你顯示的是該圖的縮圖而不是原始圖片。
3. 為所有的圖片或連結增加 alt 標籤。如果由於某些原因你的圖片沒有正常載入，那麼圖片的位置就可顯示這些標籤內容。類似的，當你的滑鼠懸停在連結上時，你的瀏覽器也會顯示連結相關的標籤。
4. 使用 < strong > 與 < em > 加粗文字與增加下劃線，而不要使用 < b > 和 < i >。雖然它們有同樣的效果，但是它們有本質的區別。< b > 是一種風格，但是 < strong > 卻說明了應該怎麼理解這些內容。
5. 處理草率複製的 HTML 文字。當你把內容拷貝到 WYSIWYG 編輯器 (比如 WordPress 裡的視覺化編輯) 時，它會自動給你新增很多不必要的空格或者內建風格程式碼。如果不處理一下，你網頁的可讀性就會非常的差。
6. 從 HTML 程式碼中刪除 css 程式碼。99% 的 css 程式碼都應該放在獨立的 css 檔案中，這樣當你更新 css 檔案後，你的所有顯示的風格都會相應的發生變化，而不需要一個頁面一個頁面地去修改。
7. 請用 Sass 變數來儲存你的顏色設定，以及全域性一致的元件。當你想修改顏色以及該顏色對應的陰影色時，你只需要修改一行程式碼而不用去修改幾百行程式碼。
8. 以防更改域名，請連結到永久連結而不要連結到 URL。例如，連結到一個網頁時，你的 HTML 應該寫成 < a href=“/slug-goes-here”> 而不是 < a href=“http://domain.com/slug-goes-here”>。同樣，對於圖片以及 css 背景也是一樣的。如果你沒有這樣做，那麼切換域名後，網頁上所有的源都會連結到不存在網頁或檔案。
9. 開發自主的外掛或者工具以提供某些獨特的功能。雖然自主研發的外掛很難維護，但是會讓你網站相比於其它類似網站更有競爭力。
10. 做好瀏覽器相容性測試，保證你的網站在 Chrome、Firefox、Safari、IE 以及其它瀏覽器上都可以合適的顯示。老版本的 IE 的相容性問題簡直是臭名昭著。可以使用 BrowserStack 進行測試。
11. 使用 W3C 的標籤驗證服務發現 HTML 中的顯示錯誤。請記住，絕大多數網站都並不是 100% 正確地使用 HTML 標籤的。雖然這一項並不是最高優先順序的任務，但是沒有錯誤會讓你的網站更好一些。
12. 使用 staging 環境來修改你的網站。理想情況下，你應該有一個所有人都能看到的生產環境網站，以及 staging 站點。所有的開發人員的修改都在 staging 站點上。只有當 stagging 版本穩定後，再將該版本上線。
13. 在版本宣告處顯示當前年份。當你看到一個老的版權宣告時，你往往會認為這個網站已經不再維護了。使用 PHP 或者其它指令碼來設定當前年份，而不要使用靜態文字，例如 © < esatablised >-< current year >。

搜尋引擎優化

1. 每個頁面設定一個希望搜尋引擎用來排序的關鍵詞，然後整個頁面都圍繞該關鍵詞進行優化。這並不是意味著在每個句子裡都放上這個關鍵字，而是說在準備內容應該時刻圍繞該關鍵詞。
2. 在每個頁面上都放上富關鍵字標題標籤。該標題就是顯示在 Google 搜尋結果中的藍色連結。最多不能超過 55 個字元。
3. 每個頁面只包含一個 H1 標籤。大多數情況下，它應該和你的標題標籤是一樣的。
4. 在內容中使用 H2、H3 以及 H4 標籤增加內容的層次感。
5. 優化特定關鍵字的方法還包括在標題、H1、子標題、以及前 1/3 的內容中包含該關鍵字。
6. 你的 Meta 描述會是展示在搜尋結果連結下面的內容，所以請確保每個頁面都有 Meta 資訊，且所有的 Meta 都包含了相應的關鍵詞。
7. 你的永久連結，也就是域名後的 URL 部分，也應該包含關鍵詞，這些詞之間可以用破折號隔開。
8. Google 的演算法中會考慮域名註冊的時間，因為一般認為一個域名註冊的時間越長其擁有高質量資源的可能性越大。所以你可以提前幾年就註冊你的域名。如果你的域名已註冊了十年，那麼你也會認真對待你所做的事。
9. 平均來說，任意給定關鍵字的 SERP (搜尋引擎結果頁) 的第一個連結網頁都至少有超過 2000 個字。當你想讓你寫的部落格或者建立的網頁在搜尋結果有一個好的排名時，那麼你至少要有 2000 個字。
10. 為你的網站建立一個站內地圖，將其儲存為 sitemap.xml 置於根目錄下，就可以在使用連結 domain.com/sitemap.xml 顯示該內容。該檔案還可以告訴 Google 此站點下的頁面都放在哪些地方。當你增加新的內容後請記得修改該檔案。也可以通過 Webmaster Tools 將其提交到 Google。
11. 使用 Webmaster Tools 管理你的網站，這樣你就可以知道 Google 如何索引你的網站，及時更新網站嚴重的錯誤。
12. 要想提高你的圖片的搜尋排名，那麼在上傳至網站時請記得重新命名你的圖片，例如 rank_for_this_keyword_phase.png。
13. 在網站中新增 robots.txt 以告訴搜尋引擎哪些頁面允許索引，哪些不允許索引。
14. 新增規範的重定向，將你的非 www 網址重定向到 www 網址，反之亦然。
15. 使用 LSI (隱含語義索引) 關鍵字提高網頁在主關鍵字下的排名。使用 Google 搜尋主關鍵字然後在 “Searches related to ...” 下就可以找到 LSI 關鍵字了。
16. 確保你的內容之間能有效的互聯。從主頁開始，你的每個網頁都應該在最多三次的點選下就能到達。
17. 在相關的頁面上新增結構化的資料以幫助 Google 合適的索引你的內容。網頁中需要的結構化資料主要包括：人物、產品、事件、組織、電影、書以及評論。可以使用 Schema Creator 生成結構化資料。
18. 檢查 Google PageSpeed Insights 說明，確保你已經解決了所有拖慢你網頁載入速度的問題。你的網站載入越快，那麼它的排名也就越高。

加速網頁載入

1. 網頁大小不要超過 2 MB。可以使用 tools.pingdom.com 檢查你網頁的主登入介面，保證其不會過超過 2 MB。任何超過 2 MB 的內容都太大了。
2. 保證載入一個網頁不會產生超過 50 個請求。任何網頁上的檔案或圖片都會產生一個 HTTP 請求。請求數量越少，網頁載入得越快。統計顯示平均每個網頁有 70 個請求。可以使用 GTmetrix 檢視你的頁面請求數。
3. 用 CSS 設計你的網頁元素，千萬不要使用背景圖片。不要使用圖片顯示按鈕、表單或者其它站點共享的元件。CSS 載入會更加快一些，而且可以靈活地適應不同的佈局。
4. 上傳圖片到你的站點之前請先優化你的圖片。像 TinyPNG 這類的工具，可以在不降低解析度和圖片質量的前提下將圖片的大小減小 80-95%。
5. 利用 CDN 網路將你的圖片以及大檔案儲存到世界多個地方。CDN 將你的檔案儲存分發到不同位置的伺服器上，這樣可以根據訪問者的位置就近獲得檔案從而加速頁面載入。
6. 上傳檔案前，請先使用工具壓縮 JavaScript、HTML 或者 CSS 檔案。你可以使用 Closure 編譯器壓縮 JavaScript，使用 HTML Minifier 壓縮 HTML，使用 YUI 壓縮 CSS 檔案。
7. 把渲染塊的 JavaScript 放到頁尾去。放在 header 中的指令碼只應該是那些會立馬影響頁面設計的指令碼，例如自定義的字型。
8. 避免登入頁的重定向。重定向會觸發一次額外的 HTTP 請求，這會拖慢頁面渲染。
9. 為那些不經常更新的頁面使用瀏覽器快取並設定合適的失效時間。瀏覽器快取允許瀏覽器從本地磁碟中載入之前下載的頁面，而不需要通過網路下載。
10. 伺服器配置啟用 gzip 壓縮。壓縮可以減少 90% 的傳輸響應時間，這會縮短頁面第一次渲染的時間。
11. 伺服器配置啟用 Keep-Alive，這樣一個 TCP 連線可以傳輸或接收多個 HTTP 請求。這樣可以減小後續請求的時延。
12. 使用專用伺服器提供服務以降低響應時延。當你的服務在共享的環境時，通常一個伺服器上會有成百上千個服務在執行，而你的服務只是其中之一。如果正好其中某個服務的流量非常的大，那麼它會拖慢你的網頁載入速度。

優美的圖形設計

1. 為你的優惠碼設計一個好看的封面。這件事本身並不難，但是卻對轉化率會有很大的影響。
2. 為主頁或者銷售頁面設計個性化的插圖。為你的網站特意設計一些有特色的插圖會更容易讓瀏覽者印象深刻。
3. 為你的部落格設計一個或者一系列有特色的圖片。把這些圖片在 Facebook、Twitter 這些社交網站上傳播。當一個使用者看到這些圖片時，他們就能立馬聯想到你寫的部落格。
4. 為你自己以及你的團隊成員設計個人頭像或者是一些漫畫頭像。與每次有新成員加入時都請專業攝影視為其拍攝相比，設計一個漫畫形象會便宜很多。此外，這對於新成員還是一份不錯的禮物。
5. 將資料或者其它某些內容以圖表的方式展示出來會比單純地使用使用文字更能吸引流量。人們都喜歡在網站（例如 Pintrest ）上分享圖表或者在他們自己網站上通過回鏈的方式轉發你的內容。
6. 如果你會在你的網站上釋出一些視訊，那麼你應該為這些視訊新增簡介，因為這樣會給別人更加專業的感覺。新增一些能讓你的視訊更為突出的相關視訊或者動畫就更好了。

網站安全

1. 使用 SSL 證照以允許瀏覽器與伺服器之間建立安全連線。如果你允許使用信用卡，那麼你更應該使用 SSL 安全證照，因為絕大部分結賬軟體都有這樣的要求。此外，Google 也說到使用 SSL 證照有助於網站的搜尋排名。
2. 隨時更新軟體與外掛。當 WordPress 或者其它 CMS 軟體釋出更新時，它們往往都是為了修復一些危險漏洞。如果你不更新，那麼你的網站被攻擊就只是時間的問題。
3. 設定雙認證管理員登入。大部分黑客攻擊都是從登入介面開始的。
4. 檢測並清除惡意軟體。如果你的網站曾經被黑過，那麼這些黑客可能在伺服器上放了一些不容易被發現的破損檔案。如果不及時地刪除這些檔案，Google 很可能會把你的網站列入黑名單中，並降低網站的排名。當使用者訪問你的網站時，它還會警告使用者提醒他們不要訪問。
5. 千萬不要將管理員使用者名稱設定為 admin。刪除預設管理員賬戶再新建一個不同的管理員使用者名稱。
6. 定期備份你的資料庫和網站檔案。大多數備份軟體都只會備份你的資料庫，實際上只備份了你的資料和內容。但是如果你的網站檔案丟失了，這時候你就需要使用備份檔案來恢復了。

網站內容

1. 自己設計 404 錯誤頁面，當使用者訪問不存在的網頁時就會顯示該頁面。使用 404 頁面將使用者帶回主頁或者幫助他們找到他們正在找的內容。
2. 除了主頁外，"關於我們" 頁面也許是最多被訪問的頁面了。請確保該頁面上正確地展示了你以及你的公司。
3. “聯絡我們” 頁面除了幫助那些潛在客戶聯絡你之外，還可以用於在你、客戶以及 Google 之間建立信任關係。Google 在決定網頁排名時，搜尋引擎會在 “聯絡我們” 網頁尋找郵箱、電話號碼以及地址。詳細的聯絡資訊會讓 Google 覺得網站會更可靠一些。
4. 把登錄檔單放在網站的各個頁面也許是個不錯的注意。不過，使用一個空的但是會有更高轉化率的註冊介面會更好一些。當你希望使用者訂閱時，直接將其連結至該介面即可。
5. 當使用者訂閱你的內容時，請記得給他們返回確認頁以要求他們確認他們的電子郵箱。如果他們沒有正確地進行確認，他們可能會完全忘記這事再也不會回來。
6. 使用者在確認郵件中點選確認連結後，你應該給他們傳送感謝頁同時告訴他們接下來可以做什麼。感謝頁面每個訂閱者會收到一次且僅一次，所以這是一個絕佳的機會給他們一個優惠價或鼓勵他們購買產品。
7. 你的網站應該有一個登入頁模板，這樣當你需要的時候就可以直接使用它。
8. 如果你是在網上銷售什麼東西，請確保你的銷售介面要非常好看。從標題開始，留好字元間距。你也可以新增一些銷售視訊。在頁面的底部記得引導顧客去購買。

社交媒體

1. 控制你的部落格和網頁上的社交平臺分享按鈕數量，因為每個按鈕都會執行一段指令碼，這會額外地增加頁面的載入時間。只包含內容常被分享的那些社交網站的分享按鈕即可，例如 Faceboock、 Twitter、LinkedIn、Pinterest、Google+ 等。
2. 為你的社交頁面建立圖片，例如 Facebook 主頁、Twiiter 賬戶、Youtube 頻道等。個性化的圖片會給瀏覽者留下積極的印像，會讓首次訪問使用者更可能關注、訂閱你的頁面或頻道。
3. 啟用 Facebook Open Graph META 標籤以確保你的內容在 Facebook 上正確地被分享。使用 Facebook Debugger 檢查你的的主頁、部落格或者網頁在 Facebook 上被分享時是如何顯示的。
4. 啟用 Twiiter Cards 以便網站 URL 被分享時自動顯示豐富的圖片。可以參考 Twitter Cards 入門。
5. 當你的網站被分享到 Google+ 時，你可以啟用 Google+ Snippets 設定人們看到的內容。使用 Snippet 指南 生成相關程式碼。即使你的網站沒有很多 Google+ 的贊，如果你正確的新增了後設資料， Google+ 也會明白它們比較重要。
6. 在頁面中隱藏連結到社交媒體主頁的按鈕。把這些圖示縮小或者只在頁尾上顯示它們。依靠社交媒體銷售目的是把客戶帶回到你的網站，而不是相反作用。

好了，我還漏掉了什麼沒？作為自由職業者或者企業家的你還有其它讓網站變得酷炫的方法嗎？