慢慢來網站建設案例分析：http://fabric-king.com

本文共4850字，圖文并茂

請花5-8分鐘慢慢品讀

序

各位小伙伴，慢慢來蟄伏了一段時間，在這段時間里，我們做了很多新技術的開發和調研 – 目標就是：

做出給外貿企業最好的收獲高質量詢盤的解決方案。

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

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

前期策劃

項目開始后，我們的項目經理會跟客戶進行前期溝通。

針對客戶的核心競爭力和受眾目標客戶群體進行調研, 并且對客戶國內外的競爭對手的情況和他們的線上營銷策略、關鍵詞大數據進行調研和分析。

然后做出網站的線框圖。就是下面這個東東：

這個線框圖相當于網站的骨架，或者說是寫文章的提綱。

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

而且各位可以看到我們的項目經理還會寫出很多他的意見：

為什么這一塊要放這個內容（而不是其他的東西）？這中間其實有很嚴謹的邏輯。

因為我們的網站是營銷型網站，是以追求詢盤為目標的。

所有的資源必須聚焦集中到一點上面去 – 就是提高網站的轉化率。

網站上的內容和細節、 后面的設計，技術都是為了追求最高的轉化率而去決定做什么和不做什么。

所以有些朋友說：hey，你們運營很牛逼，能不能幫我們做運營？我們網站已經有了。

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

因為運營是二樓，網站是一樓，我們無法在一個差的基礎上光靠運營獲得好成績，這跟搭建一個空中樓閣的想法差不多。

所以我們的競爭力是多維度的，不只是運營好，前面的基礎要更要打好。

而且我們從一開始就考慮到了后面的運營，為了轉化率去策劃和設計網站，你說會不會跟只從運營這里發力有差別呢？

差距就是這樣產生的，從一開始就有了。

定制化設計

傳統的建站基本上沒有設計感，市面上99%的網站都是模板站。建站公司會給你幾十個上百個模板，讓你挑。

問你：哪個好看？

ok，把你的產品圖片和文案填進去。最后的情況就是模板可能看上去很好看，但是出來的整體風格不協調。

Logo跟模板不協調，圖片跟模板的風格不協調，整體的風格不統一，看上去很山寨的洗剪吹風格。

試問：

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

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

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

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

而且我可以大言不慚的說，我們的設計師可以超越99%外貿企業里面的美工的設計水平。

http://www.fabric-king.com 這個網站的每一個icon都是設計師手工繪制，光繪制和修改這個網站的icon都花費了大半個禮拜了。。。

用戶看網站都是看整體感覺，如何達到一個整體高大上的感覺呢？

一方面是整體協調性，另外是每個細節的打磨。

網站的圖片，文字字體，排版和每一個ICON都會影響整體，只有做好了每一個小細節又顧及到整體的協調性才會有一個好的感覺。

套模板的最大問題就是沒有達到一個整體的協調性，而且如果你沒有一定的美術功底，怎么調也調不好的。

慢慢來的理念就是打磨每一個細節，做出優質的產品，幫助我們的客戶超越同行。

這個網站的設計被米課的顏sir點贊， 也得到了很多朋友的好評。

手機優先（mobile first）

好了，講完設計就到我們的技術端。

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

這個網站我們是先開發手機端，再開發桌面端的。這里就涉及到一個網站自適應的概念。

谷歌對自適應的網站是有SEO權重的加成的。來看看谷歌官方對自適應的解釋：

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

呵呵，跟大家分享一個傻瓜式的看一個網站是否自適應的方法：

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

現在互聯網上超過一半的流量是手機端（想想也很正常的，現在人手都一部手機，很多人都不用電腦了。包括我接觸過的一些大老板，都不用電腦很久了，這些可都是決策層?。?br>
站在marketing的角度，我們運營這么多項目得出來的實測數據，手機端的轉化率并不比桌面端低！

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

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

簡單的來概括就是：

手機屏幕就這么點大，網絡速度也沒有桌面端給力，你如何取舍，把最核心的內容展現出來？

盡量在手機屏幕展示最重要最核心的內容！！

一些朋友設計網站會很容易陷入大量堆砌內容和產品的誤區，什么東西都想擺上去，而不考慮對用戶有沒有用。

這樣會大大影響用戶體驗和提高跳出率，因為你提供的內容沒有很大的價值。

比如某個很有歷史沉淀的公司，做網站要把自己幾千張產品圖和產品上傳上去……

這種工作不但機械，也沒有價值。谷歌對重復內容和低質量內容的網站會降權。

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

更好的方法是把這幾千個產品分成若干個類別，然后每個類別做一個有著豐富圖片和文案的內頁，配上該類有特色的產品圖片，這樣用戶體驗更好，網站的數據也會更加好看。

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

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

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

在手機版大家會發現視頻沒有了。

根據谷歌的數據，70%的手機還是在3G或者以下的網絡環境，如果放視頻會影響加載的速度，手機優先是盡量在不影響速度的前提下把最核心的內容展示出來。

流程的tab從桌面端的豎排，變成了手機端的橫排。因為桌面端的屏幕是橫的，如果圖片是正方形，左右的空余空間比較多；

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

（首頁手機端第一屏）

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

變成了iPad端的一排三個。

手機端的一排兩個。

這是因為我們針對不同的分辨率寫了不同的CSS樣式，我們可以看下圖的紅框處的css樣式，我們在屏幕寬度大于481px，768px，1030px，1240px的時候，顯示不同的樣式來適配不同的寬度。

（更牛逼的是我們把這些樣式合并、壓縮成了一個叫Melement的樣式......來減少更少的request數量，達到更快的網站加載速度）

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

定制化WP主題（前后端）

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

我們現在最佳的解決方案是根據外貿企業的需求去開發相應的主題。

Melement（咦，這個詞好像很眼熟）是在一個純凈精簡版的WP主題基礎上，經過慢慢來團隊再開發的主題。

我們可以看到左側的欄目非常少?；旧喜粫凶屇惴中牡幕蛘咦屇阋苫蟮臋谀俊?br>
這里再簡單介紹一下產品上傳界面：

只有四個tab。

頁面的title就是品名，下面除了有個SEO插件外（項目經理強烈要求加裝）還有三個tab。

Product image對應產品分類頁的大圖。

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

進入產品內頁：https://www.fabric-king.com/adjustable-backdrops/adjustable-backdrop/

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

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

往下走，第二屏是產品的specification，也有五個tab。

我們的后臺也是對應五個tab。

其中最后的一個template的tab，可以有PDF下載的，后臺會有對應的上傳功能，最多10個PDF。

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

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

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

最下面的板塊是related product板塊，如果這個大類只有一個產品，就不顯示這一塊。

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

這個產品就沒有related product板塊，因為該大類就一個產品。

如果有三個或者三個以內的產品，會有展示，但是沒有左右輪播的按鈕。

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

有三個以上產品，會自動出現輪播按鈕，如下：

而且每一個細節都是mobile適配的，在手機端是用手指wipe左右滑動切換輪播圖片。

我們預寫了各種template，保證各個頁面風格統一，容易操作。只需替換相應的文案和圖片就OK。

（請看下面的各個頁面的template的tab，包括首頁，產品分類頁，產品內頁）

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

只需要修改每個版塊對應的圖片和文案就行了。

SEO友好

WordPress的一大優點就是本身已經SEO友好，這里就不展開很多細節來說了。

分享其中一個小細節：

大家如果多看看我們的產品內頁就會發現，我們的url結構是：

http://fabric-king.com/產品大類/具體產品

這是很SEO友好的。

一般url不要超過3層，大于三層會影響SEO權重。小伙伴用WP建站的時候，一般會用portfolio做產品內頁，這樣會導致第二級的url是product或者portfolio，無法用相應的產品大類，導致產品內頁會是第四級，這個細節對SEO不太友好。

服務端安全和速度優化

目前這個網站用的是linode美國服務器+cloudfare cdn。

我們做的一些小細節包括但是不限于：

1.服務器定期自動數據備份（你的網站被黑了，或者數據被錯誤清空的時候就知道這有多重要）

2. 自動更新SSL（HTTPS）證書（因為免費的SSL證書都是三個月，每三個月要續費，而且很容易忘記這個事情 – 一覺醒來你的網站被chrome提示有風險，昨晚損失了幾十條詢盤的感覺你肯定不會喜歡 ……）

3. 服務器對數據庫和靜態資源都做了緩存處理提高響應速度。

4. 合并request數量提高加載速度。

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

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

這部分工作主要是確保網站的安全，穩定，一些細節用戶可能感覺不到，但是對于我們來講，技術端對于營銷和運營是底層的保障和強有力的支持，是十分重要的。

最直觀的就是看我們網址在谷歌開發者工具：

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

（畢竟他會通過幾百條規則對你網站進行很系統全面的評分）

https://www.pingdom.com/ 測試結果

https://gtmetrix.com/ 測試結果。

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

我們不會因為用戶不知道而不去做，馬馬虎虎交付一個網站給你，因為我們對自己也是有著不斷進步，追求極致的要求的。

詢盤表單和EDM的對接

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

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

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

之前他手動發，還是用企業郵發，發到被盯上了，企業域名被黑名單，直接進垃圾郵件箱……

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

所以我們團隊在CF7的基礎上做了一些細節的改進，例如添加了詢盤IP的自動查詢功能：

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

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

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

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

結語

最后網站上線之前，客戶錄了一段視頻表達他對我們團隊用心工作的感謝。



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

如果你不懂，也沒有關系。慢慢來的意義就是讓你脫離這些繁瑣的東西，專注詢盤轉化，團隊管理，客情維護，供應鏈上下游。

因為我們來做肯定比你自己做要專業得多，在你的有生之年是無法鍛煉出如此復合的能力了（懂設計又懂代碼，還要懂人性能做營銷……）因為每一塊我們都是用很專業的人在做的。

社會發展的分工趨勢也是細分化，專業化，不是你我可以阻擋的。

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

和我們聊聊？？

慢慢來官網：

https://www.mmldigi.com/

Add：廣州海珠區革新路新民八街36號，大阪倉1904創意產業園，A3-01室

Tel：020-81534532

湯米蘇

微信號：tommyso

10年外貿B2B數字化營銷實戰老司機

廣米O2O外貿精英社群發起人

慢慢來海外數字化營銷創始人