Menu

這個時代做電商,沒做 App 難道就落伍了嗎?

rwd
responsive
mobile-first

Eric - Posted on 2018/12/17

有個客戶知道我在接案做網站,就不知道從哪找來了,然後跟我說他們公司在幹嘛、想要做電商把生意擴大吧啦吧啦,然後很直接一句:你們做一個 App 多少錢?

我:你為什麼想做 App?

客:因為我們想把生意擴大到網路,讓客人可以直接網路下單。

我:喔喔...你想做 Android 還是 iOS?

客:最好兩個都做,你們做一個多少錢?

我:我沒在做 App 欸!但我知道做一個 App 不少錢,你有多少預算?

客:應該幾萬塊就搞定了吧?

我:嗯...搞不定,你要不要考慮先做個 RWD 網站,之後等網路生意穩定了再考慮 App?

客:RWD 網站是什麼?

我:嗯...有點 magic,只要有手機、有平板、有電腦可以上網就可以用,Android的、iPhone都可以。

客:做一個網站就好?會很貴嗎?

我:客人我看你真是做電商的奇才,我這裡有一份 RWD 網站的解說秘笈,我看你跟我有緣這本就送給你吧!(大誤)

----- 以上問答是發生過好幾次真實案例 -----

先來講 RWD 是什麼,等一下再談如何選擇

Google 在 2015 年時宣布,網站對於行動裝置的友善度會納入搜尋結果的排名依據;也就是有做手機版的網站在行動裝置上的搜尋結果會優於沒有手機版的網站。

根據 StatCounter 於 2016 年的統計顯示,全球行動上網(包含使用手機、平板電腦)的使用量已逼近桌機,有些市場更已超過桌機,行動上網已經成為主流,也因為這股現象,許多網站的內容也轉向「行動優先」。如果網站沒有針對行動裝置做優化,是不是意味著你的曝光度會不足?

古早前的網站都是為桌機來設計,但是手機的畫面較小,使用的方式也是縱向瀏覽居多,因為這樣的限制,傳統網頁設計早已不符合時代需求,在手機螢幕上放大縮小、移來移去不累嗎?誰想在手機上看這種網站啦!

有些網站會另外開發一個手機版的網站,當伺服器偵測到使用者是使用行動裝置的時候,就回應一個手機版的網頁給他,也就是我們說的 AWD(Adaptive Website Design),AWD的特徵就是網址會不一樣,通常會在電腦版的網址前再冠上一個「m」;例如 Facebook 就有 https://m.facebook.com 是專門給給行動裝置瀏覽的,有些還會在網站上顯示手機版、桌機版的連結給使用者切換。

AWD 這種方式就需要開發兩套 HTML 與 CSS 放在伺服器,最明顯的缺點就是工程團隊要同時維護兩份檔案,如果公司的人力、資源都沒這麼充足時,這方式就不是一個好的選擇,因此就有 RWD(Responsive Website Design)的興起。

RWD的原理

Responsive Website Design 有很多中文翻譯,響應式網站、自適應網站、回應式網站,我們這篇文章只會講 RWD 以免混淆。不同於 AWD 寫兩份檔案給不同裝置使用,RWD 只寫一份,然後使用 CSS 去控制,在 CSS 裡我們會標記不同寬度的螢幕尺寸呈現什麼樣的版面排列,例如桌機大螢幕我一行顯示四張圖片,當我使用 iPhone 8 的時候,變為一行顯示一張,以免圖片太小看不清楚。

相較於 AWD,RWD 可支援任何螢幕尺寸的裝置,工程團隊也可專心維護一種版本就好;有相對的優點,當然也有相對的缺點,因為 RWD 都是使用同一份檔案處理所有設定,執行的效率會稍微差一點。但不論如何,RWD 已是當今網頁設計的主流方式。

RWD 或 App,怎麼選?

行動上網會這麼興盛,數以萬計、各式各樣的 App 也有助攻到,尤其是在智慧型手機市場擴大的那段期間,公司如果沒有一套 App 好像很落漆,不管是自己開發、找外包廠商做、買套裝,也不管用得用得到、未來要怎麼用,總之不管啦!想辦法給我弄個 App 出來。然後我們就看到一堆沒在更新維護、低下載量的垃圾......。

在決定 RWD 與 App 之前,先問問你自己幾個問題(其實你也可以拿來問你的客戶):

1. 商業點子需要 App 嗎?

   你的商業點子非得要 App 來執行,例如拍照濾鏡的 App、手遊、掃描 QR Code、GPS...等。

2. 有多少預算?

    如果不是非 App 不可的話,預算少的、草創期的先做 RWD 就好,不然 RWD 開發與上線的速度較快,時間與金錢成本節省很多。

3. 網站內容或服務更新的頻率高嗎?

    每一個 App 不論是第一次推上商店還是未來設計變更、發現 bug 要再修改,每次更新都要經過一段時間等待,尤其是 iOS,還不保證你的你的審核會通過,上架了也可能一個政策改變就讓你下架。如果你的網站更新地很頻繁,RWD 是比較好的選擇,而且工程師改完部署上線之後,使用者可以馬上看到更新的內容。

4. 你要跨平台使用嗎?

    沒預算的話就只能選擇 RWD 了,桌機、平板電腦、手機都能適用,App的話你還要選擇 iOS 或 Andorid。

 

不過如果有富爸爸撐腰的,以上幾個問題基本上沒什麼困擾,就不要想了。