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中。社交媒體營銷的目的就是將用戶引向你的網站，而不是別的什麼。