前幾天才看到一篇文章You Don’t Need A UI Framework,一位需要在一個產品一再重複打磨的 in-house 外國工程師,出來講說大家做產品不應該用 Bootstrap, Material UI, Ant Design 之類的 UI Framework,讀了之後有點夏蟲語冰之感,工作型態百百種,就像一個不愁吃穿做興趣的私廚出來分析說早餐店不該用料理包、組合肉、現成化工調味料,不該用水果茶粉/奶茶粉來泡飲料、所有食材要當天採買的,要為客人的健康和餐飲業的未來發展著想 blahblah…

過沒幾天就在FB討論區看到一篇,一位從臉書個人檔案看起來是這個月在某上市櫃公司上班沒幾天的人,發文說改樣式改到火大。

一看 html 的截圖非常精彩,一個看起來像是應該要做水平捲動清單的東西,設了一大堆 Atomic CSS/Functional CSS 邏輯的 css className,還指名 Tailwind 這個現在很熱門的 CSS framework 出來罵。

從截圖可以發現一些值得討論的

但從截圖短短幾層 html makeup 就可以看到一些值得討論的,像是:

  • 有一堆 b1600, b1920, b429, b588, b868, b1366, b2209, b2618….這個我記得 Tailwind 本來是沒有的,應該是原 PO 的前人重新定義了一堆名稱用來當 breakpoint 用的? 而且要定義這東西還不是寫在CSS裡面,而是另外寫在 tailwind.config.js。另外可以外層容器上看到,不同可視區域寬度時上邊距會改變、清單項目的寬度會從一排6個…..一直到變成螢幕 4/5 寬度,除了 breakpoint 不知道裡面還定義了什麼好東西。
    這種命名邏輯的問題,大概就是未來某一天如果有新需求,例如某某寬度的時候標題或文字段落結尾不要落一個字,那是否又要再多一個 b350 之類的去控制文字尺寸或字距,還是讓 b429 對應到的不是 429px? 還是又要動 html,加上其他的 classList 名稱呢?
  • class='border-r-8 border-l-8 border-solid border-b-0 border-transparent' 不知原 PO 的前人為何要用透明的左右框線來當成清單項目的左右間距,而不是用 margin, padding, gap 之類比較普遍的作法,要是遇到那層 div 又要設框線樣式,或是 background, box-shadow 的樣式,豈不是很麻煩嗎?
    而且要用 js 取寬度做一些功能的話,offsetWidth 跟 getComputedStyle 含 border 寬度,clientWidth 不含 border 寬度,網頁寫到一半可能又稍微再卡了一下。
    var item1 = document.getElementById("item1");
    alert(item1.offsetWidth+","+item1.clientWidth+","+getComputedStyle(item1).width);//得到三個不一樣的數值
  • 有些設定似乎是多餘的,外層都已經設 flex 了,whitespace-nowrap 跟內層的 inline-block 應該可以拿掉了。但也有可能是為了不要讓不支援 flexbox 的瀏覽器顯示時爆掉,才加的 fallback?
  • 對完全沒用過的人來說,改網頁時要怎麼知道哪些名稱是 Tailwind 內建的,哪些是前人另外寫的? 例如在深色背景介面時,text-red-600text-red-700 哪個顏色比較亮? border-r-8 的 8 是什麼單位? 8%? 0.8%? 8px? 某種 rem+calc 的算式? 要增加樣式規則時,要怎麼很快知道Index of CSS properties – w3c 上的幾百個 css 屬性,或是一些特殊的 selector,哪些名稱在 Tailwind 有內建,哪些又要自己另外寫?
    還有這種現代 css framework 用了很多 CSS variables var(--xxx) 的寫法,會不會改一下變數,又讓不知道哪邊的東西壞了? 還是為了保險起見,自己再取一個新的 CSS 變數名稱來用? 這樣又回到本段一開始的問題,怎麼知道哪些名稱是 Tailwind 內建的,哪些是另外寫的?
    名稱加得越多,就大大增加了開發與維護的成本,要改一個網頁,不只要看 CSS, html,還要多開一個查 tailwind 文件的視窗。而且搞不好 CSS 裡面還定義了一堆 .page-home .mt-4.page-product .mt-4,不只同一個 mt-4 在不同頁面會有不同數值,還一堆樣式寫在 mt-4 上面,只要想說要改一下上外距,改成 mt-3 然後世界就崩塌了…

當然有些是預想以後可能會發生的問題,但有些需求可能一輩子都不會產生。原 PO 壓根兒沒有具體列出他目前碰到那組 code,有遇到什麼想做但是做不出來的,想改但是改不動的?
只記得從一個留言回覆看到他說對於 div 上要要用偽元素設定一些樣式的時候,豈不是又要再取名字? …之類的,這點其實說得滿有道理,用這種 framework 看似可以稍微縮短盤古開天初期的混沌,多人協作時至少有個基本的準則,但為了需求或使用者體驗,最後還是免不了要自己寫樣式,然後後續走上又要整天想著要取什麼名稱、用 devtool inspect style 的老路。

Tailwind 官網文件搜尋有夠難用

對於像我手刻派,之前也碰過 Bootstrap 跟 Tailwind 的人來說,有些名稱其實滿直覺的。
但對於沒用過的人來說,或是之前在研究時,發現 Tailwind 官網文件有個問題,就是不少東西無法直接很快搜尋到?... 繼續閱讀⇢

許多網站後台的內容編輯區會採用「一條工具列和一大塊輸入框,要什麼就自己做。」的功能,通常會用 CKEditor 作為所見即所得線上內容編輯器(online WYSIWYG HTML editors)。好用的線上編輯器其實不只 CKEditor ,還有另一套 TinyMCE 也不錯,只要套件夠多、操作穩定、還有在維護、從 IE8 到 Edge 都支援、可以直接點兩下重複編輯現有內容,可與圖片上傳套件結合,滿足上述幾點,就是一個成熟的編輯器了。而且授權方式也很自由,簡直是佛心來的。

以提供「一條工具列和一大塊輸入框,要什麼就自己做。」的功能來說,CKEditor 是個方便好用的開放原始碼工具,但如何讓它更好用,就得依賴神調校了。只要在 config.js 裡面加入一些屬性,馬上就可擁有更理想的操作體驗。

0.抓對版本

從 CKEditor Builder 下載時,會看到分了三種版本: Basic, Standard, full,一般人避免夜長夢多,通常會直接下載 full,但偶爾還是會遇到明明應該有的功能按鈕,怎麼樣都叫不出來,因為 CKEditor Builder 預設值的 full 裡面的 plugins 不是最完整的,實際上還有 “full-all” 的版本。五種版本的功能比較表可見 CKEditor Presets,完整的 plugins 資料夾可到 ckeditor-releases 的 github 去下載。

1.把多餘的功能按鈕藏起來

出社會後有一個法則,叫做多做多錯,與其把所有功能開放給客戶使用,第一眼就讓人覺得很複雜、不想學、不會用,增加使用者失誤、手殘、耗費口舌解釋,但對方又聽不懂的機會,倒不如只開放一些必要的功能按鈕即可。CKEditor 預設的全功能按鈕有這麼多,如何把不要的藏起來呢?

第一種方法,可以使用官網的 CKEditor Builder,選擇要那些功能套件、哪種主題面板、哪些語言,選完之後就可以產生一個做好的檔案。先決條件是有耐心跟時間,去看那串 plugins 清單。

第二種方法是減法,使用 config.removeButtons,把不要的按鈕停用。
config.removeButtons = 'Subscript,Superscript';

第三種方法是加法,例如用 config.toolbar 設定,只把要用的顯示出來。
config.toolbar = [
['Bold','Italic','Underline','Strike','JustifyLeft','JustifyCenter','JustifyRight'],
['Image','Table','HorizontalRule','SpecialChar'],
['TextColor','BGColor','RemoveFormat','Font','FontSize','Source']
]

第四種方法,是下載 ckeditor 之後,裡面會有個 sample 資料夾,裡面有個 Toolbar Configurator 可以讓你勾選哪些要,哪些不要,並調整按鈕的順序。選完之後讓程式產生設定檔 config.js 即可,輕鬆寫意。

2.減低後台編輯樣式與前台實際網頁的差距

CKEditor 提供 Inline Editing 功能,最接近所見即所得的終極理想,但有時怕前台頁面特效太多,難以使用,或是網頁樣式與編輯器樣式衝突,還是會使用一個大編輯框在後台修改內容的操作模式。


inline editing 範例

但是這常常有個問題,就是前後台顯示得有落差。例如網頁是黑底白字,但是在編輯器中是白底黑字,很難編輯。或是使用者抱怨「後台排得看起來好好的,可是在前台又長得差很多」,這時候可以加入編輯器寬高設定,並載入前台的 CSS 樣式檔,讓編輯器中的換行、樣式與前台網頁接近一致。
例如我們在 config.js 加入以下程式碼
config.contentsCss = ['../../css/ckeditor.css'];
config.width=680;
config.height=150;

ps.程式碼不是死的,要依系統內對 ckeditor 的呼叫方式或套用區域不同,而做調整。

但是這樣只能讓前後台的編排顯示「接近」一致,因為 CKeditor 為了讓使用者辨識方便,會替表格加上一些虛線標示,這個虛線也會佔有空間,會讓編輯器中的換行與實際換行差距一兩個字。當然也可以硬改 CKeditor,取消表格的虛線標示。

3.預先排好樣式或區塊,讓操作者套用。(內容範本與預設樣式)

如果您要使用者按一個鍵,本來空白的編輯區突然跑出一大堆東西,那可以使用 Templates 功能。

可載入預先建立好的編排版型,範本設定方式與呼叫方式請上網搜尋 CKEditor Templates。

如果您要使用者建立一個表格之後,再按一個鈕,表格變成會隔行換色,有花花綠綠的背景,那可以使用 Styles 功能。

詳情請見 Styles – CKEditor Documentation

4.避免 CKEditor 自作主張轉換你的原始碼

是否遇過頁面在編輯時好好的,送出之後也好好的,但是再回去編輯時,html 或 css 卻被自動轉換了,div 變成 p ,數值單位跑掉之類的? 因為 CKEditor 內建過濾機制,例如送出時會把沒有閉合的標籤補上 end tag,在載入編輯資料時,也會把一些空的 html 標籤,或是一些特殊的語法轉換、過濾成它覺得正常的語法。詳情可見 CKEDITOR.filter

我們可以在 config.js 內簡單的透過這個設定,讓 CKEditor 不要管太多。
config.allowedContent=true;

這種是否自動轉換的選項還有很多,例如從剪貼簿貼上相關的(如貼上時轉成純文字),從 Word 貼上相關的,勘誤與自動校正相關的(例如少了結尾標籤,CKEditor 會自動補上),詳情請查閱公開說明書。

5.調整字型大小

Gooogle Chorme 瀏覽器有「最小字型大小」的限制,預設值為 12,這設定的意思是 font-size 1~11px 的字型,都會顯示成12px。在 CKEditor 中預設提供的字型大小設定中,很不巧前 5 個幾乎是無用的設定,建議另外再設定過。另外中文有一些地雷 font-size,也應該避免。


預設字型大小-調整前

在 config.js 內加入,斜線前面是顯示用的名稱,後面是真的套用的值
config.fontSize_sizes = '12/12px;13/13px;16/16px;15/15px;18/18px;20/20px;22/22px;24/24px;36/36px;48/48px;';

2023/1 更新: Chrome 118 中移除了 12px 最小字體的限制

在 Chrome 118 之前的版本中,如果字型小於 10 像素,則系統無法依指定方式呈現,但如果語言是阿拉伯文、波斯文、日文、韓文、泰文、簡體中文或繁體中文,則系統會將其四捨五入。開發人員必須設法轉譯小型文字,例如使用 transform 屬性。
自 Chrome 118 版起,所有語言都會解除這項限制,使七種語言相符。這項變更改善了與其他瀏覽器的互通性。

相關資訊可參考
正式推出 CSS 的四項全新國際功能 – Chrome for Developers Blog
Issue 36429: The ... 繼續閱讀⇢

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

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

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

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

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

假設你在解析度 480*853 (Samsung) 的手機上製作頁面,把大部分的東西都設定最小寬度或是固定寬度 400px 以上,那在解析度 320*568 的 iPhone 5s 上看起來可是很慘烈的。

所以調整 RWD 網頁要記住第一個原則,買一支跟老闆和客戶一樣的手機,或是把老闆和客戶的手機螢幕解析度背起來….啊不是啦!

1.多用百分比之類的寬度,寬度不要設定太多固定數值。畫設計稿時也不要把網頁元件排得太寬,如下圖超簡易的範例。

2.有時候可用圖示、placeholder、blur 自動驗證之類的功能,來取代按鈕,或是太多的提示文字。

要看網頁在行動裝置上長怎樣,可以利用一些模擬器,最容易安裝與使用的應該算是 Chrome Developer Tools 裡面的 Device Mode 。也可嘗試一些線上工具,如 Screenfly 或 Mobile phone emulator (by COWEMO),要看 iOS 可以用 iOS simulator,不過模擬器畢竟是模擬器,系統的中英文字體顯示、不支援的元件、翻轉螢幕、輸入文字時鍵盤跑出來、觸控行為、跟實際用手機瀏覽的感覺還是很有差異。

我的話通常會使用瀏覽器的 device mode 工具,縮放網頁的寬度與高度,看看會不會在任一寬度產生不美觀的畫面,或是重大操作問題?然後在 iPad 跟 Android 手機實際各走一遍流程。

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

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

會遇到一個屬性叫 orientation:portrait 與 orientation:landscape,有些網路上淺顯易懂的中文網頁設計教學會簡易的說它是「螢幕方向」是垂直或水平,但如果查閱 W3C 或 MDN 中的屬性定義,它並不是真的表示裝置方向/螢幕旋轉方向,而是「螢幕可視區域的高比寬還大(The viewport is in a portrait orientation, i.e., the height is greater than or equal to the width.)」或「螢幕可視區域的高比寬還小」。

嗯? 螢幕可視區域跟整個螢幕差不多吧,不就是螢幕打直跟水平嗎? 身為資訊人,永遠要考慮例外情況、故障情況會發生什麼事。
例如這個情況,造成手機裝置方向是直立的,卻是 landscape 的情況,螢幕可視區域的高比寬還小,你想到了嗎?

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

3.別忘了使用者會修改瀏覽器設定

有時候會在文字段落區塊或容器區塊設定固定高度,讓區塊不論內容多寡,都可以整齊顯示成一樣的高度,不會忽高忽低。但會發生使用者反應「兩行字疊在一起啦」「字顯示到一半就被吃掉啦」,自己試了又沒有,到底為什麼呢? 有些把顧客當白癡的公司,或是深諳業務技巧的人員會說這是「手機壞了」「個案」,但真的是這樣嗎?

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

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


華碩瀏覽器


Chrome for Android

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

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

那要如何避免文字因為瀏覽器的設定而被強制放大呢? 無解。

以前可能聽過用 pt 單位設定 font-size,或是設定 text-size-adjust:100% 的秘方,但後來除了 iOS,其他的也已漸漸不支援了。或是還有用 transform : scale 來把放大的字再縮回去的祕法,但是你得先知道使用者把字放到多大。

還有一招最不是方法的方法,就是把字通通做成圖片,就沒有什麼因為調整「最小字型大小」而導致跑版的情況。

但畢竟能隨意放大才是體貼使用者的行為,美觀只是一回事,能讓使用者看清楚網頁上要傳達的文字訊息才是真的。但是工程師替使用者著想,誰來替工程師著想? 下次又遇到此問題時,除了請使用者把「最小字型大小」調回預設值,或是一些奇巧的業務嘴說法,還有別招嗎?

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

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

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

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

4.以前電腦網頁常用的輔助輸入元件,在行動裝置可能很難用

現代的網頁/web程式常常都有一些輔助輸入的網頁元件,例如小日曆、自動完成功能、離開輸入框焦點時自動驗證、彈出訊息、modal box 前景小操作視窗 …之類的功能。

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

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

一些日曆元件在手機瀏覽環境下較難點擊,可以換成 html5 input type

例如 JQuery UI 的小日曆在手機上較難點擊,我們可以用 modernizr.js 或是簡易的 js UserAgent 查詢指令,在行動裝置上不執行小日曆,然後將 input type 改成 date,讓使用者用系統內建的日曆元件來完成日期的輸入(如上圖右)。

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
$(“#date”).datepicker(“destroy”);
$(“#date”).prop(“type”, “date”);
//(請注意日期格式要調整成跟 JQ UI 的 datepicker 日期格式一樣)

... 繼續閱讀⇢

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

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

Bootstrap 有哪些好用的特色?
  • 針對一些常見、常用的網頁元素和元件寫好定義樣式,有漂亮的按鈕,現代風格的表單,符合基本排版需求的網格系統等等,在 IE8 以上的主流瀏覽器都能得到統一的視覺呈現,減少一些新手自己手刻但又刻得很爛的情況。
  • 內建一些常見網站 UI 功能的 js,像多層下拉選單、tooltip、表格隔行變色、頁籤、收闔選單、頁面彈出視窗等等,可以快速做出看起來比較像樣的東西,
  • 還有許多以 Bootstrap 為基礎發展出來的 JS plugin,與 Bootstrap 無縫接軌。
  • 使用者多,討論多,資源也多,用的時候發現功能太少或是碰到問題,通常 google 一下 bootstrap carousel swipe 或 bs3 grid margin ,大致都能找到滿意的解答。

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

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

一開始用的時候很排斥

我是手刻派的網頁設計師(包視覺和前端的那種),從 Bootstrap 2 開始用,常常遇到以下情況:
– 什麼 12 格的網格系統,連個 5 等分都沒有? 版面視覺上還常常落在用 span4 太大,用 span3 又太小的尷尬地步,大概要切到 30 格才夠用吧。
– 每排一個東西,就要去翻閱落落長的文件,看有沒有剛好能用的 UI 元件或 html markup,然後常常都找不到合用的。
– 用上去之後,咦? 怎麼 glyphicon 沒出來? 原來是本機的 bootstrap.min.css 跟 iconfont 版本太舊,又要更新了。
– 用上去之後,咦? 怎麼效果沒出來? 原來是線上專案資料夾的 bootstrap.min.css 被人改得面目全非,根本沒法用。
– 用上去之後,咦? 怎麼效果就這樣? 還要再自己寫一大堆 css 把版面精緻完整化,那我怎麼不乾脆自己寫就好?
– 每次爬文件的時間,自己做都做完了。還是有一堆東西要自己寫,而且還要想辦法把 CSS 選擇器權重壓過 bootstrap 的 .table>tbody>tr>td 這種。
– 有夠不合國情,行距、標題邊距這麼大? 留白這麼多? 服務業的精神就是要知道業主需要的不是資訊清晰,讓人好讀好逛的網頁,而是視覺上看起來花錢花得值得的網頁。
– IE8 開起來怎麼會爛掉? 馬的,原來還要加一堆東西。

用習慣之後,就漸漸愛上他
  • 跟後端工程師溝通方便,例如「表單先用 bootstrap 排一下就好」「就用 bootstrap 的下拉選單,上次 XX 網站有改一個到第三層的」
  • 有完整的文件,訓練新人方便,基礎的網頁排版就用 bootstrap 排,減少看到奇怪包法(如 tr 包 li 再包 td),或是無人能懂的 class name 命名邏輯的網頁設計殺人案發生率。
  • 有些簡易的排版,連 CSS 都不用寫了,例如電腦螢幕上一排三個,手機上一排一個,不用寫半行 css,只要照 Bootstrap grid 規定的 html markup 排好即可。
  • 網頁常常臨時很趕要加東西,不用再去下載引入其他的 js 檔或 css,測試會不會套件衝突、jQuery 版本太舊 run 不起來、自己刻但是功能超殘障之類的….剛好 Bootstrap components 裡面就有能用的。

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

一、注意中文 font-size 地雷

我們先來看一張擷圖,擷圖中有 4 個文章段落,哪一段的字體看起來最不清楚?

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

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

諸位網頁勞工你用 Bootstrap 時 font-size 愛怎麼設都可以,但是就不要照預設的設,拜託。然後因為 ... 繼續閱讀⇢

一、Web Fonts(雲端字型技術)

客人說她的網頁上要用娃娃體,除了做成圖片,還有其他選擇嗎?

為了確保使用者在不同瀏覽環境也能看到同樣的字體,一般只能使用系統內建字體,如 Windows 系統的正黑體、細明體、標楷體。如有特殊需求,最穩定的方法通常只能做成圖片或 Flash,但除了網頁載入的負荷與日後維護的成本,也降低了網頁內容被搜尋引擎索引的程度,而且當圖片在高解析裝置上,或是需要放大時,上面的字也模糊不清了。

網路字型內嵌技術(Web Fonts,或是比較潮流的講法:雲端字型),解決設計師在網頁上使用特殊字體的問題,瀏覽者的電腦不須預先安裝字型於系統內,也不須網頁載入瞬間就要下載整個好幾十 MB 的字型檔,就可以讓網頁的文字顯示額外的字體,設計師可任意的改變網頁上的文字樣式,輕鬆為網頁增添豐富性。

較知名的幾個 webfont 服務
– Google Fonts (英文,免費)
– Adobe Edge Web Fonts (FREE,英文字型為主,像本部落格的內文是使用這平台的思源黑體,一個月 25000 pageviews 內免費)
– Justfont (繁體中文、簡體中文,可選擇的字體最多)
– 華康 (繁體中文,字體經營豐富)
– 文鼎iFontCloud (繁體中文,字體經營豐富)
– 造字工房 (簡體中文,字體樣式較具獨特性,年費制)
– TypeSquare (日文、繁體中文)

此技術其實已經不算新技術,雖然繁體中文因為要製作的字數非常多,而且市場小,選擇少,花樣不如簡體中文或是日韓語系的 webfont 服務那樣豐富,但隨著科技進展與需求的增加,各家的字體清單也逐漸在擴充,使用起來也越來越成熟穩定。

中文的 webfont 服務通常都需購買授權才能使用,多半以 Pageview 計費,頁數越多的網站可能花費就越高。以一個有 5 頁的網站為例,平均每日訪客 100 人,而且網站每一頁都有去看,那麼一年就有 182500 個 pageview,購買 justfont 的商業 VIP 方案,每年要再多繳 2000 多元。

聽起來很厲害,但是 webfont 雲端字型實際使用時將會遇到缺字、不支援舊瀏覽器、網頁變慢等各種情況,請參閱本站相關文章 中文 webfont 雷人事件簿。

二、IconFont**

< i class=”icon-edit-sign” > < / i > ->
短短一行 HTML 就可以產生一個 icon,就這麼簡單。

為了減少 hhtp request,或是 retina 螢幕的裝置,這年頭要在網頁上放一個圖示,不再像以前一樣單純。但也多了一種選擇,就是 Iconfont,使用 HTML 及 CSS 語法載入「圖示字型檔」,再放置定義好的 class name,就可在網頁上產生圖示,並透過 CSS 更改圖示的顏色、大小、透明度、內陰影、外陰影、旋轉…等,容易上手,也方便套用一些互動語法。在高解析裝置上也不會模糊。

  • 阿里巴巴矢量圖標庫 大陸電商界的icon都有,還可以製作保存自己的icnofont
  • Font-awesome (免費使用)

使用一些開放原始碼的 iconfont 方案非常方便,但是總會遇到它提供的 icon 很多種,但剛好就缺你要用的那一種;或是 icon 的風格樣式不符業主需求的情況。如果要自己製作 iconfont,為了兼顧瀏覽器相容性,須設定/製作 eot, woff, ttf, svg 多種字型檔格式,與添加許多相容性語法,相當麻煩,還是仰賴一些線上外部工具來製作會比較方便。

由於 iconfont 是字體,所以每一顆 icon 一次只能顯示一種顏色,雖然之後也出現了多色的 iconfont,如 Stackicons,但製作過程繁瑣,會讓人覺得還是做成圖片就好了。

使用 Iconfont 時須注意,有些使用者的電腦瀏覽器版本較低,或是安全性設定較高(如 IE 設定停用字型下載,或是 Firefox 將 gfx.downloadable_fonts.enabled 設為 false ),容易導致瀏覽器無法下載字型檔案,而造成顯示錯誤。(如下圖)

三、瀏覽器最小字體設定

解析度 1920*1080 的 22 吋電腦螢幕,「螢幕點距」比解析度 1440*900 的 19 吋螢幕還小,所以使用者會有換了更大的螢幕,螢幕上的字卻比以前還小的情況。有些人可能會直接調整系統解析度,有些人可能會用 Ctrl + 滾輪,或是點選瀏覽器右下角的放大倍率,個別將網頁放大。

但是 Firefox, Chrome 等瀏覽器中還有一個「最小字型大小」的設定,會將小於設定數值的網頁文字通通放大,如 Chrome 的最小字型大小預設值為12px,所以 1~11px 的字體都會被強制放大成 12px 大小。但這種放大效果與使用 Ctrl + 滾輪來放大不同,「最小字型大小」會將字體放大,外層容器與圖片卻不會跟著放大。

網站一般皆是在預想使用者使用「預設值」的情況下進行製作,但若使用者自行調整該預設值,就會導致網站發生跑版,或是換行錯誤的狀況。早期可以用 css 設定 font-size-adjust 來解決,但隨著瀏覽器版本的更新,也逐漸失效。
– 解決方法1: 區塊不要排得太剛好,保留一些字體放大的緩衝空間。(但是許多業主看到畫面上有留白就會高血壓)
– 解決方法2: 使用 css3 的 transform:scale( ) 屬性。瀏覽器預設值為 12,如果最小字型大小被設定成 16px,那會導致網頁上小於 16px 的字被強制放大,就需要對 12~15px 分別設定縮放比率,讓各級字縮回正常尺寸,並設定 display:inline-block 等屬性,讓容器排列正常。(要先知道使用者把設定調成多大)
– 解決方法 3: 通通做成圖片、Flash ..。(爛)

2023/1 更新: Chrome 118 中移除了 12px 最小字體的限制

在 Chrome 118 之前的版本中,如果字型小於 10 像素,則系統無法依指定方式呈現,但如果語言是阿拉伯文、波斯文、日文、韓文、泰文、簡體中文或繁體中文,則系統會將其四捨五入。開發人員必須設法轉譯小型文字,例如使用 ... 繼續閱讀⇢