讓 RWD 表格能自動排序
過去為網頁表格的處理寫了不少文章，例如「 自適應 RWD 表格 」、「 讓網頁表格自動排序 」。 後來發現，效果比較好的 RWD 表格，因為手機的表格形式跟網頁已經完全不一樣，那麼在行動版將無法做到自動排序。 有次無意間在手機看到 NBA 的統計數據表格，算是比較傳統的 ...
繼續閱讀全文一頁式及 RWD 網站各種寬度、圖片效果不如預期的狀況整理
處理 RWD 網站時遇過許許多多案例，對 RWD 圖片或版面效果覺得跟心目中的 RWD 定義(或是想像)不太一樣。其實以 Blogger 一頁式範本來看，我還沒看過不是 RWD 的版型，那麼一頁式也可以當作 RWD 網站來看待。 會產生落差的原因，有可能是這個版型設計上的問題...
繼續閱讀全文自製美觀的 RWD 時間軸效果(timeline)﹍jQuery + Bootstrap 外掛
雖然時間軸的效果看過不少網頁使用，不過倒是很少看到部落格站長放在文章內。這次接到的需求是，案主希望將單車行旅的圖文經歷，版面用時間軸效果串起來。 於是研究了相關的外掛，同時也要顧及手機的 RWD 效果，請見本篇的心得整理。 點此看範例網頁 (圖片出處: eeyello...
繼續閱讀全文輕鬆做出美觀的自適應 RWD 表格(Table)﹍jQuery 輕量外掛
最近的案子處理行動版的表格效果時，發現以前的「 Blogger 插入表格最佳流程 + 自適應寬度 」，這個方式若用在商業網站，將沒有任何質感可言，甚至可以用簡陋來形容。 於是找了一下自適應 RWD 表格有沒有比較美觀，而且又簡便的處理方式。有發現幾個功能強大的外掛，但操作稍嫌...
繼續閱讀全文台灣縣市鄉鎮郵遞區號 下拉選單外掛 TWzipcode 使用心得
填寫會員資料的表單，大多需要輸入地址，不過自己製作「縣市」、「鄉鎮地區」的下拉選單其實很麻煩，而且最好也要提供郵遞區號，因為填表者自己不一定記得住。 本篇介紹的這個 jQuery 外掛 TWzipcode，可以完美地解決這些麻煩事，同時也會分享實作的心得。
繼續閱讀全文自適應 RWD 多層下拉選單實作﹍Bootstrap 外掛 SmartMenus
所有網站架設要處理的區塊中，導覽列的下拉選單是最麻煩的一部份，如果需要「多層下拉選單」的話，難度就比較高，可參考「 Blogger 多層下拉選單實作 」。 而行動裝置使用率大幅攀升後，導覽列非常需要有自適應 RWD 效果，手機上才能同步呈現下拉選單這麼複雜的功能。因此製作 R...
繼續閱讀全文自適應 RWD 圖片語法產生器﹍Picasa 圖床專用
之前「 Picasa 圖床的獨家應用：製作 RWD 自適應圖片 」詳細介紹了 IMG 標籤如何設定 srcset 屬性，讓網頁可根據各種螢幕寬度載入不同尺寸的圖片，手機、行動裝置就能縮短網頁載入時間。 同時全世界的圖床，只有 Picasa 可以做到，上傳一張圖片後，修改網址參...
繼續閱讀全文Picasa 圖床的獨家應用：製作 RWD 自適應圖片，讓手機自動載入小圖，加快網頁讀取速度
過去曾在「 加快 Blogger 行動版圖片載入速度的密技 」告訴讀者，Blogger 使用的圖片只要從後台上傳，也就是使用 Picasa 圖床，行動版就會自動改為載入小尺寸的圖片。 因為有這樣的獨家功能，Picasa 只要上傳一張圖片，就會產生手機版尺寸的圖片，我一直認為 ...
繼續閱讀全文WFU BLOG 使用 RWD 範本改版紀錄(2017)﹍更友善的使用者體驗
最近一兩年協助架站多是以 RWD 為主，但自己的網站卻是一直使用 Blogger 官方「頂尖企業」模版，我想原因大概是這樣： 不喜歡直接用別人做好的現成範本，因為會有太多自己想改的地方。 但 RWD 是大工程，自己改要花很多時間。 本站是「Blogger 調校資料庫」，所...
繼續閱讀全文Adsense 回應式(RWD)廣告雖然版面美觀，可惜收益少很多
最近將網站改為 RWD 版型後，因為文章區塊在不同裝置的寬度都不一樣，無法再使用以前的廣告尺寸，因此藉機會把部分廣告單元改成自適應廣告。 使用回應式的廣告，並搭配 CSS 設定後，可以讓廣告完全跟區塊寬度吻合，版面看起來美觀多了。 而用了幾天後，查看 Adsense 報表...
繼續閱讀全文讓 RWD 網頁的文字(font-size)能自適應調整大小﹍極佳解決方案 vmin
最近需要架設 RWD 一頁式網站，結果在「自適應文字大小」這件事卡關，為何會如此呢？ 處理部落格型態的網站時，大部分直接套用現成的 RWD「 付費範本 」版型再來調整、修改。由於文字都是位於固定、切割好的板塊之內，調整字體大小的問題不大。 而一頁式網站，可以算是開放式空間...
繼續閱讀全文Blogger 新版 RWD 範本，對 SEO 有哪些加分之處？
前陣子介紹了「 Blogger 推出的全新自適應 RWD 官方範本 」，有讀者提問新版型 SEO 的相關問題，這表示 Blogger 對 SEO 做了哪些加強，也是大家關注的事情。 那麼本篇就來整理一下，這個 RWD 範本對 SEO 下了什麼功夫、有什麼特別之處。 (圖片...
繼續閱讀全文Blogger 推出全新自適應 RWD 官方範本及佈景主題，並支援行動裝置
前幾天 Blogger 官方發佈了公告「 Share your unique style with new Blogger themes 」，從現在起後台可以套用的佈景主題，多了 4 個大分類，共 20 款新版型可選擇。 雖然款式很多，不過版面設計的邏輯都差不多，也可看成官方...
繼續閱讀全文Blogger 行動版改用自適應(RWD) Adsense 廣告, 讓版面更美觀
最近幫讀者處理行動版時，發現 Adsense 若改用「 自適應(RWD)廣告單元 」，效果會比想像中來得好。 使用原始固定尺寸的廣告時，在不同行動裝置的效果都不一樣， 小尺寸手機有可能超出頁面，而在大尺寸裝置或平板，則可能版面顯得空曠 。總之，有一好就沒兩好。 那麼本篇就...
繼續閱讀全文RWD 標頭(header)圖片實作 [CSS 技巧]
![RWD 標頭(header)圖片實作 [CSS 技巧]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizGA0ef-Bvs1kubJV_NCHFiX7P4vsJNRYgRfR2f98cyzmvlzjO-QnCG_-Np6GeQixG6aO40Q64TU52hK30yS27xKDQpaZzyh3J8J4KjEHIxKiXNomnuSpkh3e7S2Y7J3aU9nh5wFEoTc04/s640/rwd-full-width-header-image.jpg)
使用自適應網頁(RWD)時，標頭圖片的設計與擺放，需要一些巧思與技巧。既然希望網頁能自適應調整寬度，那麼標頭圖片自然在不同寬度之下，都不能讓訪客覺得突兀。 最近接到一個標頭圖片的需求，希望在 "不同寬度下都能填滿整個螢幕"。也許字面上不容易理解，因此用文章...
繼續閱讀全文Blogger 製作自適應網頁(RWD)﹍懶人法實作
過去在「 Blogger 應該選擇自適應範本(RWD), 還是行動版範本? 」曾經歸納出的其中一個結論，對於 "有修改能力、能處理自適應範本" 的站長，Blogger 行動版方案可以選擇「自適應範本(RWD) + 自訂行動版」，這是行動版的最佳選擇。 然而...
繼續閱讀全文Blogger 應該選擇自適應範本(RWD), 還是行動版範本?
(Pic from: my-blogshop-tool.blogspot.com ) 在行動裝置瀏覽量不斷攀升的趨勢下，如何服務行動裝置的讀者，是 Blogger 站長們開始要考慮的課題。 Blogger 本身已經提供了行動版範本，不過似乎自適應範本(Responsive ...
繼續閱讀全文