天矽科技 line

天矽部落格最新的網路趨勢資訊

網站設計趨勢

【網站製作】手機版、電腦版還是RWD響應式網頁設計?—天矽科技-客製化網頁設計

 

行動裝置已經是我們日常生活不可或缺的一部份,當我們要查資料時,不再是一定要開啟電腦查詢,更多時候我們會直接拿起手機進行搜尋。這時,網頁版面的呈現與設定就非常重要,當然早期也常常發生尺寸版面跑掉的事…

手機版網頁跟電腦版網頁的差異

在早期行動裝置剛普遍時,常常會發生在手機瀏覽的頁面,跟在電腦版看到的一樣,字體小、難操作、需放大才能看到文字內容,因為電腦版與手機版的比例不同,以MOMO購物網為例:

購物網 電腦版 圖1

購物網 手機版圖2

圖1為手機顯示之「電腦版」操作頁面/ 圖2為手機顯示之「手機版」操作頁面

視覺的直覺性與訊息掌握度,從兩張對比圖即可看出,網頁版畫面在手機上呈現會讓人一時之間不知道怎麼操作,因此在手機的顯示介面更需要清楚的重點、直觀的傳達。

電腦版:https://www.momoshop.com.tw/
手機版:https://m.momoshop.com.tw/

 

手機版網頁跟RWD網頁的差別

一般手機版網頁與電腦版網頁都是需要分別製作,若是用原有的舊網頁來製作手機版,不是重新製作,就會變成兩個不同的東西,如果要更新網站內容就必須分別更新(電腦版與手機版各一次),如果又分別委託給不同的設計公司製作就會更麻煩。

除非網站有特殊原因,如對於電腦及手機版有針對不同的客群做設計、多分層的大型資料網站或者資訊量龐大…等網站,如MOMO購物網、Yahoo奇摩…等,其實基本90%以上的網站,都建議使用RWD響應式設計網頁就可以了。

 

什麼是RWD網頁?

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

以最簡單的方式來說明RWD的概念就是:「內容像水」

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

行動裝置佔據網路流量的一半以上,在2015/4/21時,Google宣布行動裝置的時代到來,如果搜尋行為是來自行動裝置,將會提高對行動裝置友善的網站排名。
 

參考資料:維基百科

延伸閱讀:什麼是RWD響應式網頁設計?

 

網頁設計方式

早期網站設計方式

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

此方式製作成本較高、不利搜尋排名(SEO)以及在維護上也需要花費較多人力及預算,並且會分別擁有三種不同的網址及三種不同的網站內容!如上述所提到的MOMO購物網網址,可看出其差別。

 

RWD響應式網頁設計

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

此方式製作成本較低、利於搜尋排名(SEO)、維護容易且方便同步更新,網站網址也是共用一個網址、一個網站內容,也因為只有一個網址,所以網站排名會比較容易提升。

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

延伸閱讀:
RWD 響應式網頁設計是什麼!?
為什麼需要RWD響應式網頁設計的技術?

 

天矽科技提供RWD響應式網頁設計,無時無刻更新技術,且使用HTML、CSS3、RWD等最新技術撰寫網站,提供以管理者角度開發,好使用、好操作的客製化後台功能,並強調SEO自然排序,使用符合W3C標準撰寫網頁,有利於網站排名提升!

更多想了解、想客製化的網站,請來天矽科技,我們一起討論、一起做出最好的網頁設計!

回上一頁
信箱
客服
Line@