【轉】【譯】讓你的網站更炫酷的一些小 tips

時間 2019-12-06

標籤讓你網站些小 tips 欄目網站開發简体版

原文原文鏈接

原文連接 : 101 Ways to Make Your Website More Awesomegit

原文做者 : Nicholas Tartgithub
譯文出自 : 掘金翻譯計劃web
譯者 : 達仔算法
譯文連接：https://github.com/xitu/gold-miner/blob/master/TODO/101-ways-to-make-your-website-more-awesome.md數據庫
校對者: jamweak、cyseria瀏覽器

上週，我和一位老客戶聊天，她說：「尼克，我以爲個人網站須要改進，但我不能肯定我具體須要作什麼。」緩存

而後我就去問了一圈，包括朋友、家人和其餘非互聯網行業的商務人士，他們都提到了相同的觀點：安全

「我須要一個檢查清單，由於我不知道怎樣建站，這也是我要僱人來作這件事情的緣由。可是我依然須要知道這個過程涉及到哪些方面。」服務器

所以，我列了一個咱們在 AwesomeWeb 上完成的優化清單（以及一些咱們還沒完成的）。網絡

我敢保證:

若是你能把列表的每一項問題都改好，你將會擁有業界裏最好的網站之一。

你是怎麼知道的？

在 AwesomeWeb 裏，我已經評估過 1,000 多個自由職業者。據我所瞭解的狀況，我從沒見過一個網站能夠把全部選框都打上勾的。

對於企業老闆，根據這個列表，你能夠了解到接下來能夠作哪些改進工做，而後把它發給你的設計或者開發去修改。你甚至還能夠本身去修復其中的一部分問題。

對於自由職業者，使用這個列表可讓你作出更加酷炫的內容，而後回去找你的老客戶們，對他們說：

「我從新回顧了以前的項目，咱們能夠修復這裏、這裏和這裏，給我 $500, $1000, $5000 而後你能夠期待獲得如下的改進結果……」

重點是…

…我但願能夠幫你構造出更加酷炫的網站。事不宜遲，如今進入正題，開始介紹這個列表：

酷炫的品牌

挑選一個 專業的 logo，如今很難找到一個帶有很棒的 logo 的網站或者博客，所以這是一個瞬間獲取信任感的好方法。
上傳一個 支持 retina 屏幕的 favicon (在瀏覽器標籤上顯示的正方形小圖標)。大部分網站的 favicon 都是 16x16 像素的，在 retina 屏幕會顯得模糊。使用 X-Icon Editor 生成 64x64 像素大小的 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 屬性的值。
使用  和  標籤代替  and ，以輸出加粗和斜體字符。雖然他們的做用相同，可是有着根本區別。 標籤對應着一種樣式，而  標籤則是一種語義化的表示，指明瞭應該如何理解這個標籤的含義。
去除多餘的 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 標籤相同。
在頁面內容中包含不少 H二、H3 和 H4 標籤 ，以建立小標題和顯出視覺層次感。
用一個 特定的關鍵詞 優化頁面，能夠經過把它包含在標題、H一、副標題和內容的前 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。

若是你但願更多人看見這個列表，不妨推薦這篇文章給你們。讓咱們一塊兒把網站變得更加酷炫！

加油！尼克

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。