慢慢來網(wǎng)站建設(shè)案例分析：http://fabric-king.com

本文共4850字，圖文并茂

請花5-8分鐘慢慢品讀

序

各位小伙伴，慢慢來蟄伏了一段時(shí)間，在這段時(shí)間里，我們做了很多新技術(shù)的開發(fā)和調(diào)研 – 目標(biāo)就是：

做出給外貿(mào)企業(yè)最好的收獲高質(zhì)量詢盤的解決方案。

好了，牛皮吹出去了，那么大家有沒有一點(diǎn)好奇，我們這種職業(yè)選手跟業(yè)余選手、我們的競爭對手的區(qū)別到底在哪里呢？

讓我慢慢道來，就以我們最新上線的www.fabric-??king??.??com 這個(gè)網(wǎng)站作為案例，開啟一場實(shí)力show。

前期策劃

項(xiàng)目開始后，我們的項(xiàng)目經(jīng)理會跟客戶進(jìn)行前期溝通。

針對客戶的核心競爭力和受眾目標(biāo)客戶群體進(jìn)行調(diào)研, 并且對客戶國內(nèi)外的競爭對手的情況和他們的線上營銷策略、關(guān)鍵詞大數(shù)據(jù)進(jìn)行調(diào)研和分析。

然后做出網(wǎng)站的線框圖。就是下面這個(gè)東東：

這個(gè)線框圖相當(dāng)于網(wǎng)站的骨架，或者說是寫文章的提綱。

前期策劃的作用就是把網(wǎng)站的中心思想（最大的核心賣點(diǎn)）還有網(wǎng)站的提綱確定，大方向定了，后面的就好辦了。

而且各位可以看到我們的項(xiàng)目經(jīng)理還會寫出很多他的意見：

為什么這一塊要放這個(gè)內(nèi)容（而不是其他的東西）？這中間其實(shí)有很嚴(yán)謹(jǐn)?shù)倪壿嫛?br>
因?yàn)槲覀兊木W(wǎng)站是營銷型網(wǎng)站，是以追求詢盤為目標(biāo)的。

所有的資源必須聚焦集中到一點(diǎn)上面去 – 就是提高網(wǎng)站的轉(zhuǎn)化率。

網(wǎng)站上的內(nèi)容和細(xì)節(jié)、 后面的設(shè)計(jì)，技術(shù)都是為了追求最高的轉(zhuǎn)化率而去決定做什么和不做什么。

所以有些朋友說：hey，你們運(yùn)營很牛逼，能不能幫我們做運(yùn)營？我們網(wǎng)站已經(jīng)有了。

基本上我們都是說，對不起，還真不行。

因?yàn)檫\(yùn)營是二樓，網(wǎng)站是一樓，我們無法在一個(gè)差的基礎(chǔ)上光靠運(yùn)營獲得好成績，這跟搭建一個(gè)空中樓閣的想法差不多。

所以我們的競爭力是多維度的，不只是運(yùn)營好，前面的基礎(chǔ)要更要打好。

而且我們從一開始就考慮到了后面的運(yùn)營，為了轉(zhuǎn)化率去策劃和設(shè)計(jì)網(wǎng)站，你說會不會跟只從運(yùn)營這里發(fā)力有差別呢？

差距就是這樣產(chǎn)生的，從一開始就有了。

定制化設(shè)計(jì)

傳統(tǒng)的建站基本上沒有設(shè)計(jì)感，市面上99%的網(wǎng)站都是模板站。建站公司會給你幾十個(gè)上百個(gè)模板，讓你挑。

問你：哪個(gè)好看？

ok，把你的產(chǎn)品圖片和文案填進(jìn)去。最后的情況就是模板可能看上去很好看，但是出來的整體風(fēng)格不協(xié)調(diào)。

Logo跟模板不協(xié)調(diào)，圖片跟模板的風(fēng)格不協(xié)調(diào)，整體的風(fēng)格不統(tǒng)一，看上去很山寨的洗剪吹風(fēng)格。

試問：

這樣的企業(yè)形象，如何能讓你在跟國外客戶談判中獲得有利地位？

這樣的企業(yè)形象，如何能超越你的同行讓客戶對你看高一線?

這樣的企業(yè)形象，如何吸引有能力的員工來你公司上班？

所以，雖然模板做網(wǎng)站快，通過這個(gè)方法公司可以賺錢，但是我們還是摒棄了這種方式，采用了更加慢的方式去設(shè)計(jì)。

而且我可以大言不慚的說，我們的設(shè)計(jì)師可以超越99%外貿(mào)企業(yè)里面的美工的設(shè)計(jì)水平。

http://www.fabric-king.com 這個(gè)網(wǎng)站的每一個(gè)icon都是設(shè)計(jì)師手工繪制，光繪制和修改這個(gè)網(wǎng)站的icon都花費(fèi)了大半個(gè)禮拜了。。。

用戶看網(wǎng)站都是看整體感覺，如何達(dá)到一個(gè)整體高大上的感覺呢？

一方面是整體協(xié)調(diào)性，另外是每個(gè)細(xì)節(jié)的打磨。

網(wǎng)站的圖片，文字字體，排版和每一個(gè)ICON都會影響整體，只有做好了每一個(gè)小細(xì)節(jié)又顧及到整體的協(xié)調(diào)性才會有一個(gè)好的感覺。

套模板的最大問題就是沒有達(dá)到一個(gè)整體的協(xié)調(diào)性，而且如果你沒有一定的美術(shù)功底，怎么調(diào)也調(diào)不好的。

慢慢來的理念就是打磨每一個(gè)細(xì)節(jié)，做出優(yōu)質(zhì)的產(chǎn)品，幫助我們的客戶超越同行。

這個(gè)網(wǎng)站的設(shè)計(jì)被米課的顏sir點(diǎn)贊， 也得到了很多朋友的好評。

手機(jī)優(yōu)先（mobile first）

好了，講完設(shè)計(jì)就到我們的技術(shù)端。

各位可以用手機(jī)和電腦分別打開 http://www.fabric-king.com

這個(gè)網(wǎng)站我們是先開發(fā)手機(jī)端，再開發(fā)桌面端的。這里就涉及到一個(gè)網(wǎng)站自適應(yīng)的概念。

谷歌對自適應(yīng)的網(wǎng)站是有SEO權(quán)重的加成的。來看看谷歌官方對自適應(yīng)的解釋：

各位看完上面那段可能會說：能不能說人話？

呵呵，跟大家分享一個(gè)傻瓜式的看一個(gè)網(wǎng)站是否自適應(yīng)的方法：

我們可以用chrome打開目標(biāo)網(wǎng)址，然后不最大化chrome，左右拉動chrome的邊緣，看看在不同的寬度（屏幕分辨率），這個(gè)網(wǎng)站是否可以完美適配和顯示，如果不能，就不是自適應(yīng)。

現(xiàn)在互聯(lián)網(wǎng)上超過一半的流量是手機(jī)端（想想也很正常的，現(xiàn)在人手都一部手機(jī)，很多人都不用電腦了。包括我接觸過的一些大老板，都不用電腦很久了，這些可都是決策層啊）

站在marketing的角度，我們運(yùn)營這么多項(xiàng)目得出來的實(shí)測數(shù)據(jù)，手機(jī)端的轉(zhuǎn)化率并不比桌面端低！

（怎么樣，是不是顛覆三觀？如果說到這個(gè)份上你還不重視手機(jī)端，那我也只有呵呵了。）

Mobile first的概念大家可以看看下面的兩段注解：

簡單的來概括就是：

手機(jī)屏幕就這么點(diǎn)大，網(wǎng)絡(luò)速度也沒有桌面端給力，你如何取舍，把最核心的內(nèi)容展現(xiàn)出來？

盡量在手機(jī)屏幕展示最重要最核心的內(nèi)容！！

一些朋友設(shè)計(jì)網(wǎng)站會很容易陷入大量堆砌內(nèi)容和產(chǎn)品的誤區(qū)，什么東西都想擺上去，而不考慮對用戶有沒有用。

這樣會大大影響用戶體驗(yàn)和提高跳出率，因?yàn)槟闾峁┑膬?nèi)容沒有很大的價(jià)值。

比如某個(gè)很有歷史沉淀的公司，做網(wǎng)站要把自己幾千張產(chǎn)品圖和產(chǎn)品上傳上去……

這種工作不但機(jī)械，也沒有價(jià)值。谷歌對重復(fù)內(nèi)容和低質(zhì)量內(nèi)容的網(wǎng)站會降權(quán)。

而且從用戶體驗(yàn)的角度考慮，作為國外的用戶，他也不會看你幾千個(gè)產(chǎn)品，如果你的產(chǎn)品內(nèi)頁沒有什么有用的信息，很有可能看兩三個(gè)頁面就關(guān)了。

更好的方法是把這幾千個(gè)產(chǎn)品分成若干個(gè)類別，然后每個(gè)類別做一個(gè)有著豐富圖片和文案的內(nèi)頁，配上該類有特色的產(chǎn)品圖片，這樣用戶體驗(yàn)更好，網(wǎng)站的數(shù)據(jù)也會更加好看。

拜托，現(xiàn)在的國外客戶誰不知道你可以做該類的任何產(chǎn)品……中國制造已經(jīng)不缺制造能力了，缺的是制造精品的能力，客戶看的也是你的綜合實(shí)力！Just show them what they want to see!

回歸正題，我們來看http://www.farbic-king.com 的一些具體細(xì)節(jié)。

在桌面端，首頁會更加豐富，第一屏是一個(gè)視頻，下面開始才是menu和訂單流程。

在手機(jī)版大家會發(fā)現(xiàn)視頻沒有了。

根據(jù)谷歌的數(shù)據(jù)，70%的手機(jī)還是在3G或者以下的網(wǎng)絡(luò)環(huán)境，如果放視頻會影響加載的速度，手機(jī)優(yōu)先是盡量在不影響速度的前提下把最核心的內(nèi)容展示出來。

流程的tab從桌面端的豎排，變成了手機(jī)端的橫排。因?yàn)樽烂娑说钠聊皇菣M的，如果圖片是正方形，左右的空余空間比較多；

而手機(jī)是豎排，上下的空間比較多。所以我們在空間多的地方插入tab。

（首頁手機(jī)端第一屏）

好了，我們再往下走。下面的icon從桌面端的橫排：

變成了iPad端的一排三個(gè)。

手機(jī)端的一排兩個(gè)。

這是因?yàn)槲覀冡槍Σ煌姆直媛蕦懥瞬煌腃SS樣式，我們可以看下圖的紅框處的css樣式，我們在屏幕寬度大于481px，768px，1030px，1240px的時(shí)候，顯示不同的樣式來適配不同的寬度。

（更牛逼的是我們把這些樣式合并、壓縮成了一個(gè)叫Melement的樣式......來減少更少的request數(shù)量，達(dá)到更快的網(wǎng)站加載速度）

網(wǎng)站的JavaScript代碼方面：我們每個(gè)頁面都用不同的JavaScript，然后也合并成一個(gè)叫Melement的JS文件，上傳到服務(wù)器后再用Gzip壓縮。達(dá)到一個(gè)更快的加載速度。

定制化WP主題（前后端）

從the7到Avada，再到themeforest的一些主題?？梢哉f，你用過和沒用過的主題我們都試過了，到了最后還是呵呵……基本上這些功能全的主題會很臃腫。

我們現(xiàn)在最佳的解決方案是根據(jù)外貿(mào)企業(yè)的需求去開發(fā)相應(yīng)的主題。

Melement（咦，這個(gè)詞好像很眼熟）是在一個(gè)純凈精簡版的WP主題基礎(chǔ)上，經(jīng)過慢慢來團(tuán)隊(duì)再開發(fā)的主題。

我們可以看到左側(cè)的欄目非常少?；旧喜粫凶屇惴中牡幕蛘咦屇阋苫蟮臋谀?。

這里再簡單介紹一下產(chǎn)品上傳界面：

只有四個(gè)tab。

頁面的title就是品名，下面除了有個(gè)SEO插件外（項(xiàng)目經(jīng)理強(qiáng)烈要求加裝）還有三個(gè)tab。

Product image對應(yīng)產(chǎn)品分類頁的大圖。

（產(chǎn)品分類頁截圖-右邊即是該產(chǎn)品，此頁面鏈接是：https://www.fabric-king.com/adjustable-backdrops/）

進(jìn)入產(chǎn)品內(nèi)頁：https://www.fabric-king.com/adjustable-backdrops/adjustable-backdrop/

我們看到第一屏是四個(gè)tab，每個(gè)tab有左邊的縮略圖，右邊的大圖。

我們的后臺也是四個(gè)tab，用戶只要對應(yīng)上傳大圖和縮略圖就行了。

往下走，第二屏是產(chǎn)品的specification，也有五個(gè)tab。

我們的后臺也是對應(yīng)五個(gè)tab。

其中最后的一個(gè)template的tab，可以有PDF下載的，后臺會有對應(yīng)的上傳功能，最多10個(gè)PDF。

有些產(chǎn)品沒有PDF的話，這里不會顯示Dowload Template的板塊，只會保留Artwork Guide板塊。

如果上傳了多個(gè)PDF，就是下面的樣式。

這樣，用戶就不用先上傳去media，然后又要搞個(gè)link，又要寫樣式代碼那么麻煩了。。。

最下面的板塊是related product板塊，如果這個(gè)大類只有一個(gè)產(chǎn)品，就不顯示這一塊。

例如：https://www.fabric-king.com/brochure-stands/brochure-stands/

這個(gè)產(chǎn)品就沒有related product板塊，因?yàn)樵摯箢惥鸵粋€(gè)產(chǎn)品。

如果有三個(gè)或者三個(gè)以內(nèi)的產(chǎn)品，會有展示，但是沒有左右輪播的按鈕。

例如：http://www.fabric-king.com/pop-up-a-frames/round-pop-up-a-frame/

有三個(gè)以上產(chǎn)品，會自動出現(xiàn)輪播按鈕，如下：

而且每一個(gè)細(xì)節(jié)都是mobile適配的，在手機(jī)端是用手指wipe左右滑動切換輪播圖片。

我們預(yù)寫了各種template，保證各個(gè)頁面風(fēng)格統(tǒng)一，容易操作。只需替換相應(yīng)的文案和圖片就OK。

（請看下面的各個(gè)頁面的template的tab，包括首頁，產(chǎn)品分類頁，產(chǎn)品內(nèi)頁）

所以這樣的后臺，即使是最小白的小白，也不需要在WP里面的Page，Portfolio, Media, Menu等頁面打轉(zhuǎn)轉(zhuǎn)，理清楚這個(gè)邏輯關(guān)系都搞暈一群人了 ：P

只需要修改每個(gè)版塊對應(yīng)的圖片和文案就行了。

SEO友好

WordPress的一大優(yōu)點(diǎn)就是本身已經(jīng)SEO友好，這里就不展開很多細(xì)節(jié)來說了。

分享其中一個(gè)小細(xì)節(jié)：

大家如果多看看我們的產(chǎn)品內(nèi)頁就會發(fā)現(xiàn)，我們的url結(jié)構(gòu)是：

http://fabric-king.com/產(chǎn)品大類/具體產(chǎn)品

這是很SEO友好的。

一般url不要超過3層，大于三層會影響SEO權(quán)重。小伙伴用WP建站的時(shí)候，一般會用portfolio做產(chǎn)品內(nèi)頁，這樣會導(dǎo)致第二級的url是product或者portfolio，無法用相應(yīng)的產(chǎn)品大類，導(dǎo)致產(chǎn)品內(nèi)頁會是第四級，這個(gè)細(xì)節(jié)對SEO不太友好。

服務(wù)端安全和速度優(yōu)化

目前這個(gè)網(wǎng)站用的是linode美國服務(wù)器+cloudfare cdn。

我們做的一些小細(xì)節(jié)包括但是不限于：

1.服務(wù)器定期自動數(shù)據(jù)備份（你的網(wǎng)站被黑了，或者數(shù)據(jù)被錯(cuò)誤清空的時(shí)候就知道這有多重要）

2. 自動更新SSL（HTTPS）證書（因?yàn)槊赓M(fèi)的SSL證書都是三個(gè)月，每三個(gè)月要續(xù)費(fèi)，而且很容易忘記這個(gè)事情 – 一覺醒來你的網(wǎng)站被chrome提示有風(fēng)險(xiǎn)，昨晚損失了幾十條詢盤的感覺你肯定不會喜歡 ……）

3. 服務(wù)器對數(shù)據(jù)庫和靜態(tài)資源都做了緩存處理提高響應(yīng)速度。

4. 合并request數(shù)量提高加載速度。

這一塊后續(xù)會寫一篇更加詳細(xì)的文章介紹如何配置服務(wù)器，我們做了大量的優(yōu)化工作，測試過很多不同的hosting和cdn（包括并不限于linode，WP Engine，Google Cloud，Couldfare，Maxcdn……）

后續(xù)也會寫一個(gè)橫向評測的文章出來，分析哪個(gè)是最好的solution。

這部分工作主要是確保網(wǎng)站的安全，穩(wěn)定，一些細(xì)節(jié)用戶可能感覺不到，但是對于我們來講，技術(shù)端對于營銷和運(yùn)營是底層的保障和強(qiáng)有力的支持，是十分重要的。

最直觀的就是看我們網(wǎng)址在谷歌開發(fā)者工具：

https://developers.google.com/speed/pagespeed/insights/ 的得分情況：

（畢竟他會通過幾百條規(guī)則對你網(wǎng)站進(jìn)行很系統(tǒng)全面的評分）

https://www.pingdom.com/ 測試結(jié)果

https://gtmetrix.com/ 測試結(jié)果。

而且正如喬幫主說的：在用戶看得見和看不見的地方，我們都要做到極致。

我們不會因?yàn)橛脩舨恢蓝蝗プ?，馬馬虎虎交付一個(gè)網(wǎng)站給你，因?yàn)槲覀儗ψ约阂彩怯兄粩噙M(jìn)步，追求極致的要求的。

詢盤表單和EDM的對接

WP最多的詢盤表單插件是ContactForm 7（如果你還在用wufoo證明你有點(diǎn)out了），CF7也會有一些小問題，例如有時(shí)候會收不到詢盤等等……

之前我的一個(gè)客戶，每天幫他搞二十條詢盤，搞了半年多。

積累了一千多條詢盤，然后就有一個(gè)問題：這么多客戶，每個(gè)月群發(fā)一次郵件update價(jià)格表都會出人命......

之前他手動發(fā)，還是用企業(yè)郵發(fā)，發(fā)到被盯上了，企業(yè)域名被黑名單，直接進(jìn)垃圾郵件箱……

他問我腫么辦，我說你咋不早說......

所以我們團(tuán)隊(duì)在CF7的基礎(chǔ)上做了一些細(xì)節(jié)的改進(jìn)，例如添加了詢盤IP的自動查詢功能：

每一封詢盤會自動查詢IP所在的國家，省份，城市。省去手動百度的麻煩。

然后所有的郵件都對接sendgrid的API (https://sendgrid.com/ 是國外一家很著名的郵件營銷服務(wù)商)，每收到一封郵件就會在sendgrid里面記錄發(fā)件人的姓名和地址。為后續(xù)做EDM做準(zhǔn)備。

這樣就算你每個(gè)星期群發(fā)幾千封幾萬封都沒有問題啦~~~（不過一定要謹(jǐn)記你的郵件必須有價(jià)值，不然很容易被客戶取消訂閱。）

這一塊的具體攻略我也會后續(xù)寫一篇文章來詳細(xì)講解。

結(jié)語

最后網(wǎng)站上線之前，客戶錄了一段視頻表達(dá)他對我們團(tuán)隊(duì)用心工作的感謝。



好啦，恭喜你可以看到這里。如果你可以理解和明白上面我所說的東西，你在數(shù)字營銷這一塊可以說跑贏了95%的外貿(mào)人了。

如果你不懂，也沒有關(guān)系。慢慢來的意義就是讓你脫離這些繁瑣的東西，專注詢盤轉(zhuǎn)化，團(tuán)隊(duì)管理，客情維護(hù)，供應(yīng)鏈上下游。

因?yàn)槲覀儊碜隹隙ū饶阕约鹤鲆獙I(yè)得多，在你的有生之年是無法鍛煉出如此復(fù)合的能力了（懂設(shè)計(jì)又懂代碼，還要懂人性能做營銷……）因?yàn)槊恳粔K我們都是用很專業(yè)的人在做的。

社會發(fā)展的分工趨勢也是細(xì)分化，專業(yè)化，不是你我可以阻擋的。

想要在線上營銷這一塊超越同行？？

和我們聊聊？？

慢慢來官網(wǎng)：

https://www.mmldigi.com/

Add：廣州海珠區(qū)革新路新民八街36號，大阪?zhèn)}1904創(chuàng)意產(chǎn)業(yè)園，A3-01室

Tel：020-81534532

湯米蘇

微信號：tommyso

10年外貿(mào)B2B數(shù)字化營銷實(shí)戰(zhàn)老司機(jī)

廣米O2O外貿(mào)精英社群發(fā)起人

慢慢來海外數(shù)字化營銷創(chuàng)始人