本部落格已搬家
點此前往新部落格

新主機測試中...

Your posts match “ RWD ” tag:

行動版網頁不就是把網頁縮小而已嗎?

這篇不講 coding 技巧,不講用 SASS 要怎麼寫,不講 Bootstrap 要怎麼用,不講各種 framework 怎樣達成 RWD 的原理。只是一份講行動版網站與做一般網站有何差異的概覽。

本簡報適合瀏覽對象:
- 覺得行動版網頁只是把網頁縮小而已,沒什麼的人
- 為了學 RWD 還花錢跑去上課的人
- 不知道設計行動版網站有什麼眉角的初學者
- 被指派做行動版網站,不知從何開始的菜鳥美工

本文摘要:
RWD(Responsive Web Design)技術概論與行動網頁設計注意事項

  • 基本心法1 – 流動布局
  • 內的設定
  • 判斷使用者
  • 基本心法2 –Media Query
  • Media Query & Media Type
  • Media Query - device-pixel-ratio
  • 掌握解析度-慎選 Breakpoint
  • Table 如何 RWD
  • 選單如何 RWD
  • 行動裝置上的網頁動畫
  • 圖片也要RWD
  • 圖示也要RWD
  • 嵌入多媒體也要 RWD
  • 設定Flash替代內容
  • 表單準備好了嗎?
  • 按鈕準備好了嗎?
  • 網頁原本用的Plugins準備好了嗎?
  • 文書人員上資料時要小心
  • 測試工具

以現實來說,
企業主真的有在乎他的客戶會用手機來看他們的網站嗎?

設計理念什麼的都是 bullshit,
只願意花30元吃滷肉飯的客人,還要講求健康純天然、服務品質、賓至如歸?

以大局來說,
東西有多難做什麼的沒人會care,就一句話,做不做得出來?


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助


做網頁設計該學 Flash 嗎?

每隔一陣子就會聽到有人問 :
「我想做網頁設計,人力銀行很多徵才條件都註明要會 Flash,那我應該要去學嗎 ?」

Flash 在前幾年的確風光一時,比如說七八十年次小時候都看過的阿貴、詰譙龍、小小系列動畫;還有各種活動網站、小遊戲、課本附的多媒體光碟教材、網頁廣告,2advanced 風格的全 Flash 網站,甚至是網路詐騙彈出廣告,處處可見 Flash 的蹤跡。

Flash 優點挺多的,說對設計師而言,可以用滑鼠直覺的拖拉,所見即所得,動畫製作流程十分方便。對工程師而言,可以用程式碼來控制。而且範例多、素材多,Flash 時代的設計師,硬碟裡都有幾個相簿程式或特效選單範例吧?

畫面上的東西當然不會平白無故變出來,Flash 跟 Adobe 系列平面設計軟體的格式整合性也相當不錯。除了可以處理點陣圖素材,也可使用向量圖形技術,可以有效節省網路頻寬和下載時間的檔案。對一些網拍商城的美工而言,Flash 甚至還可以匯出 gif 動畫呢! 另外 Flash 還有一些內嵌字體功能的功能,可以無視什麼解析度與瀏覽器版本,讓 PC 不管用什麼瀏覽器都可以看到一樣的畫面。

Flash 雖然可以做出許多不錯的視覺與互動效果,但是後來卻產生一些其他問題。例如一些新手做的 Flash 容易造成電腦 CPU 使用率飆高,而且 Flash 的效能在一些真正複雜的場景也不盡理想,例如電腦組裝討論區常看到「FB 上網文書機」跑不動開心水族箱的文章。

還有設計師從亂寫也能動的 Action Script 2,轉移到物件導向 Action Script 3 的陣痛期。甚至後來行動裝置崛起,2010 年4 月,賈伯斯宣布不在 iOS 中支援 Flash 內容。2011 年 11 月 9 日,Adobe 也宣布終止開發行動版本的 Flash Player。Android 也在系統更新後逐步封鎖 Flash,一般老百姓根本不知道如何在自己手機或平板上顯示 Flash 的內容,就算硬是讓行動裝置執行 Flash,也是增加卡頓、耗電的情況罷了。

賈伯斯封殺 Flash 的消息出來的時候,我還是大學生,老師還會在網頁設計課教 Flash,當年一看到新聞,大家都在想: 難道奶綠茶大大要失業了嗎? 從那時候到現在也只過了 5 年,賈伯斯已作古,未來要怎樣也還很難說。

所以,Flash 真的就沒必要學了嗎?
現在去相關行業工作,完全不會 Flash 也沒關係嗎?

其實就算在 2015 年,還是可以常常碰到 Flash 的,有以下用途 :

1.舊網站還有一堆 Flash 要維護
並不是說今天有了新技術,那些舊技術做的東西馬上會消失。今天新市長上任,那些八年遺毒就會消失。以前那些 Flash 做成的網站難道都不需要更新跟維護嗎?
一個網站可能會有新的活動、新的產品、新的技術認證、新的聯絡資訊 (Line、微信等)、這些都需要會用 Flash 的人員去維護。

雖然也有許多業主都有想要讓自己的 iPhone 也看得到自家網站,或是製作所謂 RWD 的行動網站,但是一聽到重新製作網站的報價,就退縮了,覺得網站這種東西,求有不求好,網站更新也無法幫助他的生意,於是還有許多 Flash 網站還在撐。

另外因為 Flash CC 逐漸升級之後就不支援太舊的檔案編譯,所以有些設計公司會同時共存 CC 與 CS 系列版本的 Adobe 軟體。那對於初學者而言,要學 CS 還是 CC 版本的 Flash 操作呢? 這又是一個問題。

2.多媒體廣告有時候會用 Flash 來的製作
現在電子商務已經進入紅海時代,你賣的商品或服務是其他人也有的,想要做一個網站,就等著在家數鈔票,基本上就是緣木求魚的事。品牌更大,東西更好的都在做廣告,憑什麼認為自己不做廣告就可以賣贏別人?

把自己的產品跟服務做得完美,理論上來說是不可能的。於是網路行銷更加的重要,最常見的就是找粉絲團或部落客寫手,或是買搜尋引擎關鍵字廣告,預算更多的會買多媒體聯播網廣告、Youtube 影片廣告。


多媒體聯播網廣告的特性在於當使用者瀏覽新聞,或是上網看文章時,網頁旁邊的廣告版位會不時出現廣告,有助於新品牌提高能見度,或是發掘出消費者潛藏的慾望。現在有許多大型網路商城也會跟廣告商合作,業主只要在商城上架商品,就有機會在聯播網廣告中看到上架的商品。

廣告的類型,除了純文字廣告、圖像廣告,也有 HTML5 廣告、影片廣告、Flash 廣告。基本上設計公司、多媒體公司、網路行銷公司,只要不是走純平面設計的,基本上都有這種製作廣告的業務內容。因為這種廣告也可以選擇投放到手機或平板上,所以用 Flash 製作的比例會降低,而且要是沒設定廣告受眾裝置,如果廣告到達頁面是Flash,那廣告費基本上是成效不大的。至於哪一天 Flash 廣告會完全消失? 等 Google Adwords 哪一天突然宣布不支援 Flash 廣告,大概才有機會吧! 連 IE6, IE7 現在都還陰魂不散,論消失哪輪到 Flash 呢?

3.Flash 可用於單機程式與行動裝置 APP 開發
前面不是才說行動裝置不支援 Flash 嗎? 事實上 Adobe 有發展一個 AIR 技術,只要使用者在電腦或行動裝置上安裝 Adobe AIR ,就有機會在電腦或 Android 裝置上,把用 Flash / Flash Builder / Flex 製作的內容,當成應用程式來使用。

除了 Adobe AIR for android,也有 Adobe AIR for iOS,但是論執行效能、相容性,還有維護與開發的成本,可能還不如直接用原生的開發工具或程式碼來撰寫。通常是那種有許多 Flash 豐功偉業(歷史包袱)的公司或團隊,想要在行動裝置時代無縫接軌才會想這樣做。

4.活動網站或宣傳製作會用到 Flash
現在網頁設計,還有三種領域常常會用 Flash :

其一是活動網站,活動網站的概念就是要讓人印象深刻與創造話題性,畫面有多炫就有多炫,互動性有多強就多強,最常見的線上活動網站功能,比如線上投票、答題抽獎、轉盤抽獎、連連看小遊戲、大家來找碴遊戲抽獎、刮刮樂抽獎、撲克牌遊戲、心理測驗...。常在上網的人,應該都有玩過海尼根的活動網站吧?

技術上來說,辦活動最怕的就是參賽者作弊,Flash 如果寫得好,是比較難作弊的,頂多用 tab 鍵來玩大家來找碴,或是用軟體監看 flash 執行時會傳輸或下載什麼資料,就算把 swf 檔抓下來反編譯,常常也不容易看出什麼東西。


但如果同樣的東西用 HTML5 或是 Java Script 來做,要作弊就方便了,有心人士可以看到所有的前端原始碼,用連 IE8 都有的開發者工具,修改一些按鈕的屬性或參數值,或是監看 Network 中有那些東西在傳輸,網站在本地端(如 cookie )存了什麼東西,甚至像上面那樣,直接在瀏覽器 console 下一些 js 指令來幫助遊戲進行,還可以用 Greasemonkey 製作自動腳本去跑。

以上是程式問題,另外還有視覺的問題,為了各種主流瀏覽器、各種裝置、各種解析度的相容性與版面呈現,HTML+CSS 有時候反而需要花更多時間調整,為了成本考量,有時候還是會用 Flash 來做。


其二是遊戲宣傳類網站,這種網站主打的通常是沉浸式體驗以及使人印象深刻,視覺與互動效果一樣是少不得的。一些常見的動態視覺特效,如 : 冒煙、螢火蟲、耶穌光、流動光、煙火、spotlight、頭髮飆、衣服飄、墨水灑落......,是 js, css3, webGL, canvas 跨瀏覽器較難達成的,如果真要做的話比較像在寫程式、算數學,與一般視覺設計師習慣 Flash 動畫所見即所得的設計流程相差甚遠。如暴風雪公司的很多遊戲宣傳網站還是用 Flash 去達成這些效果,不支援 Flash 的裝置就顯示一張靜態圖。或是用行動裝置也支援的影片格式來代替 Flash。

第三種還是常用 Flash 的,就是台灣的建設公司網站、建案宣傳網站。不過有些大間的已經開始在更新了,可喜可賀。

5.多媒體數位教材/遊戲類
以前是教育大學的學生(我讀的系不是師資培育的,別再問我為什麼沒當老師了),系主任常常會接到校內其他教育相關科系的數位教材製作需求,事實上同樣的錢拿去請業界做,通常比較快又比較好,會找學生來做的原因無非就是比較好凹,同樣的功能需求,要一些不食人間煙火的老教授,去找豺狼虎豹的業界公司談,可不知道要燒掉多少公帑。

數位教材的特點就是要做得活潑有趣,互動性要強,動畫跟視覺效果要引人入勝,而且學員不用升級瀏覽器跟作業系統,就可以看到各種精美的效果與一致的畫面,這些恰好都是 Flash 的強項。同樣的東西,如果要做成平板用的 app,甚至 iOS 跟 Android 各做一個,預算大概就要多出一兩位數。

不過事實上大多數的教材也都是因應短期的國科會計畫或是 OOXX 計畫而生,提報完後這些成果就封存起來了。我也離開學生時代已久,不知道現在的國高中課本後面還會不會附一片光碟,裡面會有一些無聊的課程內容可以看呢?

結論:
所以,從事多媒體設計行業,到底還要不要學 Flash 呢?
一種境界叫做把大便當黃金來賣,如果能用靜態的東西就讓老闆或客人買帳,那就不用學。
一種境界叫做無所不能,技術跟軟體一直在變,這都只是虛名,只有需求跟預算是真的。功能要完整,無非就是讓程式與 server 和 DB 連線的技術,跨平台的技術、超大型專案的技術、小東西快速結案的技術......。不管用什麼技術都能達到這些需求,你就是一個高強的技術勞工了。
一種境界叫做用嘴巴做東西,欲達此境界者,是不需要學習 Flash 這種勞工才需要會的東西的。Facebook 上那些常常講一些名言的世界偉人,有哪幾個是會 Flash 的?


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助


Bootstrap 的 10 個錯誤用法

近幾年很流行在網頁專案導入一個叫 Twitter Bootstrap 的前端 framework,例如網站的管理後台,網頁系統的後台,新創網站,甚至一些預算不低的網站前台,也是套 Bootstrap 的預設樣式,或是套上某個 Bootstrap 的免費樣式,就端出來給大家用,讓那些慢慢手工刻網頁的勞工覺得自己好像智障。

導入 Framework 的意義何在? 就是 Write less, do more.

Bootstrap 針對一些常見、常用的網頁元素寫好定義樣式,有漂亮的按鈕,現代風格的表單等等,在 IE8 等主流瀏覽器都能得到統一的視覺呈現,甚至還有內建一些常見網站功能的 js,像多層下拉選單、tooltip、表格隔行變色、頁籤、收闔選單、對話視窗等等,可以快速做出看起來比較像樣的東西,而且還有許多以 Bootstrap 為基礎發展出來的 JS plugin,與 Bootstrap 無縫接軌。

國內幾個大網站,如 iCook、KKBOX,都使用 Bootstrap 來做前端的介面架構呢! 像是 Inside Job Board - 網路業工作職缺看板TaiwanSamsungLeaks.Org 的網頁樣式,就是用 Bootstrap 2 的預設樣式排的。

我鍵盤金田一推測我們公司這邊是工程師提議開始用 Bootstrap 的,工程師花許多時間做出能動的程式,但可能在東西的外觀與互動上卻完全不吸引人,黑白灰色又正正方方的區塊、接近色盲的愚蠢配色,美工也不是整天閒閒幫你做版型、套樣式,但是有了 Bootstrap,工程師只要在寫按鈕或是表格迴圈的時候,加上幾個 Bootstrap 的class 名稱,馬上就從粗糙的裸機變成比較像樣的網頁。

Bootstrap 這麼強大,但它完美嗎? 人做的東西怎麼會有完美的嘛 !
一個東西紅當然不是壞事,大家會想辦法讓他變得更好。但是對 Twitter bootstrap 的使用者我不禁有些話想講講。

一、注意中文 font-size 地雷
我們先來看一張擷圖,擷圖中有 4 個文章段落,哪一段的字體看起來最不清楚?

首先是 Bootstrap 的第一個問題,上圖有四段繁體中文的段落文字,哪一段的字體看起來最不清楚?

一般人平常可能不太會去注意這種小事,但擺在一起看,就發現第一段中文字有點古怪。中文字有一些地雷 font-size,用錯 font-size 會讓網頁上的文字特別難看。Bootstrap 畢竟是洋人的東西,偏偏就用上了14px的地雷設定,文字長這樣你可能不陌生,Google Blogger 的一些樣式版型也是這種字體大小設定,看起來會令人不爽。

諸位網頁勞工你用 Bootstrap 時 font-size 愛怎麼設都可以,但是就不要照預設的設,拜託。然後因為 Bootstrap 有許多地方都是基於 body 的 font-size 來計算尺寸,所以改了 body 的 font-size 之後,一些表單元素可能會出現古怪,例如高度對不齊,表單框框字的下半部被吃掉啊,麻煩也顧一下。不然就用 Customize Bootstrap 來產生對的值,不要浪費寶貴的人力。

除了字體缺點,Bootstrap 讓不會用的人用,code 會非常亂,造成接手的人的困擾。

二、不要讓網站的 CSS 變成維護地獄
最常見的錯誤用法有五種:

第一種是不愛看文件:
例如用官網提供的範例來修改,看範例的導覽列是黑色的,想改成淺色的。於是千辛萬苦設定 nav-bar 的背景色、超連結的顏色、選單的背景色,其實可以多花兩分鐘先看看文件,把 class 名稱 navbar-inverse 改成 navbar-default 就好了。

第二種是只看眼前:
直接把樣式改在 bootstrap.css 裡面,後續就發生用了 BS 的 class 名稱,卻出現非預期的效果。或是下次要更新 boostrap 版本,或是又用 Customize Bootstrap 產生新的 bootstrap.css 的時候,樣式又要重寫一遍。

第三種是 css 繼承與優先序的概念薄弱:
發現自己怎麼寫都蓋不過 BS 的預設樣式後,就開始 !important,或是寫行內樣式,快速解決問題,但後續卻製造更多問題,這樣亂搞,在 RWD 時更容易發生問題。或是又發生第二點的問題,直接跑去改 bootstrap.css。其他有套 bootstrap 的頁面也跟著亂掉,又要再多寫好幾行 css 去控制亂掉的頁面。甚至有時候趕工的時候,可能寫在 DOM inline,也有可能寫在 head 裡面,或是除了 bootstrap.css 跟 style.css 以外又多了一支 pageOOXX.css,為了RWD 可能又有一支 responsive.css,然後哪天突然又不得不多一支 !@#$%^&.css......真是一場災難! 當然如果貴公司是照程式碼有幾行來算薪水的,那當然 code 寫越多越好。

第四種是用人工去做機器做的事:
比如說在 bootstrap.css 看到這段,btn-primary 按鈕顏色的 CSS code:

.btn-primary {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #006dcc;
*background-color: #0044cc;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
background-image: -o-linear-gradient(top, #0088cc, #0044cc);
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
background-repeat: repeat-x;
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

btn-primary 的按鈕本來是藍色的,但是你要把他改成紫色系的,於是你一行一行去改,按鈕的一般狀態改完了又去改 hover, active, focus 的狀態,然後客戶說紫色太鮮豔了,要換一個比較「有人情味」的紫色,於是你又重複再做一遍...。

萬一有一個沒改好的話,就容易發生像下面這樣的情況。

其實 bootstrap 的 css 是用 LESS 語言寫成的,就是一種 css 的預處理工具,其中一個功能是你只要寫一行,工具就會幫你編譯成加上前綴字元,或是符合各種瀏覽器的 css 語法。所以你看到上述那種東西,都是機器跑出來的。不是真的人去一行一行寫的。

所以你要修改做這些 code 的話,請用 LESS 去重新編譯 CSS,不然就用 Customize Bootstrap 去產生新的 css,不要花人力去做機器做的事。

第五種是亂刪:
比如上面那一段,有人覺得 background-image 為什麼要寫這麼多行? 就把其他看不懂的全刪掉,除非你的網頁只給自己看,不然這就糟了。
其實現在網頁瀏覽環境很複雜,不像以前只有 IE,800X600,現在有各種裝置與各種瀏覽器,為了讓各瀏覽器都能看到統一的樣式,所以不得不寫這麼多。有人覺得說現在除了IE以外的瀏覽器不都很強大,支持主流標準網頁語法嗎? 但你知道 CSS3 有一個常用的 box-sizing 屬性,在 Firefox 版本 29 以前,都要加前綴字元(prefix) -moz-box-sizing 才能正常運作嗎? 你知道有些 css 屬性在 android 4.2的預設 browser 不支援嗎? 諸如此類狗屁倒灶的東西還有一大堆。

還有些瀏覽者只知道自己是用 Firefox, Chrome, 卻不知道自己的瀏覽器版本從未更新過,或是自動更新根本就故障了(如[教學]如何解決Google Chrome的更新錯誤?(錯誤:管理員已停用更新))。所以還是需要這些加上前綴字元的寫法,才能正常顯示樣式。基本上 Bootstrap 對主流瀏覽器的支援算是不錯了。

來下個結論,合理的 Bootstrap css 用法,是保留 bootstrap.css 不去動,然後用另外一支 theme.css 去 override 控制 bootstrap.css,或是用一些 css 的預處理器,再 mixin 一些 boostrap 的東西來用。

三、增加額外的流量負擔
常見的一個初學者錯誤,把 bootstrap.css 跟 bootstrap.min.css 一起嵌入網頁中,其實兩支都是一樣的東西,只要用一支就好。那為什麼他要提供兩支檔案給大家用? 因為一支保留可讀性與維護性,min 檔案則是刪除所有縮排、換行,讓檔案達到最小化,節省流量,也有人則是想故意打亂原始碼讓人看不出來(騙小孩而已)。總之壓縮器(compressor) 的使用與最小化的檔案,在現在的網頁設計是很常見的。

Bootstrap 提供自訂功能,使用者可以從官網選擇會用到 bootstrap 的哪些功能,下載對應的 JS 跟 CSS code 來用就好,像是你要 grid 系統就勾 grid,要表單樣式就勾表單樣式。但一般人都會有一次到位的心態,直接下載完整版,省得夜長夢多。

於是可能只有兩三頁的網站,就包了 120(min)~140幾 KB,有 6000 多行的 css,還有一個 30(min)~60KB 的 JS,好啦,現在的網頁主機都很勇,大家也都用寬頻上網,區區幾百 KB 何足畏懼? 但別忘了,還有吃不飽的手機上網,或是有人是用流量計費的 3G 上網,或是有些租屋族是用手機分享網路訊號給 PC 的,這些都會對他們的機器造成額外的負擔。

四、reset、normalize,與 bootstrap
有些人知道 css 要 reset,但是只知其一,不知其二。

例如客人會反應他在後台打文章時,項目符號明明有點點或是編號,但是在前台看就不見了,或是表格有設內外距,但是距離沒出來。這種情況九成九就是做網頁的人用了 css reset,把 ul 跟 ol 的 list-style:none 了,把table, th ,td 的 border-spacing 變成 0 了,甚至把一些段落都變成 0 距離。但是又忘了把文章內文區、編輯頁面區的再設定回來,所以同一篇文章在前後台看起來的樣式會差很多,於是就又要有人去收爛攤子,或是客人自己加一些●▲☆★◆■▼㊣⊕⊙◎當項目符號,拜託 ! 用了 css reset 之後請再顧慮一下使用者輸入內容的地方。

然後有時候會看到網頁上套了 reset.css,再套了 normalize.css,然後又再套了 bootstrap.css。其實上 bootstrap 1 就已經有包含 css reset,升級到 2 代的時候則捨棄 reset,改用 css normalize,第三代仍是採用 css normalize,所以 Bootstrap 的骨子裡已經包含 normalize.css 的血液了,自己又再套一次是毫無意義。

愛套 framework 沒關係,覺得不套個某大神的 css reset 或 css normalize 的話網頁用起來會不安心。只要能完成任務,一個網頁套 100 個也沒關係,但重點是要知道 framework 的作用是什麼,不要一股腦亂套。

五、怕被 bootstrap 預設樣式影響,不想用一般的 html tag 去包東西
Bootstrap 預設會給一些網頁元素 p, h1, h2...之類的套上樣式,但有些網頁勞工不想讓網頁上的元素被套上 bootstrap 那種行距超大的 p, h1, h2...樣式,DOM 架構的容器名稱又沒取好,所以本來該用 p, h1, h2 之類的語意標籤排的東西,硬是用 div、span 套額外的 class 再去排。

然後又產生一堆怪問題,例如在後台編輯器裡面顯示的,跟前台顯示出來的,又會差超多。當然一些常見的後台所見即所得編輯器都支援嵌入外部CSS,讓前後台顯示的樣式可以幾乎一樣。但是就是要多花時間處理。

如果你覺得內建樣式不理想,請自己再定義過 p, h1, h2...樣式。如果覺得 Bootstrap 這種洋人的東西太不接地氣,可以試試 Amaze ~ 妹子 UI中国首个开源 HTML5 跨屏前端框架

六、元素亂套
舉例來說,像是可能覺得 Label and badge 的綠色背景、紅色背景看起來不錯,就把它拿去套在文章的標題。Alerts 的淡黃、淡綠的底色很好看,拿去套在小段文字的段落上。這樣套會死嗎? 不會啊! 網頁會不能看嗎? 也沒有啊!

使用者會不會覺得明明操作成功,卻是紅字,紅背景?
或是代表警告的視覺樣式,為什麼會用在一個奇怪的地方?
或是明明有兩個一樣的樣式,一個是文章標題,一個是代表警示訊息?

不過其實網頁是很現實的東西,以上這些技術問題都不是問題,
案子無法結案,還有客人的產品在你做的網站上賣不出去,這才是問題。

七、Responsive Web Design 問題
終於有越來越多的業主終於發現,他家網站的 Flash 動畫跟 Flash選單在他的 iPhone 上看不到,還有競爭對手的網站用手機或平板看起來是很舒服的,自己家的網站的圖不但糊掉,還要一直縮放滑動,非常難用。於是有改版網站的需求。

Bootstrap 特點之一就是內建 RWD 的設計,你可以簡單加一些 visible-xs 之類的 class 屬性,就能控制網頁上的元素在某尺寸的裝置上顯示與否,不需知道 breakpoint,也不用知道 media query,基本功不用學好,馬上就可以越級打怪。懶得指導新人做網頁時,就可以丟 bootstrap 給他用。

但是這就造成大家以為 Bootstrap 等於 RWD,要做 RWD 網站就一定要用 Bootstrap,用 Boostrap 做出來的網站就一定有 RWD。世界是很大的。先別說 Bootstrap 了,你聽過 FoundationWeb Starter Kit 嗎?

除了用 Bootstrap 來做 RWD ,還有有些網頁勞工會忘記 bootstrap 有 RWD 功能,只要觀念薄弱,就可能導致悲劇發生。

例如以下兩種情況...


Bootstrap 的預設值是螢幕寬度小於 768 px 時,選單才會縮成 hamburger icon。
但是主選單項目太多,而且螢幕比較小,或是沒有把視窗放到最大時,本來顯示成一排的 brand、nav、nav pull-right 選單變成了三塊,還蓋住主內容。這時候就要改 Bootstrap 的 breakpoint,或是不要用 fixed 的選單。


本來只打算做 for pc 的網站,但如果 class 名稱用錯,用行動裝置瀏覽會大爆炸。

八、如果有相容舊瀏覽器的需求,不要隨時追到最新版的 framework 版本
什麼東西都會更新,Bootstrap 也不例外,基本上版本越新的前端 framework,就對用 XP 與 IE8、IE7 的使用者越不友善,有些電腦也不是想升級就升級,想安裝什麼就安裝什麼啊! 有些是內嵌式系統,有的是 ERP 或工業軟體的包袱,不得不用舊電腦。

但就像你不會問為什麼 Nokia 3310 不能傳 LINE 跟上 FB,你要 IE7 的技術團隊在開發時,就可以支援到 10 年後的網頁技術規格,這也是挺強人所難的。拿 2006 年的 Firefox 或 Opera 版本來跑現在的網頁,也是一樣的慘。

Bootstrap 從 2.x 成長到 3 代目,主要是增加了一些新的網頁元件樣式,然後把一些冗餘的 class 名稱與 dom 架構改得更精簡。Boostrap 2 對舊的 IE 瀏覽器的策略基本上是勉強支援,但 Bootstrap 3/4 則是建議你為舊版 IE 另外寫一支 css ,並加掛許多相容性的 js plugin (如html5.js, respond.js...),白話翻譯就是,BS升級到新版之後,反而你要做的事變多了

另一種情況是舊架構的網站更新,網站本來是用 BS2 來 layout,看到 BS3 出了一些新功能,很想用。於是有兩條路可以走,第一種是器官移植,把 BS3 新功能的 css 跟 JS 拆出來,然後塞到 BS2 的 css 跟 JS 裡面,但是會不會出問題? 其實還滿容易出問題的。

於是你走第二條路,就是脫胎換骨,把 BS2 更新成 BS3。只有置換 CSS 與 JS 檔案就好了嗎? 當然不可能。

舉例來說,Bootstrap 方便之處,在於它預先寫好許多類別樣式,比如在 html 加一個 class 名字叫 row-fluid 的 div,然後用迴圈跑 class="span4" 的 div,就可以完成一排 3 個的產品列表,不用寫半行 css ,就可以讓每一塊 div 有間距跟排成一排。

但是在 BS3,row-fluid 跟 span 1~12 的 class 名稱通通都沒了,於是你要重新看一次 BS3 的 class name 與架構長怎樣,還有把程式迴圈裡的 span4 拿掉,換成 col-xs-12 col-md-4,這時候有前車之鑑,有人可能會記得要幫每個 item 加一個另外的 class 了,除了 grid system,其他還有 .input-group , .btn, .bar, .label, .inline 這些通常會寫在後端程式做判斷產生的東西,通通都要再改過後端程式,然後測試一遍顯示與執行是否正常。

別忘了還有人把 css 定義成這樣 .Prodlist .span4{}
或是在 JS 這樣寫的:
$('#reg .btn-mini').click(function() {.....});
$('#export input').click(function() {
var option = $(this).parent().parent().val();
$(this).next().children().find('ooxx').val(option);
});
只要少包一層,架構或 class name 變更,程式就爆炸啦。

有些工程師可能已經幹過一次把 BS2 的後台改成 BS3 的事情了,
那以後會不會隔一段時間又要再更新成 BS4, BS5 呢?
搞不好那時候又會有比 Bootstrap 更強的 Framework 出現呢。

九、讓只會 photoshop table 切版的美工處理 Bootstrap 的網站
有些號稱「網頁製作經驗豐富」,很會用Flash,很熟 Firework,很會用 Photoshop 的切片工具 + Dreamweaver 的所見即所得功能做網頁,他現在的職稱不一定是網頁設計師,可能是銷售大師,可能是設計部經理,也許是什麼都會的助理或業務什麼的,要是沒跟上新時代,遇到 Bootstrap 就會碰壁。

有時候只是在 Dreamweaver 的所見即所得模式打開要改的網頁,把一個東西選起來,換一下顏色,加個超連結,或是移動一下網頁上電話區塊的位置,或是想把一組圖文拿掉,就把 Bootstrap 的網頁改壞了。通常是 end tag 跑錯地方,或是 dreamweaver 自動多加了一層 div,或是 class name 被所見即所得的軟體刪掉了。這時候就看誰要出來收拾。

十、把 Bootstrap 的命名方式當成團隊的 style guide。
有時候後端工程師對 html 跟 css 的概念不好,寫出來的程式常常都會亂包亂套,雖然後端管的是傳遞資料是否正確,Html 怎麼包、好不好看不關他的事,但就容易引發團隊間的對立與紛爭。
或是後台是由很多工程師撰寫與維護的,但公司沒有規範團隊的 style guide,所以每個人取名稱的習慣都不一樣,比如說常見的會有以下幾種:

  • 駝峰式(camel case),如 "ProdTab" 或 "prodTab"
  • 用全小寫 "prodtab"
  • 加下底線或 dash 區隔,如 "prod-tab" 或 "Prod_tab" 或 "_prodTab"
  • 流水號命名,如 "tab34", "item3"
  • 亂取名,如"top-box"
  • 拼錯單字,如 "Probtob" ...族繁不及備載。

於是對設計師而言,在 UX 概念中操作流程與視覺上明明要長一樣的東西,卻因為 RD 在撰寫程式時,因為每支程式命名方式的不同,造成很難維護,與難以調整外觀樣式的情況。例如各種不同樣子的輸入框與按鈕,完全不統一的操作流程與按鈕配置,完全沒有(或亂七八糟) class name,跟著程式迴圈產生的行內樣式。最後設計師調整樣式時,要寫一長串,顧及所有的程式:
ProdTab, .prodTab, .tab34, top-box, Prob_tob, .prodtab {content:"damnit"}

但是只要團隊導入一些 framework 之後,一些常見的網頁元件,如 input-group 或是 nav-tabs,會直接使用 framework 的元件,而不再是隨便亂取,各自為政。

這樣的情況短期來看是好的。網頁元件與命名得到統一,後台也有基本的樣式,工程師與設計師可以少花一些心力去打架。但是這樣又會產生本文第八點的問題。

十一、看中文版的文件
有些台灣人英文比較差一點,難以理解 http://getbootstrap.com/ 上面寫些什麼,但其實有時候不是英文差,是用中文寫出來都看不懂,何況是英文? 有些新玩家的 English isn't very good,網頁前端概念也不成熟,於是就到一些簡體中文網頁、或是某些大大自己翻譯的,或是一些民間的部落格或論壇文章找 code 來用。看起來好像可以用? 東西也做出來了,那會有什麼問題呢?


軟體的世界是進展很快的,它常常會更新,Bootstrap 畢竟是洋人的東西,所以更新的第一手資訊絕對不會是中文的,現今看到的中文資源都是別人翻譯,或是整理過的,如上圖我們發現官方的跟中文版的版本號差了一號,那到底差在哪裡? 就得去查 changelog 或 release note。

最怕的就是有人去官網下載 3.3.6 的 bootstrap.js 跟 bootstrap.css,但是在看其他版本的文件,然後覺得奇怪,為什麼效果出不來或是遇到各種 error? 或是明明網頁上掛的是 BS 3.x 的 js 與 css,卻為了製作某效果,到八百年沒更新的民間部落格或論壇文章找 BS 2.x 的使用範例程式碼,或是只能在 BS 2.x 上能用的 jQuery套件,這都是無法使用的。

上面講的是版本不對的問題,另外還有安全問題,那些外部的載點,有沒有可能有偷加料在裡面? 貢獻 Open Source 的大大們都是很 nice 的,不要胡思亂想,不然會睡不著覺。


Bootstrap 只是一個工具,要怎樣用,沒人管得著,但要告訴大家可能會碰到的問題,事先預防。

網頁設計師基本上就是一個會中年轉職的行業,要嘛換工作,要嘛變成用嘴巴做網頁。
所以青春歲月要浪費在美好的事物上,而不是花在 debug 上面。


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助


在 Windows 建立各種瀏覽器測試環境

從前從前,人們習慣將軟體、工具、檔案都放在自己的電腦,姑且稱為單機作業時代。後來由於時代進展,一個人有公務電腦、私人電腦、手機、平板......如果必須在這些裝置處理同一件事,那同一個軟體得購買好幾次嗎? 同一個檔案得放在這麼多地方嗎? 還有軟體非得綁那個笨重又難看的硬體,可以在自己的平板或 mac 上運行嗎?

於是有廠商開始發行所謂的雲端版工具程式,雲端版工具通常有兩大特色,第一是跨平台,不用擔心使用的裝置是 Mac, Win8 PC, XP PC, 還是 iPad,只要打開瀏覽器,登入帳號密碼,就可以做到同樣的事情,工程師終於達成「程式只要寫一次」的理想(了嗎?)。業務也不用再帶筆電跟測試版軟體光碟出門做 demo,只要架個網站,給想玩的人一組帳號密碼、網址即可。

第二是收費模式改變,以前單機版軟體是付一筆錢,要用多久隨你高興,用了有問題再繳維護費、服務費。現在有了雲端版工具,大家的資料都放在廠商的儲存空間裡面,收費方式基本上有「花錢買空間」跟「花錢買時間」兩種,廠商沒收到錢,資料就灰飛煙滅、天人永隔。

以上都是商人的理想世界,但在工程師與開發者的世界,所謂「打開瀏覽器就可以用的線上工具」,最常遇到的就是瀏覽器相容性問題。每個瀏覽器、每個軟體商都搞一些自己的標準,軟體與硬體不斷推陳出新,每個裝置裡面都有一個「瀏覽器」,但每個裝置的瀏覽器都有一些不同的特性與例外狀況。而且網頁瀏覽器是系統權限非常低的東西,所呈現的網頁很容易被系統設定;或各種軟體、套件影響,而導致網頁功能失常。

本文介紹建立一些常見的網頁瀏覽環境與操作環境,讓各位資訊勞工方便解決問題。

(一)、使用虛擬機器,建立各種系統環境,來重現問題與排除問題。

一、建立各種版本的 IE 測試環境
Windows 內建的瀏覽器,在開發者的歷史定位上為「阻礙網頁世界技術發展」,每次應用最新的技術,卻必須為了使用者的需求:
「IE 什麼版本有差嗎? 為什麼我的 IE 看不到那個效果呢? 應該不論使用者用什麼瀏覽器,大家都要可以看啊?」
「我就點桌上那個 e 啊! 我用了好幾年都好好的,就只有你們的網頁打不開?」
而做許多的 fallback。而且就算版本相同的 IE,在不同作業系統也可能跑出長不同樣子的網頁,產生一些鬼打牆的情況。

以前流行用 IE8 開始內建的開發者工具去測 IE7, IE8, IE8 相容性模式,或是用 IE tester,但後來發現還是常常跟實際顯示得不同,或是遭遇 IE tester 的各種 crash。後期還是用虛擬機器來安裝作業系統,建立出錯的環境。微軟也有提供各種作業系統與 IE 版本的虛擬機器檔案。

二、在 Windows 建立 Mac OS 環境
很久很久以前,Mac 的 Safari 瀏覽器與 Google Chrome 採用同一核心引擎,但後來逐漸分道揚鑣,Windows 曾經也有 Safari,但後來停止更新,變成孤兒。所以網頁在 Chrome 跟在 Safari 上會產生不一樣的瀏覽結果。而且 Mac OS 的操作模式與 Windows 有些許不同,例如 Mac 的叉叉在左手邊,Mac 使用者通常不會把操作視窗「放到最大」。Mac OS 還有可調整高度的 Dock 工具列,常會讓網頁視窗產生超乎預料的比例或尺寸。

一般 Windows 的開發者,如果想要擁有使用 Mac OS 環境,大致上有四種方法:
一、買最便宜的 Mac 機型,如 Mac mini,或是二手的 Mac。
二、安裝黑蘋果(Hackintosh)。黑蘋果的一般定義,是在一台沒有蘋果商標的硬體上安裝蘋果系統,而且不需透過虛擬機器,可獨立開機使用。電腦的核心組件需使用 Intel 的方案。
三、使用 VirtualBox 安裝 Mac OS (操作效能較差),需準備 Mac OS 的 iso 檔,與 HackBoot*_*Mav 等相關破解程式。
四、使用 VMWare 安裝 Mac OS (操作效能較差),需取得 vmx 相關檔案與 Darwin 工具程式,安裝成功機率較高。

好了,現在有一個 Mac OS 的環境,可以測試 Safari 了。

三、在 Windows 建立 Android 模擬機


iOS 開發人員的煩惱是新機太搶手買不到,Android 開發人員的煩惱則是裝置太多,測不完。除了開發人員,其實有許多一般老百姓也會使用 Android 虛擬機,多半是為了掛遊戲、拿代幣、辦假帳號...。

常見的使用方案,而且可以選要產生哪一種 android 機型的,有以下幾種:
1.Genymotion
2.AVD (Android Virtual Devices)
3.Visual Studio Emulator for Android

四、在 Mac 中建立 iOS 模擬裝置
使用 iOS simulator 建立虛擬 iOS 裝置。

步驟如下:
1.Get a Mac (虛擬機器的 Mac 也行)
2.安裝 Xcode
3.執行 iOS simulator

模擬器畢竟是模擬器,僅供參考,沒有到 100% 相同。經過實測,與實際上還是有點誤差,例如拿實際的 iPhone 6 跟 iOS simulator 的 iPhone6 比較,文字換行還是有誤差。而且模擬器環境通常比較「乾淨」,不像一般使用者灌了許多軟體,離真正體現一般使用者的各種習慣與軟硬體環境還有一些差距。


(二)、實機遠端偵錯 (remote debugging)
當模擬無法解決問題時,可以考慮實機偵錯,中國大陸用語叫「遠程調試」,通常是讓裝置與開發者的電腦,用某種方式連線,然後使用瀏覽器的開發者工具來進行測試與檢查。

一、連接 USB 線,替 Android 手機/平板上的 Chrome 遠端偵錯
Chrome 據說是 Android 裝置上最多人用的瀏覽器(中國大陸區除外),雖然很占用裝置空間,但是一些跟 Google 帳號同步資訊的功能還挺方便的。它的遠端偵錯步驟也比 Firefox 來得簡單。

1.打開 Android 裝置的系統資訊,找到版本號碼,點擊 7 次,行動裝置會提示已開啟開發人員選項。
2.到裝置的開發人員選項,勾選「USB偵錯」、「啟用檢視屬性檢查」
3.打開行動裝置端的 Chrome,開啟要檢測的網頁
4.接上USB,將裝置與電腦連接,電腦必須先至手機商網站下載安裝驅動程式。
5.在電腦上的chrome點選選單>更多工具>檢視裝置
6.手機上會出現「安全性詢問」對話視窗,點選確認後即可遠端偵錯。(如下圖)

二、連接 USB 線,替 Android 手機/平板上的 Firefox 遠端偵錯
Chrome 占用太多裝置空間,android 瀏覽器太陽春,或是用習慣火狐,所以有些使用者會在行動裝置安裝 Firefox瀏覽器。

1.打開 Android 裝置的系統資訊,找到版本號碼,點擊 7 次,行動裝置會提示已開啟開發人員選項。
2.到裝置的開發人員選項,勾選「USB偵錯」、「啟用檢視屬性檢查」
3.勾選裝置端 Firefox 設定中的「遠端除錯」
4.安裝 Android SDK
5.插上 USB 線,下指令 adb devices,檢測是否連線成功
6.勾選電腦端「開發者工具」設定中的「啟用遠端除錯」選項
7.點選電腦端 Firefox 主選單的工具>網頁開發者>連線
8.下指令 adb forward tcp:6000 tcp:6000
9.將連接埠設定成與上步驟相同,再點選電腦端畫面的「連線」
10.手機上會出現安全性詢問,點選確認後即可遠端偵錯。

ref:Remotely debugging Firefox for Android

三、連接 USB 線,替 iPhone 或 iPad 上的 Safari 遠端偵錯 (限 Mac 使用)
此法僅在 Mac 上的 Safari 成功過,Windows 的 Safari 會失敗。(但是 vmware 中的 mac 還是可以用這招。)

1.打開行動裝置端的設定>Safari>進階,開啟「網頁檢閱器」選項。
2.使用USB,將行動裝置與電腦連線
3.打開行動裝置端的 Safari,開啟要檢測的網頁
4.打開 Mac 端 Safari 的「開發」選項,可以看到裝置名稱與正開啟的網頁。

四、其他行動裝置的瀏覽器呢?

  • 有些比較沒有客製化、比較接近原生系統的、系統版本較舊的裝置,裡面只有 Android Browser。
  • 大廠牌的 Android 裝置內通常會內建一個客製化瀏覽器,如 HTC 網際網路華碩瀏覽器、Sony 網絡瀏覽器......這種瀏覽器通常使用 webkit 核心,但是跟 chrome 又稍有誤差。
  • 中國大陸常用的瀏覽器,如傲遊雲、UC、百度、獵豹等等
  • Facebook , Wechat, 鄉民晚報裡面的 Webview API
  • 為了執行特殊套件而安裝,如海豚瀏覽器。
  • 其他...族繁不及備載。

每一種情況,常常又是另外一個世界,而且這些瀏覽器上面並不會有 remote debugging 的功能,那網頁如果發生問題,要如何偵錯呢?

試試 WEINRE 吧。它的原理是把你的本機變成伺服器,然後在目標網頁塞一些程式碼,當目標網頁開啟時,本機可以對目標端網頁進行偵測。

步驟如下:
1.電腦安裝 node.js
2.npm –g install weinre
3.weinre --boundHost 電腦IP
4.要偵錯的網頁中放入< script src="http://你的IP:8080/target/target-script-min.js#ID名稱">
5.用裝置去瀏覽放入 JS 的網頁
6.在電腦瀏覽器執行 http://你的IP:8080/client/#ID名稱
7.將會得到一個簡易的開發工具,可以檢測目標網頁。(ps.無法偵測 media queries)


weinre 的工具比較陽春,不能做太複雜的操作,但好處是裝置不用插線接電腦也可以偵錯,若有其他不插線做 remote debug 的需求,可到 Google play 市集搜尋 wifi adb 之類的 app。

五、Teamviewer 遠端控制


有時候搞了老半天,會發現根本是操作問題。或是防毒軟體或是電腦問題造成的個案,就需要在出問題的裝置上除錯。

遠端控制軟體的缺點在於,

  • 有些電腦是內網環境,或是對方不想被遠端連線。
  • 用 Teamviewer 檢測時,對方也會看到你在幹嘛,相當害羞。
  • 行動裝置版的 teamviewer,作為主控端時,可以控制桌上型電腦。但作手機作為被控端時,主控端的電腦只能幫手機截圖、開關 app,檢查CPU、記憶體的使用量與耗電量,無法除錯偵測或代為操作。

(三)、結論
全民公測,發生問題才來修,是現在大 cost down 時代常見的陋習。
但身為一個有良心的開發人員,不能用「大家都闖紅燈,所以我也跟著闖」的概念來做事。(如果薪水很低的話就算了。) 那有沒有辦法超前部屬,能先知道網頁在每一種裝置、解析度上顯示得怎樣呢?

有的!

可以試試這兩種:
Cross Browser Testing. Real mobile devices & browsers!
Bbrowser Stack - Cross Browser Testing Tool. 300+ Browsers, Mobile, Real IE.


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助


行動裝置的水平滾動選單,是個好設計嗎?

行動裝置幾乎已經成為生活必需品,在一些流行產業或生活消費行業,要思考的已經不是「網站要不要做行動版」,而是「網站的行動版要做到多好用」,商品沒有亮點,操作也不人性化,在電商的起跑點就輸給競爭對手了。

行動裝置的介面設計是門學問,如何把滿坑滿谷的資訊顯示在有限的小螢幕上,如何讓畫面上的元素適合點擊,如何減少使用者輸入資料時的痛苦,如何避免完成一個目標流程需要一直、一直換頁,這些都是價值所在。

近來發現一種行動裝置的選單模式,應該沒有什麼學名,姑且稱為「水平滾動選單(scroll overflow menu, or horizonal overflow menu)」吧,操作模式就是畫面上會顯示一個選單列,可以透過水平滑動瀏覽更多項目。

舉幾個例子,請見各圖綠色箭頭處:

究竟是怎麼的時代背景與設計情境下產生水平捲動選單呢? 通常有四種條件:
一、選單項目相當重要,直接顯示出來更好,不要藏起來。
二、選單項目很多,一行顯示不完,但不適合分成好幾行顯示,也不適合占據太大的面積。
三、使用者抱怨找不到某功能,所以把元素擺在畫面上。
四、看了「把項目連結藏起來」會降低項目點閱率的研究報告,所以會把東西放在頁面上。

不乏一些國內外知名的網站或 App 都採用這種水平捲動選單的選單設計,算是個很常見的設計模式,使用者不需要學習任何新符號,也不需要去猜測符號的含意,只要感覺好像有東西被吃掉了,去滑看看,就會發現後面還有東西。對使用者而言,學習成本相當低。

但就像代表選單的漢堡圖示(hamburger icon)的爭議一樣,一般對資訊很熟悉的使用者都知道,網頁上找不到的東西,就要點擊那個三條線的漢堡圖示,叫出主選單,但是卻有許多人質疑這個漢堡圖示跟分享圖示一樣,都需要經過「學習」才會使用,對一些不熟悉資訊產品的使用者,無疑是一大考驗。

那麼網頁的水平滾動選單有什麼問題呢?

一、文字或圖案切一半,可能造成觀感不佳
每個裝置的寬度不一,使用者還會自己調整瀏覽器字型的大小,所以使用這種選單設計會產生「文字或圖案被切掉」的特色。不明究理的驗收人員,馬上就會質疑,為什麼文字被切一半? 是不是沒做好?

這時候就要舉上述的那些網頁案例,「你看,人家 Yahoo!奇摩也是切一半。」但這行業通常是外行領導內行,標準答案就是讓花錢的人主觀意識感到爽、可以結案比較重要,什麼設計定理、規範只是拿來說服客戶不要亂改的工具而已。

就很容易出現一種現象,一堆明明大型網站都有的功能,但反而小型網站的設計師不被允許那樣做,一定要把使用者當白痴,做一些像幼兒軟體的介面、每個元素都要有說明文字,每個元素都超大,色彩要很繽紛,反而產品或內容本體完全不明顯。

二、使用者不知道那個地方可以捲動
切一半不好,但完整切掉也不好。容易讓人以為後面沒有東西了,不會想去滑他。

其實這種說法都是憑感覺,使用者不點擊後面的項目,是因為不知道可以往右捲,還是後面的項目都不吸引人,就算看了也不想點? 應該是透過使用者行為的紀錄軟體,去研究是否真有這種可能。

但是一般廉價 SOHO/網頁外包公司的流程,就是照合約做完功能,網站上線,就把客戶放生了,接著是每年主機續約時才會再想起客戶。竟然還想進行「網站上線後,去記錄使用者行為,再提出網站調整建議報告」,一個不想多花錢,一個不想多花時間,簡直是天方夜譚,而且訪客太少,記錄到的使用者行為連「數據」都稱不上,只能稱為「個案」。

但根據「可能有使用者不知道可以捲動」的情況,還是有人提出了解決方法,讓我們看一下案例:

比如說自由時報行動版網頁的案例,不但做出了左右箭頭,而且那行字還會自己滾動喔! 用起來就跟雜亂的新聞台畫面一樣熟悉。

Google 的前端框架 Material Design Lite ,一樣是做出箭頭,在一開始的地方會出現往右箭頭,捲到尾巴之後則會顯示往左的箭頭。

個人製作的案例,產生一塊有陰影或箭頭的區塊,用 JS 判斷捲動距離大於一定數值後,陰影區塊會消失。但這是不完美的案例。如果能再做到點擊陰影或箭頭時,區塊會自動滾動一段距離的話會更好。

個人製作的另一個案例,概念跟 Yahoo 奇摩! 差不多。使用者不知道可以捲動、懶得捲動,沒關係,留一個「更多」讓使用者按,點擊後會顯示產品搜尋框與所有商品分類。

結論
水平滾動選單是個挺常見的設計,對設計者而言,容易做、製作成本低,對使用者而言,不需要太多的學習成本,也算是個好設計。但究竟它是不是個完美的設計? 就有待討論。

文中範例有提到 Apple 網頁曾經也使用水平滾動選單,但是他們後來也改掉啦,變成全螢幕選單了!

是不是 Apple 發現太後面的選單沒人點,或是根本沒人去捲動,才改版的不得而知,搞不好是賈伯斯托夢也不一定。我前幾天才看一篇 為什麼我從來不分析別人的案例 | Circle ,所以不要隨便分析其他人的案例。


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助


你知道你的網站可能在 InAppBrowser/webview 無法使用嗎?

你知道你的購物網站,可能在 Facebook App 裡面無法結帳嗎?

最近遇到一個案例,購物網站上線後,廠商說許多消費者回報「購物車無法刪除商品」,選擇取貨的超商分店後「無法跳回原本的結帳頁面」。工程師用了幾十年 的 JavaScript confirm() 跟 window.open() 語法,到底會有什麼問題?

一開始以為是資訊界的「顧客整人」理論(註一)。但是深入了解後,終於重現發生問題的情況: 網站主要導流來源是 Facebook 粉絲專頁,只要使用者使用 iOS Facebook app 內的瀏覽器開啟網站,一些 JS 功能就會失效,但如果將連結使用一般的 Safari 瀏覽器開啟,則是一切正常。這種 APP 內的瀏覽器有個專有名詞,叫做 InAppBrowser,或是對 App 開發人員,叫做 "UIWebView"。

註一: 服務業有所謂「顧客至上」理論,不需要任何邏輯,花錢的就是大爺,客人就是神。資訊界則相傳有「顧客整人」理論,程式不會有問題,一定是使用者不會用,或是軟硬體太舊或太新,造成相容性問題。

再找了一些瀏覽器功能支援度的線上測試工具,用這年頭最新的 iOS 9 實機測試,Safari 跟 InAppBrowser 的確會跑出不一樣的分數,證據確鑿! 明明在同一台裝置上,都可以看網頁,但卻是不一樣的東西。

除了那些細部的測試,另外之後也初步條列出幾個常用,但是會在 InAppBrowser 發生問題的語法:

- alert() :無法出現對話提醒視窗,所以「請填寫某欄位」之類的提示通通看不到,假如姓名欄位必填,有個使用者沒填姓名,但是他點送出的時候,網頁也無法提示「請填寫姓名」,使用者只會看到點了送出,怎麼網頁都沒反應?

- confirm() :對話確認視窗無法出現
if(confirm) 的行為通通無法繼續操作。「是否確定刪除購物車內的商品?」之類的確認視窗通通看不到,也無法操作,這是使用者體驗的一大忌,因故完全無法操作,但使用者又無法得知發生了什麼事。

- window.open 或 window.opener:與電腦上完全不同的顯示行為。
會有兩種情況產生,一種是點擊後毫無動作,如果選超商分店之類的 emap 是用 window.open 來做,那使用者是無法選擇超商的。target="_blank"倒是可以用的,沒問題。
另一種是會覆蓋原本的頁面,而不會在新視窗開啟。如果沒有特別作紀錄,將導致使用者剛剛輸入的內容被清除掉,又得重新輸入。

- window.close 或 self.close :失效。
承上,因為頁面已經被覆蓋掉了,所以一些指定視窗跳回的也失效了。程式可以接收到傳回的資料值,但使用者只會看到精美的空白畫面,無法關閉分頁。有些 App 按返回,會直接跳回 App 的文章,而不是網頁的上一頁,不管是卡在空白畫面或是無法回上一頁,等於結帳流程完全被中斷。

但是裡面有內建瀏覽器,而預設不會直接呼叫 Safari 開啟網頁的 App ,不只有 Facebook 呀!
又測試了一些比較常見的 App,檢測以上項目,只要有一項無法操作,就打叉。

  • Facebook (X)
  • Line (O)
  • Plurk (X)
  • Pinterest (O)
  • Pocket (X)
  • QQ (O)
  • Twitter (X)
  • Wechat (O)
  • Whatsapp (O)
  • 新浪微博 (O)

除了上述的社群軟體或閱讀軟體,其實還有掃描 QR code 的軟體要測,但是太多了,先忽略。以上是 iOS 中發生的問題,至於 Android 呢? Android 4.x 跟 Android 5.01 大致上沒發現這問題。

這份問題 App 清單不一定是準確的,因為症狀通常不會同時出現,還有可能某 App 今天沒事,但更新後就有問題了。或是本來有問題,但某天 App 更新後就正常了。還有明明 App 已經修復此問題,使用者卻從來都不知道要更新 App,繼續使用有問題的版本。

解決方案
現在是科學的時代,先把網站的 GA 報表叫出來看看影響層面究竟有多大? 是否真的有需要解決? 但數據表示用行動裝置的比用桌機的還多,iOS user 更是 Android user 的兩倍,所以目標客戶群主要還是拿 iOS 裝置的使用者,這問題是不能不找出解法了。

網站已經上線好幾週了,這種裝置不支援的問題算 bug 嗎? 網頁公司是否要無償去修正?
那 Flash 在手機上面不能看也算 bug 嗎?
XX 銀行的 WebATM 只能在 IE 上使用,不能在 Chrome上面執行,算 bug 嗎?
廠商把責任推給網頁公司,網頁公司把責任推給 Mark Zuckerberg,Mark Zuckerberg 把責任推給 Steve Jobs,所以先準備買機票去美國抗議,使用者的問題最後還是沒解決,事情不是這樣幹的。

這時候要拿出將太的壽司的經典台詞之一:

改程式、跟開設測試機都是要花錢的,先來考察別人都怎麼解決的:

1.網站公告法
用 Google 找了一下,這種「請消費者用預設瀏覽器開啟網站」的說明文還真不少,
隨便舉幾個來瞧瞧:

案例四 - 批踢踢網路創業板 - 緊急分享 fb app更新影響訂單成立

正常的購物行為,不管是明確型還是閒逛型購物,會先去看公告才開始消費的使用者比例其實是不高。如果叫廠商的 FB 小編每次發文時都要加「請消費者用預設瀏覽器開啟網站」,或是「請消費者自己更改 APP 開啟網頁的預設值(這個設定iOS 沒有,只有 Android 的 Facebook app 才有。)」,都是不夠理想的作法,應該只有花不起錢,或是時間有限的廠商才會做這種事。

2.自動提示法
訪客每天嘩啦啦的進來,問題持續存在。如果抱著老公務員心態,遵照一般流程,先寫報價單、等客戶確認簽回、開設測試主機、調整程式、內部測試、客戶驗收,更新正式機,客服人員都崩潰了,應急處置就先來做個提示,判斷如果用 iOS 的 FB APP 開網頁,則會跑出一個「請選擇在 Safari 開啟」的提示。

首先發現從 FB App 進站,會帶來源網址(document.referrer),依不同裝置與不同 App 版本,至少會有 http://m.facebook.com, http://m.facebook.com/, https://m.facebook.com, https://m.facebook.com/, http://lm.facebook.com, https://lm.facebook.com/, https://lm.facebook.com, http://lm.facebook.com/ 這八種,所以我們可以用上述 document.referrer 再搭配 iDevice 的 UserAgent 判斷式,來顯示「請選擇在 Safari 開啟」的提示訊息。

但是後來讀取 iOS FB InAppBrowser 的 UA 字串,發現裡面通常有 FBIOS 的字,所以可以簡寫成
if (navigator.userAgent.match(/FBIOS/i)) {
// show something...
}

以上是針對 FB app 的,那其他的哩? 一樣可以用實機去測 UA,用 UA 裡的字串來做判斷。
只是以後每流行一個新的 app ,就要去查一次 UA,再加一些判斷式嗎? 得找找有沒有治本的方法。

3.更改程式法
台灣是 FB 生態系,網站最基本的需求在 FB 上面要完美,不能分享時顯示一些亂七八糟的摘要,還有購物網站要可以完成購物流程。中國大陸地區則是 WeChat 生態系,H5 頁面最基本的標準是要在 WeChat 裡面可以跑,網路上一樣有許多前人分享血淚史。

去考察一些連小學生都知道的國內外知名購物網站,或是所謂行動開店服務的網站,是怎麼處理上述問題的。赫然發現,瑞凡,已經沒有人在用 alert(), confirm(), 或 window.open() 了!

alert(), confirm() 的歷史悠久,保證絕不出錯,比較不會有詢問視窗還沒按確認,但是程式卻在背後偷跑的情況,也不怕有人關閉視窗,或是繞過去。但是卻有可能有使用者去勾到「防止此網頁產生其他對話方塊」,這樣網站不管執行任何動作,都不會再跳出確認與詢問視窗,造成非常多的問題。每一種瀏覽器的解除法也不一樣,大大增加了客服人員的處理時間。

另一個問題是在每一種瀏覽器、每一種裝置,對話視窗都長得不一樣,如對話視窗的位置,IE 跟 Firefox 在中間,Chrome for PC 在上方,還有按鈕文字也不同,有的「確定」顯示在右邊,有的「確定」在左邊,在 iOS 上面則顯示「好」,帶來完全不一致的使用者體驗。

window.open() 的好用之處在於可以保留原本的視窗,程式不需要先額外記錄使用者原本輸入的東西後再把視窗轉走。但常見問題則是被瀏覽器的攔截廣告彈跳視窗功能擋住,使用者要發現瀏覽器網址列或是某處多了一些紅叉叉或提示訊息,再去按允許,讓網頁重新整理一次,才能看到應該要顯示的視窗。或是開發人員設定了 windows.open 的尺寸,但是在行動裝置上卻不聽話,造成異常大的空白區域。

所以一般大型購物網站是如何排除這些問題呢?

  • alert: 使用另外的 Modal, Dialog, Message 相關元件,如淘寶,91APP。
  • confirm: 使用自製的 Modal, Dialog 元件,或是直接執行動作,但是有個復原按鈕可以按,如 Yahoo 拍賣。
  • window.open/self.close: 選擇超商的視窗時,先把使用者當下輸入的資料記錄起來,然後整頁轉過去,選完之後再整頁轉回來,並把使用者先前輸入的資料塞回去,完全不彈跳額外的小視窗。如 Yahoo 商城。

結論:
資訊業一日千里,一套程式就想用一輩子是不行的,有些程式只能解決古代的問題,無法解決現代的問題。只會吹噓古時候的成功案例,但是無法滿足現代的客戶,是一點用處都沒有的,必須要常常更新才能更上時代。

但是管理階層或業務常會有「這套程式給某大客戶都用得好好的,幹嘛要更新?」「用起來好像沒啥差別呀,重構後的跟舊的差在哪?」 的想法,只能說很容易換了位子就會換了腦袋。

以前高中老師說過,看到一個現象就解釋一個說法,這不叫科學。
但是後來發現常常在做不科學的事,見人說人話,見鬼說鬼話,科學是假的,達成自己的目的才是真的。


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助


網頁的平面設計稿要注意哪些事?

常常被團隊的工程師說你的平面設計稿無法做成網頁? 設計師和工程師常常吵架?
一個要做成網頁的平面設計稿有哪些要注意的呢? 請看此文的概略介紹。

上面有一個 ppt,如果看不到 ppt 請點此連結

內容摘要:
一、請使用 RGB 色彩模式
1.色彩模式: 不管原始稿件是什麼,通通要轉成 RGB
2.網頁色彩表示法:

  • 規範的英文名稱(如 Green, Lime)
  • HEX 16 進位 (如#000000)
  • RGB/RGBA (如rgba(255,255,255,.5))
  • C60 Y50 不要報 CMYK 色碼
  • Pantone 600 號 不要報色票號碼
  • 馬卡龍綠、Tiffany 藍、珍珠白、土豪金 請講色碼,不是形容詞!

3.印刷會有色差,電子產品螢幕一樣會有色差

  • 使用者螢幕沒校色
  • 使用者色盲
  • 濾藍光模式
  • 校對時都用投影機討論
  • 戶外背光情境

二、網頁常用的圖片檔案格式

  • JPG
  • PNG
  • GIF
  • SVG

大原則: 色彩鮮豔度、壓縮品質降個10%,不一定每個人都看得出來,
但是檔案太大,載入很久,每個人都看得出來!

三、請同時考慮內容超長與沒有內容(empty state)的情況

  • 因狀態變更,或是不同情境、不同語系、特別多的金額或數字長度…會讓同一個區塊裡的內容長度不一,造成內容超出背景圖,跑版…等情況。
  • 標題超長時如何呈現?
  • 內容超長/超寬時如何呈現?
  • 你畫的輸入框可以容納幾個字? 輸入 email 時會被畫面切掉嗎?
  • 超寬的東西(如表格、頁籤),在不同寬度的螢幕會如何顯示?
  • 沒有資料時如何呈現?

範例1: 空的購物車表格
這種情況也是很多新手工程師易犯的錯誤,沒有內容時,畫面上也會顯示空的表頭、頁數、不能點的下一頁按鈕、空的麵包屑箭頭…
範例2: 多語系文字長度問題
同樣的字型大小,因為英文的字數較多,所以文字會超出原來的底圖。
範例3:不要拿著平面稿說「請設定寬度在可以剛好斷在一行的地方」,隨語系、使用者瀏覽器設定,每個裝置剛好能顯示一行的寬度可能大不同。

四、網頁中文字型
1.如果目標客戶都用Windows,而且頁面都是中文字…

  • 只能用 Windows 內建的字體,一般的網頁中文字體: 新細明體、標楷體
  • Windows Vista, 7, 8, 8.1, 10 才有的微軟正黑體

2.繁體中文與簡體中文 Windows 的內建字體:

  • zh-cn: 宋体(simsun/nsimsun)、黑体(simhei)、楷体(simkai)、仿宋(simfang)
  • zh-tw: 細明體/新細明體 (Mingliu/PMingliu)、標楷體(DFKai-sb)、simsun、simhei

3.要用其他字型呢?
解法A: 使用 Webfont
付費

免費(連圖庫費/設計費都不想出的客戶,還想叫他花錢買字體?)

  • Google Fonts (FREE,英文字型為主)
  • Adobe Edge Web Fonts (FREE,英文字型為主)

解法B: 通通做成圖片

  • SEO: 差,現階段搜尋引擎不會辨識圖片內的文字是何種語言,更不會把圖片中的文字建立索引供人搜尋。
  • 高解析度裝置: 圖片看起來是糊的。除非出好幾套圖用 srcset 來切換。
  • 行動裝置: 圖片縮得很小,需要一直縮放滑動看內容?

五、想想其他螢幕尺寸的使用者
1.第一屏(First Screen) 概念
2.不要只依螢幕尺寸來決定操作行為與畫面,還要依裝置的特性。

  • 12.9 吋的平板 : 還是以觸控操作為主,不能有「滑鼠移入」才會顯示的東西。
  • 10 吋非觸控型小筆電 : 以滑鼠操作為主,不一定要像行動版一樣間距與按鈕做很大。

3.想想電腦

  • 排列組合: (常見螢幕比例 4:3、16:10、10:9) X (常見電腦螢幕尺寸 13吋~27吋)
  • 視窗沒放到最大,Mac 的工具列很高,瀏覽器灌一堆工具列…

4.想想行動裝置

  • 尺寸 4 吋手機 ~ 13 吋平板 都有
  • 考慮「滑鼠移過去才會…./ 滑鼠移過去才知道….」的內容在行動裝置會如何顯示?

範例1-太寬的東西在行動裝置上會變怎樣?
範例2-高100%滿版圖片在實務製作上常發生的問題?
範例3-圖片上字很多的廣告圖遇到 fit screen 規則的 RWD 網頁。淘寶網,或是一些國內的商城/開店平台的商品介紹圖文,已採用電腦版與行動版分開建置的方式,讓載入速度最佳化,編排最簡易化。
範例4-responsive-background bad example

六、想想各種狀態的視覺樣式
1.介面操作元件狀態

  • 作用中
  • 已停用
  • 不能點的
  • 可以點的
  • 載入中
  • 處理中
  • 可選取
  • 已選取
  • 單選
  • 複選

2.超連結

  • 已訪問過
  • 一般連結
  • 強調連結
  • 滑鼠移入
  • 按下連結

3.其他

  • 登入前/非會員/登入後
  • 操作步驟/操作未完成
  • 正常運作
  • 發生錯誤
  • 無資料狀態
  • 指引

範例: 未登入/登入前會顯示不同內容,原來的底圖就放不下了

七、避免做出難以切割的版面
1.版面是由一塊一塊的平面矩形區域構成,然後再依各種屬性去控制矩形區域。
2.對一塊一塊的東西可以控制:

  • 內容置中、置左、置右、外部置中、置左、置右
  • 絕對位置/相對位置/水平位置/垂直位置
  • 背景圖延伸、背景圖位置
  • 外框線/圓角/陰影
  • 寬度/最小寬度/最大寬度
  • 高度/最小高度/最大高度
  • 上下左右向外留白/向內留白
  • 2D 變形(旋轉、扭曲…)、3D變形
  • 使用其他元素(SVG, Canvas),做出不同的形狀。

範例1: 做一些特殊形狀時請先想想…
範例2: 只是字打一打放上去嗎? 用 Outline/Border all Elements of Site for Quick Development & Debugging 看看蘋果的產品宣傳網頁...

八、不食人間煙火
1.提案的設計稿太美好,實際使用上…

  • 與實際產品或網站形象落差太大
  • 後續難以維護
  • 預算或科技無法實現的功能
  • 合約上沒有的功能

2.有時候是溝通問題

  • 設計師不夠了解客戶
  • 設計師不夠了解團隊成員的能力/產品功能
  • 有人沒那個屁股,硬要吃...

範例1:圖片比重佔很大的版面範例
範例2:特殊形狀的版面範例
範例3:特殊媒材(如影片背景)
範例4:維護成本高

九、不要做合約上沒有的功能
範例1.以登入畫面為例
範例2.以線上刷卡畫面為例
1.資訊流概念,以新聞列表為例,它的資訊流與程式設計流程要考慮那些東西呢…?

  • 資訊: 日期、時間、標題、內文、新聞分類、封面圖、作者資訊、社群分享、點閱數
  • 如果標題很長,會變兩行,還是超過多少字變點點點? 標題字數上限是?
  • 封面圖是另外上架,還是直接抓取內文的圖,大小比例是?
  • 沒有封面圖時,要顯示網站 logo,還是暫無圖片,還是有另外的編排?
  • 新聞摘要是新聞內文過濾掉 HTML 的前 XXX 個字,還是摘要與內文分開建置? 新聞摘要要取幾個字?
  • 點擊 more 會發生什麼事? 換頁? 原頁展開內容? 動畫效果?
  • 點閱數計算方式? F5 就算一次/ 30 分鐘內重複 IP 的不計算/ 自動 Double 制? / 後台可以改每則的點閱數?
  • 一頁顯示幾筆新聞? 排序方式是? 依發布時間? 依人氣? 依分類? 置頂功能?

2.時間/預算是否足夠?
「就跟 FB / Google / 淘寶 / XX 商城一樣的功能啊,滿常見的,套一套就好,應該不難吧!」

  • 超炫效果……但是在某些裝置/瀏覽器看不到,或是花許多功夫做 fallback。
  • 加入最愛/追蹤清單/商品比較/線上即時通知/即時留言
  • Infinite scroll, SPA… Ajax 載入的東西常常要對 SEO 多做很多處理。
  • 邊打邊列出搜尋結果/ 自動列出建議搜尋結果 / 全站全文模糊比對搜尋 / 搜尋圖片內的文字
  • 自動列出相似建議項目 / 推薦項目…推薦機制或算法會自己生出來嗎?
  • 更動第三方串接系統的流程與畫面…你簽約的系統有提供此功能嗎?
  • 系統自動顯示即時運送進度、付款狀態…沒串接任何金物流,系統要怎麼知道貨啥時到了,啥時有進帳?

你的預算跟 FB 或 Google 一樣高嗎?

  • 所以說,那個伺服器效能 / 資料庫效能 / 瀏覽器效能 / 載入時間 / 伺服器負載 / 人力成本呢?
  • 讓瀏覽者可以自己上傳 / 想讓使用者保存任何資訊/ 想保存使用者的任何資訊前,請考慮資安/系統負載/空間問題,對一些不成熟的系統或技術團隊來說是非常可怕的。
  • 口袋夠不夠深,找不找得到對的團隊?

十、團隊忌諱: 換了位子就換了腦袋

  • 情境1
    (視覺設計師常聽到的)…客戶:「交給你專業的! 怎樣做都可以」
    (前端/後端工程師常聽到的)…美工: 「code 你寫的,你決定就好!」
    結果做出來之後改東改西。

  • 情境2
    (視覺設計師常聽到的)…客戶:「每種顏色跟字體都配一版讓我挑!」
    (前端/後端工程師常聽到的)…美工: 「通通做成可以在後台開關設定控制、模組化、熱插拔就好啦!」

  • 情境3
    (視覺設計師常聽到的)…客戶:「我把照片跟文案都零散的貼在Line上面了,你再排成專刊就好,應該很快吧?」
    (前端/後端工程師常聽到的)…美工:「我圖都做給你了,照著做就好,應該很快吧?」

  • 情境4
    (視覺設計師常聽到的)…客戶:「先排版面,文案跟圖片以後再補給你。」
    (前端/後端工程師常聽到的)…美工:「先寫程式,版面出來了再做調整。」

十一、其他網路文章
如何讓公司的平面設計師交出可以用的 Web 圖? « 嫁給RD的 UI Designer
解放吧!設計圖應該跟Web實作是一致的
平面設計和網頁設計的區別 - ㄇㄞˋ點子靈感創意誌


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助


為什麼不再用免費 php 架站套件做網站

以前年輕不懂事,用一些網路上開放原始碼的網站套件幫人架站,如 Wordpress, Opencart, ECShop, Joomla...之類的,免費、好用,功能比自己寫的強太多,php 的伺服器相比 ASP.Net 也比較便宜,基本需求空間 1GB/流量10GB 的虛擬主機加域名,一年甚至不到一千二就可以打死。

用架站套件輕鬆就可以做出堪用的網站,不會像自己寫程式一樣挫折感這麼重,三不五時被浮點數乘除運算、時間日期四則運算、許功蓋、SQL injection、效能問題困擾,想要的功能做不出來,做得出來的很難用...各種莫名其妙的小問題浪費生命。

最後悔的就是上網寫分享文章,教大家如何把洋人做的網站套件,那些西式地址/州/姓/中間名/運送方式/付款方式,調整成符合台灣在地國情的,介紹系統有哪些好用的擴充套件,哪些步驟會造成 bug,要如何自己修復;如何透過簡易的修改幾行程式碼,做出本來網站套件沒有提供的功能。

後來才發現,為什麼一碗滷肉飯沒辦法賣到好幾千塊? 大家可以接受的滷肉飯價錢上限到哪邊? 真正的高手都在忙著做高級西餐,或是「教人」做滷肉飯,更高的高手會把滷肉飯包裝成紐奧良嫩淋豬肉套餐,這種「讓人家遇到問題時就可以 Google 到解法的網路教學」,可以帶來流量,一些小額接案收入,累積一些經驗,但沒辦法成什麼大事。

那麼,一些免費的 php 架站套件有哪些缺點呢? 為什麼不再想用免費 php 架站套件幫人做網站?

一、很多人說 PHP /某技術不安全?
一些不是寫 PHP 的公司常把這句話掛在嘴上,寫 PHP 的公司偶爾也會掛在嘴上,為了製造恐懼,販賣更多商品給客人。開發人員通常也可以講出真的有那些寫法,其他語言只要寫幾行就可以用得很安全,但 php 要顧東顧西之類的。但使用者幹嘛了解這些技術內容? 為了怕買到黑心食品,所以要先取得食品化工博士頭銜才能逛超市的概念嗎?

PHP /某技術不安全這句話根本一點道理也沒有,工具就是工具,問題是在於使用工具的人,Facebook 也是 PHP 寫的,有人敢發誓他自己用其他語言重新去寫,一定可以寫得比 FB 更好、更安全?

不管用什麼後端開發語言,ASP.Net,RoR,只要是人類寫的,都有可能會出問題,不相信? 去一些以不是 PHP 為開發主力的公司待個一陣子,會發現大家還是整天在 debug,整天訐譙這段 code 是哪個前人寫的,問題單填到手軟,工程師整天開會跟解 Ticket,聯絡窗口常常跟客戶賠不是。

二、開放原始碼,網路上的鄉民都能維護,服務不間斷?
大同電鍋可以當傳家之寶,但是資訊產品買一個用一輩子是不可能的,Office 2003 跟 Adobe CS4 常遇到開不了的檔案,還在硬撐的也快撐不住了。看看那精美的 OSCommence 與 ECShop,開放原始碼的玩意兒還是有可能中斷維護,還有各種鬧分家或拆夥的開放原始碼軟體。

另外再講一個概念,開放原始碼的程式套件「有在持續維護」,跟你的網站使用開放原始碼的網站套件架站,遇到問題,「有人可以替你解決問題」,這完全是兩回事。

網路上好用的工具非常多,但還是有人捧著鈔票去請人幫忙處理問題。聽說現在國人資訊水平非常高,但手機行、資訊公司還有一堆客服人員每天待命替人民服務,為什麼? 因為總會遇到自己無法解決的問題。這個是要喝牛奶,沒有必要家裡就養一頭牛的道理。

三、需要時常更新
每隔一陣子就有「Joomla出現資料隱碼攻擊漏洞,數百萬網站曝險」或是「WordPress 4.2.2 修正重大漏洞:趕快更新避免成為 XSS 攻擊基地」,這種新聞,現在不是資訊封閉的時代,不是報紙沒寫、新聞沒報,那件事就當作沒發生。其實在臉書的塗鴉牆、社群軟體的朋友圈、群組,總會被人看到。

避免安全漏洞,所以要趕快更新,但是更新了又有可能產生新的漏洞,所以又要再一直持續不停永遠連續不斷的...更新。當然心臟夠大,也可以賭一下,硬是不更新。

改天一覺醒來發現網站上不去,以前辛苦建置的資料灰飛煙滅,或是網站的選單、標題、內頁被塞了一堆 consolidate payday loans 或 abortion pills 的廣告連結,或是許多客人反應接到詐騙電話,電話那邊的人可以唸出他幾月幾號買了啥東西......。

道高一尺,魔高一丈,今天的網站超安全,沒有破解的方法,但明天說不定就有了呢!

四、把系統調整得很人性化,然後呢?
本文一開始說,身為一個專業人員,當然想提供客戶更方便好用的產品,於是會調整一些不合國情的地方,或是想辦法做出覺得是常見功能的功能。但這些善意,遇到網站程式更新呢?

因為這些細部調整可能動到系統核心,例如 Model 跟 Controller 的部分,或是主要 Function,或是改到語系的翻譯檔案,造成系統後續難以升級更新,或是每次升級後又要重新調整一次,花費超多時間在維護上,讓網站可以安全正常運作,但沒人看得出來,也沒人會感謝你。但網站一壞掉呢? 就糟糕了。

就算更新成功,看起來好像沒啥差別,感覺變安全了,但安全是看不到摸不著的東西。馬上看得到摸得著的是遇到套件不相容,所以要先把出錯的套件停用。如果套件超重要,還得找替代方案。難道要網站先公告維護中,等套件作者哪天更新了,再開放網站? 就跟餐廳的 POS 機或打卡機故障,所以大家先放假幾天,等機器修好了再繼續營業? 生意是這樣做的嗎?

還有一種情況,升級之後,本來要用擴充套件+自己硬幹/請別人另外做的功能,在新版本突然就內建了,一則一喜,高興的是英雄所見略同,一則以悲,又浪費了自己的時間,而且官方更新後內建的還更好用。不禁要吶喊 3C 界的經典名句「早買有 BUG,晚買有偷料 早買早享受,晚買享折扣!」

五、免費的最貴
網站用免費架站套件作的,那把整個網站做起來,就一毛錢都不用花嗎? 設計師跟妓女一樣是服務業,叫人來家裡吃魚喝茶,什麼都沒幹也是要付錢,同理可證,付錢的不一定是大爺,但是要請別人服務就是要付錢。那有需求的時候自己解決呢? 自己的時間成本就不是成本嗎?

請人專案開發一個網站,需求訪談與校對老半天,需要數周或是數月才能得到一個網站,一時看膩了「想換個方向」,可能再產生額外費用,而且靈活度可能還非常低,想要再改什麼還要再加收費用。反觀用免費架站套件,主機便宜買,架站套件免費用,擴充套件任你試,版面任你改,佈景主題換到爽,初期的建置成本超低。那這樣就完美結局了嗎?

自己在外面上班,公司業務性質是客製化網站,常碰到有一類客戶:以前找 SOHO,或是親戚的小孩用免費架站套件做了網站,也真的有在用,但是以前的產品無法解決現代的問題,人的慾望跟需求總是會不斷產生,用熟了之後發現功能不足,或是對手有哪些功能,但他沒有;或是生意做大了,開始使用 ERP,有一些資料匯入匯出或串接的需求;或是想串接一些物流系統;或是想提供一些線上付款方式;或是維護的親戚小孩消失了......

有新需求,起初他們還是會找當初幫他們做網站的人,但常會得到一些:
「這個是套版的,要那樣改的話很麻煩。」
「這個是輕量級架站套件,你那種需求我得要另外找一套重做。」
「這個擴充套件當初它的功能流程就是這樣。」
「我要再去哪邊找哪一個套件,然後再翻成中文才能給你用。」
...之類一般人很難懂的回覆。

架站套件的好處是,滑鼠點一點裝套件、裝佈景主題,方便的上資料,每一個基礎功能可以輕易的達到 60 分。但是從 60 分到 100 分的過程卻有可能辛苦萬分,要是提出的需求是世界上現有的擴充套件都沒有的,像綠界藍新都有提供 Opencart 的套件,但如果你要串台灣某些地名銀行的金流呢? 就得另外再開發了。

額外製作的功能可以做到多完整? 多快可以做出來? 這些免費架站套件通常功能太強大,常常難以改動它的系統流程,改不出來是剛好,改出來問題也不少,要祈求自己碰到專業人士,不會白花一堆冤枉錢,做出不能用的電子垃圾。

客製化網站的壞處是要花許多時間去溝通,好不容易把您提的需求做到 60 分,其餘你沒特別講的小功能卻只有 5 分,但是從 60 分到 100 分的過程,有機會比較不這麼痛苦。基本上只有「這個多少錢?」「多快可以做好?」的問題,比較少那種因為套件 OOXX 所以 XXOO...的問題。

至於專門使用架站套件幫人做網站的專業公司,對於常見的功能需求,一定都有自己開發出的套件或流程,他把你的網站程式拷貝走,看一下你提供的串接文件是否有新功能,把之前做的套件裝上去、測試是否能動,就可以通知驗收了。但是我不是超強全端工程師,也不是超強外包神人,只是渺小的個人,無法提供這麼完善的服務,所以有高級的需求,還是直接請客人找那些公司就好了。

六、好用的免費線上網站建置工具(Website Builder)太多
這年頭要把資料放在網路上讓大家看,做簡單的方法就是開部落格、到社群網站上開個帳號,或是做一個網站,要做網站的話,除了用免費購物車套件自己架/請人架、買智邦之類的套版網站、請人專案開發,近幾年來又多了一種選擇: 線上網站建置工具(Website Builder)。

常見的線上網站建置工具,如 Weeblywixwebnodesquarespace, jimdo, WEBYDO, Strikingly...族繁不及備載。

這年頭擁有資料編排與美工能力,可以自己更新網站的人也越來越多。就像戲稱國軍的最低錄取標準是能跑能跳會講話,網站編輯者的最低錄取標準是會用部落格的。

這些線上網站建置平台就跟免費部落格差不多,電腦不用灌 Dreamweaver,也不用把 html 學得比一些新手美工還強,更不是只給一大塊空的編輯框,不知道從何排起。

這些線上網站建置平台通常標榜「幾分鐘內做好一個網站」,提供各種版型任你挑選套用,可以任意添加頁面,還有方便的資料建置方式,例如可以透過功能模組或現成的範本,方便快速的編輯各種內容與效果套件。可稱為世界上最接近所見即所得的網頁工具。

還有,也不用太煩惱伺服器費用、系統更新、安全性之類的問題,有些線上網站建置工具甚至還有提供自訂域名、購物車、線上金流、自適應版面 RWD、會員系統、線上聯絡表單...各種基本的功能都有呢!

相較於有些網頁公司,一年繳了幾千塊、幾萬塊,只能「讓網站開得起來」,要更新就要收錢,要改版加功能還要再收錢,這種線上網站建置工具真是太划算了。

那麼,這些 Website Builder 真的就這麼完美嗎? 有哪些缺點?

首先第一個問題,
中文化、在地服務化不是這麼完善,因為這種平台大都是國外開發的。

例如:

  • 後台都是英文,軟體的東西,有些人連中文介面都不一定會用了,更何況是英文?
  • 網站的「中文語系」是簡體中文,或是繁體中文用簡體中文的字體,或是充滿大陸用語的繁體中文,如菜單、任務欄、剪切、回車...
  • 平台提供的線上金流功能,都不是一般的台灣人聽過/敢用的,如果要另外串接? 沒辦法,頂多只能用豐掌櫃/智付寶/紅陽的「網頁收款鈕」功能(在網頁上放一個預先設定好金額的超連結,消費者點過去就可以刷卡、轉帳...付款)。
  • 分享設定、社群連結、插入第三方內容等工具,都是針對西方常用的社群服務去規劃,如分享到 FB 按鈕、FB 按讚按鈕, 快速插入 Youtube 影片, 嵌入 Twitter 名片或最新推文...,如果要快速插入土豆網影片、與微博同步發文、分享到 Wechat、分享到 Line 呢? 只能自己寫 html,或是根本無法調整。

第二個問題就是客戶服務,
不會有網頁公司的年輕小妹或小鮮肉在旁邊操作給你看,
不會有人提供行銷諮詢或任何有效的諮詢。
沒辦法丟一些亂七八糟的東西,然後等它變成精美的資料,
用這種線上網站建置平台,內容都要自己排,無法有花錢當大爺的快感。如果自己不會操作,或是編輯時卡關,沒辦法打電話求救,也沒有 Line 群組可以讓你丟問題。更無法直接殺去公司,請人操作給你看。

可以做的就是寫 E-mail,然後等客服不知道民國幾年回一封答非所問的信。或是問線上客服,然後看他會不會用罐頭回應來應付你,或是三天兩頭找你去參加他們的付費教學課程或付費加值服務。

一切都得自己學,或是另外再請外包人員來幫你處理。


第三是連線問題,
像我前陣子發現部落格有從 weibo 來的的流量,連過去看 weibo 留言,發現有許多中國大陸的同志們竟然要翻牆才能看到 logdown 平台的文章,我沒有買自己的域名,看來是 logdown 被牆了。那其他的線上網站建置平台,在中國大陸是否也會被封鎖? 或是只有有些地區看得到? 如果客群是做兩岸生意的,就得先試一下。

第四是怕平台常常維修,或是無預警關站,
要給重要的客人看時......「亞洲區伺服器系統維護中。」
資料處理到一半......「系統發生錯誤,請重新再試一次。」
一陣子沒上去看,竟然連不上,結果發現垃圾信裡面有一封「服務結束通知」....。
結果你的精美文案、產品資料、會員資料都在上面拿不出來...。

這四項都是線上網站建置工具(Website Builder) 的缺點,
在大陸不能連線,對有些企業來說是致命的,
要自己拍照排資料,對有些人來說是辦不到的。
多說無益,資訊產品就是要用了才知道哪裡不足、哪裡不好用。

Weebly 很棒嗎? 自己的網站/行業適合嗎?
Wordpress,Opencart 很棒嗎? 網路上有討論區、FB上面有社團,都可以先去看看前人碰過哪些問題與需求。
祝大家生意興隆,找到理想的網路做生意方法!


延伸閱讀:
mrmu 設計工作室 » 為什麼你不該使用WordPress Plugins?
免費資源網路社群 - 殺手級 WordPress 體檢項目:101 個網站必須遵照的原則!
免費的網頁空間最貴 « 要改的地方太多了,那就改天吧


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助