什麼是切版?
說明前端工程師以前,要先說一下什麼是「切版」?古早時代的網頁設計師,除了要做網站設計以外還需要設計flash動畫、切版,「切版」是一種俗稱,「切版」簡單來說就是把網站設計好的「版型圖片轉換成html的過程」,過程就好像是拿美工刀把版型圖片一片一片切割下來,一塊一塊轉成html的網站,所以俗稱「切版」,網站切版可以分成自動產出、手切、套版(例如:Bootstrap)。
〈延伸閱讀:RWD網頁設計並沒有都一樣!〉
什麼是前端工程師?
「前端工程師」也有人叫「前端設計師」,以前沒有「前端工程師」這個職缺,只有網頁設計師,網頁設計師最常用的工具就是Adobe Dreamweaver、Microsoft frontpage,因為Dreamweaver、frontpage都是「即見即所得」的網頁設計工具,只要用軟體設計完成之後就已經自動產生html程式碼,網頁設計師的切版工作只有微調並不需要「從無到有」的切版,但是隨著網頁設計技術不斷變革,網站走向多設備的整合,手機、平板、桌機都要整合成一個網站,就是設計公司常說的RWD、AWD,這時候對於html程式碼的要求就已經不再單純,除了切版轉換html以外,還要求各家瀏覽器的相容性、SEO結構資料、網站效能與速度,於是網頁設計工作就慢慢把「前端切版」獨立出來,於是有了「前端工程師」這個工作職缺,前端工程師不負責網站的視覺設計,但前端設計師是網頁設計師的實現者,好的前端可以幫助網頁設計轉換html過程中維持完整度,網站的動畫與效果都是由前端工程師實現。
〈延伸閱讀:RWD比較好還是AWD?〉
網頁設計的專業分工
現代的網頁設計都是專業分工,專業分工可以讓設計工作變得更全面,設計步驟依照順序為:網頁設計 Design、前端工程師 Front End、後端工程師 Back End、網站行銷 Marketing,前端工程師就是把網頁設計師的「設計稿」變成網頁(HTML)的人,為什麼網頁設計中的前端工程師如此重要呢?以下是我們的看法。
〈延伸閱讀:網頁設計是什麼?設計公司不會告訴你的5個真相〉
好的前端工程師有哪些價值?
網頁設計還原程度高
當網頁設計師根據客戶需求把設計稿完成,這時候網站只是很多的圖稿,前端工程師會根據圖稿進行切版,把這些圖切成HTML,並加入一些網頁效果程式,好的前端工程師對設計稿的還原程度就越高,還原程度高代表事後的修改少,可以大大降低客戶修改的機會,提昇網頁設計專案效率。
〈延伸閱讀:網頁設計與SEO的完美整合〉
〈延伸閱讀:PageSpeed Insights 是什麼? 對SEO有影響?〉
切版好壞是SEO的重要因素
好的SEO架構元素,例如:更精簡的程式碼、速度更快的網站架構、適應更強RWD…等等,都是靠前端工程師去完成,對SEO架構建置有經驗的前端工程師就能把符合架構的程式碼「內化」到網站,網站對各種裝置的適應力會更完善。前端設計師撰寫的js程式碼或是對於各種技術的掌握,可以讓網站效果與SEO架構達到一個平衡的關鍵,好的前端工程師可以同時解決網站效果與SEO的衝突問題,切版效能最好的就是「手切」,手切因為html最精簡,所以在SEO架構測試可以得到最高分,是用Bootstrap套版網站比不上的。
〈延伸閱讀:好的SEO網站架構是什麼?這樣做SEO成功率才會高!〉
可以滿足客戶的需求改變
前端工程是一個非常專業的工作,前端工程必須懂很多html延伸技術,很多公司的網頁設計師卻兼職做了前端切版的工作,用了大量的Bootstrap套版,只會套不會改,遇到客戶的需求大變動就只能回:「這個沒辦法改喔」,其實是「不會改,不是不能改」,這類的網頁設計公司絕對不會說:「因為我們用了省時省力的Bootstrap,因此不會改」,專業的前端工程師絕對可以滿足客戶所有修改需求,遇到RWD與設計邏輯衝突的時候,總是可以提出其他的改善方案。
〈延伸閱讀:如何選擇網頁設計公司? 7個秘訣過濾設計公司〉
結論
早期的網頁設計師要會視覺設計、FLASH動畫、切版,因為行動裝置崛起,RWD自適應式網站盛行,FLASH正式走入歷史,於是產生了專職的「前端工程師」讓網站的相容性達到最高,好的前端工程師具備「設計還原能力」、「程式碼優化」、「滿足客戶需求」這三個重要的能力,好的網頁設計公司一定有專職的前端工程師,而且具備「手刻切版」的程式撰寫能力,絕非只會套Bootstrap而不會需求修改,希望大家在尋找網頁設計公司的時候,可以更專業的比「價值」而不是比「價格」,不然價格再低沒有「SEO架構」,執行SEO也是會事倍功半沒有效率。
〈延伸閱讀:SEO收費行情?該怎麼選擇SEO公司?〉
(本文為達文西數位科技所有,轉載文圖請註明出處)