今天想要跟大家分享我們在進行官網小改版的一些技術以及設計心得。 設計版面上看起來只有小小的改變，但是核心裡面卻大大改變。
設計改良
自上次改版後其實已經過了將近一年，陸陸續續有人針對Tenten官網給予 Feedback，例如有時候速度很慢，或是我們自己從 GA 發現有人根本沒有點進去其他內頁的問題。
因此我們優化了頁面上部分的設計，例如首頁上的部分區塊更改成其他更有意義的內容。內頁的部分也新增了小導覽列，增加使用者點進其他頁面的方便性。讓使用者透過每一個頁面中的每一個區塊更了解Tenten的未來目標、專業能力、業務內容、工作流程和團隊文化等，畢竟這是多數想深入了解Tenten的人的第一個管道，我們相信本次的改版在內容豐富度與文案流暢度上有相當大的改善，設計風格上也更具一致性。
拍新的團體照
目前是Tenten團隊有史以來擁有最多成員的一次，雖然過去我們曾請了專業攝影團隊 Dcfilms.tv 製作有趣、互動性的特殊效果照片，但今年我們想要更進一步，朝專業又不失Tenten風格的路線邁進。因此，當然要派出我們過去常幫奢華精品做藝術指導的資深設計師 – Joey Wang 擔任這次拍攝的藝術指導，決定了目前團體頁面的側拍角度，以及個人頁面的自然風格。更值得一提的是，這次全部的攝影工作都是由Tenten的攝影組：留日／德回來的理工高材生 Engineer – Kuan，以及兼具設計師美感與前端工程師理性身分的 Frontend developer – Tin 合作執行拍攝。而所有攝影的進行都在Tenten自家攝影棚拍攝，不只是可以想拍幾張就拍幾張、想拍多久就拍多久，而是連光線和角度我們都深思熟慮，因此才能有如此滿意的成果。
## 後台核心更新
去年我們使用的是 Mustache 當作 Template 引擎 + NodeJS 當後端的方式。 今年因使用者越來越多的關係，考慮到維護網站以及 CMS 的方便性，所以全面使用 WordPress 當後台。
這時身為前端／設計／一般使用者的我就會一直想，要怎麼兼顧三個角色的使用者，其間，我也去玩過 Django CMS, Modx, GravCMS, October, Joomla, Drupal 等，但覺得都沒有達到我的需求。
主要目的應該可以分為：
- 可以將客制欄位挖得非常簡單，上資料非常人性化，不會讓使用者迷路
- 使用者要可以方便維護網站資料，例如上文案，換圖片，新增案例等
- 前端要方便修改程式，可以使用版本管理控制
最後因為 WordPress 的種種特點所以決定使用他。
WordPress 的開發百百種，但要做的好實在很難，安全性跟插件維護更是問題之一，相信常做的人就知道，Wordpress 常常被駭已經不是普通一兩天的事情發生了，用他真的有比較好嗎？我也不知道（苦笑）～ 哈哈！但是我認為前台操作的話，只要欄位設計的好，其實非常好用。說到這個，買 theme 後的 WordPress 後台也百百種，有好有壞，但據說都是遇到難操作的！
發現 Roots!
在做了非常多功課之後，我決定了使用 roots.io 這家的流程，其實從以前來說這個名詞對我來說已經不陌生了，只是一直沒有機會去研究他，因為當時也對於主機非常不瞭解。因為要用這個也必須碰到 Ansible，是我一直沒研究的工具，Ansible 的語言沒記錯的話是用 Python，當然，我怎麼會用呢？但結論是，就算你不會 Python 你還是可以用 Trellis，因為真的很簡單。
roots.io 總共包了三種 WordPress 開發上需要的流程：
### 前端
我們並沒有使用 roots.io 裡面的 Sage，反而，我們採用 WordPress 裡面有 Timber 的這個 Plugin，他可以讓你的 Theme 直接用 Twig 來開發，欄位則使用 ACF 負責，開發心得嘛～ 其實製作起來還滿順的，跟之前用過的模版引擎其實沒太大的分別，當然各有所長，但有些東西達到我們的需求，解決我們的問題，其實就夠了！
資料架構上則是使用 Bedrock，這個對我來說還滿新的，跟一般的 WordPress 架構有稍微不同，但也因為這樣，他的好處可以讓我們使用 composer 統一管理插件、Themes，安全性上也有做些優化。 詳細一點的可以參考這個。
主機
負責主機這塊的是一個叫 Trellis，其中除了使用 Vagrant 之外，還結合 Ansible 自動化的方式部屬。
其間，嘗試了非常多 Trial & Error 才達到最後的上線結果，要排除的問題很多，例如 SSL，快取等，另一方面，不得不吐槽一下，我們的主機還不是普通的難搞，原因是因為我們內部也還有另一個 Reverse Proxy 來幫我們處理主機上的分配，所以還滿常常碰壁的。
結論的話，不得不誇獎一下 Trellis 還真的滿酷的，結合了許多 Ansible 上的 Playbook，讓你敲敲幾個指令就可以同時發佈兩三台主機，解省一個一個開主機的麻煩。
至於 Ansible 這方面無論是否用 Trellis，我們內部其實已經慢慢導入了，讓以後管理內部主機更便利，也更安全吧。
結論
當然，若真的要安全性的話，絕對並不是表面上功夫的事情，要投入的工作非常多，我們目前也是慢慢學習中。
WordPress 真的有比較快嗎？好的調校自然就快，不好的調校自然就慢，可以參考更多使用 WordPress 的大網站，以目前來說，是確實比我們之前的快很多。
真心覺得要優化的地方還滿多的，例如掛上 Cloudfront 優化靜態檔案上的速度外，SEO 也有待加強，還有因為字型，要解決 FOUT 的 loading，但是這些，就慢慢補上吧！
值得一提的是，在改版之後，覺得不只是 server 上的處理方式進步了，也採用了些例如 critical css 的方式解決 below-the-fold 跟 above-the-fold 的 CSS Loading 問題，這段時間，真的學到滿多的。
設計上也花了滿多心思的，希望大家會喜歡 ? ➔ 前往瀏覽: https://tenten.co/tw/