ILoveAdaptive 線上測試回應式網頁設計在不同裝置呈現效果

ILoveAdaptive 線上測試回應式網頁設計在不同裝置呈現效果

現在製作網站、部落格或網路服務時都會考慮到行動裝置用戶,因為智慧型手機已經普及,很多人在工作以外的時間甚至很少使用電腦,讓不同螢幕大小的裝置都能正常瀏覽非常重要。以往會將網站區分為電腦版或手機版,使用不同的版型設計,好處是開發上比較簡單,這幾年流行使用回應式網頁設計(Responsive Web Design,簡稱 RWD),讓網頁在不同裝置上瀏覽時可以對應不同解析度而有適合的閱讀效果。

mmm.page 利用拖曳方式就能免費製作個人網站

超簡單!mmm.page 利用拖曳方式就能免費製作個人網站

現今的免費網站空間大多都是提供建站工具,透過所見即所得編輯器直接在瀏覽器上製作網頁,不像早期會給你一個 FTP 空間讓你上傳網頁,也可避免很多程式可能造成的安全問題。如果你想尋找一個架站服務,相關服務選擇還真不少,其中不乏免費服務,但我的經驗是要製作個人形象頁面、線上名片、公司官網(單純只有介紹沒有其他額外附加功能)盡量還是以付費穩定服務為主,可能不需要非常大的空間或流量額度,但需要能夠持續提供服務。

everysize 輸入網址就能測試響應式網頁在各種裝置尺寸的顯示效果

everysize 輸入網址就能測試響應式網頁在各種裝置尺寸的顯示效果

現在很多人是透過智慧型手機或平板電腦瀏覽網頁,在網頁設計上就要考量到如何讓不同尺寸螢幕大小也能正常顯示,以往會製作成電腦版和手機版兩種格式,後來多半以響應式網頁設計(Responsive web design)技術直接在不同尺寸螢幕上顯示最適合的樣式,更重要的是可以節省維護的成本和時間。想測試自適應設計在各種裝置顯示情形,除了直接使用手機瀏覽外,其實也有不少工具可以輔助,像是 Responsive ViewerScreenDump 或是 Responsive Screenshots

Screenshot Tracker 擷取並追蹤網頁長截圖,測試在不同裝置顯示情形

Screenshot Tracker 擷取並追蹤網頁長截圖,測試在不同裝置顯示情形

網站開發者經常需要測試網頁在不同裝置、螢幕大小的顯示樣貌,以前會針對行動裝置另外製作一個行動版,現在比較普遍作法是使用響應式網頁設計(Responsive web design,簡稱 RWD),可自動調整為最適合閱讀的大小,但這些開發過程可能都得借助於測試工具幫忙,例如瀏覽器外掛程式 Responsive Viewer 可在單一頁面查看不同螢幕大小裝置的顯示樣式,或是透過線上工具 ScreenDump 預覽網站在不同尺寸螢幕顯示效果。

Responsive Viewer 在單一頁面查看網頁在不同螢幕大小裝置的顯示樣貌(Chrome 擴充功能)

Responsive Viewer 在單一頁面查看網頁在不同螢幕大小裝置的顯示樣貌(Chrome 擴充功能)

如果要讓行動裝置正常瀏覽網頁,可以另外製作手機版頁面或是透過自適應網頁設計(Responsive Web Design,簡稱 RWD)技術來調整版型,那麼要怎麼知道一個網站有沒有支援 RWD 呢?最簡單的方法就是拖曳調整視窗大小,看看網頁是不是在寬度較窄時仍可正常顯示,例如選單可能會縮起變成點選後才展開的按鈕。大部分的開發者都會使用行動裝置測試版型,但每個裝置大小都有差異,若沒辦法同時擁有這麼多裝置進行測試,其實透過一些電腦上的工具也能達到相同效果。

Screenshot Machine 將網頁畫面擷取轉為圖片或 PDF 免費工具

Screenshot Machine 將網頁畫面擷取轉為圖片或 PDF 免費工具

免費資源網路社群介紹過不少製作、產生網頁擷圖的線上工具,這些服務多半不需要額外下載軟體,輸入網址就能建立網頁截圖,有些還能選擇要用的裝置類型或解析度大小,對於檢查自適應網頁設計(Responsive Web Design)網站呈現效果來說會很有用,有時候也可能用來備份網頁內容,像是 Web-Capture 線上網頁快照服務輸入網址就能完整擷取網頁轉圖片,或是 Screenshot GuruFull Page Screen Capture 都能透過瀏覽器建立網頁擷圖。

ScreenDump 自適應網頁設計測試工具,預覽網站在不同尺寸螢幕顯示效果

早期遇到行動裝置螢幕太小、無法正常瀏覽網站問題,都會針對 User Agent 提供不同的頁面版本,例如在手機存取時會直接切換到「行動版」網頁,若以電腦開啟則是跳轉一般網頁,這麼做的好處是一般行動裝置會使用速度較慢的行動網路,行動版就能盡量減少網頁大小,讓瀏覽者有更好的使用體驗,不過缺點也顯而易見,就是得同時維護網頁不同版本,無形間增加更多時間成本。

Embed Responsively 讓 YouTube、Google Maps 嵌入代碼支援自適應設計

Embed Responsively 讓 YouTube、Google Maps 嵌入代碼支援自適應設計
(Copyright: twindesign / 123RF Stock Photo

當前網頁設計趨勢是使用「自適應網頁設計」(Responsive web design,RWD)技術,讓網頁可隨著不同螢幕大小自動調整排版,而現階段行動裝置相當普及,為了讓每個裝置都能正常瀏覽網頁,自適應網頁設計幾乎已成必備,或是針對行動裝置開發「手機版」網頁,不過兩者都有各自的優缺點,還是得評估網站型態才能選擇。

使用 Chrome 內建工具製作網頁長截圖,擷取網站畫面免安裝下載外掛

使用 Chrome 內建工具製作網頁長截圖教學,擷取網站畫面免安裝下載外掛

幾個月前介紹過「Firefox Screenshots」免費網頁擷圖工具,也是火狐瀏覽器 Firefox 內建的快速拍照、分享螢幕功能,在全新 Firefox Quantum 推出後成為內建功能之一,可見不單單只有工作上會用到,對於一般使用者來說網頁擷圖也是相當必要。現在 Google Chrome 也內建網頁擷取工具以及將完整頁面保存下來的「網頁長截圖」製作功能,不用額外下載、安裝外掛或擴充功能,只要輸入指令就能做到。

Responsive Screenshots 輸入網址查看網站在電腦及行動裝置顯示情形

Responsive Screenshots 輸入網址查看網站在電腦及行動裝置顯示情形
(Copyright: rido / 123RF Stock Photo

記得幾年前架設 WordPress 網站時,會透過行動版外掛功能來打造更適合手機或平板電腦閱讀的環境,這個作法通常是將手機使用者引導至另一個佈景主題,專為行動裝置特別設計,無論在網頁大小或載入速度上都會比桌面版更適合行動裝置使用者閱讀。雖然看起來是個很不錯的解決方案,但其實也會出現一些問題,例如:不一定適合所有螢幕大小的行動裝置、必須維護兩個不同的佈景主題等等,因此後來趨勢就逐漸轉為使用「自適應網頁設計」(Responsive Web Design)替代。