WFU BLOG 使用 RWD 範本改版紀錄(2017)﹍更友善的使用者體驗
![WFU BLOG 使用 RWD 範本改版紀錄(2017)﹍更友善的使用者體驗](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJoh0SHQ_rZlYllPpFKBO9ya7r6VfumcdG0yiijKpmGjrg3plv-nlaEs7ycwlQXxiNvC24kJweRXYa-BTIhQm65luUdvDzMOAoaBR9W2Rs6ekS-8Gh-9ECMJNGNV8aSOWDp-uxmG7wW-a0/s640/wfublog-2017.jpg)
最近一兩年協助架站多是以 RWD 為主,但自己的網站卻是一直使用 Blogger 官方「頂尖企業」模版,我想原因大概是這樣: 不喜歡直接用別人做好的現成範本,因為會有太多自己想改的地方。 但 RWD 是大工程,自己改要花很多時間。 本站是「Blogger 調校資料庫」,所...
繼續閱讀全文覺得蓋版廣告很討厭嗎?教你從搜尋結果排除干擾閱讀的網站(各種平台的技巧)
![覺得蓋版廣告很討厭嗎?教你從搜尋結果排除干擾閱讀的網站(各種平台的技巧)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ZzChTo9UhYvedn2a7ENfcegZR9HoIn7vei4bPD-kjOADz5UhtAYEuyRlRpHGHXAZEx8ENv8Kl9NV2RfuNd_VWV7oJxSEXsyoQXGzhrXF8GDPc8wimyT8a1o6Id9DmMKAgnPniqJHqUus/s640/chrome-personal-blocklist.jpg)
過去一年以來,搜尋時如果出現的是痞客邦網站,開始成為一種不舒服的瀏覽體驗,因為一段時間後,所有痞客邦網頁都會自動彈出蓋版廣告。 其實我不反對廣告,我也認為網路運行的機制需要有廣告,才足以支撐這個能夠免費運作的架構,否則查資料、使用圖片等等,都只能上付費網站了。 但比較不能...
繼續閱讀全文讓搜尋結果排除你不想看到的網站﹍自製 Google 搜尋引擎教學
![讓搜尋結果排除你不想看到的網站﹍自製 Google 搜尋引擎教學](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiApEBlm4bIWGDlm0RKY1M_r6n3LvznYvr57QlTLGAPjclM0ClFlfbwF_83Iq5mafgTDRSuc6TJqPRg5xAFApJsnC_w7bLJ9Of1LYVP6CmU71JYAbk8yJOzUA9S9AbPRardzOEwJnYEjmnU/s640/google-custom-search-engine-exclude-website.jpg)
網站逛多了之後,相信我們會有自己的一份口袋名單,某些網站就是比較沒我們的緣,特別不想看哪些類型的網站。 有時我們就只是想好好的看個文章,但可能整個版面到處都是讓人分心的浮動區塊,或是不時彈跳出一個視窗來嚇人,這類網站就可能成為黑名單。 如果能在上網找資料時,讓搜尋引擎將這...
繼續閱讀全文[網頁設計] 有助於色盲使用者的友善體驗 (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大,文章的字顏色對比可以強一點,或標個線?這樣對色弱色盲人土比較友善,我完全找不到紅字在哪"。這才發現過去接觸網頁設計的主題時,很少碰到這一塊,因此沒想過要研究這部分的設計。 經查詢...
繼續閱讀全文讓訪客能自行放大網頁文字,提升友善閱讀體驗
![讓訪客能自行放大網頁文字,提升友善閱讀體驗](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgowPLj_Rvo3EPT2JO1skH3AANe6Qtqr_R8C20pFPI7n_s7eLc7aBmwFaTPngEYfRjtyxhEecF15dOdFYVpxoiP4itkfD49r-oHVJMtvi86gLCyUZ3d6Ov2QLVYgrGSzdpQnbXRjHMmxodS/s1600/website-zoom-in-out-text-button.jpg)
閱讀網路文章時,不免會遇到某些網頁的預設文字過小,不但看起來不舒服,也加重了眼睛的負擔。過去曾介紹過 Chrome 的外掛「 讓 Chrome 只放大縮小文字(Zoom Text Only 套件) 」,可以單獨調整文字的大小,讓我們閱讀文章時更舒服。 但並非每個訪客都會安裝這...
繼續閱讀全文讓行動版網頁能用手指縮放螢幕大小
![讓行動版網頁能用手指縮放螢幕大小](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvDo6FIVKTgfEo4ONntEaAKtqlrtOyQH_r3y0D9rB99QE_ScatGngUSRbj9g-r7J8T6d0ESmKMn7oRNo-5ULyEAAerww1Q-MZ5Sz3m1fMbfAdis8NtUwC-gLpnNlAev4Nw0NKvcVIMup4L/s1600/mobile-finger-zoom.jpg)
這個「 Blogger 論壇貼文 」表示,"行動版在使用手機瀏覽的時候無法使用兩指放大縮小"。於是測試了幾個 Blogger 網站,發現的確連 WFU BLOG 也不能做到這件事。 其實在使用平板的時候,由於某些網頁字不夠大,常常需要用兩隻手指將螢幕放大。...
繼續閱讀全文將網頁所有網址字串轉換為超連結
![將網頁所有網址字串轉換為超連結](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdcXmoCe0-y_jus9Y2ryST_oWyF6D-5t0we8Kwji7IrzPwUkXrOlWytad7YSfqlmYEfnr0xdFjcCPTkNU56PyLKY7hyphenhyphenAkgBpHDNFBL7u6t9ZcJSLZyeuIzhw67G3Dz54z1gSWttke24WaN/s1600/web-url-convert-to-hyperlink.jpg)
雖然「 超連結 」語法不難,但終究多數的訪客並不熟悉程式語言、不瞭解 HTML 碼,那麼在留言、發表意見時,若需要引用網址,訪客是不會使用 A 標籤語法的,只會直接貼上 http 開頭的網址連結字串。 如此一來,留言中的網址連結無法點擊,不利於資訊傳播。因此我們可以看到 Fa...
繼續閱讀全文簡單漂亮的 CSS 提示框(tooltip)懶人包實作﹍(1) 動畫效果 + 置中演算法
![簡單漂亮的 CSS 提示框(tooltip)懶人包實作﹍(1) 動畫效果 + 置中演算法](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDJtugMBmrNorAmEP_fTczAhGBeW8tS9-z9HRpY8-hPN7sQhNirR1JbdIP7aRaKnFtDq-uJ3U-PUH8GTVMYzU0nCUFt-kmf6QsH9hLomOq1c6_b-6CiA1theo7C19i7HSMEMoplm4UgvHL/s1600/css-tooltip-macaron-1.jpg)
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)頁面
![讓 Blogger 有快速載入的展示(DEMO)頁面](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKV6-2kxCkFQY66IOMXnpMIiM83LTg9g7153aueOM1RisfkUpFmniSndpHHqDr5e9N1srBhu-aMNqHuSjrMxiSgVEP0udx022ZdhnHyFa3IXFCiI3M6PPAxGHxYwzJsW75XbOCeAribZvs/s1600/blogger-demo.jpg)
(Pic from: midches.com ) 有時我們可能需要一些「展示頁面」,來秀出某些網頁效果(例如語法教學網頁)、或展示特定資訊(例如「 文章列表 」),這樣的頁面最好能載入速度快,頁面上只需要出現 DEMO 的主題,不需要出現側邊欄、其他小工具。因此,在 Blogg...
繼續閱讀全文