iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 17
8
自我挑戰組

學什麼就寫什麼,知道什麼就分享什麼系列 第 17

與工程師的協作之路-RWD才不是你想的那樣!

前言

在很多年前(不要問是幾年也不要問年紀!)初次聽到RWD這個詞的時候
就覺得實在是很新很潮!
正好主管說想蓋個部落格來衝衝SEO
我就立馬毛遂自薦~說我想嘗試看看!
也因此踏入研究RWD的這條路
這幾年大概有點心得,今天就來寫幾個對RWD的迷思


RWD?

如果你上wiki查詢~會看到這樣的說明!

響應式網頁設計(英語:Responsive web design,通常縮寫為RWD),或稱自適應網頁設計、回應式網頁設計、對應式網頁設計。
是一種網頁設計的技術做法,該設計可使網站在不同的裝置(從桌面電腦顯示器到行動電話或其他行動產品裝置)上瀏覽時對應不同解析度皆有適合的呈現,減少使用者進行縮放、平移和捲動等操作行為。

什麼是斷點?

RWD是用@media作為控制,一個斷點會有兩種版本。例如:768px為斷點,那麼就會需要設計頁面在768px以上和767px以下。

事實上各種裝置尺寸都不同,要切的話也可以切很細...完全看你的TA和你的資源來決定要分得多細。
RWD斷點
(圖片取自ibm.com,若有侵權請告知)


迷思

網站都必須是RWD

我在網路上看見有人有類似的觀點...認為身為現代網站就必須是RWD
其實我想說:事情沒有這麼絕對的!/images/emoticon/emoticon15.gif

我在「給正在猶豫要不要做RWD的你」一文中其實有提過這個點。

RWD有它一定的易維護性,前提是你的網站是走什麼樣的導向,想想facebook為什麼不做成RWD?當你的網站超複雜、超機能,有很多零零碎碎的大小功能,真心建議你拆成web/mobile兩個版!尤其是你的網站功能如果是極為盡善盡美型或是屬於複雜資料型,非三言兩語就能結束的網站,千萬不要「因為潮」(大家都在講啊~)就執著要做,冷靜點!!

一年前、一年後,我的觀點一樣沒有變!
不是所有的網站都一定要RWD才叫做正常!

就像很多人認為table已經不符合時代潮流
但管理訂單的後台系統呢?或是帳務系統?我想還是會需要大量的table來支持他的資料一目了然性
當然你可以用更多的圖像視覺化你的報表,例如圓餅圖、線條圖、柱狀圖、雷達圖...
但視覺報表只是一個概觀呈現的方式,目的只是讓你能在最短時間掌握狀況,相信我...要做細部管理,表格還是最易於使用者閱讀的~不然Excel也不會活這麼久了~(喂)

若你是擔心不利於SEO,那也是可以做提交的!參考這裡

資料量極大時我真的很不推薦直接就RWD!同樣的,我也並不是說我的觀點就是唯一正解,你當然還是可以依照需求去做,但資訊量超多又不肯放棄任何一條訊息,想兼顧RWD,耗時絕對會比較長這是一定的,除非你並不在意你的網頁變形後其實很難用。/images/emoticon/emoticon10.gif

RWD就是便宜好維護

在網路上看過一個觀點:

以往為了製作手機版網頁,必須另外開發一個手機專用版本,加上判讀程式來依照使用者裝置以導向,開發費用較貴。

確實!你真的可以透過RWD讓你的網站在各種裝置上看起來更加美觀、更易於使用,比起舊版網頁直接變超小,要用手指放大外加四方挪移...(用到氣pupu!)

但那一樣限於資料量較少的網站。

需求只是改個字、換個顏色、換張背景圖片,維護也當然沒問題!

那,如果突然來個結構改變呢
也許改的時候還要要求「順便加一些東西」(買肉要送蔥的概念)
這下子,工程師光除錯就會花兩倍三倍以上時間

PC版沒爆,mob壞了;mob版修好了,PC版看起來歪歪的...
這還只是一個斷點兩種裝置,如果更多斷點呢?
這樣真的是「好維護」嗎?

你只是在時間內要求必須完成,至於工程師的加班費就當看不見沒這回事吧?/images/emoticon/emoticon09.gif

就算是外包給設計公司或網頁設計接案者,也是會視你的頁面做報價的!
如果資料量很多,一般也會建議分開做或是可能被報價兩倍以上,不一定會比較省...

RWD是趨勢,但趨勢不代表通盤絕對性。pantone每季也都會出流行趨勢,但所有東西都適合這些顏色嗎??

RWD開發就是快

額...這是誰跟你說的?

易於維護 這點,規劃得當的話確實有可能,但資料越多,你知道RWD其實幾乎等於要開發兩種版嗎?
確實流動的部分有很多CSS是可以共用的沒錯,或是只要改一兩個值就能達到需求的效果

但企劃時要想流動方式與頁面訊息量,就會需要兩個版本了,如果你的企劃又正好沒有出這樣的版本,那就會變成設計自己想;如果設計沒有想,就會變成切版者自己想...
切版者沒有想...怎麼可能啊~就是最後一棒了啊!~別想逃走!/images/emoticon/emoticon26.gif/images/emoticon/emoticon26.gif

「兩種版本的規劃」這件事情,是必須得做的,就算你的流動已經非常簡單,溝通的時候仍須提供給切版者。
只是,越前面越易做(因為尚未進入開發階段,都還有討論空間),越後面就相對的越難做(進入程式開發,改起來的工絕對比修正Axure大很多!)

無論是誰來想這件事情,都會是開發成本。
這成本不得不花,無論是做成RWD或是分開做都必須想兩種版面。資料量小時,建議可以用RWD,資料量爆量或是可能會大量使用表格(例如後台管理、銀行系統)時,建議就分開吧!這樣版面也比較不會相互受限!


其實,我也不是硬要說RWD就一定好或不好!
可以RWD有時候對切版人員來說也是很方便~我可以很快的改好你想要的顏色,不用開不同檔案改兩次以上

但我實在遇過太大的專案拼命想導入RWD,企劃又只給超複雜PC版面
有多大?我們有前台、雙身份管理中心、如Facebook般多種零碎小功能,也包含了通訊及傳送檔案的功能,頁面訊息多到需要用個"?"等待游標hover時才顯示說明,手機沒有hover,就必須想其他方法...
真是好有挑戰性啊嗚嗚嗚/images/emoticon/emoticon02.gif

面對這樣的平台產品,我是真心不推RWD,但有活動頁、形象行銷包裝等頁面,我還是會推薦RWD的呀!!

沒有最好,只有適不適合。 我想這點在任何領域都是無庸置疑的吧!


上一篇
與工程師的協作之路-Ant Design
下一篇
與工程師的協作之路-溝通篇(那些難以啟齒的事)
系列文
學什麼就寫什麼,知道什麼就分享什麼31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
2
Darwin Watterson
iT邦好手 1 級 ‧ 2018-10-31 10:11:05

Boss:『由於 iOS 跟 Android 無法整合,但又要迎合手機端跟PC端的瀏覽需求,加上公司養不起iOS、Android、Web三個開發團隊,所以各位開發Web的同仁,我們的網站就採用RWD!』
Programmer & Designer: /images/emoticon/emoticon04.gif
(一般公司採用RWD的正解)

tacodrem iT邦新手 5 級 ‧ 2018-10-31 10:49:21 檢舉

那個什麼RWD不是很方便嗎~?
你們應該改一改就可以出三個版本了吧~?

Wen Chien iT邦新手 4 級 ‧ 2018-10-31 13:04:56 檢舉

看來大家都深受其害啊QAQ...

1
King Tzeng
iT邦新手 3 級 ‧ 2018-10-31 10:20:25

寫的太好了!講到精隨/images/emoticon/emoticon02.gif

Wen Chien iT邦新手 4 級 ‧ 2018-10-31 13:05:11 檢舉

/images/emoticon/emoticon47.gif

0
PeterLiao
iT邦新手 4 級 ‧ 2018-10-31 20:18:22

可惜該看到的人都沒看到/images/emoticon/emoticon02.gif

Wen Chien iT邦新手 4 級 ‧ 2018-11-01 14:25:28 檢舉

我印成大字報在網路上販售會不會熱賣/images/emoticon/emoticon07.gif
(想太多了)

我要留言

立即登入留言