WFU BLOG 使用 RWD 範本改版紀錄(2017)﹍更友善的使用者體驗
最近一兩年協助架站多是以 RWD 為主，但自己的網站卻是一直使用 Blogger 官方「頂尖企業」模版，我想原因大概是這樣： 不喜歡直接用別人做好的現成範本，因為會有太多自己想改的地方。 但 RWD 是大工程，自己改要花很多時間。 本站是「Blogger 調校資料庫」，所...
繼續閱讀全文覺得蓋版廣告很討厭嗎？教你從搜尋結果排除干擾閱讀的網站(各種平台的技巧)
過去一年以來，搜尋時如果出現的是痞客邦網站，開始成為一種不舒服的瀏覽體驗，因為一段時間後，所有痞客邦網頁都會自動彈出蓋版廣告。 其實我不反對廣告，我也認為網路運行的機制需要有廣告，才足以支撐這個能夠免費運作的架構，否則查資料、使用圖片等等，都只能上付費網站了。 但比較不能...
繼續閱讀全文讓搜尋結果排除你不想看到的網站﹍自製 Google 搜尋引擎教學
網站逛多了之後，相信我們會有自己的一份口袋名單，某些網站就是比較沒我們的緣，特別不想看哪些類型的網站。 有時我們就只是想好好的看個文章，但可能整個版面到處都是讓人分心的浮動區塊，或是不時彈跳出一個視窗來嚇人，這類網站就可能成為黑名單。 如果能在上網找資料時，讓搜尋引擎將這...
繼續閱讀全文[網頁設計] 有助於色盲使用者的友善體驗 (2)實作範例
![[網頁設計] 有助於色盲使用者的友善體驗 (2)實作範例](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMObqBozDq1rAdU1p6HM5w6z0EF3YZpOsuCFb3nJ8RQyaUVPcGKb-TQ94vZVznLXwsf_2veaAGtaaUhF_8yrimL6_5ba910xO6wblQhjD7JWDbQRP5QErgUmZiCZrWIgL-FvxHUrehlLcY/s1600/color-blink-web-design-2.jpg)
上一篇「 有助於色盲使用者的友善體驗 (1)設計構思 」，提出本站的設計方針為： 原本文章區塊為黃底黑字，另一套 CSS 將會使用白底黑字，用來增加對比。 原本文章區塊的連結無底線，另一套 CSS 將會使用底線。 本站文章常用紅字標示重點，同時教學程式碼中包含了大量的紅、...
繼續閱讀全文[網頁設計] 有助於色盲使用者的友善體驗 (1)設計構思
![[網頁設計] 有助於色盲使用者的友善體驗 (1)設計構思](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ_0kBqHynrpr0li1y5GMZ0hPyoFX0JuvrxXIHuzP1GiXEphDgVbcgzNePQrWFPWDxcZ-s26Ek4Qs9ZvQ7jEbuNaPiERILu0MnbJIGUq65P2WWIIC-7iCgzHMUfEPMeGPFxG7CIMbydkMu/s640/color-blink-web-design-1.jpg)
前陣子有讀者在「 Blogger 文章標題最佳化 」留言表示："建議WFU大，文章的字顏色對比可以強一點，或標個線?這樣對色弱色盲人土比較友善，我完全找不到紅字在哪"。這才發現過去接觸網頁設計的主題時，很少碰到這一塊，因此沒想過要研究這部分的設計。 經查詢...
繼續閱讀全文讓訪客能自行放大網頁文字，提升友善閱讀體驗
閱讀網路文章時，不免會遇到某些網頁的預設文字過小，不但看起來不舒服，也加重了眼睛的負擔。過去曾介紹過 Chrome 的外掛「 讓 Chrome 只放大縮小文字(Zoom Text Only 套件) 」，可以單獨調整文字的大小，讓我們閱讀文章時更舒服。 但並非每個訪客都會安裝這...
繼續閱讀全文讓行動版網頁能用手指縮放螢幕大小
這個「 Blogger 論壇貼文 」表示，"行動版在使用手機瀏覽的時候無法使用兩指放大縮小"。於是測試了幾個 Blogger 網站，發現的確連 WFU BLOG 也不能做到這件事。 其實在使用平板的時候，由於某些網頁字不夠大，常常需要用兩隻手指將螢幕放大。...
繼續閱讀全文將網頁所有網址字串轉換為超連結
雖然「 超連結 」語法不難，但終究多數的訪客並不熟悉程式語言、不瞭解 HTML 碼，那麼在留言、發表意見時，若需要引用網址，訪客是不會使用 A 標籤語法的，只會直接貼上 http 開頭的網址連結字串。 如此一來，留言中的網址連結無法點擊，不利於資訊傳播。因此我們可以看到 Fa...
繼續閱讀全文簡單漂亮的 CSS 提示框(tooltip)懶人包實作﹍(1) 動畫效果 + 置中演算法
HTML 標籤屬性 title 裡的提示訊息，在瀏覽器差不多延遲一秒才會出現。在資訊爆炸的時代， 訪客閱覽文章多半施展 "超速讀"，相信更不會有耐心去臆測某個地方是否藏著 title 屬性、或等待一秒後的訊息浮現 。使用 javascript(簡稱 js) ...
繼續閱讀全文[小工具]回到頂端(Go Top)按鈕放在浮動導覽列實作
![[小工具]回到頂端(Go Top)按鈕放在浮動導覽列實作](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz7aQbHYgX9xEYlS3qL34N7c_1rCHDAwkwUcceZsJhtz6ZFHFUQ1vWMEUIwIiHRjj7VNQOq0eTMV9o-UQ7xW9_3RLqbZ0WGW8dD9oQ8YF5y1HuUv0Fc_hppPygKzNA9ZYoN5zWrXXABXRJ/s1600/go-top-on-floating-nav-bar.jpg)
上一篇「 快速回到頂端(Go Top)按鈕__符合使用者體驗的友善設計 」留言 #18 Jean Hsiung 詢問：「我對您的"↑TOP"鈕比較有興趣，這個有沒有教學?」。 為何 WFU 要將 "回到網頁上方" 的這顆 Go Top ...
繼續閱讀全文[教學]讓部落格導覽列選單能浮動置頂__更新版
![[教學]讓部落格導覽列選單能浮動置頂__更新版](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXJrdByej-wzpP_Im-MibYSoZOtB7ku1f7waKS_ItHKXlqV7vA9XYbiVUpd4nxfiJcJHzs05sh2w8QN8Bnu967WehB651EcIYXiGVTKcIEEJw4Z-kbjv_P5oBKYjkXXE-0bmjWH0qGdifu/s1600/float-nav-bar-update.jpg)
關於浮動導覽列的優點，為了節省篇幅請直接參考「 舊版 」→「一、導覽列置頂的優點」。不過舊版有以下的狀況未解決： 1. 底色透明的異常狀況 2. 留言 #9 +Ken Lo 表示「搜尋框會左右移動」 3. 當螢幕解析度不同時，導覽列的寬度會異常 因此本文的更新版，用...
繼續閱讀全文[教學]快速回到頂端(Go Top)按鈕__符合使用者體驗的友善設計
![[教學]快速回到頂端(Go Top)按鈕__符合使用者體驗的友善設計](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBF67u2YIgr8WwrXuZ7XsIWyGLuWznax0ANcwWI_Sf4p6bkM1egcAnAdkenss9SBqz3jKRxLHLu6_ViE7NfaZr8GPqY442WiDsX1TjZ43BBrnDeqD6rNicE0lE3FMPGnkQm_2zBK8PT50Z/s1600/go-top-button.jpg)
(Pic from: shimivn.blogspot.com ) 「回到上方」的按鈕是很常見的網頁設計，且 code 不難寫。那麼特地撰寫本文的目的為何呢？其實主要是拜讀了 Bin Ye 的「改善 Google Blogger 返回頂部按鈕的使用體驗」(連結已失效)覺得很有道...
繼續閱讀全文讓 Blogger 有快速載入的展示(DEMO)頁面
(Pic from: midches.com ) 有時我們可能需要一些「展示頁面」，來秀出某些網頁效果(例如語法教學網頁)、或展示特定資訊(例如「 文章列表 」)，這樣的頁面最好能載入速度快，頁面上只需要出現 DEMO 的主題，不需要出現側邊欄、其他小工具。因此，在 Blogg...
繼續閱讀全文