測試瀏覽器原生 CSS Nesting 能不能完全做到 SCSS Nesting 的功能 2024/01/23 巢狀CSS (CSS nesting)終於從 Chrome 版本號 120 開始支援，去年(2023/8左右) Firefox 就支援 CSS nesting 了，以前寫 SCSS 的老人們可以放心直接寫，不用再編譯嗎? 並沒有，本文就來做一些實測。巢狀結構寫法，有時候可以提升 CSS 樣式碼的易讀性和可維護性，如下圖所示，左邊是 SCSS，右邊是編譯出來給瀏覽器看的 CSS。人類也可以直接寫出右邊的 code，但是要多打了一大堆重複的部份，反觀左邊的看起來輕便不少。如果是用程式碼... 繼續閱讀 網頁設計#css#css3
惱人的 Google 通知信系列-網頁無法編入索引-找不到 (404) 2024/01/16 一些網站收到 Google Search Console (GSC)通知信，長得像這樣:主旨:有新的原因導致「」網站上的網頁無法建立索引內文:導致你的網頁無法編入索引的新原因Search Console 發現你網站上有部分網頁未編入索引，這是由以下新原因造成：找不到 (404)如果這項原因並非刻意設定，建議你修正問題，讓系統能將受影響的網頁編入索引，以便顯示在 Google 服務中。按鈕:開啟索引報表點擊開啟索引報表，然後會把人騙到釣魚網頁，騙人輸入 Google... 繼續閱讀 網頁設計#google#SEO
幾種整合付款服務介紹，讓店家不用在櫃檯舉辦 QR Code 大展! 2024/01/06 台灣行動支付 QR Code 整合現況：街口支付、LINE Pay、Pi 拍錢包等各家整合進度，以及實體店家設置多種支付收款的實際成本與操作比較。... 繼續閱讀 使用者介面吃喝玩樂生活交通數位行銷科技科技新聞解析網頁設計#apple#ios#iphone#UI#小額支付#金流
完全追蹤並重播使用者的網頁操作行為? 幾款 Session player 工具的使用心得 2023/12/16 本文介紹幾款Session player 工具的費用和使用心得，還有訪客Session錄影回放工具與 GA4 的功能比較：可完整重播使用者滑鼠軌跡、即時數據反饋、IP 定位查詢，適用 UX 研究分析與前端程式錯誤追蹤的使用場景整理。... 繼續閱讀 使用者介面數位行銷科技網頁設計軟體產品體驗#linux#UI#ux
實測 Cloudflare Fonts 能讓網頁的雲端字型載入速度變得多快? 2023/10/30 看到知名的網路佛堂 Cloudflare 在 2023/9 底推出了新服務Cloudflare Fonts: enhancing website font privacy and speed，現在許多網頁為了顯示漂亮好看、並且能被搜尋引擎輕易檢索的文字，常常都會掛上一些 webfont 服務，而免費的 Google Fonts 是目前市占率最高的服務之一。Cloudflare 特別做了一個服務，來解決網站使用 Google Fonts 當 webfont 的兩大痛點:Cloudflare Fonts網頁中有額外的字體檔案，為網頁載入帶來延遲Google... 繼續閱讀 網頁設計軟體產品體驗#cloudflare#css#webfont
使用這些漸層產生器和 Figma 套件，避免做出中間髒髒的漸層色 2023/10/16 前陣子在社群看到一個平面印刷設計類的討論，大致一個透明漸層與黑色底色疊起來之後，中間看起來霧霧濁濁髒髒的，要怎麼解決? 這本來是一個牽涉用 Adobe illustrator 做平面設計、CMYK油墨印刷、紙張材質的問題，好像每隔一陣子就會出現一次，使用彩色電子螢幕顯示的數位設計，例如網頁、APP，也會有類似的問題，但是跟平面設計有不同解決思路和後遺症。... 繼續閱讀 使用者介面網頁設計視覺設計軟體產品體驗#css#css3#UI
套版網頁設計的末日? 試玩 2023 年 10 幾種 AI 網頁設計與架站工具 2023/07/04 測試超過 10 款 AI 網頁設計工具（含 Framer AI、Uizard、60sec.site）後的結論：整理出 AI 工具的共同限制，說明現階段 AI 設計工具的實際應用邊界。... 繼續閱讀 使用者介面數位行銷科技科技新聞解析網頁設計視覺設計軟體產品體驗#ai#css#css3#domain#google#SEO#UI#ux
iOS17 Safari 的新功能會把網址裡的 fbclid 跟 gclid 砍掉 2023/06/10 iOS 17 隱私追蹤保護機制說明：發現 Safari 會自動移除網址中的 fbclid 和 gclid 追蹤參數，UTM 參數不受影響，測試 GTM 和 GA4 在無痕模式下被封鎖的各種測試結果。... 繼續閱讀 數位行銷科技網頁設計#apple#ios
增強商品吸引力！試用多款AI繪圖工具生成電商商品情境圖 2023/06/05 生成式 AI 繪圖之前已經介紹過好幾篇，本次來介紹一個比較專門用途的：電商 AI 商品圖製作工具。假想的情境：有個網站，本來用的商品封面圖都是單純白色的背景，那種要上架 MOMO 購物或一些第三方平台用的圖，但是因為生意不好，老闆找來大師，大師說要把商品照片換成背景有風景或使用情境的，或是在圖上面壓文案等等。重新拍照很麻煩，所以先用 AI 繪圖做幾張，AB test 看看點擊量或一些指標有沒有增加。假想的使用對象：想說「有... 繼續閱讀 科技新聞解析視覺設計#adobe#ai#電商
Adobe Photoshop 的 Generative Fill 試玩心得與 AI 生圖功能更新 2023/05/25 Photoshop 把生成式 AI 真的「塞進工作流程」了：這篇以 Adobe Firefly 驅動的 Generative Fill 實測為主，示範如何用選取範圍 + prompt 進行補景、換物件、擴圖構圖，並整理從 Beta 到正式版一路更新的重點（商用解禁、中文提示詞、生成式點數、Firefly 3、第三方模型到最新的 Rotate Object）。如果你想知道它到底是噱頭還是能上工的工具、以及現階段會踩到哪些坑，這篇會讓你少走很多冤枉路。... 繼續閱讀 科技新聞解析網頁設計視覺設計#adobe#ai#china
