【51CTO.com快譯】響應(yīng)式網(wǎng)頁設(shè)計是指設(shè)計可以從各種設(shè)備(包括手機(jī)和平板電腦)訪問的網(wǎng)頁。以響應(yīng)式網(wǎng)頁設(shè)計為例，布局適應(yīng)設(shè)備的屏幕尺寸和瀏覽方向。使用響應(yīng)式網(wǎng)頁設(shè)計可以改善用戶的瀏覽體驗，那樣用戶可以從任何位置輕松訪問您的網(wǎng)站;如果企業(yè)想要留住客戶并與客戶互動，響應(yīng)式網(wǎng)頁設(shè)計是最佳選擇。

專業(yè)網(wǎng)頁設(shè)計人員可幫助將普通網(wǎng)站變成響應(yīng)式網(wǎng)站。他們提供廣泛的服務(wù)，從創(chuàng)建針對移動端優(yōu)化的設(shè)計，到從頭開始創(chuàng)建新網(wǎng)站，不一而足。

響應(yīng)式網(wǎng)頁設(shè)計(RWD)是網(wǎng)站開發(fā)界的最新趨勢。它已成為一種需要考慮的基本設(shè)計，以滿足客戶的需求：讓公司以可行的成本覆蓋更廣大的受眾。開發(fā)響應(yīng)式網(wǎng)站時須遵循嚴(yán)格的準(zhǔn)則，比如瀏覽器兼容性測試。

鑒于如今移動設(shè)備日益普及，響應(yīng)式網(wǎng)頁設(shè)計的重要性顯著增加?，F(xiàn)在，對于Web設(shè)計人員、開發(fā)人員和測試人員來說，跨不同設(shè)備輕松訪問網(wǎng)站，創(chuàng)建可在移動設(shè)備上訪問的網(wǎng)站和應(yīng)用程序已變得很重要。

為了使網(wǎng)站在移動設(shè)備上易于訪問，網(wǎng)頁設(shè)計人員必須確保網(wǎng)站能夠靈活地適應(yīng)不同的屏幕尺寸。

瀏覽器兼容性是關(guān)鍵

原型設(shè)計是軟件開發(fā)流程的一個重要組成部分。為了確保移動設(shè)備的響應(yīng)方式與較大尺寸的設(shè)備一樣，在使用不同屏幕分辨率和瀏覽器尺寸的各種流行的移動設(shè)備上進(jìn)行測試至關(guān)重要。確保所有屏幕上有完全一致的響應(yīng)。

設(shè)備分辨率或尺寸方面的變化所需的任何調(diào)整(比如縮放或調(diào)整大小)都必須自動進(jìn)行，并且內(nèi)容不應(yīng)更改大小或重新排序?？鐬g覽器測試可確保軟件在所有瀏覽器和設(shè)備上按預(yù)期運(yùn)行。

注意設(shè)計兼容性

響應(yīng)式設(shè)計測試旨在確保網(wǎng)頁或應(yīng)用程序的功能在多個設(shè)備上繼續(xù)正常工作。雖然無法測試所有設(shè)備，但使用眾多設(shè)備進(jìn)行測試很重要，因為移動網(wǎng)站流量一直在穩(wěn)步上升。響應(yīng)式設(shè)計依賴目標(biāo)設(shè)備的寬度、設(shè)備屏幕分辨率和像素密度。

隨著移動設(shè)備變得更多樣化，定義和測試響應(yīng)式設(shè)計模板變得越來越困難。然而，借助綜合測試技術(shù)，您可以確保自己的設(shè)計適用于多種響應(yīng)式網(wǎng)頁布局。

在移動設(shè)備測試市場，有多個品牌可供選擇。響應(yīng)式設(shè)計測試需要考慮設(shè)備組合。雖然測試應(yīng)該涵蓋市面上的大多數(shù)常見設(shè)備，但很難全面地測試每種移動設(shè)備。

這些準(zhǔn)則將向您介紹如何確保圖片及其他元素不會在您的響應(yīng)式網(wǎng)頁設(shè)計中重疊。您的測試計劃應(yīng)涵蓋消費(fèi)者使用的所有主要設(shè)備：從臺式機(jī)到智能手機(jī)。如果您在從事客戶項目，需要從客戶那里獲得有關(guān)設(shè)備的一些信息。此外，許多測試人員沒有認(rèn)識到兩個看起來相似的設(shè)備會帶來全然不同的結(jié)果。

比如說，屏幕尺寸的微小差異可能導(dǎo)致加載和使用網(wǎng)站所需的時間量出現(xiàn)巨大差異。讓您的團(tuán)隊確定是否存在任何問題的一個好方法是，從客戶那里獲取有關(guān)其客戶在使用的設(shè)備的信息。

確保您網(wǎng)站的導(dǎo)航系統(tǒng)準(zhǔn)確無誤

響應(yīng)式導(dǎo)航欄可幫助您在移動設(shè)備上瀏覽您的網(wǎng)站。您可以快速訪問網(wǎng)站的不同部分，并返回到訪問過的上一頁。用戶的設(shè)備尺寸變化后，導(dǎo)航欄也應(yīng)該隨之變化。導(dǎo)航欄用于快速導(dǎo)航到您網(wǎng)站上的不同部分或不同頁面。導(dǎo)航欄通常包含五個或更多元素。確保您的導(dǎo)航欄適用于所有設(shè)備和瀏覽器。

測試響應(yīng)式網(wǎng)站時，重要的是要考慮RWD中存在的不同屏幕尺寸。確保您的網(wǎng)站面對最小的手機(jī)屏幕和最大的桌面顯示器都能完美運(yùn)行，可能需要特定的寬度或布局。這里允許端到端瀏覽的測試很重要，因為用戶應(yīng)該能夠從各種尺寸的屏幕和各種類型的設(shè)備訪問您的網(wǎng)站。

轉(zhuǎn)向并行測試

在您的移動版和桌面版上并行工作是最好的測試方式。這可提高您的效率，并讓您可以為用戶創(chuàng)建更順暢的響應(yīng)式網(wǎng)頁設(shè)計體驗。如果沒有并行測試，您就無法確定網(wǎng)頁的質(zhì)量水準(zhǔn)。測試對于RWD測試流程的所有階段都至關(guān)重要。測試對于響應(yīng)式網(wǎng)頁設(shè)計流程的所有階段都至關(guān)重要。

雖然分別測試桌面版和移動版可能更具成本效益，但這并不能讓您了解全貌。并行測試是跨多個設(shè)備創(chuàng)建無縫用戶體驗的關(guān)鍵。借助并行測試，您可以在手機(jī)、平板電腦和臺式機(jī)上獲得同樣的體驗。這將讓您可以通過移動響應(yīng)式網(wǎng)頁設(shè)計獲得更好的用戶體驗。

響應(yīng)式網(wǎng)頁設(shè)計是一種多設(shè)備體驗。用戶希望在其臺式機(jī)、平板電腦和移動設(shè)備上找到同樣的內(nèi)容和功能。借助并行測試，您可以確保頁面內(nèi)容非常適合在多個設(shè)備上瀏覽。請記住，測試是響應(yīng)式網(wǎng)頁設(shè)計流程中一個非常重要的環(huán)節(jié)。如果不進(jìn)行測試，您無法確定用戶在跨設(shè)備和瀏覽器訪問您網(wǎng)站方面的體驗有多好。

不要完全依賴功能測試

代碼測試并不驗證按鈕和鏈接在所有瀏覽器和設(shè)備上是否正確對齊。功能測試可以確認(rèn)布局在不同瀏覽器和設(shè)備上的實現(xiàn)統(tǒng)一，確保用戶有一致的體驗。功能測試確認(rèn)網(wǎng)站功能根據(jù)代碼來工作。但是這種測試并不確認(rèn)按鈕和鏈接在所有瀏覽器和設(shè)備上是否正確對齊。雖然手動測試最有效，但它并沒有考慮用戶體驗。

比如說，您可能希望在將網(wǎng)站上線之前測試不同的瀏覽器和設(shè)備。這就是為什么成功的發(fā)布流程通常需要自動化視覺回歸測試。可是問題是，編寫測試以檢查對齊既緩慢又費(fèi)錢。因此，為了降低成本，并優(yōu)先考慮客戶最關(guān)心的功能，您經(jīng)常發(fā)現(xiàn)自己會略過這類測試。

在原始設(shè)備和現(xiàn)有設(shè)備上檢查您的網(wǎng)站

在不同的移動設(shè)備和瀏覽器上測試您的網(wǎng)站將有助于找到布局問題。有時，由于特定的配置，問題在您的生產(chǎn)環(huán)境中看不到。比如說，某款手機(jī)的瀏覽器每英寸可以處理的像素比另一款瀏覽器更多或更少。定義您的測試參數(shù)。確保您擁有對觀眾而言最重要的設(shè)備。您網(wǎng)站的目的是獲得更多的流量和銷售額。

您希望自己的網(wǎng)站引人注目，但又不想在設(shè)計上花費(fèi)大量時間。一次性原型設(shè)計工具將幫助您在各種設(shè)備上設(shè)計并測試線框和原型。模擬日常瀏覽的一次性原型設(shè)計工具可以幫助您深入了解用戶如何與您設(shè)計的網(wǎng)頁進(jìn)行交互。通過模擬各種不同的瀏覽器，您可以測試您的網(wǎng)站在不同手機(jī)設(shè)備上瀏覽時所呈現(xiàn)的外觀。

借助手動測試或自動化測試在實際設(shè)備上進(jìn)行測試，您可以確保用戶獲得最佳的移動體驗。在實際設(shè)備上進(jìn)行測試可以讓您深入地了解您的網(wǎng)站在不同情況下有怎樣的呈現(xiàn)。

考慮到所有這些因素，在實際設(shè)備上進(jìn)行測試顯然至關(guān)重要，無論是手動測試，還是借助設(shè)備提供的某種形式的自動化測試。這讓您可以確信自己的網(wǎng)站是否有效、吸引力有多大以及瀏覽起來多容易。

在各種顯示模式下測試您的設(shè)計

響應(yīng)式設(shè)計測試讓用戶可以檢查網(wǎng)站/應(yīng)用程序在不同狀態(tài)下在移動設(shè)備上如何顯示。應(yīng)該在橫向模式和縱向模式下都可以瀏覽。有多種工具可以幫助您實現(xiàn)響應(yīng)式設(shè)計。

響應(yīng)式設(shè)計是一種根據(jù)用于訪問頁面的設(shè)備來改變頁面布局的網(wǎng)頁設(shè)計。比如說，屏幕較大的筆記本電腦提供了更多的空間來顯示內(nèi)容，而智能手機(jī)屏幕較小，需要以不同的方式顯示控件和內(nèi)容以適應(yīng)屏幕尺寸。響應(yīng)式設(shè)計的“變革”專注于這樣的媒體查詢：消除針對不同屏幕尺寸的復(fù)雜編程，并提供幾個優(yōu)勢。

“響應(yīng)式網(wǎng)頁設(shè)計”(RWD)這個術(shù)語代表了網(wǎng)頁設(shè)計和開發(fā)的一種理念，而不是特定的設(shè)計方法。“響應(yīng)式”一詞是指網(wǎng)站對瀏覽它的設(shè)備做出響應(yīng)的方式。它可以調(diào)整布局、圖片/文本大小等元素，讓網(wǎng)站可以處于跨所有設(shè)備瀏覽的最佳狀態(tài)。

縮短網(wǎng)站加載時間

您和員工在很多時候需要外出。無法使用高速網(wǎng)絡(luò)時，擁有一個可以在移動設(shè)備上快速加載的網(wǎng)站版本至關(guān)重要。無論可用的網(wǎng)絡(luò)速度如何，移動網(wǎng)站都應(yīng)該始終快速加載，并且與桌面版相比應(yīng)該易于使用和導(dǎo)航。它們還應(yīng)該是輕量級的，因為屏幕尺寸常常比標(biāo)準(zhǔn)顯示器小。

漸進(jìn)式Web應(yīng)用程序是一種新方法，用來創(chuàng)建、啟動、衡量和維護(hù)針對移動端優(yōu)化的網(wǎng)站。其主要想法是制作一個類似應(yīng)用程序的網(wǎng)站，該網(wǎng)站也可以離線工作、立即加載。這使得網(wǎng)站響應(yīng)起來更快速，加載起來沒有任何問題，即使網(wǎng)絡(luò)速度慢或根本不可用。為了確保您網(wǎng)站的移動版快速加載，考慮優(yōu)化您的圖片。

確保您遵守不同瀏覽器建立的文件大小準(zhǔn)則。比如說，Chrome和Safari將移動設(shè)備上的圖片大小限制為32MB。提供出色的用戶體驗對于每個網(wǎng)站都至關(guān)重要，尤其是對于移動網(wǎng)站。研究表明，用戶對無法在移動設(shè)備上正常運(yùn)行的網(wǎng)站普遍感到不滿。隨著移動互聯(lián)網(wǎng)的使用量日益增加，使用移動設(shè)備訪問互聯(lián)網(wǎng)的消費(fèi)者數(shù)量也將隨之增加。

最佳響應(yīng)式網(wǎng)頁設(shè)計工具

LT Browser是一款多合一的Web瀏覽應(yīng)用程序，讓您可以在多達(dá)50多種安卓和iOS設(shè)備的屏幕上以縱向或橫向方式測試您的網(wǎng)站或Web應(yīng)用程序，它還擁有一款適用于網(wǎng)站和Web應(yīng)用程序的對移動端友好的測試器工具。憑借獨(dú)特的并排視圖，您可以在不同的瀏覽器上同時調(diào)試您的網(wǎng)站/Web應(yīng)用程序。

只需點(diǎn)擊一下，您就可以在全屏模式下制作網(wǎng)站的屏幕截圖。為了提高工作效率，它還提供多標(biāo)簽支持、數(shù)據(jù)保存模式、云同步及其他有用的功能。LT Browser是一款適用于安卓和iOS的高級移動瀏覽器，可幫助您創(chuàng)建大量的下一代網(wǎng)站。它是一款功能強(qiáng)大的對移動端友好的測試工具，讓您可以在網(wǎng)站上線前檢查網(wǎng)站的方方面面，確保網(wǎng)頁在所有設(shè)備上看起來都不錯。

LT Browser是在您的移動設(shè)備上測試網(wǎng)頁響應(yīng)能力的便捷方式。通過一鍵式全頁屏幕截圖或視頻錄制，您可以立即與自己的團(tuán)隊直觀地共享設(shè)計錯誤。共享的測試結(jié)果將在幾秒鐘內(nèi)包含注釋、標(biāo)記、評論和測試詳細(xì)信息，從而為您節(jié)省時間，而且無須費(fèi)力氣解釋您的網(wǎng)站在移動設(shè)備上有怎樣的外觀。

原文標(biāo)題：11 useful guidelines to improve responsive design testing，作者：Jamie Davidson

【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請注明原文譯者和出處為51CTO.com】