現在很多人是透過智慧型手機或平板電腦瀏覽網頁,在網頁設計上就要考量到如何讓不同尺寸螢幕大小也能正常顯示,以往會製作成電腦版和手機版兩種格式,後來多半以響應式網頁設計(Responsive web design)技術直接在不同尺寸螢幕上顯示最適合的樣式,更重要的是可以節省維護的成本和時間。想測試自適應設計在各種裝置顯示情形,除了直接使用手機瀏覽外,其實也有不少工具可以輔助,像是 Responsive Viewer、ScreenDump 或是 Responsive Screenshots。
手機版網頁
Responsive Viewer 在單一頁面查看網頁在不同螢幕大小裝置的顯示樣貌(Chrome 擴充功能)
Screenshot Machine 將網頁畫面擷取轉為圖片或 PDF 免費工具
免費資源網路社群介紹過不少製作、產生網頁擷圖的線上工具,這些服務多半不需要額外下載軟體,輸入網址就能建立網頁截圖,有些還能選擇要用的裝置類型或解析度大小,對於檢查自適應網頁設計(Responsive Web Design)網站呈現效果來說會很有用,有時候也可能用來備份網頁內容,像是 Web-Capture 線上網頁快照服務輸入網址就能完整擷取網頁轉圖片,或是 Screenshot Guru、Full Page Screen Capture 都能透過瀏覽器建立網頁擷圖。
ScreenDump 自適應網頁設計測試工具,預覽網站在不同尺寸螢幕顯示效果
早期遇到行動裝置螢幕太小、無法正常瀏覽網站問題,都會針對 User Agent 提供不同的頁面版本,例如在手機存取時會直接切換到「行動版」網頁,若以電腦開啟則是跳轉一般網頁,這麼做的好處是一般行動裝置會使用速度較慢的行動網路,行動版就能盡量減少網頁大小,讓瀏覽者有更好的使用體驗,不過缺點也顯而易見,就是得同時維護網頁不同版本,無形間增加更多時間成本。
Responsive Screenshots 輸入網址查看網站在電腦及行動裝置顯示情形

記得幾年前架設 WordPress 網站時,會透過行動版外掛功能來打造更適合手機或平板電腦閱讀的環境,這個作法通常是將手機使用者引導至另一個佈景主題,專為行動裝置特別設計,無論在網頁大小或載入速度上都會比桌面版更適合行動裝置使用者閱讀。雖然看起來是個很不錯的解決方案,但其實也會出現一些問題,例如:不一定適合所有螢幕大小的行動裝置、必須維護兩個不同的佈景主題等等,因此後來趨勢就逐漸轉為使用「自適應網頁設計」(Responsive Web Design)替代。
網賺新選擇!臉書推行動版廣告聯播網 Audience Network,網站放廣告獲取收益教學
想要利用網站或部落格流量賺錢,除了業配文或導購,最大收益來源就屬廣告,廣告聯播網在國外相當盛行,例如知名的 Google AdSense,台灣也有酷比、ClickForce、BloggerAds 等公司。若不想自己拉廣告,透過聯播網可獲得最大收益。近期社群網站 Facebook 也推出廣告聯播網服務,只要線上申請,即可將 Facebook 廣告加入自己網站來賺取收益。
使用 GoMoMeter 工具最佳化你的行動網站,提供免費客製化建議報告
網站對行動裝置用戶夠友善嗎?讓 GoMo 告訴你
想知道使用手機上網的訪客瀏覽你的網站時所看到的樣貌嗎?Google 推出的 GoMo 服務可以協助你,讓你了解自己的網站或部落格對於行動裝置用戶是否夠友善。有數以萬計以上的使用者每天透過智慧型手機或行動裝置上網,提供行動版網頁勢在必行,尤其對於小畫面的手機來說,行動版頁面更顯得重要,想知道自己的手機版網頁在 Google 眼中是不是及格呢?來試試看 GoMo 吧!
Mobitest 手機版網頁效能檢測,開發者必備工具
Mobitest 是一個相當實用的站長工具,可以線上檢測你的網站在行動裝置上載入速度,支援的裝置有 iPhone、iPad、iPad 2、Motorola XOOM、Galaxy S、Nexus S,作業系統則有最常見的 iOS 和 Android。檢測時可以選擇要檢驗一次或至多三次,Mobitest 也能夠錄製載入網頁時的畫面。