顯示具有 電腦- 網頁設計-使用者體驗 標籤的文章。 顯示所有文章
顯示具有 電腦- 網頁設計-使用者體驗 標籤的文章。 顯示所有文章

WFU BLOG 使用 RWD 範本改版紀錄(2017)﹍更友善的使用者體驗

WFU BLOG 使用 RWD 範本改版紀錄(2017)﹍更友善的使用者體驗

最近一兩年協助架站多是以 RWD 為主，但自己的網站卻是一直使用 Blogger 官方「頂尖企業」模版，我想原因大概是這樣： 不喜歡直接用別人做好的現成範本，因為會有太多自己想改的地方。 但 RWD 是大工程，自己改要花很多時間。 本站是「Blogger 調校資料庫」，所...

繼續閱讀全文

覺得蓋版廣告很討厭嗎？教你從搜尋結果排除干擾閱讀的網站(各種平台的技巧)

覺得蓋版廣告很討厭嗎？教你從搜尋結果排除干擾閱讀的網站(各種平台的技巧)

過去一年以來，搜尋時如果出現的是痞客邦網站，開始成為一種不舒服的瀏覽體驗，因為一段時間後，所有痞客邦網頁都會自動彈出蓋版廣告。 其實我不反對廣告，我也認為網路運行的機制需要有廣告，才足以支撐這個能夠免費運作的架構，否則查資料、使用圖片等等，都只能上付費網站了。 但比較不能...

繼續閱讀全文

讓搜尋結果排除你不想看到的網站﹍自製 Google 搜尋引擎教學

讓搜尋結果排除你不想看到的網站﹍自製 Google 搜尋引擎教學

網站逛多了之後，相信我們會有自己的一份口袋名單，某些網站就是比較沒我們的緣，特別不想看哪些類型的網站。 有時我們就只是想好好的看個文章，但可能整個版面到處都是讓人分心的浮動區塊，或是不時彈跳出一個視窗來嚇人，這類網站就可能成為黑名單。 如果能在上網找資料時，讓搜尋引擎將這...

繼續閱讀全文

[網頁設計] 有助於色盲使用者的友善體驗 (2)實作範例

[網頁設計] 有助於色盲使用者的友善體驗 (2)實作範例

上一篇「 有助於色盲使用者的友善體驗 (1)設計構思 」，提出本站的設計方針為： 原本文章區塊為黃底黑字，另一套 CSS 將會使用白底黑字，用來增加對比。 原本文章區塊的連結無底線，另一套 CSS 將會使用底線。 本站文章常用紅字標示重點，同時教學程式碼中包含了大量的紅、...

繼續閱讀全文

[網頁設計] 有助於色盲使用者的友善體驗 (1)設計構思

[網頁設計] 有助於色盲使用者的友善體驗 (1)設計構思

前陣子有讀者在「 Blogger 文章標題最佳化 」留言表示："建議WFU大，文章的字顏色對比可以強一點，或標個線?這樣對色弱色盲人土比較友善，我完全找不到紅字在哪"。這才發現過去接觸網頁設計的主題時，很少碰到這一塊，因此沒想過要研究這部分的設計。 經查詢...

繼續閱讀全文

讓訪客能自行放大網頁文字，提升友善閱讀體驗

讓訪客能自行放大網頁文字，提升友善閱讀體驗

閱讀網路文章時，不免會遇到某些網頁的預設文字過小，不但看起來不舒服，也加重了眼睛的負擔。過去曾介紹過 Chrome 的外掛「 讓 Chrome 只放大縮小文字(Zoom Text Only 套件) 」，可以單獨調整文字的大小，讓我們閱讀文章時更舒服。 但並非每個訪客都會安裝這...

繼續閱讀全文

讓行動版網頁能用手指縮放螢幕大小

讓行動版網頁能用手指縮放螢幕大小

這個「 Blogger 論壇貼文 」表示，"行動版在使用手機瀏覽的時候無法使用兩指放大縮小"。於是測試了幾個 Blogger 網站，發現的確連 WFU BLOG 也不能做到這件事。 其實在使用平板的時候，由於某些網頁字不夠大，常常需要用兩隻手指將螢幕放大。...

繼續閱讀全文

將網頁所有網址字串轉換為超連結

將網頁所有網址字串轉換為超連結

雖然「 超連結 」語法不難，但終究多數的訪客並不熟悉程式語言、不瞭解 HTML 碼，那麼在留言、發表意見時，若需要引用網址，訪客是不會使用 A 標籤語法的，只會直接貼上 http 開頭的網址連結字串。 如此一來，留言中的網址連結無法點擊，不利於資訊傳播。因此我們可以看到 Fa...

繼續閱讀全文

簡單漂亮的 CSS 提示框(tooltip)懶人包實作﹍(1) 動畫效果 + 置中演算法

簡單漂亮的 CSS 提示框(tooltip)懶人包實作﹍(1) 動畫效果 + 置中演算法

HTML 標籤屬性 title 裡的提示訊息，在瀏覽器差不多延遲一秒才會出現。在資訊爆炸的時代， 訪客閱覽文章多半施展 "超速讀"，相信更不會有耐心去臆測某個地方是否藏著 title 屬性、或等待一秒後的訊息浮現 。使用 javascript(簡稱 js) ...

繼續閱讀全文

[小工具]回到頂端(Go Top)按鈕放在浮動導覽列實作

[小工具]回到頂端(Go Top)按鈕放在浮動導覽列實作

上一篇「 快速回到頂端(Go Top)按鈕__符合使用者體驗的友善設計 」留言 #18 Jean Hsiung 詢問：「我對您的"↑TOP"鈕比較有興趣，這個有沒有教學?」。 為何 WFU 要將 "回到網頁上方" 的這顆 Go Top ...

繼續閱讀全文

[教學]讓部落格導覽列選單能浮動置頂__更新版

[教學]讓部落格導覽列選單能浮動置頂__更新版

關於浮動導覽列的優點，為了節省篇幅請直接參考「 舊版 」→「一、導覽列置頂的優點」。不過舊版有以下的狀況未解決： 1. 底色透明的異常狀況 2. 留言 #9 +Ken Lo  表示「搜尋框會左右移動」 3. 當螢幕解析度不同時，導覽列的寬度會異常 因此本文的更新版，用...

繼續閱讀全文

[教學]快速回到頂端(Go Top)按鈕__符合使用者體驗的友善設計

[教學]快速回到頂端(Go Top)按鈕__符合使用者體驗的友善設計

(Pic from: shimivn.blogspot.com ) 「回到上方」的按鈕是很常見的網頁設計，且 code 不難寫。那麼特地撰寫本文的目的為何呢？其實主要是拜讀了 Bin Ye 的「改善 Google Blogger 返回頂部按鈕的使用體驗」(連結已失效)覺得很有道...

繼續閱讀全文

讓 Blogger 有快速載入的展示(DEMO)頁面

讓 Blogger 有快速載入的展示(DEMO)頁面

(Pic from: midches.com ) 有時我們可能需要一些「展示頁面」，來秀出某些網頁效果(例如語法教學網頁)、或展示特定資訊(例如「 文章列表 」)，這樣的頁面最好能載入速度快，頁面上只需要出現 DEMO 的主題，不需要出現側邊欄、其他小工具。因此，在 Blogg...

繼續閱讀全文
TOP