【網撈全客群的網路行銷】做網頁設計必須認識RWD

蘋果網頁設計

Q & A

問與答

【網撈全客群的網路行銷】做網頁設計必須認識RWD

「我想做一個網頁,但不知道要怎麼選」
 
這是大多數網頁設計台南的準站主有的問題,畢竟要在一張白紙上畫下第一筆總是需要思考很多後續發展。
 
要做一個網頁,有六個重點:
(1) 視覺美觀
(2) 載入流暢度
(3) 簡易操作又好用的功能
(4) 後續修改或調整的空間
(5) SEO破解設定
(6) 使用者體驗
 
上面的每一項都有關聯,要如何在不互相影響,或是可以搭配起來更加分的狀況之下,打造出一個自己喜歡又符合效益的網頁是一大學問,更難的是同時要讓不同族群的使用者都有良好的體驗。越來越多人有使用電腦與手機的習慣,常常都會在兩個裝置間瀏覽同樣的東西,所以現在設計網頁的領域有一個很大的重點:多裝置轉換,意思就是一樣的網頁在不同裝置顯示的畫面會如何變化。
 
如果沒有做這樣的設定,網頁會顯得很「笨」、「很難用」。可以想像一下:用電腦瀏覽網頁的時候很順利,但換到手機就需要不停地縮放、拖曳才能看到想看的內容;換到平板又是另一個要重新習慣的畫面,你還會喜歡常常使用這個網站嗎?還是你會比較喜歡可以一目了然,懂得自己變化的聰明網站?
 
 
 
智慧型手機開始流行之後,許多網站紛紛開始配合使用者習慣,製作出手機版網頁,提升使用手機的群眾的體驗舒適度,但是這個方式有兩個缺點:
 
一、功能不完整
畢竟螢幕大小的差距不小,尺寸較小的條件下,一次能呈現的東西總是會比較少,因此許多手機版網頁會捨棄一些功能或按鍵,讓頁面正常顯示。雖然使用者還是可以透過轉換成電腦版網頁再進行操作,但如果使用者發現另一個手機版網站可以做到一樣的事,不用經過轉換的麻煩,跳槽機率很高。
 
二、資訊不同步
有些手機版和電腦版網頁是分開的「兩個網頁」,想要兩邊看到的是的東西是一樣的,就必須更新兩次。而有時候兩邊的窗格顯示不同,要更動的東西也會有差別,造成每次更新時都需要付出更多時間去處理同一件事情。
 
 
那麼,要如何讓使用者可以在不同裝置都有順暢的使用體驗,又避免上面兩個缺陷呢?
 
答案就是RWD。Responsive Web Design的中文是響應式網頁設計,或者自適應/回應式/對應式網頁設計,能夠讓網頁在瀏覽視窗大小有變化時,自動調整呈現的方式,取代了原先另外做出手機版的設計。
 
講到這邊你可能會想:那我把舊的站拿去RWD化就可以啦!
 
這是個好方法,但不一定做的到。網頁設計牽扯到很多層面的問題,很多工程領域的設定在創建往站的一開始就決定了,以前的網站沒有轉換裝置的需求,所以大多數沒有留可以做RWD的空間,想要做RWD只能重新做一個站。(不過如果是這麼舊的網站,功能和呈現方式可能也不太符合現在的網路市場)
 
 
RWD有五種模式:欄內容下排(Column Drop)、主體流動(Mostly Fluid)、版面配置位移(Layout Shifter)、畫布外空間利用(Off Canvas)、微小調整(Tiny Tweaks)。
 
一、欄內容下排(Column Drop)
保持版塊充滿整個畫面,當螢幕小至無法將兩個版塊同時呈現時,就以垂直堆疊的方式呈現。
 
二、主體流動(Mostly Fluid)
在比較寬的螢幕上會呈現邊界留白的畫面,當螢幕變小,結構改變,讓原本在同一畫面看到的東西變成垂直顯示。
 
三、版面配置位移(Layout Shifter)
這是RWD最靈活的模式。它在螢幕變大或變小時可以有不同的移動方法,也因為高度的靈活性會牽涉到大量的工程工作,維護起來會更為複雜。
 
四、畫布外空間利用(Off Canvas)
在小螢幕中,這個模式會將部分內容往畫面外推,通常是比較少用的結構,使用者只須要點擊或是捲動螢幕就可以叫出;在足夠大的畫面中,結構會完整並排顯示。
 
五、微小調整(Tiny Tweaks)
配合螢幕自動等比放大或縮小,比較適合用在結構簡單的頁面。
 
結構的東西需要在網站架設的階段就先設定好,如果你對於網頁在不同螢幕上呈現的方式有任何想法,一定要在與網頁設計公司溝通時就提出。而在檢視網站成品時,記得除了用電腦以外,也要用手機看過,確保你的網站有真正照你的樣子呈現出來。
 
使用電腦時想知道這個網頁是不是RWD,只要點擊網頁上方的「還原(縮小)」鈕,用游標按住視窗的邊邊,拖拉放大、縮小,看看網頁內容是否有任何改變。
 
做RWD可以大大提升使用者滿意度,加強網路行銷的成效,對於SEO也有加分效果,是現在要做網站必備的形式之一。
 
 
延伸閱讀: