101種讓你的網站更棒的方法

這篇文章最初出版於AwesomeBlog。

上週我和一個老客戶聊天，她和我說，“Nick，我覺得我的網站需要改進，但是我卻不確定到底需要做什麼”。

於是我就去問了周圍很多人，朋友、家人和一些非網際網路方向的商務人士。他們都說了同樣的話：

“我需要一個清單，因為我不知道如何去搭建一個網站，我不得不僱傭一些人，但到最後我依然不知道都做了什麼。”

所以我列了一個我們在AwesomeWeb中所做的事情的清單（當然還有一些是還沒做的）。

我可以打包票……

……如果你符合清單中的每一項，你將擁有一個非常棒的站點

你怎麼確定？

在AwesomeWeb，我觀察了一千多個世界各地最棒的自由職業者，我並沒有看到過某個網站滿足清單上的每一項。

作為一個企業的所有者，通過這個清單你就掌控之後的事情了。你可以把任務交給設計師或者開發人員，甚至可以自己親自完成。

作為一個自由職業者，你可以參考這個清單來做的更棒，然後回去和之前的顧客說：“我回顧了下我們之前做的，然後發現我們可以調整這、這和這，你只需要支付500、1000、5000就可以看到很棒的效果了……”

總的來說呢，就是……

……我想幫你做出更棒的網站，從這個清單開始。

---

良好的品牌

1. 使用專業的logo。大家的網站和部落格中很難發現一個設計精美的logo，但其實這是建立好印象的第一步。

2. 上傳高解析度適配（retina-ready）的favicon（在你瀏覽器tab頁上的方塊圖示）。大多數的網站都是使用16x16畫素的favicon，然而在高解析度的螢幕上，他們就模糊了。你可以在X-Icon Editor上生成一個64x64畫素的favicon。

3. 多使用高解析度影象。至少要保證圖片是它容器的二倍大，然後再縮小顯示它。

4. 最多使用2-3種顏色。其中一個背景色，一個活動色，一個強調色。

5. 選擇顏色的時候，首選互補色或三原色（complementary or triad colors），然後進行調整，好的顏色組合會讓你擁有帶著故事感的設計。

6. 拒絕純黑色（#000）。純淨的黑色是不存在的，所以黑色用著看起來總是不太對的樣子。實際黑色大部分都被用在作為其他顏色的陰影區域。

7. 拒絕中性灰（e.g. #ccc）[然而我經常用，囧- -]。如果你希望你的設計有某些特質，可以用淺黃色增加溫暖，紅色提供能量，還有藍色來製造信任。

絕佳的排版

1. 挑選一款優質字型。一個網頁中95%都是字。使用一款優質字型是改善印象最便捷的方式。

2. 使用最多2-3種字型。太多種字型會顯得雜亂而且降低了載入速度。選擇一種標題字型和段落字型，再有就是特殊例子的字型。

3. 設定網頁body字型大小為16px。在大顯示器上難以閱讀比這小的字號。移動裝置的字號則縮為12px。

4. 選擇一種排版縮放比例，根據縮放比例來設定段落，H4，H3，H2，H1的字型大小。根據這個縮放比例來設定你的行高和文字距離。

5. 設計其他排版元素，例如引用、無序列表、有序列表、標題、幫助提示、通知、高亮文字、程式碼例子、縮略語以及地址。

6. 安裝一款定製圖示字型，例如 Font Awesome。用它代替圖片來做一些社交媒體、導航按鈕和互動圖形的圖示。圖示字型載入更快，隨意縮放，並且可以自由的更改顏色。

出色的佈局

1. 基本佈局使用三分法，將你頁面橫縱各分為三部分，然後根據線段交叉來排列關鍵點。

2. 維護一個縱向佈局的柵格系統。將你的佈局分為8列，12列或者16列。

3. 通過基線網格來保持一種垂直的結構。文字行中間的空間其實和內容塊中間的空間同等重要。每行文字下都應該有一個基於基線的margin-bottom。

4. 留白太奢侈了，它主要是用來創造喘息的空間和維持視覺平衡。應當吸引讀者的視線到最重要的地方。

5. 平衡虛擬元素例如按鈕、輸入框、表單、標題等等。你應當大致可以找到一條你希望使用者跟隨的軌跡。

友好的使用者介面

1. 使用一個放大加粗的活動按鈕。每一個頁面都有一個goal，通常都是通過點選按鈕實現的。所以要確保這個按鈕不會被忽略

2. 給連結、按鈕、輸入框和文字域新增hover和active狀態。如果你選擇在hover狀態是使按鈕變亮，那麼其他元素hover狀態也應當保持一致。

3. 保持表格樣式的一致性。所有的文字域和輸入框都應該樣式統一，同樣的邊框顏色，背景色，懸停狀態，點選狀態，提示語，點選文字等等。設定好tabindex，這樣就可以通過按下tab來依次訪問這些元素。

4. 改變已訪問連結的顏色，從而使你的使用者知道他們去過這些頁面了。

5. 一旦你有了自己的logo，色系，排版，佈局以及影象尺寸，就應該建立一套風格指南。風格一致的元件才能構建出友好的使用者介面。

完美的使用者體驗

1. 新增微互動給按鈕或其他區域。比如一個“上傳”按鈕被點選之後可以變成“正在上傳”或者“處理中”。

2. No scroll jacking!不要改變瀏覽器的預設行為，你也許覺得滑鼠滾輪的速度變為之前的二倍很好，然而你認為的並不是你認為的。

3. 去除主頁的輪播。這樣減少了轉換，而且還有其他更好的方式在小的空間裡展示更多的資訊。

4. 不要使用歡迎頁。當訪客第一次訪問你的網站更希望看到你的主頁。

5. 使用標題，副標題，首段（lead paragraphs），列表和題注來使你的內容更容易瀏覽。大多數人在認真閱讀一個網頁前都是先大致瀏覽它一遍。

6. 新增描述性預留文字給所有的表單、輸入框和下拉選單。如果你希望別人可以用某些方式來填充一個區域，請告訴他們。例如下拉選單和選擇區域，把描述放在第一個選項。“請選擇年份”比“2016”好多了。

7. 在表單上新增HTML5驗證[HTML5 validation]，以便於使用者可以更清晰的意識到自己在嘗試提交存在錯誤的表單。

8. 通過避免模糊的連結名，減少混亂的東西，使用標點符號，保持簡潔的佈局，給圖片加入alt說明，使用大號文字，並且保證文字顏色和背景色的高對比度，來讓你的站點對於視覺缺陷者來說是可訪問的。

9. 用BrokenLinkCheck.com來檢查你網站的失效的連結。為了防止人們點選失效連結時陷入癲狂還是快修復了吧233。

極致的開發

1. 確保你的網站是移動優化的可以在任何裝置上響應式的顯示。良好的移動優化網站載入更快，排名更高，並且帶給使用者更好的體驗。

2. 生成並且展示最優尺寸的圖片。如果你上傳了一個很大的圖片用來做部落格的特徵圖，同時你想要把這張圖展示在側邊欄等位置，那麼你就應該確保展示的是縮小後的圖片而不是原圖。

3. 給每個圖片和連結加上標籤和標題。如果出於某些原因一個圖片沒有載入出來，你的網站就可以在這個圖片原本的位置來顯示它的標籤。同樣，當你滑鼠懸停在一個連結上時，瀏覽器則會展示這個連結的標題。

4. 使用<strong>和<em>代替<b>和<i>來定義加粗和斜體文字。他們的效果是一樣的，但是卻有本質上的區別。<b>是一種樣式，而<strong>則是指出了這個內容的意義。

5. 處理掉冗餘的HTML。當你複製貼上內容到一個視覺化編輯器（像WordPress的虛擬檢視）中是，它加入了很多無用的span和行內樣式。這樣會讓你的網站可讀性變的很差。

6. 說到這，就要說一下去除內聯樣式，99%的情況，都應該是使用一個可以更新所有元件例項的CSS檔案，而不是一頁頁一行行的改。

7. 使用Sass變數代替CSS來保持網站中顏色和元件的一致性。當想要改變一種顏色和這個顏色的陰影的時候，更新一行就完美實現了。

8. 與永久連結連結而不是URL以防你更改域名。例如，當要加入某個連結時，你的HTML應當是<a href = "/slug-goes-here">而不是<a href = "http://domain.com/slug-goes/here">。圖片資源和CSS也是同理。如果你不這樣做，當你把網站放到新的域名下的時候，你連結的所有資原始檔和頁面不存在了。

9. 開發自定義外掛或者是利用提供特有功能的工具在網站上使用。自定義軟體很難維護但是與同類網站相比卻能提供很強的競爭力。

10. 測試跨瀏覽器相容性來確保你的網站可以在Chrome，火狐，Safari，IE等瀏覽器上都可以正常顯示。大家都知道低版本的IE瀏覽器在展示網站時差的一[嗶---]，所以可以使用BrowserStack來手動檢測。

11. 使用W3C的標記驗證服務來發現你HTML中顯眼的錯誤。要知道，大多數網站都都沒完美使用正確的HTML。這一條的優先順序不是最高的，但是如果在頁面中沒有任何錯誤會讓你很舒適。

12. 建立一個模擬環境來展示最近的修改。理想情況下是有一個成品網站，來給所有人看，並且有一個開發網站，來給開發人員做修改。一旦修改好了可以上線了，在把開發網站推送到成品網站上。

13. 在頁尾的Copyright中展示當前年份。當你看到一個網站使用過去的Copyright，你就會假想是不是這個頁面已經沒人維護了。可以使用PHP或者類似的指令碼來在靜態文字中展示當前年份（e.g. ©<established year> — <current year>）

非凡的搜尋引擎優化

1. 選出你希望每個頁面依此排序的關鍵詞。根據這個關鍵詞對頁面每個部分進行優化，但並不是把這個關鍵詞放到每個句子中，而是靈活表現出你希望它怎麼排序。

2. 給每個頁面設定富關鍵字的標題元素。在Google的搜尋結果中，標題會以55個字元以內的藍色連結的形式展示。

3. 限制每個頁面中有且僅有一個H1。大多數情況下，H1的內容應該和標題元素的內容是相同的。

4. 使用大量的H2，H3和H4建立副標題來使你頁面的內容富有層次感。

5. 通過一個被標題，H1，副標題和前1/3內容包含的特定關鍵字來優化頁面。

6. 你的meta描述將會在展示在搜尋結果中連結下的描述裡。確保你每個頁面都加入了meta描述並且在描述中包含了關鍵詞

7. URL中，在域名後的固定連結(i.e. domain.com/permalink-here/)，應該包含由破折號分割的關鍵詞。

8. Google的演算法中考慮了域名的年齡，因為一個註冊了很多年的域名更像一個高品質的來源。提前幾年來註冊你的域名。一旦你的域名註冊了十年了，可以證明你有認真對待你的事業。

9. 平均來說，任意關鍵詞SERP(search engine results page搜尋引擎結果頁)的第一個結果都是一個超過2000字/頁的頁面。如果想要搭建一個排行好的部落格或者頁面，試著去保證至少2000個字。

10. 慣於使用一個sitemap.xml檔案建立網站地圖，並將這個檔案放在根目錄下使其可以在 domain.com/sitemap.xml上展示。它將會使Google知道你所有頁面的位置並且應當在你加入新內容時自動更新。通過 Webmaster Tools將檔案提交到Google。

11. 為你的站點新增Google Webmaster Tools，以便於你可以看見站點的Google排名並且如果出現危險情況時維持更新。

12. 為了使圖片排名提高，記得在網站上傳前重新命名圖片和其他檔案(e.g. 根據此關鍵詞提升排名.png)。

13. 在網站中包含一個robots.txt檔案來告訴web爬蟲哪些頁面應該索引哪些不應該索引。

14. 新增一個典型重定向來使網站中不含www的訪問跳轉到www版本，反之亦然。

15. 重新搜尋並且整合每個頁面的潛在語義索引(latent semantic indexing)詞來幫助提升主關鍵詞的排名。通過搜尋你的關鍵詞然後選擇相關搜尋來尋找你需要的潛在語義索引詞。

16. 確保內容中互相跳轉的連結是可用的。應該保證每個頁面最多從首頁點選三次就可以訪問。

17. 在相關的頁面新增結構化資料以便於Google可以爭取索引你的內容。需要定製結構化資料的頁面型別有人物，產品，時間，組織，電影，書，回顧等。可以使用Schema Creator來生成結構化資料。

18. 通過Google的PageSpeed Insights來確保你解決了所以常見的影響網頁速度的問題。網頁載入速越快就會帶來排名的相應提升。

出色的頁面速度

1. 保持網頁小於2MB。使用tools.pingdom.com來檢查你的主登入頁。無論怎樣都不能超過2MB。

2. 保持頁面請求少於50。每個檔案或者圖片都會帶來一個HTTP請求，請求數量越少，頁面載入速度越快。每個頁面平均有70個請求，使用GTmetrix來檢視具體請求。

3. 用CSS代替背景圖片來設計頁面。絕對不要用一張圖片來做按鈕，表格或者其他網頁中基本元件。CSS載入的更快並且在響應式佈局中更加靈活。

4. 在網站載入圖片之前優化他們。想TinyPNG這種工具可以減小圖片檔案的大小80%-95%並且保證不失真。

5. 建立一個內容分發網路在世界不同的位置分發圖片和一些大檔案。CDNs可以基於訪問者的物理位置來智慧的選擇當地的伺服器以達到最大的載入速度。

6. 在上傳之前，使用編譯和壓縮工具來縮小JavaScript，HTML和CSS檔案。JavaScript可以使用Closure Compiler。HTML可以使用HTML Minifier。CSS可以使用YUI Compressor。

7. 把阻塞渲染的JavaScript移動到footer中。只有一開始就影響頁面設計的指令碼才應該放到header中（e.g. 定製字型）。

8. 避免登入頁重定向。重定向會觸發一個額外的HTTP請求以致於延遲頁面渲染。

9. 通過給不經常更新的頁面設定有效期限來減少瀏覽器快取。瀏覽器快取會告知瀏覽器去載入本地磁碟之前下載好的頁面，取代通過網路載入。

10. 在伺服器配置中允許gzip壓縮。壓縮可以在第一次渲染頁面時減少90%傳輸應答時間。

11. 在伺服器設定中允許長連線，這樣可以讓同一個TCP連線收發多組HTTP請求，因此減少後面請求的延遲。

12. 升級成為一個專用伺服器或者新增額外伺服器來提升伺服器響應時間。當你使用一個共享主機環境時，你的網站只是同一個伺服器中微不足道的一部分。如果其他的站點的大量開銷造成擁堵，將會降低你頁面的速度。

精緻的影象設計

1. 設計一個自定義的電子書封面。這是一件不復雜卻可以帶來很大轉換率的事情。

2. 給主頁和售賣頁設計一個自定義圖解。一個好的圖解可以用一個簡單的方式讓別人認知你的網站，並且留下深刻印象。

3. 建立一個或者一系列自定義的部落格特徵影象。也就是用來在Facebook，Twitter，Pinterest等平臺展示。當使用者看到與博文相關的某型別影象，他們就知道這個是你寫的文章了。

4. 展示你和你團隊成員個性化的插圖和漫畫頭像。相比較每次新成員加入就僱傭專業的攝影師，個性化的漫畫頭像則是便宜些的選擇。況且，這個一個給新成員的很棒的禮物。

5. 使用定製圖表相對於使用部落格可以更加直觀的來展示資料和一些其他內容來獲取更多的流量。人們都喜歡在Pinterest這類網站上分享圖表或者在他們自己的站點上轉發並且帶上一個引向你網站的連結。

6. 如果你做了一個或一系列視訊，你就應當有自定義的片頭片尾讓其擁有更專業的感覺。並且不提及其他視訊的影象和動畫將會使你的品牌更加突出。

周密的Web安全

1. 安裝一個SSL證照來保證web伺服器發起安全連線給瀏覽器。當你接受信用卡的時候，大多數的校驗軟體都需要一個SSL證照。Google曾經提及，一個SSL證照可以提升你的搜尋排名。

2. 保證你的軟體和外掛的更新。當WordPress和其他CMS軟體釋出更新的時候，通常都是修補一些漏洞。如果你沒有更新，那麼你的網站被攻擊就只是時間問題了。

3. 在管理頁面設定雙重認證登入入口。大多數的攻擊都開始於登入頁。

4. 檢查並移除惡意軟體。如果你的網站之前被攻擊過，那麼他們很可能加入了不容易被發現的感染檔案進去。如果你不及時移除它，你的網站就可能被Google拉進黑名單，從而降低排名，並且當使用者訪問的時候就會收到警告。

5. 絕對不要把你的管理員名稱設定成“admin”。刪除掉預設管理員賬戶，並且建立一個不同使用者名稱的新賬戶。

6. 定期備份資料庫和網站檔案。大部分備份軟體和外掛通常只會備份你資料庫中的資料和內容。然而一旦你丟失了你的站點，你就可能需要一個網站檔案的備份來恢復它。

精彩的內容

1. 定義個性化的404錯誤頁，它將會在每當使用者想要訪問不存在的頁面時被展示出來。使用404頁面來引導他們回到主頁或者幫助他們找到他們搜尋的地方。

2. 除了主頁之外，about頁面大概是網站中被訪問最多的頁面了。所以確保它展示了你和你公司良好的形象。

3. 聯絡頁面可以幫助人們聯絡到你，並且還可以起到在你，訪客以及Google之間建立信任的作用。當確定要提升你網站排名的時候，機器人就會去你的聯絡頁面來搜尋郵箱，電話和地址。聯絡方式可以讓Google覺得這個站點更可信。

4. It’s good to have opt-in forms strategically sprinkled throughout your site, but it’s also smart to have a squeeze page with nothing but a high-converting opt-in. When you want someone to subscribe, link to that page.[求指點]

5. 當有人訂閱你的列表的時候，你應當給他們傳送一個確認頁面，讓他們確認郵箱資訊。不然如果他們沒有給出正確的郵箱，那麼他有可能會忘記你的站點並且再也不記得這件事。

6. 在使用者點選了確認連結後，請給他們展示一個感謝頁面，並且他們可以知道下一步做什麼。每個訂閱者都看到這個頁面並且只看到一次，所以這是個很好的機會與他們建立交易或者鼓勵他們購買。

7. 當使用者採取某些指定的行動的時候，網站就應當展示出一個登入頁模板。

8. 如果你想賣點東西，首先確認你有一個好看的銷售頁。以一個大標題開始，並且為銷售模組留夠空間，也可以新增一個銷售視訊。然後指引使用者在頁面底部進行購買。

豐富的社交媒體

1. 在部落格和頁面中限制社交媒體按鈕的數量，因為每個按鈕都要執行一個指令碼，因此頁面增加了額外的載入時間。只保留1-5個按鈕，例如：Facebook，Twitter，LinkedIn，Pinterest，Google+等這些經常用來分享內容的平臺。

2. 給你的Facebook頁面，Twitter賬號和YouTube頻道建立社交媒體影象。自定義圖片可以立竿見影的讓第一次進入的訪客喜歡，follow，訂閱你的頁面。

3. 設定Facebook開放圖形META標籤來確保你的內容可以在Facebook上正確的分享。在別人分享你的主頁、博文等的URL的時候，使用Facebook Debugger來檢查頁面是如何展示的。

4. 設定Twitter Cards，使網站的URL被分享的時候，可以讓豐富的圖片和視訊繫結到你的微博上。

5. 設定Google+ Snippets來定製你網站分享到Google+上的樣式。使用Snippet guide可以生成程式碼。即使你的網站沒有得到很多Google+的喜愛，Google也會因為你正確新增了meta資料從而有一些提升。

6. 把網站中連結到個人簡介的社交媒體圖示藏起來，可以把它們設定的小一點或者將它們放在footer中。社交媒體營銷的目的就是將使用者引向你的網站，而不是別的什麼。