101 種讓你的網(wǎng)頁(yè)看起來(lái)更酷的方法

上周我和一個(gè)老客戶聊天,，她說(shuō)：“Nick， 我想改進(jìn)一下我的網(wǎng)站但是我卻不知道從何下手,?！?/p>

所以，我向周?chē)藛?wèn)了一圈,，包括我的朋友,、家人以及其它一些不是互聯(lián)網(wǎng)行業(yè)的人。他們幾乎都說(shuō)了相同的內(nèi)容：

“我需要一個(gè)清單,。我不知道怎么搭建一個(gè)網(wǎng)站，所以我需要雇傭一個(gè)人來(lái)幫我完成,。但是,，問(wèn)題是我仍然不知道我需要做些什么內(nèi)容”。

因此,，我列了一個(gè)清單,，其中包含了我們?cè)诖罱?AwesomeWeb 網(wǎng)站所做的所有事，甚至包括我們還沒(méi)有做的一部分,。

我可以保證如果你完成了這份清單上的所有工作,，你的網(wǎng)站將會(huì)成為你們行業(yè)最好的網(wǎng)站之一。

我怎么知道呢,？

在 AwesomeWeb 網(wǎng)站上,，我查看了 1000 多個(gè)世界上最優(yōu)秀的自由職業(yè)工作者的網(wǎng)頁(yè)。據(jù)我所知,，沒(méi)有任何一個(gè)網(wǎng)頁(yè)可以完全達(dá)到列表所列出的所有要求,。

作為企業(yè)家，你可以使用這份列表來(lái)判斷你的網(wǎng)站還需做哪些工作,，并將它們發(fā)給你的設(shè)計(jì)人員與開(kāi)發(fā)人員,。你甚至可以自己去修復(fù)其中一小部分問(wèn)題。

如果你是自由職業(yè)工作者,，你可以用這份清單來(lái)幫助你制作出更加漂亮的東西,。然后回頭告訴你的老顧客,，說(shuō)：“我重新檢查了一下我們?cè)?jīng)做的東西發(fā)現(xiàn)我們可以改進(jìn)一下這兒、這兒以及那兒,，它們的報(bào)價(jià)分別是 500 美元,、1000 美元、5000 美元,，最終可以達(dá)到這樣結(jié)果......”,。

重頭戲來(lái)了，下面一起來(lái)看看這份清單吧,。

酷炫的商標(biāo)

1. 設(shè)計(jì)一個(gè)專(zhuān)業(yè)的 Logo,。很少發(fā)現(xiàn)有哪些網(wǎng)站或者博客有非常專(zhuān)業(yè)的 Logo。因此一個(gè)專(zhuān)業(yè)的 Logo 可以立即增加網(wǎng)站的可信度,。
2. 上傳高分辨率適配網(wǎng)頁(yè)圖標(biāo)（即瀏覽器標(biāo)簽上的方形圖標(biāo)）,。大多數(shù)站點(diǎn)都是 16 x 16 像素的網(wǎng)頁(yè)圖標(biāo)。但是在高分辨率屏幕上,，它們會(huì)變得非常模糊,。使用 X-Icon 編輯器可以生成 64 x 64 像素的圖標(biāo)。
3. 使用高分辨率圖片,。只需要確保圖像是容器的兩倍大小,，然后再將按比例縮小即可。
4. 最多使用 2-3 種顏色,。你可以有一種背景顏色,、一種號(hào)召提醒顏色以及一種強(qiáng)調(diào)顏色。
5. 從調(diào)色板選擇顏色時(shí),，選擇互補(bǔ)色或者三色組顏色,。好的顏色組合可以讓你的設(shè)計(jì)看上去更有內(nèi)涵。
6. 永遠(yuǎn)不要使用純黑色 (#000000),。并不存在黑色這樣一種顏色,，所以使用黑色會(huì)元素出上去在平面外一樣。事實(shí)上,，黑色往往是其它顏色的暗影,。
7. 如果你想你的設(shè)計(jì)看上去有個(gè)性一些，請(qǐng)記住永遠(yuǎn)不要使用中性灰色 (#cccccc),。稍微增加一些黃色會(huì)讓顏色看上去更溫暖,，加一些紅色會(huì)讓顏色看上去更有活力，或者加一些藍(lán)色讓它看上去更可信,。

酷炫的排版

1. 使用 premium 字體,。可以使用諸如 Typekit 這類(lèi)的服務(wù)。據(jù)說(shuō) 95% 的網(wǎng)頁(yè)都使用的是排印,。使用 premium 字體是給瀏覽者留下好印象最簡(jiǎn)單方式,。
2. 最多使用 2-3 種字體。字體越多會(huì)讓界面看上去越亂同時(shí)還會(huì)使得頁(yè)面加載時(shí)間非常長(zhǎng),。選擇一種標(biāo)題字體與一種段落字體就足夠子,，最多再選一種用于特殊場(chǎng)合的字體。
3. 字體最小設(shè)置為 16 px,。如果字體小于 16 px,，則大屏幕上閱讀起來(lái)比較吃力。顯示在移動(dòng)設(shè)備上時(shí),，可以將字體設(shè)置為 12 px,。
4. 選擇合適的排版，比如使用小四號(hào)字體,、五號(hào)字體或者黃金比例,。可以按照 H4,、H3,、H2、H1 的比例設(shè)置文本字體大小,。
5. 設(shè)計(jì)豐富的排版元素,，比如引用、子彈型列表,、數(shù)字列表,、標(biāo)題、警告,、高亮文本、代碼示例,、縮寫(xiě)甚至是地址,。
6. 使用自定義圖標(biāo)字體比如 Font Awesome 替換使用圖片作為社交媒體 Logo、導(dǎo)航按鈕或者交互式圖像,。圖標(biāo)字體可以更快加載而且更容易放大,。除此之外，你還可以隨意的改變其顏色,。

優(yōu)美的布局

1. 使用三分法作為基本構(gòu)圖,。將你的布局的水平和豎直方向分別分成三份，然后將關(guān)鍵點(diǎn)放在線的交叉處,。
2. 維護(hù)一個(gè)垂直網(wǎng)格,。將你的界面分成 8、12 或者 16 列，列與列之間的間距要稍微大一些,。
3. 垂直網(wǎng)格應(yīng)該與基線網(wǎng)格保持風(fēng)格一致,。文本行之間的空間和內(nèi)容塊之間的空間一樣重要。,。
4. 空白是網(wǎng)頁(yè)上的奢侈品,。我們需要利用空白預(yù)留 “呼吸空間” 以及保持平衡，把讀者的眼球吸引到最重要的內(nèi)容處,。
5. 做好網(wǎng)頁(yè)上視覺(jué)元素之間的平衡,，例如按鈕、輸入框,、表單,、大標(biāo)題等。網(wǎng)頁(yè)布局應(yīng)該達(dá)到這樣的效果：當(dāng)瞇起你的眼睛時(shí),，你能清晰地看到一條路線,，而這正好就是你希望讀者的閱讀順序。

優(yōu)雅的用戶接口

1. 使用大的,、加粗的動(dòng)作按鈕,。幾乎每個(gè)網(wǎng)頁(yè)都有一個(gè)目標(biāo)，而往往這個(gè)目標(biāo)就是點(diǎn)擊一個(gè)按鈕,。所以,，請(qǐng)確保這個(gè)按鈕不會(huì)被用戶忽略。
2. 為你的鏈接,、按鈕,、輸入以及文本框添加懸停、活躍狀態(tài)變化,。如果你選擇在懸停時(shí)加亮你的按鈕,，那么你也應(yīng)該類(lèi)似地處理你的鏈接和輸入框的邊框。
3. 保持風(fēng)格一致,。所有文本框與輸入框的風(fēng)格應(yīng)該是相同的,。相同的邊框顏色、背景顏色,、占位符,、活動(dòng)文字等。確保你的 tab 鍵切換順序正確設(shè)置,，這樣你可以使用 tab 鍵順序遍歷網(wǎng)頁(yè)上的元素,。
4. 改變已訪問(wèn)鏈接的顏色，以便讓你的用戶知道這些頁(yè)面之前已經(jīng)被訪問(wèn)過(guò),。
5. 一旦你有了自己的 Logo,、顏色,、排版、布局以及圖片大小后你應(yīng)該建立自己的風(fēng)格,。新加的用戶接口應(yīng)該和你已有的風(fēng)格保持一致,，這才算有一個(gè)好的用戶接口設(shè)計(jì)。

完美的用戶體驗(yàn)

1. 在你的按扭或者其它元素上添加細(xì)微的改進(jìn),。例如,，當(dāng) “上傳” 按鈕被點(diǎn)擊后，你應(yīng)該將其改變?yōu)?“上傳中” 或者 “處理中”,。
2. 不要修改屏幕滾動(dòng),。千萬(wàn)不要修改瀏覽器的默認(rèn)動(dòng)作。也許你會(huì)認(rèn)為滾動(dòng)條滾動(dòng)比正常情況快兩倍效果會(huì)好一些,，但事實(shí)上并不是這樣,。
3. 主頁(yè)不要使用浮動(dòng)塊。在小空間上顯示更多的信息有其它更好的方法,。
4. 不要使用歡迎界面,。用戶第一次訪問(wèn)你的界面時(shí)，他們會(huì)希望直接看到你的主頁(yè),。
5. 使用首行標(biāo)題,、子標(biāo)題、導(dǎo)語(yǔ),、列表或者說(shuō)明讓內(nèi)容更容易閱讀,。大多數(shù)人都會(huì)先大概掃描一遍再?zèng)Q定是否繼續(xù)閱讀的。
6. 在你所有的表單,、輸入框以及下拉單中添加描述型占位文本,。如果你想告訴用戶在該位置輸入什么內(nèi)容，那么直接告訴他,。例如對(duì)于一個(gè)下拉列表,，將第一項(xiàng)設(shè)置為 “選擇年份” 比設(shè)置為 “2016” 更好一些。
7. 在你的表單上添加 HTML5 驗(yàn)證,。當(dāng)用戶提交的表單有錯(cuò)誤時(shí),，將該錯(cuò)誤明確地顯示出來(lái)。
8. 讓你的網(wǎng)站對(duì)有視覺(jué)障礙的人群友好一些,。盡量避免使用模糊的鏈接名字、避免排版凌亂,、正確使用標(biāo)點(diǎn)符號(hào),、使用簡(jiǎn)單布局、為圖片添加替換文字,、使用較大的文本字體,、背景色與文字顏色對(duì)比度高一些等。
9. 使用 BrokenLinkCheck.com 檢測(cè)網(wǎng)站中的壞鏈接。修復(fù)這些失效的鏈接以免用戶點(diǎn)擊到它們的時(shí)候感覺(jué)到不爽,。

成熟的開(kāi)發(fā)

1. 確保你的網(wǎng)站是針對(duì)移動(dòng)端優(yōu)化過(guò)的,，以便它可以自適應(yīng)地展示在任何設(shè)備上。針對(duì)移動(dòng)設(shè)備優(yōu)化過(guò)的網(wǎng)站可以加載得更快一些,，可以讓用戶獲得更加好的使用體驗(yàn),。
2. 生成并顯示合適大小的圖片。如果你上傳了一張很大的圖片,，而你希望將其展示在網(wǎng)站的其它地方,，比如側(cè)邊條，這種情況下請(qǐng)確保你顯示的是該圖的縮略圖而不是原始圖片,。
3. 為所有的圖片或鏈接增加 alt 標(biāo)簽,。如果由于某些原因你的圖片沒(méi)有正常加載，那么圖片的位置就可顯示這些標(biāo)簽內(nèi)容,。類(lèi)似的,，當(dāng)你的鼠標(biāo)懸停在鏈接上時(shí)，你的瀏覽器也會(huì)顯示鏈接相關(guān)的標(biāo)簽,。
4. 使用 < strong > 與 < em > 加粗文本與增加下劃線,，而不要使用 < b > 和 < i >。雖然它們有同樣的效果,，但是它們有本質(zhì)的區(qū)別,。< b > 是一種風(fēng)格，但是 < strong > 卻說(shuō)明了應(yīng)該怎么理解這些內(nèi)容,。
5. 處理草率復(fù)制的 HTML 文本,。當(dāng)你把內(nèi)容拷貝到 WYSIWYG 編輯器 (比如 WordPress 里的可視化編輯) 時(shí)，它會(huì)自動(dòng)給你添加很多不必要的空格或者內(nèi)置風(fēng)格代碼,。如果不處理一下,，你網(wǎng)頁(yè)的可讀性就會(huì)非常的差。
6. 從 HTML 代碼中刪除 css 代碼,。99% 的 css 代碼都應(yīng)該放在獨(dú)立的 css 文件中,，這樣當(dāng)你更新 css 文件后，你的所有顯示的風(fēng)格都會(huì)相應(yīng)的發(fā)生變化,，而不需要一個(gè)頁(yè)面一個(gè)頁(yè)面地去修改,。
7. 請(qǐng)用 Sass 變量來(lái)保存你的顏色設(shè)置，以及全局一致的組件,。當(dāng)你想修改顏色以及該顏色對(duì)應(yīng)的陰影色時(shí),，你只需要修改一行代碼而不用去修改幾百行代碼。
8. 以防更改域名,，請(qǐng)鏈接到永久鏈接而不要鏈接到 URL,。例如,，鏈接到一個(gè)網(wǎng)頁(yè)時(shí)，你的 HTML 應(yīng)該寫(xiě)成 < a href=“/slug-goes-here”> 而不是 < a href=“http:///slug-goes-here”>,。同樣,，對(duì)于圖片以及 css 背景也是一樣的。如果你沒(méi)有這樣做,，那么切換域名后,，網(wǎng)頁(yè)上所有的源都會(huì)鏈接到不存在網(wǎng)頁(yè)或文件。
9. 開(kāi)發(fā)自主的插件或者工具以提供某些獨(dú)特的功能,。雖然自主研發(fā)的插件很難維護(hù),，但是會(huì)讓你網(wǎng)站相比于其它類(lèi)似網(wǎng)站更有競(jìng)爭(zhēng)力。
10. 做好瀏覽器兼容性測(cè)試,，保證你的網(wǎng)站在 Chrome,、Firefox、Safari,、IE 以及其它瀏覽器上都可以合適的顯示,。老版本的 IE 的兼容性問(wèn)題簡(jiǎn)直是臭名昭著?？梢允褂?BrowserStack 進(jìn)行測(cè)試,。
11. 使用 W3C 的標(biāo)簽驗(yàn)證服務(wù)發(fā)現(xiàn) HTML 中的顯示錯(cuò)誤。請(qǐng)記住,，絕大多數(shù)網(wǎng)站都并不是 100% 正確地使用 HTML 標(biāo)簽的,。雖然這一項(xiàng)并不是最高優(yōu)先級(jí)的任務(wù)，但是沒(méi)有錯(cuò)誤會(huì)讓你的網(wǎng)站更好一些,。
12. 使用 staging 環(huán)境來(lái)修改你的網(wǎng)站,。理想情況下，你應(yīng)該有一個(gè)所有人都能看到的生產(chǎn)環(huán)境網(wǎng)站,，以及 staging 站點(diǎn),。所有的開(kāi)發(fā)人員的修改都在 staging 站點(diǎn)上。只有當(dāng) stagging 版本穩(wěn)定后,，再將該版本上線,。
13. 在版本聲明處顯示當(dāng)前年份。當(dāng)你看到一個(gè)老的版權(quán)聲明時(shí),，你往往會(huì)認(rèn)為這個(gè)網(wǎng)站已經(jīng)不再維護(hù)了,。使用 PHP 或者其它腳本來(lái)設(shè)置當(dāng)前年份，而不要使用靜態(tài)文本,，例如 ? < esatablised >-< current year >,。

搜索引擎優(yōu)化

1. 每個(gè)頁(yè)面設(shè)置一個(gè)希望搜索引擎用來(lái)排序的關(guān)鍵詞，然后整個(gè)頁(yè)面都圍繞該關(guān)鍵詞進(jìn)行優(yōu)化,。這并不是意味著在每個(gè)句子里都放上這個(gè)關(guān)鍵字,，而是說(shuō)在準(zhǔn)備內(nèi)容應(yīng)該時(shí)刻圍繞該關(guān)鍵詞。
2. 在每個(gè)頁(yè)面上都放上富關(guān)鍵字標(biāo)題標(biāo)簽,。該標(biāo)題就是顯示在 Google 搜索結(jié)果中的藍(lán)色鏈接,。最多不能超過(guò) 55 個(gè)字符。
3. 每個(gè)頁(yè)面只包含一個(gè) H1 標(biāo)簽,。大多數(shù)情況下,，它應(yīng)該和你的標(biāo)題標(biāo)簽是一樣的。
4. 在內(nèi)容中使用 H2,、H3 以及 H4 標(biāo)簽增加內(nèi)容的層次感,。
5. 優(yōu)化特定關(guān)鍵字的方法還包括在標(biāo)題、H1,、子標(biāo)題,、以及前 1/3 的內(nèi)容中包含該關(guān)鍵字。
6. 你的 Meta 描述會(huì)是展示在搜索結(jié)果鏈接下面的內(nèi)容,，所以請(qǐng)確保每個(gè)頁(yè)面都有 Meta 信息,，且所有的 Meta 都包含了相應(yīng)的關(guān)鍵詞。
7. 你的永久鏈接,，也就是域名后的 URL 部分,，也應(yīng)該包含關(guān)鍵詞，這些詞之間可以用破折號(hào)隔開(kāi),。
8. Google 的算法中會(huì)考慮域名注冊(cè)的時(shí)間,，因?yàn)橐话阏J(rèn)為一個(gè)域名注冊(cè)的時(shí)間越長(zhǎng)其擁有高質(zhì)量資源的可能性越大。所以你可以提前幾年就注冊(cè)你的域名,。如果你的域名已注冊(cè)了十年,，那么你也會(huì)認(rèn)真對(duì)待你所做的事。
9. 平均來(lái)說(shuō),，任意給定關(guān)鍵字的 SERP (搜索引擎結(jié)果頁(yè)) 的第一個(gè)鏈接網(wǎng)頁(yè)都至少有超過(guò) 2000 個(gè)字,。當(dāng)你想讓你寫(xiě)的博客或者創(chuàng)建的網(wǎng)頁(yè)在搜索結(jié)果有一個(gè)好的排名時(shí)，那么你至少要有 2000 個(gè)字,。
10. 為你的網(wǎng)站創(chuàng)建一個(gè)站內(nèi)陸圖,，將其存儲(chǔ)為 sitemap.xml 置于根目錄下,，就可以在使用鏈接 /sitemap.xml 顯示該內(nèi)容。該文件還可以告訴 Google 此站點(diǎn)下的頁(yè)面都放在哪些地方,。當(dāng)你增加新的內(nèi)容后請(qǐng)記得修改該文件,。也可以通過(guò) Webmaster Tools 將其提交到 Google,。
11. 使用 Webmaster Tools 管理你的網(wǎng)站，這樣你就可以知道 Google 如何索引你的網(wǎng)站，及時(shí)更新網(wǎng)站嚴(yán)重的錯(cuò)誤,。
12. 要想提高你的圖片的搜索排名,，那么在上傳至網(wǎng)站時(shí)請(qǐng)記得重命名你的圖片,，例如 rank_for_this_keyword_phase.png。
13. 在網(wǎng)站中添加 robots.txt 以告訴搜索引擎哪些頁(yè)面允許索引,，哪些不允許索引,。
14. 添加規(guī)范的重定向,，將你的非 www 網(wǎng)址重定向到 www 網(wǎng)址,，反之亦然,。
15. 使用 LSI (隱含語(yǔ)義索引) 關(guān)鍵字提高網(wǎng)頁(yè)在主關(guān)鍵字下的排名。使用 Google 搜索主關(guān)鍵字然后在 “Searches related to ...” 下就可以找到 LSI 關(guān)鍵字了,。
16. 確保你的內(nèi)容之間能有效的互聯(lián)。從主頁(yè)開(kāi)始，你的每個(gè)網(wǎng)頁(yè)都應(yīng)該在最多三次的點(diǎn)擊下就能到達(dá)。
17. 在相關(guān)的頁(yè)面上添加結(jié)構(gòu)化的數(shù)據(jù)以幫助 Google 合適的索引你的內(nèi)容,。網(wǎng)頁(yè)中需要的結(jié)構(gòu)化數(shù)據(jù)主要包括：人物、產(chǎn)品,、事件、組織、電影、書(shū)以及評(píng)論。可以使用 Schema Creator 生成結(jié)構(gòu)化數(shù)據(jù)。
18. 檢查 Google PageSpeed Insights 說(shuō)明，確保你已經(jīng)解決了所有拖慢你網(wǎng)頁(yè)加載速度的問(wèn)題,。你的網(wǎng)站加載越快,，那么它的排名也就越高,。

加速網(wǎng)頁(yè)加載

1. 網(wǎng)頁(yè)大小不要超過(guò) 2 MB?？梢允褂?tools. 檢查你網(wǎng)頁(yè)的主登錄界面,，保證其不會(huì)過(guò)超過(guò) 2 MB,。任何超過(guò) 2 MB 的內(nèi)容都太大了。
2. 保證加載一個(gè)網(wǎng)頁(yè)不會(huì)產(chǎn)生超過(guò) 50 個(gè)請(qǐng)求,。任何網(wǎng)頁(yè)上的文件或圖片都會(huì)產(chǎn)生一個(gè) HTTP 請(qǐng)求,。請(qǐng)求數(shù)量越少，網(wǎng)頁(yè)加載得越快,。統(tǒng)計(jì)顯示平均每個(gè)網(wǎng)頁(yè)有 70 個(gè)請(qǐng)求,。可以使用 GTmetrix 查看你的頁(yè)面請(qǐng)求數(shù),。
3. 用 CSS 設(shè)計(jì)你的網(wǎng)頁(yè)元素,，千萬(wàn)不要使用背景圖片。不要使用圖片顯示按鈕,、表單或者其它站點(diǎn)共享的組件,。CSS 加載會(huì)更加快一些，而且可以靈活地適應(yīng)不同的布局,。
4. 上傳圖片到你的站點(diǎn)之前請(qǐng)先優(yōu)化你的圖片,。像 TinyPNG 這類(lèi)的工具,，可以在不降低分辨率和圖片質(zhì)量的前提下將圖片的大小減小 80-95%,。
5. 利用 CDN 網(wǎng)絡(luò)將你的圖片以及大文件存儲(chǔ)到世界多個(gè)地方。CDN 將你的文件存儲(chǔ)分發(fā)到不同位置的服務(wù)器上，這樣可以根據(jù)訪問(wèn)者的位置就近獲得文件從而加速頁(yè)面加載。
6. 上傳文件前,，請(qǐng)先使用工具壓縮 JavaScript,、HTML 或者 CSS 文件,。你可以使用 Closure 編譯器壓縮 JavaScript，使用 HTML Minifier 壓縮 HTML，使用 YUI 壓縮 CSS 文件。
7. 把渲染塊的 JavaScript 放到頁(yè)腳去。放在 header 中的腳本只應(yīng)該是那些會(huì)立馬影響頁(yè)面設(shè)計(jì)的腳本,，例如自定義的字體,。
8. 避免登錄頁(yè)的重定向。重定向會(huì)觸發(fā)一次額外的 HTTP 請(qǐng)求,，這會(huì)拖慢頁(yè)面渲染,。
9. 為那些不經(jīng)常更新的頁(yè)面使用瀏覽器緩存并設(shè)置合適的失效時(shí)間。瀏覽器緩存允許瀏覽器從本地磁盤(pán)中加載之前下載的頁(yè)面,，而不需要通過(guò)網(wǎng)絡(luò)下載,。
10. 服務(wù)器配置啟用 gzip 壓縮。壓縮可以減少 90% 的傳輸響應(yīng)時(shí)間,，這會(huì)縮短頁(yè)面第一次渲染的時(shí)間,。
11. 服務(wù)器配置啟用 Keep-Alive，這樣一個(gè) TCP 連接可以傳輸或接收多個(gè) HTTP 請(qǐng)求,。這樣可以減小后續(xù)請(qǐng)求的時(shí)延,。
12. 使用專(zhuān)用服務(wù)器提供服務(wù)以降低響應(yīng)時(shí)延。當(dāng)你的服務(wù)在共享的環(huán)境時(shí),，通常一個(gè)服務(wù)器上會(huì)有成百上千個(gè)服務(wù)在運(yùn)行,，而你的服務(wù)只是其中之一。如果正好其中某個(gè)服務(wù)的流量非常的大,，那么它會(huì)拖慢你的網(wǎng)頁(yè)加載速度,。

優(yōu)美的圖形設(shè)計(jì)

1. 為你的優(yōu)惠碼設(shè)計(jì)一個(gè)好看的封面,。這件事本身并不難，但是卻對(duì)轉(zhuǎn)化率會(huì)有很大的影響,。
2. 為主頁(yè)或者銷(xiāo)售頁(yè)面設(shè)計(jì)個(gè)性化的插圖,。為你的網(wǎng)站特意設(shè)計(jì)一些有特色的插圖會(huì)更容易讓瀏覽者印象深刻。
3. 為你的博客設(shè)計(jì)一個(gè)或者一系列有特色的圖片,。把這些圖片在 Facebook,、Twitter 這些社交網(wǎng)站上傳播。當(dāng)一個(gè)用戶看到這些圖片時(shí),，他們就能立馬聯(lián)想到你寫(xiě)的博客,。
4. 為你自己以及你的團(tuán)隊(duì)成員設(shè)計(jì)個(gè)人頭像或者是一些漫畫(huà)頭像。與每次有新成員加入時(shí)都請(qǐng)專(zhuān)業(yè)攝影視為其拍攝相比,，設(shè)計(jì)一個(gè)漫畫(huà)形象會(huì)便宜很多,。此外，這對(duì)于新成員還是一份不錯(cuò)的禮物,。
5. 將數(shù)據(jù)或者其它某些內(nèi)容以圖表的方式展示出來(lái)會(huì)比單純地使用使用文字更能吸引流量,。人們都喜歡在網(wǎng)站（例如 Pintrest ）上分享圖表或者在他們自己網(wǎng)站上通過(guò)回鏈的方式轉(zhuǎn)發(fā)你的內(nèi)容。
6. 如果你會(huì)在你的網(wǎng)站上發(fā)布一些視頻,，那么你應(yīng)該為這些視頻添加簡(jiǎn)介,，因?yàn)檫@樣會(huì)給別人更加專(zhuān)業(yè)的感覺(jué)。添加一些能讓你的視頻更為突出的相關(guān)視頻或者動(dòng)畫(huà)就更好了,。

網(wǎng)站安全

1. 使用 SSL 證書(shū)以允許瀏覽器與服務(wù)器之間建立安全連接,。如果你允許使用信用卡，那么你更應(yīng)該使用 SSL 安全證書(shū),，因?yàn)榻^大部分結(jié)賬軟件都有這樣的要求,。此外，Google 也說(shuō)到使用 SSL 證書(shū)有助于網(wǎng)站的搜索排名,。
2. 隨時(shí)更新軟件與插件。當(dāng) WordPress 或者其它 CMS 軟件發(fā)布更新時(shí),，它們往往都是為了修復(fù)一些危險(xiǎn)漏洞,。如果你不更新，那么你的網(wǎng)站被攻擊就只是時(shí)間的問(wèn)題,。
3. 設(shè)置雙認(rèn)證管理員登錄,。大部分黑客攻擊都是從登錄界面開(kāi)始的。
4. 檢測(cè)并清除惡意軟件,。如果你的網(wǎng)站曾經(jīng)被黑過(guò),，那么這些黑客可能在服務(wù)器上放了一些不容易被發(fā)現(xiàn)的破損文件。如果不及時(shí)地刪除這些文件,，Google 很可能會(huì)把你的網(wǎng)站列入黑名單中,，并降低網(wǎng)站的排名,。當(dāng)用戶訪問(wèn)你的網(wǎng)站時(shí)，它還會(huì)警告用戶提醒他們不要訪問(wèn),。
5. 千萬(wàn)不要將管理員用戶名設(shè)置為 admin,。刪除默認(rèn)管理員賬戶再新建一個(gè)不同的管理員用戶名。
6. 定期備份你的數(shù)據(jù)庫(kù)和網(wǎng)站文件,。大多數(shù)備份軟件都只會(huì)備份你的數(shù)據(jù)庫(kù),，實(shí)際上只備份了你的數(shù)據(jù)和內(nèi)容。但是如果你的網(wǎng)站文件丟失了,，這時(shí)候你就需要使用備份文件來(lái)恢復(fù)了,。

網(wǎng)站內(nèi)容

1. 自己設(shè)計(jì) 404 錯(cuò)誤頁(yè)面，當(dāng)用戶訪問(wèn)不存在的網(wǎng)頁(yè)時(shí)就會(huì)顯示該頁(yè)面,。使用 404 頁(yè)面將用戶帶回主頁(yè)或者幫助他們找到他們正在找的內(nèi)容,。
2. 除了主頁(yè)外，"關(guān)于我們" 頁(yè)面也許是最多被訪問(wèn)的頁(yè)面了,。請(qǐng)確保該頁(yè)面上正確地展示了你以及你的公司,。
3. “聯(lián)系我們” 頁(yè)面除了幫助那些潛在客戶聯(lián)系你之外，還可以用于在你,、客戶以及 Google 之間建立信任關(guān)系,。Google 在決定網(wǎng)頁(yè)排名時(shí)，搜索引擎會(huì)在 “聯(lián)系我們” 網(wǎng)頁(yè)尋找郵箱,、電話號(hào)碼以及地址,。詳細(xì)的聯(lián)系信息會(huì)讓 Google 覺(jué)得網(wǎng)站會(huì)更可靠一些。
4. 把注冊(cè)表單放在網(wǎng)站的各個(gè)頁(yè)面也許是個(gè)不錯(cuò)的注意,。不過(guò),，使用一個(gè)空的但是會(huì)有更高轉(zhuǎn)化率的注冊(cè)界面會(huì)更好一些。當(dāng)你希望用戶訂閱時(shí),，直接將其鏈接至該界面即可,。
5. 當(dāng)用戶訂閱你的內(nèi)容時(shí)，請(qǐng)記得給他們返回確認(rèn)頁(yè)以要求他們確認(rèn)他們的電子郵箱,。如果他們沒(méi)有正確地進(jìn)行確認(rèn),，他們可能會(huì)完全忘記這事再也不會(huì)回來(lái)。
6. 用戶在確認(rèn)郵件中點(diǎn)擊確認(rèn)鏈接后,，你應(yīng)該給他們發(fā)送感謝頁(yè)同時(shí)告訴他們接下來(lái)可以做什么,。感謝頁(yè)面每個(gè)訂閱者會(huì)收到一次且僅一次，所以這是一個(gè)絕佳的機(jī)會(huì)給他們一個(gè)優(yōu)惠價(jià)或鼓勵(lì)他們購(gòu)買(mǎi)產(chǎn)品,。
7. 你的網(wǎng)站應(yīng)該有一個(gè)登錄頁(yè)模板,，這樣當(dāng)你需要的時(shí)候就可以直接使用它。
8. 如果你是在網(wǎng)上銷(xiāo)售什么東西,，請(qǐng)確保你的銷(xiāo)售界面要非常好看,。從標(biāo)題開(kāi)始,，留好字符間距。你也可以添加一些銷(xiāo)售視頻,。在頁(yè)面的底部記得引導(dǎo)顧客去購(gòu)買(mǎi),。

社交媒體

1. 控制你的博客和網(wǎng)頁(yè)上的社交平臺(tái)分享按鈕數(shù)量，因?yàn)槊總€(gè)按鈕都會(huì)運(yùn)行一段腳本,，這會(huì)額外地增加頁(yè)面的加載時(shí)間,。只包含內(nèi)容常被分享的那些社交網(wǎng)站的分享按鈕即可，例如 Faceboock,、 Twitter,、LinkedIn、Pinterest,、Google+ 等,。
2. 為你的社交頁(yè)面創(chuàng)建圖片，例如 Facebook 主頁(yè),、Twiiter 賬戶,、Youtube 頻道等。個(gè)性化的圖片會(huì)給瀏覽者留下積極的印像,，會(huì)讓首次訪問(wèn)用戶更可能關(guān)注,、訂閱你的頁(yè)面或頻道。
3. 啟用 Facebook Open Graph META 標(biāo)簽以確保你的內(nèi)容在 Facebook 上正確地被分享,。使用 Facebook Debugger 檢查你的的主頁(yè),、博客或者網(wǎng)頁(yè)在 Facebook 上被分享時(shí)是如何顯示的。
4. 啟用 Twiiter Cards 以便網(wǎng)站 URL 被分享時(shí)自動(dòng)顯示豐富的圖片,?？梢詤⒖?Twitter Cards 入門(mén)。
5. 當(dāng)你的網(wǎng)站被分享到 Google+ 時(shí),，你可以啟用 Google+ Snippets 設(shè)置人們看到的內(nèi)容,。使用 Snippet 指南 生成相關(guān)代碼。即使你的網(wǎng)站沒(méi)有很多 Google+ 的贊,，如果你正確的添加了元數(shù)據(jù),， Google+ 也會(huì)明白它們比較重要。
6. 在頁(yè)面中隱藏鏈接到社交媒體主頁(yè)的按鈕,。把這些圖標(biāo)縮小或者只在頁(yè)腳上顯示它們。依靠社交媒體銷(xiāo)售目的是把客戶帶回到你的網(wǎng)站,，而不是相反作用,。

好了，我還漏掉了什么沒(méi),？作為自由職業(yè)者或者企業(yè)家的你還有其它讓網(wǎng)站變得酷炫的方法嗎,？