天矽科技 客製化網頁設計

當我們有想要查詢的資訊時，已經不再是一定要用電腦才能查的時代，在現代只要拿起智慧型手機就可以上網，想要知道的問題馬上可以在第一時間被解決！這時，網頁的版面要以什麼方式呈現就非常重要！

為了不讓早期常常「版面尺寸跑掉難以閱讀」的事情發生，我該設計手機版、電腦版還是RWD響應式設計的版面才好呢？

手機版跟電腦版的網頁差在哪？

你有沒有看過用手機瀏覽某些公司、購物網站時，顯示的介面跟在電腦版的樣式一樣？
這樣的畫面字面過小，需要放大才能看到內容，讓使用者難以閱讀、操作！而經過設計後的手機版介面，則像是APP顯示的畫面一樣，介面清楚有重點且直觀的傳達，視覺的直覺性讓人在操作上較容易掌握訊息的傳達。

 圖1

 圖2

以MOMO購物網為例，圖1為為手機顯示之「手機版」操作頁面、圖2手機顯示之「電腦版」操作頁面，而其網址也可看出其中差異。

MOMO購物網電腦版：https://www.momoshop.com.tw/
MOMO購物網手機版：https://m.momoshop.com.tw/

手機版跟RWD響應式設計網頁差別

一般手機版網頁與電腦版網頁是需要分開製作的，如果用原先的舊網頁來製作手機版而不是重新製作，後面就會變成電腦版跟手機版網頁兩個不同的東西，要更新網站內容也會非常麻煩，電腦跟手機要各別更新，浪費人力。

所以建議，除非有特殊原因，基本九成以上的網站使用「RWD響應式設計網頁」就可以了。
 

什麼是RWD網頁？

RWD就是Responsive Web Design，是一種網頁設計的技術，又稱響應式設計、回應式設計、自適應網頁設計或者對應式網頁設計。這種設計可以使網站在不同的裝置上瀏覽時，對應不同解析度都有適合的呈現方式，減少使用者進行縮放、平移和捲動等操作行為。

對於網站設計師和前端工程師來說，有別於過去需要針對各種裝置進行不同的設計，使用此種設計方式將更易於維護網頁。

用一個最有名也最簡單的方式來說明RWD的概念，就是「內容像水」，倒到哪個裝置都可以自由縮放的意思。
 

參考資料：維基百科

延伸閱讀：什麼是RWD響應式網頁設計？

網頁設計怎麼做

早期網站設計方式

1. 依據消費者使用裝置的不同解析度、版面尺寸進行設計製作
2. 伺服器進行判斷
3. 判讀後，向消費者的瀏覽畫面顯示手機版、平板、電腦版網站

此方式製作成本較高、不利搜尋排名(SEO)以及在維護上也需要花費較多人力及預算，並且會分別擁有三種不同的網址及三種不同的網站內容！

RWD響應式網頁設計

1. 依據消費者使用裝置調整顯示畫面
2. Html語碼判斷
3. RWD響應式網頁，自動縮放成最適合閱讀的尺寸。

此方式製作成本較低、利於搜尋排名(SEO)、維護容易且方便同步更新，網站網址也是共用一個網址、一個網站內容。

*註：SEO(Search Engine Optimization)= 搜尋引擎優化

延伸閱讀：
RWD 響應式網頁設計是什麼！？
為什麼需要RWD響應式網頁設計的技術？

天矽科技可以依據您想要的網頁進行客製化設計，可以幫您製作手機版、電腦版或是RWD響應式網頁，以管理者角度開發、以消費者角度設計操作介面，絕對可以做出讓您滿意、放心的網頁設計！

聯絡我們：https://www.tsg.com.tw/contact.php