瀏覽器測試並不好玩,但這些工具會讓你的生活更輕鬆

已發表: 2015-05-06

設計您的網站非常令人興奮,讓您有機會發揮您的創造力。 當您第一次看到它完成並準備向世界發布它時,選擇顏色和主題、為頁面查找或委託圖像以及撰寫關於您自己或您的公司的內容是非常令人興奮的。

設計網站時經常被忽視的一個領域是瀏覽器測試。 許多在設計和啟動網站後覺得自己的工作結束的人可能會錯失大量訪問者。 為什麼? 這裡有一個指南,說明為什麼瀏覽器測試可能不是開發網站最有趣的部分,但它與選擇正確的域名和提供良好的用戶體驗同樣重要。

什麼是瀏覽器測試?

簡單來說,瀏覽器測試意味著檢查在不同瀏覽器(如資源管理器、Firefox 或 Chrome)中查看時所有網頁的外觀。 您可能不知道不同的瀏覽器可以為您的網站提供不同的外觀,但這是真的,只有通過測試您的網站,您才能真正像其他人一樣看到您的網頁。

如果您已經有一個已啟動並正在運行的站點,並且您當前沒有進行瀏覽器測試,那麼您現在就必須開始。 如果您遇到這種情況,要提出並找到答案的最關鍵問題之一是您的用戶如何訪問您的網站:最常用的瀏覽器是什麼? 從這裡開始,為您提供訪客體驗的快照。

為什麼瀏覽器測試很重要?

那些使用互聯網的人現在可以選擇多種瀏覽器。 決定不進行任何瀏覽器測試——以及未來添加頁面或更改設計時的測試——意味著許多潛在訪問者可能會發現您的網站無法訪問或難以查看。 將那些使用智能手機瀏覽的用戶以及任何未針對移動設備用戶進行兼容性檢查的網站都納入考慮範圍,這可能意味著從第一天起就失去收入。

最近的一個發展增加了為什麼瀏覽器測試現在更加重要的重要性是谷歌現在宣佈在計算其排名位置算法時將查看網站的速度。 這意味著,如果您的網站速度較慢,那麼在選擇誰位於搜索結果的頂部時,Google 會將此算作對您不利——如果您還沒有考慮過瀏覽器測試,那麼這是一個及時的機會它。

什麼會導致您的網站看起來不同?

有許多問題和影響可能意味著用戶會以與您預期的方式不同的方式在他們的屏幕上查看您的網站。 有很多變量——包括一些你無法控制的變量——這意味著每個訪問者可能會以略有不同的方式看到你的網站。 這些是意味著您可能會遇到網站顯示問題的主要元素:

  • 用戶硬件:機器中安裝的顯卡、顏色設置和訪問者使用的顯示分辨率設置可能對每個人都有不同的體驗
  • 軟件:正在使用的操作系統和安裝的字體
  • 舊版本的瀏覽器:一些訪問者可能很長時間沒有更新他們的瀏覽器,這可能意味著他們無法完全訪問您的網站

瀏覽器測試和移動優化網站

由於現在使用互聯網的智能手機用戶數量與他們在筆記本電腦或平板電腦上訪問互聯網的原因相同,因此擁有一個快速且可訪問的網站至關重要。 您網站的訪問者通常在移動中,而不是坐在家裡,因此想要,不,需要,即時訪問。 他們不想等待圖像下載或發現自己遇到死鏈接或無法播放的視頻。

谷歌算法是一個嚴密保密的秘密,因為它決定了誰來確保任何搜索引擎結果中令人垂涎的頭把交椅。 不過,它已宣布,從 2015 年 4 月 21 日起,它正在增加對移動友好性的使用,作為其排名決定的一部分。 這意味著從這一天開始,移動設備設置將影響 Google 是否認為該網站是高質量的並且與所進行的搜索相關。

測試設置

如果您不是 Web 開發專家,請不要擔心。 您不需要構建自己的測試設置——您只需要知道測試是構建站點的重要部分,在站點啟動之前和之後作為維護的一部分。

對於那些在其他 IT 領域具有一些技術背景並希望涉足瀏覽器測試的人來說,框架瀏覽器測試設置將包括:

  • 測試瀏覽器:Mac 和 Windows 變體
  • 測試設備:不同的 iPhone、Android 機型和 Macbook
  • 同步測試系統:跨不同瀏覽器同時進行測試
  • 遠程調試軟件:能夠調試無法右鍵單擊的移動站點
  • 邊緣情況瀏覽器:探索和解決意外的用戶輸入、中斷的會話或正在使用的令人難以置信的舊瀏覽器
  • 屏幕截圖測試:自動測試以提供即時查看快照
  • 視口調整工具:訪問者正在使用的屏幕大小 - 它會因設備而異

一些幫助測試您的網站的好工具

由於瀏覽器測試是任何網站開發中不可或缺的一部分,因此有一系列不斷變化的工具可以幫助每個人測試他們的網站; 無論是初學者還是專業人士。 不可能在所有可用的瀏覽器上測試您的網站,因此這就是技術介入的地方。 網站設計人員和開發人員有責任確保每個訪問者都可以查看網站的所有方面,並且所有功能都按其應有的方式工作。

最好的測試工具旨在使工作易於執行,並將結果直接消化並根據需要採取行動。

以下是一些出色的瀏覽器測試工具的概要——無論您的知識和經驗水平如何。

瀏覽

瀏覽

Browserling 是一個完全交互式的用戶工具,使用起來非常簡單。 無需附加組件或插件。 只需輸入網址並選擇將使用的瀏覽器和版本。 這就是它的全部內容,即時結果將向您展示您的網站對您選擇的組合的訪問者的外觀。 您可以選擇 100 種不同的組合,而且它是實時和匿名的,因此您不必擔心任何安全問題。

Browserling 是一個很好的工具,適合任何人開始使用他們的第一個網站並想要一種非常簡單的方法來快速檢查他們的網站。 只有幾個選擇並顯示結果。

幽靈實驗室

幽靈實驗室

除了網站在不同瀏覽器上對訪問者的顯示方式外,您還需要了解不同功能的工作方式; 例如頁面重新加載、滾動和點擊。 這就是 Ghostlab 介入的地方。

Ghostlab 能夠提供完整的用戶體驗,因此您可以準確地看到您的網站的外觀和性能——如果您過去沒有使用過瀏覽器測試,或者您已經有一段時間沒有測試過您的網站,這會讓您大開眼界。 該軟件包是一個快速且無縫的選擇,並包含一個服務器應用程序。 這意味著您可以將頁面同步到本地目錄,並且不會遇到任何問題。 還有一個工作區功能非常容易使用,因為不需要自定義設置。

對於在開始之前沒有進行特定設置的技術知識的人來說,這是一款出色的瀏覽器測試應用程序。 這是一個絕對的“即插即用”操作。 對於那些想要自定義設置的人來說,Ghostlab 是同步測試和遠程調試的絕佳選擇。

瀏覽器堆棧

瀏覽器堆棧

BrowserStack 是一個令人難以置信的工具,因為它能夠支持 300 多種不同的瀏覽器和移動設備(是的,您的訪問者確實可以使用許多不同的瀏覽器和移動設備!)並且您可以在線使用它,因此您不需要安裝在許多不同的設備上,以便能夠在任何地方工作。

BrowserStack 如此受歡迎的原因是因為您可以隨時準確地看到您的網站的真實情況。 它也非常適合修復錯誤,您可以使用它來測試您無法訪問的設備,因為產品非常廣泛。 對於那些有邊緣情況瀏覽器問題的人,這是適合您的工具。

醬汁實驗室

醬汁實驗室

運行大量測試以了解您的站點發生了什麼情況非常好,但是在發生這種情況時,如果您發現問題,在測試運行完成之前您無法對其進行任何處理可能會令人沮喪。

醬汁實驗室不是這樣。 在測試運行時,如果發現問題或您發現了要進一步調查的問題,您可以開始工作,修復問題,然後繼續測試。

跨瀏覽器測試

跨瀏覽器測試

瀏覽器測試不僅僅是查看網站在不同平台上查看時的表現; 它還涉及探索應用程序和插件的工作方式以及檢查站點速度。

CrossBrowserTesting 是一個非常有用的多功能跨瀏覽器測試工具。 它提供了令人難以置信的 1000 多種組合,您可以相互測試。 由於不同的瀏覽器與不同的操作系統和應用程序一起工作,這適合喜歡思考可以測試其網站的所有不同角度的人。

對於想要一站式服務的網站所有者,他們可以依靠一種工具來執行多項工作,CrossBrowserTesting 是完美的選擇。 這是因為當它們開始時,CrossBrowserTesting 提供:

  • 自動截圖
  • 現場測試
  • 登錄測試
  • 移動平台測試
  • 支持視頻嵌入測試

瀏覽器工具 - Firefox 和 Chrome

瀏覽器本身都帶有一個非常全面的開發人員工具包。 特別是一對夫婦現在具有特別好的功能:

  • Firefox:響應式設計模式讓您有機會更改屏幕的內容區域,而無需更改窗口大小。 這意味著您可以輕鬆地進行視口。 它可以在 Web Developer 區域菜單的工具部分中找到。

Firefox 響應式設計模式

  • Chrome:許多網站所有者已經將 Google Chrome DevTools 用於其網站管理的其他領域。 最近一個巧妙的補充是“覆蓋”設置,Chrome 將模擬移動設備。 它位於工具箱的“設置”部分,是一種在設備檢測提供移動網站時檢查網站如何工作的非常方便的方法。

鉻合金

螢火蟲

螢火蟲

隨著不同的訪問者從他們設備上可用的屏幕分辨率選項範圍中進行選擇,您需要知道它的外觀。

目前最流行的屏幕分辨率是 1366×768,但許多人會根據個人喜好改變它,或者如果他們需要提高分辨率以幫助視力不佳的人。 這是對以前用於台式機的幾乎標準分辨率 1024×768 的轉變。 放大或降低屏幕分辨率可能意味著您的網站如果太小看起來會被壓扁,或者如果大大增加則變得非常像素化。

Screenfly 將以一系列屏幕分辨率顯示您的網站,以便您可以通過不同訪問者的眼睛查看頁面。 互聯網可以在如此廣泛的設備上使用,例如台式機、筆記本電腦、平板電腦、移動設備,甚至通過電視,這是一個重要的檢查元素,Screenfly 可以很好地為您完成工作。

測試,測試…

如果您剛剛開始新創建的業務的網站之旅,請不要擔心。 老實說,您處於有利地位,因為您可以在幾乎沒有任何知識的情況下使用任何一種在線、實時、單站點執行所有工具,並且您會立即獲得結果。

只要您在啟動網站之前意識到它的重要性並採取行動,然後在每次添加頁面或進行任何設計更改時繼續努力,您就會發現這些工具可以為您完成所有工作。

雖然瀏覽器測試並不是創建新網站最令人愉悅或最刺激的方面,而您只想將其發布給全世界並儘快為您帶來訪問者,但它是成功網站的基石之一由於易用性和專業外觀,訪客成為客戶。

建立信任和聲譽至關重要,經過瀏覽器測試的網站意味著人們轉向或離開您的公司與忠誠或尋找您的競爭對手之間的區別。 如果到目前為止您還沒有認為瀏覽器測試很重要,那麼從今天開始是勢在必行的。 您很快就會獲得回報。

venimo/shutterstock.com 的文章縮略圖