通常在網站流量出現變化時網站管理者會去探究原因，如果你的訪客多為來自搜尋引擎的自然流量，有很大機會是搜尋引擎排名下降或類似問題，當然各家公司使用的演算法技術是商業機密，但通常都圍繞著一些大原則，像是被我視為最重要的 Google 搜尋引擎最佳化入門指南就是最核心的參考書，當中有提到使用正確語法清楚表達網頁資訊。
閱讀全文 » 關於 Detailed SEO Extension 快速得知網頁的搜尋引擎最佳化相關資訊（Chrome 擴充功能）
網頁開發
useAnimations 免費動態圖示下載，可用於應用程式或網站介面開發
如果要開發應用程式或製作網站，我們通常會尋找適合的免費圖示，如此一來就能減少開發成本，也能更快製作出符合期待的介面，像是 Ikonate、Potlab Icons、Unicons 和 illustrio 都可以直接套用到使用者操作介面的圖示集，而且也具備一定程度的可自訂性，對於開發者來說是不可多得的資源。
HEAD 網頁開發參考手冊，收錄 HTML5 在 head 可用標籤及範例說明
如果你是自行架站的網站管理者，對網頁原始碼結構應該不陌生，若以 WordPress 架設網站通常會有完整 <head> 段落，取決於你使用的佈景主題，這部份是用來描述一個頁面的相關資訊，例如網頁標題、語言、樣式表、說明、關鍵字和略縮圖等等，很多時候會透過 SEO 外掛工具產生各種常用的 Meta Tags 以擴充佈景主題不足的部分，如果你要從頭開始寫一個網頁或佈景主題，就必須知道 <head> 有那些可用的標籤。
Background Image Generator 免費網頁背景產生器，可製作各種材質圖片
現在比較少網站會用到背景圖，但有時候為了要讓背景不要太過單調，或是有些變化又不影響閱讀，會選擇顏色較淺的紋理材質素材，例如 Hero Patterns 可產生平鋪式背景 SVG 圖，或是 Bg-Patterns、Paper-co 也有不少紋理背景可以免費下載，當然這些工具都提供基本的設定選項，像是調整大小、密集程度或圖片格式，就能透過小張圖片拼接成背景，對於速度較慢的行動網路來說也不會因此而延遲網站載入速度。
Colorinspire 推薦絕佳色彩組合，下個專案設計拿來試試吧！
免費資源網路社群推薦過不少配色工具，但如果不是色彩控或從事相關工作，可能還是很難從顏色中挑選出合適的組合，例如要為下一個專案計畫、概念或想法設計新的色彩組合，從顏色裡可能毫無頭緒，不確定兩三種顏色搭配是不是相得益彰，這可能會影響整體視覺感受，不如直接給出色彩預覽會更易於參考。如果你經常糾結在沒有好的配色組合，接下來要介紹的服務或許會對你有幫助。
Who Can Use 檢查網頁配色對視力障礙使用者友善程度
全球資訊網協會（World Wide Web Consortium，W3C）制定的網頁內容無障礙指南相信大家不陌生，網頁內容無障礙指南（Web Content Accessibility Guidelines，WCAG）用於讓網頁可以更容易被訪問，藉由這些原則，讓內容能夠被廣大的身心障礙人士使用，其中涉及到可感知性、可操作性和可理解性等各種層面。
Hexometer Website Analyzer 分析網站使用那些第三方服務或工具（Chrome、Firefox）
通常一個網站背後是由許多的技術和服務組成，舉例來說，使用 WordPress 做為內容管理系統，再以 Cloudflare 加速並保護網站、對圖片進行分流，透過 Google Analytics 分析流量等資訊，搭配 Google AdSense 和 Google DFP 管理廣告和營利等等，雖然可以直接從原始碼得知網站可能使用那些技術，但也有更快速的查詢工具，像是 SimilarTech 和 WhatRuns 都能立即顯示某個網站使用的第三方服務或程式庫。
閱讀全文 » 關於 Hexometer Website Analyzer 分析網站使用那些第三方服務或工具（Chrome、Firefox）
Responsive Viewer 在單一頁面查看網頁在不同螢幕大小裝置的顯示樣貌（Chrome 擴充功能）
如果要讓行動裝置正常瀏覽網頁，可以另外製作手機版頁面或是透過自適應網頁設計（Responsive Web Design，簡稱 RWD）技術來調整版型，那麼要怎麼知道一個網站有沒有支援 RWD 呢？最簡單的方法就是拖曳調整視窗大小，看看網頁是不是在寬度較窄時仍可正常顯示，例如選單可能會縮起變成點選後才展開的按鈕。大部分的開發者都會使用行動裝置測試版型，但每個裝置大小都有差異，若沒辦法同時擁有這麼多裝置進行測試，其實透過一些電腦上的工具也能達到相同效果。
閱讀全文 » 關於 Responsive Viewer 在單一頁面查看網頁在不同螢幕大小裝置的顯示樣貌（Chrome 擴充功能）