現在很多人是透過智慧型手機或平板電腦瀏覽網頁，在網頁設計上就要考量到如何讓不同尺寸螢幕大小也能正常顯示，以往會製作成電腦版和手機版兩種格式，後來多半以響應式網頁設計（Responsive web design）技術直接在不同尺寸螢幕上顯示最適合的樣式，更重要的是可以節省維護的成本和時間。想測試自適應設計在各種裝置顯示情形，除了直接使用手機瀏覽外，其實也有不少工具可以輔助，像是 Responsive Viewer、ScreenDump 或是 Responsive Screenshots。
RWD
Screenshot Tracker 擷取並追蹤網頁長截圖，測試在不同裝置顯示情形
網站開發者經常需要測試網頁在不同裝置、螢幕大小的顯示樣貌，以前會針對行動裝置另外製作一個行動版，現在比較普遍作法是使用響應式網頁設計（Responsive web design，簡稱 RWD），可自動調整為最適合閱讀的大小，但這些開發過程可能都得借助於測試工具幫忙，例如瀏覽器外掛程式 Responsive Viewer 可在單一頁面查看不同螢幕大小裝置的顯示樣式，或是透過線上工具 ScreenDump 預覽網站在不同尺寸螢幕顯示效果。
Responsive Viewer 在單一頁面查看網頁在不同螢幕大小裝置的顯示樣貌（Chrome 擴充功能）
Screenshot Machine 將網頁畫面擷取轉為圖片或 PDF 免費工具
免費資源網路社群介紹過不少製作、產生網頁擷圖的線上工具，這些服務多半不需要額外下載軟體，輸入網址就能建立網頁截圖，有些還能選擇要用的裝置類型或解析度大小，對於檢查自適應網頁設計（Responsive Web Design）網站呈現效果來說會很有用，有時候也可能用來備份網頁內容，像是 Web-Capture 線上網頁快照服務輸入網址就能完整擷取網頁轉圖片，或是 Screenshot Guru、Full Page Screen Capture 都能透過瀏覽器建立網頁擷圖。
ScreenDump 自適應網頁設計測試工具，預覽網站在不同尺寸螢幕顯示效果
早期遇到行動裝置螢幕太小、無法正常瀏覽網站問題，都會針對 User Agent 提供不同的頁面版本，例如在手機存取時會直接切換到「行動版」網頁，若以電腦開啟則是跳轉一般網頁，這麼做的好處是一般行動裝置會使用速度較慢的行動網路，行動版就能盡量減少網頁大小，讓瀏覽者有更好的使用體驗，不過缺點也顯而易見，就是得同時維護網頁不同版本，無形間增加更多時間成本。
Embed Responsively 讓 YouTube、Google Maps 嵌入代碼支援自適應設計
當前網頁設計趨勢是使用「自適應網頁設計」（Responsive web design，RWD）技術，讓網頁可隨著不同螢幕大小自動調整排版，而現階段行動裝置相當普及，為了讓每個裝置都能正常瀏覽網頁，自適應網頁設計幾乎已成必備，或是針對行動裝置開發「手機版」網頁，不過兩者都有各自的優缺點，還是得評估網站型態才能選擇。
Google 搜尋引擎最佳化（SEO）入門指南更新，加入結構化資料和建立友善行動網頁
什麼是搜尋引擎最佳化（Search Engine Optimization，縮寫為 SEO）呢？相信網站站長們一定相當熟悉，簡單來說就是透過一些調整來提高網站在搜尋結果排名的方法，使網站更容易被找到，不過因為牽涉的因素太多太複雜，而且可能隨時都在發生變化，因此 Google 或任何搜尋引擎都很少公開談論 SEO。如果你想知道網站最佳化第一步應該何去何從，我會建議從閱讀「搜尋引擎最佳化初學者指南」開始。
使用 Chrome 內建工具製作網頁長截圖，擷取網站畫面免安裝下載外掛
幾個月前介紹過「Firefox Screenshots」免費網頁擷圖工具，也是火狐瀏覽器 Firefox 內建的快速拍照、分享螢幕功能，在全新 Firefox Quantum 推出後成為內建功能之一，可見不單單只有工作上會用到，對於一般使用者來說網頁擷圖也是相當必要。現在 Google Chrome 也內建網頁擷取工具以及將完整頁面保存下來的「網頁長截圖」製作功能，不用額外下載、安裝外掛或擴充功能，只要輸入指令就能做到。
Responsive Screenshots 輸入網址查看網站在電腦及行動裝置顯示情形
記得幾年前架設 WordPress 網站時，會透過行動版外掛功能來打造更適合手機或平板電腦閱讀的環境，這個作法通常是將手機使用者引導至另一個佈景主題，專為行動裝置特別設計，無論在網頁大小或載入速度上都會比桌面版更適合行動裝置使用者閱讀。雖然看起來是個很不錯的解決方案，但其實也會出現一些問題，例如：不一定適合所有螢幕大小的行動裝置、必須維護兩個不同的佈景主題等等，因此後來趨勢就逐漸轉為使用「自適應網頁設計」（Responsive Web Design）替代。
