跳到主要內容區塊

政府網站營運交流平台-中文

網路趨勢與社群應用分享

常見的RWD網站製作失誤

自從 Google 在 2015 年宣布將調整手機 Google 中行動版網站的搜尋結果排名,各大網頁設計公司的業務人員就開始以此當噱頭、勸業主改版,因為這又是一個收費的大好機會。腳步比較遲緩的企業,也在老闆發現自己的網站用手機打不開,而競爭對手的網站在手機上很好用,而開始提出需求將自家的網站做行動版的優化。

讓資料可以優美舒服的顯示在行動裝置顯示解決方案有很多,響應式網頁設計(RWD)是其中之一,RWD 的特點是用一些 JS 與 CSS 的技術,讓同一個頁面可以好好的顯示在各種尺寸的行動裝置跟電腦,網站也不會有兩個網址,後端程式只要寫一次,其他都是視覺設計人員與網頁前端設計的事情。本文介紹一些網頁設計人員在製作 RWD 網站時常犯的失誤。

 

1.把自己的裝置解析度當成大家的裝置解析度

想看網頁實際上在小螢幕上看起來如何,於是就用自己的手機來預覽與修改,把網頁上的輸入框、容器或文字段落,在自己的手機上調整顯示得剛剛好,覺得很完美,但是用其他手機看卻跑版、跳行、內容突出螢幕外、字句斷得可怕,為什麼呢?

事實上手機螢幕的解析度一直在改變,iOS 陣營的螢幕解析度是越來越大,Android 陣營的則是廠商客製自由度高,造成解析度破碎化,從 4 吋的手機到 7 吋的通話平板、11吋的雙系統平板,12.9 吋的 iPad Pro 還有 4:3、16:10、16:9 等各種螢幕比例。

假設以某支解析度 480*853 的 Samsung 手機為基準設計手機版畫面,把大部分的東西都設定最小寬度或是固定寬度 400px 以上,那在解析度 320*568 的 iPhone 5s 上看起來可是很慘烈的。

所以記住原則,多用百分比寬度,寬度不要設定太多固定數值。畫設計稿時也不要把網頁元件排得太寬,如下圖範例。
有時候可用其他的設計方式或互動功能來取代按鈕,或是太多的提示文字
有時候可用其他的設計方式或互動功能,來取代按鈕,或是太多太長的提示文字。

要看網頁在行動裝置上長怎樣,可以利用瀏覽器內建的一些模擬工具,最容易安裝與使用的應該算是 Chrome Developer Tools 裡面的 Device Mode 。也有許多線上模擬工具,如 ScreenflyMobile phone emulator (by COWEMO),但這些模擬器都相當不靠譜,在字體顯示、不支援的元件、翻轉螢幕、輸入文字、觸控行為、跟實際用手機瀏覽的感覺還是很有差異。

如果只有 Windows 電腦,身邊沒有半台 iOS 裝置,卻又要看 iOS 的網頁畫面,可以用 VMWare 之類的模擬器跑 Mac OS,然後用 XCode 裡面的 iOS simulator。。

我的話通常會使用瀏覽器的 device mode 工具,縮放網頁的寬度與高度,看看會不會在任一寬度產生重大操作問題。然後在 iOS 跟 Android 系統實機各走一遍流程。

 

2.orientation:landscape 不是螢幕方向打橫

製作 RWD 網站最常用的技巧之一就是 CSS 媒體查詢指令(media query),讓符合條件的媒體裝置時執行對應的 CSS,常用的如寬度大於多少(min-width)、高度小於多少(max-height)…等等。

會遇到一個屬性叫 orientation:portrait 與 orientation:landscape,有些中文的網路教學會簡易的說它是「螢幕方向」垂直或水平,但如果查閱 W3C 或 MDN 中的屬性定義,它並不是真的表示螢幕方向,而是「螢幕的高比寬還大」或「螢幕的高比寬還小」。

嗯? 那不就是螢幕打直跟水平嗎? 其實在某些情況,會造成手機是直的,卻是螢幕的高比寬還小,你想到了嗎?

點擊輸入框,彈出鍵盤時,會造成手機是直的,卻觸發 orientation:landscape

但會發生使用者反應「兩行字疊在一起啦」「字顯示到一半就被吃掉啦」「字跑出去啦」,自己試了又沒有,到底為什麼呢? 有些深諳業務與溝通技巧的窗口會說這是「手機壞了」「個案」,但真的是這樣嗎?

如果有平面出版相關經驗的人,可能都會聽過書本一頁幾行字,雜誌一頁幾行字的說法,段落開頭還要空兩格。但是在資訊時代,卻比較少聽過這種規則,頂多只有文字或按鈕不要小於多少尺寸,哪有人在講電子書、網頁、手機一行要有幾個字? 因為資訊產品的螢幕尺寸太多,而且通常都可以自訂顯示文字大小、自訂顯示背景色與文字顏色,或設定系統配色為高對比。

問題就出在「自訂顯示文字大小」這回事上面。

修改顯示設定畫面
如上圖的華碩瀏覽器和Chrome for Android,都有「字型縮放」跟「最小字型大小」的設定,前者是將整個網頁不論大小的文字,通通強制放大,後者是將小於多少點數的字強制放大,若使用者設定這些選項之後,就會更多機會造成所謂的「兩行字疊在一起啦」「字顯示到一半被吃掉啦」之類的現象。

那如何避免因為調整瀏覽器設定,而造成字疊在一起的情況呢?
– 行距不要設固定px
– 區塊不要設固定高度
– 不要用太多 overflow:hidden

那要如何避免文字因為瀏覽器的設定而被強制放大呢? 基本上只有一招最穩定有效、但最不是方法的方法,就是把字通通做成圖片,就沒有什麼因為調整「最小字型大小」而導致跑版的情況。

然後有時候會碰到較精緻的需求「這邊的文字斷行落了一個字」「不能設定一行固定多少字嗎?」,我們剛剛才講過行動裝置解析度破碎化,而且使用者可以自己調整瀏覽器字型顯示設定,所以如果編輯人員將文章強制斷行,或是一行固定多少字,會發生以下情況...

段落強制設定後的問題

以一則新聞網的文章為例,也許在某種螢幕解析度時斷行斷得剛剛好,但是在手機上閱讀起來卻亂七八糟。

在手機顯示上斷行亂七八糟的樣子

以用手機瀏覽一個電子刊物網站為例,因為傳統的雜誌排版不可能做到自適應技術,所以在手機上顯示起來,也是一行固定多少字,所以使用者在手機上看這文章必須要一直縮放、平移,體驗非常的差。

當然因為刊物是花錢訂閱的,而且只有在這平台才有得看,所以使用者還是會摸摸鼻子乖乖找大螢幕來看。如果內容沒有獨一無二,操作體驗也很差,真的不知道要用什麼東西來留住使用者吶。

 

4.電腦網頁用的輔助輸入元件,不一定在行動裝置上也很好用

現代的網頁常常都有一些輔助輸入的網頁元件,例如小日曆、自動完成功能(typehead)、離開輸入框焦點時自動驗證、彈出客製化對話視窗…之類的功能。如果

未對這些輔助輸入元件在行動裝置版面做處理,將會導致表單難以輸入,差一點的頂多是畫面顯示多餘的功能,或是伺服器請求的浪費,但要是發生阻擋主要畫面,或是重要的警示訊息顯示在畫面外,讓使用者無法完成造成操作流程,這些都是災難性的。

自動完成功能的在手機瀏覽環境下較難點選
自動完成功能的在手機瀏覽環境下較難點選

一些日曆元件在手機瀏覽環境下較難點擊,可以換成 html5 input type
一些日曆元件在手機瀏覽環境下較難點擊,可以換成 html5 input date type (如圖右),使用者用系統內建的日曆元件來完成日期的輸入。

但使用系統 UI 元件的缺點,就是每個系統的顯示方式都不一樣,造成使用者體驗不一致(如下圖範例),甚至有些合約驗收標準是畫面要顯示得跟合約一樣,這都容易造成麻煩。
由上至下: Safari/ android browser/ chrome on android
由上至下: Safari/ android browser/ chrome on android

說到輸入,html5 增加了一些 input type ,使用正確的 type,可以使用者在網頁上讓輸入電話、email 之類的欄位時,跳出對應的鍵盤,而不是跳出完整的字母鍵盤。如使用 type=”tel”,會跳出數字鍵盤,使用 type=”email”,會跳出帶有.com 跟 @ 的字母鍵盤。

另外有一些手機輸入法太過聰明,常常會自動校正、自動首字轉大寫、自動加空格,在某些輸入情境下相當痛苦(如輸入帳號或驗證碼時),可以在 input 加入 autocapitalize=”off” 與 autocorrect=”off”,關閉自動大寫與自動校正。

雖然資訊系統的終極目標是指紋掃一下、條碼掃一下,甚至語音輸入,就完成所有步驟。但是在那一天到來之前,還有很大一段路要走。在現階段,只能想辦法盡量減少痛苦的輸入流程。

 

5.行動裝置也有瀏覽器相容性問題

經驗豐富的網頁設計師,通常都熟知所謂 CSS hack,conditional comment 之類的用法,因為在電腦的瀏覽環境,明明是同一段符合W3C的標準語法,卻可能在 IE6、IE7、IE8、IE8 相容性模式、Vista 與 Win7 的 IE8、IE9、IE9 相容性模式、IE10、IE10 相容性模式、Win7 的IE10,IE11、IE11相容性模式、Modern IE、Win7 的 IE11,Win8 的 IE11,Win8.1 的 IE11,Firefox,Chrome,Safari in Mac OS,Opera,360 瀏覽器……上面產生不同的顯示情況。

後來手機與平板的出現終於讓網頁界的大環境又再次推進,要是又出現了新東西,不能再以「反正 IE 又不支援」「那 IE 的使用者怎麼辦?」當藉口,因為行動裝置的瀏覽器基本上都支援 CSS3 等新的網頁語法,而且行動裝置的的淘汰週期比電腦更快。近一兩年進入網頁設計職場的新人,反而有些知道如何用 css 畫台灣國旗,卻不知道\0\9*_ 之類的 IE css hack。

講相容性問題之前我們先來定義一下所謂行動裝置的瀏覽器,大致上有六大類:

  1. 各大裝置的主流瀏覽器,如 iOS Safari ,Google Chrome on Android,使用者也有乖乖更新到最新版(作夢)。

  2. InApp browser (UI webview),就是從 Line / Wechat / FB app 點網頁,會在 app 裡面開一個像網頁瀏覽器,但許多細節又跟一般網頁瀏覽器不一樣。這種瀏覽器會隨使用者是否有更新 APP 而有不同相容性問題,或是在一些 Javascript 事件或是網頁元件(如 select )有一些特別的操作行為。

  3. 是主流瀏覽器,但是作業系統很舊,所以卡著沒法更新,例如可能 iOS 6.x, 7.x 的 Safari,Android 4.x 的 Chrome,既然是N 年前的軟體,當然不太可能支援新的網頁語法。

  4. 非主流裝置,如 Windows phone、黑莓機,Firefox OS 、智慧電視之類,可能一般手機看起來正常的網頁,會在這時候有狀況,有遇到再想辦法修。

  5. 廠商客製的瀏覽器,例如有人為了在手機上看 Flash ,可能會裝海豚瀏覽器,另外各家 Android 手機廠都會在裝置內建自家的瀏覽器,例如華碩有華碩瀏覽器,三星的手機也有三星瀏覽器,或是一些匪區的瀏覽器(UC瀏覽器、百度瀏覽器之類的)。

    這種瀏覽器的特色是使用一些主流瀏覽器的內核引擎,但是版本沒有用到最新的(或是使用者也沒到 app 市集去更新),然後一些操作方式有大幅的客製化,都可能讓網頁發生超乎預期的顯示狀況。

但是行動裝置一樣有瀏覽器相容性問題,例如 android 4.x 不支援 calc,android 4.3 以下不支援 Viewport units,iOS 則是使用 Viewport units 與 html body overflow:hidden 時會有怪情況,也不支援 background-attachment: fixed 與 window.open(),所以如果看到合約上有限制瀏覽器版本、作業系統版本什麼的,也別訝異,不然會做到死。

還有一種不是瀏覽器相容性問題,而是使用者端的裝置有特殊情況:

  • 安裝 Blahker 之類的擋廣告 app
  • 或是使用者有改字型大小、字型縮放比例,也會影響到網頁區塊的顯示方式。
  • 越獄或 root 然後改系統字型,
  • 或是裝藍光濾波器,或是螢幕有調整到特殊設定,顏色看起來跟一般的手機不一樣
  • 手機中毒、儲存空間已滿,造成該顯示的東西顯示不出來

這些都可能造成明明同一個網頁,大家看都好好的,「剛好」有人不能看的情況…

這些只能靠經驗,或是使用任何先進的語法前,先去查查此語法在哪些瀏覽器會有問題。網頁版面越複雜、用的語法越新、要求的精緻度或互動性越高,就可能踩到越多的雷。

select下拉選單
除了瀏覽器相容性,還有如上圖的瀏覽器預設樣式問題。比如說同樣有一個 select 下拉選單,設定寬 80px,在自己的 Android 手機上看起來好好的,就收工了,不過實際上 iOS Safari 的 select 箭頭按鈕非常大,如果下拉選單字太多,是會被切掉看不到的,所以寬度要再加大一點。

還有 input button,iOS 按鈕的圓角看起來會比 Android 來得圓,必須再額外設定 border-radius。此兩例可以用 CSS reset,讓預設樣式通通消失,或是設定 -webkit-appearance:none 相關屬性,讓這些表單元件的預設樣式通通消失。

 

6.使用太多「滑鼠移入」事件

以前的網頁很常見所謂的「滑鼠移入後會彈出子選單、移到某項目又跳出第三層選單」或是「點一下是進到內頁,滑鼠移過去是顯示下一層」的選單設計模式,但是在行動裝置上的操作方式只有點一下(click)、長按(hold click/taphold)、滑動(swipe)、縮放(zoom)、捲動(scroll),跟電腦完全不一樣。要是sitemap 或是內頁次分類選單規劃得不好,有些頁面在手機上根本一輩子都點不進去。所以應該盡量避免規劃這種「滑鼠移入」才能執行或顯示重要資訊的功能。

事實上在手指點一下的時候,還能觸發 js mouseenter 事件,只是沒有 mouseleave 事件,所以東西會卡在畫面上藏不起來。js hover 事件則完全不行。應急的話可把 js hover 事件改成 mouseenter 事件。

另外現在很多購物或型錄網站,會在產品圖片製作所謂「放大鏡(zoomin)」功能,這種東西如果設計得不完善,在行動裝置上用起來也是很痛苦,需要多加思考設計與操作方式。

說到連結,iOS 會自動將網頁上的電話號碼轉為可點擊的超連結,也就是在電腦上用行動裝置模擬器看起來很正常的白色文字,在 iPhone 上會變成藍色,而且有底線,看起來就跟預設的超連結樣式一樣,要記得再額外定義 css,以免背景跟電話號碼文字顏色太相近而不易閱讀。

Android 系統比較沒有這麼智慧,電話號碼不會變成超連結的樣式,但是用手指去點,系統一樣會問說您是否要撥打電話? 所以如果行動版網頁會有這些資訊,避免混淆或誤點,還是記得設定一下連結樣式。

但是又有另一種情況,網頁上有一串數字,可能是傳真號碼、訂單編號、產品型號或規格、通關密語……總之就不是電話號碼,但被系統加上超連結,要如何解決呢? 可以在 meta 加入format-detection 相關屬性,停用這種自作聰明的轉換。然後再幫真的電話號碼加上超連結。

所以這年代如果明知您的網頁都會用行動裝置、觸控螢幕瀏覽,還在提需求做一些「滑鼠移入」才能執行或顯示重要資訊的功能,要嘛就是想花錢然後做一個許多使用者都看不到的東西,或是想整使用者。

然後 RWD 網頁設計不是只仰賴螢幕大小做判斷,例如 iPad Pro 這麼大一台,但他還是不會有「滑鼠移入」,之前流行什麼小筆電、EeePC,就是很小台的非觸控筆電,他卻有「滑鼠移入」,螢幕尺寸只是一個通則,詳細來說還是要考量裝置或瀏覽器是否支援某功能而定。

 

7.只會自幹,不善用 Framework

有些開發人員喜歡享受自幹的成就感,自己寫 media query,定一堆 breakpoint,自己寫元件樣式,自己控制每種裝置上的容器寬度,什麼東西都能掌握在自己控制下的感覺是很好,但有時候可以用一些現成 framework。

如 JQuery Mobile, Bootstrap,裡面都有 grid system,或是一些刻好的現成元件,還幫你顧到一些基本的瀏覽器相容性問題,也蠻方便的。compass 或 sass 也可以引入一些別人做好的東西,不用通通自幹(前提是你知道引入的東西是幹嘛用的)。如有機會,可以用看看。

 

8.只會用 Bootstrap

有些開發人員半路出家,只會用 Bootstrap 之類的 Framework 來做出好像符合合約需求,但實際上維護性與續用性非常差的網頁,不知其原理,出問題也不知道如何排除,要嘛就硬幹埋下地雷。用 Framework 沒關係,但要知道原理,例如為什麼 hidden-xs 會在螢幕寬 < 768 的時候藏起來,那為什麼是 768 而不是 689? 要改的話要去哪邊改?

這年頭網站架構越來越龐大,功能越來越精緻,互動操作要求越來越高,網頁公司其實很少需要碰到從無到有做一個網站的情況,每個公司通常都有幾個充滿技術債的系統,例如「學校班級內容管理系統」「XX 行業網站內容建置系統」「OO 預約系統』「購物車含線上 ERP 電子商務系統」,有些很賺錢,有些是很賺錢的垃圾,有些是垃圾。通常內容都是一些民國初年就已經切好版的頁面內容,framework 也套不上去,如要維護,還是要懂得相關的網頁技術。

 

9.DRY原則

軟體領域有一個 Don’t repeat yourself(不要重複你自己,簡稱DRY)的開發原則,這個在網頁部分也稍許適用。

例如有些開發人員對於 CSS 的繼承、覆蓋觀念較弱,於是會發生控制平板區間螢幕寬度的 CSS,在手機上又寫一段一模一樣的,如有修改,就要一次修改好幾處,造成人力與時間的浪費。

善用繼承與覆蓋,可減少一些重複編寫的內容。如有幸遇到架構完整的系統,還可以將區塊配置(layout)、配色主題(theme)的 css 或功能模組完全分開,達成事半功倍的效果。

 

10.效能問題

有些網頁為了趕流行,會製作一頁式網頁,或是使用 parallex scrolling 之類的效果,或是中國流行的 H5 活動頁面,圖片非常多、耗費非常多載入流量的網頁,但成品製作出來後,會發現滑起來有頓感,或是頁面載入時間非常久,有時候可以唬爛說「Android 手機不夠頂級」、「Android 就是頓」「大陸手機才這樣,很快壞」「這邊遠傳的訊號不好」「伺服器該升級了」,但是當出錢的人拿的是最新款的 iPhone,出現頓感是不被允許的,這些責怪手機、責怪系統的說法就不攻自破。

RWD 的概念之一就是同一份網頁程式,透過不同的樣式檔與媒體查詢指令,在不同裝置顯示不同樣貌的網頁。那必定在有些情況會有多餘的圖片、多餘的 JS 、多餘的 CSS、多餘的 HTML,多餘的 DOM,這些都要仰賴使用者端的網路去下載,仰賴使用者端的瀏覽器與硬體去計算並顯示,重繪(repaint)、重排(reflow)的次數一多,很容易造成網頁瀏覽卡頓。

例如古代常見的連結圖片取代法 text-indent:-9999px,會在網頁上產生一個寬 9999px 的容器,拖累效能。有些東西雖然是 display:none,但還是有被下載、執行,只是看不到。

常見的優化方法有以下幾種:
– 使用 lazyload 之類的程式,避免網頁一開始就下載所有內容。(缺點是有時候網路稍慢,文章都看完了,lazyload 的圖還在下載)
– 使用 Picturefill, Picture srcset 之類的技巧,避免小螢幕的裝置下載用不到的超大張圖片。
– 一些已知會造成效能問題的 css 不要再用 (如 text-indent:-9999px)
– 避免使用容易造成瀏覽器重繪/重排的寫法。(回流与重绘«张鑫旭-鑫空间-鑫生活)
– 製作動畫特效時,使用瀏覽器的開發者工具,比較一下 CSS3 或 JS 哪個執行效能較高。(MZhou’s blog – CSS vs JS动画:谁更快?)
– 部分內容改由伺服器後端 (server side) 產生,而不要把所有東西通通顯示在網頁上,再用客戶端語法去隱藏。可以讓你家的後端工程師從 Detect Mobile Browsers 開始使用,要抓到平板記得加 |android|ipad|playbook|silk

還有常遇到的另一個例子,明明同一個網頁,3 年前的 android 低階手機滑起來很順,但是用當代最新款的 iPhone safari 卻覺得很難滑動、很卡、有黏滯感,不妨先在 body,或是覺得滑動不順的區塊,加上 -webkit-overflow-scrolling: touch;

 

11.position:fixed 的捲動抖動與頁面縮放問題

通常在網頁的上導覽列、下導覽列,或是一些側邊廣告,或是彈出區塊的背景圖層,會使用 position:fixed 的 CSS 語法,讓頁面不論滾動到何處,區塊都會固定在同一地方。

但是發現頁面快速滑動時,或是用手指壓著螢幕,上下移動頁面時,position:fixed 的區塊會亂跑,但是一鬆手,又會回到原處,可以在元素上加入 -webkit-transform: translateZ(0); 改善此抖動問題。

zoom in Bootstrap navbar-fix-top example
zoom in Bootstrap navbar-fix-top example

另外有一些網頁的內容會存在非常大張的圖片,所以會把網頁的 meta viewport 屬性設定為 user-scalable=yes,但是把網頁用手指一放大,會發生 position:fixed 的元素也跟著被放大,並蓋住網頁內容的情況(如上圖)。雖然可以用一些 workaround 或很爛的處理方式,但可能過一陣子就失效啦!

 

12.把選單通通藏起來就叫行動版網頁?

有些人覺得行動版網頁的「公式」就是把所有東西變成寬 100%,然後把按鈕、輸入框、連結間距通通變成超大,然後選單通通藏在三條線的圖案(hamburger icon)裡面。如果客戶都是 2000 元作網站 / 5000 元購物車開店等級的,那這三招就夠了,但是如果要達成行動網頁的完美體驗,這些是大大不足的。

行動版網頁一定要把選單通通藏起來嗎? 不妨先看看一些國外的研究案例,例如有人把選單通通藏起來,結果流量掉了超多,
圖片來源: LukeW | Obvious Always Wins http://www.lukew.com/ff/entry.asp?1945
圖片來源: LukeW | Obvious Always Wins

把選單項目通通藏起來有什麼不好呢? 有時候找不到想看的東西,會讓「點選單>等選單滑出來>捲動選單找呀找>點擊>等待載入…」這個流程重複發生,但如果把一些常用的連結放在外面,許多時候可以減少這種惱人的行為。也可以直接讓使用者看到這網站有哪些重點項目。

另外行動網頁的選單設計千變萬化,比如有水平滾動選單,網路上還有許多創意很棒的案例,多看,多學,多思考,別想著套公式。

 

13.RWD 網頁就無法在行動裝置上顯示電腦版?

有些手機版網頁的設計模式會把網頁功能簡化,讓手機版網頁第一眼看起來高端大氣,但若規畫得不好,可能造成使用者今天可能在電腦上看過某頁,改天在外面用手機或平板瀏覽該網站,卻怎麼找都找不到某內容。第一眼看起來簡潔大方,實際上用起來痛苦萬分。

有些比較早期做的網站,團隊的 RWD 技術可能不這麼純熟,或是網站架構龐大,要調整起來會變成辦公室政治問題,所以手機版跟電腦版是不同的網址、不同的程式,網頁最底下還有連結可以切換電腦版/手機版。

但今天既然 RWD 網頁是依照螢幕寬度來顯示對應的 CSS,是不是就無法做到切換電腦版/手機版的功能呢?

事實上還是可以的,RWD 網頁的開發人員,都知道起手式是設一個 meta viewport 屬性,根據這個原理,我們可以在「切換電腦版」的連結上寫觸發事件,以jQuery為例:

$(‘head’).append(‘< meta name=”viewport” content=”width=1280, initial-scale=0.5, maximum-scale=3.0, user-scalable=1″>’);

這樣瀏覽器會忽略原本的 < meta name=”viewport” content=”width=device-width…,改用後來 append 的內容。這樣網頁又會變成那種畫面超級小、需要一直縮放才能看的網頁。但是換頁的時候會跑掉,所以還要用 cookies 或其他方式去紀錄使用者是否曾經切換為電腦版。

這樣調整的目的通常是「讓慣用電腦版網頁的使用者,不需要重新學習網站的操作介面與版面配置」,但有時候毫無意義,因為網站裡面的選單如果還是「滑鼠移過去才會顯示」,在觸控裝置上還是根本沒法用。或是網頁上有些功能是根據 UserAgent 去切換的,這樣並不會完全變回電腦版,還得要求使用者配上行動裝置瀏覽器的「要求電腦版網頁」設定,來做 UA 的切換。

 

14.網站版面 RWD 了,那後台建置的內容呢?

上述談的大半是網頁的版面功能,都是網頁開發人員、設計人員的事。但現在常見的電子商務網站,或是一些經常需要更新內容的網站,網站裡有一部分會需要從後台建置的,但企業內的網頁維護人員可能只會用表格工具來排版,或是只會用 phptoshop 的網頁切片工具、影像地圖之類的,或是把內容做成整張圖放上去,就會發生「版面在電腦上看起來好好的,可是在手機上就亂掉了啊!」的狀況。

解決方法百百種,常見的如
– 付錢給網頁公司,花錢消災,請他們幫你上資料
– 找新的網頁公司重作網站(true story),然後遇到一樣的問題
– 擺爛不管它,反正電腦看是正常的
– 請編輯人員自己去學 HTML 與 CSS
– 開一個什麼都要會的職缺,然後用面試找免費勞工調網頁。

但有些編輯器非常陽春,media query 的 css 存檔時會被過濾掉,更是難以排成自己想要的樣子。那直接做一整張圖放上去好了? 但是圖片在 iPad 上面看起來糊糊的,還會讓網頁載入很久,更會被人說不利於 SEO,到底該怎麼辦呢?

淘寶後台商品介紹編輯畫面,分為電腦端與手機端,兩邊的編輯器工具列也完全不同
淘寶後台商品介紹編輯畫面,分為電腦端與手機端,兩邊的編輯器工具列也完全不同。

事實上現在一些比較進步的 CMS 或購物車系統,都會有手機版與電腦版的資料分開建置的功能,有人會想說「同一份資料要上兩次,是要增加我的工作量嗎?遇到許多嘴硬只想上一次資料的設計人員,資料上完之後卻還要把瀏覽器視窗拉大拉小,一邊喊著:手機上看起來正常了,但電腦看又亂了~~ 又花費了更多的青春歲月。

圖片不能縮放

還有如上圖左邊這種情況,手機上顯示的內容當成 DM 來做,然後畫面還不能縮放,電腦上看也許很漂亮,但在手機上完全不知道圖片裡寫了啥,反觀右邊的詐騙廣告就寫得簡單清楚。看完這個案例,你還要堅持大螢幕小螢幕用同一張圖片?

為了讓載入速度最佳化,版面顯示最佳化,兩邊分別建置資料會是更為理想的作業流程。像淘寶、開店 123 都有這種功能。那些只會用表格排資料的人員,終於可以告別資料在電腦上看起來漂漂亮亮,在手機上看起來大爆炸的夢魘了。

 

15.手機上的圖片被擠壓變形

一般人還是很難接受資料要上兩份這件事,所以最後還是一魚兩吃,這時候可能有一張圖片是長這樣 img src="abc.jpg" style="width:1200px;height:600px;"
但是在手機上看,圖片完全跑到畫面外了!
於是我們請文章編輯人員上圖片時不要設定寬高,或是請他上稿的時候,每張圖片要再加上 class="img-responsive",甚至在文章區加上 CSS article img{width:100%}
跟您保證,這些方法都很爛,10 個人員操作就要回答 10 次,而且一定記不住,最後還是網頁人員要出來收拾殘局。

比較一勞永逸的作法,是由網頁設計人員用 css 控制網站整體內文區塊的 img 樣式,如 img {max-width:100%;height:auto !important}
讓大張圖片寬度變成 100%,小張圖片還是原來的大小,讓圖片高度等比例縮放。
不只是 img,還有 table, iframe 也都要做相關的思考與處理。

結語
網頁設計基本上是一個得同時兼顧舊裝置,又得不斷學習新技術的行業,開發人員的失誤,可能造成團隊與公司的損失,也可能造成使用者的流失,不可不慎。

除了許多技術面的問題,還有使用者體驗面,也就是 Mobile Friendly 的問題,一個網頁是否真的好用? 不妨親自操作一遍看看用起來有多痛苦。但是有些人會問,一個網頁好用不是基本的嗎? 為什麼使用者體驗還要另外要求? 一個問題叫給多少錢,做多少事,另一個問題是許多網站或商業產品,背後是一大個團隊經過許多歷程和時間打造出來的。然後今天叫外包公司出一兩個人力,給幾毛錢和一丁點時間,就想達到同樣的水準?

 

 

 

  Jimmy Su

  網頁接案公司的小員工

  原文出處要改的地方太多了,那就改天吧;政府網站營運交流平台授權轉載