-
原文作者 : Nicholas Tart
-
譯文出自 : 掘金翻譯計劃
-
譯者 : 達仔
-
譯文連結：https://github.com/xitu/gold-miner/blob/master/TODO/101-ways-to-make-your-website-more-awesome.md
上週，我和一位老客戶聊天，她說：“尼克，我覺得我的網站需要改進，但我不能確定我具體需要做什麼。”
然後我就去問了一圈，包括朋友、家人和其他非網際網路行業的商務人士，他們都提到了相同的觀點：
“我需要一個檢查清單，因為我不知道怎樣建站，這也是我要僱人來做這件事情的原因。但是我依然需要知道這個過程涉及到哪些方面。”
因此，我列了一個我們在 AwesomeWeb 上完成的優化清單（以及一些我們還沒完成的）。
我敢保證:
如果你能把列表的每一項問題都改好，你將會擁有業界裡最好的網站之一。
你是怎麼知道的？
在 AwesomeWeb 裡，我已經評估過 1,000 多個自由職業者。據我所瞭解的情況，我從沒見過一個網站可以把所有選框都打上勾的。
對於企業老闆，根據這個列表，你可以瞭解到接下來可以做哪些改進工作，然後把它發給你的設計或者開發去修改。你甚至還可以自己去修復其中的一部分問題。
對於自由職業者，使用這個列表可以讓你做出更加酷炫的內容，然後回去找你的老客戶們，對他們說：
“我重新回顧了之前的專案，我們可以修復這裡、這裡和這裡，給我 $500, $1000, $5000 然後你可以期待得到以下的改進結果……”
重點是…
…我希望可以幫你構造出更加酷炫的網站。事不宜遲，現在進入正題，開始介紹這個列表：
酷炫的品牌
-
挑選一個
專業的 logo，現在很難找到一個帶有很棒的 logo 的網站或者部落格，因此這是一個瞬間獲取信任感的好方法。 -
上傳一個
支援 retina 螢幕的 favicon(在瀏覽器標籤上顯示的正方形小圖示)。大部分網站的 favicon 都是 16×16 畫素的，在 retina 螢幕會顯得模糊。使用 X-Icon Editor 生成 64×64 畫素大小的 favicon。 -
使用
支援 retina 螢幕的圖片。這很簡單，只需要確保圖片寬高是容器的兩倍，然後顯示時縮放就可以了。 -
最多使用 2-3 種顏色。包括背景色、文字-動作顏色和強調色。 -
選擇調色盤時，從
互補色或者三色組（complementary or triad colors）開始選擇，然後再進行調整。好的顏色組合會給你帶來充滿故事感的設計。 -
不要使用純黑色(#000000)。純黑色是不存在的，所以在網上使用純黑色看起來不合適。實際上，黑色應該總是作為其它顏色的深色陰影。 -
不要使用淺灰色(比如 #cccccc)。如果你希望設計更顯個性化，可以試著新增一點黃色顯得溫暖，新增紅色給予能量，而藍色產生信任。
酷炫的排版
-
挑選一種
優質的字型。使用 Typekit 之類的服務吧。據說多達 95% 的網站都是有排版的，想要產生良好的第一印象，使用優質字型是最簡單、成本最低的方法。 -
最多使用 2-3 種字型。使用更多字型會顯得雜亂，並且減慢載入時間。挑選一種字型用在頭部，一種用在段落中，如果有需要的話，還可以挑選一種用在其它特殊情況裡。 -
設定 body 的字型大小為
最小 16px，更小的字型在大螢幕中不方便閱讀，如果是移動端頁面可以考慮的最小值為 12px。 -
設定
排版縮放比例，就像（樂理中有）增四度，純五度音程或者（在繪畫使用）黃金比例。根據比例來設定段落文字大小，以及 H4, H3, H2 和 H1 標籤。當然，文字的行高和間距也要基於這個比例。 -
設計其它的
排版元素，包括引用、符號列表、數字編號列表、表格標題、幫助文字、警告框、高亮文字、程式碼示例、縮寫甚至地址。 -
選擇一種
自定義圖示字型，比如 Font Awesome，來代替圖片和其它一些元素，比如社交媒體 logo、導航按鈕、互動圖形等。圖示字型的載入速度更快，可以任意縮放，並且可以隨意更改圖示顏色。
酷炫的佈局
-
使用
三分法來設計基本佈局。水平垂直把佈局劃成三等分，然後當線段橫穿時，設法對齊關鍵的焦點。 -
使用一個網格系統來維護
垂直方向的網格。把你的佈局分隔成 8 列、12 列或者 16 列的佈局，列與列之間帶有足夠空白。 -
使用
基線網格保持垂直方向的調和感。文字行之間的空間，和內容塊之間的空間都同樣重要。每行文字應該都擁有一定的底部外邊距，也就是位於基線的地方。 -
空白是奢侈的。空格的存在是為了創造呼吸空間和平衡，你應該把讀者的眼球吸引到重要的地方去。 -
均衡擺放視覺元素，比如按鈕、輸入框、表單和大標題等。你應該把眼睛眯起來，試著跟蹤那些你想讓使用者關注到的路徑點。
酷炫的使用者介面
-
使用大大的加粗的
行為按鈕。每個頁面應該只有一個目標，而且幾乎都是點選一個按鈕而已。所以確保這個按鈕不會被使用者忽略。 -
新增
滑鼠懸停 (hover) 和滑鼠點選 (active) 狀態的樣式給連結、按鈕、輸入框和文字區域。如果你選擇在滑鼠懸停時讓按鈕顏色變亮，那你也應該對於連結和輸入框邊框給出同樣的樣式。 -
保持
表單樣式的一致性。所有的文字區域和輸入框都應該有相同的樣式。包括相同的邊框顏色、背景顏色、懸停狀態、點選狀態、佔位符文字、點選狀態文字等。確保 tabindex 屬性的正確設定，以便使用者可以使用 tab 鍵在表單項之間用正確的順序切換。 -
改變
已經點選過的連結的顏色，讓使用者知道他們已經去過那個頁面了。 -
一旦你擁有了自己的 logo、顏色、排版、佈局和影像大小，你要建立一個
風格指南。好的使用者介面應該使用風格一致的元件，其樣式應該總是相同的。
酷炫的使用者體驗
-
在按鈕和其它表單域元素使用
微互動（microinteractions）。比如，點選上傳按鈕之後，提示文字可以變為 “正在上傳” 或者 “處理中”。 -
不要使用 scroll jacking（譯註：通過重新定義滑鼠滾動速度、幅度達到控制可視區域視覺效果的方式）！不要打亂瀏覽器的預設行為，雖然你可能會覺得讓滾動速度變成原來的兩倍很不錯，但事實並非如此。 -
放棄使用首頁輪播。輪播會減少轉化率，可以考慮使用更佳的方法來在有限空間顯示更多資訊。 -
不要使用歡迎介面。當使用者第一次開啟首頁時，使用者希望能直接看到首頁內容。 -
使用
標題、副標題、頭段落、列表、表格標題讓你的內容更容易被檢索。大部分人在瀏覽網頁前，都會先檢索一遍全文，再決定是否閱讀。 -
新增
描述性的佔位符文字到你的表單、輸入框和下拉選單。如果你想要讓瀏覽者用某種特定方式來填寫表單，你應該指引他怎麼做。對於下拉選單和選擇框來說，可以讓第一個選項變成描述，比如 “選擇年份” 就比 “2016” 更合適。 -
往表單新增
HTML5 驗證，讓使用者在提交表單時可以清楚地知道哪些部分出現填寫錯誤。 -
通過避免含糊連結名字、減少雜亂排版、使用標點符號、保持簡潔佈局、新增圖片提示（alt text）、使用大字號、保持文字和背景色的高對比度，可以讓你的網站
適用於視覺障礙人群。 -
通過 BrokenLinkCheck.com 檢查你的網站是否有
損壞的連結。修復這些壞鏈，避免讓使用者因為點選到它們而抓狂。
酷炫的開發
-
確保你的站點是經過
移動端優化的，也就是在任何裝置上都可以響應式地顯示。合理優化移動端的站點，載入速度更快，排行更高，並且可以提供更佳的使用者體驗。 -
生成並
顯示經過優化的影像。假設你上傳了一張大圖片，比如博文的特徵影像，如果你想在站點的其他地方顯示（比如側邊欄），應確保你在側邊欄顯示的是影像的縮圖而非原圖。 -
所有圖片和超連結都要新增 alt 和 title 屬性。當遇到某種異常情況，圖片沒有正常載入出來的時候，網站應該在圖片位置顯示替換文字（alt text）。並且，當滑鼠懸停在連結時，瀏覽器應該顯示該連結的 title 屬性的值。 -
使用
<strong>和<em>標籤代替<b>and<i>，以輸出加粗和斜體字元。雖然他們的作用相同，但是有著根本區別。<b>標籤對應著一種樣式，而<strong>標籤則是一種語義化的表示，指明瞭應該如何理解這個標籤的含義。 -
去除多餘的 HTML。當你複製貼上內容到 WYSIWYG 編輯器（類似於 WordPress 的編輯器）的時候，它會新增許多不必要的 span 標籤與內聯樣式。時間長了，你的網站程式碼就會變得不可讀了。 -
說到這裡，需要給你的 HTML
移除內聯樣式。99% 的樣式規則都應該寫進 CSS 檔案，以便你可以在同一時間更新一個元件在所有頁面的樣式。 -
使用
Sass 變數代替原生 CSS，以保持顏色和其他元件可以在整個網站之間共用。這樣，當你想要改變這個顏色時，只需改變一行程式碼而不是上百行。 -
連結使用永久連結（permalinks）代替完整 URL。當你打算切換域名時，你的連結最好使用 代替完整路徑 。對於一些圖片資源和 CSS 背景，如果你不這麼做，當域名變化的時候，你的所有資源都將會失效。 -
開發一個
自定義外掛或者工具，為你的網站提供獨特的功能。雖然自定義軟體難以維護，但是這樣做可以讓你的網站在眾多類似網站中脫穎而出。 -
測試
跨瀏覽器相容性，確保你的網站可以在 Chrome, Firefox, Safari, Internet Explorer 和其它瀏覽器正常顯示。雖然舊版 IE 在相容性方面臭名昭著，但是可以通過 BrowserStack 進行人工檢查。 -
使用 W3C 的
Markup Validation Service（標記語言驗證服務）來檢查 HTML 的明顯錯誤。要記住，大部分網站的 HTML 都不是十分完善的。雖然這項檢查並非最高優先順序，但是如果你的 HTML 沒有錯誤，你會感到更開心。 -
設定一個
模擬環境用來改變你的當前網站。理想情況下，你應該有一個生產環境，是使用者能看見的；以及一個模擬環境，供開發者作出更改。一旦更改已經準備好釋出，就可以把模擬環境的程式碼部署到生產環境。 -
在頁面顯示當前年份。當你看見一個站點的 copyright 年份不是最新的時候，你就會覺得這個網站應該很久沒維護了。可以使用 PHP 或者類似的指令碼語言，動態地顯示當前年份，而不僅僅是顯示靜態文字。（比如 © <established year> — <current year>）。
酷炫的搜尋引擎優化
-
為每個頁面選擇一個關鍵詞，這個關鍵詞關係到你的頁面排名。圍繞這個關鍵詞，優化這個頁面的方方面面。當然，並不是讓你在每句話都提到這個詞，可以動腦筋想想你想讓它排到第幾位去。 -
給每個頁面設定一個充滿關鍵詞的
title 標籤。標題會顯示在谷歌搜尋結果的藍色連結文字上，有 55 個字元的長度限制。 -
每個頁面
有且僅有一個 H1 標籤。在大多數情況下，這個標籤的文字應該和 title 標籤相同。 -
在頁面內容中包含很多
H2、H3 和 H4 標籤，以建立小標題和顯出視覺層次感。 -
用一個
特定的關鍵詞優化頁面，可以通過把它包含在標題、H1、副標題和內容的前 1/3 部分。 -
你的
meta 標籤的描述（description）會顯示在搜尋引擎的連結下方。所以確保你的每個頁面都包含 meta description，並確保在描述裡包含關鍵詞。 -
你的
永久連結（permalink），也就是 URL 裡緊隨域名的部分（比如 domain.com/permalink-here/），應該包含破折號分隔開的關鍵詞內容。 -
Google 把
域名的註冊時長考慮到演算法中，他們認為，註冊時間長的域名更有可能提供高質量的資源。提前註冊你的域名吧，如果你的域名註冊時間超過 10 年，相信你對你的事業是認真的。 -
平均起來，SERP (搜尋引擎結果頁面) 的第一個結果，不管是任何關鍵詞，開啟的頁面都不少於
2000 字/頁。當你寫文章或者建立頁面時，如果你希望頁面的排名更高，試著至少寫 2000 字吧。 -
總是
建立站點地圖並命名為 sitemap.xml 檔案，然後把它放進根目錄，並讓檔案可以通過 domain.com/sitemap.xml 訪問。這個檔案可以告訴谷歌，你的所有頁面的位置，並應該在新增新內容時更新地圖。可以通過 Webmaster Tools 提交給谷歌。 -
新增你的網站的
Google Webmaster Tools，然後你可以知道 Google 如何索引你的站點，並在遇到關鍵問題時保持更新。 -
為了提高圖片的排行，上傳之前應該總是
重新命名你的圖片和其它檔案。（比如：rank_for_this_keyword_phrase.png） -
在站點中包含
robots.txt檔案，告訴爬蟲哪些頁面應該/不應該被索引。 -
新增
canonical 重定向把不帶 www 的頁面訪問指向網站的 www 版本，或者反過來也可以。 -
研究並整合每個頁面的
LSI 關鍵詞（LSI: 潛在語義索引），以幫助提高頁面在主關鍵詞的排行。通過 Google 搜尋一些關鍵詞短語並尋找 “相關搜尋” 連結，可以幫你找出 LSI 關鍵詞。 -
經常確保
你的內容之間可以互相連線。你的站點的每個頁面，都應該可以通過從首頁開始的不多於三次點選訪問到。 -
新增
結構化的資料到相關頁面，以幫助 Google 合理索引你的內容。以下這些頁面型別需要結構化的資料，包括：人物、產品、事件、公司、電影、書本、報刊評論等。使用 Schema Creator 可以幫你生成結構化的資料。 -
使用 Google 的
PageSpeed Insights工具，以確保你修復了所有可能降低頁面速度的普遍問題。頁面載入速度越快，排名越高。
酷炫的網頁速度
-
保持
頁面流量低於 2MB。使用 tools.pingdom.com 檢查主頁面的載入流量，如果多於 2MB 說明內容太多了。 -
保持
頁面請求低於 50 個。頁面中的每個檔案和圖片都是一個 HTTP 請求，請求數越少，載入速度越快。平均每個網頁的請求數是 70 個。使用 GTmetrix 可以檢查你的網頁請求數。 -
設計頁面元素時，使用
CSS 代替背景圖片。不要使用圖片來顯示按鈕、表單或者其它通用的元素。CSS 的載入速度更快，並且在響應式佈局中更加靈活。 -
在圖片上傳之前
優化影像。比如 TinyPNG 這樣的工具，可以幫助你在不降低解析度或者影像質量的情況下，減少圖片檔案大小。 -
使用
內容分發網路（Content Delivery Network）來儲存你的圖片和其它大檔案，並放在世界上的不同區域中。CDN 通過策略定位好的伺服器，儲存分發你的檔案，可以最大化加速頁面速度，當然載入速度也根據訪客的所在地區而有所差別。 -
在上傳你的程式碼檔案到伺服器之前，通過編譯和壓縮工具，
最小化 JavaScript, HTML 和 CSS。對於 JavaScript，可以使用 Closure Compiler。對於 HTML，可以使用 HTML Minifier。對於 CSS，可以使用 YUI Compressor。 -
把
阻塞渲染的 JavaScript 移動到底部。唯一應該放在頭部的指令碼是那些會立刻影響頁面設計的內容（比如：自定義字型）。 -
避免目標網頁重定向。重定向觸發額外的 HTTP 請求，會延遲頁面渲染。 -
藉助
瀏覽器快取，可以通過為頁面和不經常更新的資源設定過期時間來實現。瀏覽器快取會通知瀏覽器，從本地磁碟載入之前下載過的頁面，以減少不必要的網路請求。 -
在伺服器配置中啟用
gzip 壓縮。壓縮可以減少多達 90% 的傳輸響應時間，大大減少了首次渲染頁面的時間。 -
在伺服器配置中啟用
Keep-Alive，以允許同一個 TCP 連結可以傳送和接收多個 HTTP 請求，因而可以減少後來請求的延遲。 -
升級為
專用伺服器或者更優質的主機服務，以降低伺服器響應時間。當你使用共享的伺服器環境時，你的站點通常放在一臺需要同時響應至少上百個網站的伺服器裡，如果其它網站的流量很大，你的網站速度自然就會降低。
酷炫的平面設計
-
作為可選的加分項，使用
自定義 ebook 封面。它不難建立，但是可以讓你的轉化率大大提高。 -
為你的主頁和銷售頁面設計一個
自定義的平面圖形或者插圖。一個專門為站點設計的好插圖，可以讓你的站點更加容易讓人記住。 -
建立一個或者一系列的自定義
部落格特徵影像設計。也就是你在 Facebook, Twitter, Pinterest 等社交網站傳播時使用的圖片。當使用者看到和部落格有所關聯的某型別的圖片時，他們會聯想到文章可能是你寫的。 -
給你自己和你的團隊的每個成員顯示一張自定義的
頭像插圖或者漫畫。相比於聘請專業的攝影師，自定義的漫畫成本較低，特別是當你的團隊增加新成員的時候。此外，對於新成員來說這也是一份不錯的禮物。 -
自定義圖表以視覺化的方式顯示資料和其他內容，相比於同類的部落格文章，更容易獲取更多流量。人們更喜歡在 Pinterest 這樣的網站上分享圖表，或者是帶著你的站點的反向連結並轉發到他們自己的網站上。 -
如果你創作了一個甚至一系列的視訊，你應該擁有一個
定製的視訊開場部分和/或結尾部分，讓大家感受到視訊是專業的。不要提及其它的視訊畫面或者動畫，可以幫助你的品牌更加突出。
酷炫的 Web 安全性
-
安裝
SSL 證照，以允許伺服器端和瀏覽器之間建立安全連線。如果網站用到銀行卡支付功能，大部分的檢測軟體都要求使用 SSL 證照。Google 稱，用上 SSL 證照可以幫助提高網站的搜尋排行。 -
你用到的軟體和外掛要
保持最新版本。Wordpress 和其它 CMS 軟體都會釋放更新，通常是為了修復漏洞。如果你沒有及時更新，你的網站被攻擊也就是遲早的事情了。 -
為管理員頁面設定
雙認證登入。大部分的黑客入侵都是從登入頁開始的。 -
檢查並
刪除惡意軟體。如果你的網站曾經被入侵，黑客很可能會留下一些不容易發現的後門。如果你沒有及時刪除，你的網站可能會被谷歌列入黑名單，大大降低你的網站排行，並在使用者開啟網站時，警告使用者離開。 -
不要把
管理員賬號稱為 “admin”。刪除預設的管理員賬號，並建立一個使用其他名字的新賬號。 -
定期
備份資料庫和網站檔案。大部分備份軟體和外掛都只備份你的資料庫，裡面包括了資料和內容。但如果你把整個網站都丟了，你還需要檔案內容的備份來還原網站。
酷炫的內容
-
建立一個自定義
錯誤 404頁面，當使用者嘗試訪問不存在的地址時，這個頁面就會顯示出來。可以使用 404 頁面把他們引導到首頁，並幫助他們尋找他們想要的頁面。 -
除了主頁之外，
關於頁面可能是使用者最常訪問的頁面了。要確保這個頁面能夠很好地代表你和你的公司。 -
聯絡方式頁幫助使用者找到你，而且還能夠建立你和訪客甚至 Google 之間的信賴。當決定站點排名時，機器會尋找你的聯絡方式，然後找到郵箱地址、電話號碼和地址。聯絡資訊告訴 Google，這個站點更加值得信賴一點。 -
在戰略上，站點裡擁有選填的表單是正確的，然而建立一個
準顧客收集頁面的想法也不錯，除了一個高轉化率的選填表格什麼也不用放。當你希望使用者提交資訊時，連結到該頁面就行了。 -
當使用者訂閱你的列表時，確保你可以給他們一個
確認頁面，讓他們可以確認郵箱地址。假如使用者不能確認郵箱是否正確，他們可能就會把事情給忘了，然後再也不會回來你的站點了。 -
在點選郵箱裡的確認連結後，給使用者傳送一個
感謝頁面讓他們知道下一步可以做什麼。這個頁面是每個訂閱者都能看見而且只能看見一次的，因此這是一個絕佳機會鼓勵使用者去掏腰包購買內容。 -
你的網站或者主題應該有一個
著陸頁模板，當你需要使用者進行特定操作時，可以用上。 -
如果你在網站上買東西，確保你有一個漂亮的
銷售頁面。從大字標題開始；為你的賣場留出足夠空間；有可能的話做一個介紹視訊；在頁面底部指引使用者如何購買。
酷炫的社交媒體
-
在你的文章和頁面上，限制
社交媒體按鈕的數量，因為每個按鈕都會執行相關的指令碼，額外增加頁面載入時間。通常包含 1-5 個按鈕比較合適，比如 Facebook、Twitter、LinkedIn、Pinterest、Google+ 等，這些網站是你的內容最容易被分享的地方。 -
在你的 Facebook 頁面、Twitter 賬號、YouTube 頻道上建立
社交媒體的圖片。對於第一次訪問的使用者，自定義的圖片可以給予他們良好的第一印象，並鼓勵他們點贊、關注、訂閱你的頁面、個人檔和頻道。 -
設定
Facebook Open Graph META 標籤以確保你的內容被分享到 Facebook 時可以正常顯示內容。可以使用 Facebook Debugger 檢查你的主頁、文章和其它頁面，並看到當別人把 URL 分享出去的時候是什麼樣子的。 -
設定
Twitter Cards，目的是當你的站點 URL 被分享到 Twitter 時，豐富的圖片和視訊資源可以顯示到卡片上。要開始使用Twitter Cards可以 點選這裡 -
設定
Google+ Snippets，以自定義使用者分享站點到 Google+ 時看見的內容。你可以使用 Snippet 指南 生成相關程式碼。即使你的網站在 Google+ 沒那麼受歡迎，Google 也可以知道你正確地新增了 meta 資訊，從而帶來一定的權重加成。 -
弱化那些連結到個人檔的社交媒體圖示，可以讓圖示變小或者放在頁面底部。其實社交媒體營銷的目的就是把使用者導流到你的網站來，而不是反過來作用。
好了，我還有什麼遺漏的嗎？作為自由職業者或者老闆，你有沒有嘗試過使用上述方法讓網站變得酷炫呢？
期待你的回覆，可以在原文留言或者在推特上聯絡 @wntart。
如果你希望更多人看見這個列表，不妨推薦這篇文章給大家。讓我們一起把網站變得更加酷炫！
加油！尼克