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

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

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

Share TXT 在不同裝置瀏覽器即時分享文字內容,免下載安裝軟體

Share TXT 在不同裝置瀏覽器即時分享文字內容,免下載安裝軟體

如果你經常會需要在電腦和行動裝置(例如手機、平板電腦)進行轉換,可能是在手機上把查到的網頁傳到桌面,或將電腦端看到的一段文字複製到手機,那麼你可能也有自己熟悉的方法,舉例來說,我很習慣透過 iCloud 或其他雲端硬碟來同步相片或檔案,在手機和電腦都能存取;如果是網頁也可使用「接力」方式在其他裝置上繼續工作;遇到一大段文字想要從手機傳到電腦上,以前我都是使用 Google Keep 暫存備份,現在從 LINE Keep 筆記傳送也很方便。

中華電信預付卡「如意卡」線上儲值、到期時間查詢

中華電信預付卡「如意卡」線上儲值、到期時間查詢教學
Copyright : seventyfour74 / 123RF Stock Photos

記得以前還是學生時有一段時期很流行「預付卡」(易付卡),就是預先把通話金儲值進去,只有撥打電話或傳簡訊時才會從餘額扣錢,平常可以拿來接聽電話,又不需要每月的月租費,對學生來說真的非常好用,不過長大後就改申辦固定的手機門號,一直到最近得知家中長輩還有在使用預付卡才知道原來這產品沒有被時代淹沒(而且好像還不少人在持續使用中),只是差在現在智慧型手機可以上網,預付卡除了傳統只能打電話,也加入計量型或計時計日型的上網方案。

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

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

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

iMazing HEIC Converter 相片轉檔工具,可轉為 JPG 或 PNG 格式(Mac)

iMazing HEIC Converter 相片轉檔工具,可轉為 JPG 或 PNG 格式(Mac)

之前有提到從 iOS 11 後透過 iPhone 拍照預設相片格式會是 HEIF(高效率圖檔格式),優點是可以節省檔案大小,讓手機能夠儲存更多相片,不過 HEIF 缺點也很明顯,一些第三方應用程式或 Windows 無法支援這個格式,必須要將圖片轉檔為 JPG 或 PNG 才能使用。我在遇到類似情形時寫過一篇「免安裝!以 Mac 預覽程式將 HEIC 照片轉檔 JPG、PNG 等格式」教學,如果你和我一樣想在蝦皮或露天拍賣刊登二手商品,但使用手機拍攝後的相片格式 HEIC 無法直接上傳,可以透過轉檔工具調整相片格式。

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 提供不同的頁面版本,例如在手機存取時會直接切換到「行動版」網頁,若以電腦開啟則是跳轉一般網頁,這麼做的好處是一般行動裝置會使用速度較慢的行動網路,行動版就能盡量減少網頁大小,讓瀏覽者有更好的使用體驗,不過缺點也顯而易見,就是得同時維護網頁不同版本,無形間增加更多時間成本。

httpstatus.io 快速檢查網站狀態碼、回應標頭和重新轉向情形

httpstatus.io 快速檢查網站狀態碼、回應標頭和重新轉向情形

自行架站會遇到各式各樣的狀況,其中很常發生的是要檢查某項功能有沒有正常運作(舉例來說,在 WordPress 網站使用 Cloudflare 外掛建立快取),除了檢查網頁原始碼,大多會透過瀏覽器內建的「開發人員工具」進行各項除錯工作,查看一個網頁究竟載入多少元件檔案,也會檢查相關檔案在使用時從伺服器端回傳的「Response Headers」,這些看起來複雜的資訊代表著某個文件是如何被載入使用,也能找出拖慢網頁速度的原因。

免安裝!以 Mac 預覽程式將 HEIC 照片轉檔 JPG、PNG 等格式

免安裝!以 Mac 預覽程式將 HEIC 照片轉檔 JPG、PNG 等格式
Copyright : Peter Ksinan / 123RF Stock Photos

蘋果公司從 iOS 11 開始支援高效率圖檔格式(HEIF),在差不多時間點上 macOS 10.13 也加入高效率影片編碼(HEVC、H.265)解碼在軟硬體部份的支援,相信過了這麼長一段時間大家應該對 .heic 格式不陌生,現在透過 iPhone 相機拍攝若預先選擇「高效率」模式就會使用 HEIF/HEVC 格式存檔,好處是可以大幅節省手機空間,但缺點是 .heic 無法在所有平台或軟體下正常開啟。