101 種讓你的網(wǎng)頁看起來更酷的方法

譯者:楊海祥

原文:101 Ways to Make Your Website More Awesome

本文為極客學(xué)院Wiki組織翻譯,轉(zhuǎn)載請注明出處。

時間:2016.3.15

上周我和一個老客戶聊天,她說:“Nick, 我想改進(jìn)一下我的網(wǎng)站但是我卻不知道從何下手。”

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

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

因此,我列了一個清單,其中包含了我們在搭建 AwesomeWeb 網(wǎng)站所做的所有事,甚至包括我們還沒有做的一部分。

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

我怎么知道呢?

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

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

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

重頭戲來了,下面一起來看看這份清單吧。

酷炫的商標(biāo)

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

酷炫的排版

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

優(yōu)美的布局

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

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

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

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

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

成熟的開發(fā)

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

搜索引擎優(yōu)化

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

加速網(wǎng)頁加載

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

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

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

網(wǎng)站安全

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

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

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

社交媒體

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

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,527評論 6 544
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,687評論 3 429
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,640評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,957評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 72,682評論 6 413
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 56,011評論 1 329
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,009評論 3 449
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 43,183評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,714評論 1 336
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 41,435評論 3 359
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,665評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,148評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,838評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,251評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,588評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,379評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,627評論 2 380

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,764評論 25 708
  • 英文地址:http://t.cn/RtdyJWT譯者:QAQMiao譯文地址:http://t.cn/Rtasxb...
    51CTO學(xué)院閱讀 438評論 0 1
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,784評論 1 92
  • 文/樂小魚兒 寫在前面:繁華的都市里,有許多說著鄉(xiāng)音的膽怯、勤勞、淳樸的外鄉(xiāng)人。請多一點(diǎn)再多一點(diǎn)溫情和包容,并給予...
    樂小魚兒閱讀 893評論 56 40
  • 前幾天,球哥給我分享了一篇關(guān)于網(wǎng)易云閱讀【iPhone2.0】交互設(shè)計(jì)回顧的文章,發(fā)現(xiàn)我們的產(chǎn)品的開發(fā)進(jìn)度情況跟網(wǎng)...
    小苤閱讀 202評論 2 0